|
|
|
|
<template>
|
|
|
|
|
<div style="width:100%;height:100%;display:flex;align-items: center;flex-direction:column">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<img :src="avatar" class="HeadPortrait" />
|
|
|
|
|
<div style="color:#cb221c;font-size:14px;font-family:MicrosoftYaHei;margin-top:5px;">
|
|
|
|
|
<el-upload :action="this.api.fileupload" :on-success="changeAvatar">
|
|
|
|
|
<div>点击更改头像</div>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<p class="block-title" style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
|
|
用户信息
|
|
|
|
|
<el-button type="success" size="small" v-throttle @click="save">更新资料</el-button>
|
|
|
|
|
</p>
|
|
|
|
|
<p class="meta-title">个人信息</p>
|
|
|
|
|
<div class="information">
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">姓名</p>
|
|
|
|
|
<div class="block-right">
|
|
|
|
|
<input
|
|
|
|
|
id="username"
|
|
|
|
|
type="text"
|
|
|
|
|
v-model="personalInformation.userName"
|
|
|
|
|
/>
|
|
|
|
|
<div class="ii">
|
|
|
|
|
<label for="username">
|
|
|
|
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">性别</p>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="personalInformation.sex"
|
|
|
|
|
placeholder
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in sexList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">所在国家</p>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="personalInformation.countries"
|
|
|
|
|
placeholder
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in countryList"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">所在省份</p>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="personalInformation.provinceId"
|
|
|
|
|
placeholder
|
|
|
|
|
@change="id => getCity(id)"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in provinceList"
|
|
|
|
|
:key="item.provinceId"
|
|
|
|
|
:label="item.provinceName"
|
|
|
|
|
:value="item.provinceId"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">所在省市</p>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="personalInformation.cityId"
|
|
|
|
|
placeholder
|
|
|
|
|
:disabled="personalInformation.provinceId ? false : true"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in cityList"
|
|
|
|
|
:key="item.cityId"
|
|
|
|
|
:label="item.cityName"
|
|
|
|
|
:value="item.cityId"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">出生年月日</p>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="personalInformation.dateBirth"
|
|
|
|
|
:clearable="false"
|
|
|
|
|
class="block-right"
|
|
|
|
|
type="date">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">证件</p>
|
|
|
|
|
<div class="block-right">
|
|
|
|
|
<input
|
|
|
|
|
id="idnumber"
|
|
|
|
|
type="text"
|
|
|
|
|
v-model="personalInformation.idnumber"
|
|
|
|
|
/>
|
|
|
|
|
<div class="ii">
|
|
|
|
|
<label for="idnumber">
|
|
|
|
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">教育程度</p>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="personalInformation.educationDegree"
|
|
|
|
|
placeholder="请选择教育程度"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item,index) in educationDegreeList"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="block">
|
|
|
|
|
<p class="block-left">当前所在学校</p>
|
|
|
|
|
<el-select v-model="personalInformation.clientId" filterable placeholder="请选择学校">
|
|
|
|
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.clientName" :value="item.id"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card m-b-20">
|
|
|
|
|
<p class="block-title">账号信息</p>
|
|
|
|
|
<div class="information">
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">用户账号</p>
|
|
|
|
|
<div class="block-right">
|
|
|
|
|
<input
|
|
|
|
|
id="account"
|
|
|
|
|
type="text"
|
|
|
|
|
v-model="personalInformation.account"
|
|
|
|
|
@change="accountChange"
|
|
|
|
|
/>
|
|
|
|
|
<div class="ii">
|
|
|
|
|
<label for="account">
|
|
|
|
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">手机号</p>
|
|
|
|
|
<div class="block-right">
|
|
|
|
|
<input
|
|
|
|
|
id="phone"
|
|
|
|
|
type="text"
|
|
|
|
|
maxlength="11"
|
|
|
|
|
v-model="personalInformation.phone"
|
|
|
|
|
/>
|
|
|
|
|
<div class="ii">
|
|
|
|
|
<label for="phone">
|
|
|
|
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="near-right">
|
|
|
|
|
{{personalInformation.phone}}
|
|
|
|
|
<el-button size="small" @click="bindPhone">更换</el-button>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">邮箱</p>
|
|
|
|
|
<div class="block-right">
|
|
|
|
|
<input
|
|
|
|
|
id="email"
|
|
|
|
|
type="text"
|
|
|
|
|
v-model="personalInformation.email"
|
|
|
|
|
/>
|
|
|
|
|
<div class="ii">
|
|
|
|
|
<label for="email">
|
|
|
|
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="near-right"> -->
|
|
|
|
|
<!-- {{personalInformation.email}} -->
|
|
|
|
|
<!-- <el-button size="small" @click="bindEmail">绑定</el-button> -->
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="block">
|
|
|
|
|
<p class="block-left">微信</p> -->
|
|
|
|
|
<!-- <input
|
|
|
|
|
id="wechat"
|
|
|
|
|
type="text"
|
|
|
|
|
class="block-right"
|
|
|
|
|
v-model="personalInformation.weChatID"
|
|
|
|
|
/>
|
|
|
|
|
<div class="ii">
|
|
|
|
|
<label for="wechat">
|
|
|
|
|
<i class="el-icon-edit" style="color:rgba(255, 255, 255, 1)"></i>
|
|
|
|
|
</label>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- <div class="near-right">
|
|
|
|
|
{{personalInformation.weChatID}}
|
|
|
|
|
<el-button size="small">绑定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
<div class="block">
|
|
|
|
|
<p class="block-left">密码</p>
|
|
|
|
|
<div class="near-right">
|
|
|
|
|
<el-button size="small" @click="bindPassword">更换密码</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="block" style="margin-top: 5px">
|
|
|
|
|
<p class="block-left"></p>
|
|
|
|
|
<div class="near-right">
|
|
|
|
|
<el-button type="primary" size="small" @click="forgetPassword">忘记密码</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="更换密码"
|
|
|
|
|
:visible.sync="passwordVisible"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
@close="closePassword"
|
|
|
|
|
width="30%">
|
|
|
|
|
<el-form ref="passwordForm" :model="form" label-width="60px">
|
|
|
|
|
<el-form-item label="原密码">
|
|
|
|
|
<el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
|
<el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="新密码">
|
|
|
|
|
<el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="passwordVisible = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="editPassword">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapState,mapActions } from 'vuex';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
personalInformation: {
|
|
|
|
|
name:'',
|
|
|
|
|
workNumber:'',
|
|
|
|
|
password:"",
|
|
|
|
|
phone:'',
|
|
|
|
|
email:'',
|
|
|
|
|
provinceName:'',
|
|
|
|
|
cityName:'',
|
|
|
|
|
schoolName:'',
|
|
|
|
|
professionalName:'',
|
|
|
|
|
},
|
|
|
|
|
passwordVisible: false,
|
|
|
|
|
passwordForm: {
|
|
|
|
|
password: '',
|
|
|
|
|
newPassword: '',
|
|
|
|
|
reNewPassword: ''
|
|
|
|
|
},
|
|
|
|
|
sexList: [
|
|
|
|
|
{
|
|
|
|
|
name: '男',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '女',
|
|
|
|
|
value: 2
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
countryList: [
|
|
|
|
|
{
|
|
|
|
|
label: '中国'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
form: {},
|
|
|
|
|
provinceList: this.$store.state.provinceList, //省份
|
|
|
|
|
cityList: [], //城市
|
|
|
|
|
// 教育程度
|
|
|
|
|
educationDegreeList: [
|
|
|
|
|
{
|
|
|
|
|
name: '专科',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '本科',
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '硕士',
|
|
|
|
|
value: 3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '博士',
|
|
|
|
|
value: 4
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '其他',
|
|
|
|
|
value: 5
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
schoolList: [],
|
|
|
|
|
curPassword: '',
|
|
|
|
|
accountRepeat: false
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState('user', [
|
|
|
|
|
'userId','avatar'
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
console.log(33,this.avatar)
|
|
|
|
|
this.getdata();
|
|
|
|
|
this.getProvince()
|
|
|
|
|
this.getSchoolData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
...mapActions('user', [
|
|
|
|
|
'setAvatar','setUserName'
|
|
|
|
|
]),
|
|
|
|
|
getProvince(){
|
|
|
|
|
this.$get(this.api.queryProvince).then(res => {
|
|
|
|
|
this.provinceList = res.data.list
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
},
|
|
|
|
|
// 获取城市
|
|
|
|
|
getCity(id,type){
|
|
|
|
|
this.personalInformation.cityId = 1
|
|
|
|
|
this.getCityData()
|
|
|
|
|
},
|
|
|
|
|
getCityData(index){
|
|
|
|
|
let provinceId = this.personalInformation.provinceId
|
|
|
|
|
this.$get(this.api.queryCity,{provinceId}).then(res => {
|
|
|
|
|
this.cityList = res.data.list
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
},
|
|
|
|
|
// 获取学校名称
|
|
|
|
|
getSchoolData(){
|
|
|
|
|
let data = {
|
|
|
|
|
searchContent: '',
|
|
|
|
|
provinceId: '',
|
|
|
|
|
cityId: ''
|
|
|
|
|
}
|
|
|
|
|
this.$get(`${this.api.queryClient}/1/1000`,data).then(res => {
|
|
|
|
|
this.schoolList = res.data.list
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
},
|
|
|
|
|
accountChange(){
|
|
|
|
|
this.$get(`${this.api.getAccount}?account=${this.form.account}`).then(res => {
|
|
|
|
|
if(res.data.userInfo){
|
|
|
|
|
this.accountRepeat = true
|
|
|
|
|
this.$message.warning('该账号已存在')
|
|
|
|
|
}else{
|
|
|
|
|
this.accountRepeat = false
|
|
|
|
|
}
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
},
|
|
|
|
|
//取得头像地址
|
|
|
|
|
changeAvatar(res) {
|
|
|
|
|
this.setAvatar(res.data.filesResult.fileUrl)
|
|
|
|
|
},
|
|
|
|
|
getdata() {
|
|
|
|
|
this.$get(`${this.api.userinfo}?userId=${this.userId}`)
|
|
|
|
|
.then(res => {
|
|
|
|
|
this.personalInformation = res.data.userInfo
|
|
|
|
|
this.personalInformation.countries = '中国'
|
|
|
|
|
this.personalInformation.clientName = this.schoolList.find(n => n.id == this.personalInformation.clientId).clientName
|
|
|
|
|
this.curPassword = this.personalInformation.password
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
if(this.personalInformation.provinceId){
|
|
|
|
|
this.getCityData()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
bindPassword() {
|
|
|
|
|
this.passwordVisible = true
|
|
|
|
|
},
|
|
|
|
|
forgetPassword(){
|
|
|
|
|
this.$message.warning('请联系学校管理员重置密码')
|
|
|
|
|
},
|
|
|
|
|
editPassword() {
|
|
|
|
|
if(!this.passwordForm.password) return this.$message.warning('请输入原密码')
|
|
|
|
|
if(!this.passwordForm.newPassword) return this.$message.warning('请输入新密码')
|
|
|
|
|
if(!this.passwordForm.reNewPassword) return this.$message.warning('请确认新密码')
|
|
|
|
|
if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return this.$message.warning('请输入6位数以上的密码')
|
|
|
|
|
if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return this.$message.warning('输入的新密码不一致，请重新确认')
|
|
|
|
|
if(this.curPassword === this.passwordForm.newPassword) return this.$message.warning('原密码跟新密码不能一致')
|
|
|
|
|
|
|
|
|
|
let data = {
|
|
|
|
|
userId: this.personalInformation.userId,
|
|
|
|
|
password: this.passwordForm.password
|
|
|
|
|
}
|
|
|
|
|
this.$post(this.api.userinfoUpdate,data)
|
|
|
|
|
.then(res => {
|
|
|
|
|
if(res.success){
|
|
|
|
|
this.$message.success('更换成功')
|
|
|
|
|
this.curPassword = this.passwordForm.newPassword
|
|
|
|
|
this.passwordVisible = false
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error('更换失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
closePassword() {
|
|
|
|
|
this.passwordForm = {
|
|
|
|
|
password: '',
|
|
|
|
|
newPassword: '',
|
|
|
|
|
reNewPassword: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
save() {
|
|
|
|
|
if(this.personalInformation.idnumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(this.personalInformation.idnumber)) return this.$message.warning('请输入正确的证件号码')
|
|
|
|
|
if(this.accountRepeat) return this.$message.warning('该账号已存在')
|
|
|
|
|
if(this.personalInformation.phone && !/^1[3456789]\d{9}$/.test(this.personalInformation.phone)) return this.$message.warning('请输入正确的手机号')
|
|
|
|
|
if(this.personalInformation.email && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.personalInformation.email)) return this.$message.warning('请输入正确的邮箱')
|
|
|
|
|
let personalInformation = this.personalInformation
|
|
|
|
|
let userInfoEntity = {
|
|
|
|
|
idnumber: personalInformation.idnumber,
|
|
|
|
|
account: personalInformation.account,
|
|
|
|
|
cityId: personalInformation.cityId,
|
|
|
|
|
countries: personalInformation.countries,
|
|
|
|
|
dateBirth: personalInformation.dateBirth,
|
|
|
|
|
educationDegree: personalInformation.educationDegree,
|
|
|
|
|
email: personalInformation.email,
|
|
|
|
|
phone: personalInformation.phone,
|
|
|
|
|
provinceId: personalInformation.provinceId,
|
|
|
|
|
clientId: personalInformation.clientId,
|
|
|
|
|
clientName: personalInformation.clientName,
|
|
|
|
|
sex: personalInformation.sex,
|
|
|
|
|
userId: personalInformation.userId,
|
|
|
|
|
userName: personalInformation.userName,
|
|
|
|
|
}
|
|
|
|
|
let data = userInfoEntity
|
|
|
|
|
this.$post(this.api.userinfoUpdate,data).then(res => {
|
|
|
|
|
if(res.success){
|
|
|
|
|
this.setUserName(personalInformation.userName)
|
|
|
|
|
this.$message.success('提交成功')
|
|
|
|
|
this.$router.back()
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error('提交失败')
|
|
|
|
|
}
|
|
|
|
|
}).catch(res => {});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.header{
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.header /deep/.el-upload-list__item-name {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header /deep/.el-icon-upload-success{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header /deep/.el-upload-list__item-status-label{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.header /deep/ .el-upload-list{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-input__inner{
|
|
|
|
|
height: 32px !important;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-select .el-input .el-select__caret{
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
}
|
|
|
|
|
input:focus {
|
|
|
|
|
outline: 0;
|
|
|
|
|
}
|
|
|
|
|
.openfile {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.HeadPortrait {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
width: 80px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
|
|
.head {
|
|
|
|
|
width: 34px;
|
|
|
|
|
height: 34px;
|
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
.eee {
|
|
|
|
|
height: 10px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
margin-bottom: -10px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 8px;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
.Semicircle {
|
|
|
|
|
width: 12px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
border: 2px solid #cb221c;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.body {
|
|
|
|
|
color: #cb221c;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border: 3px solid #f5f5f5;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
margin-bottom: -10px;
|
|
|
|
|
}
|
|
|
|
|
.body::after {
|
|
|
|
|
content: '';
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background-color: #cb221c;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
margin-left: -6px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
input {
|
|
|
|
|
height: 50px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
border: 0;
|
|
|
|
|
text-align: right;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
width: 750px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.block-title{
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
.meta-title{
|
|
|
|
|
margin: 10px 0 0;
|
|
|
|
|
color: #cdbcec;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.el-icon-document {
|
|
|
|
|
color: #cb221c;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
}
|
|
|
|
|
.el-icon-collection {
|
|
|
|
|
color: #cb221c;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 31px;
|
|
|
|
|
top: 31px;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
.plus{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
i{
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
color: #21d749;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.archives{
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border: 1px dashed #bbb;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
|
|
|
|
&.default-arch{
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
/deep/.el-select{
|
|
|
|
|
width: 10rem;
|
|
|
|
|
}
|
|
|
|
|
/deep/input{
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.archives-wrap{
|
|
|
|
|
.block{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
&:last-child{
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.block-left{
|
|
|
|
|
width: 30%;
|
|
|
|
|
font-family: MicrosoftYaHei;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #101010;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-input__inner{
|
|
|
|
|
border-radius: 8px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.information {
|
|
|
|
|
.block {
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.block-left {
|
|
|
|
|
font-family: MicrosoftYaHei;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #101010;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-date-editor .el-input__prefix{
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-input__prefix,/deep/.el-input__suffix{
|
|
|
|
|
left: auto;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
.block-right,.near-right {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
color: #333333ff;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
.near-right{
|
|
|
|
|
right: 0;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
.ii {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: #cb221c;
|
|
|
|
|
i{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-input__inner {
|
|
|
|
|
padding-right: 1.8rem;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
color: #333333ff;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
border: 0px;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-input__icon {
|
|
|
|
|
background: #cb221c;
|
|
|
|
|
width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
|
|
&.el-icon-date{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-icon-arrow-up:before {
|
|
|
|
|
content: '\e6e1';
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.readonly .block-left{
|
|
|
|
|
color: #a5a7adff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fold{
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
i{
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
color: #8e8e8e;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover{
|
|
|
|
|
opacity: .8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
