首页项目列表展示框架

src/components/Header.vue

@@ -9,11 +9,11 @@
                  active-text-color="#42b983"
                  style="width: 30vw;"
                  router>
-            <el-menu-item class="menu-item" index="/home">首 页</el-menu-item>
+            <el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
-            <el-menu-item class="menu-item" index="/monthly">月 刊</el-menu-item>
+            <el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
             <el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
             </el-menu-item>
-            <el-menu-item class="menu-item" index="/paper">文 章</el-menu-item>
+            <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
         </el-menu>
         <SearchInput></SearchInput>
         <el-button type="success" round icon="el-icon-thumb">提交项目</el-button>

src/components/Home.vue

@@ -1,8 +1,8 @@
 <template>
-    <el-container>
+    <el-container style="display: flex;flex-direction: row;">
-        <el-aside width="23%" style="display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;">
+        <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="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+                <el-card class="box-card" style="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,12 +19,27 @@
                 </el-card>
             </template>
         </el-aside>
-        <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap">
+        <el-main  style="height: 88vh;display: flex;flex-direction: row;flex-wrap: nowrap;">
             <template>
                 <div>
-                    <el-tabs type="border-card" style="width: 45vw">
+                    <el-tabs type="border-card" style="width: 45vw;height: 83vh;">
                         <el-tab-pane label="最热">
-                            最热
+                            <div class="lsm-container">
+                                <el-scrollbar class="scrollbar-wrapper"  style="position: relative;height: 73vh;">
+                                    <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">
+                                                <ProjectList></ProjectList>
+                                            </li>
+                                        </ul>
+                                        <p v-if="loading">加载中...</p>
+                                        <p v-if="noMore">没有更多了</p>
+                                    </div>
+                                </el-scrollbar>
+                            </div>
                         </el-tab-pane>
                         <el-tab-pane label="最新">
                             最新
@@ -173,10 +188,14 @@
 <script>
 import axios from 'axios'
 import Vue from "vue";
+import ProjectList from "@/components/ProjectList.vue";
 export default {
     name: "HomeComponent",
+    components: {ProjectList},
     data() {
         return {
+            count: 10,
+            loading: false,
             loginDialogVisible: false,
             registerDialogVisible: false,
             imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
@@ -208,6 +227,14 @@ export default {
     mounted() {
         this.account(); //获取cookie的方法
     },
+    computed: {
+        noMore () {
+            return this.count >= 20
+        },
+        disabled () {
+            return this.loading || this.noMore
+        }
+    },
     methods: {
         openLogin(){
             this.loginDialogVisible=true;
@@ -383,18 +410,27 @@ export default {
                         console.log(res);
                     });
                 } else {
-                    this.closeLogin();
+                    this.closeRegister();
                     return false;
                 }
-                this.closeLogin();
+                this.closeRegister();
 
             });
         },
         //----------注册结束----------
+        load () {
+            this.loading = true
+            setTimeout(() => {
+                this.count += 2
+                this.loading = false
+            }, 2000)
+        }
     }
 }
 </script>
 
-<style scoped>
+<style>
-
+.el-scrollbar__wrap {
+    overflow-x: hidden;
+}
 </style>

src/components/ProjectList.vue

@@ -0,0 +1,23 @@
+<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>
+</template>
+
+<script>
+export default {
+    name: "ProjectList"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index.vue

@@ -24,5 +24,16 @@ export default {
 }
 </script>
 <style>
-
+.el-header {
+    position: fixed;
+    width: 100%;
+    height: 60px;
+    z-index: 9999 !important;
+    background-color: #ffffff;
+    top: 0;
+    left: 0;
+}
+.el-main{
+    margin-top: 2vh;
+}
 </style>