diff --git a/src/assets/img/info1.png b/src/assets/img/info1.png
new file mode 100644
index 0000000..2bf441d
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..f1c90f3
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..555bb59
Binary files /dev/null and b/src/assets/img/info3.png differ
diff --git a/src/assets/img/trash.png b/src/assets/img/trash.png
new file mode 100644
index 0000000..9e0bbda
Binary files /dev/null and b/src/assets/img/trash.png differ
diff --git a/src/pages/setting/list/index.vue b/src/pages/setting/list/index.vue
index acf40c6..a4689fc 100644
--- a/src/pages/setting/list/index.vue
+++ b/src/pages/setting/list/index.vue
@@ -1,1471 +1,119 @@
 <template>
+    <div class="main">
         <div class="wrap">
-            <div class="topBack">
-                <div class="back" @click="goBack"><i class="el-icon-arrow-left"></i>返回</div>
-            </div>
-            <!-- 头像部分 -->
-            <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" @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 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>
 
-                    <!-- 个人档案 -->
-                    <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>
-                </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" @click="bindPhone">更换</el-button>
-                                <el-button v-else type="primary" @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" @click="bindEmail">更换</el-button>
-                                <el-button v-else type="primary" @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" @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>
+    </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'
+        ]),
     },
     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.setAvatar(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", []);
-                            }
-                            // if(e.provinceId){
-                            //     this.$get(this.api.queryCity,{provinceId: e.provinceId}).then(res => {
-                            //         this.$set(e, 'cityList', res.message);
-                            //     }).catch(res => {});
-                            // }else{
-                            //     this.$set(e, 'cityList', []);
-                            // }
-                        });
-                    } 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;
-            }
+        changeAvatar(res) {
+            this.setAvatar(res.message)
         },
