<template>
|
<div class="system-user">
|
<SettingTitle v-if="authority" left="你的用户配置" :click-fun="showAdd" right="新增用户" icon="el-icon-plus" />
|
<SettingTitle v-else left="你的用户配置" />
|
<div class="user-info">
|
<div class="info-avatar">
|
<el-upload
|
:headers="{'X-Token':token}"
|
class="avatar-uploader"
|
:action="baseUrl+'/user/update'"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
>
|
<img v-if="avatar" :src="baseUrl+'/img'+avatar" class="avatar">
|
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
</el-upload>
|
</div>
|
<div class="info-msg">
|
<div>{{ msgInfo.name }}</div>
|
<div>账号：{{ msgInfo.account }}</div>
|
</div>
|
<div class="info-logout">
|
<el-button type="primary" plain @click="logout">退出登录</el-button>
|
</div>
|
</div>
|
<div class="setting-list">
|
<div v-for="(item,index) in serviceArr" :key="index" class="setting-item">
|
<div class="item-icon iconfont" :class="item.icon" />
|
<div class="item-msg">{{ item.name }}</div>
|
<div class="item-right" :class="item.right" @click="showDialog(item.name)" />
|
</div>
|
</div>
|
<!-- 同时用户列表为0也不展示 -->
|
<template v-if="userList.length>1">
|
<SettingTitle left="用户列表" />
|
<div class="setting-list">
|
<div v-for="item in userList" v-if="name !== item.username" :key="item.id" class="setting-item">
|
<div class="item-icon">
|
<el-avatar :size="40" :src="baseUrl+'/img'+item.avatar" />
|
</div>
|
<div class="item-msg">{{ item.username }}</div>
|
<div class="item-right">
|
<el-button v-if="authority" type="text" :style="{color:'red'}" @click="clear(item)">删除</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<template>
|
<SettingTitle left="表格" />
|
<div class="setting-list">
|
<div class="setting-item">
|
<div class="item-icon iconfont icon-biaogeziduan" />
|
<div class="item-msg">修改查看表头</div>
|
<el-dropdown trigger="click" @command="showTableDialog($event)">
|
<span class="el-dropdown-link">
|
<i class="el-icon-arrow-down el-icon--right" />
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item v-for="(item ,index) in allTab" :key="index" :command="item">{{ item.name }}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<!-- <div class="item-right el-icon-arrow-down" @click="showDialog('修改表单')"></div> -->
|
</div>
|
</div>
|
</template>
|
<SettingTitle left="添加型号" />
|
|
<div class="setting-model">
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<div :style="{display:'flex'}">
|
<el-input
|
v-model="filterText"
|
placeholder="输入关键字进行过滤"
|
/>
|
<!-- <el-button>添加名称</el-button> -->
|
</div>
|
<el-tree
|
ref="tree"
|
:style="{marginTop:'20px'}"
|
class="filter-tree"
|
:data="treeData"
|
:props="defaultProps"
|
default-expand-all
|
:filter-node-method="filterNode"
|
>
|
<span slot-scope="{ node, data }" class="custom-tree-node">
|
<div :style="{height:'100%', display:'flex',alignItems: 'center'}">
|
<div :style="{marginRight: '8px',display:'flex',alignItem: 'center'}">
|
<span>{{ node.label }}</span>
|
<span :style="{marginLeft: '20px',fontSize: '10px'}" class="edit el-icon-edit" @click="changeName(node,data)">修改</span>
|
<span :style="{marginLeft: '20px',fontSize: '10px'}" class="edit el-icon-delete" @click="deleteName(node,data)" />
|
</div>
|
<!-- 精度不高 导致的问题-->
|
</div>
|
</span>
|
</el-tree>
|
</el-col>
|
<el-col :span="20">
|
<div class="addName">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<div :style="{display: 'flex'}">
|
<el-input v-model="newName" :style="{marginRight: '8px'}" />
|
<el-button @click="addNewName">添加名称</el-button>
|
</div>
|
|
</el-col>
|
<el-col :span="14">
|
<el-row :gutter="20">
|
<el-col :span="4">
|
|
<el-select v-model="checkNameId" clearable placeholder="请选择">
|
<el-option
|
v-for="item in nameOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="10">
|
<el-input v-model="newModel" :style="{marginLeft: '8px'}" placeholder="请输入型号名称" />
|
</el-col>
|
<el-col :span="10">
|
<el-input v-model="newProductCode" :style="{marginLeft: '8px'}" placeholder="请输入产品编码" />
|
</el-col>
|
</el-row>
|
|
</el-col>
|
<el-col :span="2">
|
<el-button @click="addNewModel">添加型号</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-table
|
class="tableData"
|
:height="450"
|
:max-height="450"
|
:row-class-name="onTableRowClassName"
|
:row-style="{height:0+'px'}"
|
:cell-style="{padding:8+'px',textAlign: 'center'}"
|
:header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
|
:stripe="true"
|
:data="tableData"
|
:border="true"
|
header-row-class-name="table-header"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
/>
|
<el-table-column
|
prop="productCode"
|
label="产品编码"
|
/>
|
<el-table-column
|
prop="productModel"
|
label="型号名称"
|
/>
|
<el-table-column
|
prop="productName"
|
label="产品名称"
|
/>
|
<el-table-column
|
label="更多操作"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" @click="changeModel(scope.row)">修改</el-button>
|
<el-button type="text danger" @click="deleteModel(scope.row)">删除</el-button>
|
</template>
|
|
</el-table-column>
|
</el-table>
|
</el-col>
|
</el-row>
|
</div>
|
<el-dialog class="changePassword" :visible.sync="passwordFormVisible" @close="handleClose('passwordParams')">
|
<div slot="title" class="title">
|
<span />
|
<span>修改密码</span>
|
</div>
|
<el-form ref="passwordParams" :model="passwordParams" :rules="passwordRules">
|
<el-row>
|
<el-col>
|
<el-form-item prop="oldPassword">
|
<el-input v-model="passwordParams.oldPassword" :validate-event="false" show-password type="password" placeholder="请输入旧密码" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item prop="newPassword">
|
<el-input v-model="passwordParams.newPassword" :validate-event="false" show-password type="password" placeholder="请输入新密码" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="changePwd">确 定</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog class="tableHead" :visible.sync="tableFormVisible" @close="handleClose('userParams')">
|
<div slot="title" class="title">
|
<span />
|
<span>修改表单</span>
|
</div>
|
<el-form ref="userParams" :model="userParams">
|
<el-row>
|
<el-col>
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox v-for="(item, index) in commandList" :key="index" :label="item" :checked="item.show" @change="changeCheck(!item.show,item)">{{ item.name }}</el-checkbox>
|
</el-checkbox-group>
|
</el-col>
|
</el-row>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="changeTable">确 定</el-button>
|
<!-- <el-button @click="tableFormVisible = false" >取 消</el-button> -->
|
</div>
|
</el-dialog>
|
<el-dialog class="userInfo" title="个人资料" :visible.sync="infoFormVisible" @close="handleClose('addUserForm')">
|
<div slot="title" class="title">
|
<span />
|
<span>个人资料</span>
|
</div>
|
<el-form ref="addUserForm" :model="infoParams" :rules="addUserRules">
|
<el-row>
|
<el-col>
|
<el-form-item prop="username">
|
<el-input v-model="infoParams.username" placeholder="用户名" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item prop="account">
|
<el-input v-model="infoParams.account" placeholder="账号" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col />
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="changeInfo">确 定</el-button>
|
<!-- <el-button @click="infoFormVisible = false" >取 消</el-button> -->
|
</div>
|
</el-dialog>
|
<el-dialog class="addUser" :visible.sync="addVisible" @close="handleClose('addParams')">
|
<div slot="title" class="title">
|
<span />
|
<span>新增用户</span>
|
</div>
|
<el-form ref="addParams" label-position="left" label-width="80px" :model="addParams" :rules="addUserRules">
|
|
<el-form-item prop="username" label="用户名：">
|
<el-input v-model="addParams.username" placeholder="用户名" autocomplete="off" />
|
</el-form-item>
|
|
<el-form-item prop="account" label="账号">
|
<el-input v-model="addParams.account" placeholder="账号" autocomplete="off" />
|
</el-form-item>
|
|
<el-form-item prop="password" label="密码：">
|
|
<el-input v-model="addParams.password" placeholder="密码" show-password type="password" autocomplete="off" />
|
</el-form-item>
|
|
<el-form-item prop="authority" label="身份：">
|
<el-select v-model="addParams.authority" placeholder="请选择身份">
|
<el-option
|
v-for="item in powerOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="addNewUser">确 定</el-button>
|
<!-- <el-button @click="infoFormVisible = false" >取 消</el-button> -->
|
</div>
|
</el-dialog>
|
|
<el-dialog width="30%" handle-close-change-name-params- class="changeName" :visible.sync="changeNameVisible">
|
|
<div slot="title" class="title">
|
<span />
|
<span>修改名称</span>
|
</div>
|
<el-form>
|
<el-form-item ref="changeNameParams" :model="changeNameParams">
|
<el-input v-model="changeNameParams.productName" />
|
</el-form-item>
|
<div :style="{display: 'flex'}">
|
<el-button type="primary" :style="{flex:'1'}" @click="ConfirmChange">确定修改</el-button>
|
</div>
|
</el-form>
|
</el-dialog>
|
<el-dialog handle-close-change-model-params- width="30%" class="changeModel" :visible.sync="changeModelVisible">
|
<div slot="title" class="title">
|
<span />
|
<span>修改型号</span>
|
</div>
|
<el-form>
|
<el-form-item ref="changeModelParams" :model="changeModelParams">
|
<el-input v-model="changeModelParams.productModel" placeholder="请输入新型号" />
|
</el-form-item>
|
<el-form-item :model="changeModelParams">
|
<el-input v-model="changeModelParams.productCode" placeholder="请输入编码" />
|
</el-form-item>
|
<div :style="{display: 'flex'}">
|
<el-button type="primary" :style="{flex:'1'}" @click="confirmChangeModel">确定修改</el-button>
|
</div>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getInfo, addUser, getUserList, updateUserPwd, delUser, updateUserProfile } from '@/api/user'
|
import { selectAllName, addName, updateName, delName } from '@/api/productName'
|
import { selectAllModel, addModel, updateModel, delModel } from '@/api/productModel'
|
import { getToken } from '@/utils/auth'
|
import SettingTitle from '@/components/SettingTitle'
|
export default {
|
data() {
|
const validateAccount = (rule, value, callback) => {
|
const reg = /^(?=.*\d).{6,11}$/
|
if (!reg.test(value)) {
|
callback(new Error('账号由6-10位数字组成，请输入正确的账号！'))
|
} else {
|
callback()
|
}
|
}
|
const validatePassword = (rule, value, callback) => {
|
// console.log(value)
|
const reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,12}$/
|
// console.log(!reg.test(value))
|
if (!reg.test(value)) {
|
callback(new Error('密码必须是由6-12位包含大小写字母，数字组合'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
changeNameVisible: false,
|
changeModelVisible: false,
|
changeNameParams: {
|
id: '',
|
productName: ''
|
},
|
changeModelParams: {
|
},
|
newModel: '',
|
newProductCode: '',
|
newName: '',
|
checkNameId: '',
|
nameOptions: [
|
{
|
label: 'abc',
|
value: '1'
|
}
|
],
|
tableData: [],
|
treeData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
filterText: '',
|
addModelFormVisible: false,
|
addVisible: false,
|
powerOptions: [
|
{
|
value: '1',
|
label: '管理员'
|
},
|
{
|
value: '0',
|
label: '普通用户'
|
}
|
],
|
addParams: {
|
account: '',
|
authority: '',
|
password: '',
|
username: ''
|
},
|
checkList: [],
|
tableSelectVisible: false,
|
baseUrl: process.env.VUE_APP_BASE_API,
|
msgInfo: {},
|
infoParams: {
|
|
},
|
infoFormVisible: false,
|
userParams: {
|
user: '',
|
power: ''
|
},
|
tableFormVisible: false,
|
passwordParams: {},
|
passwordFormVisible: false,
|
deptName: '',
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
userName: undefined,
|
phonenumber: undefined,
|
status: undefined,
|
deptId: undefined
|
},
|
dateRange: [],
|
serviceArr: [
|
{ name: '修改密码', icon: 'icon-mima', right: 'el-icon-arrow-right' },
|
{ name: '个人资料', icon: 'icon-gerenziliao', right: 'el-icon-arrow-right' }
|
],
|
formLabelWidth: '120px',
|
userList: [],
|
commandList: [],
|
tableName: '',
|
addUserRules: {
|
account: [{ required: true, trigger: 'blur', validator: validateAccount }],
|
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
},
|
passwordRules: {
|
oldPassword: [{ required: true, validator: validatePassword }],
|
newPassword: [{ required: true, validator: validatePassword }]
|
},
|
addNameParams: {}
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
computed: {
|
...mapGetters([
|
'sidebar',
|
'avatar',
|
'name',
|
'allTab',
|
'authority',
|
'token'
|
])
|
},
|
created() {
|
this.getUserInfo()
|
this.getAllUser()
|
this.setOptions()
|
},
|
components: {
|
SettingTitle
|
},
|
mounted() {
|
},
|
methods: {
|
handleClose(refName) {
|
// console.log(refName)
|
this.$refs[refName]?.resetFields()
|
},
|
ConfirmChange() {
|
console.log(this.changeNameParams)
|
if (!this.changeNameParams.productName) return this.$message.error('请认真填写不可为空')
|
|
updateName(this.changeNameParams).then((res) => {
|
this.changeNameParams.id = ''
|
this.changeNameParams.productName = ''
|
console.log('清空修改名称输入框内容')
|
this.changeNameVisible = false
|
this.$message.success(res)
|
this.setOptions()
|
})
|
},
|
confirmChangeModel() {
|
console.log('修改型号参数', this.changeModelParams)
|
updateModel(this.changeModelParams).then((res) => {
|
this.changeModelVisible = false
|
this.changeModelParams = {}
|
this.$message.success(res)
|
this.setOptions()
|
})
|
},
|
addNewName() {
|
console.log(this.newName)
|
if (!this.newName) return this.$message.error('添加名称不能为空')
|
addName({ productName: this.newName }).then((res) => {
|
this.newName = ''
|
this.$message.success(res)
|
this.setOptions()
|
}, () => {
|
// this.$message.error('添加失败请重新尝试')
|
|
})
|
},
|
changeName(node, data) {
|
// console.log(node, data)
|
this.changeNameParams.id = data.value
|
this.changeNameParams.productName = data.label
|
console.log(this.changeNameParams)
|
this.changeNameVisible = true
|
},
|
deleteName(node, data) {
|
console.log(data)
|
this.$alert('确定删除', '删除名称', {
|
confirmButtonText: '确定',
|
callback: action => {
|
delName({ id: data.value, productName: data.label }).then((res) => {
|
this.$message.success(res)
|
this.setOptions()
|
})
|
}
|
})
|
},
|
addNewModel() {
|
addModel({ productNameId: this.checkNameId, productModel: this.newModel, productCode: this.newProductCode }).then((res) => {
|
this.checkNameId = ''
|
this.newModel = ''
|
this.newProductCode = ''
|
this.$message.success(res)
|
this.setOptions()
|
})
|
},
|
deleteModel(row) {
|
delModel({ id: row.id, productModel: row.productModel }).then((res) => {
|
this.$message.success(res)
|
this.setOptions()
|
})
|
},
|
changeModel(row) {
|
this.changeModelVisible = true
|
const params = { ...row }
|
delete params.productName
|
this.changeModelParams = { ... params }
|
},
|
async setOptions() {
|
this.tableData = []
|
this.treeData = []
|
const { data: nameRes } = await selectAllName()
|
// console.log(nameRes)
|
const nameArr = nameRes.productNames.map(item => {
|
return { value: item.id, label: item.productName }
|
})
|
this.nameOptions = nameArr
|
// console.log(nameArr)
|
for (const nameItem of nameArr) {
|
const { data } = await selectAllModel({ productNameId: nameItem.value })
|
|
data.models = data.models.map(item => {
|
item.productNameId = nameItem.value
|
item.productName = nameItem.label
|
return item
|
})
|
this.tableData = [...this.tableData, ...data.models]
|
const children = data.models.map(item => {
|
return { id: item.id, label: item.productModel }
|
})
|
this.treeData.push({ ...nameItem, children })
|
}
|
this.tableData = this.tableData.map(item => {
|
return { id: item.id, productModel: item.productModel, productCode: item.productCode, productName: item.productName }
|
})
|
// console.log(this.tableData)
|
},
|
onTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 != 0) {
|
return 'onAcitve'
|
} else {
|
return ''
|
}
|
},
|
async logout() {
|
console.log(1)
|
await this.$store.dispatch('user/logout')
|
this.$router.push(`/login?redirect=/home`)
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
changeCheck(newShow, item) {
|
item.show = newShow
|
},
|
changeUser(item) {
|
|
},
|
clear(item) {
|
// console.log()
|
delUser(item).then(res => {
|
this.$message.success('删除成功')
|
// this.logout()
|
this.getAllUser()
|
}, () => {
|
this.$message.error('删除失败')
|
})
|
},
|
handleAvatarSuccess(res, file) {
|
this.$message.success('上传成功')
|
// this.$router.go(0)
|
},
|
async getAllUser() {
|
const { data } = await getUserList()
|
this.userList = data.user
|
console.log(this.userList)
|
},
|
addNewUser() {
|
// 添加校验规则
|
this.$refs.addParams.validate(valid => {
|
if (valid) {
|
addUser(this.addParams).then(res => {
|
this.addParams.account = ''
|
this.addParams.authority = ''
|
this.addParams.password = ''
|
this.addParams.username = ''
|
this.addVisible = false
|
this.getAllUser()
|
this.$message({
|
message: '恭喜你，添加成功',
|
type: 'success'
|
})
|
}, () => {
|
this.$message.error({
|
message: '添加用户失败请重新尝试'
|
})
|
})
|
} else {
|
this.$message.error('错误提交，表格校验出错')
|
}
|
})
|
console.log(this.addParams)
|
},
|
showAdd() {
|
this.addVisible = true
|
},
|
showTableDialog(command) {
|
this.commandList = command.keys
|
this.tableName = command.name
|
this.tableFormVisible = true
|
},
|
getUserInfo() {
|
getInfo(getToken()).then(res => {
|
this.msgInfo = res.data
|
// console.log(用户信息：res)
|
})
|
},
|
showDialog(name) {
|
if (name == '修改密码') {
|
this.passwordFormVisible = true
|
} else if (name == '修改表单') {
|
this.tableSelectVisible = true
|
} else if (name == '个人资料') {
|
this.infoFormVisible = true
|
}
|
},
|
async changePwd() {
|
// 修改密码参数
|
// this.logout()
|
|
this.$refs.passwordParams.validate(valid => {
|
if (valid) {
|
updateUserPwd(this.passwordParams).then(async res => {
|
this.passwordFormVisible = false
|
await this.logout()
|
this.$message({
|
message: '恭喜你，修改成功',
|
type: 'success'
|
})
|
}, () => {
|
// this.$message.error({
|
// message: '添加用户失败请重新尝试'
|
// })
|
})
|
} else {
|
this.$message.error('错误提交，请检查密码格式')
|
}
|
})
|
},
|
changeTable() {
|
console.log(this.commandList)
|
this.$store.commit('CHANGE_TAB_KEY', { name: this.tableName, keys: this.commandList })
|
this.tableFormVisible = false
|
console.log(this.$store.state)
|
},
|
async changeInfo() {
|
console.log(this.infoParams)
|
const res = await updateUserProfile(this.infoParams)
|
console.log(res)
|
// this.$refs
|
this.infoFormVisible = false
|
this.getUserInfo()
|
this.getAllUser()
|
this.setOptions()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../../styles/variables.scss';
|
// ::v-deep .el-tree-node__content{
|
// height: 70px;
|
// }
|
.changeName{
|
.el-dialog{
|
width: 30% !important;
|
}
|
|
}
|
.el-tree-node__children{
|
.edit{
|
display: none;
|
}
|
}
|
::v-deep .el-dropdown-menu__item {
|
|
padding: 0 40px;
|
font-size: 16px;
|
border-bottom: 1px solid #efeeee;
|
}
|
.el-icon-plus,.el-icon-arrow-down,.el-icon-arrow-right,.el-icon-arrow-left,.el-icon-arrow-up{
|
color: #409EFF;
|
}
|
.system-user{
|
min-height: calc(100vh - 50px);
|
padding: 40px;
|
background: $mainBg;
|
.changePassword,.tableHead,.userInfo{
|
.title{
|
display: flex;
|
align-items: center;
|
span:nth-child(1){
|
margin-right: 8px;
|
display: inline-block;
|
width: 4px;
|
height: 18px;
|
background: #409EFF;
|
}
|
}
|
::v-deep >div{
|
width: 600px;
|
border-radius: 10px;
|
}
|
::v-deep .el-dialog__body{
|
padding: 30px 100px;
|
input{
|
border: 0px;
|
background: #f3f4f5;
|
}
|
}
|
::v-deep .el-dialog__footer{
|
padding: 10px 100px 30px 100px;
|
// margin-right: ;
|
.dialog-footer{
|
display: flex;
|
button{
|
flex: 1;
|
}
|
}
|
}
|
}
|
.tableHead{
|
::v-deep >div{
|
width: 300px;
|
|
}
|
::v-deep .el-dialog__body{
|
padding: 30px 50px;
|
}
|
::v-deep .el-checkbox{
|
margin-right: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
::v-deep .el-checkbox__label{
|
width: 140px;
|
margin: 5px 10px;
|
padding: 10px 40px;
|
background: #f3f4f5;
|
border-radius: 6px;
|
|
}
|
}
|
}
|
.user-info{
|
width: 100%;
|
height: 125px;
|
border-radius: 10px;
|
background: #fff;
|
padding: 25px;
|
display: flex;
|
align-items: center;
|
.info-avatar{
|
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 75px;
|
height: 75px;
|
line-height: 75px;
|
text-align: center;
|
}
|
.avatar {
|
width: 75px;
|
height: 75px;
|
display: block;
|
border-radius: 50%;
|
}
|
}
|
.info-logout{
|
// width: 100px;
|
.el-button--primary.is-plain{
|
background: #fff;
|
color: #409EFF;
|
border-color: #b3d8ff;
|
}
|
}
|
.info-msg{
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding-left: 25px;
|
>div:nth-child(1){
|
font-weight: 700;
|
font-size: 24px;
|
|
}
|
}
|
}
|
|
.setting-model{
|
margin-top: 24px;
|
border-radius: 10px;
|
background: #fff;
|
border: 1px solid #ddd;
|
padding: 15px;
|
.addName{
|
// display: flex;
|
margin-bottom: 20px;
|
}
|
}
|
.setting-list{
|
margin-top: 24px;
|
border-radius: 10px;
|
background: #fff;
|
border: 1px solid #ddd;
|
.setting-item{
|
height: 70px;
|
padding: 15px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.item-icon{
|
// width: 40px;
|
// height: 40px;
|
}
|
.item-msg{
|
flex: 1;
|
padding-left: 15px;
|
}
|
|
}
|
.setting-item{
|
// border-top: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
}
|
}
|
</style>
|
