首页根据原型图重新做了

dcc

2024-05-07 826f9b002701f2dbe42839dadab1af0cc2df8a6e

 src/components/list-quotation/index.vue

@@ -1,36 +1,18 @@
<template>
  <div class="list-quatation">
    <ex-tabs @tabs="onTabs"></ex-tabs>
    <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>
    <van-list>
      <van-cell>
        <div class="flex items-center w-full text-grey font-26">
          <div class="left flex items-center">
            <span>{{ $t('交易对') }}</span>
            <div class="filter-box ml-10" v-if="active == 0">
              <div class="w-14 h-12" :class="[sortVal == 1 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(1)">
              </div>
              <div class="w-14 h-12" :class="[sortVal == 2 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(2)">
              </div>
            </div>
            <span>{{ $t('币种') }}/{{ $t('交易量') }}</span>
          </div>
          <div class="mid text-right flex justify-end items-center">
            {{ $t('最新价') }}
            <div class="filter-box ml-10" v-if="active == 0">
              <div class="w-14 h-12" :class="[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(3)">
              </div>
              <div class="w-14 h-12" :class="[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(4)">
              </div>
            </div>
            {{ $t('价格') }}
          </div>
          <div class="right text-right flex justify-end items-center">
            {{ active == 3 ? $t('成交额') : $t('24h涨跌幅') }}
            <div class="filter-box ml-10" v-if="active == 0">
              <div class="w-14 h-12 " :class="[sortVal == 5 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(5)">
              </div>
              <div class="w-14 h-12" :class="[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(6)">
              </div>
            </div>
            <!--                  <img src="./icon-sort.png" alt="icon" class="w-13 h-22 ml-5"/>-->
            {{ active == 3 ? $t('成交额') : $t('涨跌幅') }}
          </div>
        </div>
      </van-cell>