From d7d4fd8a4874dbf7c380e2d8bc2dafd0b0c798aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Sat, 1 Mar 2025 14:58:21 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=8E=92=E8=A1=8C?=
 =?UTF-8?q?=E6=A6=9C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/components/AvatarInfo.vue     |   8 +-
 Yi.Bbs.Vue3/src/views/money/Index.vue         | 210 ++++++++++++++----
 .../views/money/components/AwardPedestal.vue  | 173 +++++++++++++--
 3 files changed, 322 insertions(+), 69 deletions(-)

diff --git a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
index 86ee167a..771410da 100644
--- a/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
+++ b/Yi.Bbs.Vue3/src/components/AvatarInfo.vue
@@ -37,16 +37,10 @@
 </template>
 <script setup>
 import useUserStore from "@/stores/user";
-import { reactive, watch, onMounted, computed, ref } from "vue";
-import { upload } from "@/apis/fileApi";
-import useAuths from "@/hooks/useAuths";
+import { reactive, watch, onMounted, ref } from "vue";
 import UserInfoCard from "./UserInfoCard/index.vue";
 import UserLimitTag from "./UserLimitTag.vue";
 
-
-const { getToken } = useAuths();
-const isHasToken = getToken();
-
 //userInfo
 //{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
 const props = defineProps([
diff --git a/Yi.Bbs.Vue3/src/views/money/Index.vue b/Yi.Bbs.Vue3/src/views/money/Index.vue
index c133b74f..22ca807d 100644
--- a/Yi.Bbs.Vue3/src/views/money/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/money/Index.vue
@@ -69,37 +69,88 @@ const handleClickTabs=async (pane) => {
 
 <template>
   <div class="content-body">
-    <el-tabs v-model="tabSelect"  @tab-click="handleClickTabs" class="tabs">
-      <el-tab-pane label="钱钱" name="money"><p class="tab-title">钱钱排行榜</p></el-tab-pane>
-      <el-tab-pane label="价值" name="value"><p class="tab-title">价值排行榜</p></el-tab-pane>
-      <el-tab-pane label="积分" name="points"><p class="tab-title">积分排行榜</p></el-tab-pane>
-    </el-tabs>
-    <AwardPedestal v-show="isFirstPage" :goldUserInfo="pointList[0]" :silverUserInfo="pointList[1]"
-      :bronzeUserInfo="pointList[2]" />
-    <div v-for="item in pointListFilter" :key="item.id" class="list-div">
-      <div class="list-left">
-        <span> {{ item.order }}</span>
-        <AvatarInfo :userInfo="item" :isSelf="false" />
-        <span class="money">
-          {{ item.money }}
-        </span>
-      </div>
-      <div class="list-right">
-        关注
-      </div>
-
+    <div class="header-banner">
+      <h1 class="main-title">{{ tabSelect === 'money' ? '钱钱排行榜' : tabSelect === 'value' ? '价值排行榜' : '积分排行榜' }}</h1>
     </div>
+    <el-tabs v-model="tabSelect" @tab-click="handleClickTabs" class="tabs">
+      <el-tab-pane label="钱钱" name="money"></el-tab-pane>
+      <el-tab-pane label="价值" name="value"></el-tab-pane>
+      <el-tab-pane label="积分" name="points"></el-tab-pane>
+    </el-tabs>
+    
+    <transition name="fade">
+      <AwardPedestal v-show="isFirstPage" :goldUserInfo="pointList[0]" :silverUserInfo="pointList[1]"
+        :bronzeUserInfo="pointList[2]" />
+    </transition>
+    
+    <div class="list-container">
+      <transition-group name="list" tag="div">
+        <div v-for="(item, index) in pointListFilter" :key="item.id" class="list-div" :style="{'--delay': `${index * 0.05}s`}">
+          <div class="list-left">
+            <span class="rank-number" :class="{'top-ten': item.order <= 10}"> {{ item.order }}</span>
+            <AvatarInfo :userInfo="item" :isSelf="false" />
+            <span class="money">
+              {{ item.money }}
+            </span>
+          </div>
+          <div class="list-right">
+            <el-button type="primary" size="small" class="follow-btn">关注</el-button>
+          </div>
+        </div>
+      </transition-group>
+    </div>
+    
     <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
       :page-sizes="[10, 30, 50, 100]" v-model:current-page="moneyQuery.skipCount"
-      v-model:page-size="moneyQuery.maxResultCount" @current-change="changePage" @size-change="changePage" />
+      v-model:page-size="moneyQuery.maxResultCount" @current-change="changePage" @size-change="changePage" class="pagination" />
   </div>
 </template>
 <style scoped lang="scss">
-.el-pagination {
+.header-banner {
+  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+  padding: 30px 0;
+  border-radius: 10px;
+  margin-bottom: 30px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
 
-  padding: 10px;
+.main-title {
+  color: white;
+  text-align: center;
+  font-size: 2.5rem;
+  margin: 0;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.list-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.list-enter-active, .list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.el-pagination {
+  padding: 20px;
   display: flex;
   justify-content: center;
+  margin-top: 20px;
 }
 
 .content-body {
@@ -107,51 +158,132 @@ const handleClickTabs=async (pane) => {
   margin-top: 20px;
   padding: 20px;
   background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
 .list-div {
   justify-content: space-between;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
   background-color: #ffffff;
   height: 80px;
-  width: 850px;
+  width: 100%;
   cursor: pointer;
-  padding: 16px 12px;
+  padding: 16px 20px;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+  transition: all 0.3s ease;
+  animation: slideIn 0.5s ease backwards;
+  animation-delay: var(--delay);
 
   .list-left {
     display: flex;
+    align-items: center;
 
-    span {
+    .rank-number {
+      width: 40px;
+      height: 40px;
       margin-right: 20px;
       color: #515767;
       font-size: 1.5rem;
       font-weight: 600;
-      line-height: 2rem;
       display: flex;
-      align-content: center;
-      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      
+      &.top-ten {
+        color: white;
+        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
+        border-radius: 50%;
+        box-shadow: 0 4px 8px rgba(255, 154, 158, 0.3);
+      }
     }
 
     .money {
-      font-size: 1.0rem;
-      color: #ff0000;
+      font-size: 1.2rem;
+      color: #ff5252;
+      font-weight: bold;
+      margin-left: 15px;
+    }
+  }
+  
+  .list-right {
+    display: flex;
+    align-items: center;
+    
+    .follow-btn {
+      transition: all 0.3s;
+      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 10px rgba(118, 75, 162, 0.3);
+      }
     }
   }
 }
 
 .list-div:hover {
-  background-color: #f7f8fa;
+  background-color: #f8f9ff;
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }
-.tabs :deep(.el-tabs__nav-wrap)
-{
+
+.tabs :deep(.el-tabs__nav-wrap) {
   display: flex;
   justify-content: center !important;
 }
-.tab-title
-{
-  text-align: center;
-  font-size: 30px;
-  margin-bottom: 20px;
+
+.tabs :deep(.el-tabs__item) {
+  font-size: 18px;
+  padding: 0 30px;
+  transition: all 0.3s;
+  
+  &.is-active {
+    font-weight: bold;
+    color: #6a11cb;
+    transform: scale(1.05);
+  }
+  
+  &:hover {
+    color: #6a11cb;
+  }
+}
+
+.tabs :deep(.el-tabs__active-bar) {
+  background-color: #6a11cb;
+  height: 3px;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pagination {
+  :deep(.el-pagination__sizes),
+  :deep(.btn-prev),
+  :deep(.btn-next),
+  :deep(.el-pager li) {
+    transition: all 0.3s;
+    
+    &:hover {
+      transform: translateY(-2px);
+    }
+  }
+  
+  :deep(.el-pager li.active) {
+    background-color: #6a11cb;
+    color: white;
+  }
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue b/Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue
index da224c31..3d296076 100644
--- a/Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue
+++ b/Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue
@@ -1,34 +1,52 @@
 <script setup>
 import AvatarInfo from "@/components/AvatarInfo.vue";
+import { ref, onMounted } from "vue";
+
 const props = defineProps([
     "goldUserInfo",
     "silverUserInfo",
     "bronzeUserInfo",
 ]);
+
+const isVisible = ref(false);
+
+onMounted(() => {
+  setTimeout(() => {
+    isVisible.value = true;
+  }, 300);
+});
 </script>
 <template>
-    <div class="podium">
-        <div class="avatar">
-            <AvatarInfo :userInfo="silverUserInfo" :isSelf="true" />
-            <div class="tier silver">
-                <h2>第二</h2>
-                <h3>{{ silverUserInfo?.money }}</h3>
+    <div class="podium-container">
+        <div class="podium" :class="{ 'visible': isVisible }">
+            <div class="avatar silver-position">
+                <div class="avatar-wrapper">
+                    <AvatarInfo style="display: flex;" :userInfo="{nick:'123'}" :isSelf="true" />
+                </div>
+                <div class="tier silver">
+                    <h2>第二</h2>
+                    <h3>{{ silverUserInfo?.money }}</h3>
+                </div>
             </div>
-        </div>
 
-        <div class="avatar">
-            <AvatarInfo :userInfo="goldUserInfo" :isSelf="true" :size="50" />
-            <div class="tier gold">
-                <h2>第一</h2>
-                <h3>{{ goldUserInfo?.money }}</h3>
+            <div class="avatar gold-position">
+                <div class="avatar-wrapper">
+                    <AvatarInfo :userInfo="goldUserInfo" :isSelf="true" :size="50" />
+                </div>
+                <div class="tier gold">
+                    <h2>第一</h2>
+                    <h3>{{ goldUserInfo?.money }}</h3>
+                </div>
             </div>
-        </div>
 
-        <div class="avatar">
-            <AvatarInfo :userInfo="bronzeUserInfo" :isSelf="true" />
-            <div class="tier bronze">
-                <h2>第三</h2>
-                <h3>{{ bronzeUserInfo?.money }}</h3>
+            <div class="avatar bronze-position">
+                <div class="avatar-wrapper">
+                    <AvatarInfo :userInfo="bronzeUserInfo" :isSelf="true" />
+                </div>
+                <div class="tier bronze">
+                    <h2>第三</h2>
+                    <h3>{{ bronzeUserInfo?.money }}</h3>
+                </div>
             </div>
         </div>
     </div>
@@ -36,14 +54,107 @@ const props = defineProps([
 <style scoped>
 h2{
     margin: 10px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 h3{
     margin: 10px;
+    font-size: 1.5rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+.podium-container {
+    position: relative;
+    margin: 40px 0;
 }
 .avatar {
     display: flex;
     justify-content: center;
     flex-direction: column;
+    position: relative;
+    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.visible .gold-position {
+    transform: translateY(0);
+    opacity: 1;
+    transition-delay: 0.3s;
+}
+
+.visible .silver-position {
+    transform: translateY(0);
+    opacity: 1;
+    transition-delay: 0.6s;
+}
+
+.visible .bronze-position {
+    transform: translateY(0);
+    opacity: 1;
+    transition-delay: 0.9s;
+}
+
+.medal-icon {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-weight: bold;
+    top: -10px;
+    right: 55px;
+    z-index: 2;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.gold-medal {
+    background: #ffd700;
+}
+
+.silver-medal {
+    background: #c0c0c0;
+}
+
+.bronze-medal {
+    background: #cd7f32;
+}
+
+.crown {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    z-index: 10;
+    transform: translateX(-53px);
+}
+
+.gold-crown:before,
+.gold-crown:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 0;
+}
+
+.gold-crown {
+    width: 30px;
+    height: 20px;
+    background: #ffd700;
+    border-radius: 4px 4px 0 0;
+}
+
+.gold-crown:before {
+    left: -12px;
+    border-left: 18px solid transparent;
+    border-right: 0px solid transparent;
+    border-bottom: 30px solid #ffd700;
+}
+
+.gold-crown:after {
+    right: -12px;
+    border-left: 0px solid transparent;
+    border-right: 18px solid transparent;
+    border-bottom: 30px solid #ffd700;
 }
 
 .podium {
@@ -51,6 +162,7 @@ h3{
     display: flex;
     align-items: flex-end;
     position: relative;
+    padding: 20px 0;
 }
 
 .tier {
@@ -65,33 +177,48 @@ h3{
     color: white;
     font-size: 24px;
     position: relative;
+    transform: perspective(1000px) rotateX(5deg);
+    transition: all 0.3s ease;
 }
 
 .gold:hover {
-            box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.7); /* 金色光辉效果 */
-        }
+    box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.7);
+    transform: perspective(1000px) rotateX(0deg) scale(1.05);
+}
 
 .gold {
     background: linear-gradient(to bottom, #ffd700 0%, #ffcc00 100%);
     height: 250px;
     box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
+    z-index: 3;
 }
 .silver:hover {
-  box-shadow: 0 0 20px 10px rgba(192, 192, 192, 0.7); /* 金色光辉效果 */
+    box-shadow: 0 0 20px 10px rgba(192, 192, 192, 0.7);
+    transform: perspective(1000px) rotateX(0deg) scale(1.05);
 }
 
 .silver {
     background: linear-gradient(to bottom, #c0c0c0 0%, #d3d3d3 100%);
     height: 200px;
     box-shadow: 0 6px 18px rgba(192, 192, 192, 0.5);
+    z-index: 2;
 }
 .bronze:hover {
-  box-shadow: 0 0 20px 10px rgba(205, 127, 50, 0.7); /* 金色光辉效果 */
+    box-shadow: 0 0 20px 10px rgba(205, 127, 50, 0.7);
+    transform: perspective(1000px) rotateX(0deg) scale(1.05);
 }
 .bronze {
     background: linear-gradient(to bottom, #cd7f32 0%, #a0522d 100%);
     height: 170px;
     box-shadow: 0 4px 16px rgba(205, 127, 50, 0.5);
+    z-index: 1;
+}
+.avatar-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    z-index: 10;
+    position: relative;
 }
-
 </style>
\ No newline at end of file