中文&排行

src/views/RankPage.vue

@@ -60,6 +60,14 @@
                                     />
                                     <div class="name">{{ item.nickname }}</div>
                                 </div>
+
+                                <div class="rank-val" v-if="tab === 1 && i < 3">
+                                    <img class="val-bg" :src="rankValue[i].img" alt="" />
+                                    <div class="val-content">
+                                        <div class="text1">{{ rankValue[i].label }}</div>
+                                        <div class="text2">PROFIT</div>
+                                    </div>
+                                </div>
                                 <div class="col-3" :class="'rank_' + (i + 1)" v-if="tab === 0">
                                     <!-- {{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }} -->
                                     &nbsp;{{ $t('rank.withdrawRechargeRate') }}{{ parseInt(item.roi * 100) }}%
@@ -83,6 +91,9 @@ import { onIonViewWillEnter } from '@ionic/vue'
 import rank1 from '@/assets/rank_1.png'
 import rank2 from '@/assets/rank_2.png'
 import rank3 from '@/assets/rank_3.png'
+import rankBg1 from '@/assets/png - shou yi-laxing1.png'
+import rankBg2 from '@/assets/png - shou yi-laxing2.png'
+import rankBg3 from '@/assets/png - shou yi-laxing3.png'
 import { Vue3Lottie } from 'vue3-lottie'
 import prizeJSON from '@/assets/lottie/prize.json'
 import '@/styles/animate.css'
@@ -90,6 +101,20 @@ import rankBg from '@/assets/png-bg-paihang-xiahua.jpg'
 import { useRouter } from 'vue-router'
 
 const rankImg = [rank1, rank2, rank3]
+const rankValue = [
+    {
+        img: rankBg1,
+        label: '50%'
+    },
+    {
+        img: rankBg2,
+        label: '30%'
+    },
+    {
+        img: rankBg3,
+        label: '20%'
+    }
+]
 const tab = ref(1)
 const profitList = ref([])
 const inviteList = ref([])
@@ -270,6 +295,8 @@ function goInvite() {
             font-weight: bold;
             color: #ffffff;
             line-height: 24px;
+            min-width: 50px;
+            text-align: right;
         }
         &.profit {
             .col-1 {
@@ -344,4 +371,43 @@ function goInvite() {
     background: linear-gradient(162deg, rgba(104, 13, 214, 1), rgba(225, 181, 255, 1));
     border-radius: 8px;
 }
+
+.rank-val {
+    position: relative;
+    .val-bg {
+        width: 66px;
+        display: block;
+    }
+
+    .val-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        .f-col();
+        align-items: center;
+        justify-content: center;
+
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+            color: #d8d8d8;
+            line-height: 14px;
+            background: linear-gradient(180deg, #ed5701 0%, #c40800 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .text2 {
+            font-size: 10px;
+            font-weight: bold;
+            color: #d8d8d8;
+            line-height: 12px;
+            background: linear-gradient(180deg, #ed5701 0%, #c40800 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-top: 1px;
+        }
+    }
+}
 </style>

src/views/TurtorialPage.vue

@@ -27,6 +27,8 @@
                     <div class="tips">{{ $t('tutorial.step4') }}</div>
                     <img class="img" src="@/assets/tutorial/tutorial5.png" alt="" />
                     <img class="img" src="@/assets/tutorial/tutorial6.png" alt="" />
+                    <img class="img" src="@/assets/tutorial/tutorial6-1.png" alt="" />
+                    <img class="img" src="@/assets/tutorial/tutorial6-2.png" alt="" />
                     <img class="img" src="@/assets/tutorial/tutorial7.png" alt="" />
                 </div>
                 <div class="step">