完成注册后的跳转页面

components/default/CloudHeader.vue

@@ -0,0 +1,326 @@
+<template>
+  <header class="header">
+    <nav class="navbar">
+      <div class="navbar-container container">
+        <div class="navbar-header">
+          <a href="http://www.ubtob.com" class="item navbar-link">
+            <img src="/images/logo/uas.png" class="navbar-logo">
+          </a>
+          <a href=""><span class="navbar-slogan">账号中心</span></a>
+        </div>
+        <ul class="nav nav-pills f-nav">
+          <li>
+            <nuxt-link to="/cloudcenter" class="menu-item">基本信息</nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/cloudcenter/enterprise" class="menu-item">企业管理</nuxt-link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+</template>
+<script>
+  export default {
+    name: 'cloudHeader',
+    data () {
+      return {}
+    },
+    computed: {
+//      user () {
+//        return this.$store.state.option.user
+//      },
+//      enterprise () {
+//        let ens = this.user.data.enterprises
+//        if (ens && ens.length) {
+//          return ens.find(item => item.current) || {enName: '个人账户'}
+//        } else {
+//          return {enName: '个人账户'}
+//        }
+//      },
+//      sortEnterprises () {
+//        let ens = this.user.data.enterprises
+//        if (ens && ens.length) {
+//          ens.sort(function (a, b) {
+//            return b.lastLoginTime - a.lastLoginTime
+//          })
+//        }
+//        return ens
+//      },
+//      url () {
+//        return this.$store.state.option.url
+//      }
+    },
+    methods: {
+//      logout () {
+//        this.$http.get('/logout/crossBefore').then(response => {
+//          if (response.data) {
+//            window.location.href = response.data.logoutUrl + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
+//          }
+//        })
+//      },
+//      onLoginClick () {
+//        this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
+//          if (response.data) {
+//            window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
+//          }
+//        })
+//      },
+//      onRegisterClick () {
+//        this.$http.get('/register/page').then(response => {
+//          if (response.data) {
+//            window.location.href = response.data.content
+//          }
+//        })
+//      },
+//      // 切换当前企业
+//      switchEnterprise (en) {
+//        this.showEnterpriseToggle = false
+//        this.$http.get(`/user/authentication/${en.uu}`).then(() => {
+//          this.$store.dispatch('loadUserInfo')
+//          window.location.href = '/'
+//        })
+//      },
+//      toVendor: function () {
+//        let isSelf = true
+//        let tempEnterprise = {}
+//        let ens = this.user.data.enterprises
+//        if (ens && ens.length) {
+//          ens.forEach(function (item) {
+//            if (item.current) {
+//              isSelf = false
+//              tempEnterprise = item
+//            }
+//          })
+//        } else {
+//          isSelf = true
+//        }
+//        if (isSelf) {
+//          window.location.href = '/register-saler'
+//        } else {
+//          if (tempEnterprise.isVendor === 313) {
+//            window.location.href = '/vendor#/index'
+//          } else {
+//            window.location.href = '/register-saler'
+//          }
+//        }
+//      }
+    }
+  }
+</script>
+<style lang="scss" scoped type="text/scss">
+  @import '~assets/scss/mixins';
+  @import '~assets/scss/variables';
+
+  $nav-height: 60px;
+  $nav-boxshadow: 2px 2px 5px rgba(0,0,0,.12);
+  $nav-color: #3c3c3c;
+  .f-nav{
+    display:inline-block;
+    margin-left:30px;
+    padding-top:15px;
+  }
+  .menu-item{
+    font-size: 14px;
+    color:#999!important;
+  }
+  .menu-item.nuxt-link-active, .menu-item:hover{
+    color:#333!important;
+    background: #eeeeee;
+  }
+  .header .navbar{
+    min-height: inherit;
+    border-radius: 0;
+  }
+  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu li span,.header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu li a{
+    font-size: 12px;
+  }
+  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu .menu-item a{
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 25px;
+  }
+  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu .menu-item{
+    height: 30px;
+  }
+  .dropdown-menu>li>a{
+    padding: 0;
+    line-height: 30px;
+  }
+  .dropdown-menu>li a:hover{
+    background: none;
+    text-decoration: underline !important;
+  }
+  .header {
+    height: $nav-height;
+
+  .navbar {
+    width: 100%;
+    height: 100%;
+    font-size: $font-size-small;
+    background-color: $black-light;
+    box-shadow: $nav-boxshadow;
+    -o-box-shadow: $nav-boxshadow;
+    -moz-box-shadow: $nav-boxshadow;
+    -webkit-box-shadow: $nav-boxshadow;
+
+  .navbar-container {
+
+  .item-wrap {
+    display: inline-block;
+  }
+
+  .item {
+    color: $nav-color;
+    display: inline-block;
+    height: $nav-height;
+    line-height: $nav-height;
+  }
+
+  a {
+    position: relative;
+    color: $nav-color;
+    font-weight: bold;
+    font-size: 16px;
+    > span:before{
+        content: '';
+        position: absolute;
+        top: 5px;
+        left: 16px;
+        width: 1px;
+        height: 14px;
+        background: #bfbfbf;
+      }
+  }
+
+  .navbar-header {
+    float: left;
+
+  .navbar-logo {
+    margin-bottom: 2px;
+  }
+
+  .navbar-slogan {
+    margin-left: $sm-pad;
+  }
+
+  }
+
+  .navbar-right {
+    float: right;
+
+  .item {
+    padding: 0 $pad;
+  }
+
+  .dropdown {
+  .dropdown-toggle {
+    line-height: $nav-height;
+    border-left: 1px solid $black-light;
+    border-right: 1px solid $black-light;
+    height: 35px;
+  a {
+    margin-left: 15px;
+    float: right;
+  &:hover {
+     color: $red !important;
+   }
+  }
+  &:hover {
+     border-left: 1px solid #999;
+     border-right: 1px solid #999;
+   }
+  span {
+    display: inline-block;
+    max-width: 190px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    float: right;
+  }
+  }
+  .menu-item-first {
+    background: #eee;
+    padding: 0 12px;
+    line-height: 30px;
+    font-size: 12px;
+  >span:nth-child(1) {
+     cursor: default;
+     font-weight: bold;
+   }
+  input {
+    width: 174px;
+    height: 24px;
+    margin-left: 35px;
+    background: #fff;
+    border: 1px solid #5078cb;
+    padding-left: 4px;
+  }
+  .search-enterprise {
+    display: inline-block;
+    width: 36px;
+    height: 24px;
+    color: #fff;
+    background: #5078cb;
+    text-align: center;
+    line-height: 24px;
+    cursor: pointer;
+  }
+  }
+
+  .dropdown-menu {
+    padding: 0 6px 13px;
+    margin:0;
+    border-radius: 0;
+    right: unset;
+    background: #fff;
+    border: 1px solid #999999;
+    border-top: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+
+  ::-webkit-scrollbar {
+    background: #f6f6f6;
+  }
+
+  ul {
+    max-height: 300px;
+    overflow-y: auto;
+    background: #f6f6f6;
+  }
+
+  .menu-item {
+    padding: 0 12px;
+  a {
+    color: #333;
+    max-width: 300px;
+    line-height: 30px;
+    width: auto;
+  &:hover {
+     color: #5078cb;
+     text-decoration: none!important;
+   }
+  }
+  }
+  }
+
+  &:hover {
+     background-color: $white;
+
+  .dropdown-toggle {
+    color: $text;
+  }
+  a {
+    color: $text
+  }
+  }
+  }
+  }
+  }
+  }
+  }
+</style>

