diff --git a/src/assets/img/05学生-练习记录_03.png b/src/assets/img/05学生-练习记录_03.png
deleted file mode 100644
index b8ac8df..0000000
Binary files a/src/assets/img/05学生-练习记录_03.png and /dev/null differ
diff --git a/src/assets/img/05学生-练习记录_05.png b/src/assets/img/05学生-练习记录_05.png
deleted file mode 100644
index 4ce1390..0000000
Binary files a/src/assets/img/05学生-练习记录_05.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩1.png b/src/assets/img/17查看成绩1.png
deleted file mode 100644
index d72e431..0000000
Binary files a/src/assets/img/17查看成绩1.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩2.png b/src/assets/img/17查看成绩2.png
deleted file mode 100644
index 2cbad43..0000000
Binary files a/src/assets/img/17查看成绩2.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩3.png b/src/assets/img/17查看成绩3.png
deleted file mode 100644
index 255f71e..0000000
Binary files a/src/assets/img/17查看成绩3.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩4.png b/src/assets/img/17查看成绩4.png
deleted file mode 100644
index 5f19251..0000000
Binary files a/src/assets/img/17查看成绩4.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩5.png b/src/assets/img/17查看成绩5.png
deleted file mode 100644
index e1ddec9..0000000
Binary files a/src/assets/img/17查看成绩5.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩6.png b/src/assets/img/17查看成绩6.png
deleted file mode 100644
index cccb558..0000000
Binary files a/src/assets/img/17查看成绩6.png and /dev/null differ
diff --git a/src/assets/img/17查看成绩7.png b/src/assets/img/17查看成绩7.png
deleted file mode 100644
index 55ce53a..0000000
Binary files a/src/assets/img/17查看成绩7.png and /dev/null differ
diff --git a/src/assets/img/back.png b/src/assets/img/back.png
deleted file mode 100644
index 1eb13f7..0000000
Binary files a/src/assets/img/back.png and /dev/null differ
diff --git a/src/assets/img/bg_1.png b/src/assets/img/bg_1.png
deleted file mode 100644
index 02fb9f7..0000000
Binary files a/src/assets/img/bg_1.png and /dev/null differ
diff --git a/src/assets/img/bg_2.png b/src/assets/img/bg_2.png
deleted file mode 100644
index 62311da..0000000
Binary files a/src/assets/img/bg_2.png and /dev/null differ
diff --git a/src/assets/img/course-bg.png b/src/assets/img/course-bg.png
new file mode 100644
index 0000000..45479fc
Binary files /dev/null and b/src/assets/img/course-bg.png differ
diff --git a/src/assets/img/get.png b/src/assets/img/get.png
deleted file mode 100644
index 1408b1d..0000000
Binary files a/src/assets/img/get.png and /dev/null differ
diff --git a/src/assets/img/icon-weigouxuan.png b/src/assets/img/icon-weigouxuan.png
deleted file mode 100644
index e74d5c2..0000000
Binary files a/src/assets/img/icon-weigouxuan.png and /dev/null differ
diff --git a/src/assets/img/icon-xiangyou.png b/src/assets/img/icon-xiangyou.png
deleted file mode 100644
index 63a09e1..0000000
Binary files a/src/assets/img/icon-xiangyou.png and /dev/null differ
diff --git a/src/assets/img/icon-yigouxuan.png b/src/assets/img/icon-yigouxuan.png
deleted file mode 100644
index d1c0d1c..0000000
Binary files a/src/assets/img/icon-yigouxuan.png and /dev/null differ
diff --git a/src/assets/img/icon_1.png b/src/assets/img/icon_1.png
deleted file mode 100644
index a134364..0000000
Binary files a/src/assets/img/icon_1.png and /dev/null differ
diff --git a/src/assets/img/icon_qq.png b/src/assets/img/icon_qq.png
deleted file mode 100644
index 203ecf1..0000000
Binary files a/src/assets/img/icon_qq.png and /dev/null differ
diff --git a/src/assets/img/icon_wechat.png b/src/assets/img/icon_wechat.png
deleted file mode 100644
index 00d0604..0000000
Binary files a/src/assets/img/icon_wechat.png and /dev/null differ
diff --git a/src/assets/img/img.jpg b/src/assets/img/img.jpg
deleted file mode 100644
index cbe6c00..0000000
Binary files a/src/assets/img/img.jpg and /dev/null differ
diff --git a/src/assets/img/info-banner.png b/src/assets/img/info-banner.png
deleted file mode 100644
index 2314185..0000000
Binary files a/src/assets/img/info-banner.png and /dev/null differ
diff --git a/src/assets/img/info-bg.png b/src/assets/img/info-bg.png
new file mode 100644
index 0000000..95cb090
Binary files /dev/null and b/src/assets/img/info-bg.png differ
diff --git a/src/assets/img/info-bg1.png b/src/assets/img/info-bg1.png
new file mode 100644
index 0000000..e0bdb46
Binary files /dev/null and b/src/assets/img/info-bg1.png differ
diff --git a/src/assets/img/info-bg2.png b/src/assets/img/info-bg2.png
new file mode 100644
index 0000000..7ef01ad
Binary files /dev/null and b/src/assets/img/info-bg2.png differ
diff --git a/src/assets/img/info1.png b/src/assets/img/info1.png
new file mode 100644
index 0000000..6cde586
Binary files /dev/null and b/src/assets/img/info1.png differ
diff --git a/src/assets/img/info2.png b/src/assets/img/info2.png
new file mode 100644
index 0000000..45db3ac
Binary files /dev/null and b/src/assets/img/info2.png differ
diff --git a/src/assets/img/info3.png b/src/assets/img/info3.png
new file mode 100644
index 0000000..d99a2c6
Binary files /dev/null and b/src/assets/img/info3.png differ
diff --git a/src/assets/img/match-bg.png b/src/assets/img/match-bg.png
new file mode 100644
index 0000000..37d86a8
Binary files /dev/null and b/src/assets/img/match-bg.png differ
diff --git a/src/assets/img/match-bg1.png b/src/assets/img/match-bg1.png
new file mode 100644
index 0000000..9c1fafd
Binary files /dev/null and b/src/assets/img/match-bg1.png differ
diff --git a/src/assets/img/match-bg2.png b/src/assets/img/match-bg2.png
new file mode 100644
index 0000000..5ea0024
Binary files /dev/null and b/src/assets/img/match-bg2.png differ
diff --git a/src/assets/img/person/bg.png b/src/assets/img/person/bg.png
deleted file mode 100644
index 3cd9a55..0000000
Binary files a/src/assets/img/person/bg.png and /dev/null differ
diff --git a/src/assets/img/person/manag.png b/src/assets/img/person/manag.png
deleted file mode 100644
index 5cb92fd..0000000
Binary files a/src/assets/img/person/manag.png and /dev/null differ
diff --git a/src/assets/img/person/user.png b/src/assets/img/person/user.png
deleted file mode 100644
index 6a2cafc..0000000
Binary files a/src/assets/img/person/user.png and /dev/null differ
diff --git a/src/assets/img/record1.png b/src/assets/img/record1.png
new file mode 100644
index 0000000..4108679
Binary files /dev/null and b/src/assets/img/record1.png differ
diff --git a/src/assets/img/record2.png b/src/assets/img/record2.png
new file mode 100644
index 0000000..4ff229f
Binary files /dev/null and b/src/assets/img/record2.png differ
diff --git a/src/assets/img/record3.png b/src/assets/img/record3.png
new file mode 100644
index 0000000..2c0e44b
Binary files /dev/null and b/src/assets/img/record3.png differ
diff --git a/src/assets/img/record4.png b/src/assets/img/record4.png
new file mode 100644
index 0000000..b1bc56e
Binary files /dev/null and b/src/assets/img/record4.png differ
diff --git a/src/assets/img/record5.png b/src/assets/img/record5.png
new file mode 100644
index 0000000..ea43c27
Binary files /dev/null and b/src/assets/img/record5.png differ
diff --git a/src/assets/img/record6.png b/src/assets/img/record6.png
new file mode 100644
index 0000000..909e580
Binary files /dev/null and b/src/assets/img/record6.png differ
diff --git a/src/assets/img/remove-gray.png b/src/assets/img/remove-gray.png
deleted file mode 100644
index f8bf9f4..0000000
Binary files a/src/assets/img/remove-gray.png and /dev/null differ
diff --git a/src/assets/img/search-gray.png b/src/assets/img/search-gray.png
deleted file mode 100644
index 551dbc3..0000000
Binary files a/src/assets/img/search-gray.png and /dev/null differ
diff --git a/src/assets/img/search.png b/src/assets/img/search.png
new file mode 100644
index 0000000..7bff35a
Binary files /dev/null and b/src/assets/img/search.png differ
diff --git a/src/assets/img/station-bg.png b/src/assets/img/station-bg.png
new file mode 100644
index 0000000..6b63eb4
Binary files /dev/null and b/src/assets/img/station-bg.png differ
diff --git a/src/assets/img/station1.png b/src/assets/img/station1.png
deleted file mode 100644
index 2e91783..0000000
Binary files a/src/assets/img/station1.png and /dev/null differ
diff --git a/src/assets/img/station10.png b/src/assets/img/station10.png
deleted file mode 100644
index 17014ed..0000000
Binary files a/src/assets/img/station10.png and /dev/null differ
diff --git a/src/assets/img/station11.png b/src/assets/img/station11.png
deleted file mode 100644
index af52b2e..0000000
Binary files a/src/assets/img/station11.png and /dev/null differ
diff --git a/src/assets/img/station12.png b/src/assets/img/station12.png
deleted file mode 100644
index 0dc928f..0000000
Binary files a/src/assets/img/station12.png and /dev/null differ
diff --git a/src/assets/img/station2.png b/src/assets/img/station2.png
deleted file mode 100644
index 56ec266..0000000
Binary files a/src/assets/img/station2.png and /dev/null differ
diff --git a/src/assets/img/station3.png b/src/assets/img/station3.png
deleted file mode 100644
index 44b75d2..0000000
Binary files a/src/assets/img/station3.png and /dev/null differ
diff --git a/src/assets/img/station4.png b/src/assets/img/station4.png
deleted file mode 100644
index 9126c65..0000000
Binary files a/src/assets/img/station4.png and /dev/null differ
diff --git a/src/assets/img/station5.png b/src/assets/img/station5.png
deleted file mode 100644
index b4f5fe5..0000000
Binary files a/src/assets/img/station5.png and /dev/null differ
diff --git a/src/assets/img/station6.png b/src/assets/img/station6.png
deleted file mode 100644
index 66c7e19..0000000
Binary files a/src/assets/img/station6.png and /dev/null differ
diff --git a/src/assets/img/station7.png b/src/assets/img/station7.png
deleted file mode 100644
index 4e4df0d..0000000
Binary files a/src/assets/img/station7.png and /dev/null differ
diff --git a/src/assets/img/station8.png b/src/assets/img/station8.png
deleted file mode 100644
index cc3246f..0000000
Binary files a/src/assets/img/station8.png and /dev/null differ
diff --git a/src/assets/img/station9.png b/src/assets/img/station9.png
deleted file mode 100644
index 29fe2a6..0000000
Binary files a/src/assets/img/station9.png and /dev/null differ
diff --git a/src/assets/img/student1.png b/src/assets/img/student1.png
deleted file mode 100644
index 7b4971c..0000000
Binary files a/src/assets/img/student1.png and /dev/null differ
diff --git a/src/assets/img/student2.png b/src/assets/img/student2.png
deleted file mode 100644
index 0da0bed..0000000
Binary files a/src/assets/img/student2.png and /dev/null differ
diff --git a/src/assets/img/student3.png b/src/assets/img/student3.png
deleted file mode 100644
index 027bcd7..0000000
Binary files a/src/assets/img/student3.png and /dev/null differ
diff --git a/src/assets/img/student4.png b/src/assets/img/student4.png
deleted file mode 100644
index 8a1c60d..0000000
Binary files a/src/assets/img/student4.png and /dev/null differ
diff --git a/src/assets/img/trash.png b/src/assets/img/trash.png
new file mode 100644
index 0000000..275feeb
Binary files /dev/null and b/src/assets/img/trash.png differ
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index e250b1d..79876fc 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -2,7 +2,7 @@
     <div class="header">
         <a class="logo" @click="toIndex">
             <template v-if="token">
-                <img class="logo" :src="logoUrl" />
+                <img :src="logoUrl" width="50" height="50" />
                 <span class="title">{{title}}</span>
             </template>
             <img v-else src="@/assets/img/logo.png" alt="">
@@ -12,10 +12,10 @@
             <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>
+                        <el-avatar :size="35" :src="avatar"></el-avatar>
+                        <span class="username">{{ userName }}</span>
                     </div>
-                    <el-divider class="m-l-20" direction="vertical"></el-divider>
+                    <el-divider direction="vertical"></el-divider>
                     <a class="logout" @click="logout">退出</a>
                 </template>
                 <router-link v-else class="login" to="/login" target="_blank">
