feat(游戏王): 添加日榜和日榜奖励

src/views/Ranking/GamesKing/components/topUserDaily.vue

@@ -0,0 +1,296 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative" :style="{ minHeight: ranking == '1' ? '46vw' : '33vw' }">
+      <!-- 头像 -->
+      <div
+        style="
+          position: relative;
+          z-index: -1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        :style="{ height: avatarContainerHeight }"
+      >
+        <div :style="{ width: avatarWidth }">
+          <img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            @error="handleAvatarImageError"
+          />
+        </div>
+      </div>
+
+      <!-- 用户名和贡献值 -->
+      <!-- 用户名 -->
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1vw;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <div
+          style="display: flex; justify-content: center; align-items: center"
+          :style="{
+            width: nameValueWidth,
+            height: nameValueHeight,
+          }"
+        >
+          <div
+            style="direction: ltr; font-weight: 700"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+          >
+            {{ name }}
+          </div>
+        </div>
+
+        <!-- 贡献值 -->
+        <div
+          style="
+            border-radius: 40px;
+            box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
+            border: 0.64px solid #ffdf36;
+            padding: 1px 2px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{
+            width: distributionValueWidth,
+            background:
+              ranking == '1'
+                ? `linear-gradient(270deg, #3A0607 0%, #D8494B 47.45%, #3A0607 100%)`
+                : ranking == '2'
+                  ? `linear-gradient(270deg, #D1A3FD 0%, #801DBD 50%, #D0A3FD 100%)`
+                  : `linear-gradient(270deg, #A3FDB7 0%, #1DBD3A 50%, #A3FDB2 100%)`,
+          }"
+        >
+          <img
+            v-smart-img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="display: block"
+            :style="{ width: coinWidth }"
+          />
+          <div
+            style="font-weight: 590"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+            :style="{
+              color: ranking == '1' ? `#FFE601` : '#FFF',
+            }"
+          >
+            {{ distributionValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  ranking: {
+    type: String,
+    default: '',
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  rankingType: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+})
+
+// 是否为第一名
+const isTopOne = computed(() => {
+  return props.ranking === '1'
+})
+
+// 头像容器高度
+const avatarContainerHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '85%'
+    case '2':
+      return '78%'
+    case '3':
+      return '78%'
+    default:
+      return '78%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '80%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '38%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '31%'
+    case '2':
+      return '32%'
+    case '3':
+      return '29%'
+    default:
+      return '29%'
+  }
+})
+
+// 名称高度
+const nameValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '40%'
+    case '2':
+      return '39%'
+    case '3':
+      return '43%'
+    default:
+      return '38%'
+  }
+})
+
+// 名称宽度
+const nameValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '70%'
+    case '2':
+      return '70%'
+    case '3':
+      return '70%'
+    default:
+      return '40%'
+  }
+})
+
+// 贡献值高度
+const distributionValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '26%'
+    case '2':
+      return '38%'
+    case '3':
+      return '38%'
+    default:
+      return '38%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '60%'
+    case '2':
+      return '50%'
+    case '3':
+      return '50%'
+    default:
+      return '40%'
+  }
+})
+
+// 金币图标宽度
+const coinWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '1em'
+    case '2':
+      return '0.9em'
+    case '3':
+      return '0.9em'
+    default:
+      return '0.9em'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: black;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 0.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>

src/views/Ranking/GamesKing/index.vue

@@ -102,17 +102,12 @@
             <!-- 历史模块按钮 -->
             <div style="width: 30%; position: relative" @click="changeModule('history')">
               <img
-                v-show="!historyShow"
-                v-smart-img
-                :src="imageUrl(getImgName('historyBt'))"
-                alt=""
-                style="display: block; width: 100%"
-              />
-              <img
-                v-show="historyShow"
                 v-smart-img
                 :src="imageUrl(getImgName('historyBtActive'))"
                 alt=""
+                :class="{
+                  'grayscale-container': !historyShow,
+                }"
                 style="display: block; width: 100%"
               />
             </div>
