From 6f23040d7580a8a842731fd0a809c9e73dcd4dc5 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期二, 06 七月 2021 14:22:23 +0800
Subject: [PATCH] 全景跟踪.隐藏轨迹图菜单

---
 src/pages/systemSettings/index/App.vue |  453 ++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 323 insertions(+), 130 deletions(-)

diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue
index c4a9817..785be66 100644
--- a/src/pages/systemSettings/index/App.vue
+++ b/src/pages/systemSettings/index/App.vue
@@ -3,6 +3,7 @@
     <div class="container-left">
       <div
         class="left-card"
+        :class="activeIndex == index ? 'left-card-active' : ''"
         v-for="(item, index) in menuArr"
         :key="index"
         @click="openMenu(item, index)"
@@ -27,7 +28,15 @@
             @click="openAccount(item, index)"
           >
             <div class="touxiang">
-              <img :src="item.headpic" alt="" />
+              <img
+                v-if="item.headpic"
+                :src="
+                  item.headpic.indexOf('http') > -1
+                    ? item.headpic
+                    : 'http://' + item.headpic
+                "
+                alt=""
+              />
             </div>
             <span class="user-name">{{ item.username }}</span>
           </div>
@@ -51,13 +60,21 @@
 
         <div class="line">
           <div class="name">NTP鏍℃椂</div>
-          <el-switch v-model="isNtp" active-color="rgba(61, 104, 225, 1)">
+          <el-switch
+            v-model="isNtp"
+            @change="changeSwitch('isNtp')"
+            active-color="rgba(61, 104, 225, 1)"
+          >
           </el-switch>
         </div>
 
         <div class="line">
           <div class="name">鎵嬪姩鏍″</div>
-          <el-switch v-model="isManual" active-color="rgba(61, 104, 225, 1)">
+          <el-switch
+            v-model="isManual"
+            @change="changeSwitch('isManual')"
+            active-color="rgba(61, 104, 225, 1)"
+          >
           </el-switch>
         </div>
       </div>
@@ -73,7 +90,15 @@
         >
           <div class="content-top">
             <div class="touxiang-big">
-              <img :src="activeAccountItem.headpic" alt="" />
+              <img
+                v-if="activeAccountItem.headpic"
+                :src="
+                  activeAccountItem.headpic.indexOf('http') > -1
+                    ? activeAccountItem.headpic
+                    : 'http://' + activeAccountItem.headpic
+                "
+                alt=""
+              />
             </div>
             <div class="user-desc">
               <div class="username">
@@ -100,6 +125,13 @@
                   >&#xe60c;</span
                 >
               </div>
+              <div class="user-role">
+                {{
+                  activeAccountItem.sysRoles.length
+                    ? activeAccountItem.sysRoles[0].name
+                    : ""
+                }}
+              </div>
             </div>
           </div>
           <div class="list-btn">
@@ -111,14 +143,13 @@
 
         <div class="change-pw" v-if="inAccountDetail && isChangePw">
           <div class="title">淇敼瀵嗙爜</div>
-
           <el-form
             :model="passwordForm"
             :rules="pwRules"
             ref="passwordForm"
             class="password-form"
           >
-            <el-form-item prop="pw">
+            <el-form-item prop="curPassword">
               <div class="p-title">褰撳墠瀵嗙爜锛�</div>
 
               <el-input
@@ -127,7 +158,7 @@
                 show-password
               ></el-input>
             </el-form-item>
-            <el-form-item prop="newPw">
+            <el-form-item prop="newPassword">
               <div class="p-title">鏂板瘑鐮侊細</div>
               <el-input
                 placeholder="蹇呭~"
@@ -135,7 +166,7 @@
                 show-password
               ></el-input>
             </el-form-item>
-            <el-form-item prop="confirmNewPw">
+            <el-form-item prop="confirmPassword">
               <div class="p-title">纭瀵嗙爜锛�</div>
               <el-input
                 placeholder="蹇呭~"
@@ -145,39 +176,44 @@
             </el-form-item>
           </el-form>
           <div class="btns">
