style(总排行榜页): 调整背景图的切换方式

src/views/Ranking/Overall/Ranking.vue

@@ -1,297 +1,322 @@
 <template>
-  <div class="fullPage" :style="{ backgroundColor, backgroundImage }">
+  <div class="fullPage" :style="{ backgroundColor }">
-    <!-- 哨兵元素 -->
+    <!-- 背景图 -->
-    <div ref="sentinel"></div>
+    <div style="position: absolute; top: 0; left: 0; width: 100vw; z-index: 3">
+      <img
+        v-show="rankingType == 'Wealth'"
+        :src="images.bgWealth"
+        alt=""
+        style="display: block; width: 100%; object-fit: cover"
+      />
+      <img
+        v-show="rankingType == 'Charm'"
+        :src="images.bgCharm"
+        alt=""
+        style="display: block; width: 100%; object-fit: cover"
+      />
+      <img
+        v-show="rankingType == 'Room'"
+        :src="images.bgRoom"
+        alt=""
+        style="display: block; width: 100%; object-fit: cover"
+      />
+    </div>
 
-    <!-- 粘性布局贴顶部 -->
+    <!-- 主要内容 -->
-    <div
+    <div style="position: relative; z-index: 4">
-      ref="stickyHeader"
+      <!-- 哨兵元素 -->
-      style="
+      <div ref="sentinel"></div>
-        position: sticky;
-        top: 0;
-        z-index: 999;
-        border-radius: 0 0 12px 12px;
-        transition: all 0.3s;
-      "
-    >
-      <!-- 状态栏占位区域（仅在APP中显示） -->
-      <div v-if="isInAppEnvironment" style="height: 40px"></div>
 
-      <!-- 顶部导航栏 -->
+      <!-- 粘性布局贴顶部 -->
-      <div style="padding: 4px 8%">
-        <div style="display: flex; justify-content: space-around; position: relative">
-          <div
-            class="tab"
-            @click="changeType('Wealth')"
-            style=""
-            :style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
-          >
-            Wealth
-          </div>
-          <div
-            class="tab"
-            @click="changeType('Charm')"
-            style=""
-            :style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
-          >
-            Charm
-          </div>
-          <div
-            class="tab"
-            @click="changeType('Room')"
-            style=""
-            :style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
-          >
-            Room
-          </div>
-
-          <!-- 推出键 -->
-          <img
-            v-smart-img
-            src="../../../assets/icon/arrowBack.png"
-            alt=""
-            style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
-            width="6%"
-            @click="closePage"
-          />
-        </div>
-      </div>
-
-      <!-- 排行榜时间选择 -->
       <div
+        ref="stickyHeader"
         style="
-          margin: 10px 4% 0;
+          position: sticky;
-          padding: 4px 16px;
+          top: 0;
-          border-radius: 32px;
+          z-index: 999;
-          backdrop-filter: blur(32px);
+          border-radius: 0 0 12px 12px;
-
+          transition: all 0.3s;
-          display: flex;
-          justify-content: space-between;
         "
-        :style="{ border, background }"
       >
-        <!-- <div
+        <!-- 状态栏占位区域（仅在APP中显示） -->
+        <div v-if="isInAppEnvironment" style="height: 40px"></div>
+
+        <!-- 顶部导航栏 -->
+        <div style="padding: 4px 8%">
+          <div style="display: flex; justify-content: space-around; position: relative">
+            <div
+              class="tab"
+              @click="changeType('Wealth')"
+              style=""
+              :style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
+            >
+              Wealth
+            </div>
+            <div
+              class="tab"
+              @click="changeType('Charm')"
+              style=""
+              :style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
+            >
+              Charm
+            </div>
+            <div
+              class="tab"
+              @click="changeType('Room')"
+              style=""
+              :style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
+            >
+              Room
+            </div>
+
+            <!-- 推出键 -->
+            <img
+              v-smart-img
+              src="../../../assets/icon/arrowBack.png"
+              alt=""
+              style="position: absolute; left: 0; top: 50%; transform: translateY(-50%)"
+              width="6%"
+              @click="closePage"
+            />
+          </div>
+        </div>
+
+        <!-- 排行榜时间选择 -->
+        <div
+          style="
+            margin: 10px 4% 0;
+            padding: 4px 16px;
+            border-radius: 32px;
+            backdrop-filter: blur(32px);
+
+            display: flex;
+            justify-content: space-between;
+          "
+          :style="{ border, background }"
+        >
+          <!-- <div
           class="tag"
           :class="{ tagActive: selectedTimeTab == 'Hourly' }"
           @click="changeDateType('Hourly')"
         >
           Hourly
         </div> -->