@@ -120,17 +115,12 @@
             <!-- 排行榜模块按钮 -->
             <div style="width: 30%; position: relative" @click="changeModule('ranking')">
               <img
-                v-show="!rankingShow"
-                v-smart-img
-                :src="imageUrl(getImgName('rankingBt'))"
-                alt=""
-                style="display: block; width: 100%"
-              />
-              <img
-                v-show="rankingShow"
                 v-smart-img
                 :src="imageUrl(getImgName('rankingBtActive'))"
                 alt=""
+                :class="{
+                  'grayscale-container': !rankingShow,
+                }"
                 style="display: block; width: 100%"
               />
             </div>
@@ -138,17 +128,12 @@
             <!-- 奖励模块按钮 -->
             <div style="width: 30%; position: relative" @click="changeModule('rewards')">
               <img
-                v-show="!rewardsShow"
-                v-smart-img
-                :src="imageUrl(getImgName('rewardsBt'))"
-                alt=""
-                style="display: block; width: 100%"
-              />
-              <img
-                v-show="rewardsShow"
                 v-smart-img
                 :src="imageUrl(getImgName('rewardBtActive'))"
                 alt=""
+                :class="{
+                  'grayscale-container': !rewardsShow,
+                }"
                 style="display: block; width: 100%"
               />
             </div>
@@ -267,193 +252,384 @@
           </div>
 
           <!-- Ranking -->
-          <div v-show="rankingShow" style="position: relative; width: 100%; margin: 10px 0">
+          <div v-show="rankingShow">
-            <div style="position: relative; z-index: 1">
+            <!-- 切换按钮 -->
-              <!-- 第2-4名 -->
+            <div style="display: flex; justify-content: space-around; margin-top: 2vw">
-              <itemCenter
+              <!-- 周榜模块按钮 -->
-                style="min-height: 132.2vw"
+              <div style="width: 40%; position: relative" @click="changeRanking('week')">
-                :imgUrl="imageUrl(getImgName('RankingMain'))"
+                <img
-                :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
+                  v-smart-img
-              >
+                  :src="imageUrl('rankWeeklyBt')"
-                <div>
+                  alt=""
-                  <!-- 第2名 -->
+                  :class="{
-                  <div style="display: flex; justify-content: center">
+                    'grayscale-container': !weekShow,
-                    <TopUser
+                  }"
-                      ranking="2"
+                  style="display: block; width: 100%"
-                      :BorderImgUrl="imageUrl('top2')"
+                />
-                      :avatarUrl="RankingHasTop10[1].avatar"
+              </div>
-                      :name="RankingHasTop10[1].nickname"
-                      :distributionValue="RankingHasTop10[1].quantity || ''"
-                      style="width: 40%"
-                      @click="viewUserInfo(RankingHasTop10[1].userId)"
-                    />
-                  </div>
-                  <!-- 第3-4名 -->
-                  <div style="display: flex; justify-content: space-between; margin-top: -5vw">
-                    <TopUser
-                      ranking="3"
-                      :BorderImgUrl="imageUrl('top3')"
-                      :avatarUrl="RankingHasTop10[2].avatar"
-                      :name="RankingHasTop10[2].nickname"
-                      :distributionValue="RankingHasTop10[2].quantity || ''"
-                      style="width: 38%"
-                      @click="viewUserInfo(RankingHasTop10[2].userId)"
-                    />
-                    <TopUser
-                      ranking="4"
-                      :BorderImgUrl="imageUrl('top4')"
-                      :avatarUrl="RankingHasTop10[3].avatar"
-                      :name="RankingHasTop10[3].nickname"
-                      :distributionValue="RankingHasTop10[3].quantity || ''"
-                      style="width: 38%"
-                      @click="viewUserInfo(RankingHasTop10[3].userId)"
-                    />
-                  </div>
-                </div>
-              </itemCenter>
 
