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,7 +15,7 @@ const props = defineProps(["items", "header", "text", "hideDivider"]);
     </template>
 
     <slot name="content" />
-
+    <el-scrollbar :height="height">
       <div v-for="(item, i) in props.items">
         <div class="text item">
           <slot name="item" v-bind="item" />
@@ -23,6 +24,7 @@ const props = defineProps(["items", "header", "text", "hideDivider"]);
           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">
+        <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,7 +104,10 @@ const userImageSrc = computed(() => {
       }
     }
     .bottom {
-      width: 200px;
+      width: 180px;
+      .name {
+        cursor: pointer;
+        width: 100%;
         color: #252933;
         margin-left: 5px;
         white-space: nowrap;
@@ -103,6 +115,7 @@ const userImageSrc = computed(() => {
         text-overflow: ellipsis;
       }
     }
+  }
   .right {
     flex: 2;
     display: flex;