You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
703 lines
22 KiB
703 lines
22 KiB
<template>
|
|
<div>
|
|
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:visible.sync="show_wx_visible"
|
|
center
|
|
width="780px">
|
|
<span slot="title" style="color: #313639;font-size: 28px; margin-bottom: 14px;">
|
|
微信授权登录用户信息
|
|
</span>
|
|
<el-tag style="margin-bottom: 10px">授权用户将可以使用微信扫码直接登录</el-tag>
|
|
<el-button plain style="float: right;margin-top: 10px" @click="wx_web_login_fun"> 点击扫码同步微信用户信息</el-button>
|
|
<el-dialog
|
|
:visible.sync="show_web_visible"
|
|
append-to-body
|
|
center
|
|
title="手机微信扫码更新个人信息"
|
|
width="360px">
|
|
<vue-qr ref="qr"
|
|
:correctLevel="qrinfo.correctLevel"
|
|
:logoCornerRadius="qrinfo.logoCornerRadius"
|
|
:logoScale="qrinfo.logoScale"
|
|
:margin="qrinfo.margin"
|
|
:size="300" :text="wx_web_login_url"
|
|
class="code-wrap">
|
|
</vue-qr>
|
|
</el-dialog>
|
|
<el-table
|
|
:data="wx_user_list"
|
|
border
|
|
stripe
|
|
style="width: 100%">
|
|
|
|
|
|
<el-table-column
|
|
align="center"
|
|
label="昵称"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<el-popover placement="top" trigger="hover">
|
|
<p>昵称: {{ scope.row.nickname }}</p>
|
|
<p>性别: {{ scope.row.sex|sex_filter }}</p>
|
|
<p>住址: {{ scope.row.address }}</p>
|
|
<p>openid: {{ scope.row.openid }}</p>
|
|
<div slot="reference" class="name-wrapper">
|
|
<el-tag size="medium">{{ scope.row.nickname }}</el-tag>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
align="center"
|
|
label="头像"
|
|
width="120">
|
|
<template slot-scope="scope">
|
|
<el-image :src="scope.row.head_img_url" style="width: 80px;height: 80px"/>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
align="center"
|
|
label="关注公众号"
|
|
width="100">
|
|
<template slot-scope="scope">
|
|
<div slot="reference" class="name-wrapper">
|
|
<el-tag v-if="scope.row.subscribe" size="medium">是</el-tag>
|
|
<el-tag v-else size="medium" type="danger">否</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
label="授权时间"
|
|
width="200">
|
|
<template slot-scope="scope">
|
|
<i class="el-icon-time"></i>
|
|
<span style="margin-left: 10px">{{ scope.row.created_time|format_time }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
label="操作"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="danger"
|
|
@click="delete_wx_u(scope.row)">移除授权
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
</el-dialog>
|
|
|
|
<el-form ref="form" :model="userinfo" label-width="90px">
|
|
<el-form-item v-if="userinfo && userinfo.login_type && userinfo.login_type.up" label="用户名">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input ref="user_name" v-model="userinfo.username"
|
|
:readonly="edituser_name !== true" clearable placeholder="用户名"
|
|
prefix-icon="el-icon-user"/>
|
|
</el-col>
|
|
|
|
<el-col :span="1">
|
|
<el-button icon="el-icon-edit" @click="changeUsernameValue">
|
|
</el-button>
|
|
</el-col>
|
|
<el-col v-if="edituser_name === true" :span="5">
|
|
<el-button class="save-button" plain type="success"
|
|
@click="saveUsername">
|
|
保存
|
|
</el-button>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="用户UID">
|
|
<el-row :gutter="36">
|
|
<el-col :span="18">
|
|
<el-input :value="userinfo.uid" disabled/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input ref="phone" v-model="userinfo.mobile" :disabled="!change_type.sms"
|
|
:readonly="editphone !== true" clearable maxlength="11" placeholder="手机"
|
|
prefix-icon="el-icon-mobile"/>
|
|
</el-col>
|
|
<el-col :span="1">
|
|
<el-button icon="el-icon-edit" @click="changePhoneValue">
|
|
</el-button>
|
|
</el-col>
|
|
<el-col v-if="editphone === true && change_type.sms" :span="5">
|
|
<el-button class="save-button" plain type="success"
|
|
@click="savePhone">
|
|
保存
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="editphone === true && captcha.captcha_image && change_type.sms" label="图片验证码"
|
|
style="height: 40px">
|
|
<el-row :gutter="36" style="height: 40px">
|
|
<el-col :span="14">
|
|
<el-input v-model="userinfo.verify_code" clearable maxlength="6" placeholder="请输入图片验证码"/>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-image
|
|
:src="captcha.captcha_image"
|
|
fit="contain"
|
|
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code">
|
|
</el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="editphone === true && change_type.sms" label="手机验证码">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input v-model="userinfo.auth_key" clearable maxlength="6"
|
|
placeholder="验证码" prefix-icon="el-icon-mobile"/>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-button class="save-button" plain type="info"
|
|
@click="getsmsemailcode('sms',userinfo.mobile)">
|
|
获取验证码
|
|
</el-button>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="邮箱地址">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input ref="email" v-model="userinfo.email" :disabled="!change_type.email"
|
|
:readonly="editemail !== true" clearable maxlength="20" placeholder="邮箱"
|
|
prefix-icon="el-icon-bank-card"/>
|
|
</el-col>
|
|
<el-col :span="1">
|
|
<el-button icon="el-icon-edit" @click="changeemailValue">
|
|
</el-button>
|
|
</el-col>
|
|
<el-col v-if="editemail === true && change_type.email" :span="5">
|
|
<el-button class="save-button" plain type="success"
|
|
@click="saveemail">
|
|
保存
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="editemail === true && captcha.captcha_image && change_type.email" label="图片验证码"
|
|
style="height: 40px">
|
|
<el-row :gutter="36" style="height: 40px">
|
|
<el-col :span="14">
|
|
<el-input v-model="userinfo.verify_code" clearable maxlength="6" placeholder="请输入图片验证码"/>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-image
|
|
:src="captcha.captcha_image"
|
|
fit="contain"
|
|
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code">
|
|
</el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="editemail === true && change_type.email" label="邮箱验证码">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input v-model="userinfo.auth_key" clearable maxlength="6"
|
|
placeholder="验证码" prefix-icon="el-icon-mobile"/>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-button class="save-button" plain type="info"
|
|
@click="getsmsemailcode('email',userinfo.email)">
|
|
获取验证码
|
|
</el-button>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item v-if="editphone === true || editemail === true">
|
|
<el-row :gutter="36">
|
|
<el-col :span="18">
|
|
<div id="captcha" ref="captcha"></div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="下载域名">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input ref="domain_name" :readonly="true" :value="userinfo.domain_name"
|
|
clearable
|
|
placeholder="下载页域名" prefix-icon="el-icon-download"/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="职位">
|
|
<el-row :gutter="36">
|
|
<el-col :span="16">
|
|
<el-input ref="position" v-model="userinfo.job" :readonly="editposition !== true"
|
|
clearable placeholder="职位" prefix-icon="el-icon-postcard"/>
|
|
</el-col>
|
|
<el-col :span="1">
|
|
<el-button icon="el-icon-edit" @click="changePositionValue">
|
|
</el-button>
|
|
</el-col>
|
|
<el-col v-if="editposition === true" :span="5">
|
|
<el-button class="save-button" plain type="success"
|
|
@click="savePositionValue">
|
|
保存
|
|
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<div
|
|
v-if="userinfo && userinfo.login_type && userinfo.login_type.third && JSON.stringify(userinfo.login_type.third).indexOf('true')!==-1"
|
|
class="other-way">
|
|
<hr>
|
|
<span class="info">绑定第三方账户</span>
|
|
<el-row v-if="userinfo.login_type.third && userinfo.login_type.third.wxp" :gutter="20">
|
|
<el-col :offset="6" :span="6">
|
|
<el-popover
|
|
v-model="wx_visible"
|
|
placement="top"
|
|
title="打开微信扫一扫进行绑定"
|
|
trigger="manual">
|
|
<div>
|
|
<el-image :src="wx_login_qr_url" style="width: 176px;height: 166px"/>
|
|
</div>
|
|
<el-button slot="reference" size="small" @click="wxLogin">绑定微信</el-button>
|
|
</el-popover>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button size="small" @click="get_wx_user_list">授权信息</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</el-form>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {changeInfoFun, getAuthcTokenFun, userinfos, wxBindFun, wxLoginFun, wxutils, wxWebScanFun} from '@/restful'
|
|
import {deepCopy, geetest} from "@/utils";
|
|
import VueQr from 'vue-qr';
|
|
|
|
export default {
|
|
name: "FirUserProfileInfo",
|
|
components: {
|
|
VueQr
|
|
},
|
|
data() {
|
|
return {
|
|
userinfo: {
|
|
srccode: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
verify_code: ''
|
|
},
|
|
orguserinfo: {},
|
|
editphone: false,
|
|
editemail: false,
|
|
editdomain_name: false,
|
|
edituser_name: false,
|
|
editposition: false,
|
|
captcha: {"captcha_image": '', "captcha_key": '', "length": 8},
|
|
change_type: {email: false, sms: false},
|
|
auth_rules: {},
|
|
form: {},
|
|
wx_login_qr_url: '',
|
|
wx_visible: false,
|
|
loop_flag: false,
|
|
show_wx_visible: false,
|
|
show_web_visible: false,
|
|
qrinfo: {
|
|
logoScale: 0.3,
|
|
logoCornerRadius: 12,
|
|
correctLevel: 3,
|
|
margin: 20
|
|
},
|
|
wx_web_login_url: '',
|
|
wx_user_list: [],
|
|
pagination: {"currentPage": 1, "total": 0, "pagesize": 999},
|
|
}
|
|
}, methods: {
|
|
wx_web_login_fun() {
|
|
wxWebScanFun(data => {
|
|
if (data.code === 1000) {
|
|
this.show_web_visible = true;
|
|
this.wx_web_login_url = data.data;
|
|
} else {
|
|
this.$message.error("信息获取失败")
|
|
}
|
|
}, {methods: 'GET'})
|
|
|
|
},
|
|
delete_wx_u(wx_user_info) {
|
|
this.$prompt(`此操作将导致微信用户 “${wx_user_info.nickname}” 无法通过扫码登录, 是否继续删除?`, '警告', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
inputPlaceholder: '该用户的登录密码',
|
|
inputValidator: this.validFun
|
|
}).then(({value}) => {
|
|
this.wxUtilsFun({
|
|
methods: 'POST',
|
|
data: {
|
|
"size": this.pagination.pagesize,
|
|
"page": this.pagination.currentPage,
|
|
"openid": wx_user_info.openid,
|
|
"confirm_pwd": value
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
},
|
|
wxUtilsFun(params) {
|
|
wxutils(data => {
|
|
if (data.code === 1000) {
|
|
this.wx_user_list = data.data;
|
|
this.show_wx_visible = true
|
|
} else if (data.code === 1001) {
|
|
this.$message.error(data.msg)
|
|
} else {
|
|
this.$message.error("获取授权列表失败")
|
|
}
|
|
}, params)
|
|
},
|
|
get_wx_user_list() {
|
|
this.wxUtilsFun({
|
|
methods: 'GET',
|
|
data: {
|
|
"size": this.pagination.pagesize,
|
|
"page": this.pagination.currentPage
|
|
}
|
|
})
|
|
},
|
|
loop_get_wx_info(wx_login_ticket, c_count = 1) {
|
|
if (wx_login_ticket && wx_login_ticket.length < 3) {
|
|
this.$message.error("获取登陆码失败,请稍后再试");
|
|
return
|
|
}
|
|
wxLoginFun(data => {
|
|
c_count += 1;
|
|
if (c_count > 30) {
|
|
return;
|
|
}
|
|
if (data.code === 1000) {
|
|
if (this.userinfo.uid === data.userinfo.uid) {
|
|
this.$message.success("绑定成功");
|
|
this.wx_visible = false;
|
|
this.loop_flag = false;
|
|
}
|
|
} else if (data.code === 1005) {
|
|
this.$message({
|
|
message: data.msg,
|
|
type: 'error',
|
|
duration: 30000
|
|
});
|
|
} else if (data.code === 1006) {
|
|
return this.loop_get_wx_info(wx_login_ticket, c_count)
|
|
}
|
|
}, {
|
|
"methods": "POST",
|
|
data: {"ticket": wx_login_ticket}
|
|
})
|
|
},
|
|
wxLogin() {
|
|
this.wx_visible = !this.wx_visible;
|
|
this.wx_login_qr_url = '';
|
|
if (this.wx_visible) {
|
|
wxBindFun(data => {
|
|
if (data.code === 1000) {
|
|
this.wx_login_qr_url = data.data.qr;
|
|
this.loop_flag = true;
|
|
this.loop_get_wx_info(data.data.ticket);
|
|
} else {
|
|
this.$message.error(data.msg);
|
|
this.wx_visible = false;
|
|
this.loop_flag = false;
|
|
}
|
|
}, {
|
|
"methods": "POST",
|
|
})
|
|
} else {
|
|
this.loop_flag = false;
|
|
}
|
|
},
|
|
get_auth_code() {
|
|
changeInfoFun(data => {
|
|
if (data.code === 1000) {
|
|
this.auth_rules = data.data.auth_rules;
|
|
this.captcha = this.auth_rules.captcha;
|
|
this.change_type = data.data.change_type;
|
|
this.userinfo.captcha_key = this.captcha.captcha_key;
|
|
if (this.userinfo.verify_code) {
|
|
this.userinfo.verify_code = '';
|
|
}
|
|
} else {
|
|
this.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, {
|
|
"methods": "GET",
|
|
"data": {}
|
|
});
|
|
},
|
|
|
|
saveUsername() {
|
|
if (this.userinfo.username.toString().length < 6) {
|
|
this.$message.error("密码至少6位");
|
|
return
|
|
}
|
|
this.updateUserInfo({"methods": 'PUT', 'data': {username: this.userinfo.username}});
|
|
this.changeUsernameValue()
|
|
},
|
|
saveDomain() {
|
|
this.updateUserInfo({"methods": 'PUT', 'data': {domain_name: this.userinfo.domain_name}});
|
|
this.changeDomainValue()
|
|
},
|
|
savePositionValue() {
|
|
this.updateUserInfo({"methods": 'PUT', 'data': {job: this.userinfo.job}});
|
|
this.changePositionValue()
|
|
},
|
|
authinfo() {
|
|
return {
|
|
auth_token: this.userinfo.auth_token,
|
|
auth_key: this.userinfo.auth_key,
|
|
captcha_key: this.userinfo.captcha_key,
|
|
verify_code: this.userinfo.verify_code,
|
|
};
|
|
},
|
|
saveemail() {
|
|
let data = this.authinfo();
|
|
data.email = this.userinfo.email;
|
|
data.act = 'email';
|
|
this.updateUserInfo({"methods": 'PUT', 'data': data});
|
|
this.changeemailValue()
|
|
},
|
|
savePhone() {
|
|
let data = this.authinfo();
|
|
data.mobile = this.userinfo.mobile;
|
|
data.act = 'sms';
|
|
this.updateUserInfo({"methods": 'PUT', 'data': data});
|
|
this.changePhoneValue()
|
|
},
|
|
|
|
updateUserInfo(datainfo) {
|
|
userinfos(data => {
|
|
if (data.code === 1000) {
|
|
this.userinfo = data.data;
|
|
this.$store.dispatch("doUserinfo", data.data);
|
|
this.orguserinfo = deepCopy(data.data);
|
|
if (datainfo.data) {
|
|
this.$message.success("更新成功")
|
|
}
|
|
|
|
} else {
|
|
this.$message.error("更新失败 " + data.msg);
|
|
this.$store.dispatch('doUserinfo', this.orguserinfo);
|
|
|
|
}
|
|
}, datainfo)
|
|
},
|
|
changeemailValue() {
|
|
if (this.editphone) {
|
|
this.editphone = !this.editphone;
|
|
}
|
|
this.get_auth_code();
|
|
this.editemail = !this.editemail;
|
|
if (this.$refs.email.$el.children[0].style.backgroundColor) {
|
|
this.$refs.email.$el.children[0].style.backgroundColor = ''
|
|
} else {
|
|
this.$refs.email.$el.children[0].style.backgroundColor = '#f6ffdc';
|
|
}
|
|
|
|
},
|
|
changePhoneValue() {
|
|
if (this.editemail) {
|
|
this.editemail = !this.editemail;
|
|
}
|
|
this.get_auth_code();
|
|
this.editphone = !this.editphone;
|
|
if (this.$refs.phone.$el.children[0].style.backgroundColor) {
|
|
this.$refs.phone.$el.children[0].style.backgroundColor = ''
|
|
} else {
|
|
this.$refs.phone.$el.children[0].style.backgroundColor = '#f6ffdc';
|
|
}
|
|
|
|
},
|
|
changePositionValue() {
|
|
this.editposition = !this.editposition;
|
|
if (this.$refs.position.$el.children[0].style.backgroundColor) {
|
|
this.$refs.position.$el.children[0].style.backgroundColor = ''
|
|
} else {
|
|
this.$refs.position.$el.children[0].style.backgroundColor = '#f6ffdc';
|
|
}
|
|
|
|
},
|
|
changeUsernameValue() {
|
|
this.edituser_name = !this.edituser_name;
|
|
if (this.$refs.user_name.$el.children[0].style.backgroundColor) {
|
|
this.$refs.user_name.$el.children[0].style.backgroundColor = ''
|
|
} else {
|
|
this.$refs.user_name.$el.children[0].style.backgroundColor = '#f6ffdc';
|
|
}
|
|
},
|
|
changeDomainValue() {
|
|
this.editdomain_name = !this.editdomain_name;
|
|
if (this.$refs.domain_name.$el.children[0].style.backgroundColor) {
|
|
this.$refs.domain_name.$el.children[0].style.backgroundColor = ''
|
|
} else {
|
|
this.$refs.domain_name.$el.children[0].style.backgroundColor = '#f6ffdc';
|
|
}
|
|
}, do_get_auth_token(params) {
|
|
getAuthcTokenFun(data => {
|
|
if (data.code === 1000) {
|
|
this.userinfo.act = params.act;
|
|
let msg = '您正在修改手机号码,验证码已经发送您手机';
|
|
if (params.act === "email") {
|
|
msg = '您正在修改邮箱,验证码已经发送您邮箱';
|
|
}
|
|
this.$notify({
|
|
title: '验证码',
|
|
message: msg,
|
|
type: 'success'
|
|
});
|
|
this.userinfo.auth_token = data.data.auth_token;
|
|
} else {
|
|
this.$message.error(data.msg)
|
|
}
|
|
|
|
}, {"methods": 'POST', 'data': params})
|
|
},
|
|
getsmsemailcode(act, target) {
|
|
let picode = {
|
|
"verify_code": this.userinfo.verify_code,
|
|
"captcha_key": this.captcha.captcha_key,
|
|
};
|
|
let params = {
|
|
'act': act, 'target': target, 'ext': picode
|
|
};
|
|
if (this.auth_rules.geetest) {
|
|
geetest(this, target, params, (n_params) => {
|
|
this.do_get_auth_token(n_params);
|
|
})
|
|
} else {
|
|
this.do_get_auth_token(params);
|
|
}
|
|
}
|
|
}, mounted() {
|
|
this.$store.dispatch('douserInfoIndex', 0);
|
|
// this.updateUserInfo({"methods":false});
|
|
this.userinfo = this.$store.state.userinfo;
|
|
this.orguserinfo = deepCopy(this.$store.state.userinfo);
|
|
|
|
|
|
}, watch: {
|
|
'$store.state.userinfo': function () {
|
|
this.userinfo = this.$store.state.userinfo;
|
|
this.orguserinfo = deepCopy(this.$store.state.userinfo);
|
|
}
|
|
}, filters: {
|
|
sex_filter: function (x) {
|
|
let ret = '未知';
|
|
if (x === 1) {
|
|
ret = '男'
|
|
} else if (x === 2) {
|
|
ret = '女'
|
|
}
|
|
return ret;
|
|
},
|
|
format_time: function (x) {
|
|
if (x) {
|
|
x = x.split(".")[0].split("T");
|
|
return x[0] + " " + x[1]
|
|
} else
|
|
return '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.other-way {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.other-way hr {
|
|
height: 1px;
|
|
margin: 30px 0;
|
|
border: 0;
|
|
background-color: #e4e7ed;
|
|
}
|
|
|
|
.other-way span.info {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 50%;
|
|
padding: 0 10px;
|
|
transform: translate(-50%, 0);
|
|
color: #9ba3af;
|
|
}
|
|
|
|
.el-form {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.el-button {
|
|
padding: 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
color: #7e5ef8;
|
|
}
|
|
|
|
.save-button {
|
|
margin: 0 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
height: 36px;
|
|
background-color: #409eff;
|
|
color: #f9f9f9;
|
|
max-width: 360px;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.save-button:focus {
|
|
background-color: #bfe7f9;
|
|
}
|
|
|
|
</style>
|
|
|