components/default/index.js

@@ -1,6 +1,7 @@
 import AccountCenterHeader from './AccountCenterHeader.vue'
+import CloudHeader from './CloudHeader.vue'
 import LoginHeader from './LoginHeader.vue'
 import CommonFooter from './CommonFooter.vue'
 import ManualAppealHeader from './ManualAppealHeader.vue'
 
-export { AccountCenterHeader, LoginHeader, CommonFooter, ManualAppealHeader }
+export { AccountCenterHeader, CloudHeader, LoginHeader, CommonFooter, ManualAppealHeader }

layouts/cloud.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <cloud-header></cloud-header>
+    <nuxt/>
+  </div>
+</template>
+<script>
+  import {CloudHeader} from '~components/default'
+  export default {
+    name: 'cloud',
+    components: {
+      CloudHeader
+    }
+  }
+</script>
+<style>
+html {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+</style>

layouts/main.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="default">
+    <accountCenter-header/>
+    <nuxt/>
+    <div class="footer">
+      <common-footer/>
+    </div>
+  </div>
+</template>
+<script>
+  import {CommonFooter, AccountCenterHeader} from '~components/default'
+  export default {
+    name: 'default',
+    components: {
+      CommonFooter,
+      AccountCenterHeader
+    }
+  }
+</script>
+<style>
+  html {
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 16px;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+  }
+
+  *, *:before, *:after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .button--green {
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid #3b8070;
+    color: #3b8070;
+    text-decoration: none;
+    padding: 10px 30px;
+  }
+
+  .button--green:hover {
+    color: #fff;
+    background-color: #3b8070;
+  }
+
+  .button--grey {
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid #35495e;
+    color: #35495e;
+    text-decoration: none;
+    padding: 10px 30px;
+    margin-left: 15px;
+  }
+
+  .button--grey:hover {
+    color: #fff;
+    background-color: #35495e;
+  }
+  .footer{
+    margin-top:10px;
+  }
+</style>

pages/cloudcenter/enterprise/index.vue

@@ -0,0 +1,244 @@
+<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>
+              <tr>
+                <th>角色</th>
+                <th>用户名称</th>
+                <th>个人UU</th>
+                <th>手机号</th>
+                <th>邮箱</th>
+              </tr>
+              </thead>
+              <tbody id="memberTable">
+              <tr>
+                <td>管理员</td>
+                <td>李事业</td>
+                <td>U456</td>
+                <td>123456799+66</td>
+                <td>112456112@qq.com</td>
+              </tr>
+              </tbody>
+            </table>
+            <nav class="pages">
+              <ul id="pageMember" class="pagination">
+              </ul>
+            </nav>
+          </div>
+        </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>
+              <tr>
+                <th>操作</th>
+                <th>用户名称</th>
+                <th>个人UU</th>
+                <th>手机号</th>
+                <th>邮箱</th>
+              </tr>
+              </thead>
+              <tbody id="applyTable">
+              <tr>
+                <td>
+                  <button class="btn btn-apply">同意</button>
+                  <button class="btn btn-apply">拒绝</button>
+                </td>
+                <td>李事业</td>
+                <td>U456</td>
+                <td>123456799+66</td>
+                <td>112456112@qq.com</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td>李事业</td>
+                <td>U456</td>
+                <td>123456799+66</td>
+                <td>112456112@qq.com</td>
+              </tr>
+              </tbody>
+            </table>
+            <nav class="pages">
+              <ul id="pageApply" class="pagination">
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      layout: 'cloud'
+    }
+</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;
+  }
+
+  .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>