-        <div
-          class="tag"
-          :class="{ tagActive: selectedTimeTab == 'Daily' }"
-          @click="changeDateType('Daily')"
-        >
-          Daily
-        </div>
-        <div
-          class="tag"
-          :class="{ tagActive: selectedTimeTab == 'Weekly' }"
-          @click="changeDateType('Weekly')"
-        >
-          Weekly
-        </div>
-        <div
-          class="tag"
-          :class="{ tagActive: selectedTimeTab == 'Monthly' }"
-          @click="changeDateType('Monthly')"
-        >
-          Monthly
-        </div>
-      </div>
-    </div>
-
-    <!-- 排行榜模块 -->
-    <div style="padding: 10px 0">
-      <!-- 前3名 -->
-      <div style="margin: 3% 10px 0">
-        <!-- 第一 -->
-        <div style="display: flex; justify-content: center">
-          <TopUser
-            :Type="rankingType"
-            :isTopOne="true"
-            :BorderImgUrl="topBorderBg"
-            :avatarUrl="RankingTop3[0].avatar || ''"
-            :name="RankingTop3[0].nickname || ''"
-            :distributionValue="RankingTop3[0].quantityFormat || ''"
-            style="width: 40%"
-            @click="gotoAppPage(RankingTop3[0].id)"
-          />
-        </div>
-        <!-- 第二三 -->
-        <div style="display: flex; justify-content: space-between; margin-top: -45%">
-          <TopUser
-            :Type="rankingType"
-            :BorderImgUrl="top2BorderBg"
-            :avatarUrl="RankingTop3[1].avatar || ''"
-            :name="RankingTop3[1].nickname || ''"
-            :distributionValue="RankingTop3[1].quantityFormat || ''"
-            style="width: 32%"
-            @click="gotoAppPage(RankingTop3[1].id)"
-          />
-          <TopUser
-            :Type="rankingType"
-            :BorderImgUrl="top3BorderBg"
-            :avatarUrl="RankingTop3[2].avatar || ''"
-            :name="RankingTop3[2].nickname || ''"
-            :distributionValue="RankingTop3[2].quantityFormat || ''"
-            style="width: 32%"
-            @click="gotoAppPage(RankingTop3[2].id)"
-          />
-        </div>
-      </div>
-
-      <!-- 第四名开始 -->
-      <div style="margin: 3% 10px 0">
-        <div
-          v-for="(userInfo, index) in RankingFromTop4"
-          :key="userInfo.id"
-          style="
-            border-radius: 12px;
-            backdrop-filter: blur(32px);
-            margin: 5px 0;
-            padding: 3%;
-
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 4px;
-          "
-          :style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
-          @click="gotoAppPage(userInfo.id)"
-        >
-          <!-- 基本信息 -->
           <div
+            class="tag"
+            :class="{ tagActive: selectedTimeTab == 'Daily' }"
+            @click="changeDateType('Daily')"
+          >
+            Daily
+          </div>
+          <div
+            class="tag"
+            :class="{ tagActive: selectedTimeTab == 'Weekly' }"
+            @click="changeDateType('Weekly')"
+          >
+            Weekly
+          </div>
+          <div
+            class="tag"
+            :class="{ tagActive: selectedTimeTab == 'Monthly' }"
+            @click="changeDateType('Monthly')"
+          >
+            Monthly
+          </div>
+        </div>
+      </div>
+
+      <!-- 排行榜模块 -->
+      <div style="padding: 10px 0">
+        <!-- 前3名 -->
+        <div style="margin: 3% 10px 0">
+          <!-- 第一 -->
+          <div style="display: flex; justify-content: center">
+            <TopUser
+              :Type="rankingType"
+              :isTopOne="true"
+              :BorderImgUrl="topBorderBg"
+              :avatarUrl="RankingTop3[0].avatar || ''"
+              :name="RankingTop3[0].nickname || ''"
+              :distributionValue="RankingTop3[0].quantityFormat || ''"
+              style="width: 40%"
+              @click="gotoAppPage(RankingTop3[0].id)"
+            />
+          </div>
+          <!-- 第二三 -->
+          <div style="display: flex; justify-content: space-between; margin-top: -45%">
+            <TopUser
+              :Type="rankingType"
+              :BorderImgUrl="top2BorderBg"
+              :avatarUrl="RankingTop3[1].avatar || ''"
+              :name="RankingTop3[1].nickname || ''"
+              :distributionValue="RankingTop3[1].quantityFormat || ''"
+              style="width: 32%"
+              @click="gotoAppPage(RankingTop3[1].id)"
+            />
+            <TopUser
+              :Type="rankingType"
+              :BorderImgUrl="top3BorderBg"
+              :avatarUrl="RankingTop3[2].avatar || ''"
+              :name="RankingTop3[2].nickname || ''"
+              :distributionValue="RankingTop3[2].quantityFormat || ''"
+              style="width: 32%"
+              @click="gotoAppPage(RankingTop3[2].id)"
+            />
+          </div>
+        </div>
+
+        <!-- 第四名开始 -->
+        <div style="margin: 3% 10px 0">
+          <div
+            v-for="(userInfo, index) in RankingFromTop4"
+            :key="userInfo.id"
             style="
