未登录前三个页面及登录页面制作完成

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>

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>

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>

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>

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>

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>

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>

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>

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: '城市合伙人' }
+        },
+    ]
+};

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: '开发者平台' }
+        },
+    ]
+};

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: '首页' }
+        },
     ]
 };

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()
     }
 });

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,

src/styles/default/index.scss

@@ -1,6 +1,6 @@
 /* 改变主题色变量 */
 
-$--color-primary: #9076FF;
+$--color-primary: #007EFF;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';

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;

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";`
             }