feat(新页面): 国王女王榜

src/views/TopList/TopList.vue

@@ -9,6 +9,7 @@
         src="/src/assets/images/TopList/help.png"
         alt=""
         style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+        @click="helpInfoShow = true"
       />
 
       <!-- history按钮 -->
@@ -16,6 +17,7 @@
         src="/src/assets/images/TopList/history.png"
         alt=""
         style="width: 20%; margin-top: 20px"
+        @click="historyShow = true"
       />
 
       <div style="display: flex; flex-direction: column; align-items: center">
@@ -57,7 +59,14 @@
                 <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
               </div>
               <div
-                style="color: #fff; font-weight: 860; position: absolute; bottom: 8%; z-index: 2"
+                style="
+                  color: #fff;
+                  font-weight: 860;
+                  font-size: 13px;
+                  position: absolute;
+                  bottom: 8%;
+                  z-index: 2;
+                "
               >
                 Sukabuliete
               </div>
@@ -98,7 +107,14 @@
                 <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
               </div>
               <div
-                style="color: #fff; font-weight: 860; position: absolute; bottom: 5%; z-index: 2"
+                style="
+                  color: #fff;
+                  font-weight: 860;
+                  font-size: 13px;
+                  position: absolute;
+                  bottom: 5%;
+                  z-index: 2;
+                "
               >
                 Sukabuliete
               </div>
@@ -110,7 +126,12 @@
 
       <!-- rewards -->
       <div style="display: flex; justify-content: flex-end">
-        <img src="/src/assets/images/TopList/rewards.png" alt="" style="width: 20%" />
+        <img
+          src="/src/assets/images/TopList/rewards.png"
+          alt=""
+          style="width: 20%"
+          @click="rewardsShow = true"
+        />
       </div>
 
       <!-- 每周礼物 -->
@@ -177,23 +198,513 @@
         </div>
 
         <!-- 排行榜 -->
