完成云中心页面

assets/scss/common.scss

@@ -143,7 +143,7 @@
   background-color: $white;
   background-image: none;
   border: $border;
-  color: $text;
+  color: #999;
   display: inline-block;
   font-size: inherit;
   height: 36px;

components/common/page/pageComponent.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="page-wrap" v-if="total/1.0/pageSize>1">
+    <el-pagination
+      :current-page.sync="currentPage"
+      :page-size="pageSize"
+      layout="prev, pager, next"
+      :total="total"
+      prev-text="上一页"
+      next-text="下一页"
+      @current-change="handleCurrentChange">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        nowPage: 1,
+        currentPage: 1
+      }
+    },
+    watch: {
+      current: function () {
+        this.nowPage = Number(this.current)
+        this.currentPage = this.nowPage
+      }
+    },
+    props: ['current', 'total', 'pageSize'],
+    methods: {
+      handleCurrentChange: function (changedPage) {
+        if (this.nowPage !== this.currentPage) {
+          this.$emit('childEvent', changedPage)
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .page-wrap a {
+    color: #333;
+    background: 0 0;
+    text-decoration: none;
+    outline: 0;
+    cursor: pointer;
+    transition: color .2s ease;
+  }
+  .el-pagination {
+    padding: 0;
+  }
+  .el-pagination .btn-next {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid #ddd;
+    height:30px;
+    margin-right:10px;
+    padding:0 10px;
+    text-align: center;
+  }
+  .el-pagination .btn-prev {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border: 1px solid #ddd;
+    height:30px;
+    margin-right:10px;
+    padding:0 10px;
+    text-align: center;
+  }
+  .el-pager li{
+    color: #333;
+    text-decoration: none;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    font-size: 10px;
+    width: 33px;
+    height: 30px;
+    margin-right:10px;
+  }
+  .el-pager li:not(.active):hover, .el-pagination button:hover {
+    z-index: 3;
+    color: #fff;
+    background-color: #333;
+    border-color: #333;
+  }
+  .el-pager li.active {
+    background: #333!important;
+    color:#fff;
+  }
+  .el-pagination button.disabled {
+    color: #333;
+    background-color: #fff;
+    cursor: not-allowed;
+  }
+  .pagination {
+    display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 4px;
+  }
+  .pagination>li {
+    display: inline;
+  }
+  input.page-number {
+    vertical-align: inherit;
+    display: inline-block;
+    width: 40px;
+    height: 31px;
+    padding: 6px 6px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #9B9792;
+    text-align: center;
+    background-color: #F6F5F4;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  }
+  .page-a {
+    background: #5078cb !important;
+    color: #fff !important;
+    float: right!important;
+  }
+  .page-a {
+    color: #fff;
+    border-color: #4574e8;
+    padding: 6px 6px!important;
+    font-size: 14px!important;
+    border-top-right-radius: 4px!important;
+    border-bottom-right-radius: 4px!important;
+    text-decoration: none;
+    height: 31px;
+  }
+  .page-wrap{
+    text-align: center;
+    margin: 30px 0;
+  }
+  .page-wrap ul, .page-wrap div {
+    display: inline-block;
+    margin: 0;
+  }
+  input.page-number {
+    -moz-appearance:textfield;
+  }
+  input.page-number::-webkit-inner-spin-button,
+  input.page-number::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .el-pager li.active+li {
+    border: 1px solid #ccc;
+  }
+</style>

layouts/cloud.vue

@@ -2,14 +2,16 @@
   <div>
     <cloud-header></cloud-header>
     <nuxt/>
+    <common-footer></common-footer>
   </div>
 </template>
 <script>
-  import {CloudHeader} from '~components/default'
+  import {CloudHeader, CommonFooter} from '~components/default'
   export default {
     name: 'cloud',
     components: {
-      CloudHeader
+      CloudHeader,
+      CommonFooter
     }
   }
 </script>

layouts/main.vue

@@ -2,9 +2,7 @@
   <div class="default">
     <accountCenter-header/>
     <nuxt/>
-    <div class="footer">
-      <common-footer/>
-    </div>
+    <common-footer/>
   </div>
 </template>
 <script>
@@ -62,7 +60,4 @@
     color: #fff;
     background-color: #35495e;
   }
-  .footer{
-    margin-top:10px;
-  }
 </style>

package.json

@@ -51,6 +51,7 @@
     "eslint-plugin-promise": "^3.4.1",
     "eslint-plugin-standard": "^2.0.1",
     "node-sass": "^4.5.3",
+    "nodemon": "^1.14.11",
     "sass-loader": "^6.0.6"
   }
 }

pages/bingEnterPrise/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="x-content">
+    <div class="container">
+      <div class="w-over-top">
+        <div class="w-over">
+          <h3>绑定企业</h3>
+          <hr>
+          <div class="bind-search">
+            <div class="search">
+              <input type="search" class="form-control" placeholder="输入企业名称查询">
+              <i class="delete"></i><i class="icon-search"></i>
+              <ul class="list-unstyled">
+                <li class="hit">3432432</li>
+                <li class="hit">3432432</li>
+                <li class="hit">3432432</li>
+                <li class="hit">3432432</li>
+                <li class="hit">3432432</li>
+                <li class="hit">3432432</li>
+              </ul>
+            </div>
+            <div class="search-info">
+              <h3 id="name"><i></i><span>企业名称</span><em>(未注册)</em></h3>
+              <hr/>
+              <div class="row">
+                <div class="col-xs-3"><p>管理员</p></div>
+                <div class="col-xs-9"><span id="admin"></span></div>
+              </div>
+              <div class="row">
+                <div class="col-xs-3"><p>企业法人</p></div>
+                <div class="col-xs-9"><span id="corporation"></span></div>
+              </div>
+              <div class="row">
+                <div class="col-xs-3"><p>营业执照</p></div>
+                <div class="col-xs-9"><span id="businessCode"></span></div>
+              </div>
+              <div class="row">
+                <div class="col-xs-3"><p>企业地址</p></div>
+                <div class="col-xs-9"><span id="address"></span></div>
+              </div>
+            </div>
+          </div>
+          <a name="register" href="/sso/register?appId=${appId}">立即注册</a>
+          <a name="apply" href="javascript:void(0)">申请绑定</a>
+          <p id="applyText">管理员审核通过后成功绑定</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      layout: 'main'
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+  .x-content {
+    background: #eee;
+  }
+  .w-over-top {
+    margin-top:50px;
+    padding:50px 0;
+    background: #fff;
+  }
+  .w-over-top .w-over>h3{
+    font-size: 30px;
+    text-align: center;
+    color:#11b200;
+    margin:0;
+  }
+  .w-over-top hr{
+    border-top:1px solid #dcdcdc;
+  }
+  .w-over-top .w-over>p#applyText{
+    text-align: center;
+    font-size: 14px;
+    color:#b5b5b5;
+    margin-top:20px;
+  }
+  .w-over-top .w-over>strong{
+    font-size: 14px;
+    color:#b5b5b5;
+    padding-top:20px;
+  }
+  .w-over-top .link-list .item{
+    padding:15px 25px 0;
+    width:170px;
+    height:100px;
+    box-shadow: 0 0 10px rgba(0,0,0,.5);
+  }
+  .w-over-top .link-list .item:hover{
+    position:relative;
+    top:-3px;
+    cursor:pointer;
+  }
+  .w-over-top .link-list .item img{
+    display:block;
+    height:40px;
+  }
+  .w-over-top .link-list .item span{
+    font-size: 16px;
+    color:#333;
+    font-weight: bold;
+  }
+  .w-over-top .link-list .item .caption{
+    padding-top:12px;
+    text-align: center;
+  }
+  .w-over-top .w-over>a{
+    display: block;
+    margin:0 auto;
+    margin-top:60px;
+    width:220px;
+    height:42px;
+    line-height: 42px;
+    text-align: center;
+    color:#fff;
+    font-size: 14px;
+    background: #0076ad;
+    border-radius:5px;
+  }
+
+  .w-over-bottom {
+    padding-top:35px;
+    padding-bottom:50px;
+    background: #fff;
+  }
+  .w-over-bottom .w-over>p{
+    text-align: center;
+    margin-bottom:25px;
+    font-size: 16px;
+    color:#646464;
+  }
+  .w-over-bottom .w-over>a{
+    display:block;
+    margin:0 auto;
+    margin-bottom:45px;
+    width:130px;
+    height:32px;
+    line-height: 30px;
+    text-align: center;
+    border-radius:15px;
+    border:1px solid #0076ad;
+    color:#0076ad;
+    font-size: 14px;
+  }
+  .w-over-bottom .media{
+    padding:10px;
+  }
+  .w-over-bottom .media-left{
+    padding:10px 30px 10px 10px;
+    width:190px;
+    height:120px;
+  }
+  .w-over-bottom .media-left a{
+    display:block;
+    text-align: center;
+    width:170px;
+    height:100px;
+    padding-top:20px;
+    box-shadow: 0 0 10px rgba(0,0,0,.4);
+  }
+  .w-over-bottom .media-left a img{
+    display:block;
+    width:80px;
+    height:30px;
+    margin:0 auto;
+    margin-bottom:16px;
+  }
+  .w-over-bottom .media-left a span{
+    font-size: 16px;
+    color:#333;
+    font-weight: bold;
+  }
+  .w-over-bottom .media .media-body{
+    padding-top:10px;
+  }
+  .w-over-bottom .media .media-body .media-heading{
+    color:#333;
+    font-weight: bold;
+    font-size: 16px;
+    margin-bottom:15px;
+  }
+  .w-over-bottom .media .media-body p{
+    font-size: 14px;
+    color:#8c8c8c;
+    line-height: 25px;
+    margin:0;
+  }
+  .w-over{
+    width:880px;
+    margin:0 auto;
+  }
+  .w-over-top .bind-search{
+    width:500px;
+    margin:0 auto;
+  }
+  .w-over-top .bind-search .search{
+    position:relative;
+    margin-top:40px;
+    margin-bottom:40px;
+  }
+  .w-over-top .bind-search .search input{
+    padding-right: 65px;
+  }
+  .w-over-top .bind-search .search i{
+    position:absolute;
+    top:7px;
+    right:0;
+    display:block;
+    width:30px;
+    height:30px;
+    font-size: 20px;
+    color: #cbcbcb;
+  }
+  .w-over-top .bind-search .search i.delete {
+    right: 30px;
+    top:9px;
+    background: url('/img/over_account/delete.png')no-repeat;
+  }
+  .w-over-top .bind-search .search i.icon-search {
+    right: 0;
+    top:9px;
+    background: url('/img/over_account/search.png')no-repeat;
+  }
+  .w-over-top .bind-search .search ul{
+    display:none;
+    position:absolute;
+    top:34px;
+    left:0;
+    z-index:100;
+    width:100%;
+    max-height:226px;
+    overflow-y:auto;
+    border:1px solid #dcdcdc;
+    background: #fff;
+    padding:10px 0;
+  }
+  .w-over-top .bind-search .search li{
+    height:34px;
+    line-height: 34px;
+    padding-left:12px;
+    color:#010101;
+    width:480px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .w-over-top .bind-search .search .list-name li em{
+    color:#ff5c5c;
+  }
+  .w-over-top .bind-search .search li:hover{
+    cursor:pointer;
+    background: #f7f7f7;
+  }
+  .w-over-top .bind-search .search li.hit{
+    color:#8c8c8c;
+  }
+  .w-over-top .bind-search .search-info{
+    padding:20px;
+    background: #f7f7f7;
+    overflow: hidden;
+  }
+  .w-over-top .bind-search .search-info h3{
+    font-size: 18px;
+    color:#000;
+    line-height: 20px;
+    font-weight: bold;
+  }
+  .w-over-top .bind-search .search-info h3 i{
+    display:inline-block;
+    position:relative;
+    top:5px;
+    width:30px;
+    height:20px;
+    background:url('/img/over_account/business.png')no-repeat;
+  }
+  .w-over-top .bind-search .search-info h3 span{
+    color:#787878;
+    display:inline-block;
+    vertical-align: bottom;
+    width:310px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .w-over-top .bind-search .search-info h3 em{
+    margin-left:10px;
+    color:#e87405;
+    font-style:normal;
+  }
+  .w-over-top .bind-search .search-info .row{
+    margin-bottom:15px;
+  }
+  .w-over-top .bind-search .search-info .row p{
+    font-weight: bold;
+    font-size: 14px;
+    color:#000;
+    margin:0;
+  }
+  .w-over-top .bind-search .search-info .row span{
+    font-size: 14px;
+    color:#787878;
+  }
+</style>

pages/cloudcenter/enterprise/index.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="us-manager">
-    <div class="us-member">
-      <div class="w-over-box">
-        <div class="w-over">
-          <div class="table-list">
-            <div class="table-top">
-              <h3>成员列表</h3>
-              <a class="btn-us-apply">申请列表</a>
-            </div>
-            <table class="table table-striped">
-              <thead>
+  <div class="manager">
+    <div class="us-member w-over-box">
+      <div class="container">
+        <div class="table-list">
+          <div class="table-top">
+            <h3>成员列表</h3>
+            <a class="btn-us-apply">申请列表</a>
+          </div>
+          <table class="table table-striped">
+            <thead>
               <tr>
                 <th>角色</th>
                 <th>用户名称</th>
@@ -17,8 +16,8 @@
                 <th>手机号</th>
                 <th>邮箱</th>
               </tr>
-              </thead>
-              <tbody id="memberTable">
+            </thead>
+            <tbody>
               <tr>
                 <td>管理员</td>
                 <td>李事业</td>
@@ -26,28 +25,25 @@
                 <td>123456799+66</td>
                 <td>112456112@qq.com</td>
               </tr>
-              </tbody>
-            </table>
-            <nav class="pages">
-              <ul id="pageMember" class="pagination">
-              </ul>
-            </nav>
-          </div>
+            </tbody>
+          </table>
+          <page :total="pageParams.counts" :page-size="pageParams.count"
+                  :current="pageParams.page" @childEvent="handleCurrentChange">
+          </page>
         </div>
       </div>
     </div>
 
     <!--企业管理申请列表部分-->
-    <div class="us-apply" style="display: none">
-      <div class="w-over-box">
-        <div class="w-over">
-          <div class="table-list">
-            <div class="table-top">
-              <h3>申请列表</h3>
-              <a class="btn-us-member">成员列表</a>
-            </div>
-            <table class="table table-striped">
-              <thead>
+    <div class="us-apply w-over-box">
+      <div class="container">
+        <div class="table-list">
+          <div class="table-top">
+            <h3>申请列表</h3>
+            <a class="btn-us-member">成员列表</a>
+          </div>
+          <table class="table table-striped">
+            <thead>
               <tr>
                 <th>操作</th>
                 <th>用户名称</th>
@@ -55,8 +51,8 @@
                 <th>手机号</th>
                 <th>邮箱</th>
               </tr>
-              </thead>
-              <tbody id="applyTable">
+            </thead>
+            <tbody>
               <tr>
                 <td>
                   <button class="btn btn-apply">同意</button>
@@ -74,13 +70,11 @@
                 <td>123456799+66</td>
                 <td>112456112@qq.com</td>
               </tr>
-              </tbody>
-            </table>
-            <nav class="pages">
-              <ul id="pageApply" class="pagination">
-              </ul>
-            </nav>
-          </div>
+            </tbody>
+          </table>
+          <page :total="pageParams.counts" :page-size="pageParams.count"
+                :current="pageParams.page" @childEvent="handleCurrentChange">
+          </page>
         </div>
       </div>
     </div>
@@ -88,85 +82,42 @@
 </template>
 
 <script>
-    export default {
-      layout: 'cloud'
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    name: 'manager',
+    layout: 'cloud',
+    components: {
+      Page
+    },
+    data () {
+      return {
+        pageParams: {
+          page: 1,
+          count: 10,
+          counts: 222,
+          filter: {}
+        }
+      }
+    },
+    methods: {
+      handleCurrentChange () {
+        console.log('11')
+      }
     }
+  }
 </script>
 
 <style scoped type="text/scss" lang="scss">
-  .w-btn{
-    width:180px;
-    height:30px;
-    line-height: 16px;
-    border-radius:15px;
-    color:#656565;
-    font-size: 14px;
-  }
-  .w-over-box {
-    padding-top:10px;
-    background: #fff;
-    margin-bottom:20px;
-  }
-
-  .w-over{
-    width:880px;
-    margin:0 auto;
-  }
-
-  .w-over-box .basic-info{
-    padding:20px;
-  }
-  .w-over-box .basic-info hr{
-    border:1px solid #e5e5e5;
-  }
-  .w-over-box .basic-info h3{
-    font-size: 18px;
-    color:#000;
-    line-height: 20px;
-    font-weight: bold;
-  }
-  .w-over-box .basic-info h3 i.business{
-    display:inline-block;
-    position:relative;
-    top:2px;
-    width:30px;
-    height:20px;
-    background:url('/img/over_account/business.png')no-repeat;
-  }
-  .w-over-box .basic-info h3 em{
-    color:#e87405;
-    font-style:normal;
-  }
-  .w-over-box .basic-info .row{
-    margin-bottom:15px;
-  }
-  .w-over-box .basic-info .row a{
-    margin-left:25px;
-    color:#0076ad;
-  }
-  .w-over-box .basic-info .row i.man{
-    display:inline-block;
-    position:relative;
-    top:5px;
-    width:30px;
-    height:20px;
-    background:url('/img/over_account/man.png')no-repeat;
-  }
-  .w-over-box .basic-info .row p{
-    font-weight: bold;
-    font-size: 14px;
-    color:#000;
-    margin:0;
-  }
-  .w-over-box .basic-info .row span{
-    font-size: 14px;
-    color:#787878;
+  .manager{
+    background: #eee;
+    padding:50px 0 112px 30px;
   }
 
   .w-over-box .table-list{
     position:relative;
-    padding-top:10px;
-    padding-bottom:140px;
+    padding:20px 30px;
+    margin-bottom:10px;
+    background: #fff;
   }
   .w-over-box .table-list .table-top{
     position:relative;
@@ -174,6 +125,7 @@
   .w-over-box .table-list .table-top h3{
     font-size: 18px;
     color:#000;
+    font-weight: bold;
   }
   .w-over-box .table-list .table-top a{
     display:inline-block;
@@ -192,10 +144,14 @@
     cursor:pointer;
   }
   .w-over-box .table-list table thead tr th{
+    font-size: 14px;
+    color:#333;
     border-top:2px solid #ddd!important;
     line-height: 25px!important;
   }
   .w-over-box table tbody tr td{
+    font-size: 14px;
+    color:#999;
     border:none;
     line-height: 25px!important;
   }
@@ -212,6 +168,7 @@
     color:#0076ad;
     background: #fff;
     padding:0;
+    margin:0 5px;
   }
   .w-over-box table tbody tr td button.btn-apply:hover{
     background: #0076ad;
@@ -221,24 +178,4 @@
     color: #505050;
     font-size: 14px;
   }
-
-  .w-over-box .pages{
-    text-align: center;
-  }
-
-  .pages .pagination li>a{
-    margin-left: 10px !important;
-  }
-  .pages .pagination li>a{
-    color:#505050;
-    background: #fff;
-  }
-  .pages .pagination li:hover >a{
-    background: #505050;
-    color:#fff;
-  }
-  .pages .pagination li.active >a{
-    background: #505050;
-    color:#fff;
-  }
 </style>

pages/cloudcenter/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="info">
     <div class="w-over-box">
-      <div class="w-over">
+      <div class="container">
         <div class="basic-info">
           <div class="row">
             <div class="col-xs-3"><h3><i class="man"></i><b id="man">管理员</b></h3></div>
-            <div class="col-xs-9"><span id="lastTime">上次登录时间：</span></div>
+            <div class="col-xs-9"><span class="f-pr">上次登录时间：</span></div>
           </div>
           <hr/>
           <div class="row">
@@ -19,8 +19,8 @@
         </div>
       </div>
     </div>
-    <div class="w-over-box" id="usinfo">
-      <div class="w-over">
+    <div class="w-over-box">
+      <div class="container">
         <div class="basic-info">
           <h3><i class="business"></i><b id="spaceName"></b></h3>
           <hr/>
@@ -54,6 +54,10 @@
 </script>
 
 <style scoped type="text/scss" lang="scss">
+  .info{
+    padding:50px 0 112px 30px;
+    background:#eee;
+  }
   .w-btn{
     width:180px;
     height:30px;
@@ -64,17 +68,14 @@
   }
   .w-over-box {
     padding-top:10px;
-    background: #fff;
-    margin-bottom:20px;
   }
-
-  .w-over{
-    width:880px;
-    margin:0 auto;
-  }
-
   .w-over-box .basic-info{
-    padding:20px;
+    padding:20px 30px;
+    background: #fff;
+  }
+  .w-over-box .basic-info .f-pr{
+    position:relative;
+    top:10px;
   }
   .w-over-box .basic-info hr{
     border:1px solid #e5e5e5;
@@ -84,6 +85,7 @@
     color:#000;
     line-height: 20px;
     font-weight: bold;
+    margin:0;
   }
   .w-over-box .basic-info h3 i.business{
     display:inline-block;
@@ -98,7 +100,7 @@
     font-style:normal;
   }
   .w-over-box .basic-info .row{
-    margin-bottom:15px;
+    margin-bottom:30px;
   }
   .w-over-box .basic-info .row a{
     margin-left:25px;
@@ -122,83 +124,4 @@
     font-size: 14px;
     color:#787878;
   }
-
-  .w-over-box .table-list{
-    position:relative;
-    padding-top:10px;
-    padding-bottom:140px;
-  }
-  .w-over-box .table-list .table-top{
-    position:relative;
-  }
-  .w-over-box .table-list .table-top h3{
-    font-size: 18px;
-    color:#000;
-  }
-  .w-over-box .table-list .table-top a{
-    display:inline-block;
-    position:absolute;
-    right:10px;
-    top:0;
-    width:88px;
-    height:28px;
-    line-height: 26px;
-    text-align: center;
-    color:#0076ad;
-    border:1px solid #bfbfbf;
-    border-radius:3px;
-  }
-  .w-over-box .table-list .table-top a:hover{
-    cursor:pointer;
-  }
-  .w-over-box .table-list table thead tr th{
-    border-top:2px solid #ddd!important;
-    line-height: 25px!important;
-  }
-  .w-over-box table tbody tr td{
-    border:none;
-    line-height: 25px!important;
-  }
-  .w-over-box table tbody tr:hover{
-    background: #d0e5f5;
-  }
-  .w-over-box table tbody tr td button.btn-apply{
-    border:1px solid #0076ad;
-    width:40px;
-    height:22px;
-    line-height: 20px;
-    font-size: 12px;
-    border-radius:0;
-    color:#0076ad;
-    background: #fff;
-    padding:0;
-  }
-  .w-over-box table tbody tr td button.btn-apply:hover{
-    background: #0076ad;
-    color:#fff;
-  }
-  .w-over-box table tbody tr td span{
-    color: #505050;
-    font-size: 14px;
-  }
-
-  .w-over-box .pages{
-    text-align: center;
-  }
-
-  .pages .pagination li>a{
-    margin-left: 10px !important;
-  }
-  .pages .pagination li>a{
-    color:#505050;
-    background: #fff;
-  }
-  .pages .pagination li:hover >a{
-    background: #505050;
-    color:#fff;
-  }
-  .pages .pagination li.active >a{
-    background: #505050;
-    color:#fff;
-  }
 </style>

yarn.lock

@@ -184,9 +184,11 @@ async-foreach@^0.1.3:
   version "0.1.3"
   resolved "http://registry.npm.taobao.org/async-foreach/download/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
 
-async-validator@1.6.9:
-  version "1.6.9"
-  resolved "http://registry.npm.taobao.org/async-validator/download/async-validator-1.6.9.tgz#a8309daa8b83421cdbd4628e026d6abb25192d34"
+async-validator@~1.8.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.2.tgz#b77597226e96242f8d531c0d46ae295f62422ba4"
+  dependencies:
+    babel-runtime "6.x"
 
 async@^2.1.2, async@^2.1.5:
   version "2.5.0"
@@ -449,6 +451,10 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-component@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-component/-/babel-plugin-component-0.10.1.tgz#cfac25045e5c6e1353e89f05ff5a675af9712759"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -850,6 +856,13 @@ babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
   version "6.23.0"
   resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
@@ -1761,11 +1774,11 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14:
   version "1.3.15"
   resolved "http://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"
 
-element-ui@^1.3.7:
-  version "1.3.7"
-  resolved "http://registry.npm.taobao.org/element-ui/download/element-ui-1.3.7.tgz#ed6e2e371b767fd7b8a8015dc284e4af5e940026"
+element-ui@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.0.11.tgz#efc19d10270c13aa2b235f65bcb6ced3226550b8"
   dependencies:
-    async-validator "1.6.9"
+    async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
     deepmerge "^1.2.0"
     throttle-debounce "^1.0.1"
@@ -4216,6 +4229,10 @@ regenerator-runtime@^0.10.0:
   version "0.10.5"
   resolved "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
 regenerator-transform@0.9.11:
   version "0.9.11"
   resolved "http://registry.npm.taobao.org/regenerator-transform/download/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
@@ -4521,6 +4538,10 @@ signal-exit@^3.0.0:
   version "3.0.2"
   resolved "http://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
+simple-assign@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/simple-assign/-/simple-assign-0.1.0.tgz#17fd3066a5f3d7738f50321bb0f14ca281cc4baa"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.taobao.org/slash/download/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -4727,6 +4748,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+swiper@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-3.4.2.tgz#39d6b410b1a39833e1f72d3b72999df5f5e38392"
+
 table@^3.7.8:
   version "3.8.3"
   resolved "http://registry.npm.taobao.org/table/download/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
@@ -4942,6 +4967,10 @@ uuid@^3.0.0:
   version "3.1.0"
   resolved "http://registry.npm.taobao.org/uuid/download/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
+v-vuerify-next@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/v-vuerify-next/-/v-vuerify-next-0.2.0.tgz#814c14f42a005be13c1e14756292ceeb2f202408"
+
 v8flags@^2.0.10:
   version "2.1.1"
   resolved "http://registry.npm.taobao.org/v8flags/download/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
@@ -4959,6 +4988,10 @@ vary@~1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/vary/download/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
+vee-validate@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.0.3.tgz#f17fa3d7d53a5344a0e794938346927abb252ef7"
+
 vendors@^1.0.0:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/vendors/download/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
@@ -4985,6 +5018,10 @@ vue-hot-reload-api@^2.0.11:
   version "2.1.0"
   resolved "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
 
+vue-i18n@^7.3.4:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.4.0.tgz#bd96cee90b3074e3f43e7347639e6fad0b45b6ae"
+
 vue-loader@^11.3.4:
   version "11.3.4"
   resolved "http://registry.npm.taobao.org/vue-loader/download/vue-loader-11.3.4.tgz#65e10a44ce092d906e14bbc72981dec99eb090d2"
@@ -5066,6 +5103,12 @@ vue@^2.2.6:
   version "2.4.1"
   resolved "http://registry.npm.taobao.org/vue/download/vue-2.4.1.tgz#76e0b8eee614613532216b7bfe784e0b5695b160"
 
+vuerify@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/vuerify/-/vuerify-0.4.0.tgz#d887145bf19e328faafc6244463d312eef111791"
+  dependencies:
+    simple-assign "^0.1.0"
+
 vuex@^2.2.1:
   version "2.3.1"
   resolved "http://registry.npm.taobao.org/vuex/download/vuex-2.3.1.tgz#cde8e997c1f9957719bc7dea154f9aa691d981a6"