diff --git a/wj-vue/index.html b/wj-vue/index.html
index 2eaebc2e8b5b6ae1068c7ba405799b660a56f2e6..0a1c5f99f04c22592e1e8bd00a8381135b342c38 100644
--- a/wj-vue/index.html
+++ b/wj-vue/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>白卷 - White Jotter</title>
   </head>
-  <body>
-  <!--此处的 div 在 main.js 中通过 id 与 vue 对象绑定，该 vue 对象中包含一个 App 组件-->
+  <body bgcolor="#FAF9DE">
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
diff --git a/wj-vue/src/components/home/AppIndex.vue b/wj-vue/src/components/home/AppIndex.vue
index 1ab3cc1da71ec20da2919224f8ce2fdcddccffb0..4ee5db2498cced0abe5810429d9714cd09e10b85 100644
--- a/wj-vue/src/components/home/AppIndex.vue
+++ b/wj-vue/src/components/home/AppIndex.vue
@@ -1,8 +1,9 @@
 <template>
     <div>
       <carousel></carousel>
-      <tips></tips>
+      <!--<tips></tips>-->
       <quick-nav></quick-nav>
+      <slogan></slogan>
     </div>
 </template>
 
@@ -10,9 +11,10 @@
   import Carousel from '@/components/home/Carousel'
   import QuickNav from '@/components/home/QuickNav'
   import Tips from '@/components/home/Tips'
+  import Slogan from '@/components/home/Slogan'
   export default {
     name: 'AppIndex',
-    components: {Carousel, QuickNav, Tips}
+    components: {Carousel, QuickNav, Tips, Slogan}
   }
 </script>
 
diff --git a/wj-vue/src/components/home/QuickNav.vue b/wj-vue/src/components/home/QuickNav.vue
index 3a5840ce3e6af0f65f502abe98b68f73065de139..c378980851b657d597f0e84a39e95657075b8c52 100644
--- a/wj-vue/src/components/home/QuickNav.vue
+++ b/wj-vue/src/components/home/QuickNav.vue
@@ -1,18 +1,8 @@
 <template>
     <div id="pro-div">
-      <el-row id="introduce">
-        <el-col :span="24">
-          <i class="el-icon-time" style="font-size: 300px;color: azure;margin-top: 50px"></i>
-          <span style="font-size: 30px;color: azure;">How much time do you left?</span><br>
-          <span style="color: azure;margin-left: 280px">Little ugly mmk</span>
-        </el-col>
-      </el-row>
-      <el-row id="quick-nav">
-        <el-col :span="6" class="nav-item"></el-col>
-        <el-col :span="6" class="nav-item"></el-col>
-        <el-col :span="6" class="nav-item"></el-col>
-        <el-col :span="6" class="nav-item"></el-col>
-      </el-row>
+      <img src="../../assets/img/icon/icon2.png" alt="" style="margin-left: -500px;margin-top: -80px">
+      <img src="../../assets/img/icon/icon5.png" alt="" style="width: 300px;position: absolute;margin-left: 200px">
+      <!--<img src="../../assets/img/icon/icon4.png" alt="" style="float: left;position: absolute">-->
     </div>
 </template>
 
@@ -25,32 +15,8 @@
 <style scoped>
 
 #pro-div{
-  height: 800px;
-  background-image: url("../../assets/img/bg/topo.png"), linear-gradient(70deg, #313375, #696cd2);
-}
-
-#introduce{
-  position: absolute;
-  height: 400px;
-  width: 60%;
-  margin-left: 20%;
-  margin-top: 100px;
-  background-color:black;
-}
-
-#quick-nav{
-  position: absolute;
   height: 200px;
-  width: 60%;
-  margin-left: 20%;
-  margin-top: 501px;
-  /*background-color: black;*/
+  /*background-image: url("../../assets/img/bg/topo.png"), linear-gradient(70deg, #313375, #696cd2);*/
 }
 
-.nav-item{
-  height: 150px;
-  background-color: black;
-  border-color: transparent;
-  border: 2px solid;
-  }
 </style>
diff --git a/wj-vue/src/components/home/Slogan.vue b/wj-vue/src/components/home/Slogan.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5ba09545870666937cfa6e5b883f576c8dfafda
--- /dev/null
+++ b/wj-vue/src/components/home/Slogan.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="font-size: 45px;color: azure;white-space: nowrap;margin-top: 20px">Talk is nothing</div>
+      <div style="font-size: 45px;color: azure;white-space: nowrap;margin-top: 20px">Show you my code</div><br>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Slogan'
+  }
+</script>
+
+<style scoped>
+  .box-card {
+    width: 100%;
+    height: 310px;
+    background-color: black;
+    text-align: right;
+  }
+
+  .slogan {
+    width: 100%;
+  }
+</style>