-              <!-- 第5-10名 -->
+              <!-- 日榜模块按钮 -->
-              <itemCenter
+              <div style="width: 40%; position: relative" @click="changeRanking('daily')">
-                style="min-height: 90.13vw"
+                <img
-                :imgUrl="imageUrl('RankingCenterBg')"
+                  v-smart-img
-                :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
+                  :src="imageUrl('rankDailyBt')"
-              >
+                  alt=""
-                <!-- 5-7 -->
+                  :class="{
-                <div style="width: 100%; display: flex; justify-content: space-between">
+                    'grayscale-container': !dailyShow,
-                  <TopUser
+                  }"
-                    v-for="topUser in RankingHasTop10.slice(4, 7)"
+                  style="display: block; width: 100%"
-                    :key="topUser.userId"
+                />
-                    ranking="5-7"
+              </div>
-                    :BorderImgUrl="imageUrl('top5_7')"
+            </div>
-                    :avatarUrl="topUser.avatar"
-                    :name="topUser.nickname"
-                    :distributionValue="topUser.quantity || ''"
-                    style="width: 30%"
-                    @click="viewUserInfo(topUser.userId)"
-                  />
-                </div>
 
-                <!-- 8-10 -->
+            <!-- 周榜 -->
-                <div style="width: 100%; display: flex; justify-content: space-between">
+            <div v-show="weekShow" style="position: relative; width: 100%; margin: 10px 0">
-                  <TopUser
+              <div style="position: relative; z-index: 1">
-                    v-for="topUser in RankingHasTop10.slice(7, 10)"
+                <!-- 第2-4名 -->
-                    :key="topUser.userId"
-                    ranking="8-10"
-                    :BorderImgUrl="imageUrl('top8_10')"
-                    :avatarUrl="topUser.avatar"
-                    :name="topUser.nickname"
-                    :distributionValue="topUser.quantity || ''"
-                    style="width: 30%"
-                    @click="viewUserInfo(topUser.userId)"
-                  />
-                </div>
-              </itemCenter>
-
-              <!-- 第11名开始 -->
-              <div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
                 <itemCenter
-                  style="min-height: 26.4vw"
+                  style="min-height: 132.2vw"
-                  v-for="(listItem, index) in showRanking"
+                  :imgUrl="imageUrl(getImgName('RankingMain'))"
-                  :key="listItem.userId"
+                  :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
-                  :imgUrl="imageUrl('RankingItem')"
-                  :contentStyle="`padding: 0 10%`"
-                  :lazy="true"
-                  :immediate="index < 2"
-                  @click="viewUserInfo(listItem.userId)"
                 >
-                  <!-- 基本信息 -->
+                  <div>
-                  <div
+                    <!-- 第2名 -->
-                    style="
+                    <div style="display: flex; justify-content: center">
-                      flex: 1;
+                      <TopUser
-                      min-width: 0;
+                        ranking="2"
-
+                        :BorderImgUrl="imageUrl('top2')"
-                      display: flex;
+                        :avatarUrl="RankingHasTop10[1].avatar"
-                      justify-content: space-around;
+                        :name="RankingHasTop10[1].nickname"
-                      align-items: center;
+                        :distributionValue="RankingHasTop10[1].quantity || ''"
-
+                        style="width: 40%"
-                      gap: 8px;
+                        @click="viewUserInfo(RankingHasTop10[1].userId)"
-                    "
+                      />
-                  >
-                    <!-- 排名 -->
-                    <div style="color: #ffe601; font-weight: 700">
-                      {{ listItem?.rank }}
                     </div>
+                    <!-- 第3-4名 -->
+                    <div style="display: flex; justify-content: space-between; margin-top: -5vw">
+                      <TopUser
+                        ranking="3"
+                        :BorderImgUrl="imageUrl('top3')"
+                        :avatarUrl="RankingHasTop10[2].avatar"
+                        :name="RankingHasTop10[2].nickname"
+                        :distributionValue="RankingHasTop10[2].quantity || ''"
+                        style="width: 38%"
+                        @click="viewUserInfo(RankingHasTop10[2].userId)"
+                      />
+                      <TopUser
+                        ranking="4"
+                        :BorderImgUrl="imageUrl('top4')"
+                        :avatarUrl="RankingHasTop10[3].avatar"
+                        :name="RankingHasTop10[3].nickname"
+                        :distributionValue="RankingHasTop10[3].quantity || ''"
+                        style="width: 38%"
+                        @click="viewUserInfo(RankingHasTop10[3].userId)"
+                      />
+                    </div>
+                  </div>
+                </itemCenter>
 