-        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 => {
-            });
-        },
-        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 => {
-            });
-        },
-        goBack() {
-            this.$router.go(-1);
+        updateStatus(status){
+            this.edited = status
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.topBack {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: #ffffff;
+.main{
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: 60px;
-    font-size: 16px;
-    color: #333;
-    .back {
-        cursor: pointer;
-        line-height: 60px;
-        height: 60px;
-        font-size: 16px;
-        font-weight: bold;
-        margin-left: 20px;
-        i {
-            color: #9278ff;
-            font-size: 20px;
-        }
-    }
-}
-.arrowTransform {
-    transition: 0.5s;
-    transform-origin: center;
-    transform: rotateZ(180deg);
+    justify-content: center;
 }
-
-.arrowTransformReturn {
-    transition: 0.5s;
-    transform-origin: center;
-    transform: rotateZ(0deg);
-}
-
-.wrap {
-    margin: -24px -24px 20px;
-    padding-top: 170px;
-    padding-bottom: 40px;
+.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;
-    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 {
-        display: flex;
-        justify-content: space-between;
-
-        i {
-            font-size: 22px;
-            color: #21d749;
-            cursor: pointer;
+    width: $min-width;
+    padding: 12px 0 0;
+    .left{
+        margin-right: 12px;
+        background-color: #fff;
+        box-shadow: 2px 0px 6px 0px #EEEEEE;
+        .inner{
+            width: 170px;
+            padding: 20px 0;
         }
-    }
-
-    .information {
-        .archives {
-            padding: 15px;
-            margin-bottom: 20px;
-            border: 1px dashed #c9c9c9;
-            border-radius: 8px;
+        .avatar{
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
         }
-
-        .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;
+        .menu{
+            margin-top: 32px;
+            li{
+                padding: 0 20px;
+                color: #303133;
                 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 {
-                    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;
-            }
-        }
-    }
-
-    .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;
+    .right{
+        flex: 1;
     }
-
-    /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;
+}
+@media (max-width: 1750px) {
+    .wrap {
+        min-width: 1500px;
+        padding: 12px 100px 20px;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/setting/list/info.vue b/src/pages/setting/list/info.vue
new file mode 100644
index 0000000..225d71f
--- /dev/null
+++ b/src/pages/setting/list/info.vue
@@ -0,0 +1,1125 @@
+<template>
+        <div>
+            <div class="topBack">
+                <div class="back" @click="goBack"><i class="el-icon-arrow-left"></i>返回</div>
+            </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 id="username" class="username" placeholder="请输入姓名" type="text" v-model="personalInformation.userName" />
+                                </li>
+                                <li>
+                                    <label>所在国家：</label>
+                                    <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>
+                                </li>
+                            </div>
+                            <div class="line info">
+                                <li>
+                                    <label>性别：</label>
+                                    <el-select size="small" v-model="personalInformation.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="personalInformation.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="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>
+                                        </div>
+                                        <div class="child">
+                                            <el-select size="small" 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>
+                                </li>
+                            </div>
+                            <div class="line info">
+                                <li>
+                                    <label>出生年月：</label>
+                                        <el-date-picker
+                                            v-model="personalInformation.dateBirth"
+                                            :clearable="false"
+                                            class="block-right"
+                                            type="date">
+                                        </el-date-picker>
+                                    </li>
+                                <li>
+                                    <label>证件：</label>
+                                    <el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" id="idnumber" class="idnumber" placeholder="请输入证件" type="text" v-model="personalInformation.idNumber" />
+                                </li>
+                            </div>
+                            <div class="line info">
+                                <li>
+                                    <label>教育程度：</label>
+                                    <el-select size="small" 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>
+                                </li>
+                                <li>
+                                    <label>当前所在学校：</label>
+                                    <el-input size="small" placeholder="请输入学校" v-model="personalInformation.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="personalInformation.countries" placeholder>
+                                            <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">
+                                    <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>
+                                    <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>
+                                </div>
+                                <div class="line" style="margin-bottom: 0">
+                                    <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="personalInformation.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="personalInformation.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="personalInformation.email" disabled></el-input>
+                                    <el-button v-if="personalInformation.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="******" 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="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>
+
+            <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="editUsername" 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 Setting from "@/setting";
+import util from "@/libs/util";
+import { mapState, mapActions } from "vuex";
+
+export default {
+    data() {
+        return {
+            editUsername: '',
+            accountVisible: false,
+            updateTime: 0,
+            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: [
+                {
+                    label: "中国"
+                }
+            ],
+            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
+        };
+    },
+    computed: {
+        ...mapState("user", [
+            "userId", "avatar"
+        ])
+    },
+    mounted() {
+        this.getdata();
+        this.getProvince();
+        this.getSchoolData();
+        this.getSubject();
+
+    },
+    methods: {
+        ...mapActions("user", [
+            "setAvatar", "setUserName"
+        ]),
+        confirmAccount() {
+            if (this.editUsername) {
+                this.personalInformation.account = this.editUsername
+                this.accountVisible = false
+            } else {
+                util.errorMsg('请输入账号')
+            }
+        },
+        openAccount() {
+            this.editUsername = this.personalInformation.account
+            this.accountVisible = true
+        },
+        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.setAvatar(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", []);
+                            }
+                            // if(e.provinceId){
+                            //     this.$get(this.api.queryCity,{provinceId: e.provinceId}).then(res => {
+                            //         this.$set(e, 'cityList', res.message);
+                            //     }).catch(res => {});
+                            // }else{
+                            //     this.$set(e, 'cityList', []);
+                            // }
+                        });
+                    } 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 => {
+            });
+        },
+        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 => {
+            });
+        },
+        goBack() {
+            if(this.updateTime > 0){
+                this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', {
+                    type: 'warning'
+                }).then(() => {
+                    this.save()
+                    this.$router.go(-1);
+                }).catch(() => {
+                })
+            }else{
+                this.$router.go(-1);
+            }
+        }
+    },
+    watch: {
+        // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
+        personalInformation: {
+            handler(){
+                this.updateTime++
+                // if(this.updateTime > 1) this.$emit('updateStatus',this.updateTime > 1)
+            },
+            deep:true
+        },
+        archivesForm: {
+            handler(){
+                this.updateTime++
+                // if(this.updateTime > 1) this.$emit('updateStatus',this.updateTime > 1)
+            },
+            deep:true
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.topBack {
+    // position: absolute;
+    // top: 0;
+    // left: 0;
+    // right: 0;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    color: #333;
+    .back {
+        cursor: pointer;
+        line-height: 60px;
+        height: 60px;
+        font-size: 16px;
+        font-weight: bold;
+        margin-left: 20px;
+        i {
+            color: #9278ff;
+            font-size: 20px;
+        }
+    }
+}
+    .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;
+            width: 862px;
+            padding: 16px 0;
+            margin-bottom: 6px;
+            border-radius: 4px;
+            background-color: #FAFAFA;
+            .del{
+                position: absolute;
+                top: 80px;
+                right: 19px;
+                cursor: pointer;
+            }
+            .line {
+                justify-content: space-between;
+            }
+            li{
+                margin-right: 60px;
+            }
+            .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/system/list/role.vue b/src/pages/system/list/role.vue
index 2c05b3c..82d6901 100644
--- a/src/pages/system/list/role.vue
+++ b/src/pages/system/list/role.vue
@@ -16,13 +16,13 @@
         <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
             <el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column>
             <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
-            <el-table-column prop="roleName" label="角色名称" align="center" width="100"></el-table-column>
+            <el-table-column prop="roleName" label="角色名称" align="center" width="200"></el-table-column>
             <el-table-column label="角色描述" align="center">
                 <template slot-scope="scope">
                     <el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.remark" disabled></el-input>
                 </template>
             </el-table-column>
-            <el-table-column label="操作" align="center">
+            <el-table-column label="操作" align="center" width="200">
                 <template slot-scope="scope">
                     <el-button v-if="auth('角色权限-查看')" type="text" @click="showRole(scope.row)">查看</el-button>
                     <el-button v-if="auth('角色权限-编辑') && scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button>
diff --git a/src/styles/var.scss b/src/styles/var.scss
index c9d3fd7..6781db1 100644
--- a/src/styles/var.scss
+++ b/src/styles/var.scss
@@ -1,4 +1,6 @@
 $main-color: #9278FF;
+$max-width: 1440px;
+$min-width: 1280px;
 
 @mixin ellipsis {
   overflow: hidden;