个人中心根据学生端完善

src/pages/setting/list/index.vue

@@ -110,10 +110,4 @@ export default {
         flex: 1;
     }
 }
-@media (max-width: 1750px) {
-    .wrap {
-        min-width: 1500px;
-        padding: 12px 100px 20px;
-    }
-}
 </style>

src/pages/setting/list/info.vue

@@ -1,9 +1,5 @@
 <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>
@@ -86,7 +82,7 @@
                             </div>
                         </ul>
                     </div>
-                    <div class="flex j-between a-center m-r-20">
+                    <div class="flex j-between a-center" style="width: 862px">
                         <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>
@@ -981,145 +977,127 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.topBack {
+.scroll{
-    // position: absolute;
+    max-height: calc(100vh - 220px);
-    // top: 0;
+    overflow: auto;
-    // 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{
+.page{
-        height: calc(100vh - 202px);
+    margin-bottom: 12px;
-        overflow: auto;
+    /deep/.el-input__inner{
+        border-color: #CACFDB;
     }
-    .page{
+    .list{
-        margin-bottom: 12px;
+        .line{
-        /deep/.el-input__inner{
+            display: flex;
-            border-color: #CACFDB;
+            margin-bottom: 24px;
-        }
+            &.info li:not(.selects){
-        .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;
+                    flex: 1;
-                    .el-input__inner{
-                        border-color: #CACFDB;
-                    }
-                }
-                .el-select .el-input.is-disabled .el-input__inner{
-                    border-color: #ddd;
                 }
-                .val{
+            }
-                    margin-right: 15px;
+            &.imp li{
-                    color: #606266;
+                &:nth-child(odd) {
-                    font-size: 14px;
+                    width: 360px;
-                }
+                    margin-right: 64px;
-                .mul{
-                    display: inline-flex;
-                    .child{
-                        display: inline-flex;
-                        width: 132px;
-                        margin-right: 10px;
-                        &>span{
-                            margin-bottom: 5px;
-                            font-size: 14px;
-                            color: #575757;
-                        }
-                    }
                 }
             }
         }
-        .archives{
+        .el-input, .el-select{
-            position: relative;
+            width: 220px;
-            width: 862px;
+            .el-input__inner{
-            padding: 16px 0;
+                border-color: #CACFDB;
-            margin-bottom: 6px;
-            border-radius: 4px;
-            background-color: #FAFAFA;
-            .del{
-                position: absolute;
-                top: 80px;
-                right: 19px;
-                cursor: pointer;
             }
-            .line {
+        }
-                justify-content: space-between;
+        li{
-            }
+            display: inline-flex;
-            li{
+            align-items: center;
-                margin-right: 60px;
+            &>label{
+                width: 100px;
+                margin-right: 5px;
+                text-align: right;
+                font-size: 14px;
+                color: #4c4c4c;
+                white-space: nowrap;
             }
-            .el-select{
+            .el-select {
                 flex: 1;
             }
-        }
+            .el-select .el-input.is-disabled .el-input__inner{
-        .fold{
+                border-color: #ddd;
-            margin-top: 20px;
+            }
-            text-align: center;
+            .val{
-            font-size: 12px;
+                margin-right: 15px;
-            color: #006EFF;
+                color: #606266;
-            span{
+                font-size: 14px;
-                cursor: pointer;
+            }
-                i{
+            .mul{
-                    transition: .5s;
+                display: inline-flex;
-                }
+                .child{
-                &.active i{
+                    display: inline-flex;
-                    transform: rotate(180deg);
+                    width: 132px;
+                    margin-right: 10px;
+                    &>span{
+                        margin-bottom: 5px;
+                        font-size: 14px;
+                        color: #575757;
+                    }
                 }
             }
+            &:nth-child(odd) {
+                width: 325px;
+                margin-right: 100px;
+            }
         }
     }
-    .btns{
+    .archives{
-        width: 100%;
+        position: relative;
-        padding: 12px 0;
+        width: 862px;
+        padding: 16px 0;
+        margin-bottom: 6px;
+        border-radius: 4px;
+        background-color: #FAFAFA;
+        .del{
+            position: absolute;
+            top: 80px;
+            right: 19px;
+            cursor: pointer;
+        }
+    }
+    .fold{
+        margin-top: 20px;
         text-align: center;
-        background-color: #fff;
+        font-size: 12px;
-        box-shadow: 0px 0px 10px 0px rgba(188, 201, 218, 0.4);
+        color: #006EFF;
-        .el-button{
+        span{
-            width: 80px;
+            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;
+    }
+}
+    
+.l-title{
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #333;
+  img{
+    margin-right: 5px;
+  }
+}
 </style>

src/router/routes.js

@@ -13,7 +13,22 @@ const frameIn = [
         meta: { title: "首页" },
         children: []
     },
-
+    {
+        path: "/setting",
+        name: "setting",
+        redirect: {
+            name: `/setting-person`
+        },
+        component: BasicLayout,
+        children: [
+            {
+                name: `setting-person`,
+                path: `person`,
+                component: () => import("@/pages/setting/list"),
+                meta: { title: "个人中心" }
+            }
+        ]
+    }
 ];
 
 /**
@@ -34,14 +49,6 @@ const frameOut = [
         path: "/redirect",
         name: "redirect",
         component: () => import("@/pages/account/redirect")
-    },
-    {
-        path: "/setting/person",
-        name: "person",
-        meta: {
-            title: "个人中心"
-        },
-        component: () => import("@/pages/setting/list")
     }
 ];
 

src/styles/common.scss

@@ -17,7 +17,7 @@
 ::-webkit-scrollbar-thumb {
   width: 5px;
   border-radius: 6px;
-  background: rgba(146, 120, 255, .7);
+  background: #d7d7d7;
 }
 
 .flex-between {