| | |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | </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"> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | </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"/> |
| | |
| | | </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() { |
| | |
| | | }, |
| | | }, |
| | | computed: { |
| | | ...mapGetters({ currency: 'home/currency' }), |
| | | ...mapGetters({currency: 'home/currency'}), |
| | | }, |
| | | components: { |
| | | [List.name]: List, |
| | |
| | | margin-top: 5px; |
| | | } |
| | | } |
| | | .list-quatation{ |
| | | background-color: #ffffff; |
| | | } |
| | | </style> |