排行

src/styles/fonts.less

@@ -1,4 +1,9 @@
 @font-face {
     font-family: 'TsangerYuMo';
     src: url(/fonts/TsangerYuMo.ttf);
-}
+}
+
+@font-face {
+    font-family: 'alibabaPuHui';
+    src: url(/fonts/alibabaPuHui.ttf);
+}

src/views/RankPage.vue

@@ -4,11 +4,16 @@
             <div class="top">
                 <img src="../assets/png-bg-paihang.jpg" alt="" class="bg" />
 
-                <img
+                <!-- <img
                     src="../assets/png-shuzi.png"
                     class="img1 animate__tada animate__slow animate__animated animate__infinite"
                     alt=""
-                />
+                /> -->
+                <div class="top-num-box">
+                    <div class="top-num animate__tada animate__slow animate__animated animate__infinite">
+                        <span>{{ showBouns }}</span>
+                    </div>
+                </div>
                 <div class="lottie-box">
                     <Vue3Lottie :width="100" :speed="1.2" :animationData="prizeJSON" />
                 </div>
@@ -65,7 +70,9 @@
                                     <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 class="text2">
+                                            {{ $t('balance.symbol') }}{{ getRankVal(rankValue[i].val) }}
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="col-3" :class="'rank_' + (i + 1)" v-if="tab === 0">
@@ -85,7 +92,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { http } from '@/plugins/http'
 import { onIonViewWillEnter } from '@ionic/vue'
 import rank1 from '@/assets/rank_1.png'
@@ -99,25 +106,38 @@ import prizeJSON from '@/assets/lottie/prize.json'
 import '@/styles/animate.css'
 import rankBg from '@/assets/png-bg-paihang-xiahua.jpg'
 import { useRouter } from 'vue-router'
+import { accMul } from '@/plugins/calc.js'
 
 const rankImg = [rank1, rank2, rank3]
 const rankValue = [
     {
         img: rankBg1,
-        label: '50%'
+        label: '50%',
+        val: 0.5
     },
     {
         img: rankBg2,
-        label: '30%'
+        label: '30%',
+        val: 0.3
     },
     {
         img: rankBg3,
-        label: '20%'
+        label: '20%',
+        val: 0.2
     }
 ]
+const showBouns = computed(() => {
+    return bonus.value && bonus.value > 10000 ? bonus.value : 10000
+})
+
+function getRankVal(val) {
+    return accMul(showBouns.value, val)
+}
+
 const tab = ref(1)
 const profitList = ref([])
 const inviteList = ref([])
+const bonus = ref(0)
 onIonViewWillEnter(getRank)
 function getRank() {
     http.get('/user/rankByProfit').then(res => {
@@ -126,6 +146,9 @@ function getRank() {
     http.get('/user/rankByInvite').then(res => {
         inviteList.value = res
     })
+    http.get('/bonus/today').then(res => {
+        bonus.value = res
+    })
 }
 
 const router = useRouter()
@@ -148,6 +171,25 @@ function goInvite() {
 .top {
     position: relative;
 
+    .top-num-box {
+        position: absolute;
+        z-index: 3;
+        top: 49.6vw;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .top-num {
+        background: linear-gradient(270deg, #d32dff 0%, #834efc 48%, #2b73f8 100%);
+        border-radius: 18px;
+        border: 1px solid #ffffff;
+        line-height: 36px;
+        padding: 0 12px;
+        font-size: 30px;
+        font-family: alibabaPuHui;
+        font-weight: bold;
+    }
+
     .img1 {
         position: absolute;
         top: 49.6vw;