<template>
|
<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>
|
|
<!-- 轮播图：简体/繁体用原图，其他语言用 _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 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>
|
</div>
|
</template>
|
|
<script>
|
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: {
|
[Swipe.name]: Swipe,
|
[SwipeItem.name]: SwipeItem
|
},
|
data() {
|
return {
|
statiscis: {},
|
list: [],
|
bannerImgsZh: [banner1, banner2, banner3],
|
bannerImgsEn: [banner1E, banner2E, banner3E]
|
}
|
},
|
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 => {
|
this.list = res || []
|
})
|
financeStatics().then(res => {
|
this.statiscis = res || {}
|
})
|
},
|
created() {
|
getfinacialProductsList().then(res => {
|
this.list = res || []
|
})
|
financeStatics().then(res => {
|
this.statiscis = res || {}
|
})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/css/variable.scss';
|
|
.fund-home-page {
|
min-height: 100vh;
|
background: $main_background;
|
padding-bottom: 4rem;
|
box-sizing: border-box;
|
}
|
|
.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;
|
margin: 0;
|
}
|
|
.header-right {
|
width: 4rem;
|
height: 4rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
.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;
|
}
|
|
.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>
|