-                    <!-- 头像 -->
+                <!-- 第5-10名 -->
-                    <img
+                <itemCenter
-                      :src="listItem?.avatar || ''"
+                  style="min-height: 90.13vw"
-                      alt=""
+                  :imgUrl="imageUrl('RankingCenterBg')"
-                      style="
+                  :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
-                        display: block;
+                >
-                        width: 13vw;
+                  <!-- 5-7 -->
-                        aspect-ratio: 1/1;
+                  <div style="width: 100%; display: flex; justify-content: space-between">
-                        border-radius: 50%;
+                    <TopUser
-                        object-fit: cover;
+                      v-for="topUser in RankingHasTop10.slice(4, 7)"
-                      "
+                      :key="topUser.userId"
-                      @error="handleAvatarImageError"
+                      ranking="5-7"
+                      :BorderImgUrl="imageUrl('top5_7')"
+                      :avatarUrl="topUser.avatar"
+                      :name="topUser.nickname"
+                      :distributionValue="topUser.quantity || ''"
+                      style="width: 30%"
+                      @click="viewUserInfo(topUser.userId)"
                     />
+                  </div>
 
-                    <!-- 名称、id -->
+                  <!-- 8-10 -->
+                  <div style="width: 100%; display: flex; justify-content: space-between">
+                    <TopUser
+                      v-for="topUser in RankingHasTop10.slice(7, 10)"
+                      :key="topUser.userId"
+                      ranking="8-10"
+                      :BorderImgUrl="imageUrl('top8_10')"
+                      :avatarUrl="topUser.avatar"
+                      :name="topUser.nickname"
+                      :distributionValue="topUser.quantity || ''"
+                      style="width: 30%"
+                      @click="viewUserInfo(topUser.userId)"
+                    />
+                  </div>
+                </itemCenter>
+
+                <!-- 第11名开始 -->
+                <div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
+                  <itemCenter
+                    style="min-height: 26.4vw"
+                    v-for="(listItem, index) in showRanking"
+                    :key="listItem.userId"
+                    :imgUrl="imageUrl('RankingItem')"
+                    :contentStyle="`padding: 0 10%`"
+                    :lazy="true"
+                    :immediate="index < 2"
+                    @click="viewUserInfo(listItem.userId)"
+                  >
+                    <!-- 基本信息 -->
                     <div
                       style="
                         flex: 1;
                         min-width: 0;
-                        align-self: stretch;
 
                         display: flex;
-                        flex-direction: column;
                         justify-content: space-around;
+                        align-items: center;
+
+                        gap: 8px;
                       "
                     >
+                      <!-- 排名 -->
+                      <div style="color: #ffe601; font-weight: 700">
+                        {{ listItem?.rank }}
+                      </div>
+
+                      <!-- 头像 -->
+                      <img
+                        :src="listItem?.avatar || ''"
+                        alt=""
+                        style="
+                          display: block;
+                          width: 13vw;
+                          aspect-ratio: 1/1;
+                          border-radius: 50%;
+                          object-fit: cover;
+                        "
+                        @error="handleAvatarImageError"
+                      />
+
+                      <!-- 名称、id -->
                       <div
                         style="
-                          color: #fff;
+                          flex: 1;
-                          font-weight: 860;
+                          min-width: 0;
-                          overflow: hidden;
+                          align-self: stretch;
-                          white-space: nowrap;
+
-                          text-overflow: ellipsis;
+                          display: flex;
+                          flex-direction: column;
+                          justify-content: space-around;
                         "
