From f4eb31570ec989e301b71e46735a349409464e35 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Mon, 25 Dec 2023 23:06:19 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E4=BC=98=E5=8C=96infoCard=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/components/InfoCard.vue       | 22 ++++++++-------
 Yi.Bbs.Vue3/src/views/home/Index.vue          | 14 ++++++++--
 .../home/components/PointsRanking/index.vue   | 27 ++++++++++++++-----
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/Yi.Bbs.Vue3/src/components/InfoCard.vue b/Yi.Bbs.Vue3/src/components/InfoCard.vue
index 88770c50..e3c178e7 100644
--- a/Yi.Bbs.Vue3/src/components/InfoCard.vue
+++ b/Yi.Bbs.Vue3/src/components/InfoCard.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { ref } from "vue";
 
-const props = defineProps(["items", "header", "text", "hideDivider"]);
+const props = defineProps(["items", "header", "text", "hideDivider", "height"]);
+const height = ref(props.height + "px");
 </script>
 
 <template>
@@ -14,15 +15,16 @@ const props = defineProps(["items", "header", "text", "hideDivider"]);
     </template>
 
     <slot name="content" />
-
-    <div v-for="(item, i) in props.items">
-      <div class="text item">
-        <slot name="item" v-bind="item" />
+    <el-scrollbar :height="height">
+      <div v-for="(item, i) in props.items">
+        <div class="text item">
+          <slot name="item" v-bind="item" />
+        </div>
+        <el-divider
+          v-if="i != props.items.length - 1 && hideDivider == undefined"
+        />
       </div>
-      <el-divider
-        v-if="i != props.items.length - 1 && hideDivider == undefined"
-      />
-    </div>
+    </el-scrollbar>
   </el-card>
 </template>
 
@@ -47,5 +49,7 @@ const props = defineProps(["items", "header", "text", "hideDivider"]);
 
 .box-card {
   width: 100%;
+  height: v-bind(height);
+  padding-bottom: 10px;
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 6d515fcf..fcfd94ae 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -73,7 +73,12 @@
           </el-col>
 
           <el-col :span="24">
-            <InfoCard :items="pointList" header="本月排行" text="更多">
+            <InfoCard
+              :items="pointList"
+              header="本月排行"
+              text="更多"
+              height="400"
+            >
               <template #item="temp">
                 <PointsRanking :pointsData="temp" />
               </template>
@@ -81,7 +86,12 @@
           </el-col>
 
           <el-col :span="24">
-            <InfoCard :items="friendList" header="推荐好友" text="更多">
+            <InfoCard
+              :items="friendList"
+              header="推荐好友"
+              text="更多"
+              height="400"
+            >
               <template #item="temp">
                 <RecommendFriend :friendData="temp" />
               </template>
diff --git a/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue b/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
index 0787a030..bf040822 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
@@ -11,7 +11,16 @@
         <el-tag effect="light" type="success">{{ pointsData.level }}</el-tag>
       </div>
       <div class="bottom">
-        {{ pointsData.userName }}
+        <div class="name">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="pointsData.userName"
+            placement="top"
+          >
+            {{ pointsData.userName }}
+          </el-tooltip>
+        </div>
       </div>
     </div>
     <div class="right">
@@ -95,12 +104,16 @@ const userImageSrc = computed(() => {
       }
     }
     .bottom {
-      width: 200px;
-      color: #252933;
-      margin-left: 5px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      width: 180px;
+      .name {
+        cursor: pointer;
+        width: 100%;
+        color: #252933;
+        margin-left: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
   .right {