update: 更新首页布局

wj-vue/src/components/Home.vue

 <template>
   <div>
-    <nav-menu></nav-menu>
+    <nav-menu class="nav-menu"></nav-menu>
     <router-view/>
   </div>
 </template>
@@ -13,5 +13,8 @@
 </script>
 
 <style>
-
+  .nav-menu {
+    margin-bottom: 40px;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
+  }
 </style>

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

@@ -5,15 +5,23 @@
       router="true"
       mode="horizontal"
       @select="handleSelect"
-      background-color="#222"
-      text-color="#fff"
-      active-text-color="#ffd04b"
+      background-color="white"
+      text-color="#222"
+      active-text-color="red"
       style="min-width: 1300px">
-      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name" @mouseenter.native="onMouseEnter()">
+      <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: #fff">登录/注册</a></span>
-      <i class="el-icon-menu" style="float:right;font-size: 45px;color: aliceblue;padding-top: 8px"></i>
+      <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
+        placeholder="快速搜索..."
+        prefix-icon="el-icon-search"
+        size="medium"
+        style="width: 300px;position:absolute;margin-top: 12px;right: 18%"
+        v-model="keywords">
+      </el-input>
     </el-menu>
   </div>
 </template>
@@ -39,10 +47,6 @@
     methods: {
       handleSelect (key, keyPath) {
         console.log(key, keyPath)
-      },
-      onMouseEnter () {
-        // window.alert('aaa')
-        // this.$el.style.backgroundColor = 'red'
       }
     }
   }

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

 <template>
-  <div class="index-body">
-    <div class="home">
-      <div class="header-div">
-      <div style="height: 150px"></div>
-      <carousel></carousel>
-      <quick-nav style="float: right;margin-top: -450px;margin-right: 480px"></quick-nav>
+  <div>
+    <side-menu id="side-menu"></side-menu>
+    <div class="index-body">
+      <div class="home">
+        <div class="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>
       </div>
-      <Card></Card>
-      <slogan></slogan>
-      <Footer></Footer>
     </div>
   </div>
 </template>
@@ -16,13 +19,13 @@
 <script>
   import Carousel from '@/components/home/Carousel'
   import QuickNav from '@/components/home/QuickNav'
-  import Tips from '@/components/home/Tips'
   import Slogan from '@/components/home/Slogan'
   import Footer from '@/components/common/Footer'
-  import Card from '@/components/home/Card'
+  import UpdateCard from '@/components/home/UpdateCard'
+  import SideMenu from '@/components/home/SideMenu'
   export default {
     name: 'AppIndex',
-    components: {Carousel, QuickNav, Tips, Slogan, Footer, Card}
+    components: {Carousel, QuickNav, Slogan, Footer, UpdateCard, SideMenu}
   }
 </script>
 
@@ -35,15 +38,23 @@
 
   }
   .index-body {
-    background: url("../../assets/img/bg/4.jpg");
+    /*background: url("../../assets/img/bg/index.jpg");*/
     /*background-size: cover;*/
     background-position: center;
+    background-color: #f5f6f7;
   }
 
   .header-div {
     padding-bottom: 20px;
     padding-left: 5px;
-    background-color: #ffe55c;
-    background: url("../../assets/img/bg/bg4.jpg");
+    background-color: white;
+    /*background: url("../../assets/img/bg/bg3.jpg");*/
+  }
+
+  #side-menu {
+    position: absolute;
+    margin-left: 50%;
+    left: -700px;
+    top: 100px;
   }
 </style>

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

@@ -16,7 +16,7 @@
     color: black;
     font-size: 15px;
     /*line-height: 300px;*/
-    bottom: 40px;
+    bottom: 43px;
     float: left;
     position: relative;
   }

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

 <template>
     <div class="quick-nav">
       <img src="../../assets/img/icon/icon2.png" alt="" class="monster">
-      <!--<img src="../../assets/img/icon/icon5.png" alt="" class="readme">-->
-      <img src="../../assets/img/icon/icon7.png" alt="">
+      <img src="../../assets/img/icon/icon5.png" alt="" class="readme">
+      <img src="../../assets/img/icon/icon7.png" alt="" class="spark">
+      <img src="../../assets/img/icon/logo.png" alt="" class="logo">
     </div>
 </template>
 
@@ -23,16 +24,32 @@
     width: 280px;
     height: 260px;
     /*position: absolute;*/
-    top: 150px;
-    left: 700px;
+    /*top: 150px;*/
+    /*left: 700px;*/
   }
 
   .readme {
-    width: 180px;
-    height: 170px;
-    /*position: absolute;*/
-    top: 200px;
-    left: 400px;
+    width: 300px;
+    height: 285px;
+    position: absolute;
+    margin-left: 50%;
+    top: 300px;
+    left: 230px;
+  }
+
+  .spark {
+    position: absolute;
+    margin-left: 50%;
+    top: 100px;
+    left: 20px;
+  }
+
+  .logo {
+    width: 280px;
+    position: absolute;
+    margin-left: 50%;
+    top: 50px;
+    left: 210px;
   }
 
 </style>

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

+<template>
+  <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>
+      </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>
+</style>

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

-<template>
-    <div>
-      <el-row>
-        <el-col span="8">
-          <Card></Card>
-        </el-col>
-        <el-col span="8">
-          <Card></Card>
-        </el-col>
-        <el-col span="8">
-          <Card></Card>
-        </el-col>
-      </el-row>
-    </div>
-</template>
-
-<script>
-  import Card from '@/components/home/Card'
-  export default {
-    name: 'Tips',
-    components: {Card}
-  }
-</script>
-
-<style scoped>
-
-</style>

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

 <template>
   <el-card class="box-card">
     <div slot="header" class="clearfix">
-      <span>最近更新</span>
-      <el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
+      <span style="font-weight: bold;font-size: 20px">最近更新</span>
+      <el-button style="float: right; padding: 3px 0" type="text">修改</el-button>
     </div>
     <div class="block">
       <el-timeline>
-        <el-timeline-item timestamp="2018/4/12" placement="top">
+        <el-timeline-item timestamp="2019/3/30" placement="top">
           <el-card>
-            <h4>更新 Github 模板</h4>
-            <p>王小虎 提交于 2018/4/12 20:46</p>
+            <h4>更新首页布局</h4>
+            <p>Evan 提交于 2019/3/30 21:23</p>
           </el-card>
         </el-timeline-item>
         <el-timeline-item timestamp="2018/4/3" placement="top">
@@ -51,7 +51,7 @@
   .box-card {
     margin-top: 5px;
     width: 988px;
-    height: 970px;
+    height: 1050px;
     text-align: left;
   }
 </style>