-            <div class="cancel" @click="cancelChangePassword">鍙栨秷</div>
-            <div class="ok">淇濆瓨</div>
+            <div class="cancel" @click="cancelPassword">鍙栨秷</div>
+            <div class="ok" @click="SaveNewPassword('passwordForm')">淇濆瓨</div>
           </div>
         </div>
 
         <div class="permission" v-if="inAccountDetail && isSetPermission">
           <div class="title">鏉冮檺绠$悊</div>
 
-          <div class="line">
-            <div class="name">瀹炴椂鐩戞帶</div>
-            <el-switch
-              v-model="isRealtime"
-              active-color="rgba(61, 104, 225, 1)"
-            >
-            </el-switch>
+          <div class="line-wrap" v-for="item in sysMenus" :key="item.id">
+            <div class="line">
+              <div class="name">{{ item.name }}</div>
+              <el-switch
+                v-model="item.selected"
+                active-color="rgba(61, 104, 225, 1)"
+                @change="fatherChange(item)"
+              >
+              </el-switch>
+            </div>
+            <div v-if="item.children">
+              <div
+                class="line"
+                style="margin-left: 55px"
+                v-for="x in item.children"
+                :key="x.id"
+              >
+                <div class="name">{{ x.name }}</div>
+                <el-switch
+                  v-model="x.selected"
+                  active-color="rgba(61, 104, 225, 1)"
+                  @change="childrenChange(item)"
+                >
+                </el-switch>
+              </div>
+            </div>
           </div>
-          <div class="line">
-            <div class="name">缁熻鏌ヨ</div>
-            <el-switch v-model="isCount" active-color="rgba(61, 104, 225, 1)">
-            </el-switch>
-          </div>
-          <div class="line">
-            <div class="name">绠楀姏绠$悊</div>
-            <el-switch
-              v-model="isCalculate"
-              active-color="rgba(61, 104, 225, 1)"
-            >
-            </el-switch>
-          </div>
-
           <div class="btns">
             <div class="cancel" @click="cancelSet">鍙栨秷</div>
-            <div class="ok">淇濆瓨</div>
+            <div class="ok" @click="saveAuth">淇濆瓨</div>
           </div>
         </div>
 
@@ -186,9 +222,15 @@
           <div class="upload-group">
             <div
               class="upload-jpg"
-              v-for="(item, index) in jpgArr"
+              :class="
+                selectedPic == index && url !== '' ? 'upload-jpg-mask' : ''
+              "
+              v-for="(url, index) in jpgArr"
               :key="index"
-            ></div>
+              @click="pickHeadDefPic(url, index)"
+            >
+              <img v-if="url !== ''" :src="url" alt="" srcset="" />
+            </div>
 
             <el-upload
               class="upload-demo"
@@ -213,10 +255,19 @@
                   v-model="addForm.userName"
                 ></el-input>
               </el-form-item>
+              <el-form-item prop="roleId">
+                <div class="p-title">瑙掕壊锛�</div>
+                <el-select
+                  v-model="addForm.roleId"
+                  placeholder="璇烽�夋嫨瑙掕壊"
+                >
+                  <el-option v-for="(item,i) in roleList" :key="i" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
               <el-form-item prop="nickName">
                 <div class="p-title">鏄电О锛�</div>
                 <el-input
-                  placeholder="蹇呭~"
+                  placeholder="閫夊~"
                   v-model="addForm.nickName"
                 ></el-input>
               </el-form-item>
@@ -418,7 +469,7 @@
         </div>
 
         <div class="btns">
-          <div class="cancel" @click="cancelChangePassword">鍙栨秷</div>
+          <div class="cancel" @click="cancelPassword">鍙栨秷</div>
           <div class="ok" @click="submitClock">淇濆瓨</div>
         </div>
       </div>
@@ -445,7 +496,18 @@
 
 <script>
 import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system";
-import { uploadHeadPic, addUser, getUsers, updateUser,updatePassword } from "@/api/user";
+import {
+  uploadHeadPic,
+  addUser,
+  getUsers,
+  updateUser,
+  updataUser,
+  updatePassword,
+  deleteUser,
+  getUserMenus,
+  defHeadPics,
+  getRoles,
+} from "@/api/user";
 import switchBar from "../components/switchBar";
 import ipInput from "@/components/subComponents/IPInput";
 import clusterManagement from "../views/clusterManagement";
