From 5f2b76b86980a149c9299acbf022c879e75b85bd Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Sat, 10 Jan 2026 10:43:23 +0800
Subject: [PATCH] 1
---
src/views/homePage/index.vue | 141 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 123 insertions(+), 18 deletions(-)
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index e0a06d8..dc8058d 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,10 +1,21 @@
<template>
- <div class="home_page">
+ <div class="home_page mainBackground textColor">
- <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>
+ <Head @search="onSearch"></Head>
+ <!-- <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div> -->
+
+ <van-swipe class="home_logo" :autoplay="3000" indicator-color="white">
+ <van-swipe-item><img src="@/assets/imgs/home/Slider-1.jpg" alt=""></van-swipe-item>
+ <van-swipe-item><img src="@/assets/imgs/home/Slider-2.jpg" alt=""></van-swipe-item>
+ <van-swipe-item><img src="@/assets/imgs/home/Slider-3.jpg" alt=""></van-swipe-item>
+ </van-swipe>
+
+ <!-- <video autoplay loop muted playsinline class="home_logo">
+ <source src="@/assets/video/home_1.mp4" type="video/mp4">
+ </video> -->
+
+ <!-- <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> -->
<div class="login_buts flex justify-between pl-10 pr-10 pt-10"
@@ -20,7 +31,8 @@
</div>
</div>
- <van-notice-bar class="font-26 mt-10 index_notice" background="#fafbfc" :scrollable="false" wrapable
+ <!-- 新闻 -->
+ <van-notice-bar class="font-26 mt-10 index_notice" background="#333" :scrollable="false" wrapable
color="#333333">
<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)">
@@ -34,6 +46,9 @@
</van-swipe-item>
</van-swipe>
</van-notice-bar>
+
+ <h4 class="font-bold mt-10 mb-5 js_title">会社紹介</h4>
+ <p class="js_content mb-5">ZFXデジタル通貨取引プラットフォーム(メタバース全球デジタル通貨取引プラットフォーム)は、現在唯ーの真に分散化されたメタパース·プロジェクトです。これは、コイン対コイン取引、先物契約、コインの融資·借入、OTC取引、全ネットワーク取引、分散型取引など、多様なシステム機能を提供するグローバルな総合取引プラットフォームであり、あらゆる種類の投資家の取引ニーズを満たします。メタバースの概念を暗号通貨に基づく経済と結びつけ、世界中の主要取引所の市場深度と効果的に接続し、より高い流動性を提供することを目指しています。メタ·ユニバース·トークン(ZFX、以下「ZFX」)は、メタバース内の交換手段として使用され人々がメタパース世界を探検し、理解することを導きます。さらに、ZFXはZFXデジタル通貨取引プラットフォームのエコシステムのさまざまな分野への入ロとして機能しますーゲーム、パーチャル·コンサート&クラブ、メディア、エンターテインメント、教育、メタバース内での旅行、仮想不動産への投資、ゲーム内の素材採掘、他のプレイヤーへのサービス支払い、ソーシャル体験およびアプリケーション、そして通貨が物理世界で使用できるあらゆるものに対してーただしZFXは仮想世界で作用します。要するに、それは仮想世界のデジタル通貨です。</p>
<!-- <div class="flex justify-between mt-10">
<van-swipe class="home_swipe_1" :autoplay="2000">
@@ -69,6 +84,19 @@
<div id="cryptos" class="pt-10">
<list-quatation :listData="qList" :tabShow="false" :tabActive="2" />
</div>
+
+ <van-popup v-model:show="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
+ v-for="item in popupNewsList" :key="item.id">
+ <div class="w-350 p-20 box-border popup_news">
+ <div class="font-700 text-center font-28 textColor">{{ item.title }}</div>
+ <div class="flex justify-center mt-30" v-if="item.imgUrl"><img :src="`${item.imgUrl}`"
+ class="w-200 h-200" alt="" /></div>
+ <div class="py-10 textColor content-title" v-html="item.content"></div>
+ <van-button color="#1194F7" class="w-full h-40 rounded-full" type="info" @click="closePopNotice(item)">
+ {{ $t('我知道了') }}
+ </van-button>
+ </div>
+ </van-popup>
</div>
</template>
@@ -92,26 +120,26 @@
const { t } = useI18n()
const router = useRouter()
const store = useStore();
-const customer_service_url = ref(customerServiceUrl) // 客服链接,有值的话就会跳转到客服外链
const tabbers = [
// { 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: 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' }
{ 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: 9, name: t('划转'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/my/transfer' },
+ // { key: 9, name: t('划转'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/my/transfer' },
// { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
- { key: 11, name: "STO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },
+ // { key: 11, name: "STO", 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: 13, name: t('质押'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '' },
{ key: 14, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10.png', import.meta.url), path: '/customerService' },
+ { key: 15, name: 'DXCM PDF', icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: 'https://www.dexm-whitepaper.com/' },
]
// 获取公告数据
@@ -121,6 +149,24 @@
}).then(res => {
announceList.value = res
})
+
+// 获取弹出新闻
+const popupNewsList = ref([])
+_getPopupNews({
+ language: useI18n().locale.value,
+}).then(res => {
+ if (res && res.length > 0) {
+ let list = res
+ list.forEach(item => {
+ item.showPopUp = true
+ })
+ popupNewsList.value = list
+ }
+})
+// 关闭弹窗新闻
+const closePopNotice = (item) => {
+ item.showPopUp = false
+}
// 跳转公告详情
const toAnnounceDetail = (announceId) => {
@@ -133,9 +179,16 @@
const toPage = (path) => {
if (!path) return
+ // 如果路径包含 "http"，则作为外链跳转
+ if (path && (path.startsWith('http://') || path.startsWith('https://'))) {
+ window.open(path, '_blank');
+ return;
+ }
+
if (path == '/customerService') {
- if (customer_service_url.value) {
- window.location.href = customer_service_url.value;
+ // 客服链接,有值的话就会跳转到客服外链
+ if (customerServiceUrl()) {
+ window.location.href = customerServiceUrl();
} else {
router.push(path)
}
@@ -158,6 +211,8 @@
//#region 行情数据----------------------------------------
let qList = ref([])
+let qListCope = ref([]) // 备份数据
+let key = ref('') // 搜索关键词
let timeout = ref(null)
const coinArr = computed(() => store.getters['home/coinArr']);
@@ -168,7 +223,16 @@
if (!(list instanceof Array)) {
return
}
- qList.value = list;
+
+ // 通过关键字进行筛选
+ if (key.value) {
+ qList.value = list.filter(item => {
+ return item.symbol_data.toLowerCase().includes(key.value.toLowerCase()) || item.name.toLowerCase().includes(key.value.toLowerCase())
+ })
+ } else {
+ qList.value = list
+ }
+ qListCope.value = list; // 备份数据
if (timeout.value) {
clearTimeout(timeout.value)
@@ -178,6 +242,20 @@
}, TIME_OUT)
}
fetchQList()
+
+// 搜索
+const onSearch = (val) => {
+ key.value = val
+
+ if (!val) {
+ qList.value = qListCope.value
+ return
+ }
+ let newList = qListCope.value.filter(item => {
+ return item.symbol_data.toLowerCase().includes(val.toLowerCase()) || item.name.toLowerCase().includes(val.toLowerCase())
+ })
+ qList.value = newList
+}
onBeforeUnmount(() => {
if (timeout.value) {
@@ -189,15 +267,34 @@
</script>
<style lang="scss">
+@import '@/assets/theme/index.scss';
+
.home_page {
- background: $white;
+ // background: $white;
min-height: 100vh;
width: 100%;
padding: 1rem 1rem 10rem 1rem;
// $log-c: #282828;
- $tab-c: #343434;
+ $tab-c: #888;
$inp-c: #999;
$crd-b: #f7f7f7;
+ .js_title{
+ font-size: 2rem;
+ text-align: center;
+ background: linear-gradient(to right, #87CEEB, #1E90FF, #0000CD);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ color: transparent;
+ }
+ .js_content{
+ font-size: 1.6rem;
+ text-align: center;
+ }
+
+ .popup_news{
+ font-size: 1.8rem;
+ }
.index_notice {
height: 100px;
@@ -214,17 +311,25 @@
}
.notice_content {
+ @include themify() {
+ color: themed("text_color");
+ }
+
&>div:first-child {
- color: $text_color1;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
}
}
.home_logo {
- width: 100%;
+ width: 48rem;
+ margin: 2rem auto 1rem;
+ border-radius: 1rem;
img {
- width: 22.5rem;
+ width: 100%;
}
}
--
Gitblit v1.9.3