首页的 熱門幣種数据的渲染

dcc

2024-05-09 cb38e5c2945684b383a1d4cbfcaf9e646610fb9a

 src/page/home1.vue

File was renamed from src/page/index.vue
@@ -3,79 +3,36 @@
    <!--    //头部组件-->
    <div class="px-32">
      <ex-header :unread_num="`${unreadMsg_num}`"></ex-header>
      <ioe-swiper/>
      <ioe-swiper />
      <van-notice-bar class="font-26 textColor" left-icon="volume-o" :scrollable="false" background="transparent"
        :text="announceTitle">
        <div slot="left-icon" class="pr-13 flex items-center"><img class="w-36 h-36" src="../assets/Horn.png" alt="">
        </div>
        <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
          <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.id)">{{ item.title
          }}</van-swipe-item>
        </van-swipe>
        <div class="ml-20 flex items-center" slot="right-icon" @click.stop="$router.push('/announce')"><img
            class="w-36 h-36" src="../assets/more.png" alt="">
        </div>
      </van-notice-bar>
    </div>
    <div>
      <div class="list-hot">
        <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-grid :column-num="2">
          <van-grid-item @click="$router.push('/perpetualContract/btc')">
            <ul class="box-border flex flex-col w-full px-16">
              <li data-v-52efe258="" class="flex items-center justify-between mb-16">
                <p class="flex items-end"><strong class="font-32 mr-10 font-400">BTC</strong>
                  <span class="font-24 grey font-400">/USDT</span>
                </p>
                <img src="https://ibhfdhb.site/wap/symbol/btc.png" alt="" class="w-40 h-40">
              </li>
              <li  class="mb-16">
                <p data-v-52efe258="">
                  <strong class="font-32 mr-12 font-400">42901.3</strong>
                  <span class="font-24 grey font-400">≈ $64351.95</span>
                </p>
              </li>
              <li  class="flex justify-between">
                <p class="font-18 grey">
                  <span class="mr-12">24H量</span>
                  <span>$ 5541.614 万</span>
                </p><span
                  class="font-18 green">+0.89%</span>
              </li>
            </ul>
          </van-grid-item>
          <van-grid-item @click="$router.push('/perpetualContract/etc')">
            <ul class="box-border flex flex-col w-full px-16">
              <li data-v-52efe258="" class="flex items-center justify-between mb-16"><p
                  class="flex items-end"><strong
                  data-v-52efe258="" class="font-32 mr-10 font-400">ETC</strong><span
                  class="font-24 grey font-400">/USDT</span>
              </p><img data-v-52efe258="" src="https://ibhfdhb.site/wap/symbol/etc.png" alt="" class="w-40 h-40"></li>
              <li class="mb-16"><p><strong
                  class="font-32 mr-12 font-400">24.5396</strong><span
                  class="font-24 grey font-400">≈ $36.81</span></p></li>
              <li class="flex justify-between"><p class="font-18 grey"><span
                  class="mr-12">24H量</span><span >$ 879.957 万</span></p><span
                  class="font-18 red">-0.36%</span></li>
            </ul>
          </van-grid-item>
          <van-grid-item @click="$router.push('/perpetualContract/eth')">
            <ul  class="box-border flex flex-col w-full px-16">
              <li class="flex items-center justify-between mb-16"><p
                  class="flex items-end"><strong
                  class="font-32 mr-10 font-400">ETH</strong><span
                  class="font-24 grey font-400">/USDT</span>
              </p><img data-v-52efe258="" src="https://ibhfdhb.site/wap/symbol/eth.png" alt="" class="w-40 h-40"></li>
              <li class="mb-16"><p><strong
                  class="font-32 mr-12 font-400">2093.35</strong><span
                  class="font-24 grey font-400">≈ $3140.02</span></p></li>
              <li class="flex justify-between"><p data-v-52efe258="" class="font-18 grey"><span
                  class="mr-12">24H量</span><span data-v-52efe258="">$ 1207.282 万</span></p><span
                  class="font-18 green">+2.28%</span></li>
            </ul>
          </van-grid-item>
        </van-grid>
    <div class="pt-64 contRound" style="border-top-left-radius: 30px;border-top-right-radius: 30px;">
      <ex-nav></ex-nav>
      <div class="h-150 text-white rounded-lg mt-34 flex items-center justify-center contNav"
        @click="$router.push('/wantBuy')">
        <img :src="require(`../assets/theme/${theme}/image/c2c1.png`)" alt="" class="w-96 h-96" />
        <div class="c2cbg w-616 h-56 lh-56 font-30 pl-50 box-border" :class="theme == 'dark' ? 'dark' : 'light'">{{
          $t('C2C快捷交易') }}</div>
      </div>
      <list-quatation :listData="qList" @listSort="listSort"/>
      <bottomOfHomepage/>
      <list-quatation :listData="qList" @listSort="listSort" />
      <div class="addBox" v-show="showSave" @click="closeSaveBox">
        <div class="add">
          <div class="font-26">
            <div class="flex flex-col">
              <b>{{ $t('安装此应用程序') }}:</b>
              <div class="mt-10">{{ $t('按') }}“<img style="width:22px;vertical-align: middle;margin: 0 2px;"
                                                     :src="require(`../assets/theme/${theme}/image/press.png`)"/>”{{
                  $t('和')
                }}<b>“{{ $t('添加到主屏幕') }}</b>
                  :src="require(`../assets/theme/${theme}/image/press.png`)" />”{{ $t('和') }}<b>“{{ $t('添加到主屏幕') }}</b>
              </div>
            </div>
            <div class="mt-10">({{ $t('如已安装,请关闭此窗口') }})</div>
