新币+dapp app 前端
src/components/list-quotation/index.vue
@@ -1,7 +1,7 @@
<template>
  <div class="list-quatation">
    <h1 data-v-52efe258="" class="font-34 text-black pl-30 pr-30 pt-40 pb-40 bg-grey font-400 text-black font-600">
      {{$t('币种行情')}}</h1>
      {{ $t('币种行情') }}</h1>
    <van-list>
      <van-cell>
        <div class="flex items-center w-full text-grey font-26">
@@ -22,13 +22,13 @@
            <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
              <li class="flex items-center left">
                <img
                  :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
                  alt="logo" class="w-72 h-72 rounded-full mr-16" />
                    :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
                    alt="logo" class="w-72 h-72 rounded-full mr-16"/>
                <p class="flex flex-col">
                  <span class="flex items-end font-32 flex items-center">
                    <span class="textColor font-600 font-30">{{ item.name && item.name.toUpperCase() || '--' }}</span>
                <!--    <span class="font-24 text-grey" style="position: relative; top: 1px">
                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
                    <!--    <span class="font-24 text-grey" style="position: relative; top: 1px">
                          {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
                  </span>
                  <span class="font-24 text-grey mt-10">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
@@ -36,9 +36,11 @@
              </li>
              <li class="flex flex-col items-end mid">
                <p class="textColor font-32 font-600">{{ item.close || '--' }}</p>
                <p class="font-24 text-grey mt-10">{{ currency.currency_symbol }}{{ item.close && (item.close *
                  currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length
                    : 2) || '--' }}</p>
                <p class="font-24 text-grey mt-10">{{ currency.currency_symbol }}{{
                    item.close && (item.close *
                        currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length
                        : 2) || '--'
                  }}</p>
              </li>
              <li class="right flex items-center justify-end">
                <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio > 0">
@@ -53,10 +55,12 @@
          <van-cell v-for="item in showList" :key="item.id">
            <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
              <li class="flex items-center left">
                <img :src="`${HOST_URL}/symbol/${item.symbol}.png`" alt="logo" class="w-72 h-72 rounded-full mr-16" />
                <img :src="`${HOST_URL}/symbol/${item.symbol}.png`" alt="logo" class="w-72 h-72 rounded-full mr-16"/>
                <p class="flex flex-col">
                  <span class="flex items-end font-32 flex items-center">
                    <span class="textColor font-600 font-30">{{ item.symbol && item.symbol.toUpperCase() || '--' }}</span>
                    <span class="textColor font-600 font-30">{{
                        item.symbol && item.symbol.toUpperCase() || '--'
                      }}</span>
                    <span class="font-24 text-grey" style="position: relative; top: 1px">
                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span>
                  </span>
@@ -65,17 +69,20 @@
              </li>
              <li class="flex flex-col items-end mid">
                <p class="textColor font-32 font-600">{{ item.close }}</p>
                <p class="font-24 text-grey mt-10">{{ currency.currency_symbol }}{{ item.close && (item.close *
                  currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length
                    :
                    2) }}</p>
                <p class="font-24 text-grey mt-10">{{ currency.currency_symbol }}{{
                    item.close && (item.close *
                        currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length
                        :
                        2)
                  }}</p>
              </li>
              <li class="right flex items-center justify-end text-right">
                <div v-if="active == 3" class="textColor w-182 font-700 font-24">
                  {{ (item.volume * 1).toFixed(2) }}
                </div>
                <template v-else>
                  <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio > 0">
                  <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn"
                     v-if="item.change_ratio > 0">
                    +{{ item.change_ratio }}%</p>
                  <p class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn" v-else>
                    {{ item.change_ratio }}%</p>
@@ -86,6 +93,12 @@
        </div>
      </transition-group>
    </van-list>
    <div class="flex flex-col justify-center items-center pb-58 mt-20" @click="$router.push('/quotes/?active=3')">
      <p class="text-grey font-28 mb-8">{{$t('查看')}}</p>
      <img
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAUCAYAAADLP76nAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGqSURBVHgB1ZdLTsJQFIb/U0SnLoEl6A5kZEwcwNCRcSI+JqBggkiABGEgBB0ZdACuQIwjTYy6AlkCS2giE5ByPVeDmqZIX2j7JU0f99zk/r3/6TklMMeVixcCFuAjBNDuB4JhKlXqTYDW4UNYxJPC5xYfKvyGEB0M3xIkr8vl85CYCTyCEIIPEILtM9CihfR2R+4A0nxBAy3MQy14nCGJ0343GJaLl/ekDyhW6zlFUB4eRGAYzyS3zn4+I6PA4kk9rhDV4B1UKIgc7m0+6wdo3AzP5AUna28w/LKMHmXcvO+8QBv/hCA0e93ZxXGLlxBMUKpe1vhNxPGHcLLmj/ZjhUlxAZjg4f72Lry8ymppCdNH1TSxlk3F6maCTe3ACK7aEd7X2tTyYoLfjbAkQDKt5JZtQf81GC0UNix1BZYFSHK1xvyc1m/w9AhcwKzfjbAlYIQLRU/VIOLZZOwKNnEkQGK76LHfhRhEMwe7jj7TjgVIrOaFXb8b4YoAyYeIYOAaE36MZDPGfk/AJVwTMOKXoqdyM5bXN2NOMVXIrGBY9D79vpJJ7dzAZd4BKZy99D2A6PwAAAAASUVORK5CYII="
        alt="more" class="w-24 h-10">
    </div>
    <!-- <div class="flex flex-col justify-center items-center pb-58 mt-20" @click="$router.push('/quotes/?active=3')" v-if="showMore">
        <p class="text-grey font-28 mb-8">{{ $t('查看') }}</p>
        <img src="./icon-arrow_more.png" alt="more" class="w-24 h-10"/>
@@ -94,11 +107,12 @@
</template>
<script>
import { List, Cell } from 'vant'
import { mapGetters } from 'vuex'
import { fixDate, setStorage } from "@/utils/utis";
import {List, Cell} from 'vant'
import {mapGetters} from 'vuex'
import {fixDate, setStorage} from "@/utils/utis";
import ExTabs from "@/components/ex-tabs/index.vue";
import { HOST_URL } from '@/config'
import {HOST_URL} from '@/config'
export default {
  name: 'ListQuotation',
  data() {
@@ -127,7 +141,7 @@
    },
  },
  computed: {
    ...mapGetters({ currency: 'home/currency' }),
    ...mapGetters({currency: 'home/currency'}),
  },
  components: {
    [List.name]: List,
@@ -277,4 +291,7 @@
    margin-top: 5px;
  }
}
.list-quatation{
  background-color: #ffffff;
}
</style>