@@ -46,7 +46,7 @@ export default {
         ])
     },
     mounted() {
-        if (token) {
+        if (this.token) {
             this.getSystemDetail();
             this.getUserInfo();
         }
@@ -107,6 +107,9 @@ $height: 64px;
         color: #568DF2;
         line-height: $height;
         cursor: pointer;
+        img {
+            margin-right: 10px;
+        }
     }
     .title {
         font-size: 18px;
@@ -115,33 +118,27 @@ $height: 64px;
     .user-wrap {
         display: inline-flex;
         align-items: center;
-        .user {
-            display: inline-flex;
-            align-items: center;
-            cursor: pointer;
-        }
+    }
+    .user {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
     }
     .el-divider--vertical {
         width: 2px;
         height: 15px;
-    }
-    .el-divider {
+        margin-left: 15px;
         background-color: #D8D8D8;
     }
-    .user-avator {
+    .username {
         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;
+        cursor: pointer;
     }
     .login{
         display: inline-flex;
diff --git a/src/pages/account/login/index.vue b/src/pages/account/login/index.vue
index f685949..0345efb 100644
--- a/src/pages/account/login/index.vue
+++ b/src/pages/account/login/index.vue
@@ -145,7 +145,7 @@ export default {
                 if (valid) {
                     this.form.distinguish = Number(this.activeName);
                     this.login(this.form).then(() => {
-                        let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/index";
+                        let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/station";
                         this.$router.replace(redirect);
                     }).catch(res => {
                         if (res && res.status == 30001) {
diff --git a/src/pages/cityPartner/list/index.vue b/src/pages/cityPartner/list/index.vue
index cd8efe2..7c6df4b 100644
--- a/src/pages/cityPartner/list/index.vue
+++ b/src/pages/cityPartner/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="wrap">
+    <div class="wrap index">
         <div class="banner">
             <h6>城市合伙人招募中</h6>
             <p class="text">携手共创教育信息化新未来，合伙共享产业互联领域新红利</p>
diff --git a/src/pages/course/list/index.vue b/src/pages/course/list/index.vue
index c75c688..3da379a 100644
--- a/src/pages/course/list/index.vue
+++ b/src/pages/course/list/index.vue
@@ -1,26 +1,24 @@
 <template>
-    <div class="box">
+    <div class="wrap index">
         <div class="search">
-            <input type="text" placeholder="请输入课程名称" v-model="keyword" />
-            <button>搜索</button>
+            <h6>精品课程，精彩讲解</h6>
+            <div class="input">
+                <img src="@/assets/img/search.png" alt="">
+                <input type="text" placeholder="请输入课程名称" v-model="keyword">
+            </div>
         </div>
-
-        <div class="main">
-            <div class="filter">
+        <!-- 课程筛选 -->
+        <div class="filter">
+            <div class="wrap-inner">
                 <dl>
                     <dt>课程分类：</dt>
-                    <dd>
-                        <el-select v-model="classificationId" clearable placeholder="请选择课程分类" size="small"
-                                   @change="getData">
-                            <el-option label="不限" value=""></el-option>
-                            <el-option v-for="(item,index) in classificationList" :key="index" :label="item.name"
-                                       :value="item.id"></el-option>
-                        </el-select>
-                    </dd>
+                    <dd v-for="(item, index) in classificationList" :key="index" :class="{active: classificationId == item.id}" @click="changeType(item.id)">{{ item.name }}</dd>
                 </dl>
             </div>
-
-            <div class="courses">
+        </div>
+        <!-- 课程列表 -->
+        <div class="courses">
+            <div class="wrap-inner">
                 <template v-if="courseData.length">
                     <ul>
                         <li v-for="(item, index) in courseData" :key="index" @click="toDetail(item.id)">
@@ -30,8 +28,7 @@
                         </li>
                     </ul>
                     <div class="pagination">
-                        <el-pagination background layout="total, prev, pager, next" :total="totals"
-                                       @current-change="handleCurrentChange" :current-page="pageNo">
+                        <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
                         </el-pagination>
                     </div>
                 </template>
@@ -51,7 +48,6 @@
 <script>
 import { Loading } from "element-ui";
 import bus from "@/libs/bus";
-
 export default {
     name: "course",
     data() {
@@ -59,7 +55,12 @@ export default {
             userId: this.$store.state.userId,
             schoolId: this.$store.state.schoolId,
             classificationId: "",
-            classificationList: [],
+            classificationList: [
+                {
+                    id: '',
+                    name: '不限'
+                }
+            ],
             courseData: [],
             keyword: "",
             totals: 0,
@@ -108,9 +109,8 @@ export default {
         },
         getClassification() {
             this.$get(this.api.queryGlClassification).then(res => {
-                this.classificationList = res.classificationList;
-            }).catch(res => {
-            });
+                this.classificationList = [...this.classificationList, ...res.classificationList]
+            }).catch(res => {})
         },
         changeType(type) {
             this.classificationId = type;
@@ -128,148 +128,118 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
-    padding: 20px;
-    background-color: #fff;
-
-    .search {
-        position: relative;
-        width: 30%;
-        margin: 50px auto;
-        border-radius: 30px;
-        border: 1px solid #9076FF;
-        border-right: 0;
-        overflow: hidden;
-
-        input {
-            width: 100%;
-            height: 44px;
-            line-height: 44px;
-            padding: 0 20px;
-            font-size: 14px;
-            color: #333;
-            border: 0;
-            outline: none !important;
-            box-sizing: border-box;
-        }
-
-        button {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 0 20px;
-            line-height: 46px;
-            color: #fff;
-            background-color: #9076FF;
-            border: 0;
-            outline: none !important;
-        }
+.search {
+    position: relative;
+    padding: 121px 0 167px;
+    text-align: center;
+    background: url(../../../assets/img/course-bg.png) 0 0/100% 100% no-repeat;
+    h6 {
+        margin-bottom: 25px;
+        font-size: 32px;
+        color: #fff;
     }
-
-    .main {
-        width: 70%;
-        min-width: 920px;
-        padding: 40px;
+    .input {
+        position: relative;
+        width: 700px;
         margin: 0 auto;
-        border-radius: 16px;
-        background-color: #fdfdfd;
-        box-sizing: border-box;
-        .filter {
-            width: 100%;
-            margin-bottom: 10px;
-            dl {
-                //display: flex;
-                line-height: 30px;
-                dt {
-                    color: rgba(0, 0, 0, .85);
-                    font-size: 14px;
-                }
-
-                dd {
-                    display: inline-flex;
-                    align-items: center;
-
-                    span {
-                        padding: 2px 10px;
-                        margin: 0 10px;
-                        color: rgba(0, 0, 0, .65);
-                        font-size: 14px;
-
-                        cursor: pointer;
-
-                        &:hover {
-                            color: #CC221C;
-                        }
-
-                        &.classification {
-                            border-radius: 4px;
-                            color: #fff;
-                            background-color: #CC221C;
-                        }
-                    }
+    }
+    img {
+        position: absolute;
+        top: 19px;
+        left: 14px;
+    }
+    input {
+        width: 100%;
+        height: 62px;
+        line-height: 62px;
+        padding: 0 50px;
+        font-size: 18px;
+        color: #333;
+        border: 0;
+        outline: none;
+        border-radius: 4px;
+    }
+}
+.wrap {
+    .filter {
+        width: 100%;
+        margin-bottom: 10px;
+        background-color: #fff;
+        dl {
+            display: flex;
+            line-height: 70px;
+            dt {
+                color: #333;
+                font-size: 16px;
+                font-weight: 600;
+            }
+            dd {
+                margin: 0 10px;
+                color: #333;
+                font-size: 16px;
+                cursor: pointer;
+                &.active {
+                    color: $main-color;
                 }
             }
         }
+    }
+    .courses {
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        li {
+            width: 24%;
+            min-height: 250px;
+            overflow: hidden;
+            padding: 18px;
+            margin: 10px .5%;
+            cursor: pointer;
+            border-radius: 8px;
+            background-color: #fff;
+            transition: all 0.3s;
+
+            img {
+                width: 100%;
+                height: 165px;
+            }
 
-        .courses {
-            ul {
-                display: flex;
-                flex-wrap: wrap;
-
-                li {
-                    width: 24%;
-                    min-height: 250px;
-                    overflow: hidden;
-                    padding: 10px;
-                    margin: 10px .5%;
-                    box-sizing: border-box;
-                    cursor: pointer;
-                    border-radius: 8px;
-                    background-color: #fff;
-                    transition: all 0.3s;
-
-                    img {
-                        width: 100%;
-                        height: 165px;
-                    }
-
-                    .title {
-                        margin: 10px 0 5px;
-                        color: #333;
-                        font-size: 16px;
-                        word-wrap: break-word;
-                        word-break: break-all;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                    }
-
-                    .desc span {
-                        color: #f00;
-                        font-size: 14px;
-                        background-color: #f00;
-                    }
-
-                    .desc {
-                        color: #999;
-                        font-size: 14px;
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
-                        -webkit-line-clamp: 2;
-                        overflow: hidden;
+            .title {
+                margin: 10px 0 5px;
+                color: #0B1D30;
+                font-size: 16px;
+                word-wrap: break-word;
+                word-break: break-all;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
 
-                        &.ie {
-                            height: 80px;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                        }
-                    }
+            .desc span {
+                color: #f00;
+                font-size: 14px;
+                background-color: #f00;
+            }
 
-                    &:hover {
-                        box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
-                    }
+            .desc {
+                color: #757F92;
+                font-size: 14px;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+
+                &.ie {
+                    height: 80px;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
                 }
             }
+
+            &:hover {
+                box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
+            }
         }
     }
 }
diff --git a/src/pages/devPlatform/list/index.vue b/src/pages/devPlatform/list/index.vue
index a49dc7e..6c7a199 100644
--- a/src/pages/devPlatform/list/index.vue
+++ b/src/pages/devPlatform/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="wrap">
+    <div class="wrap index">
         <div class="banner">
             <h6>教育数字化产品开发者平台</h6>
             <p class="text">与3000所高校共建数字化教育产业未来</p>
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 1c8c59a..b554dc8 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="wrap">
+    <div class="wrap index">
         <div class="banner">
             <el-carousel height="420px" :autoplay="false">
                 <el-carousel-item>
diff --git a/src/pages/info/list/index.vue b/src/pages/info/list/index.vue
index 0dd3364..1821f10 100644
--- a/src/pages/info/list/index.vue
+++ b/src/pages/info/list/index.vue
@@ -1,69 +1,70 @@
 <template>
-    <div>
-        <div class="banner-con"></div>
+    <div class="wrap index">
+        <div class="banner"></div>
         <div class="main">
-            <div class="nav">
-                <div class="sub-title">最新资讯</div>
-                <el-menu
-                    v-if="menuList.length"
-                    unique-opened
-                    :default-active="defaultIndex"
-                    @select="initData">
-
-                    <template v-for="item in menuList">
-                        <template v-if="item.secondColumn.length">
-                            <el-submenu :index="item.id" :key="item.id">
-                                <template slot="title">
+            <div class="center-wrap">
+                <div class="nav">
+                    <el-menu
+                        v-if="menuList.length"
+                        unique-opened
+                        :default-active="defaultIndex"
+                        @select="initData">
+                        <template v-for="item in menuList">
+                            <template v-if="item.secondColumn.length">
+                                <el-submenu :index="item.id" :key="item.id">
+                                    <template slot="title">
+                                        <i :class="item.icon"></i>
+                                        <span slot="title">{{ item.name }}</span>
+                                    </template>
+                                    <template v-for="subItem in item.secondColumn">
+                                        <el-menu-item
+                                            :index="subItem.id"
+                                            :key="subItem.id"
+                                        >{{ subItem.name }}</el-menu-item>
+                                    </template>
+                                </el-submenu>
+                            </template>
+                            <template v-else>
+                                <el-menu-item :index="item.id" :key="item.id">
                                     <i :class="item.icon"></i>
                                     <span slot="title">{{ item.name }}</span>
-                                </template>
-                                <template v-for="subItem in item.secondColumn">
-                                    <el-menu-item
-                                        :index="subItem.id"
-                                        :key="subItem.id"
-                                    >{{ subItem.name }}</el-menu-item>
-                                </template>
-                            </el-submenu>
-                        </template>
-                        <template v-else>
-                            <el-menu-item :index="item.id" :key="item.id">
-                                <i :class="item.icon"></i>
-                                <span slot="title">{{ item.name }}</span>
-                            </el-menu-item>
+                                </el-menu-item>
+                            </template>
                         </template>
-                    </template>
-                </el-menu>
-            </div>
-
-            <div class="list-wrap">
-                <div class="list">
-                    <template v-if="listData.length">
-                        <ul>
-                            <li v-for="(item,index) in listData" :key="index" @click="toArticle(item.id)">
-                                <img :src="item.coverUrl" alt="">
-                                <div class="text">
-                                    <div class="title">{{item.title}}</div>
-                                    <div class="desc" :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" v-html="item.content"></div>
-                                    <div class="metas">
-                                        <span>作者：{{item.author}}</span>
-                                        <span>{{item.date.replace(' 00:00:00','')}}</span>
+                    </el-menu>
+                </div>
+                <div class="list-wrap">
+                    <div class="list">
+                        <template v-if="listData.length">
+                            <ul>
+                                <li v-for="(item,index) in listData" :key="index" @click="toArticle(item.id)">
+                                    <img :src="item.coverUrl" alt="">
+                                    <div class="text">
+                                        <div class="title">{{item.title}}</div>
+                                        <div class="metas">
+                                            <span>作者：{{item.author}}</span>
+                                            <i class="spe">|</i>
+                                            <span>{{item.date.replace(' 00:00:00','')}}</span>
+                                        </div>
+                                        <div class="desc" :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}" v-html="item.content"></div>
+                                        <a class="detail">查看详情 ></a>
                                     </div>
+                                </li>
+                            </ul>
+                            <div class="pagination">
+                                <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
+                                </el-pagination>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="empty">
+                                <div>
+                                    <img src="@/assets/img/none.png" alt="">
+                                    <p>暂无资讯</p>
                                 </div>
-                            </li>
-                        </ul>
-                        <div class="pagination">
-                            <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo">
-                            </el-pagination>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="empty">
-                            <div>
-                                <img src="@/assets/img/none.png" alt="">
-                                <p>暂无资讯</p>
                             </div>
-                        </div>
-                    </template>
+                        </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -118,7 +119,6 @@ export default {
             this.$get(this.api.queryAllColumns,data).then(res => {
                 this.menuList = res.columnTree
                 // 从文章页返回的情况,需要回到之前进文章页的那个分类
-
                 if(this.historyId){
                     this.defaultIndex = this.historyId
                     this.getContent(this.historyId)
@@ -189,82 +189,97 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.banner-con{
-    width: 100%;
-    height: 200px;
-    background-image: url('../../../assets/img/match-banner.jpg');
-    background-size: 100vw 200px;
-    background-repeat: no-repeat;
+.wrap {
+    .banner {
+        height: 420px;
+        padding: 140px 0 0 180px;
+        background: url(../../../assets/img/info-bg.png) 0 0/100% 100% no-repeat;
+    }
 }
 .main{
-    display: flex;
-    justify-content: center;
-    align-items:flex-start;
-
+    background: url(../../../assets/img/info-bg1.png) (0px 179px)/auto auto no-repeat,
+                url(../../../assets/img/info-bg2.png) (bottom right)/auto auto no-repeat;
+    .center-wrap {
+        display: flex;
+        justify-content: center;
+        align-items:flex-start;
+    }
     .nav{
-        width: 220px;
-        border-radius: 8px;
+        width: 156px;
         overflow: hidden;
-        margin-top: -44px;
-
-        .sub-title{
-            line-height: 88px;
-            color: #fff;
-            font-size: 24px;
-            text-align: center;
-            background: #9076FF;
-        }
-
         /deep/ .el-menu {
+            text-align: right;
             border-right: 0;
-            .el-submenu__title{
-                font-size: 18px;
-                .el-submenu__icon-arrow{
-                    font-size: 18px;
+            .el-menu-item {
+                padding-right: 24px;
+                font-size: 16px;
+                color: #666;
+                border-bottom: 2px solid #f3f6fa;
+                    border-right: 2px solid transparent;
+                &:before {
+                    content: '';
+                    display: inline-block;
+                    width: 3px;
+                    height: 3px;
+                    margin-right: 10px;
+                    vertical-align: middle;
+                    border-radius: 50%;
+                    background-color: #666;
+                }
+                &.is-active {
+                    color: $main-color;
+                    border-right-color: $main-color;
+                    &:before {
+                        background-color: $main-color;
+                    }
                 }
             }
         }
     }
     .list-wrap{
-        width: 50%;
-        margin: 40px 0 0 40px;
-
+        flex: 1;
+        margin-left: 24px;
         .list{
-            padding: 32px;
-            background-color: #fff;
-            border-radius: 8px;
             li{
                 display: flex;
-                padding-bottom: 24px;
-                margin-bottom: 20px;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+                margin-bottom: 12px;
                 cursor: pointer;
                 transition: all 0.3s;
                 background-color: #fff;
+                border-radius: 6px;
                 overflow: hidden;
 
                 img{
-                    width: 200px;
-                    height: 120px;
+                    width: 260px;
+                    height: 195px;
                     border: 0;
                 }
                 .text{
-                    width: calc(100% - 340px);
-                    display: inline-flex;
-                    flex: 1;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    padding: 0 24px;
+                    position: relative;
+                    width: calc(100% - 260px);
+                    padding: 20px 24px;
                     .title{
-                        font-size: 20px;
-                        color: rgba(0,0,0,.85);
+                        font-size: 22px;
+                        color: #0B1D30;
                         overflow: hidden;
                         text-overflow:ellipsis;
                         white-space: nowrap;
                     }
+                    .metas{
+                        display: inline-flex;
+                        align-items: center;
+                        width: 100%;
+                        margin: 10px 0;
+                        font-size: 12px;
+                        color: rgba(0,0,0,.45);
+                        .spe {
+                            margin: 0 10px;
+                        }
+                    }
                     .desc{
                         font-size: 14px;
-                        color: rgba(0,0,0,.65);
+                        color: #333;
+                        line-height: 24px;
                         display: -webkit-box;
                         display:-moz-box;
                         -webkit-box-orient: vertical;
@@ -282,24 +297,12 @@ export default {
                             height: 76px;
                         }
                     }
-                    .metas{
-                        display: inline-flex;
-                        align-items: center;
-                        width: 100%;
-                        font-size: 12px;
-                        color: rgba(0,0,0,.45);
-                        span:first-child{
-                            margin-right: 16px;
-                        }
-                    }
-                }
-                &:hover{
-                    .text{
-                        .title{
-                            color: #9076FF;
-                        }
+                    .detail {
+                        position: absolute;
+                        bottom: 24px;
+                        font-size: 14px;
+                        color: $main-color;
                     }
-                    border-bottom-color: #9076FF;
                 }
             }
         }
diff --git a/src/pages/match/list/index.vue b/src/pages/match/list/index.vue
index f905531..0091cc0 100644
--- a/src/pages/match/list/index.vue
+++ b/src/pages/match/list/index.vue
@@ -1,88 +1,88 @@
 <template>
-    <div class="box">
-        <div class="banner-con"></div>
+    <div class="wrap index">
         <div class="search">
-            <input type="text" placeholder="请输入竞赛名称" v-model="keyword" />
-            <button>搜索</button>
+            <h6>赛事竞技，精彩纷呈</h6>
+            <div class="input">
+                <img src="@/assets/img/search.png" alt="">
+                <input type="text" placeholder="请输入关键词" v-model="keyword">
+            </div>
         </div>
 
         <div class="main">
-            <div class="nav">
-                <div class="sub-title">赛事报名</div>
-                <div class="sidebar">
-                    <div class="item" :class="{ active: way === item.id }" v-for="(item, index) in typeList"
-                         :key="index" @click="changeType(item.id)">{{ item.name }}
-                    </div>
-                </div>
-            </div>
-            <div class="list-wrap">
-                <div class="list">
-                    <template v-if="listData.length">
-                        <ul>
-                            <li v-for="(item,index) in listData" :key="index" @click="toDetail(item)">
-                                <div class="left">
-                                    <div class="cover">
-                                        <img :src="item.coverUrl" alt="">
-                                    </div>
-                                    <div class="info">
-                                        <div class="title">{{ item.name }}</div>
-                                        <div class="metas">
-                                            <div :class="{'flex-top': item.sponsor.split(',').length > 1}">
-                                                <span class="label">主办方：</span>
-                                                <template v-if="item.sponsor.split(',').length > 1">
-                                                    <div>
-                                                        <span v-for="(sponsor,index) in item.sponsor.split(',')"
-                                                              :key="index" class="val a-line">{{ sponsor }}</span>
-                                                    </div>
-                                                </template>
-                                                <span v-else class="val">{{ item.sponsor }}</span>
-                                            </div>
-                                            <div :class="{'flex-top': item.undertaker.split(',').length > 1}">
-                                                <span class="label">承办方：</span>
-                                                <template v-if="item.undertaker.split(',').length > 1">
-                                                    <div>
-                                                        <span v-for="(undertaker,index) in item.undertaker.split(',')"
-                                                              :key="index" class="val a-line">{{ undertaker }}</span>
-                                                    </div>
-                                                </template>
-                                                <span v-else class="val">{{ item.undertaker }}</span>
+            <div class="center-wrap">
+                <ul class="nav">
+                    <li :class="{ active: way === item.id }" v-for="(item, index) in typeList" :key="index" @click="changeType(item.id)">{{ item.name }}
+                    </li>
+                </ul>
+                <div class="list-wrap">
+                    <div class="list">
+                        <template v-if="listData.length">
+                            <ul>
+                                <li v-for="(item,index) in listData" :key="index" @click="toDetail(item)">
+                                    <div class="left">
+                                        <div class="cover">
+                                            <img :src="item.coverUrl" alt="">
+                                        </div>
+                                        <div class="info">
+                                            <div class="title">{{ item.name }}</div>
+                                            <div class="metas">
+                                                <div :class="{'flex-top': item.sponsor.split(',').length > 1}">
+                                                    <span class="label">主办方：</span>
+                                                    <template v-if="item.sponsor.split(',').length > 1">
+                                                        <div>
+                                                            <span v-for="(sponsor,index) in item.sponsor.split(',')"
+                                                                :key="index" class="val a-line">{{ sponsor }}</span>
+                                                        </div>
+                                                    </template>
+                                                    <span v-else class="val">{{ item.sponsor }}</span>
+                                                </div>
+                                                <div :class="{'flex-top': item.undertaker.split(',').length > 1}">
+                                                    <span class="label">承办方：</span>
+                                                    <template v-if="item.undertaker.split(',').length > 1">
+                                                        <div>
+                                                            <span v-for="(undertaker,index) in item.undertaker.split(',')"
+                                                                :key="index" class="val a-line">{{ undertaker }}</span>
+                                                        </div>
+                                                    </template>
+                                                    <span v-else class="val">{{ item.undertaker }}</span>
+                                                </div>
+                                                <p>
+                                                    <span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span>
+                                                </p>
+                                                <p>
+                                                    <span class="label">比赛时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span>
+                                                </p>
                                             </div>
-                                            <p>
-                                                <span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span>
-                                            </p>
-                                            <p>
-                                                <span class="label">比赛时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span>
-                                            </p>
                                         </div>
                                     </div>
+                                    <div class="right">
+                                        <p class="status"
+                                        :class="{wait: item.status == 0 || item.status == 4,signing: item.status == 2,signed: item.status == 1,finish: item.status == 3 || item.status == 5}"
+                                        @click.stop="signup(item)">{{ statusList[item.status] }}</p>
+                                        <p class="end-text" v-if="item.status != 5">
+                                            距离{{ endList[item.status] }}还有
+                                            <template v-if="item.end > 0">{{ item.end }}天</template>
+                                            <em v-else v-countdown="index">{{ item.end }}</em>
+                                        </p>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div class="pagination">
+                                <el-pagination background layout="total, prev, pager, next" :total="totals"
+                                            @current-change="handleCurrentChange"
+                                            :current-page="pageNo">
+                                </el-pagination>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="empty">
+                                <div>
+                                    <img src="@/assets/img/none.png" alt="">
+                                    <p>暂无赛事</p>
                                 </div>
-                                <div class="right">
-                                    <p class="status"
-                                       :class="{wait: item.status == 0 || item.status == 4,signing: item.status == 2,signed: item.status == 1,finish: item.status == 3 || item.status == 5}"
-                                       @click.stop="signup(item)">{{ statusList[item.status] }}</p>
-                                    <p class="end-text" v-if="item.status != 5">
-                                        距离{{ endList[item.status] }}还有
-                                        <template v-if="item.end > 0">{{ item.end }}天</template>
-                                        <em v-else v-countdown="index">{{ item.end }}</em>
-                                    </p>
-                                </div>
-                            </li>
-                        </ul>
-                        <div class="pagination">
-                            <el-pagination background layout="total, prev, pager, next" :total="totals"
-                                           @current-change="handleCurrentChange"
-                                           :current-page="pageNo">
-                            </el-pagination>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="empty">
-                            <div>
-                                <img src="@/assets/img/none.png" alt="">
-                                <p>暂无赛事</p>
                             </div>
-                        </div>
-                    </template>
+                        </template>
+                    </div>
                 </div>
             </div>
         </div>
@@ -327,242 +327,213 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
+.search {
     position: relative;
-    .banner-con{
-        width: 100%;
-        height: 400px;
-        background-image: url('../../../assets/img/info-banner.png');
-        background-size: 100vw 400px;
-        background-repeat: no-repeat;
+    padding: 121px 0 167px;
+    text-align: center;
+    background: url(../../../assets/img/match-bg.png) 0 0/100% 100% no-repeat;
+    h6 {
+        margin-bottom: 25px;
+        font-size: 32px;
+        color: #fff;
+    }
+    .input {
+        position: relative;
+        width: 700px;
+        margin: 0 auto;
     }
-    .search {
-        width: 400px;
+    img {
         position: absolute;
-        top: 175px;
-        left: 50%;
-        margin-left: -200px;
-        border-radius: 30px;
-        border: 1px solid #9076FF;
-        border-right: 0;
-        overflow: hidden;
-
-        input {
-            width: 100%;
-            height: 44px;
-            line-height: 44px;
-            padding: 0 20px;
-            font-size: 14px;
-            color: #333;
-            border: 0;
-            outline: none !important;
-            box-sizing: border-box;
-        }
-
-        button {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 0 20px;
-            line-height: 46px;
-            color: #fff;
-            background-color: #9076FF;
-            border: 0;
-            outline: none !important;
-        }
+        top: 19px;
+        left: 14px;
     }
-
-    .main {
+    input {
+        width: 100%;
+        height: 62px;
+        line-height: 62px;
+        padding: 0 50px;
+        font-size: 18px;
+        color: #333;
+        border: 0;
+        outline: none;
+        border-radius: 4px;
+    }
+}
+.main{
+    background: url(../../../assets/img/match-bg1.png) (0px 95px)/auto auto no-repeat,
+                url(../../../assets/img/match-bg2.png) (98% bottom)/auto auto no-repeat;
+    .center-wrap {
         display: flex;
         justify-content: center;
-        align-items: flex-start;
-        padding-bottom: 40px;
-
-        .nav {
-            width: 220px;
-            border-radius: 8px;
-            overflow: hidden;
-            margin-top: -44px;
-
-            .sub-title {
-                line-height: 88px;
-                color: #fff;
-                font-size: 24px;
-                text-align: center;
-                background: #9076FF;
+        align-items:flex-start;
+    }
+    .nav{
+        width: 156px;
+        text-align: right;
+        overflow: hidden;
+        background-color: #fff;
+        li {
+            padding: 0 24px;
+            font-size: 16px;
+            color: #666;
+            line-height: 48px;
+            border-bottom: 2px solid #f3f6fa;
+            border-right: 2px solid transparent;
+            cursor: pointer;
+            &:before {
+                content: '';
+                display: inline-block;
+                width: 3px;
+                height: 3px;
+                margin-right: 10px;
+                vertical-align: middle;
+                border-radius: 50%;
+                background-color: #666;
             }
-
-            /deep/ .sidebar {
-                background-color: #fff;
-
-                .item {
-                    padding: 15px 0;
-                    color: rgba(0, 0, 0, .85);
-                    font-size: 18px;
-                    text-align: center;
-                    cursor: pointer;
-
-                    &.active {
-                        color: #9076FF;
-                    }
-
-                    &:hover {
-                        background-color: #f4f1ff;
-                    }
+            &.active {
+                color: $main-color;
+                border-right-color: $main-color;
+                &:before {
+                    background-color: $main-color;
                 }
             }
         }
-
-        .list-wrap {
-            width: 50%;
-            min-width: 790px;
-            margin: 40px 0 0 40px;
-
-            .list {
-                padding: 32px;
+    }
+    .list-wrap {
+        flex: 1;
+        margin-left: 24px;
+        .list {
+            li {
+                display: flex;
+                justify-content: space-between;
+                padding: 16px;
+                margin-bottom: 12px;
+                transition: all 0.3s;
+                cursor: pointer;
+                border-radius: 6px;
                 background-color: #fff;
-                border-radius: 8px;
-
-                li {
+                .right {
                     display: flex;
-                    justify-content: space-between;
-                    padding-bottom: 24px;
-                    margin-bottom: 20px;
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-                    transition: all 0.3s;
-                    cursor: pointer;
-
-                    .left {
-                        display: inline-flex;
-
-                        .cover {
-                            img {
-                                width: 200px;
-                                height: 120px;
-                                border-radius: 4px;
-                            }
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: flex-end;
+                    flex: 1;
+
+                    .status {
+                        padding: 0 23px;
+                        line-height: 34px;
+                        font-size: 14px;
+                        color: #fff;
+                        background-color: #52C41A;
+                        border-radius: 4px;
+                        &.wait {
+                            background-color: #FAAD14;
                         }
 
-                        .info {
-                            display: inline-flex;
-                            flex-direction: column;
-                            justify-content: space-between;
-                            margin-left: 20px;
-
-                            .title {
-                                font-size: 20px;
-                                color: rgba(0, 0, 0, .85);
-                            }
-
-                            .metas {
-                                font-size: 14px;
-                                color: #999;
-
-                                div {
-                                    display: flex;
-                                    align-items: center;
-                                    margin-bottom: 5px;
-
-                                    &.flex-top {
-                                        align-items: flex-start;
-                                    }
-                                }
-
-                                .label, .val {
-                                    font-size: 14px;
-                                    color: rgba(0, 0, 0, .65);
-                                    white-space: nowrap;
-                                }
-
-                                .val {
-                                    max-width: 350px;
-                                }
+                        &.signing {
+                            background-color: #9076FF;
+                        }
 
-                                .a-line {
-                                    display: block;
-                                }
-                            }
+                        &.signed {
+                            background-color: #52C41A;
+                        }
 
-                            .desc {
-                                font-size: 14px;
-                            }
+                        &.finish {
+                            background-color: #ccc;
                         }
                     }
 
-                    .right {
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: center;
-                        align-items: flex-end;
-                        flex: 1;
+                    .btn {
+                        padding: 12px 20px;
+                        color: #fff;
+                        background-color: #cb221c;
+                        border-radius: 4px;
+                        cursor: pointer;
 
-                        .status {
-                            padding: 0 15px;
-                            line-height: 32px;
-                            font-size: 12px;
-                            color: #fff;
-                            background-color: #52C41A;
-                            border-radius: 4px;
-
-                            &.wait {
-                                background-color: #FAAD14;
-                            }
+                        &:hover {
+                            opacity: .9;
+                        }
 
-                            &.signing {
-                                background-color: #9076FF;
-                            }
+                        &.disabled {
+                            cursor: not-allowed;
+                            background-color: #969696;
+                        }
+                    }
 
-                            &.signed {
-                                background-color: #52C41A;
-                            }
+                    .end-text {
+                        margin-top: 10px;
+                        color: rgba(0, 0, 0, .65);
+                        font-size: 14px;
+                        white-space: nowrap;
+
+                        em {
+                            font-size: 20px;
+                            font-style: normal;
+                            font-weight: bold;
+                            color: #cb221c;
+                        }
+                    }
+                }
 
-                            &.finish {
-                                background-color: rgba(0, 0, 0, .45);
+                &:hover {
+                    .left {
+                        .info {
+                            .title {
+                                color: $main-color;
                             }
                         }
+                    }
+                }
+            }
+            .left {
+                display: inline-flex;
+                .cover {
+                    img {
+                        width: 220px;
+                        height: 140px;
+                        border-radius: 6px;
+                    }
+                }
 
-                        .btn {
-                            padding: 12px 20px;
-                            color: #fff;
-                            background-color: #cb221c;
-                            border-radius: 4px;
-                            cursor: pointer;
+                .info {
+                    margin-left: 16px;
+                    .title {
+                        margin: 5px 0 15px;
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: #0B1D30;
+                    }
+                    .metas {
+                        font-size: 14px;
+                        color: #666;
 
-                            &:hover {
-                                opacity: .9;
-                            }
+                        div {
+                            display: flex;
+                            align-items: center;
+                            margin-bottom: 5px;
 
-                            &.disabled {
-                                cursor: not-allowed;
-                                background-color: #969696;
+                            &.flex-top {
+                                align-items: flex-start;
                             }
                         }
 
-                        .end-text {
-                            margin-top: 10px;
-                            color: rgba(0, 0, 0, .65);
+                        .label, .val {
                             font-size: 14px;
+                            color: rgba(0, 0, 0, .65);
                             white-space: nowrap;
+                        }
 
-                            em {
-                                font-size: 20px;
-                                font-style: normal;
-                                font-weight: bold;
-                                color: #cb221c;
-                            }
+                        .val {
+                            max-width: 350px;
                         }
-                    }
 
-                    &:hover {
-                        .left {
-                            .info {
-                                .title {
-                                    color: #9076FF;
-                                }
-                            }
+                        .a-line {
+                            display: block;
                         }
+                    }
 
-                        border-bottom-color: #9076FF;
+                    .desc {
+                        font-size: 14px;
                     }
                 }
             }
diff --git a/src/pages/record/list/ass.vue b/src/pages/record/list/ass.vue
index 6996737..4db87ed 100644
--- a/src/pages/record/list/ass.vue
+++ b/src/pages/record/list/ass.vue
@@ -3,8 +3,6 @@
         <el-table
             ref="table"
             class="table"
-            :cell-style="tableRowStyle"
-            :header-cell-style="{background:'#9278FF',color:'#FFFFFF'}"
             :data="listData"
             stripe
         >
diff --git a/src/pages/record/list/index.vue b/src/pages/record/list/index.vue
index ddf6763..9f46486 100644
--- a/src/pages/record/list/index.vue
+++ b/src/pages/record/list/index.vue
@@ -1,44 +1,47 @@
 <template>
     <!--  实验记录  -->
-    <div style="padding: 0 24px">
-        <div class="m-b-20">
-            <div class="overview">
-                <h6>实验概览</h6>
-                <div class="nums">
-                    <div class="item">
-                        <p class="name">姓名</p>
-                        <p class="val">{{ overview.userName }}</p>
-                    </div>
+    <div class="wrap">
+        <div class="block overview">
+            <h6 class="l-title">
+                <img src="@/assets/img/record5.png" alt="">
+                实验概览
+            </h6>
+            <div class="nums">
+                <div class="item">
+                    <p class="val">{{ overview.userName }}</p>
+                    <p class="name">姓名</p>
+                </div>
 
-                    <div class="item">
-                        <p class="name">实验次数</p>
-                        <p class="val">{{ overview.experimentalNum }}</p>
-                    </div>
+                <div class="item">
+                    <p class="val">{{ overview.experimentalNum }}</p>
+                    <p class="name">实验次数(次)</p>
+                </div>
 
-                    <div class="item">
-                        <p class="name">实验总时长</p>
-                        <p class="val">{{ overview.duration ? overview.duration : 0 }}小时</p>
-                    </div>
+                <div class="item">
+                    <p class="val">{{ overview.duration ? overview.duration : 0 }}小时</p>
+                    <p class="name">实验总时长(时)</p>
+                </div>
 
-                    <div class="item">
-                        <p class="name">实验平均分</p>
-                        <p class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</p>
-                    </div>
+                <div class="item">
+                    <p class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</p>
+                    <p class="name">实验平均分</p>
                 </div>
             </div>
         </div>
 
-        <div class="page">
-            <div class="tabs">
-                <a class="item" v-for="(item,index) in tabList" :key="index" :class="{active: index == active}"
-                   @click="tabChange(index)">{{ item }}</a>
-            </div>
+        <div class="block record">
+            <h6 class="l-title">
+                <img src="@/assets/img/record6.png" alt="">
+                实验记录明细
+            </h6>
 
             <div class="tool">
                 <ul class="filter" style="justify-content: space-between;">
-                    <div style="font-size: 16px">实验记录明细</div>
+                    <div class="tabs">
+                        <a class="item" v-for="(item,index) in tabList" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a>
+                    </div>
                     <li style="margin-right: 0">
-                        <label>课程选择</label>
+                        <label>课程选择：</label>
                         <el-select v-model="curriculumId">
                             <el-option
                                 v-for="item in curriculumList"
@@ -47,7 +50,7 @@
                                 :value="item.cid"
                             ></el-option>
                         </el-select>
-                        <el-button style="margin-left: 20px;" size="small" round type="primary" @click="exportData">导出</el-button>
+                        <el-button style="width: 88px;margin-left: 20px;" type="primary" @click="exportData">导出数据</el-button>
                     </li>
                 </ul>
             </div>
@@ -149,87 +152,81 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tabs {
-    display: flex;
-    align-items: center;
-    padding: 20px 0 0;
-    margin-bottom: 10px;
-    background-color: #fff;
-
-    .item {
-        padding: 12px 20px;
-        margin-right: 10px;
-        color: #606266;
-        line-height: 1;
-        border-radius: 4px;
-        background-color: #fff;
-        border: 1px solid #dcdfe6;
-        cursor: pointer;
-
-        &.active {
-            color: #fff;
-            background-color: #9278ff;
-            border-color: #9278ff;
+.block {
+    padding: 16px;
+    margin-bottom: 20px;
+    background: #fff;
+    .l-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        font-size: 16px;
+        font-weight: 400;
+        img {
+            margin-right: 5px;
         }
     }
 }
-
 .overview {
-    padding: 20px;
-    margin-top: 20px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1);
-    border-radius: 10px;
-
-    h6 {
-        margin-bottom: 10px;
-        font-size: 16px;
-        font-weight: 400;
-    }
-
     .nums {
         display: flex;
         justify-content: space-between;
-
         .item:nth-child(1) {
-            background-image: url('../../../assets/img/student1.png');
-            box-shadow: 0px 25px 20px -22px #ec92e0;
+            background-image: url('../../../assets/img/record1.png');
         }
-
         .item:nth-child(2) {
-            background-image: url('../../../assets/img/student2.png');
-            box-shadow: 0px 25px 20px -22px #60b8f6;
+            background-image: url('../../../assets/img/record2.png');
         }
-
         .item:nth-child(3) {
-            background-image: url('../../../assets/img/student3.png');
-            box-shadow: 0px 25px 20px -22px #fe787a;
+            background-image: url('../../../assets/img/record3.png');
         }
-
         .item:nth-child(4) {
-            background-image: url('../../../assets/img/student4.png');
-            box-shadow: 0px 25px 20px -22px #fbbb6e;
+            margin-right: 0;
+            background-image: url('../../../assets/img/record4.png');
         }
-
         .item {
-            width: 24%;
-            padding: 20px 30px;
-            box-shadow: 0px 3px 18px 0px rgba(84, 84, 84, 0.09);
-            border-radius: 8px;
+            flex: 1;
+            padding: 26px 27px;
+            margin-right: 19px;
             background-size: 100% 100%;
             background-repeat: no-repeat;
-
             .name {
-                font-size: 18px;
-                color: #ffffff;
+                margin-top: 12px;
+                color: #fff;
+                font-size: 14px;
             }
-
             .val {
-                margin-top: 10px;
-                color: #ffffff;
-                font-size: 30px;
+                font-size: 26px;
+                color: #fff;
             }
         }
     }
 }
+.record {
+    .tool {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16px;
+    }
+}
+.tabs {
+    display: inline-flex;
+    align-items: center;
+    .item {
+        width: 80px;
+        margin-right: 16px;
+        text-align: center;
+        color: #666;
+        line-height: 34px;
+        border-radius: 4px;
+        background-color: #fff;
+        border: 1px solid #CACFDB;
+        cursor: pointer;
+        &.active {
+            color: #fff;
+            background-color: $main-color;
+            border-color: $main-color;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/record/list/practice.vue b/src/pages/record/list/practice.vue
index a57e7e7..3636b4f 100644
--- a/src/pages/record/list/practice.vue
+++ b/src/pages/record/list/practice.vue
@@ -1,7 +1,6 @@
 <template>
     <div>
-        <el-table :cell-style="tableRowStyle" :header-cell-style="{background:'#9278FF',color:'#FFFFFF'}"
-                  :data="listData" stripe>
+        <el-table :data="listData" stripe>
             <el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column>
             <el-table-column prop="curriculumName" label="课程名称" align="center"></el-table-column>
             <el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column>
@@ -16,8 +15,7 @@
             </el-table-column>
         </el-table>
         <div class="pagination">
-            <el-pagination background :current-page="page" layout="total, prev, pager, next" :total="total"
-                           @current-change="handleCurrentChange"></el-pagination>
+            <el-pagination background :current-page="page" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
         </div>
     </div>
 </template>
diff --git a/src/pages/setting/person/index.vue b/src/pages/setting/person/index.vue
index 2c6bf00..82bd99b 100644
--- a/src/pages/setting/person/index.vue
+++ b/src/pages/setting/person/index.vue
@@ -1,1442 +1,118 @@
 <template>
-    <!--  个人中心  -->
     <div class="wrap">
-        <!-- 头像部分 -->
-        <div class="header">
-            <el-avatar :size="80" :src="this.avatar" class="Headtop"></el-avatar>
-            <div style="color:#9278FF;font-size:14px;font-family:MicrosoftYaHei;margin-top:5px;">
-                <el-upload
-                    class="upload-demo"
-                    :headers="{token}"
-                    :action="this.api.uploadUserAvatars"
-                    name="file"
-                    :limit="1"
-                    :on-success="getRes"
-                >
-                    <div>点击更改头像</div>
-                </el-upload>
-            </div>
-        </div>
-
-        <!-- 用户信息 -->
-        <div class="card" style="margin-top: -65px">
-            <p class="block-title" style="display: flex;justify-content: space-between;align-items: center;">
-                <span><img src="@/assets/img/person/user.png" alt=""> 用户信息</span>
-                <el-button type="primary" size="small" @click="save">更新资料</el-button>
-            </p>
-            <p class="meta-title">
-                <span>个人信息</span>
-            </p>
-            <div class="information">
-                <div class="line">
-                    <div class="item">
-                        <span>姓名</span>
-                        <input id="username" class="username" placeholder="请输入姓名" type="text"
-                               v-model="personalInformation.userName" />
-                        <!-- <label for="username">
-                            <i class="el-icon-edit"></i>
-                        </label> -->
-                    </div>
-                    <div class="item">
-                        <span>所在国家</span>
-                        <el-select
-                            v-model="personalInformation.countries"
-                            placeholder
-                        >
-                            <el-option
-                                v-for="item in countryList"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            ></el-option>
-                        </el-select>
-                    </div>
-                </div>
-                <div class="line">
-                    <div class="item">
-                        <span>性别</span>
-                        <div class="sexRadio">
-                            <el-radio v-model="personalInformation.sex" :label="1">男</el-radio>
-                            <el-radio v-model="personalInformation.sex" :label="2">女</el-radio>
-                        </div>
-                        <!-- <el-select
-                            v-model="personalInformation.sex"
-                            placeholder
-                        >
-                            <el-option
-                                v-for="item in sexList"
-                                :key="item.value"
-                                :label="item.name"
-                                :value="item.value"
-                            ></el-option>
-                        </el-select> -->
-                    </div>
-                    <div class="item">
-                        <span>所在地</span>
-                        <div class="selects">
-                            <el-select
-                                v-model="personalInformation.countries"
-                                placeholder
-                            >
-                                <el-option
-                                    v-for="item in countryList"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                ></el-option>
-                            </el-select>
-                            <el-select
-                                v-model="personalInformation.provinceId"
-                                placeholder
-                                @change="id => getCity(id,1)"
-                            >
-                                <el-option
-                                    v-for="item in provinceList"
-                                    :key="item.provinceId"
-                                    :label="item.provinceName"
-                                    :value="item.provinceId"
-                                ></el-option>
-                            </el-select>
-                            <el-select
-                                v-model="personalInformation.cityId"
-                                placeholder
-                                :disabled="personalInformation.provinceId ? false : true"
-                            >
-                                <el-option
-                                    v-for="item in cityList"
-                                    :key="item.cityId"
-                                    :label="item.cityName"
-                                    :value="item.cityId"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                    </div>
-                </div>
-                <div class="line">
-                    <div class="item">
-                        <span>出生年月日</span>
-                        <el-date-picker
-                            v-model="personalInformation.dateBirth"
-                            :clearable="false"
-                            class="block-right"
-                            type="date">
-                        </el-date-picker>
-                    </div>
-                    <div class="item">
-                        <span>证件</span>
-                        <input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" id="idnumber" class="idnumber"
-                               placeholder="请输入证件" type="text" v-model="personalInformation.idNumber" />
-                    </div>
-                </div>
-                <div class="line">
-                    <div class="item">
-                        <span>教育程度</span>
-                        <el-select
-                            v-model="personalInformation.educationDegree"
-                            placeholder="请选择教育程度"
-                        >
-                            <el-option
-                                v-for="(item,index) in educationDegreeList"
-                                :key="index"
-                                :label="item.name"
-                                :value="item.value"
-                            ></el-option>
-                        </el-select>
-                    </div>
-                    <div class="item">
-                        <span>当前所在学校</span>
-                        <input id="schoolName" class="school" disabled placeholder="所在学校" type="text"
-                               v-model="personalInformation.schoolName" />
-                    </div>
-                </div>
-
-                <!-- 个人档案 -->
-                <p class="meta-title plus">
-                    <span>个人档案</span>
-                    <el-button type="text" icon="el-icon-plus" @click="addArch">新增</el-button>
-                </p>
-            </div>
-
-            <div class="information" style="margin-top: 20px;">
-                <div class="archives" v-for="(archive,index) in archivesList" :key="index"
-                     v-show="index == 0 || showArch">
-                    <div class="line">
-                        <div class="item">
-                            <span>职业</span>
-                            <el-select
-                                v-model="archive.personalCareerId"
-                                placeholder="选择职业"
-                            >
-                                <el-option
-                                    v-for="item in occupationList"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                        <div class="item">
-                            <span>国家</span>
-                            <el-select
-                                v-model="personalInformation.countries"
-                                placeholder
-                            >
-                                <el-option
-                                    v-for="item in countryList"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                    </div>
-                    <div class="line">
-                        <div class="item">
-                            <span>学校名称</span>
-                            <el-select
-                                v-model="archive.schoolId"
-                                filterable
-                                placeholder="选择学校"
-                                @change="id => getSchoolName(id,index)"
-                            >
-                                <el-option
-                                    v-for="item in schoolList"
-                                    :key="item.value"
-                                    :label="item.schoolName"
-                                    :value="item.schoolId"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                        <div class="item">
-                            <span>专业学科</span>
-                            <el-select
-                                v-model="archive.disciplineId"
-                                placeholder="选择专业学科"
-                                @change="id => getItemProfessionalClass(id,index)"
-                                @clear="() => clearItemClass(index)"
-                            >
-                                <el-option
-                                    v-for="item in subjectList"
-                                    :key="item.value"
-                                    :label="item.disciplineName"
-                                    :value="item.disciplineId"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                    </div>
-                    <div class="line">
-                        <div class="item">
-                            <span>专业类</span>
-                            <el-select
-                                v-model="archive.professionalClassId"
-                                placeholder="选择专业类"
-                                :disabled="archive.disciplineId ? false : true"
-                                @change="id => getItemProfessional(id,index)"
-                                @clear="() => clearItemProfess(index)"
-                            >
-                                <el-option
-                                    v-for="item in archive.ProfessionalClassList"
-                                    :key="item.professionalClassId"
-                                    :label="item.professionalClassName"
-                                    :value="item.professionalClassId"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                        <div class="item">
-                            <span>专业</span>
-                            <el-select
-                                v-model="archive.professionalId"
-                                placeholder="选择专业"
-                                :disabled="archive.professionalClassId ? false : true"
-                                @change="getItemStuGrade"
-                            >
-                                <el-option
-                                    v-for="item in archive.ProfessionalList"
-                                    :key="item.professionalId"
-                                    :label="item.professionalName"
-                                    :value="item.professionalId"
-                                ></el-option>
-                            </el-select>
-                        </div>
-                    </div>
+        <div class="left">
+            <div class="inner">
+                <div class="text-center">
+                    <img :src="avatar" class="avatar" />
+                    <el-upload :headers="{token}" :action="this.api.uploadUserAvatars" name="file" :limit="10" :show-file-list="false" :on-success="changeAvatar">
+                        <el-button type="text" size="small">点击更换头像</el-button>
+                    </el-upload>
                 </div>
-            </div>
 
-            <div class="fold" v-if="archivesList.length > 1">
-                <img :class="{ 'arrowTransform': showArch, 'arrowTransformReturn': !showArch}"
-                     style="width: 21px;height: 17px;" src="@/assets/img/open.png" alt="" @click="foldArch">
+                <ul class="menu">
+                    <li v-for="item in typeList" :key="item.index" :class="{active: item.index == active}">
+                        {{ item.title }}
+                    </li>
+                </ul>
             </div>
         </div>
-
-        <div class="card mgb20">
-            <p class="block-title" style="margin-bottom: 15px">
-                <span><img src="@/assets/img/person/manag.png" alt=""> 账号信息</span>
-            </p>
-            <div class="information">
-                <div class="line">
-                    <div class="item">
-                        <span>用户账号</span>
-                        <input
-                            id="account"
-                            type="text"
-                            class="username" placeholder="请输入用户账号"
-                            v-model="personalInformation.account"
-                        />
-                    </div>
-                    <div class="item">
-                        <span>手机号</span>
-                        <div class="btns flex-between">
-                            <span>{{ personalInformation.phone }}</span>
-                            <el-button v-if="personalInformation.phone" type="primary" size="small" @click="bindPhone">
-                                更换
-                            </el-button>
-                            <el-button v-else type="primary" size="small" @click="bindPhone">绑定</el-button>
-                        </div>
-                    </div>
-                </div>
-                <div class="line">
-                    <div class="item">
-                        <span>邮箱</span>
-                        <div class="btns flex-between">
-                            <span>{{ personalInformation.email }}</span>
-                            <el-button v-if="personalInformation.email" type="primary" size="small" @click="bindEmail">
-                                更换
-                            </el-button>
-                            <el-button v-else type="primary" size="small" @click="bindEmail">绑定</el-button>
-                        </div>
-                    </div>
-                    <!-- <div class="item">
-                        <span>微信</span>
-                        <input id="weChat" class="weChat" disabled placeholder="微信" type="text" v-model="personalInformation.weChatID"/>
-                    </div> -->
-                    <div class="item">
-                        <span>密码</span>
-                        <div class="btns flex-between">
-                            <p>******</p>
-                            <el-button type="primary" size="small" @click="bindPassword">更换</el-button>
-                        </div>
-                    </div>
-                    <!-- <div class="item"></div> -->
-                </div>
-            </div>
+        <div class="right">
+            <info ref="info" v-if="active == 1" @updateStatus="updateStatus"></info>
+            <download v-else></download>
         </div>
-
-        <el-dialog
-            :title="personalInformation.email ? '更换邮箱' : '绑定邮箱'"
-            :visible.sync="emailVisible"
-            :close-on-click-modal="false"
-            @close="closeEmail"
-            width="30%">
-            <el-form ref="form" :model="form" label-width="60px">
-                <el-form-item label="邮箱">
-                    <el-input placeholder="请输入邮箱" v-model="email"></el-input>
-                </el-form-item>
-                <el-form-item label="验证码">
-                    <div class="flex-between">
-                        <el-input v-model="emailCode" placeholder="请输入验证码" maxlength="6"></el-input>
-                        <el-button style="margin-left: 10px" type="text" @click="sendEmailCode"
-                                   :disabled="emailDisabled">{{ emailBtnText }}
-                        </el-button>
-                    </div>
-                </el-form-item>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="emailVisible = false">取 消</el-button>
-                <el-button type="primary" @click="emailSubmit">确 定</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog
-            :title="personalInformation.phone ? '更换手机号' : '绑定手机号'"
-            :visible.sync="phoneVisible"
-            :close-on-click-modal="false"
-            @close="closePhone"
-            width="30%">
-            <el-form ref="form" :model="form" label-width="60px">
-                <el-form-item label="手机号">
-                    <el-input placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
-                </el-form-item>
-                <el-form-item label="验证码">
-                    <div class="flex-between">
-                        <el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
-                        <el-button style="margin-left: 10px" type="text" @click="sendPhoneCode"
-                                   :disabled="phoneDisabled">{{ phoneBtnText }}
-                        </el-button>
-                    </div>
-                </el-form-item>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="phoneVisible = false">取 消</el-button>
-                <el-button type="primary" @click="phoneSubmit">确 定</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog
-            title="更换密码"
-            :visible.sync="passwordVisible"
-            :close-on-click-modal="false"
-            @close="closePassword"
-            width="30%">
-            <el-form ref="passwordForm" :model="form" label-width="60px">
-                <el-form-item label="原密码">
-                    <el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
-                </el-form-item>
-                <el-form-item label="新密码">
-                    <el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码"
-                              @keyup.enter.native="editPassword"></el-input>
-                </el-form-item>
-                <el-form-item label="新密码">
-                    <el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码"
-                              @keyup.enter.native="editPassword"></el-input>
-                </el-form-item>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="passwordVisible = false">取 消</el-button>
-                <el-button type="primary" @click="editPassword">确 定</el-button>
-            </span>
-        </el-dialog>
     </div>
 </template>
 
 <script>
-import Setting from "@/setting";
-import util from "@/libs/util";
-import { mapState, mapActions } from "vuex";
-
+import Setting from '@/setting'
+import { mapState,mapActions } from 'vuex'
+import info from './info'
+import util from '@/libs/util'
 export default {
     data() {
         return {
             token: util.local.get(Setting.tokenKey),
-            personalInformation: {
-                userName: "",
-                name: "",
-                workNumber: "",
-                password: "",
-                phone: "",
-                email: "",
-                provinceName: "",
-                cityName: "",
-                schoolName: "",
-                professionalName: "",
-                experimentName: "",
-                sex: 1,
-                dateBirth: "",
-                educationDegree: ""
-            },
-            profession: [
-                {
-                    value: "1",
-                    label: "学生"
-                },
-                {
-                    value: "2",
-                    label: "老师"
-                }
-            ],
-            emailVisible: false,
-            passwordVisible: false,
-            phoneVisible: false,
-            showArch: false,
-            passwordForm: {
-                password: "",
-                newPassword: "",
-                reNewPassword: ""
-            },
-            sexList: [
-                {
-                    name: "男",
-                    value: 1
-                },
-                {
-                    name: "女",
-                    value: 2
-                }
-            ],
-            countryList: [
+            typeList: [
                 {
-                    label: "中国"
+                    index: '1',
+                    title: '用户信息'
                 }
             ],
-            form: {},
-            occupationList: [{
-                value: 1,
-                label: "学生"
-            },
-                {
-                    value: 2,
-                    label: "老师"
-                }],
-            provinceList: [],
-            cityList: [],
-            // 教育程度
-            educationDegreeList: [
-                {
-                    name: "专科",
-                    value: 1
-                },
-                {
-                    name: "本科",
-                    value: 2
-                },
-                {
-                    name: "硕士",
-                    value: 3
-                },
-                {
-                    name: "博士",
-                    value: 4
-                },
-                {
-                    name: "其他",
-                    value: 5
-                }
-            ],
-            subjectList: [], //专业学科
-            ProfessionalClassList: [], //专业类
-            ProfessionalList: [], //专业
-            schoolList: [],
-
-            archivesList: [],
-            archivesForm: {
-                //个人档案
-                personalCareerId: "", //职业
-                schoolId: "", //院校
-                schoolName: "", //院校名称
-                professionalClassId: "", //专业类
-                professionalClassName: "", //专业类名称
-                disciplineId: "", //专业学科
-                disciplineName: "", //专业学科名称
-                professionalId: "", //专业
-                professionalName: "", //专业名称
-                userId: this.userId
-            },
-            email: "",
-            emailBtnText: "发送验证码",
-            emailCode: "",
-            emailDisabled: false,
-            emailTimer: null,
-            phone: "",
-            phoneBtnText: "发送验证码",
-            phoneCode: "",
-            phoneDisabled: false,
-            phoneTimer: null,
-            emailOpener: "",
-            phoneOpener: "",
-            originAccount: "",
-            accountReapeat: false
+            active: '1',
+            edited: false
         };
     },
+    components: { info },
     computed: {
-        ...mapState("user", [
-            "userId", "avatar"
-        ])
+        ...mapState('user', [
+            'avatar'
+        ]),
+    },
+    // 离开的时候判断是否有保存更改的信息,没有则拦截并提示
+    beforeRouteLeave(to, from, next) {
+        if(this.edited){
+            this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', {
+                type: 'warning'
+            }).then(() => {
+                this.$refs.info.save()
+                next(false)
+            }).catch(() => {
+                next(false)
+            })
+        }else{
+            next()
+        }
     },
     mounted() {
-        this.getdata();
-        this.getProvince();
-        this.getSchoolData();
-        this.getSubject();
-
+        
     },
     methods: {
-        ...mapActions("user", [
-            "setAvatar", "setUserName"
+        ...mapActions('user', [
+            'setAvatar'
         ]),
-        getProvince() {
-            this.$get(this.api.queryProvince).then(res => {
-                this.provinceList = res.list;
-            }).catch(res => {
-            });
-        },
-        // 获取城市
-        getCity(id, type, index) {
-            if (type == 1) {
-                if (this.personalInformation.provinceId) {
-                    this.personalInformation.cityId = 1;
-                    this.getCityData(type, index);
-                }
-            } else {
-                if (this.archivesList[index].provinceId) {
-                    this.archivesList[index].provinceName = this.provinceList[id - 1].provinceName;
-                    this.archivesList[index].cityId = 1;
-                    this.getCityData(type, index);
-                }
-            }
-        },
-        getCityData(type, index) {
-            let provinceId = type == 1 ? this.personalInformation.provinceId : this.archivesList[index].provinceId;
-            this.$get(this.api.queryCity, { provinceId }).then(res => {
-                if (type == 1) {
-                    this.cityList = res.list;
-                } else {
-                    this.archivesList[index].cityList = res.list;
-                }
-            }).catch(res => {
-            });
-        },
-        getCityName(id, index) {
-            this.archivesList[index].cityName = this.archivesList[index].cityList[id - 1].cityName;
-        },
-        getSchoolName(id, index) {
-            this.archivesList[index].schoolName = this.schoolList[id - 1].schoolName;
-        },
-        // 获取学校名称
-        getSchoolData() {
-            this.$get(this.api.querySchoolData, { schoolName: "", provinceId: "", cityId: "" }).then(res => {
-                this.schoolList = res.list;
-            }).catch(res => {
-            });
-        },
-        //取得头像地址
-        getRes(res) {
-            this.setAvatar(res.message);
-        },
-        uploadHeadImg: function() {
-            this.$el.querySelector(".hiddenInput").click();
-        },
-        async accountChange() {
-            if (this.originAccount != this.personalInformation.account) {
-                let res = await this.$get(this.api.queryAccountIsExist, {
-                    account: this.personalInformation.account,
-                    schoolId: this.personalInformation.schoolId
-                });
-                if (res.message.user.length) {
-                    util.warningMsg("该账号已存在");
-                    this.accountReapeat = true;
-                } else {
-                    this.accountReapeat = false;
-                }
-            } else {
-                this.accountReapeat = false;
-            }
-        },
-        getdata() {
-            this.$get(this.api.queryUserInfoDetails).then(res => {
-                let userInfo = res.result.hrUserInfo;
-                let schoolId = userInfo.schoolId;
-                this.personalInformation = Object.assign(userInfo, res.result.userAccountList[0]);
-                this.personalInformation.schoolId = schoolId;
-                this.personalInformation.accountId = userInfo.id;
-                this.originAccount = this.personalInformation.account;
-                this.archivesList = res.result.personalFileList;
-                if (userInfo.userAvatars) this.avatar = userInfo.userAvatars;
-
-                this.$nextTick(() => {
-                    if (this.personalInformation.provinceId) {
-                        this.getCityData(1);
-                    }
-                    if (this.archivesList.length != 0) {
-                        this.archivesList.forEach((e, k) => {
-                            this.$set(e, "subjectList", this.subjectList);
-                            this.$set(e, "disciplineId", e.disciplineId ? e.disciplineId : "");
-                            this.$set(e, "disciplineName", e.disciplineName ? e.disciplineName : "");
-                            this.$set(e, "professionalClassId", e.professionalClassId ? e.professionalClassId : "");
-                            this.$set(e, "professionalClassName", e.professionalClassName ? e.professionalClassName : "");
-                            this.$set(e, "professionalId", e.professionalId ? e.professionalId : "");
-                            this.$set(e, "professionalName", e.professionalName ? e.professionalName : "");
-                            this.$set(e, "schoolId", e.schoolId ? e.schoolId : "");
-                            this.$set(e, "schoolName", e.schoolName ? e.schoolName : "");
-
-                            if (e.disciplineId) {
-                                this.$get(this.api.queryCourseProfessionalClass, { disciplineId: e.disciplineId }).then(res => {
-                                    this.$set(e, "ProfessionalClassList", res.list);
-                                }).catch(res => {
-                                });
-                            } else {
-                                this.$set(e, "ProfessionalClassList", []);
-                            }
-                            if (e.professionalClassId) {
-                                this.$get(this.api.queryCourseProfessional, { professionalClassId: e.professionalClassId }).then(res => {
-                                    this.$set(e, "ProfessionalList", res.list);
-                                }).catch(res => {
-                                });
-                            } else {
-                                this.$set(e, "ProfessionalList", []);
-                            }
-                        });
-                    } else {
-                        this.concatArch(1);
-                    }
-                });
-            })
-                .catch(err => {
-                    console.log(err);
-                });
-        },
-        concatArch(isLoadData) {
-            this.archivesList = this.archivesList.concat({
-                isNew: true,
-                personalCareerId: "", //职业
-                schoolId: "", //院校
-                schoolName: "", //院校名称
-                subjectList: this.subjectList, //专业学科
-                disciplineId: "", //专业学科
-                disciplineName: "", //专业学科名称
-                ProfessionalClassList: [], //专业类
-                professionalClassId: "", //专业类
-                professionalClassName: "", //专业类名称
-                ProfessionalList: [], //专业
-                professionalId: "", //专业
-                professionalName: "", //专业名称
-                userId: this.userId,
-                personalFileId: ""
-            });
-            if (!isLoadData) {
-                this.$nextTick(() => {
-                    document.body.scrollTop = document.querySelector(".content-box").scrollHeight;
-                    document.documentElement.scrollTop = document.querySelector(".content-box").scrollHeight;
-                });
-            }
-        },
-        addArch() {
-            let isEmpty = false;
-            this.archivesList.forEach((n, k) => {
-                if (!n.personalCareerId) isEmpty = true;
-            });
-            if (isEmpty) return util.warningMsg("请选择职业");
-            this.showArch = true;
-            this.concatArch();
-        },
-        bindEmail() {
-            this.email = this.personalInformation.email;
-            this.emailVisible = true;
-        },
-        bindPhone() {
-            this.phone = this.personalInformation.phone;
-            this.phoneVisible = true;
-        },
-        bindPassword() {
-            this.passwordVisible = true;
-        },
-        editPassword() {
-            if (!this.passwordForm.password) return util.warningMsg("请输入原密码");
-            if (!this.passwordForm.newPassword) return util.warningMsg("请输入新密码");
-            if (!this.passwordForm.reNewPassword) return util.warningMsg("请确认新密码");
-            if (this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg("请输入6位数以上的密码");
-            if (this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg("输入的新密码不一致，请重新确认");
-            if (this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg("原密码跟新密码不能一致");
-
-            let data = this.passwordForm;
-            data.userid = this.userId;
-            this.$post(this.api.examinePassword, data)
-                .then(res => {
-                    util.successMsg("更换成功");
-                    this.passwordVisible = false;
-                })
-                .catch(err => {
-                    console.log(err);
-                });
-        },
-        closePassword() {
-            this.passwordForm = {
-                password: "",
-                newPassword: "",
-                reNewPassword: ""
-            };
-        },
-        foldArch() {
-            this.showArch = !this.showArch;
-            // this.$nextTick(() => {
-            //     document.body.scrollTop = document.querySelector('.content-box').scrollHeight
-            //     document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
-            // })
-        },
-        // 获取学科类别
-        getSubject() {
-            this.$get(this.api.queryCourseDiscipline).then(res => {
-                this.subjectList = res.list;
-            }).catch(res => {
-            });
-        },
-        // 清除学科类别
-        clearClass() {
-            this.archivesForm.professionalClassId = "",
-                this.archivesForm.professionalId = "";
-        },
-        // 获取专业类
-        getProfessionalClass(val) {
-            this.clearClass();
-            if (val) {
-                let obj = {};
-                obj = this.subjectList.find((item) => {
-                    return item.disciplineId === val;
-                });
-                this.archivesForm.disciplineName = obj.disciplineName;
-                this.getProfessionalClassData(val);
-            }
-        },
-        clearItemClass(index) {
-            this.archivesList[index].professionalClassId = "";
-            this.archivesList[index].professionalClassName = "";
-            this.archivesList[index].professionalId = "";
-            this.archivesList[index].professionalName = "";
-            // this.archivesList.map(e =>{
-            //     if(e.disciplineId == item){
-            //         e.professionalClassId = '',
-            //         e.professionalClassName = '',
-            //         e.professionalId = '',
-            //         e.professionalName = ''
-            //     }
-            // })
-        },
-        getItemProfessionalClass(item, index) {
-            this.clearItemClass(index);
-            if (item) {
-                let obj = {};
-                obj = this.subjectList.find(r => {
-                    return r.disciplineId === item;
-                });
-                this.$get(this.api.queryCourseProfessionalClass, { disciplineId: item }).then(res => {
-                    this.archivesList.map(e => {
-                        if (e.disciplineId == item) {
-                            e.ProfessionalClassList = res.list;
-                            e.disciplineName = obj.disciplineName;
-                        }
-                    });
-                }).catch(res => {
-                });
-            }
-        },
-        getProfessionalClassData(value) {
-            this.$get(this.api.queryCourseProfessionalClass, { disciplineId: value }).then(res => {
-                this.ProfessionalClassList = res.list;
-            }).catch(res => {
-            });
-        },
-        // 清除专业类
-        clearProfess() {
-            this.archivesForm.professionalId = "";
-        },
-        // 获取专业
-        getProfessional(val) {
-            this.clearProfess();
-            if (val) {
-                let obj = {};
-                obj = this.ProfessionalClassList.find((item) => {
-                    return item.professionalClassId === val;
-                });
-                this.archivesForm.professionalClassName = obj.professionalClassName;
-                this.getProfessionalData(val);
-            }
-        },
-        clearItemProfess(index) {
-            this.archivesList[index].professionalId = "";
-            this.archivesList[index].professionalName = "";
-            // this.archivesList.map(e =>{
-            //     if(e.professionalClassId == item){
-            //         e.professionalId = '',
-            //         e.professionalName = ''
-            //     }
-            // })
-        },
-        getItemProfessional(item, index) {
-            this.clearItemProfess(index);
-            if (item) {
-                this.$get(this.api.queryCourseProfessional, { professionalClassId: item }).then(res => {
-                    this.archivesList.map(e => {
-                        if (e.professionalClassId == item) {
-                            let obj = {};
-                            obj = e.ProfessionalClassList.find(r => {
-                                return r.professionalClassId === item;
-                            });
-                            e.ProfessionalList = res.list;
-                            e.professionalClassName = obj.professionalClassName;
-                        }
-                    });
-                }).catch(res => {
-                });
-            }
-        },
-        getProfessionalData(value) {
-            this.$get(this.api.queryCourseProfessional, { professionalClassId: value }).then(res => {
-                this.ProfessionalList = res.list;
-            }).catch(res => {
-            });
-        },
-        // 获取专业名称
-        getStuGrade(val) {
-            if (val) {
-                let obj = {};
-                obj = this.ProfessionalList.find(r => {
-                    return r.professionalId === val;
-                });
-                this.archivesForm.professionalName = obj.professionalName;
-            }
-        },
-        getItemStuGrade(item) {
-            if (item) {
-                this.archivesList.map(e => {
-                    if (e.professionalId == item) {
-                        let obj = {};
-                        obj = e.ProfessionalList.find(r => {
-                            return r.professionalId === item;
-                        });
-                        e.professionalName = obj.professionalName;
-                    }
-                });
-            }
-        },
-        save() {
-            let isEmpty = false;
-            // this.archivesList.forEach((n, k) => {
-            //     if (!n.personalCareerId) isEmpty = true;
-            //     n.userId = this.userId;
-            // });
-            // if (isEmpty) return util.warningMsg("请选择职业");
-            // if (this.accountReapeat) return util.warningMsg("该账号已存在");
-            if (this.personalInformation.idNumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(this.personalInformation.idNumber)) return util.warningMsg("请输入正确的证件号码");
-            let form = this.personalInformation;
-            let personalFileList = []
-            this.archivesList.forEach((n,k) => {
-                n.personalCareerId && personalFileList.push({
-                    disciplineId: n.disciplineId,
-                    disciplineName: n.disciplineName,
-                    personalCareerId: n.personalCareerId,
-                    personalFileId: n.personalFileId,
-                    professionalClassId: n.professionalClassId,
-                    professionalClassName: n.professionalClassName,
-                    professionalId: n.professionalId,
-                    professionalName: n.professionalName,
-                    provinceId: n.provinceId,
-                    provinceName: n.provinceName,
-                    schoolId: n.schoolId,
-                    schoolName: n.schoolName,
-                    userId: form.userId
-                })
-            })
-            let data = {
-                userId: form.userId,
-                userAccountList: [{
-                    id: form.accountId,
-                    account: form.account,
-                    userId: form.userId,
-                }],
-                hrUserInfo: {
-                    provinceId: form.provinceId,
-                    cityId: form.cityId,
-                    countries: form.countries,
-                    dateBirth: form.dateBirth,
-                    educationDegree: form.educationDegree,
-                    idNumber: form.idNumber,
-                    schoolId: form.schoolId,
-                    sex: form.sex,
-                    userId: form.userId,
-                    userName: form.userName,
-                    wechatId: form.wechatId
-                },
-                personalFileList,
-            }
-            this.$post(this.api.updatePersonCenter,data).then(res => {
-                this.setUserName(form.userName);
-                this.$message.success('提交成功！')
-            }).catch(res => {})
-        },
-        emailCountdown() {
-            let count = 60;
-            if (!this.emailTimer) {
-                this.emailDisabled = true;
-                this.emailTimer = setInterval(() => {
-                    console.log("倒计时中");
-                    if (count > 0) {
-                        count--;
-                        this.emailBtnText = `${count}秒后重试`;
-                    } else {
-                        this.emailDisabled = false;
-                        clearInterval(this.emailTimer);
-                        this.emailTimer = null;
-                        this.emailBtnText = `发送验证码`;
-                    }
-                }, 1000);
-            }
-        },
-        phoneCountdown() {
-            let count = 60;
-            if (!this.phoneTimer) {
-                this.phoneDisabled = true;
-                this.phoneTimer = setInterval(() => {
-                    console.log("倒计时中");
-                    if (count > 0) {
-                        count--;
-                        this.phoneBtnText = `${count}秒后重试`;
-                    } else {
-                        this.phoneDisabled = false;
-                        clearInterval(this.phoneTimer);
-                        this.phoneTimer = null;
-                        this.phoneBtnText = `发送验证码`;
-                    }
-                }, 1000);
-            }
-        },
-        closeEmail() {
-            if (!this.emailDisabled) {
-                this.emailCode = "";
-            }
-        },
-        sendEmailCode() {
-            if (!this.email) return util.warningMsg("请输入邮箱");
-            if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg("请输入正确的邮箱");
-            let data = {
-                userId: this.userId,
-                email: this.email,
-                types: 1
-            };
-            this.$post(this.api.sendPhoneOrEmailCode, data).then(res => {
-                if(res.message.opener){
-                    this.emailCountdown();
-                    this.emailOpener = res.message.opener;
-                } else{
-                    util.errorMsg(res.message);
-                }
-            }).catch(res => {
-            });
-        },
-        emailSubmit() {
-            if (!this.email) return util.warningMsg("请输入邮箱");
-            if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg("请输入正确的邮箱");
-            if (!this.emailCode) return util.warningMsg("请输入验证码");
-            let data = {
-                userId: this.userId,
-                email: this.email,
-                types: 1,
-                code: this.emailCode,
-                opener: this.emailOpener
-            };
-            this.$put(this.api.bindPhoneOrEmail, data).then(res => {
-                util.successMsg("绑定成功");
-                this.personalInformation.email = this.email;
-                this.emailVisible = false;
-            }).catch(res => {
-            });
-        },
-        closePhone() {
-            if (!this.emailDisabled) {
-                this.emailCode = "";
-            }
-        },
-        sendPhoneCode() {
-            if (!this.phone) return util.warningMsg("请输入手机号");
-            if (!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg("请输入正确的手机号");
-            let data = {
-                userId: this.userId,
-                phone: this.phone,
-                types: 2
-            };
-            this.$post(this.api.sendPhoneOrEmailCode, data).then(res => {
-                if(res.message.opener){
-                    this.phoneCountdown();
-                    this.phoneOpener = res.message.opener;
-                } else{
-                    util.errorMsg(res.message);
-                }
-            }).catch(res => {
-            });
+        changeAvatar(res) {
+            this.setAvatar(res.message)
         },
-        phoneSubmit() {
-            if (!this.phone) return util.warningMsg("请输入手机号");
-            if (!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg("请输入正确的手机号");
-            if (!this.phoneCode) return util.warningMsg("请输入验证码");
-            let data = {
-                userId: this.userId,
-                phone: this.phone,
-                types: 2,
-                code: this.phoneCode,
-                opener: this.phoneOpener
-            };
-            this.$put(this.api.bindPhoneOrEmail, data).then(res => {
-                util.successMsg("绑定成功");
-                this.personalInformation.phone = this.phone;
-                this.phoneVisible = false;
-            }).catch(res => {
-            });
+        updateStatus(status){
+            this.edited = status
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.arrowTransform {
-    transition: 0.5s;
-    transform-origin: center;
-    transform: rotateZ(180deg);
-}
-
-.arrowTransformReturn {
-    transition: 0.5s;
-    transform-origin: center;
-    transform: rotateZ(0deg);
-}
-
-.wrap {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    background: #f6f6f6 url(../../../assets/img/person/bg.png) 0 0/100% 500px no-repeat;
-}
-
-.header {
-    z-index: 2;
-    padding-top: 170px;
-    background-color: transparent;
-}
-
-.header /deep/ .el-upload-list__item-name {
-    display: none;
-}
-
-.header /deep/ .el-icon-upload-success {
-    display: none;
-}
-
-.header /deep/ .el-upload-list__item-status-label {
-    display: none;
-}
-
-.header /deep/ .el-upload-list {
-    display: none;
-}
-
-/deep/ .el-input__inner {
-    height: 32px !important;
-}
-
-/deep/ .el-select .el-input .el-select__caret {
-    line-height: 32px;
-}
-
-input:focus {
-    outline: 0;
-}
-
-.openfile {
-    cursor: pointer;
-}
-
-.Headtop {
-    margin-top: 10px;
-
-    .head {
-        width: 34px;
-        height: 34px;
-        background: rgba(255, 255, 255, 1);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        position: relative;
-
-        .eee {
-            height: 10px;
-            width: 16px;
-            background-color: rgba(255, 255, 255, 1);
-            margin-bottom: -10px;
-            position: absolute;
-            top: 8px;
-            z-index: 2;
-        }
-
-        .Semicircle {
-            width: 12px;
-            height: 12px;
-            border: 2px solid #9278ff;
-            border-radius: 50px;
-            margin-bottom: 10px;
-            position: absolute;
-        }
-    }
-
-    .body {
-        color: #9278ff;
-        width: 30px;
-        height: 20px;
-        border: 3px solid #f5f5f5;
-        border-radius: 100%;
-        margin-top: 5px;
-        margin-bottom: -10px;
-    }
-
-    .body::after {
-        content: '';
-        width: 40px;
-        height: 30px;
-        display: inline-block;
-        background-color: #9278ff;
-        margin-top: 8px;
-        margin-left: -6px;
-    }
-}
-
-.card {
-    width: 1000px;
-    margin-top: 10px;
-    padding: 60px 100px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1);
-    border-radius: 4px;
-    position: relative;
-    box-sizing: border-box;
-
-    .block-title {
-        span {
-            display: inline-flex;
-            align-items: center;
-            color: #444;
-            font-size: 18px;
-
-            img {
-                width: 20px;
-                margin-right: 5px;
-            }
-        }
-
-    }
-
-    .meta-title {
-        padding-left: 6px;
-        margin: 20px 0 10px 0;
-        line-height: 1;
-        border-left: 4px solid #9278ff;
-
-        span {
-            font-size: 16px;
-            color: #9278ff;
-        }
-
-        /deep/ .el-button {
-            padding: 0 0;
-            font-size: 16px;
-            color: #9278ff;
-        }
-    }
-
-    .el-icon-document {
-        color: #9278ff;
-        font-size: 30px;
-    }
-
-    .el-icon-collection {
-        color: #9278ff;
-        position: absolute;
-        left: 31px;
-        top: 31px;
-        font-size: 30px;
-    }
-
-    span {
-        color: #333333;
-        font-size: 20px;
-    }
-
-    .plus {
+    .wrap{
         display: flex;
-        justify-content: space-between;
-
-        i {
-            font-size: 22px;
-            color: #21d749;
-            cursor: pointer;
-        }
-    }
-
-    .information {
-        .archives {
-            padding: 15px;
-            margin-bottom: 20px;
-            border: 1px dashed #c9c9c9;
-            border-radius: 8px;
-        }
-
-        .line {
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .item {
-                display: inline-flex;
-                align-items: center;
-                margin-bottom: 20px;
-
-                span {
-                    width: 90px;
-                    margin-right: 15px;
-                    text-align: right;
-                    font-size: 15px;
-                    color: #656565;
-                    white-space: nowrap;
-                }
-
-                .username {
-                    background: url('~@/assets/img/edit.png') no-repeat 10px center;
-                    background-size: 16px 15px;
-                    background-position: 98% 50%;
-                    box-sizing: border-box;
-                }
-
-                .idnumber {
-                    background: url('~@/assets/img/idcard.png') no-repeat 10px center;
-                    background-size: 20px 16px;
-                    background-position: 98% 50%;
-                    box-sizing: border-box;
-                }
-
-                .school {
-                    background: url('~@/assets/img/school.png') no-repeat;
-                    background-size: 22px 17px;
-                    background-position: 98% 50%;
-                    box-sizing: border-box;
-                }
-
-                .weChat {
-                    background: url('~@/assets/img/bind.png') no-repeat;
-                    background-size: 19px 18px;
-                    background-position: 98% 50%;
-                    box-sizing: border-box;
-                }
-
-                input {
-                    height: 36px;
-                    width: 260px;
-                    color: #727272;
-                    border: 0;
-                    border-bottom: 1px solid #b5b5b5;
-                    outline: none;
-                    padding-left: 15px;
-                }
-
-                .read {
-                    width: 260px;
-                    color: #727272;
-                }
-
-                .el-select, .btns {
-                    width: 260px;
-                }
-
-                .btns {
-                    display: inline-flex;
-                    align-items: center;
-                    border-bottom: 1px solid #b5b5b5;
-                    padding: 5px 0;
-                }
-
-                .flex-end-content {
-                    justify-content: flex-end;
-                }
-
-                .selects {
-                    display: inline-flex;
-                    align-items: center;
-                    width: 260px;
-
-                    .el-select {
-                        width: 100px;
-                        font-size: 12px;
-
-                        &:first-child {
-                            width: 82px;
-                        }
-                    }
-                }
-            }
-
-            /deep/ .el-date-editor {
-                width: 260px;
-            }
-
-            /deep/ .el-date-editor .el-input__prefix {
-                line-height: 32px;
-            }
-
-            /deep/ .el-input__prefix, /deep/ .el-input__suffix {
-                left: auto;
-                right: 0;
-            }
-
-            /deep/ .el-input__inner {
-                color: #656565;
-                font-size: 14px;
-                border-radius: 0 !important;
-                border: 0px;
-                border-bottom: 1px solid #b5b5b5;
-            }
-
-            /deep/ .el-input--prefix .el-input__inner {
-                padding-left: 15px;
-            }
-
-            /deep/ .el-input__icon {
-                color: #9278ff;
-
-                &.el-icon-date {
+        .left{
+            margin-right: 20px;
+            .inner{
+                width: 170px;
+                padding: 20px 0;
+                background-color: #fff;
+                box-shadow: 2px 0px 6px 0px #EEEEEE;
+            }
+            .avatar{
+                width: 80px;
+                height: 80px;
+                border-radius: 50%;
+            }
+            .menu{
+                margin-top: 32px;
+                li{
+                    padding: 0 20px;
+                    color: #303133;
                     font-size: 14px;
-
-                    &:before {
-                        content: "";
-                        background: url('~@/assets/img/date.png') center center no-repeat;
-                        position: absolute;
-                        width: 20px;
-                        height: 18px;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
+                    line-height: 38px;
+                    cursor: pointer;
+                    &.active{
+                        color: #fff;
+                        background-color: #006EFF;
                     }
                 }
             }
-
-            /deep/ .el-icon-arrow-up:before {
-                content: "";
-                background: url('~@/assets/img/select.png') center center no-repeat;
-                position: absolute;
-                width: 12px;
-                height: 7px;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            }
         }
-    }
-
-    .fold {
-        margin-top: 20px;
-        text-align: center;
-        i {
-            font-size: 22px;
-            color: #8e8e8e;
-            cursor: pointer;
-
-            &:hover {
-                opacity: .8;
-            }
+        .right{
+            flex: 1;
         }
     }
-
-    .sexRadio /deep/ .el-radio__input.is-checked .el-radio__inner {
-        border-color: #9278ff;
-        background: #9278ff;
-    }
-
-    .sexRadio /deep/ .el-radio__input.is-checked + .el-radio__label {
-        color: #9278ff;
-    }
-
-    .sexRadio /deep/ .el-radio__inner:hover {
-        border-color: #9278ff;
-    }
-
-    /deep/ input::-webkit-input-placeholder {
-        font-size: 14px;
-        color: #c0c0c0;
-    }
-
-    /deep/ input::-moz-input-placeholder {
-        font-size: 14px;
-        color: #c0c0c0;
-    }
-
-    /deep/ input::-ms-input-placeholder {
-        font-size: 14px;
-        color: #c0c0c0;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/setting/person/info.vue b/src/pages/setting/person/info.vue
new file mode 100644
index 0000000..c613bc9
--- /dev/null
+++ b/src/pages/setting/person/info.vue
@@ -0,0 +1,931 @@
+<template>
+    <div>
+        <div class="scroll">
+            <div class="page">
+                <h6 class="l-title"><img src="@/assets/img/info1.png" alt=""> 用户信息</h6>
+                <div class="page-content">
+                    <ul class="list">
+                        <div class="line info">
+                            <li>
+                                <label>姓名：</label>
+                                <el-input size="small" v-model="form.userName" clearable></el-input>
+                            </li>
+                            <li>
+                                <label>所在国家：</label>
+                                <el-select size="small" v-model="form.countries">
+                                    <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label"></el-option>
+                                </el-select>
+                            </li>
+                        </div>
+                        <div class="line info">
+                            <li>
+                                <label>性别：</label>
+                                <el-select size="small" v-model="form.sex">
+                                    <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+                                </el-select>
+                            </li>
+                            <li class="selects">
+                                <label>所在地：</label>
+                                <div class="mul">
+                                    <div class="child">
+                                        <el-select size="small" v-model="form.countries" placeholder>
+                                            <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label"></el-option>
+                                        </el-select>
+                                    </div>
+                                    <div class="child">
+                                        <el-select size="small" v-model="form.provinceId" placeholder @change="id => getCity(id,1)">
+                                            <el-option v-for="item in provinceList" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId"></el-option>
+                                        </el-select>
+                                    </div>
+                                    <div class="child">
+                                        <el-select size="small" v-model="form.cityId" placeholder :disabled="form.provinceId ? false : true">
+                                            <el-option v-for="item in cityList" :key="item.cityId" :label="item.cityName" :value="item.cityId"></el-option>
+                                        </el-select>
+                                    </div>
+                                </div>
+                            </li>
+                        </div>
+                        <div class="line info">
+                            <li>
+                                <label>出生年月：</label>
+                                <el-date-picker size="small" placeholder="请选择时间" v-model="form.dateBirth" :clearable="false" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
+                            </li>
+                            <li>
+                                <label>证件：</label>
+                                <el-input size="small" placeholder="请输入证件" v-model="form.idNumber" clearable></el-input>
+                            </li>
+                        </div>
+                        <div class="line info">
+                            <li>
+                                <label>教育程度：</label>
+                                <el-select size="small" v-model="form.educationDegree" placeholder="请选择教育程度">
+                                    <el-option v-for="(item,index) in educationDegreeList" :key="index" :label="item.name" :value="item.value"></el-option>
+                                </el-select>
+                            </li>
+                            <li>
+                                <label>当前所在学校：</label>
+                                <el-input size="small" placeholder="请输入学校" v-model="form.schoolName" clearable></el-input>
+                            </li>
+                        </div>
+                    </ul>
+                </div>
+                <div class="flex j-between a-center m-r-20">
+                    <h6 class="l-title"><img src="@/assets/img/info2.png" alt=""> 个人档案</h6>
+                    <el-button type="text" icon="el-icon-plus" style="margin-left: 16px" @click="addArch">新增</el-button>
+                </div>
+                <div class="page-content">
+                    <div class="archives" v-for="(archive,index) in archivesList" :key="index" v-show="index == 0 || showArch">
+                        <ul class="list">
+                            <div class="line">
+                                <li>
+                                    <label>职业：</label>
+                                    <el-select size="small" v-model="archive.personalCareerId" placeholder="选择职业">
+                                        <el-option v-for="item in occupationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                                    </el-select>
+                                </li>
+                                <li>
+                                    <label>所属国家：</label>
+                                    <el-select size="small" v-model="form.countries" placeholder>
+                                        <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.label" ></el-option>
+                                    </el-select>
+                                </li>
+                                <li>
+                                    <label>学校名称：</label>
+                                    <el-select size="small" v-model="archive.schoolId" filterable placeholder="选择学校" @change="id => getSchoolName(id,index)">
+                                        <el-option v-for="item in schoolList" :key="item.value" :label="item.schoolName" :value="item.schoolId"></el-option>
+                                    </el-select>
+                                </li>
+                            </div>
+                            <div class="line" style="margin-bottom: 0">
+                                <li>
+                                    <label>专业学科：</label>
+                                    <el-select size="small" v-model="archive.disciplineId" placeholder="选择专业学科" @change="id => getItemProfessionalClass(id,index)" @clear="() => clearItemClass(index)">
+                                        <el-option v-for="item in subjectList" :key="item.value" :label="item.disciplineName" :value="item.disciplineId"></el-option>
+                                    </el-select>
+                                </li>
+                                <li>
+                                    <label>专业类：</label>
+                                    <el-select size="small" v-model="archive.professionalClassId" placeholder="选择专业类" :disabled="archive.disciplineId ? false : true" @change="id => getItemProfessional(id,index)" @clear="() => clearItemProfess(index)">
+                                        <el-option v-for="item in archive.ProfessionalClassList" :key="item.professionalClassId" :label="item.professionalClassName" :value="item.professionalClassId"></el-option>
+                                    </el-select>
+                                </li>
+                                <li>
+                                    <label>专业：</label>
+                                    <el-select size="small" v-model="archive.professionalId" placeholder="选择专业" :disabled="archive.professionalClassId ? false : true" @change="getItemStuGrade">
+                                        <el-option v-for="item in archive.ProfessionalList" :key="item.professionalId" :label="item.professionalName" :value="item.professionalId"></el-option>
+                                    </el-select>
+                                </li>
+                            </div>
+                        </ul>
+                        <img class="del" src="@/assets/img/trash.png" alt="" v-if="index" @click="delArchive(index)">
+                    </div>
+                    <div class="fold" v-if="archivesList.length > 1">
+                        <span :class="{active: showArch}" @click="showArch = !showArch">
+                            展开更多
+                            <i class="el-icon-arrow-down"></i>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="page">
+                <h6 class="l-title"><img src="@/assets/img/info3.png" alt=""> 账号信息</h6>
+                <div class="page-content">
+                    <ul class="list">
+                        <div class="line info imp">
+                            <li>
+                                <label>用户账号：</label>
+                                <el-input class="m-r-10" size="small" v-model="form.account" clearable disabled></el-input>
+                                <el-button type="text" size="small" @click="openAccount">编辑</el-button>
+                            </li>
+                            <li>
+                                <label>手机号：</label>
+                                <el-input class="m-r-10" type="text" size="small" v-model="form.phone" disabled></el-input>
+                                <el-button type="text" size="small" @click="bindPhone">更换</el-button>
+                            </li>
+                        </div>
+                        <div class="line info imp">
+                            <li>
+                                <label>邮箱：</label>
+                                <el-input class="m-r-10" size="small" v-model="form.email" disabled></el-input>
+                                <el-button v-if="form.email" type="text" size="small" @click="bindEmail">更换</el-button>
+                                <el-button v-else type="text" size="small" @click="bindEmail">添加</el-button>
+                            </li>
+                            <li>
+                                <label>密码：</label>
+                                <el-input class="m-r-10" size="small" value="xxxxxxxx" disabled></el-input>
+                                <el-button type="text" size="small" @click="bindPassword">更换</el-button>
+                            </li>
+                        </div>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="btns">
+            <el-button size="small" v-throttle @click="$router.back()">取消</el-button>
+            <el-button type="primary" size="small" v-throttle @click="save">更新</el-button>
+        </div>
+
+        <el-dialog :title="form.email ? '更换邮箱' : '绑定邮箱'" :visible.sync="emailVisible" :close-on-click-modal="false" @close="closeEmail" width="30%">
+            <el-form ref="form" :model="form" label-width="60px">
+                <el-form-item label="邮箱">
+                    <el-input style="width: 394px;" placeholder="请输入邮箱" v-model="email"></el-input>
+                </el-form-item>
+                <el-form-item label="验证码">
+                    <div class="flex">
+                        <el-input v-model="emailCode" placeholder="请输入验证码" maxlength="6"></el-input>
+                        <el-button style="margin-left: 10px" type="text" @click="sendEmailCode" :disabled="emailDisabled">{{emailBtnText}}</el-button>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="emailVisible = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="emailSubmit">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog :title="form.phone ? '更换手机号' : '绑定手机号'" :visible.sync="phoneVisible" :close-on-click-modal="false" @close="closePhone" width="30%">
+            <el-form ref="form" :model="form" label-width="60px">
+                <el-form-item label="手机号">
+                    <el-input style="width: 394px;" placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
+                </el-form-item>
+                <el-form-item label="验证码">
+                    <div class="flex">
+                        <el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
+                        <el-button style="margin-left: 10px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="phoneVisible = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="phoneSubmit">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="更换密码" :visible.sync="passwordVisible" :close-on-click-modal="false" @close="closePassword" width="30%">
+            <el-form ref="passwordForm" :model="form" label-width="82px">
+                <el-form-item label="原密码">
+                    <el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
+                </el-form-item>
+                <el-form-item label="新密码">
+                    <el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input>
+                </el-form-item> 
+                <el-form-item label="确认新密码">
+                    <el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="passwordVisible = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="editPassword">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="修改用户账号" :visible.sync="accountVisible" :close-on-click-modal="false" width="30%">
+            <el-form label-width="82px">
+                <el-form-item label="用户账号">
+                    <el-input v-model="account" placeholder="请输入用户账号"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="accountVisible = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="confirmAccount">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { mapState,mapActions } from 'vuex'
+import util from '@/libs/util'
+export default {
+    data() {
+        return {
+            form: {
+                name:'',
+                workNumber:'',
+                password:"",
+                phone:'',
+                email:'',
+                provinceName:'',
+                cityName:'',
+                schoolName:'',
+                professionalName:'',
+                experimentName:'',
+                sex: 1,
+                dateBirth: '',
+                educationDegree: ''
+            },
+            emailVisible: false,
+            passwordVisible: false,
+            phoneVisible: false,
+            showArch: false,
+            passwordForm: {
+                password: '',
+                newPassword: '',
+                reNewPassword: ''
+            },
+            sexList: [
+                {
+                    name: '男',
+                    value: 1
+                },
+                {
+                    name: '女',
+                    value: 2
+                }
+            ],
+            countryList: [
+                {
+                    label: '中国'
+                }
+            ],
+            occupationList: [{
+                value: 1,
+                label: '学生'
+            },{
+                value: 2,
+                label: '老师'
+            }],
+            provinceList:[],
+            cityList: [],
+            educationDegreeList: [
+                {
+                    name: '专科',
+                    value: 1
+                },
+                {
+                    name: '本科',
+                    value: 2
+                },
+                {
+                    name: '硕士',
+                    value: 3
+                },
+                {
+                    name: '博士',
+                    value: 4
+                },
+                {
+                    name: '其他',
+                    value: 5
+                }
+            ],
+            subjectList: [], //专业学科
+            ProfessionalClassList: [], //专业类
+            ProfessionalList: [], //专业
+            schoolList: [],
+            curPassword: '',
+            accountRepeat: false,
+
+            archivesList: [],
+            archivesForm: {
+                personalCareerId: '',
+                schoolId: '',
+                schoolName: '',
+                professionalClassId: '',
+                professionalClassName: '',
+                disciplineId: '',
+                disciplineName: '',
+                professionalId: '',
+                professionalName: '',
+            },
+            email: '',
+            emailBtnText: '发送验证码',
+            emailCode: '',
+            emailDisabled: false,
+            emailTimer: null,
+            phone: '',
+            phoneBtnText: '发送验证码',
+            phoneCode: '',
+            phoneDisabled: false,
+            phoneTimer: null,
+            updateTime: 0,
+            account: '',
+            accountVisible: false
+        };
+    },
+    watch: {
+        // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
+        form: {
+            handler(){
+                this.updateTime++
+                if(this.updateTime > 1) this.$emit('updateStatus',this.updateTime > 1)
+            },
+            deep:true
+        }
+    },
+    mounted() {
+        this.getdata()
+        this.getProvince()
+        this.getSchoolData()
+        this.getSubject()
+        if (!this.archivesList.length) this.archivesList = [JSON.parse(JSON.stringify(this.archivesForm))]
+    },
+    methods: {
+        ...mapActions('user', [
+            'setAvatar','setUserName'
+        ]),
+        getdata() {
+            this.$get(this.api.queryUserInfoDetails).then(res => {
+                let userInfo = res.result.hrUserInfo
+                let schoolId = userInfo.schoolId
+                this.form = Object.assign(userInfo, res.result.userAccountList[0])
+                this.form.schoolId = schoolId
+                this.form.accountId = userInfo.id
+                this.originAccount = this.form.account
+                this.archivesList = res.result.personalFileList
+                this.$nextTick(() => {
+                    if(this.form.provinceId){
+                        this.getCityData(1)
+                    }
+                    if(this.archivesList.length != 0){
+                        this.archivesList.forEach((e,k) =>{
+                            this.$set(e, 'subjectList', this.subjectList)
+                            this.$set(e, 'disciplineId', e.disciplineId ? e.disciplineId : '')
+                            this.$set(e, 'disciplineName', e.disciplineName ? e.disciplineName : '')
+                            this.$set(e, 'professionalClassId', e.professionalClassId ? e.professionalClassId : '')
+                            this.$set(e, 'professionalClassName', e.professionalClassName ? e.professionalClassName : '')
+                            this.$set(e, 'professionalId', e.professionalId ? e.professionalId : '')
+                            this.$set(e, 'professionalName', e.professionalName ? e.professionalName : '')
+                            this.$set(e, 'schoolId', e.schoolId ? e.schoolId : '')
+                            this.$set(e, 'schoolName', e.schoolName ? e.schoolName : '')
+
+                            if(e.disciplineId){
+                                this.$get(this.api.queryCourseProfessionalClass, {disciplineId: e.disciplineId }).then(res => {
+                                    this.$set(e, 'ProfessionalClassList', res.list)
+                                }).catch(res => {})
+                            }else{
+                                this.$set(e, 'ProfessionalClassList', [])
+                            }
+                            if(e.professionalClassId){
+                                this.$get(this.api.queryCourseProfessional,{ professionalClassId: e.professionalClassId }).then(res => {
+                                    this.$set(e, 'ProfessionalList', res.list)
+                                }).catch(res => {})
+                            }else{
+                                this.$set(e, 'ProfessionalList', [])
+                            }
+                        })
+                    }else{
+                        this.concatArch()
+                    }
+                })
+            }).catch(err => {})
+        },
+        getProvince(){
+            this.$get(this.api.queryProvince).then(res => {
+                this.provinceList = res.list
+            }).catch(res => {})
+        },
+        getCity(id,type){
+            this.form.cityId = 1
+            this.getCityData()
+        },
+        getCityData(index){
+            let provinceId = this.form.provinceId
+            this.$get(this.api.queryCity,{provinceId}).then(res => {
+                this.cityList = res.list
+            }).catch(res => {})
+        },
+        getCityName(id,index){
+            this.archivesList[index].cityName = this.archivesList[index].cityList[id-1].cityName
+        },
+        getSchoolName(id,index){
+            const school = this.schoolList.find(e => e.schoolId == id)
+            if (school) this.archivesList[index].schoolName = school.schoolName
+        },
+        getSchoolData(){
+            this.$get(this.api.querySchool,{schoolName: '',provinceId: this.provinceId,cityId: this.cityId}).then(res => {
+                this.schoolList = res.list
+            }).catch(res => {})
+        },
+        accountChange(){
+            this.$get(`${this.api.getAccount}?account=${this.form.account}`).then(res => {
+                if(res.data.userInfo){
+                    this.accountRepeat = true
+                    util.warningMsg('该账号已存在')
+                }else{
+                    this.accountRepeat = false
+                }
+            }).catch(res => {})
+        },
+        save() {
+            if (this.form.idNumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(this.form.idNumber)) return util.warningMsg("请输入正确的证件号码");
+            let form = this.form;
+            let personalFileList = []
+            this.archivesList.forEach((n,k) => {
+                n.personalCareerId && personalFileList.push({
+                    disciplineId: n.disciplineId,
+                    disciplineName: n.disciplineName,
+                    personalCareerId: n.personalCareerId,
+                    personalFileId: n.personalFileId,
+                    professionalClassId: n.professionalClassId,
+                    professionalClassName: n.professionalClassName,
+                    professionalId: n.professionalId,
+                    professionalName: n.professionalName,
+                    provinceId: n.provinceId,
+                    provinceName: n.provinceName,
+                    schoolId: n.schoolId,
+                    schoolName: n.schoolName,
+                    userId: form.userId
+                })
+            })
+            let data = {
+                userId: form.userId,
+                userAccountList: [{
+                    id: form.accountId,
+                    account: form.account,
+                    userId: form.userId,
+                }],
+                hrUserInfo: {
+                    provinceId: form.provinceId,
+                    cityId: form.cityId,
+                    countries: form.countries,
+                    dateBirth: form.dateBirth,
+                    educationDegree: form.educationDegree,
+                    idNumber: form.idNumber,
+                    schoolId: form.schoolId,
+                    sex: form.sex,
+                    userId: form.userId,
+                    userName: form.userName,
+                    wechatId: form.wechatId
+                },
+                personalFileList,
+            }
+            this.$post(this.api.updatePersonCenter,data).then(res => {
+                this.setUserName(form.userName);
+                this.$message.success('提交成功！')
+            }).catch(res => {})
+        },
+        
+        concatArch() {
+            this.archivesList = this.archivesList.concat({
+                countries: '中国',
+                personalCareerId: '',
+                schoolId: '',
+                schoolName: '',
+                subjectList: this.subjectList,
+                disciplineId: '',
+                disciplineName: '',
+                ProfessionalClassList: [],
+                professionalClassId: '',
+                professionalClassName: '',
+                ProfessionalList: [],
+                professionalId: '',
+                professionalName: '',
+                personalFileId: ''
+            })
+        },
+        addArch() {
+            let isEmpty = false
+            this.archivesList.forEach((n,k) => {
+                if(!n.personalCareerId) isEmpty = true
+            })
+            if(isEmpty) return util.warningMsg('请选择职业')
+            this.showArch = true
+            this.concatArch()
+        },
+        delArchive(i) {
+            this.$confirm(`此操作不可逆，是否确认删除？`, '提示', {
+                type: 'warning'
+            }).then(() => {
+                const id = this.archivesList[i].personalFileId
+                this.archivesList.splice(i, 1)
+                id && this.$post(`${this.api.deleteProfile}?personalFileIds=${id}`).then(res => {}).catch(err => {})
+            }).catch(() => {})
+        },
+        bindEmail() {
+            this.email = this.form.email
+            this.emailVisible = true
+        },
+        bindPhone() {
+            this.phoneVisible = true
+        },
+        bindPassword() {
+            this.passwordVisible = true
+        },
+        editPassword() {
+            if(!this.passwordForm.password) return util.warningMsg('请输入原密码')
+            if(!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
+            if(!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
+            if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
+            if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致，请重新确认')
+            if(this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')
+
+            let data = this.passwordForm
+            data.accountId = this.form.id
+            this.$post(this.api.examinePassword,data).then(res => {
+                util.successMsg('更换成功')
+                this.passwordVisible = false
+            }).catch(err => {})
+        },
+        closePassword() {
+            this.passwordForm = {
+                password: '',
+                newPassword: '',
+                reNewPassword: ''
+            }
+        },
+        foldArch() {
+            this.showArch = !this.showArch
+            this.$nextTick(() => {
+                document.body.scrollTop = document.querySelector('.content-box').scrollHeight
+                document.documentElement.scrollTop = document.querySelector('.content-box').scrollHeight
+            })
+        },
+        // 获取学科类别
+        getSubject(){
+            this.$get(this.api.queryCourseDiscipline).then(res => {
+                this.subjectList = res.list
+            }).catch(res => {})
+        },
+        // 清除学科类别
+        clearClass(){
+            this.archivesForm.professionalClassId = '',
+            this.archivesForm.professionalId = ''
+        },
+        // 获取专业类
+        getProfessionalClass(val){
+            this.clearClass()
+            if(val){
+                let obj = {}
+                obj = this.subjectList.find((item)=>{
+                    return item.disciplineId === val
+                });
+                this.archivesForm.disciplineName = obj.disciplineName
+                this.getProfessionalClassData(val)
+            }
+        },
+        clearItemClass(index){
+            this.archivesList[index].professionalClassId = ''
+            this.archivesList[index].professionalClassName = ''
+            this.archivesList[index].professionalId = ''
+            this.archivesList[index].professionalName = ''
+        },
+        getItemProfessionalClass(item,index){
+            this.clearItemClass(index)
+            if(item){
+                let obj = {}
+                obj = this.subjectList.find(r =>{
+                    return r.disciplineId === item
+                });
+                this.$get(this.api.queryCourseProfessionalClass, { disciplineId: item }).then(res => {
+                    this.archivesList.map(e =>{
+                        if(e.disciplineId == item){
+                            e.ProfessionalClassList = res.list
+                            e.disciplineName = obj.disciplineName
+                        }
+                    })
+                }).catch(res => {})
+            }
+        },
+        getProfessionalClassData(value){
+            this.$get(this.api.queryCourseProfessionalClass, {
+                disciplineId: value
+            }).then(res => {
+                this.ProfessionalClassList = res.list
+            }).catch(res => {})
+        },
+        // 清除专业类
+        clearProfess(){
+            this.archivesForm.professionalId = ''
+        },
+        // 获取专业
+        getProfessional(val){
+            this.clearProfess()
+            if(val){
+                let obj = {}
+                obj = this.ProfessionalClassList.find((item)=>{
+                    return item.professionalClassId === val
+                })
+                this.archivesForm.professionalClassName = obj.professionalClassName
+                this.getProfessionalData(val)
+            }
+        },
+        clearItemProfess(index){
+            this.archivesList[index].professionalId = ''
+            this.archivesList[index].professionalName = ''
+        },
+        getItemProfessional(item,index){
+            this.clearItemProfess(index)
+            if(item){
+                this.$get(this.api.queryCourseProfessional,{ professionalClassId: item }).then(res => {
+                    this.archivesList.map(e =>{
+                        if(e.professionalClassId == item){
+                            let obj = {}
+                            obj = e.ProfessionalClassList.find(r =>{
+                                return r.professionalClassId === item
+                            })
+                            e.ProfessionalList = res.list
+                            e.professionalClassName = obj.professionalClassName
+                        }
+                    })
+                }).catch(res => {})
+            }
+        },
+        getProfessionalData(value){
+            this.$get(this.api.queryCourseProfessional,{professionalClassId: value}).then(res => {
+                this.ProfessionalList = res.list
+            }).catch(res => {})
+        },
+        // 获取专业名称
+        getStuGrade(val){
+            if(val){
+                let obj = {}
+                obj = this.ProfessionalList.find(r =>{
+                    return r.professionalId === val;
+                })
+                this.archivesForm.professionalName = obj.professionalName
+            }
+        },
+        getItemStuGrade(item){
+            if(item){
+                this.archivesList.map(e =>{
+                    if(e.professionalId == item){
+                        let obj = {}
+                        obj = e.ProfessionalList.find(r =>{
+                            return r.professionalId === item;
+                        })
+                        e.professionalName = obj.professionalName
+                    }
+                })
+            }
+        },
+        emailCountdown(){
+            let count = 60
+            if(!this.emailTimer){
+                this.emailDisabled = true
+                this.emailTimer = setInterval(() => {
+                    console.log('倒计时中')
+                    if(count > 0){
+                        count--
+                        this.emailBtnText = `${count}秒后重试`
+                    }else{
+                        this.emailDisabled = false
+                        clearInterval(this.emailTimer)
+                        this.emailTimer = null
+                        this.emailBtnText = `发送验证码`
+                    }
+                },1000)
+            }
+        },
+        phoneCountdown(){
+            let count = 60
+            if(!this.phoneTimer){
+                this.phoneDisabled = true
+                this.phoneTimer = setInterval(() => {
+                    console.log('倒计时中')
+                    if(count > 0){
+                        count--
+                        this.phoneBtnText = `${count}秒后重试`
+                    }else{
+                        this.phoneDisabled = false
+                        clearInterval(this.phoneTimer)
+                        this.phoneTimer = null
+                        this.phoneBtnText = `发送验证码`
+                    }
+                },1000)
+            }
+        },
+        closeEmail(){
+            this.emailCode = ''
+        },
+        sendEmailCode(){
+            if(!this.email) return util.warningMsg('请输入邮箱')
+            if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg('请输入正确的邮箱')
+            let data = {
+                userId: this.form.userId,
+                email: this.email,
+                types: 1
+            }
+            this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
+                if(res.message.opener){
+                    this.emailCountdown()
+                this.emailOpener = res.message.opener
+                }else{
+                    util.errorMsg(res.message)
+                }
+            }).catch(res => {})
+        },
+        emailSubmit(){
+            if(!this.email) return util.warningMsg('请输入邮箱')
+            if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg('请输入正确的邮箱')
+            if(!this.emailCode) return util.warningMsg('请输入验证码')
+            let data = {
+                userId: this.form.userId,
+                email: this.email,
+                types: 1,
+                code: this.emailCode,
+                opener: this.emailOpener
+            }
+            this.$post(this.api.bindPhoneOrEmail,data).then(res => {
+                util.successMsg('绑定成功')
+                this.form.email = this.email
+                this.emailVisible = false
+            }).catch(res => {})
+        },
+        closePhone(){
+            this.phoneCode = ''
+        },
+        sendPhoneCode(){
+            if(!this.phone) return util.warningMsg('请输入手机号')
+            if(!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg('请输入正确的手机号')
+            let data = {
+                userId: this.form.userId,
+                phone: this.phone,
+                types: 2
+            }
+            this.$post(this.api.sendPhoneOrEmailCode,data).then(res => {
+                if(res.message.opener){
+                    this.phoneCountdown()
+                    this.phoneOpener = res.message.opener
+                }else{
+                    util.errorMsg(res.message)
+                }
+                
+            }).catch(res => {})
+        },
+        phoneSubmit(){
+            if(!this.phone) return util.warningMsg('请输入手机号')
+            if(!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg('请输入正确的手机号')
+            if(!this.phoneCode) return util.warningMsg('请输入验证码')
+            let data = {
+                userId: this.form.userId,
+                phone: this.phone,
+                types: 2,
+                code: this.phoneCode,
+                opener: this.phoneOpener
+            }
+            this.$post(this.api.bindPhoneOrEmail,data).then(res => {
+                util.successMsg('绑定成功')
+                this.form.phone = this.phone
+                this.phoneVisible = false
+            }).catch(res => {})
+        },
+        openAccount() {
+            this.account = this.form.account
+            this.accountVisible = true
+        },
+        confirmAccount() {
+            if (this.account) {
+                this.form.account = this.account
+                this.accountVisible = false
+            } else {
+                util.errorMsg('请输入账号')
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+    .scroll{
+        height: calc(100vh - 202px);
+        overflow: auto;
+    }
+    .page{
+        margin-bottom: 12px;
+        /deep/.el-input__inner{
+            border-color: #CACFDB;
+        }
+        .list{
+            .line{
+                display: flex;
+                margin-bottom: 24px;
+                &.info li:not(.selects){
+                    width: 30%;
+                    .el-input{
+                        flex: 1;
+                    }
+                    &:first-child{
+                        margin-right: 16%;
+                    }
+                }
+                &.imp li{
+                    width: calc(30% + 36px) !important;
+                }
+            }
+            li{
+                display: inline-flex;
+                align-items: center;
+                &>label{
+                    width: 100px;
+                    margin-right: 5px;
+                    text-align: right;
+                    font-size: 14px;
+                    color: #4c4c4c;
+                }
+                .el-input{
+                    width: 220px;
+                    .el-input__inner{
+                        border-color: #CACFDB;
+                    }
+                }
+                .el-select .el-input.is-disabled .el-input__inner{
+                    border-color: #ddd;
+                }
+                .val{
+                    margin-right: 15px;
+                    color: #606266;
+                    font-size: 14px;
+                }
+                .mul{
+                    display: inline-flex;
+                    .child{
+                        display: inline-flex;
+                        width: 132px;
+                        margin-right: 10px;
+                        &>span{
+                            margin-bottom: 5px;
+                            font-size: 14px;
+                            color: #575757;
+                        }
+                    }
+                }
+            }
+        }
+        .archives{
+            position: relative;
+            padding: 16px 0;
+            margin-bottom: 6px;
+            border-radius: 4px;
+            background-color: #FAFAFA;
+            .del{
+                position: absolute;
+                top: 48px;
+                right: 16px;
+                cursor: pointer;
+            }
+            li{
+                width: 30%;
+                margin-right: 32px;
+            }
+            .el-select{
+                flex: 1;
+            }
+        }
+        .fold{
+            margin-top: 20px;
+            text-align: center;
+            font-size: 12px;
+            color: #006EFF;
+            span{
+                cursor: pointer;
+                i{
+                    transition: .5s;
+                }
+                &.active i{
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+    .btns{
+        width: 100%;
+        padding: 12px 0;
+        text-align: center;
+        background-color: #fff;
+        box-shadow: 0px 0px 10px 0px rgba(188, 201, 218, 0.4);
+        .el-button{
+            width: 80px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/station/list/index.vue b/src/pages/station/list/index.vue
index 8c7471e..3d0fe10 100644
--- a/src/pages/station/list/index.vue
+++ b/src/pages/station/list/index.vue
@@ -1,9 +1,12 @@
 <template>
     <!--  实验台  -->
-    <div class="box">
+    <div class="box index">
         <div class="search">
-            <input type="text" placeholder="请输入关键词" v-model="keyword">
-            <button>搜索</button>
+            <h6>创新实验，智能教学</h6>
+            <div class="input">
+                <img src="@/assets/img/search.png" alt="">
+                <input type="text" placeholder="请输入关键词" v-model="keyword">
+            </div>
         </div>
         <div class="wrap">
             <template v-for="(item,index) in curriculumList">
@@ -18,7 +21,6 @@
 
 <script>
 export default {
-    name: "backstage",
     data() {
         return {
             keyword: "",
@@ -37,7 +39,6 @@ export default {
             });
         },
         goPreview(item) {
-            // let systemName = item.name.replace("<br>","")
             this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}`);
         },
     }
@@ -45,45 +46,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
-    padding: 20px;
-    background-color: #fff;
-}
-
-/deep/ .el-card {
-    margin-bottom: 0;
-}
-
 .search {
     position: relative;
-    width: 30%;
-    margin: 100px auto 150px;
-    border-radius: 30px;
-    border: 1px solid #9076FF;
-    border-right: 0;
-    overflow: hidden;
+    padding: 121px 0 167px;
+    text-align: center;
+    background: url(../../../assets/img/station-bg.png) 0 0/100% 100% no-repeat;
+    h6 {
+        margin-bottom: 25px;
+        font-size: 32px;
+        color: #fff;
+    }
+    .input {
+        position: relative;
+        width: 700px;
+        margin: 0 auto;
+    }
+    img {
+        position: absolute;
+        top: 19px;
+        left: 14px;
+    }
     input {
         width: 100%;
-        height: 44px;
-        line-height: 44px;
-        padding: 0 20px;
-        font-size: 14px;
+        height: 62px;
+        line-height: 62px;
+        padding: 0 50px;
+        font-size: 18px;
         color: #333;
         border: 0;
-        outline: none !important;
-        box-sizing: border-box;
-    }
-
-    button {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 0 20px;
-        line-height: 46px;
-        color: #fff;
-        background-color: #9076FF;
-        border: 0;
-        outline: none !important;
+        outline: none;
+        border-radius: 4px;
     }
 }
 
diff --git a/src/router/permission.js b/src/router/permission.js
index 034151f..ec7d4b5 100644
--- a/src/router/permission.js
+++ b/src/router/permission.js
@@ -9,7 +9,7 @@ router.beforeEach((to, from, next) => {
     if (!role && to.path !== '/login' && !whiteList.includes(to.path)) {
         next('/index/list')
     } else if(role && to.path == '/login') {
-        next('/index')
+        next('/station')
     } else {
         next()
     }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 52d4212..f5fe11c 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,4 +1,5 @@
 @import "./default/index.scss";
+@import "./var.scss";
 
 @font-face {
   font-family: youshe;
@@ -25,7 +26,28 @@
   border-radius: 6px;
   background: rgba(142, 123, 253, .75);
 }
-
+.main {
+  .view {
+    min-width: $min-width;
+    min-height: calc(100vh - 134px);
+    padding: 12px 200px 0;
+    margin: 0 auto;
+    background-color: #F3F6FA;
+    &.no-pd {
+      padding-top: 0;
+    }
+  }
+  .wrap-inner {
+    min-width: $min-width;
+    width: 100%;
+    padding: 0 200px;
+    margin: 0 auto;
+  }
+  .center-wrap {
+    width: 1000px;
+    margin: 40px auto 0;
+  }
+}
 .p-title {
   padding-left: 5px;
   margin-bottom: 24px;
@@ -126,42 +148,85 @@
 .pagination {
   margin: 20px 0;
   text-align: center;
-
-  button, .number {
-    color: rgba(0, 0, 0, .65) !important;
-    background-color: transparent !important;
-    border: 1px solid rgba(0, 0, 0, 0.15) !important;
-    border-radius: 4px !important;
+  button,.number,.more,.el-input__inner{
+      min-width: 32px !important;
+      height: 32px !important;
+      line-height: 32px;
+      color: #333 !important;
+      background-color: transparent !important;
+      border: 1px solid #ccc !important;
+      border-radius: 2px !important;
   }
-
-  button i {
-    color: #333;
+  button i{
+      color: #333;
   }
-
-  .active {
-    color: #fff !important;
-    background-color: $--color-primary !important;
+  .active{
+      color: #fff !important;
+      background-color: $--color-primary !important;
   }
 }
 
-.el-table {
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-bottom: 0;
-
-  th {
-    background: $--color-primary !important;
-
-    .cell {
-      color: #fff;
-      font-size: 14px;
-      font-weight: normal;
-      .el-checkbox {
-        &:before {
-          opacity: 1;
-        }
+.el-table{
+  border-radius: 4px;
+  .cell{
+      font-size: 12px;
+      .el-checkbox{
+          &:before{
+              content: '全选';
+              margin-right: 5px;
+              color: #222326;
+              font-size: 12px;
+              opacity: 0;
+          }
       }
-    }
+  }
+  th{
+      background: #E8F0FF !important;
+      .cell{
+          color: #222326;
+          font-size: 12px;
+          font-weight: normal;
+          .el-checkbox{
+              &:before{
+                  opacity: 1;
+              }
+          }
+      }
+  }
+  th, td{
+      padding: 10px 0;
+      border-bottom-color: #E1E6F2;
+  }
+  &.el-table--striped .el-table__body tr.el-table__row--striped td{
+      background-color: #FAFBFF;
+  }
+  .el-checkbox__inner{
+      border-radius: 4px;
+      transition: none !important;
+  }
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+      background-color: #FFFFFF;
+      border-color: #DCDFE6;
+  }
+  .el-switch__core{
+      background-color: #bfbfbf;
+  }
+  .el-switch__label--right{
+      z-index: 2;
+      position: absolute;
+      right: 8px;
+      margin-left: 0;
+      color: #fff !important;
+  }
+  .el-switch__label--right.is-active{
+      left: 8px;
+      right: auto;
+  }
+  .el-switch__label--right span{
+      font-size: 12px;
+  }
+  .el-button--text{
+      padding: 0;
   }
 }