From 0b737708e696c45720499759b5c31aced87fdbb6 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期三, 07 七月 2021 14:10:03 +0800 Subject: [PATCH] merge master --- src/pages/systemSettings/index/App.vue | 594 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 439 insertions(+), 155 deletions(-) diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue index 34950a2..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)" @@ -20,15 +21,24 @@ <div class="account-list"> <div class="account-card" + :class="activeAccountIndex == index ? 'account-card-active' : ''" v-for="(item, index) in accountArr" :key="index" ref="account-card" @click="openAccount(item, index)" > <div class="touxiang"> - <img src="" alt="" /> + <img + v-if="item.headpic" + :src=" + item.headpic.indexOf('http') > -1 + ? item.headpic + : 'http://' + item.headpic + " + alt="" + /> </div> - <span class="user-name">{{ item.name }}</span> + <span class="user-name">{{ item.username }}</span> </div> </div> <div class="add-account"> @@ -50,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> @@ -71,18 +89,29 @@ v-if="inAccountDetail == false && isAddAccount == false" > <div class="content-top"> - <div class="touxiang-big"></div> + <div class="touxiang-big"> + <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"> <span class="icon iconfont" style="margin-right: 5px" ></span > - - <span>椋炲埄娴�</span> + <span>{{ activeAccountItem.username }}</span> </div> <div class="nickname"> <span>鏄电О锛�</span> - <span v-show="!showInputNickName">{{ inputNickName }}</span> + <span v-show="!showInputNickName">{{ + activeAccountItem.nickname + }}</span> <input type="text" class="input-nick" @@ -90,11 +119,18 @@ v-show="showInputNickName" v-model="inputNickName" @blur="hideInputNick" - @keydown.enter="hideInputNick" + @keydown.enter="blurInputNick" /> <span class="icon iconfont" @click="editNickName" ></span > + </div> + <div class="user-role"> + {{ + activeAccountItem.sysRoles.length + ? activeAccountItem.sysRoles[0].name + : "" + }} </div> </div> </div> @@ -107,14 +143,13 @@ <div class="change-pw" v-if="inAccountDetail && isChangePw"> <div class="title">淇敼瀵嗙爜</div> - <el-form :model="passwordForm" - :rules="rules" + :rules="pwRules" ref="passwordForm" class="password-form" > - <el-form-item> + <el-form-item prop="curPassword"> <div class="p-title">褰撳墠瀵嗙爜锛�</div> <el-input @@ -123,7 +158,7 @@ show-password ></el-input> </el-form-item> - <el-form-item> + <el-form-item prop="newPassword"> <div class="p-title">鏂板瘑鐮侊細</div> <el-input placeholder="蹇呭~" @@ -131,7 +166,7 @@ show-password ></el-input> </el-form-item> - <el-form-item> + <el-form-item prop="confirmPassword"> <div class="p-title">纭瀵嗙爜锛�</div> <el-input placeholder="蹇呭~" @@ -141,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> @@ -182,25 +222,24 @@ <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> - <!-- <div - class="upload-jpg" - style="height: 0px; visibility: hidden" - ></div> - <div - class="upload-jpg" - style="height: 0px; visibility: hidden" - ></div> - <div - class="upload-jpg" - style="height: 0px; visibility: hidden" - ></div> - <div - class="upload-jpg" - style="height: 0px; visibility: hidden" - ></div> --> + @click="pickHeadDefPic(url, index)" + > + <img v-if="url !== ''" :src="url" alt="" srcset="" /> + </div> + + <el-upload + class="upload-demo" + action="https://jsonplaceholder.typicode.com/posts/" + :show-file-list="false" + :http-request="uploadUserPic" + > + <div class="upload-jpg-up">涓婁紶</div> + </el-upload> </div> <div class="fill-group"> <el-form @@ -209,22 +248,30 @@ ref="addForm" class="add-form" > - <el-form-item> + <el-form-item prop="userName"> <div class="p-title">鐢ㄦ埛鍚嶏細</div> - <el-input placeholder="蹇呭~" v-model="addForm.userName" ></el-input> </el-form-item> - <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> - <el-form-item> + <el-form-item prop="password"> <div class="p-title">瀵嗙爜锛�</div> <el-input placeholder="蹇呭~" @@ -232,7 +279,7 @@ show-password ></el-input> </el-form-item> - <el-form-item> + <el-form-item prop="confirmPassword"> <div class="p-title">纭瀵嗙爜锛�</div> <el-input placeholder="蹇呭~" @@ -244,7 +291,7 @@ </div> <div class="btns"> <div class="cancel" @click="cancelAdd">鍙栨秷</div> - <div class="ok">淇濆瓨</div> + <div class="ok" @click="saveAddAccount('addForm')">淇濆瓨</div> </div> </div> </div> @@ -270,8 +317,6 @@ size="small" :controls="false" ></el-input-number> - <!-- :disabled="syncType === '2'" --> - <!-- :disabled="syncType === '2'" --> <el-button type="text" @click="testNTP" @@ -424,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> @@ -450,17 +495,19 @@ </template> <script> +import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system"; import { - getDevInfo, - getAlarmConfig, - saveDevInfo, - saveAlarmConfig, - getClockInfo, - saveClockInfo, - testNTPserver, - getResourceConfig, - saveResourceConfig, -} from "@/api/system"; + 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"; @@ -478,9 +525,28 @@ generalSettings, }, data() { + 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(); + } + }; return { showAccount: true, syncYrs: "", + activeAccountItem: {}, syncMonth: "", syncHour: "", syncDay: "", @@ -494,14 +560,16 @@ browserTimer: null, timezone: "", isRealtime: false, - inputNickName: "鍏斿厰", + inputNickName: "", showHourInput: false, showMinInput: false, showSecInput: false, showYrsInput: false, showMonthInput: false, + selectedPic: null, showDayInput: false, - + cameraInfo: false, + dependentScene: false, timestamp: 0, inAccountDetail: false, isChangePw: false, @@ -511,6 +579,7 @@ syncType: "1", equipmentTime: "", equipmentDate: "", + roleList: [], ntpTestLoading: false, settime: "", weekday: "", @@ -522,8 +591,8 @@ { name: "閿洏鍜岃瑷�" }, { name: "閫氱敤璁剧疆" }, ], - accountArr: [{ name: "璐濊拏" }, { name: "鏈辫开" }, { name: "鍗″皵" }], - jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}], + accountArr: [], + jpgArr: ["", "", "", "", "", "", "", "", ""], isManual: false, isNtp: true, activePage: "璐︽埛", @@ -541,12 +610,43 @@ newPassword: "", confirmPassword: "", }, - activeAccount: 0, + activeAccountIndex: 0, + sysMenus: [], addForm: { userName: "", nickName: "", password: "", + headpic: "", confirmPassword: "", + roleId:"" + }, + rules: { + 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" }], + }, + 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" }], }, }; }, @@ -555,31 +655,55 @@ 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.initSysinfo(); - // this.initResourceConfig(); - this.initClockConf(); - }); + this.fetchUserList(); + this.fetchDefHeadPic(); }, methods: { + 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); + } + }); + }, + blurInputNick() { + this.$refs["input-nick"].blur(); + }, editNickName() { this.showInputNickName = true; + this.inputNickName = this.activeAccountItem.nickname; this.$refs["input-nick"].focus(); }, hideInputNick() { this.showInputNickName = false; + updateUser({ + id: this.activeAccountItem.id, + nickname: this.inputNickName, + }).then((res) => { + this.$message.success(res.msg); + this.fetchUserList(true); + }); }, openAccount(item, i) { - this.$refs[`account-card`].forEach((x) => { - x.style.backgroundColor = "rgba(248, 248, 248, 1)"; - x.style.color = "#2c3e50"; - }); - this.$refs[`account-card`][i].style.backgroundColor = - "rgba(61, 104, 225, 1)"; - this.$refs[`account-card`][i].style.color = "#fff"; + this.activeAccountItem = item; + this.activeAccountIndex = i; + this.inAccountDetail = false; + this.cancelSet(); + this.fetchMenu(); }, minusOne(typ) { this.isSyncBrowser = false; @@ -636,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; @@ -685,7 +816,6 @@ if (num > maxDay) { num = 1; } - // this.syncDay = this.padZero(num); break; default: @@ -693,9 +823,8 @@ } }, submitClock() { - debugger; if (this.syncType === "1") { - if (this.ntpServer === "") { + if (this.ntpServer === "" || this.ntpServer === "...") { this.$notify({ type: "error", message: "NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖", @@ -715,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", @@ -732,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]); @@ -755,10 +899,18 @@ n = +n; return n < 10 ? "0" + n : "" + n; }, - //鏁版嵁杞寲 formatNumber(n) { n = n.toString(); return n[1] ? n : "0" + n; + }, + uploadUserPic(params) { + let param = new FormData(); + param.append("file", params.file); + uploadHeadPic(param).then((res) => { + let index = this.jpgArr.findIndex((x) => x == ""); + this.$set(this.jpgArr, index, res.data); + this.loadedPic= res.data + }); }, initClockConf(ntpTest = false) { getClockInfo().then((rsp) => { @@ -766,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; @@ -774,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; @@ -804,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(() => { @@ -819,18 +967,72 @@ }, 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) => { + if (valid) { + let data = { + username: this.addForm.userName, + password: this.addForm.password, + nickname: this.addForm.nickName, + headpic: this.addForm.headpic, + }; + addUser(data).then( + (res) => { + this.$message.success(res.data); + this.fetchUserList(true); + }, + (err) => { + this.$message.warning("淇濆瓨澶辫触锛�" + err.msg); + } + ); + } else { + console.log("error submit!!"); + return false; + } + }); + }, + pickHeadDefPic(url, i) { + this.addForm.headpic = url; + this.selectedPic = i; }, testNTP() { this.ntpTestLoading = true; @@ -861,6 +1063,7 @@ cancelSet() { this.isSetPermission = false; this.inAccountDetail = false; + this.sysMenus = []; }, showChangePassword() { this.isChangePw = true; @@ -879,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; }, }, }; @@ -945,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; @@ -959,11 +1192,9 @@ border-right: 5px solid rgba(248, 248, 248, 1); box-sizing: border-box; .account-left { - .add-account { color: rgba(61, 104, 225, 1); - margin-top: 50px; - + margin-top: 30px; .iconfont { cursor: pointer; font-size: 32px; @@ -984,13 +1215,24 @@ width: 35px; background-color: bisque; border-radius: 17.5px; + img { + border: none; + + height: 35px; + width: 35px; + border-radius: 17.5px; + } } .user-name { margin-left: 10px; font-size: 14px; } } - + + .account-card-active { + background-color: rgba(61, 104, 225, 1); + color: #fff; + } } .datetime-left { .time-card { @@ -1063,6 +1305,13 @@ height: 100px; background-color: bisque; border-radius: 50px; + img { + border: none; + + width: 100px; + height: 100px; + border-radius: 50px; + } } .user-desc { height: 100px; @@ -1074,7 +1323,7 @@ margin: 5px 15px; height: 30px; line-height: 30px; - width: 90px; + // width: 90px; text-align: left; font-size: 15px; display: flex; @@ -1090,7 +1339,12 @@ .iconfont { font-size: 14px; margin-left: 5px; + cursor: pointer; } + } + .user-role { + margin: 5px 0 0 15px; + font-size: 14px; color: darkseagreen; } } } @@ -1170,26 +1424,55 @@ } .add-account-page { - // background-color: lightcyan; - // padding: 10px 50px; .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; + 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: 52px; + width: 52px; + float: left; + display: flex; + background-color: rgba(242, 242, 242, 1); + margin: 0 10px; + 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%; +} } } } @@ -1219,6 +1502,7 @@ line-height: 40px; position: relative; font-size: 14px; + margin-bottom: 10px; } .ip-input-container { max-width: none !important; -- Gitblit v1.8.0