-                        class="UserNickname"
                       >
-                        {{ listItem?.nickname }}
+                        <div
-                      </div>
+                          style="
-                      <div style="color: #fff; font-weight: 590" class="UserNickname">
+                            color: #fff;
-                        {{ $t('user_id_prefix') }} {{ listItem?.account }}
+                            font-weight: 860;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                          "
+                          class="UserNickname"
+                        >
+                          {{ listItem?.nickname }}
+                        </div>
+                        <div style="color: #fff; font-weight: 590" class="UserNickname">
+                          {{ $t('user_id_prefix') }} {{ listItem?.account }}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <!-- 贡献值 -->
+                    <!-- 贡献值 -->
-                  <div
+                    <div
-                    style="
+                      style="
-                      width: auto;
+                        width: auto;
-                      min-width: 0;
+                        min-width: 0;
 
-                      display: flex;
+                        display: flex;
-                      align-items: center;
+                        align-items: center;
-                    "
+                      "
-                  >
+                    >
-                    <img
+                      <img
-                      v-smart-img
+                        v-smart-img
-                      src="/src/assets/icon/coin.png"
+                        src="/src/assets/icon/coin.png"
-                      alt=""
+                        alt=""
-                      style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+                        style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
-                    />
+                      />
-                    <div style="color: #ffe601; font-weight: 700" class="UserNickname">
+                      <div style="color: #ffe601; font-weight: 700" class="UserNickname">
-                      {{ listItem?.quantity }}
+                        {{ listItem?.quantity }}
+                      </div>
                     </div>
-                  </div>
+                  </itemCenter>
-                </itemCenter>
+                </div>
+
+                <!-- 底框 -->
+                <img
+                  v-smart-img
+                  :src="imageUrl('RankingBottomBorder')"
+                  alt=""
+                  width="100%"
+                  style="display: block; margin-top: -6vw; position: relative; z-index: 2"
+                />
               </div>
+            </div>
 
