From cb38e5c2945684b383a1d4cbfcaf9e646610fb9a Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Thu, 09 May 2024 17:02:14 +0800
Subject: [PATCH] 首页的 熱門幣種数据的渲染

---
 src/page/home1.vue |  139 ++++++++++++----------------------------------
 1 files changed, 37 insertions(+), 102 deletions(-)

diff --git a/src/page/index.vue b/src/page/home1.vue
similarity index 72%
rename from src/page/index.vue
rename to src/page/home1.vue
index 8604289..eb88661 100644
--- a/src/page/index.vue
+++ b/src/page/home1.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;

--
Gitblit v1.9.3