diff --git a/src/assets/img/city/about.png b/src/assets/img/city/about.png
new file mode 100644
index 0000000..a846034
Binary files /dev/null and b/src/assets/img/city/about.png differ
diff --git a/src/assets/img/city/banner.png b/src/assets/img/city/banner.png
new file mode 100644
index 0000000..ea7fb69
Binary files /dev/null and b/src/assets/img/city/banner.png differ
diff --git a/src/assets/img/city/bus1.png b/src/assets/img/city/bus1.png
new file mode 100644
index 0000000..765921c
Binary files /dev/null and b/src/assets/img/city/bus1.png differ
diff --git a/src/assets/img/city/bus2.png b/src/assets/img/city/bus2.png
new file mode 100644
index 0000000..7129bde
Binary files /dev/null and b/src/assets/img/city/bus2.png differ
diff --git a/src/assets/img/city/bus3.png b/src/assets/img/city/bus3.png
new file mode 100644
index 0000000..6ea59ff
Binary files /dev/null and b/src/assets/img/city/bus3.png differ
diff --git a/src/assets/img/city/profit-bg.png b/src/assets/img/city/profit-bg.png
new file mode 100644
index 0000000..791e011
Binary files /dev/null and b/src/assets/img/city/profit-bg.png differ
diff --git a/src/assets/img/city/profit1.png b/src/assets/img/city/profit1.png
new file mode 100644
index 0000000..dae0dfe
Binary files /dev/null and b/src/assets/img/city/profit1.png differ
diff --git a/src/assets/img/city/profit2.png b/src/assets/img/city/profit2.png
new file mode 100644
index 0000000..6e28fa1
Binary files /dev/null and b/src/assets/img/city/profit2.png differ
diff --git a/src/assets/img/city/profit3.png b/src/assets/img/city/profit3.png
new file mode 100644
index 0000000..5d91f80
Binary files /dev/null and b/src/assets/img/city/profit3.png differ
diff --git a/src/assets/img/city/sup-bg.png b/src/assets/img/city/sup-bg.png
new file mode 100644
index 0000000..91eb4a2
Binary files /dev/null and b/src/assets/img/city/sup-bg.png differ
diff --git a/src/assets/img/city/sup1.png b/src/assets/img/city/sup1.png
new file mode 100644
index 0000000..aeeb9ff
Binary files /dev/null and b/src/assets/img/city/sup1.png differ
diff --git a/src/assets/img/city/sup2.png b/src/assets/img/city/sup2.png
new file mode 100644
index 0000000..017ca19
Binary files /dev/null and b/src/assets/img/city/sup2.png differ
diff --git a/src/assets/img/city/sup3.png b/src/assets/img/city/sup3.png
new file mode 100644
index 0000000..93f7b98
Binary files /dev/null and b/src/assets/img/city/sup3.png differ
diff --git a/src/assets/img/city/sup4.png b/src/assets/img/city/sup4.png
new file mode 100644
index 0000000..144ebbc
Binary files /dev/null and b/src/assets/img/city/sup4.png differ
diff --git a/src/assets/img/close.png b/src/assets/img/close.png
new file mode 100644
index 0000000..8478817
Binary files /dev/null and b/src/assets/img/close.png differ
diff --git a/src/assets/img/contact-bg.png b/src/assets/img/contact-bg.png
new file mode 100644
index 0000000..9ceb497
Binary files /dev/null and b/src/assets/img/contact-bg.png differ
diff --git a/src/assets/img/contact-info.png b/src/assets/img/contact-info.png
new file mode 100644
index 0000000..47aa15b
Binary files /dev/null and b/src/assets/img/contact-info.png differ
diff --git a/src/assets/img/data3.png b/src/assets/img/data3.png
new file mode 100644
index 0000000..1ee01f8
Binary files /dev/null and b/src/assets/img/data3.png differ
diff --git a/src/assets/img/dev/banner.png b/src/assets/img/dev/banner.png
new file mode 100644
index 0000000..fdb4bfc
Binary files /dev/null and b/src/assets/img/dev/banner.png differ
diff --git a/src/assets/img/dev/con-bg.png b/src/assets/img/dev/con-bg.png
new file mode 100644
index 0000000..dd723a5
Binary files /dev/null and b/src/assets/img/dev/con-bg.png differ
diff --git a/src/assets/img/dev/con1.png b/src/assets/img/dev/con1.png
new file mode 100644
index 0000000..966d550
Binary files /dev/null and b/src/assets/img/dev/con1.png differ
diff --git a/src/assets/img/dev/con2.png b/src/assets/img/dev/con2.png
new file mode 100644
index 0000000..1e3fa68
Binary files /dev/null and b/src/assets/img/dev/con2.png differ
diff --git a/src/assets/img/dev/con3.png b/src/assets/img/dev/con3.png
new file mode 100644
index 0000000..75e129d
Binary files /dev/null and b/src/assets/img/dev/con3.png differ
diff --git a/src/assets/img/dev/profit-bg1.png b/src/assets/img/dev/profit-bg1.png
new file mode 100644
index 0000000..fcc2528
Binary files /dev/null and b/src/assets/img/dev/profit-bg1.png differ
diff --git a/src/assets/img/dev/profit-bg2.png b/src/assets/img/dev/profit-bg2.png
new file mode 100644
index 0000000..c6378a0
Binary files /dev/null and b/src/assets/img/dev/profit-bg2.png differ
diff --git a/src/assets/img/dev/sup1.png b/src/assets/img/dev/sup1.png
new file mode 100644
index 0000000..48d7dc4
Binary files /dev/null and b/src/assets/img/dev/sup1.png differ
diff --git a/src/assets/img/dev/sup2.png b/src/assets/img/dev/sup2.png
new file mode 100644
index 0000000..490305d
Binary files /dev/null and b/src/assets/img/dev/sup2.png differ
diff --git a/src/assets/img/dev/sup3.png b/src/assets/img/dev/sup3.png
new file mode 100644
index 0000000..dc40d11
Binary files /dev/null and b/src/assets/img/dev/sup3.png differ
diff --git a/src/assets/img/index/banner1-text.png b/src/assets/img/index/banner1-text.png
new file mode 100644
index 0000000..75a2f39
Binary files /dev/null and b/src/assets/img/index/banner1-text.png differ
diff --git a/src/assets/img/index/banner1.png b/src/assets/img/index/banner1.png
new file mode 100644
index 0000000..762c809
Binary files /dev/null and b/src/assets/img/index/banner1.png differ
diff --git a/src/assets/img/index/banner2.png b/src/assets/img/index/banner2.png
new file mode 100644
index 0000000..a1d32d4
Binary files /dev/null and b/src/assets/img/index/banner2.png differ
diff --git a/src/assets/img/index/banner3.png b/src/assets/img/index/banner3.png
new file mode 100644
index 0000000..f759000
Binary files /dev/null and b/src/assets/img/index/banner3.png differ
diff --git a/src/assets/img/index/index1.png b/src/assets/img/index/index1.png
new file mode 100644
index 0000000..154a715
Binary files /dev/null and b/src/assets/img/index/index1.png differ
diff --git a/src/assets/img/index/index10.png b/src/assets/img/index/index10.png
new file mode 100644
index 0000000..bc6ca78
Binary files /dev/null and b/src/assets/img/index/index10.png differ
diff --git a/src/assets/img/index/index11.png b/src/assets/img/index/index11.png
new file mode 100644
index 0000000..259fb32
Binary files /dev/null and b/src/assets/img/index/index11.png differ
diff --git a/src/assets/img/index/index12.png b/src/assets/img/index/index12.png
new file mode 100644
index 0000000..1bbffca
Binary files /dev/null and b/src/assets/img/index/index12.png differ
diff --git a/src/assets/img/index/index13.png b/src/assets/img/index/index13.png
new file mode 100644
index 0000000..9e1a00d
Binary files /dev/null and b/src/assets/img/index/index13.png differ
diff --git a/src/assets/img/index/index14.png b/src/assets/img/index/index14.png
new file mode 100644
index 0000000..ed6281c
Binary files /dev/null and b/src/assets/img/index/index14.png differ
diff --git a/src/assets/img/index/index15.png b/src/assets/img/index/index15.png
new file mode 100644
index 0000000..d63e3b7
Binary files /dev/null and b/src/assets/img/index/index15.png differ
diff --git a/src/assets/img/index/index16.png b/src/assets/img/index/index16.png
new file mode 100644
index 0000000..f037644
Binary files /dev/null and b/src/assets/img/index/index16.png differ
diff --git a/src/assets/img/index/index17.png b/src/assets/img/index/index17.png
new file mode 100644
index 0000000..5dd283d
Binary files /dev/null and b/src/assets/img/index/index17.png differ
diff --git a/src/assets/img/index/index18.png b/src/assets/img/index/index18.png
new file mode 100644
index 0000000..a411830
Binary files /dev/null and b/src/assets/img/index/index18.png differ
diff --git a/src/assets/img/index/index19.png b/src/assets/img/index/index19.png
new file mode 100644
index 0000000..73ca46f
Binary files /dev/null and b/src/assets/img/index/index19.png differ
diff --git a/src/assets/img/index/index2.png b/src/assets/img/index/index2.png
new file mode 100644
index 0000000..cd393e8
Binary files /dev/null and b/src/assets/img/index/index2.png differ
diff --git a/src/assets/img/index/index20.png b/src/assets/img/index/index20.png
new file mode 100644
index 0000000..b481e8c
Binary files /dev/null and b/src/assets/img/index/index20.png differ
diff --git a/src/assets/img/index/index3.png b/src/assets/img/index/index3.png
new file mode 100644
index 0000000..0f3212a
Binary files /dev/null and b/src/assets/img/index/index3.png differ
diff --git a/src/assets/img/index/index4.png b/src/assets/img/index/index4.png
new file mode 100644
index 0000000..159be5a
Binary files /dev/null and b/src/assets/img/index/index4.png differ
diff --git a/src/assets/img/index/index5.png b/src/assets/img/index/index5.png
new file mode 100644
index 0000000..114d12b
Binary files /dev/null and b/src/assets/img/index/index5.png differ
diff --git a/src/assets/img/index/index6.png b/src/assets/img/index/index6.png
new file mode 100644
index 0000000..4375f8b
Binary files /dev/null and b/src/assets/img/index/index6.png differ
diff --git a/src/assets/img/index/index7.png b/src/assets/img/index/index7.png
new file mode 100644
index 0000000..a1712a1
Binary files /dev/null and b/src/assets/img/index/index7.png differ
diff --git a/src/assets/img/index/index8.png b/src/assets/img/index/index8.png
new file mode 100644
index 0000000..b68ca15
Binary files /dev/null and b/src/assets/img/index/index8.png differ
diff --git a/src/assets/img/index/index9.png b/src/assets/img/index/index9.png
new file mode 100644
index 0000000..9de1b11
Binary files /dev/null and b/src/assets/img/index/index9.png differ
diff --git a/src/assets/img/index/search.png b/src/assets/img/index/search.png
new file mode 100644
index 0000000..4991f3d
Binary files /dev/null and b/src/assets/img/index/search.png differ
diff --git a/src/assets/img/login-bg.png b/src/assets/img/login-bg.png
new file mode 100644
index 0000000..20d8507
Binary files /dev/null and b/src/assets/img/login-bg.png differ
diff --git a/src/assets/img/login/account.png b/src/assets/img/login/account.png
new file mode 100644
index 0000000..b98bdf6
Binary files /dev/null and b/src/assets/img/login/account.png differ
diff --git a/src/assets/img/login/code.png b/src/assets/img/login/code.png
new file mode 100644
index 0000000..b4e7efc
Binary files /dev/null and b/src/assets/img/login/code.png differ
diff --git a/src/assets/img/login/password.png b/src/assets/img/login/password.png
new file mode 100644
index 0000000..bec6c29
Binary files /dev/null and b/src/assets/img/login/password.png differ
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
index 8782314..d51fe86 100644
Binary files a/src/assets/img/logo.png and b/src/assets/img/logo.png differ
diff --git a/src/assets/img/love.png b/src/assets/img/love.png
new file mode 100644
index 0000000..93b0f7b
Binary files /dev/null and b/src/assets/img/love.png differ
diff --git a/src/assets/img/remove-gray.png b/src/assets/img/remove-gray.png
new file mode 100644
index 0000000..f8bf9f4
Binary files /dev/null and b/src/assets/img/remove-gray.png differ
diff --git a/src/assets/img/search-gray.png b/src/assets/img/search-gray.png
new file mode 100644
index 0000000..551dbc3
Binary files /dev/null and b/src/assets/img/search-gray.png differ
diff --git a/src/assets/img/shapes/shape1.png b/src/assets/img/shapes/shape1.png
new file mode 100644
index 0000000..5a36716
Binary files /dev/null and b/src/assets/img/shapes/shape1.png differ
diff --git a/src/assets/img/shapes/shape2.png b/src/assets/img/shapes/shape2.png
new file mode 100644
index 0000000..a30f35c
Binary files /dev/null and b/src/assets/img/shapes/shape2.png differ
diff --git a/src/assets/img/shapes/shape3.png b/src/assets/img/shapes/shape3.png
new file mode 100644
index 0000000..b7168b3
Binary files /dev/null and b/src/assets/img/shapes/shape3.png differ
diff --git a/src/assets/img/shapes/shape4.png b/src/assets/img/shapes/shape4.png
new file mode 100644
index 0000000..310f036
Binary files /dev/null and b/src/assets/img/shapes/shape4.png differ
diff --git a/src/assets/img/shapes/shape5.png b/src/assets/img/shapes/shape5.png
new file mode 100644
index 0000000..5bc390f
Binary files /dev/null and b/src/assets/img/shapes/shape5.png differ
diff --git a/src/assets/img/shapes/shape6.png b/src/assets/img/shapes/shape6.png
new file mode 100644
index 0000000..b7d173e
Binary files /dev/null and b/src/assets/img/shapes/shape6.png differ
diff --git a/src/assets/img/shapes/shape7.png b/src/assets/img/shapes/shape7.png
new file mode 100644
index 0000000..5addc56
Binary files /dev/null and b/src/assets/img/shapes/shape7.png differ
diff --git a/src/assets/img/shapes/shape8.png b/src/assets/img/shapes/shape8.png
new file mode 100644
index 0000000..d01e647
Binary files /dev/null and b/src/assets/img/shapes/shape8.png differ
diff --git a/src/assets/img/shapes/shape9.png b/src/assets/img/shapes/shape9.png
new file mode 100644
index 0000000..e1e9def
Binary files /dev/null and b/src/assets/img/shapes/shape9.png differ
diff --git a/src/assets/img/user.png b/src/assets/img/user.png
new file mode 100644
index 0000000..1325db4
Binary files /dev/null and b/src/assets/img/user.png differ
diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index c230ffa..181978e 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -1,6 +1,11 @@
 <template>