-              width: 75%;
+              border-radius: 12px;
-              min-width: 0;
+              backdrop-filter: blur(32px);
+              margin: 5px 0;
+              padding: 3%;
+
               display: flex;
-              justify-content: space-around;
+              justify-content: space-between;
               align-items: center;
               gap: 4px;
             "
+            :style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
+            @click="gotoAppPage(userInfo.id)"
           >
-            <!-- 排名 -->
+            <!-- 基本信息 -->
-            <div style="width: 10%; display: flex; justify-content: center; align-items: center">
-              <div style="font-weight: 700">{{ index + 4 }}</div>
-            </div>
-            <!-- 头像 -->
-            <img
-              v-smart-img
-              :src="userInfo.avatar || ''"
-              alt=""
-              style="
-                display: block;
-                width: 15%;
-                aspect-ratio: 1/1;
-                border-radius: 50%;
-                object-fit: cover;
-              "
-              :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
-              @error="defaultAvatarUrl"
-            />
             <div
               style="
+                width: 75%;
                 min-width: 0;
-                width: calc(100% - 10% - 15% - 8px);
+                display: flex;
-                font-weight: 700;
+                justify-content: space-around;
-                overflow: hidden;
+                align-items: center;
-                white-space: nowrap;
+                gap: 4px;
-                text-overflow: ellipsis;
               "
             >
-              {{ userInfo.nickname }}
+              <!-- 排名 -->
+              <div style="width: 10%; display: flex; justify-content: center; align-items: center">
+                <div style="font-weight: 700">{{ index + 4 }}</div>
+              </div>
+              <!-- 头像 -->
+              <img
+                v-smart-img
+                :src="userInfo.avatar || ''"
+                alt=""
+                style="
+                  display: block;
+                  width: 15%;
+                  aspect-ratio: 1/1;
+                  border-radius: 50%;
+                  object-fit: cover;
+                "
+                :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
+                @error="defaultAvatarUrl"
+              />
+              <div
+                style="
+                  min-width: 0;
+                  width: calc(100% - 10% - 15% - 8px);
+                  font-weight: 700;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+              >
+                {{ userInfo.nickname }}
+              </div>
             </div>
-          </div>
 
-          <!-- 贡献值 -->
+            <!-- 贡献值 -->
-          <div style="flex: 1; min-width: 0; display: flex; align-items: center; width: 30%">
+            <div style="flex: 1; min-width: 0; display: flex; align-items: center; width: 30%">
-            <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: 25%; aspect-ratio: 1/1"
+                style="display: block; width: 25%; aspect-ratio: 1/1"
-            />
+              />
-            <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
+              <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
-              {{ userInfo.quantityFormat }}
+                {{ userInfo.quantityFormat }}
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- 我的排名 -->
+    <!-- 我的排名 -->
-  <div
-    style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
-    :style="{ backgroundColor }"
-  >
     <div
-      style="
+      style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
-        border-radius: 12px 12px 0 0;
+      :style="{ backgroundColor }"
-        backdrop-filter: blur(32px);
-        padding: 2%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 4px;
-      "
-      :style="{
-        background: rankItemBackground,
-        borderTop: '2px ' + rankItemBorder,
-        borderLeft: '1px ' + rankItemBorder,
-        borderRight: '1px ' + rankItemBorder,
-      }"
     >
-      <!-- 基本信息 -->
       <div
         style="
-          width: 80%;
+          border-radius: 12px 12px 0 0;
-          min-width: 0;
+          backdrop-filter: blur(32px);
+          padding: 2%;
           display: flex;
