测试效果

src/components/Home/Home.vue

@@ -22,8 +22,8 @@
         <el-main  style="display: flex;flex-direction: row;flex-wrap: nowrap;">
             <template>
                 <div>
-                    <el-tabs type="border-card" style="width: 45vw;">
+                    <el-tabs  v-model="activeName" type="border-card" style="width: 45vw;"  @tab-click="tabChange">
-                        <el-tab-pane label="最热" style="display: flex;justify-content: flex-start">
+                        <el-tab-pane label="最热" name="first" style="display: flex;justify-content: flex-start">
                                         <ul
                                             class="list"
                                             v-infinite-scroll="load"
@@ -35,7 +35,7 @@
                                         <p v-if="loading">加载中...</p>
                                         <p v-if="noMore">没有更多了</p>
                         </el-tab-pane>
-                        <el-tab-pane label="最新">
+                        <el-tab-pane label="最新" name="second">
                             <div class="lsm-container">
                                 <el-scrollbar class="scrollbar-wrapper"  style="position: relative;">
                                     <div class="infinite-list-wrapper">
@@ -203,6 +203,7 @@ export default {
     components: {ProjectList},
     data() {
         return {
+            activeName:'first',
             count: 10,
             loading: false,
             loginDialogVisible: false,
@@ -437,7 +438,27 @@ export default {
                 this.count += 2
                 this.loading = false
             }, 2000)
+        },
+        tabChange(tab, event){
+            console.log(tab, event);
+            if (tab.name == "first") {
+                axios({
+                    method: 'get',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
+                    // URL 中的查询参数
+                    params: {
+                        num: 0,
                     }
+                }).then(function (res){
+                    console.log(res);
+                });
+        } else if (tab.name == "second") {
+                //网络请求2
+            }
+        }
+
+
     }
 }
 </script>

src/components/ProjectList.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="ProjectList">
         <div class="projectIco">
-            <img src="../assets/images/touxiang.png" style="width: 80px;height: 80px;margin-left: 10px;border-radius: 10px">
+            <img src="../assets/images/touxiang.png" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
         </div>
         <div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
             <div class="ProjectTitle">
                 <span>由密码学专家团队打造的开源隐私计算平台</span>
             </div>
             <div class="summary">
-                <span>随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近两..</span>
+                <span style="font-size: 1rem">随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近两..</span>
             </div>
             <div class="other">
                 <div class="otherInfo">
@@ -71,6 +71,7 @@ export default {
     justify-content: flex-start;
     border-radius: 10px;
     cursor: pointer;
+    overflow: hidden;
 }
 .ProjectList:hover{
     background-color: #eeeeee;
@@ -90,6 +91,13 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
+    /*background-color: #59A3A4;*/
+    position: relative;
+    width: 36vw;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
 }
 .otherInfo{
     align-items: center;