From 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Wed, 03 Jun 2026 16:10:01 +0800
Subject: [PATCH] 1
---
src/views/cryptos/financialManagement/fundHome.vue | 321 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 224 insertions(+), 97 deletions(-)
diff --git a/src/views/cryptos/financialManagement/fundHome.vue b/src/views/cryptos/financialManagement/fundHome.vue
index d8331e9..b2eb9f4 100644
--- a/src/views/cryptos/financialManagement/fundHome.vue
+++ b/src/views/cryptos/financialManagement/fundHome.vue
@@ -1,68 +1,59 @@
<template>
- <div id="fundHome">
- <div class="fundHome">
- <assets-head :title="$t('基金理财')"></assets-head>
- <div class="box-border px-8 mt-10">
- <div class="flex justify-between text-grey relative">
- <div class="flex flex-col">
- <span class="text-grey text-30">{{ $t('托管金额') }}（USDT）</span>
- <span class="text-66 mt-5 font-bold textColor">{{ statiscis.amount_sum }}</span>
- </div>
- </div>
- <div class="flex mt-11 justify-between text-26 mb-2">
- <div class="flex flex-col ">
- <div class="text-grey text-26">{{ $t('预计日收益') }}（USDT）</div>
- <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.today_profit }}</div>
- </div>
- <div class="flex flex-col">
- <div class="text-grey text-26">{{ $t('累计收益') }}（USDT）</div>
- <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.aready_profit }}</div>
- </div>
- <div class="flex flex-col">
- <div class="text-grey text-26">{{ $t('托管订单') }}（USDT）</div>
- <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.order_sum }}</div>
- </div>
+ <div id="fundHome" class="fund-home-page">
+ <!-- 头部：左侧标题 AI理财，右侧图标跳转托管订单 -->
+ <div class="page-header">
+ <h1 class="header-title">{{ $t('AI理财') }}</h1>
+ <div class="header-right" @click="$router.push('/cryptos/fund-orders')">
+ <div class="order-icon">
+ <span class="line"></span>
+ <span class="line"></span>
+ <span class="line"></span>
</div>
</div>
- <div class="flex justify-between box-border px-8 mt-10">
- <div @click="$router.push('/cryptos/funds?tab=3&index=0&type=cryptos')"
- class="greyBg textColor w-96 py-3 rounded-md text-center text-28 mr-5 active">{{ $t('托管订单') }}
- </div>
- <div @click="$router.push('/cryptos/fund-rule')"
- class="greyBg text-grey w-96 py-3 rounded-md text-center text-28">
- {{ $t('规则') }}</div>
- </div>
- <div class="px-8 mt-10 pb-20">
- <div v-for="(item, index) in list" :key="index"
- class="card flex justify-between items-center relative rounded-md borderColor financialBackground ">
- <div class="title absolute px-4 py-2 text-26 text-white bg-green top-0 left-22">{{ $t('日收益率')
- }} <span class="ml-2">{{ item.daily_rate }}%</span></div>
- <div class="flex justify-center items-center">
- <img class="w-32 h-32 mr-5" :src="item.img" alt="">
- <div class="flex flex-col items-start">
- <span class="text-36 font-semibold textColor">
- <template v-if="$i18n.locale === 'CN'">
- {{ item.name_cn }}
- </template>
- <template v-else-if="$i18n.locale === 'zh-CN'">
- {{ item.name }}
- </template>
- <template v-else>
- {{ item.name_en }}
- </template>
- </span>
- <span class="text-26 mt-6 mb-4 textColor">{{ $t('限额') }} {{ item.investment_min + ' ~ ' +
- item.investment_max }}
- USDT</span>
- <span class="text-26 textColor">{{ $t('周期') }} {{ item.cycle }} {{ $t('天') }}</span>
- </div>
+ </div>
+
+ <!-- 轮播图：简体/繁体用原图，其他语言用 _e 图 -->
+ <div class="banner-swipe">
+ <van-swipe class="banner-swipe__wrap" :autoplay="4000" indicator-color="#92D1FF">
+ <van-swipe-item>
+ <img :src="bannerImgs[0]" alt="" class="banner-img" />
+ </van-swipe-item>
+ <van-swipe-item>
+ <img :src="bannerImgs[1]" alt="" class="banner-img" />
+ </van-swipe-item>
+ <van-swipe-item>
+ <img :src="bannerImgs[2]" alt="" class="banner-img" />
+ </van-swipe-item>
+ </van-swipe>
+ </div>
+
+ <!-- 理财产品卡片列表 -->
+ <div class="product-list">
+ <div v-for="(item, index) in list" :key="index" class="product-card">
+ <div class="card-top">
+ <div class="card-title-row">
+ <img class="product-icon" :src="item.img" alt="" />
+ <span class="product-name textColor">
+ <template v-if="$i18n.locale === 'CN'">{{ item.name_cn }}</template>
+ <template v-else-if="$i18n.locale === 'zh-CN'">{{ item.name }}</template>
+ <template v-else>{{ item.name_en }}</template>
+ </span>
</div>
- <div @click="$router.push({
- path: '/cryptos/fund-buy',
- query: {
- ...item
- }
- })" class="active py-4 px-8 text-30 font-semibold rounded-md">{{ $t('立即买入') }}</div>
+ <div class="cycle-tag">{{ item.cycle }}{{ $t('天') }}</div>
+ </div>
+
+ <div class="card-body">
+ <div class="info-row">
+ <span class="label textColor1">{{ $t('收益率') }}</span>
+ <span class="value textColor">{{ item.daily_rate }}%</span>
+ </div>
+ <div class="info-row">
+ <span class="label textColor1">{{ $t('认购价格') }}</span>
+ <span class="value textColor">{{ item.investment_min }}-{{ item.investment_max }} USD</span>
+ </div>
+ </div>
+ <div class="join-btn" @click="$router.push({ path: '/cryptos/fund-buy', query: { ...item } })">
+ {{ $t('立即参与') }}
</div>
</div>
</div>
@@ -70,79 +61,215 @@
</template>
<script>
-import assetsHead from '@/components/Transform/assets-head/index.vue';
+import { Swipe, SwipeItem } from 'vant'
import { financeStatics, getfinacialProductsList } from "@/service/financialManagement.api.js";
+import banner1 from '@/assets/image/fund/banner1.jpg'
+import banner2 from '@/assets/image/fund/banner2.jpg'
+import banner3 from '@/assets/image/fund/banner3.jpg'
+import banner1E from '@/assets/image/fund/banner1_e.jpg'
+import banner2E from '@/assets/image/fund/banner2_e.jpg'
+import banner3E from '@/assets/image/fund/banner3_e.jpg'
export default {
name: "fundHome",
components: {
- assetsHead,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem
},
data() {
return {
statiscis: {},
- list: []
+ list: [],
+ bannerImgsZh: [banner1, banner2, banner3],
+ bannerImgsEn: [banner1E, banner2E, banner3E]
}
},
- methods: {
+ computed: {
+ // 简体中文(zh-CN)或繁体(CN)用原图，其他语言用 _e 图
+ bannerImgs() {
+ const locale = this.$i18n?.locale || ''
+ const isZh = locale === 'zh-CN' || locale === 'CN'
+ return isZh ? this.bannerImgsZh : this.bannerImgsEn
+ }
},
activated() {
getfinacialProductsList().then(res => {
- //console.log('理财列表', res)
- this.list = res
+ this.list = res || []
})
financeStatics().then(res => {
- //console.log('理财统计', res)
- this.statiscis = res
+ this.statiscis = res || {}
})
},
created() {
getfinacialProductsList().then(res => {
- //console.log('理财列表',res)
- this.list = res
+ this.list = res || []
})
financeStatics().then(res => {
- //console.log('理财统计',res)
- this.statiscis = res
+ this.statiscis = res || {}
})
}
}
</script>
<style lang="scss" scoped>
-#fundHome {
+@import '@/assets/css/variable.scss';
- .fundHome {
- width: 100%;
- box-sizing: border-box;
- }
+.fund-home-page {
+ min-height: 100vh;
+ background: $main_background;
+ padding-bottom: 4rem;
+ box-sizing: border-box;
+}
- .active {
+.page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 8.8rem;
+ padding: 0 2.4rem;
+ background: #fff;
+ box-sizing: border-box;
+
+ .header-title {
+ font-size: 3.4rem;
+ font-weight: 700;
color: $text_color;
-
- // @include themify() {
- // background: themed("btn_main") !important;
- // }
-
- // @include themify() {
- // border-color: themed("btn_main") !important;
- // }
-
+ margin: 0;
}
- .title {
- border-radius: 0 0 8px 8px;
+ .header-right {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
}
- .card {
- padding: 80px 22px 22px 22px;
- margin-bottom: 32px;
+ .order-icon {
+ width: 3.2rem;
+ height: 3.2rem;
+ border: 0.15rem solid $text_color1;
+ border-radius: 0.6rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+
+ .line {
+ display: block;
+ width: 1.6rem;
+ height: 0.12rem;
+ background: $text_color1;
+ border-radius: 0.06rem;
+ }
+ }
+}
+
+.banner-swipe {
+ margin: 2rem 2.4rem;
+ border-radius: 1.2rem;
+ overflow: hidden;
+}
+
+.banner-swipe__wrap {
+ border-radius: 1.2rem;
+}
+
+.banner-swipe__wrap :deep(.van-swipe-item) {
+ width: 100%;
+}
+
+.banner-img {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: cover;
+}
+
+.product-list {
+ padding: 0 2.4rem 4rem;
+}
+
+.product-card {
+ background: #fff;
+ border-radius: 1.2rem;
+ padding: 2.2rem 2rem 2rem;
+ margin-bottom: 2rem;
+ box-shadow: 0rem .8rem 3.2rem 0rem rgba(0, 0, 0, .16);
+ border: 0.1rem solid $border_color;
+ box-sizing: border-box;
+}
+
+.card-top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 2rem;
+}
+
+.card-title-row {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.product-icon {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 0.8rem;
+ object-fit: cover;
+}
+
+.product-name {
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+
+.cycle-tag {
+ background: #0cc38d;
+ color: #fff;
+ font-size: 1.4rem;
+ padding: 0.6rem 4rem;
+ border-radius: .8rem;
+}
+
+.card-body {
+ margin-bottom: 2rem;
+ border-top: solid 1px #f3f3f3;
+ margin-top: 2.4rem;
+ padding-top: 2.4rem;
+}
+
+.info-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ font-size: 2.2rem;
+
+ .label {
+ color: $text_color1;
}
- .active {
- color: $white;
- background: $btn_main;
- border-color: $btn_main;
+ .value {
+ color: $text_color;
}
}
+
+.join-btn {
+ width: 100%;
+ height: 6rem;
+ line-height: 6rem;
+ text-align: center;
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+ color: #fff;
+ font-size: 2.2rem;
+ font-weight: 500;
+ border-radius: 1rem;
+ cursor: pointer;
+ border: none;
+ box-sizing: border-box;
+}
</style>
--
Gitblit v1.9.3