-          justify-content: space-around;
+          justify-content: space-between;
           align-items: center;
           gap: 4px;
         "
+        :style="{
+          background: rankItemBackground,
+          borderTop: '2px ' + rankItemBorder,
+          borderLeft: '1px ' + rankItemBorder,
+          borderRight: '1px ' + rankItemBorder,
+        }"
       >
-        <!-- 排名 -->
+        <!-- 基本信息 -->
-        <div style="width: 10%; display: flex; justify-content: center; align-items: center">
-          <div style="font-weight: 700">{{ myRanking.rank || 999 }}</div>
-        </div>
-        <!-- 头像 -->
-        <img
-          v-smart-img
-          :src="myRanking.avatar || ''"
-          alt=""
-          style="display: block; width: 15%; aspect-ratio: 1/1"
-          :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
-          @error="defaultAvatarUrl"
-        />
-        <!-- 名称 -->
         <div
           style="
+            width: 80%;
             min-width: 0;
-            width: calc(100% - 10% - 15% - 8px);
+            display: flex;
-            font-weight: 700;
+            justify-content: space-around;
-            overflow: hidden;
+            align-items: center;
-            white-space: nowrap;
+            gap: 4px;
-            text-overflow: ellipsis;
           "
         >
-          {{ myRanking.nickname || '' }}
+          <!-- 排名 -->
+          <div style="width: 10%; display: flex; justify-content: center; align-items: center">
+            <div style="font-weight: 700">{{ myRanking.rank || 999 }}</div>
+          </div>
+          <!-- 头像 -->
+          <img
+            v-smart-img
+            :src="myRanking.avatar || ''"
+            alt=""
+            style="display: block; width: 15%; aspect-ratio: 1/1"
+            :style="{ borderRadius: rankingType === 'Room' ? '10%' : '50%' }"
+            @error="defaultAvatarUrl"
+          />
+          <!-- 名称 -->
+          <div
+            style="
+              min-width: 0;
+              width: calc(100% - 10% - 15% - 8px);
+              font-weight: 700;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            "
+          >
+            {{ myRanking.nickname || '' }}
+          </div>
         </div>
-      </div>
 
-      <!-- 贡献值 -->
+        <!-- 贡献值 -->
-      <div style="flex: 1; min-width: 0; display: flex; align-items: center">
+        <div style="flex: 1; min-width: 0; display: flex; 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: 30%; aspect-ratio: 1/1"
+            style="display: block; width: 30%; aspect-ratio: 1/1"
-        />
+          />
-        <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
+          <div style="font-weight: 500; color: rgba(248, 182, 45, 1)">
-          {{ myRanking.quantityFormat || 0 }}
+            {{ myRanking.quantityFormat || 0 }}
+          </div>
         </div>
       </div>
     </div>
@@ -422,7 +447,6 @@ const RankingFromTop4 = computed(() => {
 
 // 动态样式
 const backgroundColor = ref('') //页面样式
-const backgroundImage = ref('') //页面样式
 const border = ref('') //时间标签样式
 const background = ref('') //时间标签样式
 const rankItemBackground = ref('') //排名项背景
@@ -438,7 +462,6 @@ const stickyHeader = ref(null)
 watchEffect(() => {
   if (rankingType.value == 'Wealth') {
     backgroundColor.value = '#230F0A'
-    backgroundImage.value = `url(${images.bgWealth})`
     topBorderBg.value = images['top1-wealth']
     top2BorderBg.value = images['top2']
     top3BorderBg.value = images['top3']
@@ -452,7 +475,6 @@ watchEffect(() => {
   }
   if (rankingType.value == 'Charm') {
     backgroundColor.value = '#112C1E'
-    backgroundImage.value = `url(${images.bgCharm})`
     topBorderBg.value = images['top1-charm']
     top2BorderBg.value = images['top2']
     top3BorderBg.value = images['top3']
@@ -466,7 +488,6 @@ watchEffect(() => {
   }
   if (rankingType.value == 'Room') {
     backgroundColor.value = '#211031'
-    backgroundImage.value = `url(${images.bgRoom})`
     topBorderBg.value = images['top1-room']
     top2BorderBg.value = images['top2-room']
     top3BorderBg.value = images['top3-room']

src/views/Ranking/Overall/components/topUser.vue

@@ -4,6 +4,7 @@
       <img
         v-smart-img
         :src="BorderImgUrl"
+        :key="BorderImgUrl"
         alt=""
         width="100%"
         style="display: block; position: relative; z-index: 2"