chore(总排行榜): 样式图源调整

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

@@ -1,7 +1,7 @@
 <!-- src/views/Ranking/Overall/components/topUser.vue -->
 <template>
   <div style="width: 100%">
-    <div style="position: relative" :style="{ minHeight: minHeight }">
+    <div style="position: relative" :style="{ minHeight: currentLayout.minHeight }">
       <img
         v-smart-img
         :src="BorderImgUrl"
@@ -10,11 +10,10 @@
         width="100%"
         style="display: block; position: relative; z-index: 2"
       />
-      <!-- 头像 -->
+
       <div
         style="
           position: absolute;
-          top: 0;
           left: 0;
           right: 0;
           z-index: 1;
@@ -22,80 +21,93 @@
           justify-content: center;
           align-items: center;
         "
-        :style="avatarBoxHeight"
+        :style="currentLayout.avatarBox"
       >
-        <div style="width: 70%">
+        <div :style="currentLayout.avatarImage">
           <img
             :src="avatarUrl || ''"
             alt=""
             width="100%"
             style="display: block; aspect-ratio: 1/1; object-fit: cover"
-            :style="{ borderRadius: Type == 'Room' ? '0' : '50%' }"
+            :style="{ borderRadius: avatarBorderRadius }"
             @error="handleAvatarImageError"
           />
         </div>
       </div>
 
-      <!-- 用户名和贡献值 -->
+      <template v-if="isFirst">
-      <div
-        style="
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          z-index: 3;
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        "
-        :style="InfoBoxHeight"
-      >
         <div
           style="
-            height: 28%;
+            position: absolute;
-            width: 60%;
+            left: 50%;
+            z-index: 3;
             display: flex;
             justify-content: center;
             align-items: center;
+            transform: translateX(-50%);
           "
+          :style="currentLayout.name"
         >
-          <div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+          <div style="font-weight: 860" class="showText top1Text">
             {{ name }}
           </div>
         </div>
-        <div style="width: 60%; position: relative">
+
-          <img v-smart-img :src="coinNumBgUrl" alt="" width="100%" style="display: block" />
+        <div
-          <div
+          v-if="displayValue"
-            v-if="distributionValue"
+          style="
-            style="
+            position: absolute;
-              position: absolute;
+            left: 50%;
-              inset: 0;
+            z-index: 3;
-              display: flex;
+            display: flex;
-              justify-content: center;
+            justify-content: center;
-              align-items: center;
+            align-items: center;
-              padding: 3% 5%;
+            gap: 0.2em;
-            "
+            transform: translateX(-50%);
-          >
+          "
-            <img
+          :style="currentLayout.value"
-              v-smart-img
+        >
-              src="/src/assets/icon/Azizi/coin.png"
+          <img
-              alt=""
+            v-smart-img
-              style="display: block; width: 1.3em"
+            src="/src/assets/icon/Azizi/coin.png"
-            />
+            alt=""
-            <div
+            style="display: block; width: 1.1em; flex-shrink: 0"
-              style="
+          />
-                font-weight: 700;
+          <div style="font-weight: 700; color: white" class="showText top1ValueText">
-                background: linear-gradient(180deg, #ffe656 0%, #fff 100%);
+            {{ displayValue }}
-                background-clip: text;
+          </div>
-                -webkit-background-clip: text;
+        </div>
-                -webkit-text-fill-color: transparent;
+      </template>
-              "
+
-              class="showText"
+      <div
-              :class="isTopOne ? 'top1Text' : 'text'"
+        v-else
-            >
+        style="
-              {{ distributionValue }}
+          position: absolute;
-            </div>
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 3;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 0.35em;
+        "
+        :style="currentLayout.info"
+      >
+        <div style="display: flex; justify-content: center; align-items: center; min-width: 0">
+          <div style="font-weight: 860" class="showText text">
+            {{ name }}
+          </div>
+        </div>
+
+        <div style="display: flex; align-items: center">
+          <img
+            v-smart-img
+            src="/src/assets/icon/Azizi/coin.png"
+            alt=""
+            style="display: block; width: 0.95em; flex-shrink: 0"
+          />
+          <div style="font-weight: 700; color: white" class="showText valueText">
+            {{ displayValue }}
           </div>
         </div>
       </div>
@@ -104,119 +116,132 @@
 </template>
 
 <script setup>
-import { computed, watch } from 'vue'
+import { computed } from 'vue'
-import { getPngUrl } from '@/config/imagePaths.js'
 import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
 
-// 获取OSS图片URL的函数
+const TOP_USER_LAYOUTS = {
-const coinNumBgUrl = getPngUrl('Ranking/Overall/', 'coinNumBg')
+  Wealth: {
+    1: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '36%' },
+      name: { bottom: '16%', width: '38%', maxWidth: '38%', height: '7.2%' },
+      value: { bottom: '2%', width: '34%', maxWidth: '34%', height: '10%' },
+    },
+    2: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+    3: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+  },
+  Charm: {
+    1: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '110%' },
+      avatarImage: { width: '36%' },
+      name: { bottom: '14%', width: '30%', height: '7.2%' },
+      value: { bottom: '2%', width: '34%', height: '10%' },
+    },
+    2: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+    3: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+  },
+  Room: {
+    1: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '100%' },
+      avatarImage: { width: '27%' },
+      name: { bottom: '24%', width: '30%', height: '7.2%' },
+      value: { bottom: '3%', width: '34%', height: '10%' },
+    },
+    2: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+    3: {
+      minHeight: '0vw',
+      avatarBox: { top: '0', height: '90%' },
+      avatarImage: { width: '42%' },
+      info: { bottom: '0', height: '17%', width: '60%' },
+    },
+  },
+}
 
 const props = defineProps({
   Type: {
-    type: Boolean,
+    type: String,
     default: '',
   },
-
+  rank: {
+    type: Number,
+    default: 1,
+  },
   isTopOne: {
     type: Boolean,
     default: false,
   },
-
   avatarUrl: {
     type: String,
     default: '/src/assets/icon/Azizi/defaultAvatar.png',
   },
-
   BorderImgUrl: {
     type: String,
     required: true,
   },
-
   name: {
     type: String,
     default: '',
   },
-
   distributionValue: {
     type: String,
     default: '',
   },
 })
 