-    <div>
+    <div class="footer">
+        <div class="info">
+            <span class="m-r-20">客服邮箱：service@huorantech.cn</span>
+            <span>联系电话： 18818574533</span>
+        </div>
         <div class="copyright">
+            <span>© Copyright 2021 Occupation Lab 职站</span>
             <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
         </div>
     </div>
@@ -8,35 +13,44 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            
+        };
+    },
+    mounted(){
+        
     },
-    mounted() {
-
+    methods: {
+        
     },
-    methods: {}
 };
 </script>
 <style lang="scss" scoped>
-.copyright {
-    padding: 20px 0;
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 12px;
-    text-align: center;
-    background-color: #333;
-
-    p {
-        margin-bottom: 10px;
-        color: #fff;
-        font-size: 12px;
-    }
-
-    a {
-        color: #fff;
-        font-size: 12px;
-
-        &:hover {
-            opacity: .8;
+    .footer{
+        padding: 17px 0 9px;
+        text-align: center;
+        background-color: #0F1D2E;
+        .info{
+            margin-bottom: 7px;
+            font-size: 14px;
+            line-height: 20px;
+            color: #D7DFE7;
+        }
+        .copyright{
+            font-size: 12px;
+            text-align: center;
+            line-height: 17px;
+            span{
+                margin-right: 20px;
+                color: #757F8A;
+            }
+            a{
+                color:#757F8A;
+                font-size: 12px;
+                &:hover{
+                    color: #c7c7c7;
+                }
+            }
         }
     }
-}
 </style>
\ No newline at end of file
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 0280d32..e250b1d 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -1,41 +1,55 @@
 <template>
     <div class="header">
-        <div v-if="this.$route.path=='/setting/person'" class="goBack" @click="back"><i class="el-icon-arrow-left"></i>返回</div>
-        <template v-else>
-            <div style="line-height: 60px">
+        <a class="logo" @click="toIndex">
+            <template v-if="token">
                 <img class="logo" :src="logoUrl" />
                 <span class="title">{{title}}</span>
-            </div>
-        </template>
-        <div class="header-right">
-            <div class="header-user-con">
-                <div class="user" @click="toPersonal">
-                    <el-avatar :size="40" :src="avatar"></el-avatar>
-                    <span class="user-avator">{{ userName }}</span>
-                </div>
-                <el-divider class="ml20" direction="vertical"></el-divider>
-                <el-button type="text" class="ml20" @click="logout">退出</el-button>
+            </template>
+            <img v-else src="@/assets/img/logo.png" alt="">
+        </a>
+        <div class="inner">
+            <navbar ref="nav" style="height: 64px;"></navbar>
+            <div class="user-wrap">
+                <template v-if="token">
+                    <div class="user" @click="toPersonal">
+                        <el-avatar :size="40" :src="avatar"></el-avatar>
+                        <span class="user-avator">{{ userName }}</span>
+                    </div>
+                    <el-divider class="m-l-20" direction="vertical"></el-divider>
+                    <a class="logout" @click="logout">退出</a>
+                </template>
+                <router-link v-else class="login" to="/login" target="_blank">
+                    <img src="@/assets/img/user.png" alt="">
+                    <span>登录</span>
+                </router-link>
             </div>
         </div>
     </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
-
+import Setting from "@/setting";
+import util from "@/libs/util";
+import navbar from "../navbar";
 export default {
     data() {
         return {
-
+            token: util.local.get(Setting.tokenKey)
         };
     },
+    components: {
+        navbar
+    },
     computed: {
         ...mapState("user", [
             "title", "logoUrl", "avatar", "userName"
         ])
     },
     mounted() {
-        this.getSystemDetail();
-        this.getUserInfo();
+        if (token) {
+            this.getSystemDetail();
+            this.getUserInfo();
+        }
     },
     methods: {
         ...mapActions("user", [
@@ -59,88 +73,88 @@ export default {
         toPersonal() {
             this.$router.push("/setting/person");
         },
-        back() {
-            this.$router.go(-1);
+        toIndex() {
+            this.$router.push('/index')
         }
     }
 };
 </script>
 <style scoped lang="scss">
-.goBack {
-    cursor: pointer;
-    line-height: 60px;
-    height: 60px;
-    font-size: 16px;
-    font-weight: bold;
-    margin-left: 20px;
-}
-
-.goBack i {
-    color: #9278ff;
-    font-size: 20px;
-}
-
+$height: 64px;
 .header {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
+    z-index: 10;
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 60px;
-    font-size: 16px;
-    color: #333;
-    .logo {
-        height: 50px;
-        margin: 0 20px;
+    height: $height;
+    background-color: #fff;
+    box-shadow: 0px 0px 6px 0px rgba(178, 178, 178, 0.32);
+    .inner{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: $max-width;
+        min-width: $min-width;
+        padding: 0 80px 0 10px;
+        margin: 0 auto;
+    }
+    .logo{
+        position: absolute;
+        top: 0;
+        left: 80px;
+        font-size: 28px;
+        color: #568DF2;
+        line-height: $height;
+        cursor: pointer;
     }
     .title {
         font-size: 18px;
         font-weight: bold;
     }
-}
-
-.header-right {
-    padding-right: 50px;
-}
-
-.header-user-con {
-    display: flex;
-    align-items: center;
-
-    .user {
+    .user-wrap {
+        display: inline-flex;
+        align-items: center;
+        .user {
+            display: inline-flex;
+            align-items: center;
+            cursor: pointer;
+        }
+    }
+    .el-divider--vertical {
+        width: 2px;
+        height: 15px;
+    }
+    .el-divider {
+        background-color: #D8D8D8;
+    }
+    .user-avator {
+        margin-left: 10px;
+        font-size: 12px;
+    }
+    .user-avator img {
+        display: block;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+    }
+    .logout {
+        margin-left: 5px;
+        font-size: 14px;
+        color: #666;
+    }
+    .login{
         display: inline-flex;
         align-items: center;
         cursor: pointer;
+        &:hover{
+            opacity: .9;
+        }
+        span{
+            margin-left: 5px;
+            color: #666;
+            font-size: 14px;
+        }
     }
 }
-
-.user-avator {
-    margin-left: 10px;
-    font-size: 12px;
-}
-
-.ml20 {
-    margin-left: 20px;
-}
-
-.user-avator img {
-    display: block;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-}
-
-.header-right .el-button--text {
-    color: #333;
-}
-
-.header-right .el-divider--vertical {
-    width: 2px;
-    height: 15px;
-}
-
-.header-right .el-divider {
-    background-color: #333;
-}
 </style>
diff --git a/src/layouts/home/index.vue b/src/layouts/home/index.vue
index 7963a11..59c5e69 100644
--- a/src/layouts/home/index.vue
+++ b/src/layouts/home/index.vue
@@ -2,7 +2,6 @@
     <div class="main">
         <v-head></v-head>
         <div class="layout">
-            <navbar v-if="!hideNavList.includes($route.path)"></navbar>
             <div class="content">
                 <transition name="move" mode="out-in">
                     <router-view class="view"></router-view>
@@ -19,18 +18,16 @@ import { mapState, mapActions } from "vuex";
 import util from "@/libs/util";
 import Setting from "@/setting";
 import vHead from "../header";
-import navbar from "../navbar";
 import vFooter from "../footer";
 
 export default {
     data() {
         return {
-            hideNavList: ["/record/show", "/setting/person"]
+            
         };
     },
     components: {
         vHead,
-        navbar,
         vFooter
     },
     computed: {},
@@ -59,12 +56,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.main {
-    min-height: 100%;
-
-    .view {
-        min-height: calc(100vh - 177px);
-        //padding: 24px;
+.main{
+    min-height: calc(100% - 64px);
+    .layout{
+        padding-top: 64px;
+    }
+    .index{
+        padding: 0;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index e3ca644..2c0c9fb 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -1,87 +1,98 @@
 <template>
     <div>
-        <el-menu
-            :default-active="activeTab"
-            mode="horizontal"
-            @select="handleSelect"
-            active-text-color="#9076FF"
-        >
-            <el-menu-item index="/station/list">实验台</el-menu-item>
-            <el-menu-item index="/appraisal/list">能力测评</el-menu-item>
-            <el-menu-item index="/record/list">实验记录</el-menu-item>
-            <el-menu-item index="/ass/list">考核列表</el-menu-item>
-            <el-menu-item index="/course/list">课程学习</el-menu-item>
-            <el-menu-item index="/info/list">资讯</el-menu-item>
-            <el-menu-item index="/match/list">线上赛事</el-menu-item>
-        </el-menu>
+        <ul class="nav">
+            <li v-for="(item,index) in menus" :key="index" :class="{active: active == item.index}" @click="jump(item)">{{item.title}}</li>
+        </ul>
     </div>
 </template>
 
 <script>
-import { mapActions } from "vuex";
-
+import Setting from "@/setting"
+import util from "@/libs/util"
 export default {
     data() {
         return {
-            menus: [
+            token: util.local.get(Setting.tokenKey),
+            active: this.$route.path,
+            // 登录后的菜单
+            loginedMenu: [
                 {
                     index: "/station/list",
-                    label: "实验台"
+                    title: "实验台"
                 },
                 {
                     index: "/appraisal/list",
-                    label: "能力测评"
+                    title: "能力测评"
                 },
                 {
                     index: "/record/list",
-                    label: "实验记录"
+                    title: "实验记录"
                 },
                 {
                     index: "/ass/list",
-                    label: "考核列表"
+                    title: "考核列表"
                 },
                 {
                     index: "/course/list",
-                    label: "课程学习"
+                    title: "课程学习"
                 },
                 {
                     index: "/info/list",
-                    label: "资讯"
+                    title: "资讯"
                 },
                 {
                     index: "/match/list",
-                    label: "线上赛事"
+                    title: "线上赛事"
                 }
-            ]
+            ],
+            // 未登录的菜单
+            touristMenu: [
+                {
+                    index: "/index/list",
+                    title: "实验台"
+                },
+                {
+                    index: "/cityPartner/list",
+                    title: "城市合伙人"
+                },
+                {
+                    index: "/devPlatform/list",
+                    title: "开发者平台"
+                },
+            ],
+            menus: []
         };
     },
-    computed: {
-        activeTab: {
-            get () {
-                return this.$store.state.user.activeTab;
-            },
-            set (newValue) {
-                return newValue;
-            }
-        }
+    mounted() {
+        this.menus = this.token ? this.loginedMenu : this.touristMenu
     },
     methods: {
-        ...mapActions("user", [
-            "setActiveTab"
-        ]),
-        // 点击标签页跳转到相应的路由
-        handleSelect(key, keyPath) {
-            this.setActiveTab(key);
-            this.$router.push(key).catch(err => {});
+        jump(item) {
+            this.active = item.index
+            this.$router.push(item.index).catch(err => {})
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-/deep/ .el-menu.el-menu--horizontal{
-    z-index: 2;
-    padding: 0 40px;
-    box-shadow: 0px 0px 25px 2px rgba(48, 115, 248, 0.14);
+.nav{
+    position: absolute;
+    top: 0;
+    left: 280px;
+    display: flex;
+    li{
+        padding: 0 15px;
+        margin: 0 20px;
+        font-size: 16px;
+        line-height: 60px;
+        color: #3F3F3F;
+        cursor: pointer;
+        border-bottom: 4px solid transparent;
+        &.active{
+            color: $main-color;
+            border-bottom-color: $main-color;
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/account/login/index.vue b/src/pages/account/login/index.vue
index 549505d..f685949 100644
--- a/src/pages/account/login/index.vue
+++ b/src/pages/account/login/index.vue
@@ -1,47 +1,49 @@
 <template>
     <div class="wrap">
-        <div class="bg">
-            <div class="left">
-                <div class="text">
-                    <p>欢迎使用</p>
-                    <p>Occupation Lab</p>
-                </div>
-            </div>
-            <div class="right"></div>
+        <div class="shapes">
+            <img class="shape1" src="@/assets/img/shapes/shape1.png" alt="">
+            <img class="shape2" src="@/assets/img/shapes/shape2.png" alt="">
+            <img class="shape3" src="@/assets/img/shapes/shape3.png" alt="">
+            <img class="shape4" src="@/assets/img/shapes/shape4.png" alt="">
+            <img class="shape5" src="@/assets/img/shapes/shape5.png" alt="">
+            <img class="shape6" src="@/assets/img/shapes/shape6.png" alt="">
         </div>
-
-        <div class="right-form">
+        <div class="login">
             <div class="form">
-                <el-tabs v-model="activeName" @tab-click="handleClick">
-                    <el-tab-pane label="账号登录" name="1"></el-tab-pane>
-                    <el-tab-pane label="手机号/邮箱登录" name="2"></el-tab-pane>
-                    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" style="margin-top: 20px">
-                        <el-form-item v-if="activeName === '1'" label="用户名" prop="account">
-                            <el-input v-model.trim="loginForm.account" placeholder="请输入账号"></el-input>
-                        </el-form-item>
-                        <el-form-item v-if="activeName === '2'" label="手机号/邮箱" prop="account">
-                            <el-input v-model.trim="loginForm.account" placeholder="请输入手机号/邮箱"></el-input>
-                        </el-form-item>
-                        <el-form-item label="密码" prop="password">
-                            <el-input
-                                type="password"
-                                placeholder="请输入密码"
-                                v-model.trim="loginForm.password"
-                            >
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="验证码" prop="code">
-                            <el-input
-                                placeholder="请输入验证码"
-                                v-model.trim="loginForm.code"
-                                @keyup.enter.native="submitFormLogin"
-                            >
-                            </el-input>
-                            <img @click="getVerImg" :src="verificationIMG" class="verification" alt="">
-                        </el-form-item>
-                        <el-button class="submit" type="primary" @click="submitFormLogin">登录</el-button>
-                    </el-form>
-                </el-tabs>
+                <h6 class="title">欢迎使用请登录</h6>
+                <ul class="tab">
+                    <li v-for="(item,index) in tabList" :key="index" :class="{active: form.distinguish == item.id}" @click="typeClick(item)">{{item.label}}</li>
+                </ul>
+                <el-form :model="form" :rules="loginRules" ref="form" style="margin-top: 20px">
+                    <el-form-item v-if="activeName === '1'" prop="account">
+                        <label class="account"></label>
+                        <el-input v-model.trim="form.account" placeholder="请输入账号"></el-input>
+                    </el-form-item>
+                    <el-form-item v-if="activeName === '2'" prop="account">
+                        <label class="account"></label>
+                        <el-input v-model.trim="form.account" placeholder="请输入手机号/邮箱"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <label class="password"></label>
+                        <el-input
+                            type="password"
+                            placeholder="请输入密码"
+                            v-model.trim="form.password"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item prop="code">
+                        <label class="code"></label>
+                        <el-input
+                            placeholder="请输入验证码"
+                            v-model.trim="form.code"
+                            @keyup.enter.native="submitFormLogin"
+                        >
+                        </el-input>
+                        <img @click="getVerImg" :src="verificationIMG" class="ver-img" alt="">
+                    </el-form-item>
+                    <el-button class="submit" type="primary" @click="submitFormLogin">登录</el-button>
+                </el-form>
             </div>
         </div>
         <el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="30%">
@@ -79,9 +81,18 @@ import Setting from "@/setting";
 export default {
     data: function() {
         return {
+            tabList: [
+                {
+                    id: '1',
+                    label: '账号'
+                },{
+                    id: '2',
+                    label: '手机号/邮箱'
+                }
+            ],
             verificationIMG: "",
             activeName: "1",
-            loginForm: {
+            form: {
                 account: "",
                 password: "",
                 code: "", // 验证码
@@ -121,19 +132,19 @@ export default {
             "login"
         ]),
         getVerImg() { // 获取验证码图片
-            this.loginForm.random = Math.floor(Math.random() * 999999999);
-            this.verificationIMG = this.api.verification + "?random=" + `${this.loginForm.random}`;
+            this.form.random = Math.floor(Math.random() * 999999999);
+            this.verificationIMG = this.api.verification + "?random=" + `${this.form.random}`;
         },
-        handleClick(tab, event) { // 切换标签
-            this.loginForm.account = "";
-            this.$refs.loginForm.clearValidate();
+        typeClick(tab) { // 切换标签
+            this.form.account = "";
+            this.$refs.form.clearValidate();
             this.loginRules.account[0].message = tab.index === "1" ? "请输入账号" : "请输入手机号/邮箱";
         },
         submitFormLogin() { // 提交登录
-            this.$refs.loginForm.validate(valid => {
+            this.$refs.form.validate(valid => {
                 if (valid) {
-                    this.loginForm.distinguish = Number(this.activeName);
-                    this.login(this.loginForm).then(() => {
+                    this.form.distinguish = Number(this.activeName);
+                    this.login(this.form).then(() => {
                         let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/index";
                         this.$router.replace(redirect);
                     }).catch(res => {
@@ -141,7 +152,7 @@ export default {
                             this.phoneVisible = true;
                         }
                         this.getVerImg();
-                        this.loginForm.code = "";
+                        this.form.code = "";
                     });
                 } else {
                     return util.errorMsg("请检查表单数据");
@@ -195,11 +206,11 @@ export default {
                 code: this.phoneCode,
                 opener: this.phoneOpener,
                 platform: Setting.platformId,
-                account: this.loginForm.account
+                account: this.form.account
             };
             this.$post(this.api.bindPhoneOrEmail, data).then(res => {
                 util.successMsg("绑定成功");
-                this.loginForm.phone = this.phone;
+                this.form.phone = this.phone;
                 this.phoneVisible = false;
 
                 util.local.set(Setting.tokenKey, res.token, Setting.tokenExpires);
@@ -215,160 +226,152 @@ export default {
 
 <style scoped lang="scss">
 .wrap {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    min-height: 100%;
+    background-color:  #F3F6FA;
     overflow: hidden;
-
-    .bg {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: calc(100% - 56px);
-
-        .left {
-            position: relative;
-            width: 40%;
-            height: 100%;
-            background: url(../../../assets/img/bg_2.png) 0 0/100% 100% no-repeat;
-
-            .text {
-                position: absolute;
-                top: 35%;
-                left: 15%;
-                color: #fff;
-                font-size: 46px;
-                font-weight: bold;
-
-                p:first-child {
-                    margin-bottom: 20px;
-                }
-            }
-        }
-
-        .right {
-            width: 50%;
-            height: 100%;
-            background: url(../../../assets/img/bg_1.png) center center/80% auto no-repeat;
+    .shapes{
+        img{
+            position: absolute;
         }
     }
-
-
-    /deep/ .right-form {
-        position: absolute;
-        top: 47%;
-        right: 12%;
-        transform: translateY(-50%);
-        width: 30%;
-
-        .logo {
-            width: 100%;
-            margin-bottom: 40px;
-        }
-
-        .form {
-            padding: 50px 20px 20px;
+    .shape1{
+        top: 123px;
+    }
+    .shape2{
+        top: 238px;
+        left: 35px;
+    }
+    .shape3{
+        top: 485px;
+    }
+    .shape4{
+        bottom: 285px;
+        right: 0;
+    }
+    .shape5{
+        bottom: 145px;
+        right: 0;
+    }
+    .shape6{
+        bottom: 0;
+        right: 0;
+    }
+    .login{
+        width: 436px;
+        margin: 188px auto 150px;
+        .form{
+            padding: 38px 38px 60px;
+            border-radius: 6px;
             background-color: #fff;
-            border-radius: 16px;
-            box-sizing: border-box;
-            box-shadow: 0 1px 20px rgba(146, 120, 255, 0.3);
-        }
-
-        .back {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            font-size: 24px;
-            color: #9278ff;
-            cursor: pointer;
-
-            &:hover {
-                opacity: .8;
+            .title{
+                margin-bottom: 25px;
+                font-size: 26px;
+                color: #0B1D30;
+                letter-spacing: 4px;
             }
-        }
-
-        .el-tabs__nav-scroll {
-            display: flex;
-            justify-content: center;
-        }
-
-        h2 {
-            padding-bottom: 10px;
-            font-size: 20px;
-            font-weight: 400;
-            color: #8F73FF;
-            text-align: center;
-            border-bottom: 1px solid #f3f3f3;
-        }
-
-        .el-form {
-            width: 70%;
-            margin: 30px auto 0;
-
-            .label {
-                line-height: 1.8;
-                color: #929292;
+            .tab{
+                display: flex;
+                align-items: center;
+                margin-bottom: 24px;
+                border-bottom: 2px solid #E1E6F2;
+                li{
+                    padding: 18px 0;
+                    margin-bottom: -1px;
+                    font-size: 18px;
+                    color: #555;
+                    cursor: pointer;
+                    border-bottom: 4px solid transparent;
+                    &:first-child{
+                        margin-right: 50px;
+                    }
+                    &.active{
+                        color: $main-color;;
+                        border-bottom-color: $main-color;
+                    }
+                }
             }
-
-            /deep/ .el-input__inner {
-                height: 46px;
-                padding: 0 23px;
-                line-height: 46px;
-                border: 1px solid #E5E5E5;
-                border-radius: 8px !important;
+            .label{
+                margin-bottom: 10px;
+                color: #105CB2;
             }
-
-            /deep/ .el-form-item__error {
+            /deep/.el-form-item{
+                margin-bottom: 20px;
+            }
+            /deep/.el-input__inner{
+                position: relative;
+                height: 52px;
+                padding: 0 20px 0 34px;
+                line-height: 50px;
+                background-color: #FBFBFB;
+                border: 1px solid #E1E6F2;
+                border-radius: 4px !important;
+            }
+            .account,.password,.code{
+                z-index: 1;
+                position: absolute;
+                top: 17px;
+                left: 11px;
+                width: 18px;
+                height: 18px;
+                background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
+            }
+            .password{
+                top: 18px;
+                background-image: url(../../../assets/img/login/password.png);
+            }
+            .code{
+                top: 18px;
+                background-image: url(../../../assets/img/login/code.png);
+            }
+            .ver-img{
+                position: absolute;
+                top: 1px;
+                right: 1px;
+            }
+            /deep/.el-form-item__error{
                 top: 105%;
                 left: auto;
                 right: 0;
                 color: #FFA94E;
             }
-
-            .verification {
-                position: absolute;
-                right: 0px;
-                width: 100px;
-                height: 32px;
-                border: 1px solid #DCDFE6;
-                cursor: pointer;
-            }
-
-            .submit {
+            .submit{
                 width: 100%;
                 height: 48px;
-                margin-top: 20px;
+                margin-top: 30px;
                 line-height: 48px;
                 padding: 0;
-                font-size: 18px;
-                background-color: #9278ff;
-                border-radius: 6px;
+                font-size: 20px;
+                background-color: $main-color;
+                border-radius: 4px;
                 border: 0;
             }
         }
     }
 }
-
-.switch {
-    span {
-        cursor: pointer;
-        color: #9076FF;
-    }
-}
-
-.links {
-    width: 70%;
-    margin: 20px auto 0;
-    text-align: right;
+.footer{
+    z-index: 3;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
 }
-
-.ques {
-    color: #9278ff;
-    font-size: 14px;
+.copyright{
+    padding: 18px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: #F3F6FA;
+    a{
+        color:#B1B4B8;
+        font-size: 12px;
+        &:hover{
+            opacity: .8;
+        }
+    }
 }
-
-.forget {
-    color: #ffa94e;
+.tips {
+    margin: 0 0 10px 5px;
     font-size: 14px;
+    text-align: center;
+    color: #666;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/cityPartner/list/index.vue b/src/pages/cityPartner/list/index.vue
new file mode 100644
index 0000000..cd8efe2
--- /dev/null
+++ b/src/pages/cityPartner/list/index.vue
@@ -0,0 +1,266 @@
+<template>
+    <div class="wrap">
+        <div class="banner">
+            <h6>城市合伙人招募中</h6>
+            <p class="text">携手共创教育信息化新未来，合伙共享产业互联领域新红利</p>
+        </div>
+        <!-- 关于城市合伙人 -->
+        <div class="about">
+            <div class="inner">
+                <h6>关于城市合伙人</h6>
+                <div class="text">城市合伙人主要为在各地具备高职、本科等学校关系资源，且在当地能够提供销售、售前，项目实施交付，以及持续增值服务的团队。</div>
+            </div>
+        </div>
+        <div class="bg">
+            <!-- 我们提供的支持 -->
+            <div class="intro">
+                <div class="inner">
+                    <h6 class="i-title">我们提供的支持</h6>
+                    <ul class="list">
+                        <li>
+                            <h6>
+                                <img src="@/assets/img/city/sup1.png" alt="">
+                                <span>产品</span>
+                            </h6>
+                            <p class="text">我们会为城市合伙人整合好不同的教育信息化解决方案所需的软件和硬件产品通过教育产业互联网平台和反向供应链，为城市合伙人提供利润合适，交付便捷，质量有保障的产品。</p>
+                        </li>
+                        <li>
+                            <h6>
+                                <img src="@/assets/img/city/sup2.png" alt="">
+                                <span>培训</span>
+                            </h6>
+                            <p class="text">我们会有专业的培训团队，为每一个城市合伙人提供教育信息化产业的创业辅导，和专业培训。帮助城市合伙人打造一支专业化的商务支持、客户成功，和售后运营服务的支撑型团队。</p>
+                        </li>
+                    </ul>
+                    <h6 class="i-title" style="margin-top: 60px">城市合伙人需要具备的条件</h6>
+                    <ul class="list">
+                        <li>
+                            <h6>
+                                <img src="@/assets/img/city/sup3.png" alt="">
+                                <span>业务资源</span>
+                            </h6>
+                            <p class="text">城市合伙人要实现业务的快速成功，需要在当地具备开展相应业务的客户资源，包括但不限于在当地院校的——二级学院的、资产处、实验室的相关领导与老师的关系资源。</p>
+                        </li>
+                        <li>
+                            <h6>
+                                <img src="@/assets/img/city/sup4.png" alt="">
+                                <span>服务团队</span>
+                            </h6>
+                            <p class="text">城市合伙人需要在当地具备独立开展业务和服务的能力，因此需要配置最小的地区服务团队：包括商务售前、运营服务（售后技术支持、售后培训服务、售后客户成功服务、客户活动支持服务等）。</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <!-- 城市合伙人的收益 -->
+        <div class="profit">
+            <div class="inner">
+                <h6 class="i-title">城市合伙人的收益</h6>
+                <ul class="list">
+                    <li>
+                        <img src="@/assets/img/city/profit1.png" alt="">
+                        <h6>软件收益</h6>
+                        <p class="text">对平台产品推广，获利润分成</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/city/profit2.png" alt="">
+                        <h6>续约分成</h6>
+                        <p class="text">客户续约年年享分成</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/city/profit3.png" alt="">
+                        <h6>媒体资源共享</h6>
+                        <p class="text">各大主流媒体推广，打造自己的引流平台</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- 业务开展方向 -->
+        <div class="profit bus">
+            <div class="inner">
+                <h6 class="i-title">业务开展方向</h6>
+                <ul class="list">
+                    <li>
+                        <img src="@/assets/img/city/bus1.png" alt="">
+                        <h6>金融实验室</h6>
+                        <p class="text">依据证券、银行等金融机构实景，配置相应的软硬件一体环境，为高职、本科院校的经管学院、商学院提供金融实验室的建设解决方案。</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/city/bus2.png" alt="">
+                        <h6>金融科技实验室 </h6>
+                        <p class="text">将金融交易、信贷，风控等模型和数据，与Python编程相结合，为高职（侧重编程执行）与本科院校（侧重模型研究）的经管、学院和商学院提供金融科技实验的建设解决方案。</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/city/bus3.png" alt="">
+                        <h6>金融大数据实验室</h6>
+                        <p class="text">通过高频数据，与大数据平台结合，为高职（侧重编程执行）与本科院校（侧重模型研究）的经管学院和商学院提供金融大数据实验室的建设解决方案。</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- 联系 -->
+        <div class="contact">
+            <img class="love" src="@/assets/img/love.png" alt="">
+        </div>
+    </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import util from '@/libs/util'
+export default {
+    name: 'cityPartner',
+    data() {
+        return {
+            token: util.local.get(Setting.tokenKey)
+        }
+    },
+    mounted() {},
+    methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap{
+    position: relative;
+    background-color: #fff;
+    .banner {
+        height: 420px;
+        padding: 140px 0 0 180px;
+        background: url(../../../assets/img/city/banner.png) 0 0/100% 100% no-repeat;
+        h6 {
+            margin-bottom: 30px;
+            font-size: 42px;
+        }
+        .text {
+            font-size: 16px;
+            line-height: 30px;
+        }
+    }
+    .i-title{
+        position: relative;
+        margin-bottom: 37px;
+        font-size: 30px;
+        text-align: center;
+        color: #0B1D30;
+    }
+    .inner{
+        width: 1200px;
+        padding: 67px 0;
+        margin: 0 auto;
+    }
+    .bg {
+        background: #fff url(../../../assets/img/city/sup-bg.png) 0 0/100% 100% no-repeat;
+    }
+    .about {
+        margin-top: -60px;
+        .inner {
+            padding: 40px 0 60px;
+            text-align: center;
+            background: url(../../../assets/img/city/about.png) 0 0/100% 100% no-repeat;
+        }
+        h6 {
+            margin-bottom: 20px;
+            font-size: 24px;
+            color: #fff;
+        }
+        .text {
+            font-size: 14px;
+            color: #fff;
+        }
+    }
+    .intro{
+        position: relative;
+        .i-title {
+            text-align: left;
+        }
+        .list{
+            display: flex;
+            justify-content: space-between;
+            li{
+                width: 49%;
+                padding: 20px 30px;
+                border-radius: 6px;
+                border-left: 3px solid $main-color;
+                background-color: #fff;
+                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+            }
+            h6{
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+            }
+            span {
+                margin-left: 12px;
+                font-size: 18px;
+                color: #0B1D30;
+            }
+            .text{
+                font-size: 14px;
+                color: #757F92;
+            }
+        }
+    }
+    .profit{
+        .inner {
+            background: url(../../../assets/img/city/profit-bg.png) 0 0/100% 100% no-repeat;
+        }
+        .list {
+            display: flex;
+            flex: 1;
+            li {
+                padding: 9px 9px 20px;
+                margin-right: 24px;
+                text-align: center;
+                background-color: #fff;
+                border-radius: 10px;
+                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+            img {
+                width: 100%;
+            }
+            h6 {
+                margin: 15px 0 10px;
+                font-size: 18px;
+                color: #0B1D30;
+            }
+            .text {
+                font-size: 14px;
+                color: #757F92;
+            }
+        }
+    }
+    .bus {
+        background-color: #F3F6FA;
+        .inner {
+            background: none;
+        }
+        .list {
+            li {
+                padding-bottom: 50px;
+                .text {
+                    text-align: left;
+                }
+            }
+            img {
+                width: 366px;
+                height: 230px;
+            }
+        }
+    }
+    .contact {
+        position: relative;
+        height: 250px;
+        background: url(../../../assets/img/contact-info.png) center center/auto no-repeat,
+                    url(../../../assets/img/contact-bg.png) 0 0/100% 100% no-repeat;
+        .love {
+            position: absolute;
+            top: -45px;
+            right: 10%;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/devPlatform/list/index.vue b/src/pages/devPlatform/list/index.vue
new file mode 100644
index 0000000..a49dc7e
--- /dev/null
+++ b/src/pages/devPlatform/list/index.vue
@@ -0,0 +1,218 @@
+<template>
+    <div class="wrap">
+        <div class="banner">
+            <h6>教育数字化产品开发者平台</h6>
+            <p class="text">与3000所高校共建数字化教育产业未来</p>
+        </div>
+        <!-- 关于教育产业数字化开发者 -->
+        <div class="about">
+            <div class="inner">
+                <h6>关于教育产业数字化开发者</h6>
+                <div class="text">教育产业数字化开发者主要指从事高职、本科市场相应数字化场景的软件、硬件研发与生产的产品开发者。</div>
+            </div>
+        </div>
+        <!-- 我们提供的支持 -->
+        <div class="sup">
+            <div class="inner">
+                <h6 class="i-title">我们提供的支持</h6>
+                <ul class="list">
+                    <li>
+                        <h6>生产力赋能</h6>
+                        <p class="text">公司打造的产业中台将赋能联盟厂家高效地进行软件产品的开发与交付。</p>
+                    </li>
+                    <li>
+                        <h6>渠道与运营服务赋能</h6>
+                        <p class="text">公司会为联盟厂家提供公共的渠道支撑和客户获取，帮助厂家获得客户成交，降低产品厂家的市场压力。</p>
+                    </li>
+                    <li>
+                        <h6>创业技术孵化服务</h6>
+                        <p class="text">对于还在创业阶段的产品创业者，我司还提供初始的技术外包支撑服务，帮助产品创业者最小成本的完成产品的落地。</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- 开发者需要具备的条件 -->
+        <div class="con">
+            <div class="inner">
+                <h6 class="i-title">开发者需要具备的条件</h6>
+                <ul class="list">
+                    <li>
+                        <img src="@/assets/img/dev/con1.png" alt="">
+                        <h6>产品研发</h6>
+                        <p class="text">具备独立设计、开发教育产业数字化产品的能力</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/dev/con2.png" alt="">
+                        <h6>产品运维 </h6>
+                        <p class="text">具备独立的产品运维支持的能力</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/dev/con3.png" alt="">
+                        <h6>专业服务</h6>
+                        <p class="text">具备对产品内容专业支持的能力</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="profit">
+            <div class="item1">开发者受益</div>
+            <div class="item2">我们将与开发者共享教育产业数字化蓝海的巨大收益！</div>
+        </div>
+        <!-- 联系 -->
+        <div class="contact">
+            <img class="love" src="@/assets/img/love.png" alt="">
+        </div>
+    </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import util from '@/libs/util'
+export default {
+    name: 'cityPartner',
+    data() {
+        return {
+            token: util.local.get(Setting.tokenKey)
+        }
+    },
+    mounted() {},
+    methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap{
+    position: relative;
+    background-color: #fff;
+    .banner {
+        height: 420px;
+        padding: 140px 0 0 180px;
+        background: url(../../../assets/img/dev/banner.png) 0 0/100% 100% no-repeat;
+        h6 {
+            margin-bottom: 30px;
+            font-size: 42px;
+        }
+        .text {
+            font-size: 16px;
+            line-height: 30px;
+        }
+    }
+    .i-title{
+        position: relative;
+        margin-bottom: 37px;
+        font-size: 30px;
+        text-align: center;
+        color: #0B1D30;
+    }
+    .inner{
+        width: 1200px;
+        padding: 67px 0;
+        margin: 0 auto;
+    }
+    .about {
+        margin-top: -60px;
+        .inner {
+            padding: 40px 0 60px;
+            text-align: center;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+        }
+        h6 {
+            margin-bottom: 20px;
+            font-size: 24px;
+            color: #0B1D30;
+        }
+        .text {
+            font-size: 14px;
+            color: #0B1D30;
+        }
+    }
+    .sup{
+        background: linear-gradient(180deg, #FFFFFF 0%, #F1F6FE 100%);
+        .list {
+            display: flex;
+            justify-content: space-between;
+            li {
+                width: 33%;
+                padding: 140px 50px 50px;
+                background: url(../../../assets/img/dev/sup1.png) 0 0/100% 100% no-repeat;
+                &:nth-child(2) {
+                    background-image: url(../../../assets/img/dev/sup2.png);
+                }
+                &:last-child {
+                    margin-right: 0;
+                    background-image: url(../../../assets/img/dev/sup3.png);
+                }
+            }
+            h6 {
+                margin: 15px 0 10px;
+                font-size: 18px;
+                color: #0B1D30;
+            }
+            .text {
+                font-size: 14px;
+                color: #757F92;
+            }
+        }
+    }
+    .con{
+        background: url(../../../assets/img/dev/con-bg.png) 0 0/100% 100% no-repeat;
+        .list {
+            display: flex;
+            flex: 1;
+            li {
+                padding-bottom: 40px;
+                margin-right: 24px;
+                background-color: #fff;
+                border-radius: 10px;
+                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+            img {
+                width: 100%;
+            }
+            h6 {
+                margin: 15px 24px 10px;
+                font-size: 18px;
+                color: #0B1D30;
+            }
+            .text {
+                margin: 0 24px;
+                font-size: 14px;
+                color: #757F92;
+            }
+        }
+    }
+    .profit {
+        text-align: center;
+        .item1 {
+            line-height: 250px;
+            font-size: 30px;
+            color: #fff;
+            background: url(../../../assets/img/dev/profit-bg1.png) 0 0/100% 100% no-repeat;
+        }
+        .item2 {
+            width: 70%;
+            margin: -100px auto 0;
+            line-height: 202px;
+            font-size: 30px;
+            color: #0B1D30;
+            background: url(../../../assets/img/dev/profit-bg2.png) 0 0/100% 100% no-repeat;
+        }
+    }
+    .contact {
+        position: relative;
+        height: 250px;
+        background: url(../../../assets/img/contact-info.png) center center/auto no-repeat,
+                    url(../../../assets/img/contact-bg.png) 0 0/100% 100% no-repeat;
+        .love {
+            position: absolute;
+            top: -45px;
+            right: 10%;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index aafd033..1c8c59a 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -1,30 +1,319 @@
 <template>
     <div class="wrap">
-
+        <div class="banner">
+            <el-carousel height="420px" :autoplay="false">
+                <el-carousel-item>
+                    <img class="banner-bg" src="@/assets/img/index/banner1.png" alt="">
+                    <img class="text" src="@/assets/img/index/banner1-text.png" alt="">
+                </el-carousel-item>
+                <el-carousel-item>
+                    <img class="banner-bg" src="@/assets/img/index/banner2.png" alt="">
+                    <div class="text">
+                        <h6>轮播二金融主标题</h6>
+                        <p class="des">专业打造，满足院校开展虚拟仿真实验教学的</p>
+                    </div>
+                </el-carousel-item>
+                <el-carousel-item>
+                    <img class="banner-bg" src="@/assets/img/index/banner3.png" alt="">
+                    <div class="text text3">
+                        <h6>轮播三大数据主标题</h6>
+                        <p class="des">助力企业降本增效，获取数据时代核心竞争力</p>
+                    </div>
+                </el-carousel-item>
+            </el-carousel>
+        </div>
+        <!-- 简介 -->
+        <ul class="intro">
+            <li :class="{active: active === 1}" @click="toPart(1)">
+                <img src="@/assets/img/index/index1.png" alt="">
+                <div class="text">
+                    <h6>平台概览</h6>
+                    <p class="desc">专业打造，满足开展虚拟实验教学的多样性需</p>
+                </div>
+            </li>
+            <li :class="{active: active === 2}" @click="toPart(2)">
+                <img src="@/assets/img/index/index2.png" alt="">
+                <div class="text">
+                    <h6>平台特色与优势</h6>
+                    <p class="desc">助力院校实现教学智能化升级</p>
+                </div>
+            </li>
+            <li :class="{active: active === 3}" @click="toPart(3)">
+                <img src="@/assets/img/index/index20.png" alt="">
+                <div class="text">
+                    <h6>平台产品介绍</h6>
+                    <p class="desc">为院校培养复合型人才提供一“站”式服务</p>
+                </div>
+            </li>
+        </ul>
+        <!-- 关于 -->
+        <div class="about" id="part1">
+            <div class="inner">
+                <h6 class="i-title">关于职站</h6>
+                <div class="desc">职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。极简的平台操作，可帮助老师轻松开展实验教学，并支持自定义发布考核和练习，检验学生的日常实训练习效果；老师还可以通过可视化图表报告直观查看学生实训成绩，评估教学效果。</div>
+            </div>
+        </div>
+        <!-- 特色与优势 -->
+        <div class="adv" id="part2">
+            <img src="@/assets/img/index/index8.png" alt="" class="shape shape1">
+            <img src="@/assets/img/index/index9.png" alt="" class="shape shape2">
+            <img src="@/assets/img/index/index10.png" alt="" class="shape shape3">
+            <div class="inner">
+                <h6 class="i-title">特色与优势</h6>
+                <ul class="list">
+                    <li>
+                        <img src="@/assets/img/index/index3.png" alt="">
+                        <h6>大数据分析统计教学效果有“据”可依</h6>
+                        <p class="text">大数据追踪每个老师，学生教学和学习情况，统计分析并通过可视化图表展示，教学效果一目了然。</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/index/index4.png" alt="">
+                        <h6>云端部署实验教学资源“云”共享</h6>
+                        <p class="text">随时随地，只需登录网站，无需安装部署，即可轻松享受云上“实验室”，可满足不同学科，不同场景下的教学需求。</p>
+                    </li>
+                    <li>
+                        <img src="@/assets/img/index/index5.png" alt="">
+                        <h6>功能全面打造“智”能化教学全场景</h6>
+                        <p class="text">平台包含了教、学、练、考的功能模块，操作方便快捷，可轻松实现数字化、智能化教学;同时，平台还新增有大赛、资讯等功能模块，将教学活动拓展到课堂外，可为院校师生打造智能化、多样化、个性化的“教”“学”全场景。</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- 产品展示 -->
+        <div class="product" id="part3">
+            <div class="inner">
+                <h6 class="i-title">平台产品介绍</h6>
+                <div class="pics">
+                    <div class="text">
+                        <img src="@/assets/img/index/index11.png" alt="" class="icon">
+                        <h6>金融+科技+大数据</h6>
+                        <p class="desc">平台集成有银行综合、担保，Python程序设计、经济金融建模、数据采集、数据清洗、大数据分析、数据可视化、量化投资策略建模、金融随机过程、区块链交易所等十几款产品;可满足金融、金融科技、金融工程、大数据应用与管理等相关专业开设实验课程。</p>
+                    </div>
+                    <img src="@/assets/img/index/index12.png" alt="" class="pro-pic">
+                </div>
+            </div>
+        </div>
+        <div class="product bg-white">
+            <div class="inner">
+                <div class="pics">
+                    <img src="@/assets/img/index/index14.png" alt="" class="pro-pic">
+                    <div class="text">
+                        <img src="@/assets/img/index/index13.png" alt="" class="icon">
+                        <h6>沉浸式岗位模拟与实操</h6>
+                        <p class="desc">项目化教学，通过经典案例让学生亲身体验理论在实践中的应用，学会灵活运用所学知识解决实际问题，提升自身的职业实操能力。</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="product">
+            <div class="inner">
+                <div class="pics">
+                    <div class="text">
+                        <img src="@/assets/img/index/index15.png" alt="" class="icon">
+                        <h6>数据追踪与统计</h6>
+                        <p class="desc">老师和学生可查看每一次的练习、考试的相关情况，随时了解自己的教学和学习的进展和效果，动态调整自己的教学和学习计划。</p>
+                    </div>
+                    <img src="@/assets/img/index/index16.png" alt="" class="pro-pic">
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-
+import Setting from '@/setting'
+import util from '@/libs/util'
 export default {
-    name: "index",
+    name: 'index',
     data() {
-        return {};
-    },
-    mounted() {
-        this.getHot();
-    },
-    methods: {
-        getData() {
-
+        return {
+            token: util.local.get(Setting.tokenKey)
         }
-    }
+    },
+    mounted() {},
+    methods: {}
 };
 </script>
 
 <style lang="scss" scoped>
-.wrap {
-
-}
+    .wrap{
+        position: relative;
+        background-color: #F3F6FA;
+        .banner {
+            .text {
+                position: absolute;
+                top: 130px;
+                left: 180px;
+            }
+            h6 {
+                margin-bottom: 30px;
+                font-size: 42px;
+            }
+            .des {
+                font-size: 16px;
+                line-height: 30px;
+            }
+            .text3 {
+                h6, .des {
+                    color: #fff;
+                }
+            }
+        }
+        .banner-bg {
+            width: 100%;
+            height: 100%;
+        }
+        .i-title{
+            position: relative;
+            margin-bottom: 37px;
+            font-size: 30px;
+            text-align: center;
+            color: #0B1D30;
+            &:after{
+                content: '';
+                position: absolute;
+                bottom: -10px;
+                left: 50%;
+                width: 30px;
+                height: 4px;
+                transform: translate(-50%);
+                background-color: #006EFF;
+            }
+        }
+        .intro{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            padding: 43px 0;
+            background-color: #fff;
+            li{
+                display: inline-flex;
+                align-items: center;
+                cursor: pointer;
+                &.active, &:hover{
+                    h6, .desc{
+                        color: #006EFF;
+                    }
+                }
+            }
+            img{
+                width: 50px;
+                margin-right: 15px;
+            }
+            h6{
+                margin-bottom: 5px;
+                font-size: 16px;
+                color: #0B1D30;
+            }
+            .desc{
+                font-size: 13px;
+                color: #757F92;
+            }
+        }
+        .inner{
+            width: 1200px;
+            padding: 67px 0;
+            margin: 0 auto;
+        }
+        .about{
+            .inner{
+                padding: 67px;
+            }
+            .desc{
+                min-height: 200px;
+                padding: 35px 280px 35px 55px;
+                font-size: 14px;
+                color: #0B1D30;
+                line-height: 30px;
+                background: url(../../../assets/img/index/index6.png) 0 0/100% 100% no-repeat;
+            }
+        }
+        .adv{
+            position: relative;
+            background: #fff url(../../../assets/img/index/index7.png) 0 0/100% 100% no-repeat;
+            .shape{
+                position: absolute;
+            }
+            .shape1{
+                top: 25px;
+                right: 0;
+            }
+            .shape2{
+                bottom: 30px;
+                left: 50px;
+            }
+            .shape3{
+                bottom: 25px;
+                right: 50px;
+            }
+            .list{
+                display: flex;
+                height: 370px;
+                li{
+                    width: 33.33%;
+                    padding: 107px 35px 0;
+                    margin-right: 20px;
+                    text-align: center;
+                    box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+                    border-radius: 10px;
+                    &:last-child{
+                        margin-right: 0;
+                    }
+                }
+                img{
+                    width: 64px;
+                }
+                h6{
+                    margin: 45px 0 16px;
+                    font-size: 18px;
+                    color: #0B1D30;
+                }
+                .text{
+                    font-size: 14px;
+                    color: #757F92;
+                }
+            }
+        }
+        .pics{
+            display: flex;
+            justify-content: space-between;
+            .icon{
+                width: 60px;
+            }
+            .text{
+                width: 340px;
+            }
+            h6{
+                margin: 30px 0 10px;
+                font-size: 28px;
+                color: #0B1D30;
+            }
+            .desc{
+                font-size: 15px;
+                color: #757F92;
+            }
+            .pro-pic{
+                width: 460px;
+            }
+        }
+        .none{
+            padding: 50px 0;
+            text-align: center;
+            img{
+                width: 324px;
+                margin-bottom: 42px;
+            }
+            .text{
+                font-size: 12px;
+                color: #333;
+            }
+        }
+    }
+    /deep/.preview-dia{
+      padding: 20px;
+      .preview-wrap{
+        height: calc(100vh - 80px);
+        overflow: auto;
+      }
+    }
 </style>
\ No newline at end of file
diff --git a/src/router/modules/cityPartner.js b/src/router/modules/cityPartner.js
new file mode 100644
index 0000000..0a5a229
--- /dev/null
+++ b/src/router/modules/cityPartner.js
@@ -0,0 +1,23 @@
+import BasicLayout from '@/layouts/home';
+
+const meta = {};
+
+const pre = 'cityPartner-';
+
+export default {
+    path: '/cityPartner',
+    name: 'cityPartner',
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import('@/pages/cityPartner/list'),
+            meta: { title: '城市合伙人' }
+        },
+    ]
+};
diff --git a/src/router/modules/devPlatform.js b/src/router/modules/devPlatform.js
new file mode 100644
index 0000000..7bd6203
--- /dev/null
+++ b/src/router/modules/devPlatform.js
@@ -0,0 +1,23 @@
+import BasicLayout from '@/layouts/home';
+
+const meta = {};
+
+const pre = 'devPlatform-';
+
+export default {
+    path: '/devPlatform',
+    name: 'devPlatform',
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import('@/pages/devPlatform/list'),
+            meta: { title: '开发者平台' }
+        },
+    ]
+};
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index a65f835..ec9fd1d 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -1,12 +1,12 @@
-import BasicLayout from "@/layouts/home";
+import BasicLayout from '@/layouts/home';
 
 const meta = {};
 
-const pre = "index-";
+const pre = 'index-';
 
 export default {
-    path: "/index",
-    name: "index",
+    path: '/index',
+    name: 'index',
     redirect: {
         name: `${pre}list`
     },
@@ -16,8 +16,8 @@ export default {
         {
             name: `${pre}list`,
             path: `list`,
-            component: () => import("@/pages/index/list"),
-            meta: { title: "首页" }
-        }
+            component: () => import('@/pages/index/list'),
+            meta: { title: '首页' }
+        },
     ]
 };
diff --git a/src/router/permission.js b/src/router/permission.js
index 7f66bfd..034151f 100644
--- a/src/router/permission.js
+++ b/src/router/permission.js
@@ -2,26 +2,15 @@ import router from "./index";
 import Setting from "@/setting";
 import util from "@/libs/util";
 
+const whiteList = ['/index/list', '/cityPartner/list', '/devPlatform/list'] // 白名单
 router.beforeEach((to, from, next) => {
     document.title = Setting.titleSuffix;
     const role = util.local.get(Setting.tokenKey);
-    if (!role && to.path !== "/login") {
-        next("/login");
-    } else if (role && to.path == "/login") {
-        next("/index");
+    if (!role && to.path !== '/login' && !whiteList.includes(to.path)) {
+        next('/index/list')
+    } else if(role && to.path == '/login') {
+        next('/index')
     } else {
-        let mg = from.query.mg;
-        if (mg) {
-            if (!to.query.mg) {
-                next({
-                    path: to.path,
-                    query: { mg }
-                });
-            } else {
-                next();
-            }
-        } else {
-            next();
-        }
+        next()
     }
 });
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 2e71d07..bf98e39 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,4 +1,6 @@
 import index from "./modules/index";
+import cityPartner from "./modules/cityPartner";
+import devPlatform from "./modules/devPlatform";
 import appraisal from "./modules/appraisal";
 import station from "./modules/station";
 import ass from "./modules/ass";
@@ -8,24 +10,14 @@ import course from "./modules/course";
 import info from "./modules/info";
 import match from "./modules/match";
 
-import BasicLayout from "@/layouts/home";
-
 const frameIn = [
     {
         path: "/",
-        redirect: "/login"
-    },
-    {
-        path: "/index",
-        redirect: "/station"
-    },
-    {
-        path: "/",
-        component: () => BasicLayout,
-        meta: { title: "首页" },
-        children: []
+        redirect: "/index"
     },
     index,
+    cityPartner,
+    devPlatform,
     appraisal,
     station,
     ass,
diff --git a/src/styles/default/index.scss b/src/styles/default/index.scss
index 4419db2..a5438e9 100644
--- a/src/styles/default/index.scss
+++ b/src/styles/default/index.scss
@@ -1,6 +1,6 @@
 /* 改变主题色变量 */
 
-$--color-primary: #9076FF;
+$--color-primary: #007EFF;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
diff --git a/src/styles/var.scss b/src/styles/var.scss
index 94599b2..3226dcd 100644
--- a/src/styles/var.scss
+++ b/src/styles/var.scss
@@ -1,5 +1,6 @@
-$main-color: #9076FF;
-$inner-width: 1440px;
+$main-color: #007EFF;
+$max-width: 1440px;
+$min-width: 1280px;
 
 @mixin ellipsis {
   overflow: hidden;
diff --git a/vue.config.js b/vue.config.js
index 44813e8..08992b8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,24 +1,9 @@
-// 引入等比适配插件
-const px2rem = require("postcss-px2rem");
-
-// 配置基本大小
-const postcss = px2rem({
-    // 基准大小 baseSize，需要和rem.js中相同
-    remUnit: 16
-});
-
 const Setting = require("./src/setting.env");
 
-// 使用等比适配插件
 module.exports = {
     lintOnSave: true,
     css: {
         loaderOptions: {
-            postcss: {
-                plugins: [
-                    postcss
-                ]
-            },
             sass: {
                 prependData: `@import "@/styles/var.scss";`
             }