pages/cloudcenter/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="info">
+    <div class="w-over-box">
+      <div class="w-over">
+        <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>
+          <hr/>
+          <div class="row">
+            <div class="col-xs-3"><p>绑定手机</p></div>
+            <div class="col-xs-9"><span id="userTel"></span></div>
+          </div>
+          <div class="row">
+            <div class="col-xs-3"><p>绑定邮箱</p></div>
+            <div class="col-xs-9"><span id="userEmil"></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="w-over-box" id="usinfo">
+      <div class="w-over">
+        <div class="basic-info">
+          <h3><i class="business"></i><b id="spaceName"></b></h3>
+          <hr/>
+          <div class="row">
+            <div class="col-xs-3"><p>管理员</p></div>
+            <div class="col-xs-9"><span id="spaceAdminName"></span>  <a href="/changeAdmin/changeAdmin">更换</a></div>
+          </div>
+          <div class="row">
+            <div class="col-xs-3"><p>企业法人</p></div>
+            <div class="col-xs-9"><span id="spaceCorporation"></span></div>
+          </div>
+          <div class="row">
+            <div class="col-xs-3"><p>营业执照</p></div>
+            <div class="col-xs-9"><span id="spaceBusinessCode"></span></div>
+          </div>
+          <div class="row">
+            <div class="col-xs-3"><p>企业地址</p></div>
+            <div class="col-xs-9"><span id="spaceAddress"></span></div>
+          </div>
+          <input type="hidden" id="spaceAdminTel">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      layout: 'cloud'
+    }
+</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;
+  }
+
+  .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>

pages/overRegister/index.vue

