From c17311ba1351cd5e64654c3fc7b2fe765b1e7382 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Thu, 09 Oct 2025 11:53:12 +0800
Subject: [PATCH] 1
---
src/views/homePage/index.vue | 466 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 307 insertions(+), 159 deletions(-)
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 9f15555..180497e 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,7 +1,8 @@
<template>
- <div class="home_page">
- <Head></Head>
+ <Head></Head>
+ <div class="home_page">
+ <!-- <Head></Head>
<div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div>
<div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>
<div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div>
@@ -35,40 +36,92 @@
</van-swipe>
</van-notice-bar>
- <!-- <div class="flex justify-between mt-10">
- <van-swipe class="home_swipe_1" :autoplay="2000">
- <van-swipe-item v-for="value in swipe1" :key="value.key" class="flex justify-center items-center">
- <img :src="value.img" alt="" class="swipe-item-img">
- </van-swipe-item>
- <template #indicator="{ active, total }">
- <div class="custom-indicator"><span>{{ active + 1 }}</span>/{{ total }}</div>
- </template>
-</van-swipe>
-
-<div style="width:24rem">
- <van-swipe class="home_swipe_2" :autoplay="2000">
- <van-swipe-item v-for="value in swipe2" :key="value.key" class="flex justify-center items-center">
- <img :src="value.img" alt="" class="swipe-item-img">
- </van-swipe-item>
- <template #indicator="{ active, total }">
- <div class="custom-indicator flex justify-center items-center">
- <div v-for="value in total" :key="value" class="ml-1"
- :class="active + 1 === value ? 'active' : ''">
- </div>
- </div>
- </template>
- </van-swipe>
-
- <div class="purchase mt-7 font-bold flex justify-between items-center">
- {{ $t('购买加密货币') }}
- <van-icon name="arrow" />
- </div>
-</div>
-</div> -->
<div id="cryptos" class="pt-10">
<list-quatation :listData="qList" :tabShow="false" />
+ </div> -->
+
+ <div class="home_1 flex justify-around items-center">
+ <div v-for="i in tabbers" :key="i.key" @click="toPage(i.path)">
+ <img :src="i.icon" v-if="storeS.state.vant.theme == 'light'">
+ <img :src="i.icon2" v-else>
+ <div>{{ i.name }}</div>
+ </div>
</div>
+
+ <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>
+ <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.uuid)">
+ <div class="flex justify-start items-center">
+ <img :src="item.imgUrl" alt="" class="notice_img mr-5">
+ <div class="notice_content textColor">
+ <div>{{ item.startTime }}</div>
+ <div>{{ item.title }}</div>
+ </div>
+ </div>
+ </van-swipe-item>
+ </van-swipe>
+ </van-notice-bar>
+
+ <div class="tabs flex justify-start items-center textColor1">
+ <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key">
+ {{ i.name }}
+ </div>
+ </div>
+
+ <div id="cryptos">
+ <list-quatation :listData="qList" :tabShow="false" :tabActive="tab" />
+ </div>
+
+ <div class="home_2" @click="toPage('/quotes/index')">
+ {{ $t("更多") }}
+ <van-icon name="arrow-down" />
+ </div>
+
+ <div class="home_3 flex justify-start">
+ <img :src="LOGO" alt="">
+ <span>{{ $t('安全、便利、社交') }}</span>
+ </div>
+
+ <van-collapse v-model="activeName" accordion>
+ <van-collapse-item name="1" class="border_b">
+ <template #title>
+ <div class="flex justify-start items-center">
+ <img src="@/assets/imgs/home/home_23a.png" alt="" class="border_icon" v-if="storeS.state.vant.theme == 'light'">
+ <img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else>
+ {{ $t('公司') }}
+ </div>
+ </template>
+ <div style="padding-left: 2.3rem;">
+ <p @click="toPage('/aboutUs')">{{ $t('关于我们') }}</p>
+ <p @click="toPage('/helpCenter')">{{ $t('帮助中心') }}</p>
+ </div>
+ </van-collapse-item>
+ <van-collapse-item name="2" class="border_b">
+ <template #title>
+ <div class="flex justify-start items-center">
+ <img src="@/assets/imgs/home/home_21a.png" alt="" class="border_icon" v-if="storeS.state.vant.theme == 'light'">
+ <img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else>
+ {{ $t('法律') }}
+ </div>
+ </template>
+ <div style="padding-left: 2.3rem;">
+ <p @click="toPage('/TermsOfService')">{{ $t('serviceConf') }}</p>
+ </div>
+ </van-collapse-item>
+ <van-collapse-item name="3" class="border_b">
+ <template #title>
+ <div class="flex justify-start items-center">
+ <img src="@/assets/imgs/home/home_22a.png" alt="" class="border_icon" v-if="storeS.state.vant.theme == 'light'">
+ <img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else>
+ {{ $t('支援') }}
+ </div>
+ </template>
+ <div style="padding-left: 2.3rem;">
+ <p @click="toPage('/customerService')">{{ $t('onLineService') }}</p>
+ </div>
+ </van-collapse-item>
+ </van-collapse>
</div>
</template>
@@ -81,13 +134,15 @@
import { _getHomeList } from '@/service/cryptos.api'
import { _getNewsList1, _getPopupNews } from '@/service/user.api'
import { useStore } from "vuex";
-import { TIME_OUT } from "@/config";
+import { TIME_OUT, LOGO } from "@/config";
import { useUserStore } from '@/store/user';
-import { setStorage,getStorage } from '@/utils/index.js';
- let catchSymbol = getStorage('symbol')
- if(!catchSymbol){
- setStorage('symbol', 'btcusdt');
- }
+import { setStorage, getStorage } from '@/utils/index.js';
+import storeS from '@/store/store'
+
+let catchSymbol = getStorage('symbol')
+if (!catchSymbol) {
+ setStorage('symbol', 'btcusdt');
+}
const userStore = useUserStore()
const { t } = useI18n()
const router = useRouter()
@@ -97,17 +152,28 @@
// { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
// { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
// { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },
- { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },
- { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },
- { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
+ // { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },
+ // { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },
+ // { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
// { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' },/cryptos/Withdraw/withdrawPage
- { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
+ // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
// { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },
- { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },
// { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
- { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },
- { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/wantBuy' },
+ { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_12a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url), path: '/cryptos/exchangePage' },
+ { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url), path: '/ICO/ico' },
+ { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url), path: '/wantBuy' },
+ { key: 13, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_10b.png', import.meta.url), path: '/customerService' },
+]
+
+// 手风琴选中
+const activeName = ref('0')
+
+// tab切换
+const tab = ref(1)
+const tabList = [
+ { name: t('永续合约'), key: 1 },
+ { name: t('现货'), key: 2 },
]
// 获取公告数据
@@ -125,10 +191,21 @@
}
}
+// 获取客服链接
+const customer_service_url = ref(storeS.state.user.customer_service_url)
+
// 跳转页面
const toPage = (path) => {
if (!path) return
- router.push(path)
+ if (path == '/customerService') {
+ if (customer_service_url.value) {
+ window.location.href = customer_service_url.value;
+ } else {
+ router.push(path)
+ }
+ } else {
+ router.push(path)
+ }
}
// 轮播图数据
@@ -155,7 +232,7 @@
if (!(list instanceof Array)) {
return
}
- qList.value = list;
+ qList.value = list.slice(0, 4);
if (timeout.value) {
clearTimeout(timeout.value)
@@ -177,18 +254,34 @@
<style lang="scss">
.home_page {
- background: $white;
min-height: 100vh;
width: 100%;
padding: 1rem 1rem 10rem 1rem;
- // $log-c: #282828;
- $tab-c: #343434;
- $inp-c: #999;
- $crd-b: #f7f7f7;
+ font-size: 1.4rem;
+
+ .home_1 {
+ padding-top: 2rem;
+
+ div {
+ text-align: center;
+ font-size: 1.4rem;
+ }
+
+ img {
+ width: 2.8rem;
+ margin: 0 auto .4rem;
+ }
+ }
.index_notice {
height: 100px;
border-radius: 10px;
+ margin-bottom: 2rem;
+
+ @include themify() {
+ background: themed("main_background");
+ border: themed("border_color") solid 1px;
+ }
.notice-swipe {
height: 82px;
@@ -207,132 +300,187 @@
}
}
- .home_logo {
- width: 100%;
-
- img {
- width: 22.5rem;
- }
- }
-
- .logo_text {
- color: $log-c;
- font-size: 2rem;
- }
-
- .logo_text_small {
- color: $inp-c;
- font-size: 1.5rem;
- }
-
- .login_buts {
- width: 100%;
+ .tabs {
+ font-size: 1.8rem;
&>div {
- width: 21rem;
- height: 5rem;
- line-height: 5rem;
- border-radius: 2.5rem;
- font-size: 1.8rem;
- color: $log-c;
- }
-
- .login_but_z {
- background: $crd-b;
- }
-
- .login_but_d {
- background: $bg_yellow;
+ margin-right: 2rem;
}
}
- .home_grid {
- width: 100%;
+ .home_2 {
+ font-size: 1.5rem;
+ text-align: center;
+ padding-bottom: 1.2rem;
+ margin: 1rem 0 1rem;
- .grid_item {
- width: 25%;
- color: $tab-c;
- font-size: 1.6rem;
-
- .grid_item_img {
- width: 100%;
-
- img {
- width: 6.3rem;
- }
- }
+ @include themify() {
+ border-bottom: themed("divi_line") solid 1px;
}
}
+ .home_3 {
+ padding: 1rem 0;
- .home_swipe_1,
- .home_swipe_2 {
- width: 24rem;
- border-radius: 1rem;
- }
-
- .home_swipe_1 {
- .van-swipe-item {
- height: 23rem;
- background-color: $crd-b;
-
- .swipe-item-img {
- width: 100%;
- }
- }
-
- .custom-indicator {
- position: absolute;
- left: 5px;
- bottom: 5px;
- padding: 2px 5px;
- font-size: 1.8rem;
- background: rgba(255, 255, 255, 0.5);
- color: $inp-c;
-
- span {
- color: $log-c;
- }
+ img {
+ height: 2rem;
+ margin-right: 1rem;
}
}
- .home_swipe_2 {
- .van-swipe-item {
- height: 15rem;
- background-color: $crd-b;
-
- .swipe-item-img {
- width: 100%;
- }
+ .border_b {
+ @include themify() {
+ border-bottom: themed("divi_line") solid 1px;
}
- .custom-indicator {
- position: absolute;
- right: 5px;
- top: 1rem;
- padding: 2px 5px;
+ .van-collapse-item__title--expanded:after {
+ display: none;
+ }
- div {
- background: $inp-c;
- width: 0.6rem;
- height: 0.6rem;
- border-radius: 0.3rem;
- transition: 0.3s all;
- }
+ .van-cell__title {
+ font-weight: 600;
+ }
- .active {
- background: $bg_yellow;
- width: 2rem;
- }
+ .van-collapse-item__content {
+ padding-top: 0;
+ }
+
+ p {
+ font-size: 1.4rem;
+ }
+
+ .border_icon {
+ width: 1.5rem;
+ margin-right: 1rem;
}
}
- .purchase {
- color: $log-c;
- background: $crd-b;
- border-radius: 1rem;
- padding: 1.6rem 1.6rem 2rem 1.6rem;
- font-size: 2rem;
- }
+ // .home_logo {
+ // width: 100%;
+
+ // img {
+ // width: 22.5rem;
+ // }
+ // }
+
+ // .logo_text {
+ // color: $log-c;
+ // font-size: 2rem;
+ // }
+
+ // .logo_text_small {
+ // color: $inp-c;
+ // font-size: 1.5rem;
+ // }
+
+ // .login_buts {
+ // width: 100%;
+
+ // &>div {
+ // width: 21rem;
+ // height: 5rem;
+ // line-height: 5rem;
+ // border-radius: 2.5rem;
+ // font-size: 1.8rem;
+ // color: $log-c;
+ // }
+
+ // .login_but_z {
+ // background: $crd-b;
+ // }
+
+ // .login_but_d {
+ // background: $bg_yellow;
+ // }
+ // }
+
+ // .home_grid {
+ // width: 100%;
+
+ // .grid_item {
+ // width: 25%;
+ // color: $tab-c;
+ // font-size: 1.6rem;
+
+ // .grid_item_img {
+ // width: 100%;
+
+ // img {
+ // width: 6.3rem;
+ // }
+ // }
+ // }
+ // }
+
+
+ // .home_swipe_1,
+ // .home_swipe_2 {
+ // width: 24rem;
+ // border-radius: 1rem;
+ // }
+
+ // .home_swipe_1 {
+ // .van-swipe-item {
+ // height: 23rem;
+ // background-color: $crd-b;
+
+ // .swipe-item-img {
+ // width: 100%;
+ // }
+ // }
+
+ // .custom-indicator {
+ // position: absolute;
+ // left: 5px;
+ // bottom: 5px;
+ // padding: 2px 5px;
+ // font-size: 1.8rem;
+ // background: rgba(255, 255, 255, 0.5);
+ // color: $inp-c;
+
+ // span {
+ // color: $log-c;
+ // }
+ // }
+ // }
+
+ // .home_swipe_2 {
+ // .van-swipe-item {
+ // height: 15rem;
+ // background-color: $crd-b;
+
+ // .swipe-item-img {
+ // width: 100%;
+ // }
+ // }
+
+ // .custom-indicator {
+ // position: absolute;
+ // right: 5px;
+ // top: 1rem;
+ // padding: 2px 5px;
+
+ // div {
+ // background: $inp-c;
+ // width: 0.6rem;
+ // height: 0.6rem;
+ // border-radius: 0.3rem;
+ // transition: 0.3s all;
+ // }
+
+ // .active {
+ // background: $bg_yellow;
+ // width: 2rem;
+ // }
+ // }
+ // }
+
+ // .purchase {
+ // color: $log-c;
+ // background: $crd-b;
+ // border-radius: 1rem;
+ // padding: 1.6rem 1.6rem 2rem 1.6rem;
+ // font-size: 2rem;
+ // }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3