首页项目列表展示效果优化

src/components/ProjectList.vue

@@ -1,23 +1,110 @@
 <template>
-  <div>
-      <el-descriptions>
-          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
-          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
-          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
-          <el-descriptions-item label="备注">
-              <el-tag size="small">学校</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
-      </el-descriptions>
-  </div>
+    <div class="ProjectList">
+        <div class="projectIco">
+            <img src="../assets/images/touxiang.png" style="width: 80px;height: 80px;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>
+            </div>
+            <div class="other">
+                <div class="otherInfo">
+                    <div class="projectName">
+                        <span style="color: #59A3A4">primihub</span><span style="color: rgb(156 163 175);"> • </span>
+                    </div>
+                    <div>
+                        <div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
+                    </div>
+                    <el-tag size="mini" style="margin-left: 5px">C++</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
+                    <div style="margin-left: 10px">
+                        <span style="color: rgb(156 163 175); ">2023-6-30</span>
+                    </div>
+                </div>
+                <div class="lookCount">
+                    <i class="el-icon-view" style="color: rgb(156 163 175);"></i><span style="margin-left: 5px;color: rgb(156 163 175); ">1.3k</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
 </template>
 
 <script>
 export default {
-    name: "ProjectList"
+    name: "ProjectList",
+    props: {
+        projectLists: Object
+    },
+    // 计算属性
+    computed: {
+        // 对时间进行格式化
+        formatTime: function() {
+            if (this.article) {
+                const dt = new Date(this.article.time)
+                const month = dt.getMonth()
+                const date = dt.getDate()
+                return `${month}月${date}日`
+            }
+            return '';
+        },
+        // 截取文章内容的前 35 个字，并加上省略号
+        brief: function() {
+            return this.projectLists.content.substr(0, 35) + '...';
+        }
+    }
 }
 </script>
 
 <style scoped>
-
+.ProjectList{
+    height: 15vh;
+    width: 100%;
+    /*background-color: #59A3A4;*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 10px;
+    cursor: pointer;
+}
+.ProjectList:hover{
+    background-color: #eeeeee;
+}
+.ProjectTitle{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    color: black;
+    font-size: 18px;
+}
+.ProjectTitle:hover{
+    color: #59A3A4;
+}
+.summary{
+    color: rgb(156 163 175);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+.otherInfo{
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+.projectName{
+    /*color: #1dc48c;*/
+}
+.other{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    align-items: center;
+}
 </style>