-              <!-- 底框 -->
+            <!-- 日榜 -->
-              <img
+            <div v-show="dailyShow" style="position: relative; width: 100%; margin: 10px 0">
-                v-smart-img
+              <div style="position: relative; z-index: 1">
-                :src="imageUrl('RankingBottomBorder')"
+                <!-- 头部 -->
-                alt=""
+                <itemCenter
-                width="100%"
+                  style="min-height: 132.2vw"
-                style="display: block; margin-top: -6vw; position: relative; z-index: 2"
+                  :imgUrl="imageUrl(getImgName('RankingMain'))"
-              />
+                  :contentStyle="`padding: 25% 0 0;flex-direction: column;`"
+                >
+                  <!-- 前3名 -->
+                  <itemCenter
+                    style="z-index: 0"
+                    :imgUrl="imageUrl('top1-3FrameDaily')"
+                    :contentStyle="`flex-direction: column;padding: 17vw 9.5vw 7vw 10.2vw;justify-content: space-between;`"
+                  >
+                    <!-- 第1名 -->
+                    <div style="display: flex; justify-content: center">
+                      <TopUserDaily
+                        ranking="1"
+                        :avatarUrl="RankingDailyHasTop3[0].avatar"
+                        :name="RankingDailyHasTop3[0].nickname"
+                        :distributionValue="RankingDailyHasTop3[0].quantity || ''"
+                        style="width: 40%"
+                        @click="viewUserInfo(RankingDailyHasTop3[0].userId)"
+                      />
+                    </div>
+                    <!-- 第2-3名 -->
+                    <div style="display: flex; justify-content: space-between; margin-top: -5vw">
+                      <TopUserDaily
+                        ranking="2"
+                        :avatarUrl="RankingDailyHasTop3[1].avatar"
+                        :name="RankingDailyHasTop3[1].nickname"
+                        :distributionValue="RankingDailyHasTop3[1].quantity || ''"
+                        style="width: 38%"
+                        @click="viewUserInfo(RankingDailyHasTop3[1].userId)"
+                      />
+                      <TopUserDaily
+                        ranking="3"
+                        :avatarUrl="RankingDailyHasTop3[2].avatar"
+                        :name="RankingDailyHasTop3[2].nickname"
+                        :distributionValue="RankingDailyHasTop3[2].quantity || ''"
+                        style="width: 38%"
+                        @click="viewUserInfo(RankingDailyHasTop3[2].userId)"
+                      />
+                    </div>
+                  </itemCenter>
+                </itemCenter>
+
+                <!-- 第4名开始 -->
+                <div
+                  v-if="showRankingDaily.length > 0"
+                  style="margin-top: -2vw; position: relative; z-index: -1"
+                >
+                  <itemCenter
+                    style="min-height: 26.4vw"
+                    v-for="(listItem, index) in showRankingDaily"
+                    :key="listItem.userId"
+                    :imgUrl="imageUrl('RankingItem')"
+                    :contentStyle="`padding: 0 10%`"
+                    :lazy="true"
+                    :immediate="index < 2"
+                    @click="viewUserInfo(listItem.userId)"
+                  >
+                    <!-- 基本信息 -->
+                    <div
+                      style="
+                        flex: 1;
+                        min-width: 0;
+
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+
+                        gap: 8px;
+                      "
+                    >
+                      <!-- 排名 -->
+                      <div style="color: #ffe601; font-weight: 700">
+                        {{ listItem?.rank }}
+                      </div>
+
+                      <!-- 头像 -->
+                      <img
+                        :src="listItem?.avatar || ''"
+                        alt=""
+                        style="
+                          display: block;
+                          width: 13vw;
+                          aspect-ratio: 1/1;
+                          border-radius: 50%;
+                          object-fit: cover;
+                        "
+                        @error="handleAvatarImageError"
+                      />
+
+                      <!-- 名称、id -->
+                      <div
+                        style="
+                          flex: 1;
+                          min-width: 0;
+                          align-self: stretch;
+
+                          display: flex;
+                          flex-direction: column;
+                          justify-content: space-around;
+                        "
+                      >
+                        <div
+                          style="
+                            color: #fff;
+                            font-weight: 860;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                          "
+                          class="UserNickname"
+                        >
+                          {{ listItem?.nickname }}
+                        </div>
+                        <div style="color: #fff; font-weight: 590" class="UserNickname">
+                          {{ $t('user_id_prefix') }} {{ listItem?.account }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 贡献值 -->
+                    <div
+                      style="
+                        width: auto;
+                        min-width: 0;
+
+                        display: flex;
+                        align-items: center;
+                      "
+                    >
+                      <img
+                        v-smart-img
+                        src="/src/assets/icon/coin.png"
+                        alt=""
+                        style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+                      />
+                      <div style="color: #ffe601; font-weight: 700" class="UserNickname">
+                        {{ listItem?.quantity }}
+                      </div>
+                    </div>
+                  </itemCenter>
+                </div>
+
+                <!-- 底框 -->
+                <img
+                  v-smart-img
+                  :src="imageUrl('RankingBottomBorder')"
+                  alt=""
+                  width="100%"
+                  style="display: block; margin-top: -6vw; position: relative; z-index: 2"
+                />
+              </div>
             </div>
           </div>
 
@@ -462,7 +638,38 @@
             v-show="rewardsShow"
             style="display: flex; flex-direction: column; align-items: center"
           >
+            <!-- 切换按钮 -->
+            <div style="display: flex; justify-content: space-around; margin-top: 2vw">
+              <!-- 周榜奖励模块按钮 -->
+              <div style="width: 40%; position: relative" @click="changeRanking('week')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('rewardWeeklyBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !weekShow,
+                  }"
+                  style="display: block; width: 100%"
+                />
+              </div>
+
+              <!-- 日榜奖励模块按钮 -->
+              <div style="width: 40%; position: relative" @click="changeRanking('daily')">
+                <img
+                  v-smart-img
+                  :src="imageUrl('rewardDailyBt')"
+                  alt=""
+                  :class="{
+                    'grayscale-container': !dailyShow,
+                  }"
+                  style="display: block; width: 100%"
+                />
+              </div>
+            </div>
+
+            <!-- 周榜奖励模块 -->
             <div
