diff --git a/src/App.vue b/src/App.vue
index ebadb88..7fd150e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,9 @@
 <template>
   <div id="app">
     <myheader></myheader>
-
     <div id="content">
-      <classification :empty="data.empty" :baseHeight="true"></classification>
-    
+      <router-view name="index"></router-view>
     </div>
-
     <myfooter :class="data.className"></myfooter>
     <backtop></backtop>
   </div>
@@ -17,8 +14,8 @@
 import myHeader from './components/public/myHeader.vue'
 import myFooter from './components/public/myFooter.vue'
 import Backtop from './components/public/Backtop.vue'
-import Classification from './components/public/Loading.vue'
-
+import Classification from './components/index/Index.vue'
+import Loading from './components/public/Loading.vue'
 
 let data = {
       className : "qqq",
@@ -31,7 +28,8 @@ export default {
     myheader : myHeader,
     myfooter : myFooter,
     backtop : Backtop,
-    classification : Classification
+    classification : Classification,
+    loading: Loading
   },
   data () {
       return {
@@ -45,9 +43,9 @@ setTimeout(() => data.empty = true, 5000)
 </script>
 
 <style>
-  #content{
-      width: 200px;
-      height: 100px;
+  #app{
+    min-width: 970px;
+    /*background-color: #E9E9E9;*/
   }
 
 </style>
diff --git a/src/components/index/Classification.vue b/src/components/index/Classification.vue
index e811fd5..a760e89 100644
--- a/src/components/index/Classification.vue
+++ b/src/components/index/Classification.vue
@@ -6,57 +6,28 @@
 
 <template>
   <div class="classification">
-    <p>话题分类</p>
-    <span>换一批</span>
-    <!-- <router-link tag="span" to="#">换一批</router-link> -->
+    <router-link tag="p" to="/classification">话题分类</router-link>
+    <router-link tag="span" to="/classification">换一批</router-link>
     <ul>
       <li v-for="classify in data.classifies">
-        <!-- <div><router-link src="../../static/images/classify.png"></router-link></div> -->
-        <!-- <router-link tag="span" to="#">{{classify.name}}</router-link> -->
-        <!-- <router-link tag="p" to="#">{{classify.intro}}</router-link> -->
-        <div><img src="../../static/images/classify.png"></div>
+        <div><img :src="classify.imgurl"></div>
         <span>{{classify.name}}</span>
         <p>{{classify.intro}}</p>
       </li>
+     
     </ul>
   </div>
 </template>
 
-<script>
+<script>  
+import getCGI from '../../getCGI/Classification'
+
   let data = {
-    classifies : [
-      {
-        name : '运动',
-        intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
-        imgurl : '',
-        addurl : ''
-      },
-      {
-        name : '娱乐',
-        intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
-        imgurl : '',
-        addurl : '/entertainment'
-      },
-      {
-        name : '健身',
-        intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
-        imgurl : '',
-        addurl : '/exercise'
-      },
-      {
-        name : '养生',
-        intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
-        imgurl : '',
-        addurl : '/health'
-      },
-      {
-        name : '阅读',
-        intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
-        imgurl : '',
-        addurl : '/read'
-      }
-    ]
+    classifies : [],
+    empty: false
   }
+  getCGI(data)
+
   export default {
     name: 'classification',
     data() {
@@ -73,16 +44,21 @@
     @hovercolor: #00BDCC;
     @font-size: 14px;
     width: 20%;
-    background-color: #F4F4F4;
-    min-width: 270px;
+    min-width: 210px;
+    height: 400px;
+    overflow: hidden;
+    background-color: #fff;
+    margin-bottom: 10px;
     >p {
+      cursor: pointer;
       color: @color - 20;
       font-size: @font-size + 5;
       font-weight:  bolder;
       padding-left: 2%;
-      margin-right: 3%;
+      margin-right: 40%;
       line-height: 40px;
       float: left;
+      margin-bottom: 0;
       &:hover{
         border-left:  3px solid #00BBCB;
       }
@@ -95,13 +71,15 @@
     }
     ul {
       clear: both;
+      margin-top: -10px;
       display: block;
       list-style-type: none;
       padding: 0;
+      height: 100%;
+      overflow: hidden;
       li {
         clear: both;
-        padding: 2%;
-        margin-bottom: 10px;
+        padding: 10px 2%;
         div {
           width: 15%;
           height: 43px;
@@ -109,7 +87,7 @@
           float: left;
           margin-right: 3%;
           img {
-            height: 43px;
+            height: 35px;
           }
         }
         span {
diff --git a/src/components/index/Hotblogger.vue b/src/components/index/Hotblogger.vue
index b636fb6..8da89e9 100644
--- a/src/components/index/Hotblogger.vue
+++ b/src/components/index/Hotblogger.vue
@@ -22,195 +22,12 @@
   </div>
 </template>
 <script>
+import getCGI from '../../getCGI/Hotblogger'
   let data = {
-    bloggerClasses : [
-      {
-        name : '发帖巨人',
-        active : true,
-        bloggers : [
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          }
-        ]
-      },
-      {
-        name : '神评侠',
-        active : false,
-        bloggers : [
-          {
-            name : '喜羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '喜羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '喜羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '喜羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '喜羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          }
-        ]
-      },
-      {
-        name : '人气队长',
-        active : false,
-        bloggers : [
-          {
-            name : '懒羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '懒羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '懒羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '懒羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '懒羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          }
-        ]
-      }
-    ],
-    thisbloggerClass : 
-      {
-        name : '发帖巨人',
-        active : true,
-        bloggers : [
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          },
-          {
-            name : '美羊羊',
-            classify : '运动',
-            imgurl : '',
-            bloggerurl : '#',
-            articlenum : 3,
-            fansnum : 30
-          }
-        ]
-      }
+    bloggerClasses : [],
+    thisbloggerClass : {}
   }
+  getCGI(data)
   export default {
     name: 'hotblogger',
     data() {
@@ -238,10 +55,12 @@
     @color: #00BDCC;
     @fontColor: #9C9E9D;
     @font-size: 14px;
-    width: 25%;
-    height: 355px;
+    width: 20%;
+    height: 340px;
     overflow: hidden;
     border-top: 1px solid #E7E7E7;
+    min-width: 210px;
+    background-color: #fff;
     .bloggerClasses {
       padding: 0;
       .bloggerClasses_li {
@@ -272,7 +91,6 @@
         clear: both;
         padding: 2%;
         div {
-          /*width: 20%;*/
           height: 40px;
           line-height: 40px;
           text-align: center;
diff --git a/src/components/index/Hotpost.vue b/src/components/index/Hotpost.vue
index 48eddc4..146e604 100644
--- a/src/components/index/Hotpost.vue
+++ b/src/components/index/Hotpost.vue
@@ -6,16 +6,17 @@
 
 <template>
   <div class="contain">
+    <router-link to="/hotpost" tag="h1">话题列表</router-link>
     <div class="warp" v-for="list in data.list">
       <div class="warp-left" title="回复">{{list.response}}</div>
       <div class="warp-right">
         <div class="title">
-          <h2>{{list.article_name}}</h2>
-          <p class="p"><span></span>{{list.author}}</p>
+          <router-link to="{path: 'article', query: {article_id: list.article_id}}" tag="h2">{{list.article_name}}</router-link>
+          <router-link to="{path: 'user', query: {author_id: data.author_id}}" tag="p" class="p"><span></span>{{list.author}}</router-link>
         </div>
         <div class="main">
           <p>{{list.content}}</p>
-          <p class="p"><span></span>{{list.latest_reply}}</p>
+          <router-link to="{path: 'replycomment', query: {latest_reply_id: data.latest_reply_id}}" tag="p" class="p"><span></span>{{list.latest_reply}}</router-link>
           <div class="images" v-if="list.img.attr">
             <img :src="list.img.url">
           </div>
@@ -26,48 +27,11 @@
 </template>
 
 <script>
-
+  import getCGI from '../../getCGI/Hotpost'
   let data = {
-    list: [
-      {
-        response: 111,
-        article_name: '我的第一条正式帖',
-        article_id: 'oxks',
-        author: 'Esan讯粉',
-        content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
-        latest_reply: '但依然有人也有',
-        img: {
-          attr: true,
-          url: '../../static/images/backtop.png'
-        }
-      },
-      {
-        response: 111,
-        article_name: '我的第一条正式帖',
-        article_id: 'oxks',
-        author: 'Esan讯粉',
-        content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
-        latest_reply: '但依然有人也有',
-        img: {
-          attr: false,
-          url: ''
-        }
-      },
-      {
-        response: 111,
-        article_name: '我的第一条正式帖',
-        article_id: 'oxks',
-        author: 'Esan讯粉',
-        content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
-        latest_reply: '但依然有人也有',
-        img: {
-          attr: false,
-          url: ''
-        }
-      }
-    ]
+    list: []
   }
-
+  getCGI(data)
   export default {
     name: 'hotpost',
     data() {
@@ -81,7 +45,7 @@
 <style lang="less">
   .contain {
 
-    //min-width: 680px;
+    background-color: #fff;
     width: 50%;
     .clearfix {
       *zoom: 1;
@@ -117,7 +81,7 @@
       width: 10px;
       height: 10px;
       margin-right: 5%;
-      background: url("../../static/images/icon.png") no-repeat 0 @pos;
+      /*background: url("../../static/images/icon.png") no-repeat 0 @pos;*/
     }
 
     .p {
@@ -130,6 +94,14 @@
       .text;
     }
 
+    h1 {
+      font-size: 1.4em;
+      cursor: pointer;
+      &:hover {
+        border-left: 2px solid #00BDCC;
+      }
+    }
+
     .warp {
       .clearfix;
       width: 100%;
@@ -149,7 +121,7 @@
         text-align: center;
         margin: 2.2%;
         font-size: 0.8em;
-        background: url("../../static/images/pop.png") no-repeat;
+        /*background: url("../../static/images/pop.png") no-repeat;*/
 
       }
 
diff --git a/src/components/index/Index.vue b/src/components/index/Index.vue
new file mode 100644
index 0000000..19f5994
--- /dev/null
+++ b/src/components/index/Index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="index">
+    <div class="index_left">
+      <classification></classification>
+      <hotblogger></hotblogger>
+    </div>  
+    <div class="index_right">
+      <login></login>
+    </div>
+    <contain></contain>
+  </div>
+</template>
+
+<script>
+  import Backtop from '../public/Backtop.vue'
+  import Classification from './Classification.vue'
+  import Hotblogger from './Hotblogger.vue'
+  import Hotpost from './Hotpost.vue'
+  import Login from './Login.vue'
+  import 'jquery'
+  let data = {
+  }
+  export default {
+    name: 'app',
+    components: {
+      backtop : Backtop,
+      classification : Classification,
+      hotblogger : Hotblogger,
+      contain : Hotpost,
+      login : Login
+    },
+    data () {
+      return {
+        data : data
+      }
+    }
+  }
+</script>
+<style lang="less">
+  .index {
+    /*width: 70%;*/
+    max-width: 1080px;
+    margin:0 auto 20px;
+    min-height: 1000px;
+    .index_left {
+      width: 20%;
+      float: left;
+    }
+    .index_right {
+      width: 20%;
+      float: right;
+    }
+    .contain {
+      width: 56%;
+      overflow: hidden;
+      margin: 0 auto;
+    }
+  }
+    
+</style>
\ No newline at end of file
diff --git a/src/components/index/Login.vue b/src/components/index/Login.vue
index c683f44..1af2af6 100644
--- a/src/components/index/Login.vue
+++ b/src/components/index/Login.vue
@@ -5,27 +5,27 @@
 **/
 
 <template>
-  <div class="wrapper" v-bind:class="{'border_line': data.showborder}">
+  <div class="wrapper" v-bind:class="{'border_line': data.list.showborder}">
     <div class="border-click" @click="toggle('showborder')">展示边框</div>
     <div class="header">
-      <img src="../../static/images/person.jpg" width="103px" height="107px">
+      <img src="" width="103px" height="107px">
     </div>
     <form class="form-panel">
-      <div class="form-group form-text" v-bind:class="{'focusbe': data.focususer, 'bluraf': !data.focususer}">
-        <input type="text" placeholder="请输入用户名..." @focus="toggle('focususer')" @blur="toggle('focususer')" v-model="data.username">
+      <div class="form-group form-text" v-bind:class="{'focusbe': data.list.focususer, 'bluraf': !data.list.focususer}">
+        <input type="text" placeholder="请输入用户名..." @focus="toggle('focususer')" @blur="toggle('focususer')" v-model="data.list.username">
       </div>
-      <div class="form-group form-text" v-bind:class="{'focusbe': data.focuspw, 'bluraf': !data.focuspw}">
-        <input type="password" placeholder="请输入密码..." @focus="toggle('focuspw')" @blur="toggle('focuspw')" v-model="data.password">
+      <div class="form-group form-text" v-bind:class="{'focusbe': data.list.focuspw, 'bluraf': !data.list.focuspw}">
+        <input type="password" placeholder="请输入密码..." @focus="toggle('focuspw')" @blur="toggle('focuspw')" v-model="data.list.password">
       </div>
       <div class="form-group form-check">
         <label title="为了确保你的安全，请不要在网吧或者公共机房勾选此项" @click="toggle('isBefore')">
-          <span  v-bind:class="{'remenber-before': data.isBefore, 'remenber-after': !data.isBefore}"></span>下次自动登录
+          <span  v-bind:class="{'remenber-before': data.list.isBefore, 'remenber-after': !data.list.isBefore}"></span>下次自动登录
         </label>
         <span class="getpassword">忘记密码?</span>
       </div>
       <div class="form-group form-button">
-        <button type="button" v-link="{name: '', params: {user: data.username}}">注&nbsp;册</button>
-        <button type="button" v-link="{name: '', params: {user: data.username}}">登&nbsp;录</button>
+        <router-link to="/register" tag="button">注&nbsp;册</router-link>
+        <router-link to="{path: 'personal', query: {username: data.list.username, password: data.list.password}}" tag="button">登&nbsp;录</router-link>
       </div>
     </form>
     <div class="third distance">
@@ -34,24 +34,19 @@
       <span class="right-line"></span>
     </div>
     <div class="method distance">
-      <span v-link="{name: ''}"></span>
-      <span v-link="{name: ''}"></span>
-      <span v-link="{name: ''}"></span>
+      <router-link to="/" tag="span"></router-link>
+      <router-link to="/" tag="span"></router-link>
+      <router-link to="/" tag="span"></router-link>
     </div>
   </div>
 </template>
 
 <script>
-
+  import getCGI from '../../getCGI/Login'
   let data = {
-    isBefore: true,
-    focususer: true,
-    focuspw: true,
-    showborder: true,
-    username: '',
-    password: ''
+    list: {}
   }
-
+  getCGI(data)
   export default {
     name: 'login',
 
@@ -78,7 +73,7 @@
       // }
 
       toggle(attr) {
-        this.data[attr] = !this.data[attr];
+        this.data.list[attr] = !this.data.list[attr];
       }
     }
   }
@@ -88,7 +83,8 @@
 <style lang="less">
   .wrapper {
     max-width: 400px;
-    min-width: 360px;
+    min-width: 270px;
+    background-color: #fff;
     .clearfix {
       *zoom: 1;
 
@@ -103,10 +99,11 @@
       }
     }
 
-    @url: "../../static/images/chat.png";
+    /*@url: "../../static/images/chat.png";*/
     
     width: 30%;
-    margin: 20px auto;
+    /*margin: 20px auto;*/
+    margin: 0 auto;
     font-size: 1.1em;
     font-family: '微软雅黑';
     color: #aaa;
@@ -178,7 +175,7 @@
         display: inline-block;
         width: 13px;
         height: 13px;
-        background: url("../../static/images/check.jpg") no-repeat;
+        /*background: url("../../static/images/check.jpg") no-repeat;*/
         margin-right: 5px;
       }
     }
@@ -214,7 +211,7 @@
 
       .left-line, .right-line {
         height: 1px;
-        width: 34.666%;
+        width: 30.666%;
         background-color: #e4e4e8;
         margin-top: 10px;
       }
@@ -239,15 +236,15 @@
         height: 28px;
         cursor: pointer;
         margin: 0 11.333%;
-        &:first-child {
+        /*&:first-child {
           background: url(@url) no-repeat 0 0;
-        }
-        &:nth-child(2) {
+        }*/
+        /*&:nth-child(2) {
           background: url(@url) no-repeat 0 -28px;
         }
         &:last-child {
           background: url(@url) no-repeat 0 -56px;
-        }
+        }*/
       }
     }
 
diff --git a/src/components/public/myHeader.vue b/src/components/public/myHeader.vue
index ab22680..240b43c 100644
--- a/src/components/public/myHeader.vue
+++ b/src/components/public/myHeader.vue
@@ -6,9 +6,11 @@
 <template>
   <div class="my_header">
     <nav class="header_nav">
-      <span class="header_logo">Forum</span>
+      <div class="header-navbox">
+        <router-link tag="span" to="/" class="header_logo">Forum</router-link>
+        <div><router-link :to="item.addurl" class="header_nav_a" v-for="item in data.items">{{item.name}}</router-link></div>
+      </div>
       <search></search>
-      <div><a class="header_nav_a" :class="{'header_nav_this':item.active}" v-for="item in data.items" @click="makeActive(item)">{{item.name}}</a></div>
     </nav>
   </div>
 </template>
@@ -18,22 +20,27 @@ import search from './Search.vue'
     items : [
       {
         name:'热门话题',
+        addurl:'/hotpost',
         active:true
       },
       {
         name:'话题分类',
+        addurl:'/classification',
         active:false
       },
       {
         name:'消息',
+        addurl:'/messages',
         active:false
       },
       {
         name:'发现',
+        addurl:'/search',
         active:false
       },
       {
         name:'个人中心',
+        addurl:'/personal',
         active:false
       }
     ]
@@ -67,83 +74,98 @@ import search from './Search.vue'
     line-height: 60px;
     background-color: #3FA46A;
     font-family: '微软雅黑';
+    text-decoration: none;
     nav {
-      min-width: 718px;
+      min-width: 751px;
       width: 60%;
       margin: 0 auto;
       text-align: center;
       font-size: 16px;
-      .header_logo {
-        min-width: 80px;
-        color: @color;
-        font: 30px 'Arial';
-        display: inline-block;
-        vertical-align: top;
-        margin-top: 13px;
-        width: 8%;
-        margin-right: 2%;
-        text-align: center;
-        vertical-align: top;
-      }
-      div {
-        width: 40%;
-        display: inline-block;
-        min-width: 460px;
-        a {
-          padding: 0 4%;
-          height: 40px;
+      .header-navbox {
+        width: 80%;
+        float: left;
+        .header_logo {
+          min-width: 80px;
+          color: @color;
+          font: 30px 'Arial';
           display: inline-block;
-          line-height: 40px;
           vertical-align: top;
+          margin-top: 13px;
+          width: 8%;
+          margin-right: 2%;
           text-align: center;
-          margin: 10px auto;
-          color: #237546;
-          font-weight: 400;
-          -webkit-transition: color 0.3s;
-          -moz-transition: color 0.3s;
-          transition: color 0.3s;
-          position: relative;
-          &::before,&::after {
-            position: absolute;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: #fff;
-            content: '';
-            opacity: 0;
-            -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-            -moz-transition: opacity 0.3s, -moz-transform 0.3s;
-            transition: opacity 0.3s, transform 0.3s;
-          }
-          &::before {
-            top: 0;
-            -webkit-transform: translateY(-10px);
-            -moz-transform: translateY(-10px);
-            transform: translateY(-10px);
-          }
-          &::after {
-            bottom: 0;
-            -webkit-transform: translateY(10px);
-            -moz-transform: translateY(10px);
-            transform: translateY(10px);
-          }
-          &:hover {
-            color: #fff;
-            cursor: pointer;
+          vertical-align: top;
+          cursor: pointer;
+        }
+        div {
+          width: 40%;
+          display: inline-block;
+          min-width: 460px;
+          a {
+            padding: 0 4%;
             text-decoration: none;
+            height: 40px;
+            display: inline-block;
+            line-height: 40px;
+            vertical-align: top;
+            text-align: center;
+            margin: 10px auto;
+            color: #237546;
+            font-weight: 400;
+            -webkit-transition: color 0.3s;
+            -moz-transition: color 0.3s;
+            transition: color 0.3s;
+            position: relative;
+            &::before,&::after {
+              position: absolute;
+              left: 0;
+              width: 100%;
+              height: 2px;
+              background: #fff;
+              content: '';
+              opacity: 0;
+              -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+              -moz-transition: opacity 0.3s, -moz-transform 0.3s;
+              transition: opacity 0.3s, transform 0.3s;
+            }
+            &::before {
+              top: 0;
+              -webkit-transform: translateY(-10px);
+              -moz-transform: translateY(-10px);
+              transform: translateY(-10px);
+            }
+            &::after {
+              bottom: 0;
+              -webkit-transform: translateY(10px);
+              -moz-transform: translateY(10px);
+              transform: translateY(10px);
+            }
+            &:hover {
+              color: #fff;
+              cursor: pointer;
+              text-decoration: none;
+            }
+            &:visited {
+              text-decoration: none;
+            }
+            &:alink {
+              text-decoration: none;
+            }
+            &:active {
+              text-decoration: none;
+            }
+            &:focus {
+              color: #fff;
+            }
+            &:hover::before,&:focus::before,&:hover::after,&:focus::after {
+            opacity: 1;
+            -webkit-transform: translateY(0px);
+            -moz-transform: translateY(0px);
+            transform: translateY(0px);          
+            }
           }
-          &:focus {
-            color: #fff;
-          }
-          &:hover::before,&:focus::before,&:hover::after,&:focus::after {
-          opacity: 1;
-          -webkit-transform: translateY(0px);
-          -moz-transform: translateY(0px);
-          transform: translateY(0px);          
-          }
-        }
+        }        
       }
     }
   }
-
-</style>
\ No newline at end of file
+  </style>
\ No newline at end of file
diff --git a/src/getCGI/Classification.js b/src/getCGI/Classification.js
new file mode 100644
index 0000000..f3baba7
--- /dev/null
+++ b/src/getCGI/Classification.js
@@ -0,0 +1,46 @@
+export default function(data){
+  data.classifies = [
+    {
+      name : '运动',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : ''
+    },
+    {
+      name : '娱乐',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : '/entertainment'
+    },
+    {
+      name : '健身',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : '/exercise'
+    },
+    {
+      name : '养生',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : '/health'
+    },
+    {
+      name : '阅读',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : '/read'
+    },
+    {
+      name : '阅读',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : '/read'
+    },
+    {
+      name : '阅读',
+      intro : '哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡哇卡卡卡卡',
+      imgurl : require("../static/images/classify.png"),
+      addurl : '/read'
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/getCGI/Hotblogger.js b/src/getCGI/Hotblogger.js
new file mode 100644
index 0000000..af52d2b
--- /dev/null
+++ b/src/getCGI/Hotblogger.js
@@ -0,0 +1,189 @@
+export default function(data){
+  data.bloggerClasses = [
+  {
+    name : '发帖巨人',
+    active : true,
+    bloggers : [
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      }
+    ]
+  },
+  {
+    name : '神评侠',
+    active : false,
+    bloggers : [
+      {
+        name : '喜羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '喜羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '喜羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '喜羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '喜羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      }
+    ]
+  },
+  {
+    name : '人气队长',
+    active : false,
+    bloggers : [
+      {
+        name : '懒羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '懒羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '懒羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '懒羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '懒羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      }
+    ]
+  }
+  ],
+  data.thisbloggerClass = {
+    name : '发帖巨人',
+    active : true,
+    bloggers : [
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      },
+      {
+        name : '美羊羊',
+        classify : '运动',
+        imgurl : '',
+        bloggerurl : '#',
+        articlenum : 3,
+        fansnum : 30
+      }
+    ]
+  }
+  
+}
\ No newline at end of file
diff --git a/src/getCGI/Hotpost.js b/src/getCGI/Hotpost.js
new file mode 100644
index 0000000..7a800e6
--- /dev/null
+++ b/src/getCGI/Hotpost.js
@@ -0,0 +1,253 @@
+export default function(data){
+  data.list = [
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: true,
+        // url: '../../static/images/backtop.png'
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      latest_reply_id: 'sdff',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      latest_reply_id: 'sdff',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    },
+    {
+      response: 111,
+      article_name: '我的第一条正式帖',
+      article_id: 'oxks',
+      author_id: 'kijjj',
+      author: 'Esan讯粉',
+      content: '开学到现在还没发过什么贴呢，然而我只爱吃。所以这是一个美食贴。fdvfdbf',
+      latest_reply: '但依然有人也有',
+      img: {
+        attr: false,
+        url: ''
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/getCGI/Login.js b/src/getCGI/Login.js
new file mode 100644
index 0000000..d3e53f4
--- /dev/null
+++ b/src/getCGI/Login.js
@@ -0,0 +1,10 @@
+export default function(data){
+  data.list = {
+    isBefore : true,
+    focususer : true,
+    focuspw : true,
+    showborder : true,
+    username : '',
+    password : ''
+  }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index cbdd6f3..1c9af5d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,13 +7,17 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import Vue from 'vue'
 import App from './App.vue'
 import VueRouter from 'vue-router'
+
 Vue.use(VueRouter)
 
 // import './static/lib/reset.css'
 
 
+import Router from './routers/index'
+
 
 new Vue({
   el: '#app',
+  router : Router,
   render: h => h(App)
 })
diff --git a/src/routers/classification.js b/src/routers/classification.js
new file mode 100644
index 0000000..3a92079
--- /dev/null
+++ b/src/routers/classification.js
@@ -0,0 +1,6 @@
+export default [
+  {
+    path: ''
+  }
+
+]
\ No newline at end of file
diff --git a/src/routers/index.js b/src/routers/index.js
index 61c9f5a..6bc0fb1 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -1,4 +1,44 @@
 /**
 *	路由页，这个先把你们的目录结构确认了再说
 *
-**/
\ No newline at end of file
+**/
+import VueRouter from 'vue-router'
+import Index from '../components/index/Index.vue'
+import Hotpost from '../components/index/Hotpost.vue'
+import Classification from '../components/index/Classification.vue'
+
+
+
+
+const routes = [
+  {
+    path: '/',
+    components: {
+      index: Index
+    }
+  },
+  {
+    path: '/hotpost',
+    components: {
+      index: Hotpost
+    }
+  },
+  {
+    path: '/classification',
+    components: {
+      index: Classification
+    }
+  }
+]
+
+
+
+
+
+
+
+
+
+export default new VueRouter({
+  routes
+})
\ No newline at end of file
diff --git a/src/static/images/classify.png b/src/static/images/classify.png
new file mode 100644
index 0000000..cb5e0b2
Binary files /dev/null and b/src/static/images/classify.png differ
diff --git a/src/static/images/head.jpg b/src/static/images/head.jpg
new file mode 100644
index 0000000..b350805
Binary files /dev/null and b/src/static/images/head.jpg differ