@@ -463,20 +525,19 @@
     generalSettings,
   },
   data() {
-    var validatePass = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("璇疯緭鍏ュ瘑鐮�"));
-      } else {
-        if (this.addForm.checkPass !== "") {
-          this.$refs.addForm.validateField("checkPassword");
-        }
-        callback();
-      }
-    };
     var validatePass2 = (rule, value, callback) => {
       if (value === "") {
         callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
       } else if (value !== this.addForm.password) {
+        callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
+      } else {
+        callback();
+      }
+    };
+    var validatePass4 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
+      } else if (value !== this.passwordForm.newPassword) {
         callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
       } else {
         callback();
@@ -505,8 +566,10 @@
       showSecInput: false,
       showYrsInput: false,
       showMonthInput: false,
+      selectedPic: null,
       showDayInput: false,
-
+      cameraInfo: false,
+      dependentScene: false,
       timestamp: 0,
       inAccountDetail: false,
       isChangePw: false,
@@ -516,6 +579,7 @@
       syncType: "1",
       equipmentTime: "",
       equipmentDate: "",
+      roleList: [],
       ntpTestLoading: false,
       settime: "",
       weekday: "",
@@ -528,7 +592,7 @@
         { name: "閫氱敤璁剧疆" },
       ],
       accountArr: [],
-      jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
+      jpgArr: ["", "", "", "", "", "", "", "", ""],
       isManual: false,
       isNtp: true,
       activePage: "璐︽埛",
@@ -547,23 +611,43 @@
         confirmPassword: "",
       },
       activeAccountIndex: 0,