+              v-show="weekShow"
               v-for="(rewardsTop, top) in rewardsList"
               :key="top"
               style="position: relative; width: 100%; margin: 10px 0"
@@ -609,6 +816,14 @@
                 </div>
               </itemCenter>
             </div>
+
+            <!-- 日榜奖励模块 -->
+            <img
+              v-for="(value, index) in 3"
+              :src="imageUrl(`top${index + 1}RewardDaily`)"
+              alt=""
+              style="width: 100%; margin: 10px 0"
+            />
           </div>
         </div>
 
@@ -766,6 +981,7 @@ import {
 import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import TopUser from './components/topUser.vue'
+import TopUserDaily from './components/topUserDaily.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
 const gamesKingStore = useGamesKingStore()
@@ -873,10 +1089,33 @@ const changeModule = (module) => {
 const historyTopList = ref([]) // 历史榜首
 const historyTopIndex = ref(0)
 
-const Ranking = ref([]) // 排行榜
+const weekShow = ref(true) // 周榜展示
-const myRanking = ref({}) // 我的排名
+const dailyShow = ref(false) // 日榜展示
+const RankingWeek = ref([]) // 周榜
+const RankingDaily = ref([]) // 日榜
+const myWeekRanking = ref({}) // 我的周排名
+const myDailyRanking = ref({}) // 我的日排名
 const rewardsList = ref([]) // 奖励列表
-// const specialReward = ref({}) // 奖励列表
+const myRanking = computed(() => {
+  if (weekShow.value) {
+    return myWeekRanking.value
+  }
+  return myDailyRanking.value
+}) // 我的排名
+
+// 榜单切换
+const changeRanking = (type) => {
+  switch (type) {
+    case 'week':
+      weekShow.value = true
+      dailyShow.value = false
+      break
+    case 'daily':
+      weekShow.value = false
+      dailyShow.value = true
+      break
+  }
+}
 
 const topImg = ref([
   imageUrl('top1RewardBg'),
@@ -885,11 +1124,11 @@ const topImg = ref([
   imageUrl('top8_10RewardBg'),
 ]) // top奖励背景
 
-// 处理排行榜小于10人时的情况
+// 处理周榜小于10人时的情况
 const RankingHasTop10 = computed(() => {
-  let RankingShow = [...Ranking.value]
+  let RankingShow = [...RankingWeek.value]
-  if (Ranking.value.length < 10) {
+  if (RankingWeek.value.length < 10) {
-    let addNullUser = Array.from({ length: 10 - Ranking.value.length }, () => ({
+    let addNullUser = Array.from({ length: 10 - RankingWeek.value.length }, () => ({
       avatar: '',
       nickname: '',
       quantity: '',
@@ -899,9 +1138,29 @@ const RankingHasTop10 = computed(() => {
   return RankingShow
 })
 
-// 展示用的榜单
+// 展示用的周榜
 const showRanking = computed(() => {
-  return Ranking.value.filter((_, index) => index >= 10)
+  return RankingWeek.value.filter((_, index) => index >= 10)
+  // return []
+})
+
+// 处理日榜小于3人时的情况
+const RankingDailyHasTop3 = computed(() => {
+  let RankingShow = [...RankingDaily.value]
+  if (RankingDaily.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - RankingDaily.value.length }, () => ({
+      avatar: '',
+      nickname: '',
+      quantity: '',
+    }))
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
+
+// 展示用的日榜
+const showRankingDaily = computed(() => {
+  return RankingDaily.value.filter((_, index) => index >= 3)
   // return []
 })
 
@@ -986,16 +1245,30 @@ const getAllTopOne = async () => {
   }
 }
 
-// 获取排行榜和我的排名
+// 获取周排行榜和我的排名
-const getListAndMy = async () => {
+const getWeekListAndMy = async () => {
   let data = {
     activityType: 10,
   }
   const resMyWeekStarRanking = await getRankingListAndMyRanking(data)
   console.log('resMyWeekStarRanking:', resMyWeekStarRanking)
   if (resMyWeekStarRanking.status && resMyWeekStarRanking.body) {
-    myRanking.value = resMyWeekStarRanking.body.currentUserRank
+    myWeekRanking.value = resMyWeekStarRanking.body.currentUserRank
-    Ranking.value = resMyWeekStarRanking.body.rankingList
+    RankingWeek.value = resMyWeekStarRanking.body.rankingList
+  }
+}
+
+// 获取日排行榜和我的排名
+const getDailyListAndMy = async () => {
+  let data = {
+    activityType: 15,
+    cycleType: 1,
+  }
+  const resDailyListAndMy = await getRankingListAndMyRanking(data)
+  console.log('resDailyListAndMy:', resDailyListAndMy)
+  if (resDailyListAndMy.status && resDailyListAndMy.body) {
+    myDailyRanking.value = resDailyListAndMy.body.currentUserRank
+    RankingDaily.value = resDailyListAndMy.body.rankingList
   }
 }
 
@@ -1007,25 +1280,13 @@ const getRewardsAndGifts = async () => {
   }
 }
 
-// 获取指定类型活动资源
-const getActivityResource = async () => {
-  let data = {
-    sysOrigin: 'LIKEI',
-    activityType: 'GAME_KING',
-  }
-  const resActivityResource = await activityResource(data)
-  if (resActivityResource.status && resActivityResource.body) {
-    specialReward.value = resActivityResource.body?.[0]?.propsGroup?.activityRewardProps?.[0]
-  }
-}
-
 // 刷新页面数据
 const initData = async () => {
   await Promise.all([
     getAllTopOne(), // 获取历史榜首
-    getListAndMy(), // 获取排行榜和我的排名
+    getWeekListAndMy(), // 获取周榜和我的排名
+    getDailyListAndMy(), // 获取日榜和我的排名
     getRewardsAndGifts(), // 获取本周的礼物和奖励列表
-    // getActivityResource(), // 获取指定类型活动资源
   ])
 }
 
@@ -1038,17 +1299,21 @@ const preloadCriticalImages = async () => {
     imageUrl(getImgName('dailyPopUpNew')),
     imageUrl('helpBt'),
     imageUrl(getImgName('helpInfo')),
-    imageUrl(getImgName('historyBt')),
     imageUrl(getImgName('historyBtActive')),
     imageUrl('myRankingBg'),
-    imageUrl(getImgName('rankingBt')),
     imageUrl(getImgName('rankingBtActive')),
     imageUrl(getImgName('rewardBtActive')),
-    imageUrl(getImgName('rewardsBt')),
+    imageUrl('rankDailyBt'),
+    imageUrl('rankWeeklyBt'),
     imageUrl('RankingBottomBorder'),
     imageUrl('RankingCenterBg'),
     imageUrl('RankingItem'),
     imageUrl(getImgName('RankingMain')),
+    imageUrl('rewardDailyBt'),
+    imageUrl('rewardWeeklyBt'),
+    imageUrl('top1RewardDaily'),
+    imageUrl('top2RewardDaily'),
+    imageUrl('top3RewardDaily'),
     imageUrl('timeBg'),
     imageUrl('topBackBt'),
     imageUrl('topNextBt'),
@@ -1058,6 +1323,7 @@ const preloadCriticalImages = async () => {
     imageUrl('top4'),
     imageUrl('top5_7'),
     imageUrl('top8_10'),
+    imageUrl('top1-3FrameDaily'),
   ]
 
   await preloadImages(criticalImages)
@@ -1147,6 +1413,10 @@ onUnmounted(() => {
   align-items: center;
 }
 
+.grayscale-container {
+  filter: grayscale(100%) brightness(100%);
+}
+
 .btTitle {
   color: #fff;
   font-weight: 700;