From 6622d5dc21b1f0a63c01afb15f1ac8f565479b8f Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Wed, 08 May 2024 18:24:20 +0800
Subject: [PATCH] 首页根据原型图重新做了
---
src/page/promote/index.vue | 113 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 60 insertions(+), 53 deletions(-)
diff --git a/src/page/promote/index.vue b/src/page/promote/index.vue
index d8b049a..4a04d01 100644
--- a/src/page/promote/index.vue
+++ b/src/page/promote/index.vue
@@ -3,22 +3,22 @@
<assets-head :title="$t('推荐')" />
<div class="advise w-828 h-220 p-40 box-border flex flex-col items-start justify-center"
:class="{ 'h-260 ': $i18n.locale !== 'CN' }">
- <span v-if="$i18n.locale === 'CN'" class="font-600 font-50" style="color:#273549;">{{ $t('邀请好友，一起赚币') }}</span>
+ <span v-if="$i18n.locale === 'CN'" class="font-900 font-50" style="color:#273549;">{{ $t('邀请好友，一起赚币') }}</span>
<span v-else class="font-900 w-445 font-55">{{ $t('邀请好友，一起赚币') }}</span>
- <span class="w-500 mt-20 font-40 font-600" style="color:#273549">{{ $t('马上充值即刻获取佣金') }}</span>
+ <span class="w-500 mt-20 font-28 font-500" style="color:#273549">{{ $t('马上充值即刻获取佣金') }}</span>
</div>
<div class="performance-title">
<div class="performance-title-1 flex-col flex items-start"
:class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
- {{ $t('我的总推广') }}
+ {{ $t('我的推荐') }}
<div class="performance-text text-left">{{ promote_list.total && promote_list.total.children }}</div>
</div>
- <div class="performance-title-2 flex-col flex items-center"
+ <div class="performance-title-2 flex-col flex"
:class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
- {{ $t('总充值') }}
- <div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1).toFixed(2)
+ {{ $t('团队质押收益') }}
+ <div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1)
:
- '0.00' }}</div>
+ '0' }}</div>
</div>
<div class="flex items-center w-160 justify-end colorMain" style="align-self: start">
<div class="performance-title-3" @click="$router.push('/promote/rules')">{{ $t('规则') }}</div>
@@ -26,49 +26,30 @@
<img class="performance-title-4" src="../../assets/image/promote/right.png" />
</div>
</div>
- <div class="numberOfPeople">
- <div class="numberOfPeople-text flex flex-col align-center">
- {{ $t('一代人数') }}
- <div class="mt-20 numberOfPeople-text4 text-center">{{ promote_list.total && promote_list.total.level_1
- }}</div>
- </div>
- <div class="numberOfPeople-text2 flex flex-col align-center">
- {{ $t('二代人数') }}
- <div class="mt-20 numberOfPeople-text5 flex-1 text-center ">{{ promote_list.total &&
- promote_list.total.level_2
- }}</div>
- </div>
- <!-- <div style="flex: 1;"></div>-->
- <div class="numberOfPeople-text3 flex flex-col align-center">
- {{ $t('三代人数') }}
- <div class="mt-20 numberOfPeople-text6 flex-1 text-center ">{{ promote_list.total &&
- promote_list.total.level_3
- }}</div>
- </div>
- </div>
<div class="Recommend">
- <div class="Recommend-text btnMain text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
+ <div class="Recommend-text bg-blue text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
</div>
- <div class="segmentation-max"></div>
- <div class="MyRecommendation-title">{{ $t('我的推广') }}</div>
+ <div class="MyRecommendation-title">
+ <span>{{$t('我的代理等级')}}</span>
+ <div class="status"></div>
+ </div>
+ <div class="commendTitle">
+ <div class="bg-blue text-white px-28 py-14 rounded-lg">{{$t('我的团队')}}</div>
+ </div>
<div style="width: 100%;">
- <van-tabs ref="tabs" v-model="active" sticky animated @change="onChange">
- <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
- <div class="Recommendation-tab-title">
- <div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
- <div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
- <div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
+ <div class="Recommendation-tab-title">
+ <div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
+ <div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
+ <div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
+ </div>
+ <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
+ :loading-text="$t('加载中...')">
+ <div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab">
+ <div class="Recommendation-tab1">{{ item.username }}</div>
+ <div class="Recommendation-tab1">{{ item.reco_sum }}</div>
+ <div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
</div>
- <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
- :loading-text="$t('加载中...')">
- <div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab">
- <div class="Recommendation-tab1">{{ item.username }}</div>
- <div class="Recommendation-tab1">{{ item.reco_sum }}</div>
- <div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
- </div>
- </van-list>
- </van-tab>
- </van-tabs>
+ </van-list>
</div>
</div>
</template>
@@ -190,14 +171,14 @@
}
.performance-title-1 {
- width: 200px;
+ width: auto;
font-style: normal;
font-weight: 400;
- font-size: 26px;
+ font-size: 2.1875rem;
color: #848E9C;
&.performance-title-1-1 {
- width: 250px;
+ width: auto;
font-size: 26px;
text-align: center;
margin-right: 10px;
@@ -208,7 +189,7 @@
flex: 1;
font-style: normal;
font-weight: 400;
- font-size: 26px;
+ font-size: 2.1875rem;
color: #848E9C;
&.performance-title-1-1 {
@@ -220,7 +201,8 @@
.performance-title-3 {
font-style: normal;
font-weight: 400;
- font-size: 26px;
+ font-size: 2.1875rem;
+ color: #1d91ff;
}
.performance-title-4 {
@@ -244,7 +226,6 @@
font-weight: 600;
font-size: 66px;
color: #2EBD85;
- margin-top: 22px;
}
.performance-text2 {
@@ -253,7 +234,6 @@
font-weight: 600;
font-size: 66px;
color: #2EBD85;
- margin-top: 22px;
}
.numberOfPeople {
@@ -383,4 +363,31 @@
text-align: center;
color: #333333;
}
+.MyRecommendation-title {
+ height: 6.25rem;
+ background: #f5f5f5;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 2.125rem;
+ color: #000;
+ display: flex;
+ justify-content: space-between;
+ margin: 0 2.1875rem;
+ align-items: center;
+ margin-top: 1.875rem;
+ padding: 0 .625rem;
+ .status {
+ height: 3.75rem;
+ line-height: 3.75rem;
+ padding: 0 2.5rem;
+ border-radius: .375rem;
+ background: #eceaea;
+ }
+}
+.commendTitle {
+ margin: 0 2.1875rem;
+ align-items: center;
+ margin-top: 1.875rem;
+ display: flex;
+}
</style>
--
Gitblit v1.9.3