-        <div style="position: relative">
+        <div style="width: 100%">
-          <img src="/src/assets/images/TopList/eventGifts.png" width="100%" alt="" style="" />
+          <borderImg title="Ranking">
+            <div
+              style="margin: -2px 0; position: relative"
+              v-for="(listItem, index) in topList"
+              :key="index"
+            >
+              <img
+                src="/src/assets/images/TopList/border-item-user.png"
+                alt=""
+                style="width: 100%; display: block"
+              />
+              <div
+                style="
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  display: flex;
+                  align-items: center;
+                  padding: 0 15%;
+                "
+              >
+                <div style="flex: 1; display: flex; align-items: center">
+                  <div style="color: #edb247; font-weight: 700; width: 28px">
+                    {{ index + 100 }}
+                  </div>
+                  <div
+                    style="
+                      width: 30%;
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      margin: 0 8px;
+                      background: linear-gradient(
+                        to bottom,
+                        rgba(255, 224, 60, 1),
+                        rgba(255, 189, 19, 1)
+                      );
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img
+                      src="/src/assets/images/avatarTest.png"
+                      alt=""
+                      style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+                    />
+                  </div>
+
+                  <div style="display: flex; flex-direction: column">
+                    <div style="color: #fff; font-weight: 860">
+                      {{ listItem.name }}
+                    </div>
+                    <div style="color: #fff; font-weight: 590">ID:{{ listItem.id }}</div>
+                  </div>
+                </div>
+
+                <div style="display: flex; width: 30%; display: flex; align-items: center">
+                  <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
+                  <div style="color: #edb247; font-weight: 700">
+                    {{ listItem.recharge }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </borderImg>
+        </div>
+
+        <!-- 我的排名 -->
+        <div
+          style="
+            position: sticky;
+            bottom: 0;
+            left: 0;
+            widows: 100vw;
+            background-color: rgba(77, 30, 22, 1);
+            display: flex;
+            justify-content: center;
+          "
+        >
+          <img
+            src="/src/assets/images/TopList/myRankingBg.png"
+            alt=""
+            style="width: calc(100% - 1px); display: block"
+          />
+
+          <div
+            style="
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: 0 8%;
+            "
+          >
+            <div style="flex: 1; display: flex; align-items: center">
+              <div style="color: #edb247; font-weight: 700">
+                {{ myRanking.ranking }}
+              </div>
+              <div
+                style="
+                  width: 30%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  margin: 0 12px;
+                  background: linear-gradient(
+                    to bottom,
+                    rgba(255, 224, 60, 1),
+                    rgba(255, 189, 19, 1)
+                  );
+
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                "
+              >
+                <img
+                  src="/src/assets/images/avatarTest.png"
+                  alt=""
+                  style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+                />
+              </div>
+
+              <div style="display: flex; flex-direction: column">
+                <div style="color: #fff; font-weight: 860">
+                  {{ myRanking.name }}
+                </div>
+                <div style="color: #fff; font-weight: 590">ID:{{ myRanking.id }}</div>
+              </div>
+            </div>
+
+            <div style="display: flex; width: 30%; display: flex; align-items: center">
+              <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
+              <div style="color: #edb247; font-weight: 700">
+                {{ myRanking.recharge }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <!-- help弹窗 -->
+      <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
+        <img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
+      </div>
+
+      <!-- history弹窗 -->
+      <div v-if="historyShow" style="margin: 20% 0" @click.stop>
+        <div style="width: 100%">
+          <borderImg title="History">
+            <div
+              style="
+                background-image: url(/src/assets/images/TopList/border-item.png);
+                background-size: 100% 100%;
+                min-height: 20px;
+                margin: -10px 0;
+                padding: 10px 10%;
+              "
+            >
+              <!-- 内容 -->
+              <div
+                style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"
+              >
+                <div style="width: 40%">
+                  <div
+                    style="
+                      position: relative;
+                      width: 100%;
+                      min-height: max-content;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <!-- 头像框 -->
+                    <img
+                      src="/src/assets/images/TopList/kingFrame.png"
+                      alt=""
+                      style="width: 100%; z-index: 1"
+                    />
+                    <!-- 头像 -->
+                    <div
+                      style="
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        z-index: 0;
+                      "
+                    >
+                      <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
+                    </div>
+                    <div
+                      style="
+                        color: #fff;
+                        font-weight: 860;
+                        font-size: 13px;
+                        position: absolute;
+                        bottom: 8%;
+                        z-index: 2;
+                      "
+                    >
+                      Sukabuliete
+                    </div>
+                  </div>
+                  <div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
+                </div>
+                <div style="width: 40%">
+                  <div
+                    style="
+                      position: relative;
+                      width: 100%;
+                      min-height: max-content;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <!-- 头像框 -->
+                    <img
+                      src="/src/assets/images/TopList/queenFrame.png"
+                      alt=""
+                      style="width: 100%; z-index: 1"
+                    />
+                    <!-- 头像 -->
+                    <div
+                      style="
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        z-index: 0;
+                      "
+                    >
+                      <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
+                    </div>
+                    <div
+                      style="
+                        color: #fff;
+                        font-weight: 860;
+                        font-size: 13px;
+                        position: absolute;
+                        bottom: 5%;
+                        z-index: 2;
+                      "
+                    >
+                      Sukabuliete
+                    </div>
+                  </div>
+                  <div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
+                </div>
+              </div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  margin-top: 20px;
+                "
+              >
+                <img
+                  src="/src/assets/images/TopList/timeBack.png"
+                  alt=""
+                  width="18px"
+                  height="18px"
+                />
+                <div
+                  style="
+                    width: 40%;
+                    text-align: center;
+                    font-size: 14px;
+                    font-weight: 590;
+                    background-image: -webkit-linear-gradient(
+                      top,
+                      rgba(243, 183, 0, 1),
+                      rgba(255, 238, 198, 1)
+                    );
+                    background-clip: text;
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                  "
+                >
+                  2025-09-05
+                </div>
+                <img
+                  src="/src/assets/images/TopList/timeNext.png"
+                  alt=""
+                  width="18px"
+                  height="18px"
+                />
+              </div>
+            </div>
+          </borderImg>
+        </div>
+      </div>
+
+      <!-- rewards弹窗 -->
+      <div v-if="rewardsShow" style="padding: 20% 0" @click.stop>
+        <div style="position: relative">
+          <!-- 取消按钮 -->
+          <img
+            src="/src/assets/images/TopList/cancel.png"
+            alt=""
+            style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
+            @click="closedPopup"
+          />
+          <div style="width: 100%">
+            <borderImg title="Rewards">
+              <div
+                style="
+                  background-image: url(/src/assets/images/TopList/border-item.png);
+                  background-size: 100% 100%;
+                  min-height: 20px;
+                  margin: -10px 0;
+                  padding: 10px 10%;
+                "
+              >
+                <!-- 奖励榜切换按钮 -->
+                <div style="width: 100%">
+                  <div
+                    v-if="visibleKingRewards"
+                    style="width: 100%; display: flex; justify-content: space-around"
+                  >
+                    <img
+                      src="/src/assets/images/TopList/kingBtActive.png"
+                      alt=""
+                      style="width: 40%"
+                    />
+                    <img
+                      src="/src/assets/images/TopList/queenBt.png"
+                      alt=""
+                      style="width: 40%"
+                      @click="visibleKingRewards = false"
+                    />
+                  </div>
+                  <div
+                    v-if="!visibleKingRewards"
+                    style="width: 100%; display: flex; justify-content: space-around"
+                  >
+                    <img
+                      src="/src/assets/images/TopList/kingBt.png"
+                      alt=""
+                      style="width: 40%"
+                      @click="visibleKingRewards = true"
+                    />
+                    <img
+                      src="/src/assets/images/TopList/queenBtActive.png"
+                      alt=""
+                      style="width: 40%"
+                    />
+                  </div>
+                </div>
+
+                <!-- 奖励榜 -->
+                <div
+                  v-for="(rewardsTop, top) in rewardsList"
+                  :key="top"
+                  style="display: flex; flex-direction: column; align-items: center"
+                >
+                  <img :src="topImg[top]" alt="" style="width: 40%; margin: 24px 0" />
+                  <div
+                    style="
+                      width: 100%;
+                      display: grid;
+                      grid-template-columns: repeat(3, 1fr);
+                      gap: 3%;
+                    "
+                  >
+                    <div
+                      v-for="(reward, rewardIndex) in rewardsTop"
+                      :key="rewardIndex"
+                      style="width: 100%"
+                    >
+                      <img style="" src="/src/assets/images/TopList/gift.png" alt="" width="100%" />
+                      <div
+                        style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center"
+                      >
+                        {{ reward.goodsId }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </borderImg>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
   </div>
 </template>
 
 <script setup>
 import { isInApp } from '../../utils/appBridge.js'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import borderImg from '../../components/TopList/borderImg.vue'
+import maskLayer from '../../components/MaskLayer.vue'
 
 const visibleKingList = ref(true)
 
 // 检测是否在APP环境中
 const isInAppEnvironment = ref(false)
 
+// 榜首历史记录
+const historyList = ref([
+  {
+    time: '2025-9-5',
+    topUser: [{}],
+  },
+])
+
+// 我的排名
+const myRanking = ref({
+  id: '666',
+  name: 'aaa',
+  recharge: '12345',
+  ranking: '999',
+})
+
+// 国王榜
+const kingList = ref(
+  Array.from({ length: 12 }, () => {
+    return { id: '666', name: 'aaa', recharge: '12345' }
+  })
+)
+
+// 女王榜
+const queenList = ref(
+  Array.from({ length: 12 }, () => {
+    return { id: '888', name: 'bbb', recharge: '45678' }
+  })
+)
+
+// 展示用排行榜
+const topList = computed(() => {
+  return visibleKingList.value ? kingList.value : queenList.value
+})
+
+// 展示奖励榜标签
+const visibleKingRewards = ref(true)
+
+// top图片
+const topImg = ref([
+  '/src/assets/images/TopList/top1.png',
+  '/src/assets/images/TopList/top2.png',
+  '/src/assets/images/TopList/top3.png',
+])
+
+const kingRewards = ref([
+  Array.from({ length: 6 }, () => {
+    return { goodsId: '111', name: 'aaa' }
+  }),
+  Array.from({ length: 6 }, () => {
+    return { goodsId: '222', name: 'aaa' }
+  }),
+  Array.from({ length: 3 }, () => {
+    return { goodsId: '333', name: 'aaa' }
+  }),
+])
+
+const queenRewards = ref([
+  Array.from({ length: 3 }, () => {
+    return { goodsId: '444', name: 'aaa' }
+  }),
+  Array.from({ length: 3 }, () => {
+    return { goodsId: '555', name: 'aaa' }
+  }),
+  Array.from({ length: 3 }, () => {
+    return { goodsId: '666', name: 'aaa' }
+  }),
+])
+
+const rewardsList = computed(() => {
+  return visibleKingRewards.value ? kingRewards.value : queenRewards.value
+})
+
+const maskLayerShow = computed(() => {
+  return helpInfoShow.value || historyShow.value || rewardsShow.value
+})
+const helpInfoShow = ref(false)
+const historyShow = ref(false)
+const rewardsShow = ref(false)
+
+// 关闭弹窗
+const closedPopup = () => {
+  helpInfoShow.value = false
+  historyShow.value = false
+  rewardsShow.value = false
+}
+
 // 组件挂载时检测环境
 onMounted(() => {
   isInAppEnvironment.value = isInApp()
@@ -201,9 +712,14 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  font-family: 'SF Pro';
+}
+
 .fullPage {
   background-color: rgba(77, 30, 22, 1);
   min-height: 100vh;
+  position: relative;
 }
 
 .bg {
@@ -211,5 +727,6 @@ onMounted(() => {
   background-image: url(../../assets/images/TopList/bg.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
+  position: relative;
 }
 </style>