测试效果

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;