perf:优化infoCard组件样式

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>

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>

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 {