@@ -0,0 +1,1353 @@
+<template>
+<div class="over-register">
+  <div class="x-content">
+    <div class="container">
+      <!-- 默认服务 Start -->
+      <div class="x-form-set-wrap">
+        <div class="x-form-set-header">
+          <h4 style="color: #5078cb">注册完成！</h4>
+        </div>
+        <div class="list-01">
+          <div class="comm-text">已为您的企业开通以下服务，点击了解详情</div>
+          <div class="service-list">
+            <a href="https://www.usoftchina.com/b2b" target="_blank" title="B2B商务"><img src="/img/over_account/service-b2b.jpg" /></a>
+            <a href="http://www.usoftmall.com/" target="_blank" title="优软商城"><img src="/img/over_account/service-b2c.jpg" /></a>
+            <a href="http://usoftchina.com/uu" target="_blank" title="UU互联"><img src="/img/over_account/service-uu.jpg" /></a>
+            <a href="http://job.uuzcc.com/" target="_blank" title="优软人才网"><img src="/img/over_account/service-uuzcc.jpg" /></a>
+          </div>
+          <a href="http://www.ubtob.com/" class="target-btn" title="跳转至优软云">跳转至优软云>></a>
+        </div>
+      </div>
+      <!-- 服务 Start -->
+      <div class="x-form-set-wrap">
+        <div class="list-02">
+          <div class="hr-1"></div>
+          <div class="title">您还可以开通体验以下服务：</div>
+          <div class="list-line">
+            <dl>
+              <dt><img src="/img/over_account/service-saas.jpg" title="SAAS优企云服"/></dt>
+              <dd>零成本投入 免费使用 / 全流程管理 简单易用
+
+              </dd>
+              <dd>优软服务连接企业与企业 / 跨地域 移动办公
+              </dd>
+              <dd class="margin-top">
+                <a href="http://make-guest.saas.ubtob.com/">立即体验</a>
+                <a href="https://account.ubtob.com/userspace/applyApp?appId=saas">立即开通</a>
+              </dd>
+            </dl>
+          </div>
+          <div class="list-line">
+            <dl>
+              <dt><img src="/img/over_account/service-uas.jpg" title="UAS系统"/></dt>
+              <dd>联合应用系统，一站式企业管理解决方案。</dd>
+              <dd>供应链 / 生产制造 / 财务管理 / 客户关系 / 移动办公 / 人力资源 / 项目管理
+              </dd>
+              <dd class="margin-top">售前服务热线：<em>400-830-1818</em></dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="x-content">
+    <div class="container">
+      <div class="w-over-top">
+        <div class="w-over">
+          <h1>注册完成</h1>
+          <hr>
+          <p>已为您开通以下服务，点击了解详情</p>
+          <div class="link-list">
+            <div class="row">
+              <div class="col-xs-3">
+                <a class="thumbnail item" href="http://www.usoftmall.com" target="_blank">
+                  <img src="/img/over_account/uas_mall.png">
+                  <div class="caption">
+                    <span>优软商城</span>
+                  </div>
+                </a>
+              </div>
+              <div class="col-xs-3">
+                <a class="thumbnail item" href="http://usoftchina.com/uu" target="_blank">
+                  <img src="/img/over_account/UUhulian.png">
+                  <div class="caption">
+                    <span>UU互联</span>
+                  </div>
+                </a>
+              </div>
+              <div class="col-xs-3">
+                <a class="thumbnail item" href="http://job.uuzcc.com" target="_blank">
+                  <img src="/img/over_account/UUZCC.png">
+                  <div class="caption">
+                    <span>优软人才网</span>
+                  </div>
+                </a>
+              </div>
+              <div class="col-xs-3">
+                <a class="thumbnail item" href="http://www.uuzcc.com/" target="_blank">
+                  <img src="/img/over_account/ZHONGCHUANG.png">
+                  <div class="caption">
+                    <span>UU众创</span>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+          <a href="http://www.ubtob.com/">跳转至优软云 ></a>
+        </div>
+      </div>
+      <div class="w-over-bottom">
+        <div class="w-over">
+          <p>绑定企业后，您还可以开通体验以下服务</p>
+          <a href="/sso/apply/userspace?mobile=${mobile}">立即绑定企业</a>
+          <div class="media">
+            <div class="media-left media-middle">
+              <a href="https://www.usoftchina.com/b2b">
+                <img class="media-object" src="/img/over_account/B2B.png">
+                <span>B2B商务</span>
+              </a>
+            </div>
+            <div class="media-body">
+              <h4 class="media-heading">B2B商务平台</h4>
+              <p>面向制造业和流通业的垂直B2B</p>
+              <p>建立了生产商与供应商之间形成的供需关系，通过一系列工具辅助供需双方形成交易。</p>
+            </div>
+          </div>
+          <div class="media">
+            <div class="media-left media-middle">
+              <a href="https://www.ubtob.com/saas/about">
+                <img class="media-object" src="/img/over_account/SaaS.png">
+                <span>优企云服</span>
+              </a>
+            </div>
+            <div class="media-body">
+              <h4 class="media-heading">优企云服</h4>
+              <p>零成本投入，免费使用。 全流程管理，简单易用 </p>
+              <p>优软服务连接企业之间，跨地域，移动办公。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+    export default {
+      name: 'overRegister',
+      layout: 'main'
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+  .over-register{
+    background: #eee;
+  }
+  .over-register .container{
+    background: #fff;
+  }
+</style>
+<style scoped type="text/scss" lang="scss">
+  .x-content {
+    position: relative;
+    padding-top: 50px;
+  }
+  .w-over-top {
+    padding-top:35px;
+    padding-bottom:50px;
+    margin-bottom:15px;
+    background: #fff;
+  }
+  .w-over-top .w-over>h1{
+
+    font-size: 30px;
+    text-align: center;
+    color:#11b200;
+  }
+  .w-over-top hr{
+    border-top:1px solid #dcdcdc;
+  }
+  .w-over-top .w-over>p#applyText{
+    display:none;
+    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>
+<style scoped type="text/scss" lang="scss">
+  /*content*/
+  .x-step {
+    background: #e8e8e8;
+    text-align: center;
+    margin-left: 0;
+    width: 100%;
+    margin: 0 auto;
+    height: 34px;
+    margin-bottom: 10px;
+  }
+  .x-step-lg {
+    font-size: 18px
+  }
+  .x-step-2x li {
+    width: 50%;
+    float: left;
+    cursor: pointer;
+    font-weight: bold;
+  }
+  .x-step-2x li a:hover {
+    color: #666;
+    cursor: pointer;
+  }
+  .x-step-3x li {
+    width: 33.33%;
+    float: left;
+  }
+  .x-step li {
+    padding: 0;
+    height: 34px;
+    line-height: 34px;
+    position: relative
+  }
+  .x-step-lg li {
+    height: 46px;
+    line-height: 46px;
+  }
+  .x-step li.active {
+    background: #5078cb;
+    color: #fff;
+  }
+  .x-step li.active:before,.x-step li.active:after,.x-step .x-split:before,.x-step .x-split:after {
+    position: absolute;
+    top: 0;
+    display: inline-block;
+    border-top: 17px solid transparent;
+    border-bottom: 17px solid transparent;
+    border-left: 17px solid transparent;
+    content: '';
+  }
+  .x-step-lg li.active:before,.x-step-lg li.active:after,.x-step-lg .x-split:before,.x-step-lg .x-split:after {
+    border-width: 23px
+  }
+  .x-step li.active:after {
+    border-left-color: #5078cb;
+    right: -17px;
+  }
+  .x-step-lg li.active:after {
+    right: -23px;
+  }
+  .x-step li.active:before {
+    border-left-color: #e8e8e8;
+    left: -17px;
+    z-index: 3
+  }
+  .x-step-lg li.active:before {
+    left: -23px;
+  }
+  .x-step strong {
+    font-style: italic;
+    font-size: 120%;
+    color: #777;
+    margin-right: 5px;
+    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
+  }
+  .x-step li.active strong {
+    color: #fff;
+  }
+  .x-step .x-split {
+    float: right;
+  }
+  .x-step .x-split:after {
+    border-left-color:#f5f8fa;
+    right:-20px;
+    z-index:1
+  }
+  .x-step-lg .x-split:after {
+    right:-26px
+  }
+  .x-step .x-split:before {
+    border-left-color:#e8e8e8;
+    right:-18px;
+    z-index:2
+  }
+  .x-step-lg .x-split:before {
+    right:-24px
+  }
+  .x-step li:first-child:before,.x-step li:last-child:after {
+    border-width:0
+  }
+
+  .x-step li:nth-of-type(1) .x-split:after{
+    border-left-color: #e8e8e8;
+    right: -18px;
+    z-index: 1;
+  }
+  .x-step li:nth-of-type(1) .x-split:before{
+    border-left-color: #5078cb;
+    right: -17px;
+    z-index: 4;
+  }
+  .x-step li:nth-of-type(2).active .x-split:after{
+    border-left-color: #e8e8e8;
+    right: -18px;
+    z-index: 1;
+  }
+  .x-step li:nth-of-type(2).active .x-split:before{
+    border-left-color: #5078cb;
+    right: -17px;
+    z-index: 4;
+  }
+  .x-step li:nth-of-type(1).active:after,.x-step li:nth-of-type(2).active:before,.x-step li:nth-of-type(3).active:before{
+    border-width:0
+  }
+  .x-alert-warning {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+    border-radius: 0
+  }
+  .x-alert-default {
+    border-color: #ddd;
+    border-radius: 0
+  }
+  .x-menu {
+    list-style-type: disc;
+    list-style-position: inside;
+    padding: 0;
+  }
+
+  .x-form-wrap {
+    padding: 20px;
+    background: #fff;
+    border: 1px solid #e4ecf3;
+    padding-bottom: 40px;
+  }
+
+  .x-form-lg .form-group{
+    margin-bottom: 30px
+  }
+
+  .x-input,.x-input-blank {
+    border-color: #ccc;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .x-input:focus,.x-input-blank:focus {
+    border-color: #5078cb;
+    box-shadow: none;
+  }
+
+  .x-input:focus+span,.x-input:focus+span+span {
+    color: #5078cb;
+  }
+  .x-input:focus+span>.x-btn {
+    background: #5078cb;
+    border-color: #5078cb;
+    color: #fff
+  }
+  .x-input.x-error,.x-input.x-error:focus {
+    border-color: #f4645f;
+  }
+  .x-input-group .input-group-addon {
+    border-radius: 0
+  }
+  .x-input-blank {
+    border-width:  0;
+    padding: 0;
+    height: 25px;
+    text-align: center;
+    font-size: 14px
+  }
+  .x-input-blank:focus {
+    text-align: left
+  }
+
+  .x-required:before{
+    position: relative;
+    bottom: -5px;
+    content: "* ";
+    font-size: 18px;
+    color: #f4645f
+  }
+  .x-form .control-label {
+    padding-top: 6px;
+  }
+  .x-input-addon {
+    padding-top: 6px;
+    margin-bottom: 0;
+  }
+  /*.x-text-help {
+      color: #777;
+  }*/
+  .x-text-help{
+    color: green;
+  }
+  .x-text-help i{
+    font-size: 16px;
+  }
+  .x-text-tip{
+    color: #777;
+  }
+  .x-text-error {
+    color: #f40;
+  }
+  .x-text-error:before {
+    content: "\e086";
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-right: 5px;
+  }
+  .x-form input[type=checkbox] {
+    margin-top: 6px
+  }
+  .x-form input[type=radio] {
+    margin-top: 5px
+  }
+  .x-form .form-control[readonly] {
+    background-color: transparent;
+  }
+  .x-form .dropdown-menu {
+    left: 15px;
+    margin-top: -1px;
+    border-color: #e4ecf3;
+    border-radius: 0;
+    padding: 0
+  }
+  .x-form-set-header {
+    position: relative;
+    margin-bottom: 45px;
+    margin-top: 50px;
+  }
+  .x-form-set-header h4{
+    font-size: 20px;
+    font-weight: 400;
+    color: #888;
+    margin-top: 0;
+    padding-bottom: 8px;
+    text-align: center;
+    /*border-bottom: 1px solid #ebebeb;*/
+  }
+  .logo-text{
+    font-size: 12px;
+    float: left;
+    width: 180px;
+    position: absolute;
+    top: 142px;
+    left: 11px;
+    text-align: center;
+    color: #999;
+    line-height: 20px;
+  }
+  .next-btn{
+    width: 175px;
+    padding: 0;
+    height: 35px;
+    line-height: 35px;
+    border-radius: 0;
+    margin-left: 130px;
+    font-family: "微软雅黑";
+  }
+  .next02{
+    margin-top: 45px;
+  }
+  .next02 .next-btn{
+    margin-left: 40px;
+    width: 153px;
+  }
+  .next02 .col-sm-4:first-child .next-btn{
+    color: #5078cb;
+    border: #5078cb 1px solid;
+    background: none;
+    margin-left: 149px;
+  }
+  .tags-list div,.no-tags,.tags-lists span{
+    float: left;
+    padding: 2px 14px;
+    line-height: 20px;
+    border: #5078cb 1px solid;
+    border-radius: 5px;
+    font-size: 12px;
+    color: #5078cb;
+    margin: 0 3px;
+  }
+  .tags-list div{
+    margin-top: 5px;
+  }
+  .tags-lists em{
+    font-style: inherit;
+    margin-left: 148px;
+    font-size: 12px;
+    color: #999;
+  }
+  #addTag{
+    background: #fff;
+    color: #5078cb;
+    position: absolute;
+    left: -83px;
+    top: 3px;
+    font-size: 12px;
+    line-height: 28px;
+    display: inline-block;
+    padding-right: 10px;
+  }
+  #addTag:hover{
+    cursor: pointer;
+  }
+  #addTag:focus,#addTag:active{
+    border: none;
+  }
+  .tags-lists{
+    margin-top: 10px;
+  }
+  .no-tags{
+    background: #5078cb;
+    color: #fff;
+    margin-top: 5px;
+  }
+  .x-form-set-header:after {
+    content: "";
+    width: 120px;
+    height: 2px;
+    background: #5078cb;
+    position: absolute;
+    /*left: 0;*/
+    left: 528px;
+    bottom: 0;
+  }
+  .x-form-set {
+    margin-left: 50px
+  }
+  .x-has-feedback-left {
+    position: relative;
+  }
+
+  .x-form-control-feedback-left,.x-form-control-feedback-right {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    display: block;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    color: #999;
+    font-size: 14px
+  }
+  button.x-form-control-feedback-left,button.x-form-control-feedback-right {
+    padding: 5px 10px;
+    line-height: 24px;
+    background: #5078cb;
+    color: #ffffff;
+    border-radius: 0;
+  }
+  button.x-form-control-feedback-left:hover,button.x-form-control-feedback-right:hover {
+    background: #3E64A4;
+    color: #ffffff;
+  }
+  .x-form-control-feedback-left {
+    left: 15px
+  }
+  .x-form-control-feedback-right {
+    right: 15px
+  }
+  .x-has-feedback-left>.form-control {
+    padding-left: 25px;
+  }
+  .x-has-feedback-left>.form-control{
+    padding-right: 25px;
+  }
+  .x-floating-wrap {
+    position: fixed;
+    z-index: 99998;
+    background: #000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.5;
+  }
+  .x-floating {
+    position: fixed;
+    z-index: 99999;
+    top: 60px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .x-floating img {
+    margin: auto auto;
+    max-width: 750px;
+    max-height: 543px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+  }
+
+  .x-close-wrap {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 100000;
+    width: 120px;
+    height: 120px;
+    margin: -60px -60px 0 0;
+    border-radius: 100%;
+    background: #000;
+    opacity: .3
+  }
+
+  .x-close-wrap a {
+    position: absolute;
+    left: 25px;
+    bottom: 25px;
+    font-size: 42px;
+    color: #fff
+  }
+
+  .x-close-wrap:hover {
+    opacity: .7
+  }
+
+  .x-input-file-wrap {
+    position: relative;
+    overflow: hidden;
+    text-align: left;
+  }
+
+  .x-input-file-wrap input {
+    position: absolute;
+    font-size: 100px;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    opacity: 0;
+  }
+
+  .x-union-menu {
+    width: 600px
+  }
+  .x-union-header>div{
+    background: #f5f8fa;
+    font-weight: 700;
+    border-bottom: 1px solid #e4ecf3;
+  }
+  .x-union-header>div,.x-union-list>ul {
+    float: left;
+    width: 121px;
+    border-right: 1px solid #e4ecf3;
+  }
+  .x-union-list>ul {
+    height: 200px;
+    margin: 0;
+    overflow-y: auto;
+  }
+  .x-union-menu .x-item-ext {
+    float: left;
+    width: 235px;
+  }
+  .x-union-list .x-item-ext {
+    padding: 10px
+  }
+  .x-union-header>div:last-child {
+    border-right-width: 0
+  }
+  .x-union-header>div,.x-union-list>ul>li {
+    padding: 2px 10px;
+    cursor: pointer;
+  }
+  .x-union-list>ul>li:hover,.x-union-list>ul>li.active {
+    background: #fee9c7;
+  }
+
+  .x-app-list {
+    margin-left: 50px
+  }
+  .x-app-list li{
+    padding: 7px;
+  }
+  .x-image{
+    position: relative;
+    overflow: hidden
+  }
+  .help-block .x-image{
+    max-width: 152px;
+    margin-right: 15px
+  }
+  .x-app-list .x-image {
+    width: 180px;
+    height: 110px;
+  }
+  .x-image .thumbnail {
+    border-radius: 0
+  }
+  .help-block .x-image .thumbnail{
+    margin-bottom: 0
+  }
+  .x-image a.thumbnail:hover,.x-image a.thumbnail:focus {
+    border-color: #ddd;
+  }
+  .x-image b,.x-image span {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    font-weight: 700;
+    padding-top: 50px;
+    -webkit-transition: top 0.2s ease-in-out;
+    -o-transition: top 0.2s ease-in-out;
+    transition: top 0.2s ease-in-out;
+    z-index: 1
+  }
+  .x-image b {
+    background: #000;
+    opacity: .3;
+  }
+  .help-block .x-image span {
+    padding-top: 20px;
+  }
+  .x-image:hover b,.x-image:hover span {
+    top: 0;
+  }
+  .x-thumbnail-empty {
+    padding: 10px 30px;
+    text-align: center;
+  }
+  .x-thumbnail-empty i {
+    position: inherit;
+    font-size: 28px;
+    display: block;
+    margin: 20px auto 10px
+  }
+  .x-app-list li h4 {
+    text-align: center;
+    height: 34px;
+    line-height: 34px;
+    font-weight: 600;
+    padding: 0 5px;
+    border: 1px solid #ddd;
+    background: #e8e8e8
+  }
+  .x-app-list li.active h4 {
+    background: #f5f8fa
+  }
+  .x-app-list li h4>.x-btn-switch {
+    float: right;
+    margin: 8px 12px 0 0
+  }
+  .x-app-list li h4 .x-label {
+    float: right;
+    margin-top: 7px
+  }
+
+  .x-empty {
+    margin: 0 auto;
+    padding-top: 10%;
+    padding-bottom: 15%;
+    text-align: center;
+    text-shadow: 0 2px 0 #fff,0 -2px 0 #f8f6f2;
+    line-height: normal;
+  }
+
+  .x-empty i {
+    font-size: 120px;
+    color: #d9d7d3;
+  }
+
+  .x-empty p {
+    margin-top: 30px;
+    color: #92908d;
+    text-shadow: 0 0 0;
+  }
+  /*table*/
+  .x-table th,.x-table td{
+    text-align: center;
+  }
+  .x-table thead>tr>th{
+    background-color: #f5f8fa;
+    border-bottom-width: 0
+  }
+  /*footer*/
+  .x-footer {
+    padding: 30px 0;
+  }
+  .x-copyright {
+    font-size: 12px
+  }
+  /*loading*/
+  .x-loading-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    z-index: 99998;
+    opacity: .5
+  }
+
+  .x-loading {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    margin: -120px 0 0 -120px;
+    width: 240px;
+    height: 240px;
+    color: #f4645f;
+    z-index: 99999;
+  }
+
+  .top-center .x-loading {
+    top: 0;
+    left: 50%;
+  }
+
+  .right-center .x-loading {
+    top: 50%;
+    left: 100%;
+  }
+
+  .bottom-center .x-loading {
+    top: 100%;
+    left: 50%;
+  }
+
+  .x-loading:after {
+    display: table;
+    clear: both;
+    line-height: 0;
+    content: ""
+  }
+
+  .x-loading>div {
+    width: 240px;
+    height: 240px;
+  }
+
+  .x-loading>div:nth-child(2) {
+    -webkit-animation-delay: .2s;
+    animation-delay: .2s;
+  }
+
+  .x-loading>div:nth-child(3) {
+    -webkit-animation-delay: .4s;
+    animation-delay: .4s;
+  }
+
+  .x-loading>div {
+    position: absolute;
+    top: 60px;
+    left: 60px;
+    float: left;
+    width: 120px;
+    height: 120px;
+    border-radius: 100%;
+    opacity: 0;
+    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
+    animation: ball-scale-multiple 1s 0s linear infinite;
+  }
+
+  .x-loading>div {
+    box-sizing: content-box;
+    background: #fff;
+    border: 1px solid #5078cb;
+  }
+
+  @-webkit-keyframes ball-scale-multiple {
+    0% {
+      opacity:0;
+      -webkit-transform:scale(0);
+      transform:scale(0)
+    }
+    5% {
+      opacity:.75
+    }
+    100% {
+      opacity:0;
+      -webkit-transform:scale(1);
+      transform:scale(1)
+    }
+  }
+
+  @keyframes ball-scale-multiple {
+    0% {
+      opacity:0;
+      -webkit-transform:scale(0);
+      transform:scale(0)
+    }
+    5% {
+      opacity:.75
+    }
+    100% {
+      opacity:0;
+      -webkit-transform:scale(1);
+      transform:scale(1)
+    }
+  }
+  /*scrollbar*/
+  ::-webkit-scrollbar {
+    width: 10px
+  }
+
+  ::-webkit-scrollbar:horizontal {
+    height: 12px !important;
+  }
+
+  .x-scroller-horizontal {
+    height: 12px !important;
+    border: none;
+  }
+  /* Track */
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: rgba(231, 231, 231, 0.8);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  }
+
+  ::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(231, 231, 231, 0.4);
+  }
+
+  ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active {
+    background-color: #999
+  }
+  /*combo button*/
+  .x-listbox {
+    position: relative;
+    min-width: 100px;
+  }
+
+  .x-listbox .dropdown-toggle,.x-listbox .dropdown-menu {
+    padding: 0;
+    min-width: 100%;
+  }
+
+  .x-listbox a,.x-listbox a:hover {
+    text-decoration: none;
+    font-size: inherit;
+  }
+
+  .x-listbox .dropdown-menu li {
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+
+  .x-listbox .dropdown-menu li.active {
+    background: #fee9c7
+  }
+
+  .x-listbox .dropdown-menu li:hover {
+    background: #e8e8e8
+  }
+  /*progress*/
+  .x-progress-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 40;
+    opacity: 1;
+    -webkit-transition: opacity 0.4s linear 0.4s;
+    transition: opacity 0.4s linear 0.4s;
+  }
+  .x-progress-topbar .progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 5px;
+    background-image: -webkit-linear-gradient(left,#77b6ff,#5bd8ff);
+    box-shadow: 0 0 10px rgba(119,182,255,0.7);
+    -webkit-transition: width 0.4s ease;
+    transition: width 0.4s ease;
+  }
+
+  .list-01{
+    width: 100%;
+    margin: 0 auto;
+    padding-left: 90px;
+  }
+  .list-01 .comm-text{
+    width: 100%;
+    margin: 0 auto;
+    line-height: 20px;
+    font-size: 14px;
+    margin-bottom: 16px;
+  }
+  .list-01 .service-list{
+    width: 100%;
+    margin: 0 auto;
+    height: 100px;
+    margin-bottom: 25px;
+  }
+  .list-01 .service-list a{
+    display: inline-block;
+    width: 170px;
+    height: 100px;
+    float: left;
+    margin-left: 25px;
+  }
+  .list-01 .service-list a:first-child{
+    margin-left: 0;
+  }
+  .list-01 .target-btn{
+    color: #5078cb;
+    font-style: italic;
+  }
+  .list-01 .target-btn:hover{
+    font-weight: bold;
+    text-decoration: underline;
+  }
+  .list-02{
+    width: 100%;
+    margin: 0 auto;
+    padding-left: 90px;
+    display: inline-block;
+  }
+  .list-02 .hr-1{
+    width: 700px;
+    height: 1px;
+    background: #e8e8e8;
+    margin: 60px 0 25px 0;
+  }
+  .list-02 .title{
+    width: 100%;
+    margin: 0 auto;
+    line-height: 20px;
+    font-size: 18px;
+    margin-bottom: 25px;
+    color: #999;
+  }
+  .list-02 .x-app-list{
+    margin-left: 0;
+  }
+  .list-02 .x-app-list li{
+    float: left;
+  }
+  .list-02 .list-line{
+    margin: 5px 0 50px 0
+  }
+ .list-02 .list-line dl{
+    width: 100%;
+    margin: 0 auto;
+    height: 100px;
+  }
+  .list-02 .list-line dl dt{
+    float: left;
+    margin-right: 33px;
+  }
+  .list-02 .list-line dl dt img{
+    width: 170px;
+    height: 100px;
+  }
+  .list-02 .list-line dl dd{
+    font-size: 12px;
+    color: #000;
+    line-height: 22px;
+  }
+  .list-02 .list-line dl dd a{
+    display: inline-block;
+    width: 75px;
+    height: 28px;
+    line-height: 28px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    border-radius: 4px;
+    margin-left: 20px;
+    background: #5078cb;
+    float: left;
+  }
+  .list-02 .list-line dl dd a:first-child{
+    border: #5078cb 1px solid;
+    color: #5078cb;
+    margin-left: 0;
+    background: none;
+  }
+  .list-02 .list-line dl dd em{
+    font-size: 20px;
+    color: #5078cb;
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+  .list-02 .list-line dl dd.margin-top{
+    margin-top: 25px;
+  }
+  .list-02 .list-line dl dd a:hover{
+    background: #3f8bcb;
+    color: #fff;
+  }
+  .list-02 img:hover,.list-01 img:hover{
+    opacity: .95;
+  }
+  .help-block .x-image .upload-logo{
+    width: 130px;
+    height: 130px;
+    overflow: hidden;
+    padding: 0;
+    border: none;
+  }
+  .help-block .x-image .upload-logo p{
+    margin: 0;
+  }
+  .select-dot{
+    position: relative;
+  }
+  .x-step .reg-self:after {
+    content: '';
+    position: absolute;
+    right: -10px;
+    width: 0;
+    height: 0;
+    border-top: 34px solid #e8e8e8;
+    border-right: 10px solid transparent;
+    z-index: 10;
+  }
+
+</style>