+      sysMenus: [],
       addForm: {
         userName: "",
         nickName: "",
         password: "",
         headpic: "",
         confirmPassword: "",
+        roleId:""
       },
       rules: {
-        password: [{ validator: validatePass, trigger: "blur" }],
+        userName: [
+          { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
+          {
+            min: 3,
+            max: 10,
+            message: "闀垮害鍦� 3 鍒� 10 涓瓧绗�",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
+          { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" },
+        ],
         confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
-        // age: [{ validator: checkAge, trigger: "blur" }],
       },
-      pwRules:{
-        pw: [{ validator: validatePass3, trigger: "blur" }],
-        newPw: [{ validator: validatePass3, trigger: "blur" }],
-        confirmNewPw: [{ validator       : validatePass4, trigger: "blur" }],
-      }
+      pwRules: {
+        // pw: [{ validator: validatePass3, trigger: "blur" }],
+        curPassword: [
+          { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
+          { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" },
+        ],
+        newPassword: [
+          { required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
+          { min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" },
+        ],
+        confirmPassword: [{ validator: validatePass4, trigger: "blur" }],
+      },
     };
   },
   beforeDestroy() {
@@ -571,21 +655,28 @@
     clearInterval(this.browserTimer);
   },
   mounted() {
-    const s = document.getElementsByClassName("left-card")[0];
-    s.style.backgroundColor = "rgba(61, 104, 225, 1)";
-    s.style.color = "#fff";
-    this.$nextTick(() => {
-      this.initClockConf();
-    });
-
     this.fetchUserList();
+    this.fetchDefHeadPic();
   },
   methods: {
-    fetchUserList() {
+    fetchDefHeadPic() {
+      defHeadPics().then((res) => {
+        res.data.forEach((x, i) => {
+          this.jpgArr[i] = x;
+        });
+      });
+    },
+    fetchUserList(showLast = false) {
       getUsers().then((res) => {
         this.accountArr = res.data;
         if (this.accountArr.length) {
           this.activeAccountItem = this.accountArr[0];
+          this.activeAccountIndex = 0
+        }
+        if (showLast) {
+          this.cancelAdd();
+          const lastIdx = this.accountArr.length - 1;
+          this.openAccount(this.accountArr[lastIdx], lastIdx);
         }
       });
     },
@@ -604,12 +695,15 @@
         nickname: this.inputNickName,
       }).then((res) => {
         this.$message.success(res.msg);
-        this.fetchUserList();
+        this.fetchUserList(true);
       });
     },
     openAccount(item, i) {
       this.activeAccountItem = item;
       this.activeAccountIndex = i;
+      this.inAccountDetail = false;
+      this.cancelSet();
+      this.fetchMenu();
     },
     minusOne(typ) {
       this.isSyncBrowser = false;
@@ -666,11 +760,18 @@
           break;
       }
     },
+    fatherChange(item) {
+      item.children.forEach((x) => {
+        x.selected = item.selected;
+      });
+    },
+    childrenChange(item) {
+      let isAllSelected = item.children.every((x) => x.selected == true);
+      item.selected = isAllSelected
+    },
     getMaxDay() {
       const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate();
-      if (this.syncDay > maxDay) {
-        this.syncDay = maxDay;
-      }
+      if (this.syncDay > maxDay) this.syncDay = maxDay;
     },
     plusOne(typ) {
       this.isSyncBrowser = false;
@@ -715,7 +816,6 @@
           if (num > maxDay) {
             num = 1;
           }
-          //
           this.syncDay = this.padZero(num);
           break;
         default:
@@ -723,9 +823,8 @@
       }
     },
     submitClock() {
-      debugger;
       if (this.syncType === "1") {
-        if (this.ntpServer === "") {
+        if (this.ntpServer === "" || this.ntpServer === "...") {
           this.$notify({
             type: "error",
             message: "NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖",
@@ -745,14 +844,13 @@
       } else {
         this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`;
       }
-      let requestBody = {
+      saveClockInfo({
         timeZone: this.timezone,
         ntp: this.syncType === "1",
         ntpServer: this.ntpServer,
         interval: this.timeInterval,
         newTime: this.settime,
-      };
-      saveClockInfo(requestBody).then((rsp) => {
+      }).then((rsp) => {
         if (rsp && rsp.success) {
           this.$notify({
             type: "success",
@@ -762,19 +860,35 @@
         this.initClockConf();
       });
     },
+    flatGetArr(arr, res) {
+      for (const item of arr) {
+        if (item.selected) res.push(item.id);
+        if (item.children) this.flatGetArr(item.children, res);
+      }
+    },
+    saveAuth() {
+      let arr = [];
+      this.flatGetArr(this.sysMenus, arr);
+      updataUser({
+        id: this.activeAccountItem.id,
+        menuIds: arr,
+      }).then((res) => {
+        if (res.success) {
+          this.$message.success(res.msg)
+          this.cancelSet()
+        }
+      });
+    },
     formatTime(number, format) {
       var formateArr = ["Y", "M", "D", "h", "m", "s"];
       var returnArr = [];
-
       var date = new Date(number * 1000);
       returnArr.push(date.getFullYear());
       returnArr.push(this.formatNumber(date.getMonth() + 1));
       returnArr.push(this.formatNumber(date.getDate()));
-
       returnArr.push(this.formatNumber(date.getHours()));
       returnArr.push(this.formatNumber(date.getMinutes()));
       returnArr.push(this.formatNumber(date.getSeconds()));
-
       this.weekday = "鏄熸湡" + "鏃ヤ竴浜屼笁鍥涗簲鍏�".charAt(date.getDay());
       for (var i in returnArr) {
         format = format.replace(formateArr[i], returnArr[i]);
@@ -785,7 +899,6 @@
       n = +n;
       return n < 10 ? "0" + n : "" + n;
     },
-    //鏁版嵁杞寲
     formatNumber(n) {
       n = n.toString();
       return n[1] ? n : "0" + n;
@@ -794,7 +907,9 @@
       let param = new FormData();
       param.append("file", params.file);
       uploadHeadPic(param).then((res) => {
-        this.addForm.headpic = res.data;
+        let index = this.jpgArr.findIndex((x) => x == "");
+        this.$set(this.jpgArr, index, res.data);
+        this.loadedPic= res.data
       });
     },
     initClockConf(ntpTest = false) {
@@ -803,6 +918,8 @@
           this.timezone = rsp.data.time_zone;
           if (!ntpTest) {
             this.syncType = rsp.data.ntp ? "1" : "2";
+            this.isNtp = rsp.data.ntp;
+            this.isManual = !rsp.data.ntp;
           }
           if (rsp.data.ntp) {
             this.ntpServer = rsp.data.ntp_server;
@@ -811,22 +928,17 @@
           this.timestamp = rsp.data.local_time;
           if (this.clockTimer === null) {
             this.runClock();
+            if (this.isManual) this.parseTime();
           }
         }
       });
     },
     openMenu(item, i) {
-      const old = document.getElementsByClassName("left-card")[
-        this.activeIndex
-      ];
-      old.style.backgroundColor = "initial";
-      old.style.color = "rgba(81, 81, 81, 1)";
-
       this.activePage = item.name;
       this.activeIndex = i;
-      const s = document.getElementsByClassName("left-card")[i];
-      s.style.backgroundColor = "rgba(61, 104, 225, 1)";
-      s.style.color = "#fff";
+      if (this.activePage == "鏃ユ湡鏃堕棿") {
+        this.initClockConf();
+      }
     },
     showInput(typ) {
       this[`show${typ}Input`] = true;
@@ -841,10 +953,9 @@
       this[`show${typ}Input`] = false;
       this[`input${typ}`] = "";
     },
-    syncBrowser(val) {
+    syncBrowser(enable) {
       this.isSyncBrowser = val;
-      if (val == false) {
-        console.log(12121);
+      if (!enable) {
         clearInterval(this.browserTimer);
       } else {
         this.browserTimer = setInterval(() => {
@@ -856,18 +967,44 @@
         }, 1000);
       }
     },
-    openChangePw() {},
     showAddAccount() {
       this.inAccountDetail = false;
       this.isAddAccount = true;
+      getRoles().then((res) => {
+        if (res.success) {
+          this.roleList= res.data
+        }
+      });
     },
     cancelAdd() {
       this.inAccountDetail = false;
       this.isAddAccount = false;
+      this.$refs["addForm"].resetFields();
     },
-    cancelChangePassword() {
+    cancelPassword() {
       this.isChangePw = false;
       this.inAccountDetail = false;
+      this.$refs["passwordForm"].resetFields();
+    },
+    SaveNewPassword(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          updatePassword({
+            oldPwd: this.passwordForm.curPassword,
+            newPwd: this.passwordForm.newPassword,
+          }).then(
+            (res) => {
+              if(res.success) {
+                this.$message.success(res.msg);
+              this.cancelPassword()
+              }
+            },
+            (err) => {
+              this.$message.warning("淇濆瓨澶辫触锛�" + err.msg);
+            }
+          );
+        }
+      });
     },
     saveAddAccount(formName) {
       this.$refs[formName].validate((valid) => {
@@ -881,6 +1018,7 @@
           addUser(data).then(
             (res) => {
               this.$message.success(res.data);
+              this.fetchUserList(true);
             },
             (err) => {
               this.$message.warning("淇濆瓨澶辫触锛�" + err.msg);
@@ -891,6 +1029,10 @@
           return false;
         }
       });
+    },
+    pickHeadDefPic(url, i) {
+      this.addForm.headpic = url;
+      this.selectedPic = i;
     },
     testNTP() {
       this.ntpTestLoading = true;
@@ -921,6 +1063,7 @@
     cancelSet() {
       this.isSetPermission = false;
       this.inAccountDetail = false;
+      this.sysMenus = [];
     },
     showChangePassword() {
       this.isChangePw = true;
@@ -939,35 +1082,61 @@
         cancelButtonText: "鍙栨秷",
       })
         .then(() => {
-          this.$message({
-            type: "success",
-            message: "鍒犻櫎鎴愬姛!",
+          let obj = {
+            ids: [this.activeAccountItem.id],
+          };
+          deleteUser(obj).then((res) => {
+            if (res.success) {
+              this.fetchUserList();
+              this.$message({
+                type: "success",
+                message: "鍒犻櫎鎴愬姛!",
+              });
+            } else {
+              this.$message.warning("鍒犻櫎澶辫触");
+            }
           });
         })
         .catch(() => {});
     },
+    fetchMenu() {
+      getUserMenus({
+        userId: this.activeAccountItem.id,
+      }).then((res) => {
+        if (res && res.success) {
+          this.sysMenus = res.data;
+        }
+      });
+    },
     openPermission() {
       this.inAccountDetail = true;
       this.isSetPermission = true;
+      if (this.sysMenus.length==0) {
+        this.fetchMenu()
+      } 
+    },
+    parseTime() {
+      [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
+        "-"
+      );
+      [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
+        ":"
+      );
+    },
+    changeSwitch(str) {
+      if (str == "isNtp") {
+        this.isManual = !this[str];
+      } else {
+        this.isNtp = !this[str];
+      }
+      this.syncType = this.isNtp ? "1" : "2";
+      if (this.isManual) this.parseTime();
     },
   },
-
-  watch: {
-    isManual(v) {
-      this.isNtp = !v;
-      v && (this.syncType = "2");
-      if (v) {
-        [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
-          "-"
-        );
-        [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
-          ":"
-        );
-      }
-    },
-    isNtp(v) {
-      this.isManual = !v;
-      v && (this.syncType = "1");
+  computed: {
+    isShowAddAccount() {
+      const info = JSON.parse(sessionStorage.getItem("userInfo"));
+      return true;
     },
   },
 };
@@ -1005,6 +1174,10 @@
         font-size: 16px;
       }
     }
+    .left-card-active {
+      background-color: rgba(61, 104, 225, 1);
+      color: #fff;
+    }
     .left-card:hover {
       background-color: rgba(61, 104, 225, 1);
       color: #fff;
@@ -1021,8 +1194,7 @@
     .account-left {
       .add-account {
         color: rgba(61, 104, 225, 1);
-        margin-top: 50px;
-
+        margin-top: 30px;
         .iconfont {
           cursor: pointer;
           font-size: 32px;
@@ -1134,12 +1306,12 @@
             background-color: bisque;
             border-radius: 50px;
             img {
-            border: none;
+              border: none;
 
-                width: 100px;
-            height: 100px;
-            border-radius: 50px;
-          }
+              width: 100px;
+              height: 100px;
+              border-radius: 50px;
+            }
           }
           .user-desc {
             height: 100px;
@@ -1151,7 +1323,7 @@
               margin: 5px 15px;
               height: 30px;
               line-height: 30px;
-              width: 90px;
+              // width: 90px;
               text-align: left;
               font-size: 15px;
               display: flex;
@@ -1169,6 +1341,10 @@
                 margin-left: 5px;
                 cursor: pointer;
               }
+            }
+            .user-role {
+              margin: 5px 0 0 15px;
+              font-size: 14px;    color: darkseagreen;
             }
           }
         }
@@ -1250,37 +1426,54 @@
       .add-account-page {
         .upload-group {
           height: 120px;
-          width: 350px;
+          width: 360px;
           margin: 0 auto;
           overflow: hidden;
           .upload-jpg {
-            height: 50px;
-            width: 50px;
+            height: 46px;
+            width: 46px;
             float: left;
             margin: 0 10px;
-            background-color: antiquewhite;
-            margin-bottom: 20px;
-            border-radius: 25px;
+            margin-bottom: 10px;
+            background-color: rgba(242, 242, 242, 1);
+            border: 3px solid transparent;
+            border-radius: 50%;
+            cursor: pointer;
+            img {
+              height: 46px;
+              width: 46px;
+            }
+          }
+          .upload-jpg-mask {
+            border: 3px solid blue;
           }
           .upload-jpg-up {
-            height: 50px;
-            width: 50px;
+            height: 52px;
+            width: 52px;
             float: left;
             display: flex;
             background-color: rgba(242, 242, 242, 1);
             margin: 0 10px;
-            margin-bottom: 20px;
+            margin-bottom: 10px;
             border-radius: 25px;
             justify-content: center;
             align-items: center;
             font-size: 12px;
             cursor: pointer;
           }
+          .loaded-Pic {
+          }
         }
         .fill-group {
           .p-title {
+                height: 34px;
             text-align: left;
           }
+          .el-form-item{
+            .el-select {
+    width: 100%;
+}
+          }
         }
       }
     }

--
Gitblit v1.8.0