个人中心页面功能完善，样式调整

@@ -84,7 +84,7 @@
     },
     mounted () {
       if (this.userInfo) {
-        this.getUserdata(this.userInfo)
+        this.getUserdata(this.userInfo.id)
       }
       this.sexList = [
         {
@@ -105,8 +105,8 @@
       ]
     },
     methods: {
-      getUserdata (p) {
-        getAction(`${api.users}/${p.id}`).then((res) => {
+      getUserdata (id) {
+        getAction(`${api.users}/${id}`).then((res) => {
           if (res.status === 1) {
             this.form = res.content
           } else {
@@ -135,7 +135,6 @@
 <style scoped lang="scss">
   .user-info {
     margin: 0.1875rem 1.0417rem;
-    background: #ffffff;
     overflow-y: auto;
     .form-wrapper {
       padding: 0px 120px 0px;
@@ -156,7 +155,7 @@
     }
     .bottom-wrapper {
       padding: 0px 120px 0px;
-      text-align: right;
+      text-align: center;
     }
   }
 </style>

 <!--
  * @Author: xiaomiao 1158771342@qq.com
  * @Date: 2023-03-08 15:30:43
- * @LastEditors: xiaomiao 1158771342@qq.com
- * @LastEditTime: 2023-03-08 16:33:50
- * @FilePath: \监管系统\js-web-jianguan\src\views\system\information copy\index.vue
+ * @LastEditors: yangwei
+ * @LastEditTime: 2023-03-13 17:19:46
+ * @FilePath: \bdcjg-web\src\views\system\information\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
@@ -15,8 +15,18 @@
         </el-form-item>
         <el-row class="mb-5">
           <el-col :span="3" class="btnColRight">
-            <btn nativeType="cx" @click="information">基本信息</btn>
-            <btn nativeType="cx" @click="password">修改密码</btn>
+            <!-- <btn nativeType="cx"  @click="information"
+              >基本信息</btn
+            >
+            <btn nativeType="cx" :class="isshow ? '' : ''" @click="password"
+              >修改密码</btn
+            > -->
+            <button @click="information" :class="isshow ? 'button choosed' : 'button'">
+              基本信息
+            </button>
+            <button @click="password" :class="isshow ? 'button' : 'button choosed'">
+              修改密码
+            </button>
           </el-col>
         </el-row>
       </el-form>
@@ -30,45 +40,59 @@
   </div>
 </template>
 <script>
-  import "@/utils/flexible.js";
-  import BaseSet from "./base-set.vue";
-  import PasswordEdit from "./password-edit.vue";
-  export default {
+import "@/utils/flexible.js";
+import BaseSet from "./base-set.vue";
+import PasswordEdit from "./password-edit.vue";
+export default {
   components: {
     BaseSet,
     PasswordEdit,
   },
-    data () {
+  data() {
     return {
       isshow: true,
     };
   },
   computed: {
-      userData () {
+    userData() {
       return this.$store.state.user.userInfo;
     },
   },
   watch: {},
-    created () { },
-    mounted () {
-
-
-    },
+  created() {},
+  mounted() {},
   methods: {
-      information () {
+    information() {
       this.isshow = true;
     },
-      password () {
+    password() {
       this.isshow = false;
     },
   },
-  };
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/public.scss";
-  .information {
+@import "~@/styles/mixin.scss";
+@import "~@/styles/public.scss";
+.information {
+  display: flex;
+  flex-direction: column;
+  .btnColRight {
+    .button {
+      width: 76px;
+      height: 32px;
+      color: #ffffff;
+      margin: 0 5px;
+      cursor: pointer;
+      border: 0;
+      background: url('../../../image/btn.png') no-repeat 0 0;
+      background-size: cover;
+    }
+    .choosed{
+      background: url('../../../image/btn.png') no-repeat 0 -34px;
+    }
+  }
   /deep/.content {
     .el-input__inner {
       background: none;
@@ -76,10 +100,9 @@
     .user-info {
       background: none;
     }
-
-      .boxin {
-        height: 79%;
-      }
   }
+  .boxin {
+    flex: 1;
   }
+}
 </style>

@@ -6,27 +6,31 @@
         label-width="100px"
         :model="form"
         class="form-wrapper"
-        :rules="rules">
+        :rules="rules"
+      >
         <el-form-item label="旧密码:" prop="oldPassword">
           <el-input
             v-model="form.oldPassword"
             clearable
             type="password"
-            show-password />
+            show-password
+          />
         </el-form-item>
         <el-form-item label="新密码:" prop="newPassword">
           <el-input
             v-model="form.newPassword"
             clearable
             type="password"
-            show-password />
+            show-password
+          />
         </el-form-item>
         <el-form-item label="确认密码:" prop="confirmPassword">
           <el-input
             v-model="form.confirmPassword"
             clearable
             type="password"
-            show-password />
+            show-password
+          />
         </el-form-item>
       </el-form>
       <div class="bottom-wrapper">
@@ -37,83 +41,81 @@
 </template>
 
 <script>
-  import { updateUserPassword } from "@/api/personnelManage";
-  export default {
+import { updateUserPassword } from "@/api/personnelManage";
+export default {
   props: {
     userInfo: {
       type: Object,
-        default: null
-      }
+      default: null,
+    },
   },
-    data () {
+  data() {
     return {
       form: {},
       sexList: [],
-        userId: '',
+      userId: "",
       rules: {
         oldPassword: [
-            { required: true, message: '旧密码不能为空', trigger: 'blur' }
+          { required: true, message: "旧密码不能为空", trigger: "blur" },
         ],
         newPassword: [
-            { required: true, message: '新密码不能为空', trigger: 'blur' }
+          { required: true, message: "新密码不能为空", trigger: "blur" },
         ],
         confirmPassword: [
-            { required: true, message: '确认密码不能为空', trigger: 'blur' },
-            { validator: this.validatorConfirmPassword, trigger: 'blur' }
-          ]
-        }
-      }
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { validator: this.validatorConfirmPassword, trigger: "blur" },
+        ],
+      },
+    };
   },
   computed: {},
   watch: {
     userInfo: {
       handler: function (val) {
         if (val) {
-            this.getid(val)
-          }
+          this.getid(val);
         }
-      }
-
       },
-    mounted () {
+    },
+  },
+  mounted() {
     if (this.userInfo) {
-        this.getid(this.userInfo)
+      this.getid(this.userInfo);
     }
   },
   methods: {
-      getid (val) {
-        this.userId = val.id
+    getid(val) {
+      this.userId = val.id;
     },
-      validatorConfirmPassword (rule, value, callback) {
-        const { newPassword } = this.form
+    validatorConfirmPassword(rule, value, callback) {
+      const { newPassword } = this.form;
       if (value !== newPassword) {
-          callback('两次输入密码不一致')
+        callback("两次输入密码不一致");
       } else {
-          callback()
+        callback();
       }
     },
-      updatePassword () {
+    updatePassword() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-            const params = Object.assign({}, this.form, { id: this.userId })
+          const params = Object.assign({}, this.form, { id: this.userId });
           updateUserPassword(params).then((res) => {
             if (res.status === 1) {
-                this.$message.success({ message: res.message, showClose: true })
+              this.$message.success({ message: res.message, showClose: true });
             } else {
-                this.$message.error({ message: res.message, showClose: true })
-              }
-            })
-          }
-        })
-      }
+              this.$message.error({ message: res.message, showClose: true });
             }
+          });
         }
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .user-info {
+.user-info {
   margin: 36px 200px;
-    background: #ffffff;
   overflow-y: auto;
   .form-wrapper {
     padding: 24px 120px 0px;
@@ -132,7 +134,7 @@
   }
   .bottom-wrapper {
     padding: 32px 120px 24px;
-      text-align: right;
-    }
+    text-align: center;
   }
+}
 </style>