@@ -86,12 +43,11 @@
      </div>
    </div>
    <van-popup v-model="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
               v-for="item in popupNewsList" :key="item.id">
      v-for="item in popupNewsList" :key="item.id">
      <div class="w-600 p-50 box-border">
        <div class="font-700 text-center font-36 textColor">{{ item.title }}</div>
        <div class="flex justify-center mt-30" v-if="item.imgUrl"><img
            :src="`${BASE_URL}public/showimg!showImg.action?imagePath=${item.imgUrl}`" class="w-200 h-200" alt=""/>
        </div>
            :src="`${BASE_URL}public/showimg!showImg.action?imagePath=${item.imgUrl}`" class="w-200 h-200" alt="" /></div>
        <div class="py-36 textColor" v-html="item.content"></div>
        <van-button color="#1D91FF" class="w-full h-80 rounded-full" type="info" @click="closePopNotice(item)">
          {{ $t('我知道了') }}
@@ -101,21 +57,19 @@
  </div>
</template>
<script>
import {Popup, Swipe, SwipeItem,Grid,GridItem} from "vant";
import { Popup, Swipe, SwipeItem } from "vant";
import IoeSwiper from "@/components/ioe-swiper";
import ListQuatation from "@/components/list-quotation";
import {mapGetters, mapActions} from "vuex";
import {TIME_OUT} from "@/config";
import {SET_COIN_LIST} from '@/store/const.store'
import {_getHomeList} from '@/API/home.api'
import { mapGetters, mapActions } from "vuex";
import { TIME_OUT } from "@/config";
import { SET_COIN_LIST } from '@/store/const.store'
import { _getHomeList } from '@/API/home.api'
import ExHeader from "@/components/ex-header/index.vue";
import ExNav from "@/components/ex-nav/index.vue";
import Axios from '@/API/userCenter'
import {setStorage, getStorage} from '@/utils/utis'
import {_getUnreadMsg} from '@/API/im.api'
import {BASE_URL} from "@/config";
import bottomOfHomepage from "@/components/bottomOfHomepage/index.vue";

import { setStorage, getStorage } from '@/utils/utis'
import { _getUnreadMsg } from '@/API/im.api'
import { BASE_URL } from "@/config";
export default {
  name: "HomePage",
  components: {
@@ -123,12 +77,9 @@
    ListQuatation,
    ExHeader,
    ExNav,
    bottomOfHomepage,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  // async created() {
  //   // this.init();
@@ -149,7 +100,7 @@
  data() {
    const arr = [] // 初始化数据
    for (let i = 0; i < 10; i++) {
      arr.push({id: i})
      arr.push({ id: i })
    }
    return {
      currentSwitch: 1,
@@ -291,7 +242,7 @@
    },
    toAnnounceDetail(announceId) {
      if (announceId) {
        this.$router.push({name: 'AnnounceDetail', query: {id: announceId}})
        this.$router.push({ name: 'AnnounceDetail', query: { id: announceId } })
      }
    },
    getIsSave() {
@@ -314,10 +265,8 @@
      setStorage(`${this.TITLE}addtoClosed`, 1)
      this.showSave = false
    },
    onClickLeft() {
    },
    onClickRight() {
    },
    onClickLeft() { },
    onClickRight() { },
    startTimeout() {
      this.clearTimeout()
      this.fetchQList()
@@ -343,9 +292,7 @@
    this.startTimeout()
    if (this.userInfo.token) {
      this.fetchUnread()
      this.unreadMsg_timer = setInterval(() => {
        this.fetchUnread()
      }, 5000);
      this.unreadMsg_timer = setInterval(() => { this.fetchUnread() }, 5000);
    } else {
      this.unreadMsg_num = ''
    }
@@ -367,18 +314,6 @@
};
</script>
<style lang="scss" scoped>
.grey{
  color: #868c9a;
}
.font-18{
  font-size: 1.125rem;
}
.px-32 {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.home {
  width: 100%;
  box-sizing: border-box;