update: 完善左侧导航

wj-vue/src/components/common/NavMenu.vue

@@ -12,7 +12,7 @@
       <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
         {{ item.navItem }}
       </el-menu-item>
-      <span style="float: right;padding: 20px;"><a href="#nowhere" style="color: #222">登录/注册</a></span>
+      <span style="float: right;padding: 20px;"><a href="#nowhere" style="color: #222">更多功能</a></span>
       <i class="el-icon-menu" style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i>
       <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">White Jotter - Your Mind Palace</span>
       <el-input

wj-vue/src/components/home/AppIndex.vue

 <template>
   <div>
     <side-menu id="side-menu"></side-menu>
-    <div class="index-body">
       <div class="home">
-        <div class="header-div">
+        <div id="header-div">
           <div style="height: 150px"></div>
           <carousel></carousel>
           <quick-nav style="float: right;margin-top: -450px;margin-right: 480px"></quick-nav>
         </div>
-        <update-card></update-card>
-        <slogan></slogan>
-        <Footer></Footer>
+        <update-card id="update-card"></update-card>
+        <slogan id="slogan"></slogan>
+        <about id="about"></about>
       </div>
-    </div>
   </div>
 </template>
 
@@ -20,12 +18,12 @@
   import Carousel from '@/components/home/Carousel'
   import QuickNav from '@/components/home/QuickNav'
   import Slogan from '@/components/home/Slogan'
-  import Footer from '@/components/common/Footer'
+  import About from '@/components/common/About'
   import UpdateCard from '@/components/home/UpdateCard'
   import SideMenu from '@/components/home/SideMenu'
   export default {
     name: 'AppIndex',
-    components: {Carousel, QuickNav, Slogan, Footer, UpdateCard, SideMenu}
+    components: {Carousel, QuickNav, Slogan, About, UpdateCard, SideMenu}
   }
 </script>
 
@@ -37,14 +35,8 @@
     margin-top: -20px;
 
   }
-  .index-body {
-    /*background: url("../../assets/img/bg/index.jpg");*/
-    /*background-size: cover;*/
-    background-position: center;
-    background-color: #f5f6f7;
-  }
 
-  .header-div {
+  #header-div {
     padding-bottom: 20px;
     padding-left: 5px;
     background-color: white;
@@ -52,7 +44,7 @@
   }
 
   #side-menu {
-    position: absolute;
+    position: fixed;
     margin-left: 50%;
     left: -700px;
     top: 100px;

wj-vue/src/components/home/SideMenu.vue

@@ -2,40 +2,44 @@
   <el-aside>
       <el-menu
         default-active="1"
-        @open="handleOpen"
-        @close="handleClose" style="width: 170px">
-        <el-menu-item index="1">
-          <i class="el-icon-menu"></i>
-          <span slot="title">技术采用</span>
-        </el-menu-item>
-        <el-menu-item index="2">
-          <i class="el-icon-menu"></i>
-          <span slot="title">最近更新</span>
-        </el-menu-item>
-        <el-menu-item index="3">
-          <i class="el-icon-document"></i>
-          <span slot="title">下载源码</span>
-        </el-menu-item>
-        <el-menu-item index="4">
-          <i class="el-icon-setting"></i>
-          <span slot="title">关于我们</span>
-        </el-menu-item>
+        style="width: 170px">
+        <a href="#header-div">
+          <el-menu-item index="1">
+            <i class="el-icon-menu"></i>
+            <span slot="title">技术采用</span>
+          </el-menu-item>
+        </a>
+        <a href="#update-card">
+          <el-menu-item index="2">
+            <i class="el-icon-menu"></i>
+            <span slot="title">最近更新</span>
+          </el-menu-item>
+        </a>
+        <a href="#slogan">
+          <el-menu-item index="3">
+            <i class="el-icon-document"></i>
+            <span slot="title">下载源码</span>
+          </el-menu-item>
+        </a>
+        <a href="#about">
+          <el-menu-item index="4">
+            <i class="el-icon-setting"></i>
+            <span slot="title">关于我们</span>
+          </el-menu-item>
+        </a>
       </el-menu>
   </el-aside>
 </template>
 
 <script>
   export default {
-    methods: {
-      handleOpen (key, keyPath) {
-        console.log(key, keyPath)
-      },
-      handleClose (key, keyPath) {
-        console.log(key, keyPath)
-      }
-    }
+
   }
 </script>
 
 <style>
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 </style>

wj-vue/src/components/home/UpdateCard.vue

@@ -2,7 +2,7 @@
   <el-card class="box-card">
     <div slot="header" class="clearfix">
       <span style="font-weight: bold;font-size: 20px">最近更新</span>
-      <el-button style="float: right; padding: 3px 0" type="text">修改</el-button>
+      <!--<el-button style="float: right; padding: 3px 0" type="text">修改</el-button>-->
     </div>
     <div class="block">
       <el-timeline>