update: 优化首页，添加更新时间轴

wj-vue/package-lock.json

@@ -3967,9 +3967,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.5.4.tgz",
-      "integrity": "sha512-VlyPZ1A2VtVJdnu9nUV+u/eGhKaEF+IoENbDgNlUza0Slj6Jb0bC9mzK95JK2g7QSe8YXUWhQVy+d2kZUE2oKQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.7.0.tgz",
+      "integrity": "sha512-FalWzOmT/K4w4C/8tw2kGvzzQnRJ5MqEvSL5rEKNa081PFGIcUS9exyVpYrNPKF8ua/W6qaqrXPC6DQ8sNcmOQ==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -14221,9 +14221,9 @@
       }
     },
     "vue": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.7.tgz",
-      "integrity": "sha512-g7ADfQ82QU+j6F/bVDioVQf2ccIMYLuR4E8ev+RsDBlmwRkhGO3HhgF4PF9vpwjdPpxyb1zzLur2nQ2oIMAMEg=="
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
+      "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
     "vue-eslint-parser": {
       "version": "2.0.3",
@@ -14366,9 +14366,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.7.tgz",
-      "integrity": "sha512-ZjxJLr6Lw2gj6aQGKwBWTxVNNd28/qggIdwvr5ushrUHUvqgbHD0xusOVP2yRxT4pX3wRIJ2LfxjgFT41dEtoQ==",
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
+      "integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",

wj-vue/package.json

@@ -15,9 +15,9 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "element-ui": "^2.5.4",
+    "element-ui": "^2.7.0",
     "mavon-editor": "^2.6.17",
-    "vue": "^2.5.2",
+    "vue": "^2.6.10",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.0"
   },
@@ -73,7 +73,7 @@
     "vue-jest": "^1.0.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
+    "vue-template-compiler": "^2.6.10",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",

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>
       <Card></Card>
-      <!--<quick-nav></quick-nav>-->
       <slogan></slogan>
       <Footer></Footer>
     </div>
@@ -25,7 +28,7 @@
 
 <style scoped>
   .home {
-    width: 960px;
+    width: 990px;
     margin-left: auto;
     margin-right: auto;
     margin-top: -20px;
@@ -36,4 +39,11 @@
     /*background-size: cover;*/
     background-position: center;
   }
+
+  .header-div {
+    padding-bottom: 20px;
+    padding-left: 5px;
+    background-color: #ffe55c;
+    background: url("../../assets/img/bg/bg4.jpg");
+  }
 </style>

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

 <template>
-  <div style="width: 80%; margin-left: auto; margin-right: auto; height: 350px">
-    <div style="position: relative">
-      <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>最新内容</span>
-        <el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
-      </div>
-      <div v-for="o in 4" :key="o" class="text item">
-        {{'新增内容 ' + o }}
-      </div>
-    </el-card>
-      <el-card class="box-card-2">
-        <div slot="header" class="clearfix">
-          <span>最新内容</span>
-          <el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
-        </div>
-        <div v-for="o in 4" :key="o" class="text item">
-          {{'新增内容 ' + o }}
-        </div>
-      </el-card>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>最近更新</span>
+      <el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
     </div>
-  </div>
+    <div class="block">
+      <el-timeline>
+        <el-timeline-item timestamp="2018/4/12" placement="top">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2018/4/3" placement="top">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/3 20:46</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2018/4/2" placement="top">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/2 20:46</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2018/4/3" placement="top">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/3 20:46</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2018/4/3" placement="top">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/3 20:46</p>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </el-card>
 </template>
 
 <script>
@@ -30,40 +48,10 @@
 </script>
 
 <style scoped>
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
   .box-card {
-    margin-top: 50px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50px;
-    float: left;
-    width: 47%;
-    position: absolute;
-  }
-  .box-card-2 {
-    margin-top: 50px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50px;
-    right: 0;
-    float: right;
-    width: 47%;
-    position: absolute;
-  }
-
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
+    margin-top: 5px;
+    width: 988px;
+    height: 970px;
+    text-align: left;
   }
 </style>

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

 <template>
+  <el-card class="card-carousel">
   <el-carousel  class="push" :interval="4000" arrow="always">
     <el-carousel-item v-for="item in items" :key="item">
       <a :href=item.link target="_blank">
@@ -7,35 +8,40 @@
       <h3>{{item.title}}</h3>
     </el-carousel-item>
   </el-carousel>
+  </el-card>
 </template>
 
 <style>
   .el-carousel__item h3 {
-    color: #375669;
-    font-size: 14px;
+    color: black;
+    font-size: 15px;
     /*line-height: 300px;*/
-    margin: 0px;
+    bottom: 40px;
+    float: left;
+    position: relative;
+  }
+
+  .card-carousel {
+    /*margin: 0 auto;*/
+    margin-left: 20px;
+    width: 680px;
+    height: 320px;
   }
 
   .push {
-    padding:20px 0;
-    width: 900px;
-    height: 373px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 20px;
+    /*margin-left: -15px;*/
   }
 
   .el-carousel__item:nth-child(2n) {
-    background: linear-gradient(black, gainsboro);
+    background: black;
   }
 
   .el-carousel__item:nth-child(2n+1) {
-    background: linear-gradient(black,gainsboro);
+    background: black;
   }
 
   .carousel_img {
-    height: 92%;
+    height: 100%;
     width: 100%;
     text-align: center;
   }

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

 <template>
-    <div id="pro-div">
-      <img src="../../assets/img/icon/icon2.png" alt="" width="300" height="280">
-      <img src="../../assets/img/icon/icon5.png" alt="" style="width: 300px; margin-left: 500px">
-      <img src="../../assets/img/icon/icon7.png" alt="" style="">
+    <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="">
     </div>
 </template>
 
@@ -13,10 +13,26 @@
 </script>
 
 <style scoped>
+  .quick-nav {
+    width: 303px;
+    height: 318px;
+    background-color: transparent;
+  }
+
+  .monster {
+    width: 280px;
+    height: 260px;
+    /*position: absolute;*/
+    top: 150px;
+    left: 700px;
+  }
 
-#pro-div{
-  height: 320px;
-  /*background-image: url("../../assets/img/bg/topo.png"), linear-gradient(70deg, #313375, #696cd2);*/
-}
+  .readme {
+    width: 180px;
+    height: 170px;
+    /*position: absolute;*/
+    top: 200px;
+    left: 400px;
+  }
 
 </style>

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

@@ -24,7 +24,7 @@
     height: 150px;
     background-color: #222;
     text-align: center;
-    margin-top: 30px;
+    margin-top: 5px;
   }
 
   .slogan {

wj-vue/src/main.js

@@ -19,6 +19,7 @@ Vue.use(mavonEditor)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  render: h => h(App),
   router,
   components: { App },
   template: '<App/>'