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

src/components/Home/Header.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="header">
         <div class="logo-all">
-            <img class="logo" src="../assets/logo/logo.png">
+            <img class="logo" src="../../assets/logo/logo.png">
             <span class="HeaderWord">HelloGithub</span>
         </div>
 

src/components/Home/Home.vue

@@ -2,7 +2,7 @@
     <el-container style="display: flex;flex-direction: row;">
         <el-aside width="22vw" style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
             <template>
-                <el-card class="box-card" style="width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+                <el-card class="box-card" style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                     <div slot="header" class="clearfix">
                         <span><i class="el-icon-menu"></i> 热门标签</span>
                     </div>
@@ -19,21 +19,33 @@
                 </el-card>
             </template>
         </el-aside>
-        <el-main  style="height: 88vh;display: flex;flex-direction: row;flex-wrap: nowrap;">
+        <el-main  style="display: flex;flex-direction: row;flex-wrap: nowrap;">
             <template>
                 <div>
-                    <el-tabs type="border-card" style="width: 45vw;height: 83vh;">
+                    <el-tabs type="border-card" style="width: 45vw;">
-                        <el-tab-pane label="最热">
+                        <el-tab-pane label="最热" style="display: flex;justify-content: flex-start">
+                                        <ul
+                                            class="list"
+                                            v-infinite-scroll="load"
+                                            infinite-scroll-disabled="disabled">
+                                            <ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
+                                                <ProjectList></ProjectList>
+                                            </ol>
+                                        </ul>
+                                        <p v-if="loading">加载中...</p>
+                                        <p v-if="noMore">没有更多了</p>
+                        </el-tab-pane>
+                        <el-tab-pane label="最新">
                             <div class="lsm-container">
-                                <el-scrollbar class="scrollbar-wrapper"  style="position: relative;height: 73vh;">
+                                <el-scrollbar class="scrollbar-wrapper"  style="position: relative;">
                                     <div class="infinite-list-wrapper">
                                         <ul
                                             class="list"
                                             v-infinite-scroll="load"
                                             infinite-scroll-disabled="disabled">
-                                            <li v-for="i in count" :key="i" class="list-item">
+                                            <ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
                                                 <ProjectList></ProjectList>
-                                            </li>
+                                            </ol>
                                         </ul>
                                         <p v-if="loading">加载中...</p>
                                         <p v-if="noMore">没有更多了</p>
@@ -41,9 +53,6 @@
                                 </el-scrollbar>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="最新">
-                            最新
-                        </el-tab-pane>
                     </el-tabs>
                 </div>
                 <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
@@ -315,12 +324,14 @@ export default {
                             Vue.prototype.$notify({
                                 title: '成功',
                                 message: ('i', { style: 'color: teal'}, res.data.msg),
-                                type: 'success'
+                                type: 'success',
+                                offset: 50
                             });
                         }else{
                             Vue.prototype.$notify.error({
                                 title: '错误',
-                                message: res.data.msg
+                                message: res.data.msg,
+                                offset: 50
                             });
                         }
                         console.log(res);
@@ -399,12 +410,14 @@ export default {
                             Vue.prototype.$notify({
                                 title: '成功',
                                 message: ('i', { style: 'color: teal'}, res.data.msg),
-                                type: 'success'
+                                type: 'success',
+                                offset: 50
                             });
                         }else{
                             Vue.prototype.$notify.error({
                                 title: '错误',
-                                message: res.data.msg
+                                message: res.data.msg,
+                                offset: 50
                             });
                         }
                         console.log(res);

src/components/ProjectList.vue

@@ -1,23 +1,110 @@
 <template>
-  <div>
+    <div class="ProjectList">
-      <el-descriptions>
+        <div class="projectIco">
-          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+            <img src="../assets/images/touxiang.png" style="width: 80px;height: 80px;margin-left: 10px;border-radius: 10px">
-          <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 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>

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import index from '../views/index.vue'
-import home from "@/components/Home.vue";
+import home from "@/components/Home/Home.vue";
 import monthly from "@/components/Monthly.vue";
 import ranking from "@/components/Ranking.vue";
 import paper from "@/components/Paper.vue";

src/views/index.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import HeaderComponent from "@/components/Header.vue";
+import HeaderComponent from "@/components/Home/Header.vue";
 
 export default {
     name:"HomeView",
@@ -23,8 +23,8 @@ export default {
     }
 }
 </script>
-<style>
+<style scoped>
-.el-header {
+/deep/ .el-header {
     position: fixed;
     width: 100%;
     height: 60px;
@@ -33,7 +33,10 @@ export default {
     top: 0;
     left: 0;
 }
-.el-main{
+/deep/ .el-main{
     margin-top: 2vh;
 }
+/deep/ .el-scrollbar__wrap {
+    overflow-x: hidden;
+}
 </style>