-watch(
+const currentType = computed(() => {
-  () => props.Type,
+  return TOP_USER_LAYOUTS[props.Type] ? props.Type : 'Wealth'
-  (newVal, oldVal) => {
-    console.log('Type 变化 =>', '新值:', newVal, '旧值:', oldVal)
-  },
-)
-
-// 盒子最小高度
-const minHeight = computed(() => {
-  if (props.Type == 'Wealth') {
-    if (props.isTopOne) {
-      return `64.11vw`
-    } else {
-      return `50.20vw`
-    }
-  } else if (props.Type == 'Charm') {
-    if (props.isTopOne) {
-      return `64.11vw`
-    } else {
-      return `50.20vw`
-    }
-  } else if (props.Type == 'Room') {
-    if (props.isTopOne) {
-      return `67.19vw`
-    } else {
-      return `49.68vw`
-    }
-  }
 })
 
-// 头像盒子高度
+const currentRank = computed(() => {
-const avatarBoxHeight = computed(() => {
+  if (props.isTopOne) {
-  if (props.Type == 'Wealth') {
+    return 1
-    if (props.isTopOne) {
-      return `height:60%`
-    } else {
-      return `height:60%`
-    }
-  } else if (props.Type == 'Charm') {
-    if (props.isTopOne) {
-      return `height:55%`
-    } else {
-      return `height:60%`
-    }
-  } else if (props.Type == 'Room') {
-    if (props.isTopOne) {
-      return `height:50%`
-    } else {
-      return `height:55%`
-    }
   }
+
+  return props.rank === 3 ? 3 : 2
 })
 
-// 信息盒子高度
+const isFirst = computed(() => {
-const InfoBoxHeight = computed(() => {
+  return currentRank.value === 1
-  if (props.Type == 'Wealth') {
+})
-    if (props.isTopOne) {
+
-      return `height:40%`
+const currentLayout = computed(() => {
-    } else {
+  return TOP_USER_LAYOUTS[currentType.value][currentRank.value]
-      return `height:40%`
+})
-    }
+
-  } else if (props.Type == 'Charm') {
+const avatarBorderRadius = computed(() => {
-    if (props.isTopOne) {
+  return props.Type === 'Room' ? '0' : '50%'
-      return `height:42%`
+})
-    } else {
+
-      return `height:41%`
+const displayValue = computed(() => {
-    }
+  return props.distributionValue || '0'
-  } else if (props.Type == 'Room') {
-    if (props.isTopOne) {
-      return `height:45%`
-    } else {
-      return `height:42%`
-    }
-  }
 })
 </script>
 
@@ -234,11 +259,19 @@ const InfoBoxHeight = computed(() => {
 }
 
 .top1Text {
-  font-size: 0.9em;
+  font-size: 0.86em;
+}
+
+.top1ValueText {
+  font-size: 0.72em;
 }
 
 .text {
-  font-size: 0.8em;
+  font-size: 0.74em;
+}
+
+.valueText {
+  font-size: 0.68em;
 }
 
 @media screen and (max-width: 360px) {