From a7cf93d3e7dd374dd657b5cf77a4223c17ae0617 Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Fri, 30 Jun 2023 21:12:35 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=A1=B9=E7=9B=AE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/touxiang.png       | Bin 0 -> 3718 bytes
 src/components/{ => Home}/Header.vue |   2 +-
 src/components/{ => Home}/Home.vue   |  41 ++++++----
 src/components/ProjectList.vue       | 113 ++++++++++++++++++++++++---
 src/router/index.js                  |   2 +-
 src/views/index.vue                  |  11 ++-
 6 files changed, 136 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/images/touxiang.png
 rename src/components/{ => Home}/Header.vue (98%)
 rename src/components/{ => Home}/Home.vue (91%)

diff --git a/src/assets/images/touxiang.png b/src/assets/images/touxiang.png
new file mode 100644
index 0000000000000000000000000000000000000000..e56545bb81e69bf8b7ecd4110c7e0d73d99b83ee
GIT binary patch
literal 3718
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
F{|kL-<aYo7

literal 0
HcmV?d00001

diff --git a/src/components/Header.vue b/src/components/Home/Header.vue
similarity index 98%
rename from src/components/Header.vue
rename to src/components/Home/Header.vue
index f58bd6a..0d09a62 100644
--- a/src/components/Header.vue
+++ b/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>
 
diff --git a/src/components/Home.vue b/src/components/Home/Home.vue
similarity index 91%
rename from src/components/Home.vue
rename to src/components/Home/Home.vue
index 0b38944..67f55ab 100644
--- a/src/components/Home.vue
+++ b/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-tab-pane label="最热">
+                    <el-tabs type="border-card" style="width: 45vw;">
+                        <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);
diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue
index 02f67fd..c195971 100644
--- a/src/components/ProjectList.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 7300276..a8c5512 100644
--- a/src/router/index.js
+++ b/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";
diff --git a/src/views/index.vue b/src/views/index.vue
index 99de76a..9bf10e2 100644
--- a/src/views/index.vue
+++ b/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>
-.el-header {
+<style scoped>
+/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>