<template>
<app-container>
<el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="personForm" size="small" class="main-form" label-width="120px">
<el-collapse v-model="activeNames">
<el-collapse-item title="基本信息" name="1">
<el-row>
<el-col :span="16">
<el-row :gutter="20">
<el-col :span="11">
<el-form-item label="员工编号" prop="personCode">
<el-input v-model.trim="personForm.personCode" :disabled="dialogStatus!='create'" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="身份证号" prop="idCardNo">
<el-input v-model.trim="personForm.idCardNo" :disabled="dialogStatus!='create'" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11">
<el-form-item label="姓名" prop="name">
<el-input v-model.trim="personForm.name" :disabled="dialogStatus!='create'" type="text" placeholder="必填"/>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item :disabled="dialogStatus!='create'" label="出生日期" prop="birthday">
<el-date-picker
v-model="personForm.birthday"
:disabled="dialogStatus!='create'"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11">
<el-form-item label="性别" prop="sex">
<el-select v-model="personForm.sex" :disabled="dialogStatus=='info'" placeholder="性别" clearable>
<el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="民族" prop="nation">
<el-select v-model="personForm.nation" :disabled="dialogStatus=='info'" placeholder="民族" clearable>
<el-option v-for="item in nationList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="personType=='1'" :gutter="20">
<el-col :span="11">
<el-form-item label="组织机构" prop="deptid">
<dept-select v-model="personForm.deptid" :disabled="dialogStatus=='info'" :need-top="false" placeholder="单位/部门"/>
</el-form-item>
</el-col>
<el-col :span="11" >
<el-form-item label="岗位" prop="duty">
<el-select v-model="personForm.duty" :disabled="dialogStatus=='info'" placeholder="岗位" clearable>
<el-option v-for="item in dutyList" :key="item.id" :label="item.name" :value="item.name"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="22">
<el-form-item label="住址" prop="address">
<el-input v-model.trim="personForm.ext.address" :disabled="dialogStatus=='info'" type="text" placeholder=""/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="22">
<el-form-item label="备注" prop="remarks">
<el-input v-model.trim="personForm.remarks" :disabled="dialogStatus=='info'" type="text" placeholder=""/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6" :offset="2">
<el-row>
<div class="avatar">
<el-image
:src="photo!==''?photo:defaultPhoto"
fit="cover"
style="width: 130px; height: 175px"/>
</div>
</el-row>
<el-row v-if="dialogStatus!='info'">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:http-request="uploadFile"
:show-file-list="false"
class="avatar-uploader"
action="string"
accept=".jpg,.jpeg,.png">
<el-button type="primary">点击上传照片</el-button>
</el-upload>
</el-row>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="工作经历" name="2">
<el-row v-if="dialogStatus!='info'" style="margin-bottom: 10px">
<el-col :span="24">
<el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addLine('experience')">新增一行</el-button>
</el-col>
</el-row>
<el-table :data="workExperience" style="width: 100%" border>
<el-table-column label="开始时间" width="200">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.startdate }}</span>
<!--<span v-else><el-date-picker v-model="scope.row.startdate" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择开始日期"/></span>-->
<span v-else><el-input v-model="scope.row.startdate" size="small" placeholder="时间格式: yyyy-MM-dd"/></span>
</template>
</el-table-column>
<el-table-column label="结束时间" width="200">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.enddate }}</span>
<!--<span v-else><el-date-picker v-model="scope.row.enddate" value-format="yyyy-MM-dd" type="date" placeholder="选择开始日期" size="small"/></span>-->
<span v-else><el-input v-model="scope.row.enddate" size="small" placeholder="时间格式: yyyy-MM-dd"/></span>
</template>
</el-table-column>
<el-table-column label="工作单位" width="280">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.enterprise }}</span>
<span v-else><el-input v-model="scope.row.enterprise" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="职务" width="180">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.duty }}</span>
<span v-else><el-input v-model="scope.row.duty" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.notes }}</span>
<span v-else><el-input v-model="scope.row.notes" size="small" placeholder="非必填"/></span>
</template>
</el-table-column>
<el-table-column v-if="dialogStatus!='info'" label="操作" width="100">
<template slot-scope="scope">
<el-button icon="el-icon-delete" size="small" type="danger" plain @click="workExperience.splice(scope.$index,1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<el-collapse-item title="教育经历" name="3">
<el-row v-if="dialogStatus!='info'" style="margin-bottom: 10px">
<el-col :span="24">
<el-button size="mini" type="primary" icon="el-icon-plus" plain @click="addLine('study')">新增一行</el-button>
</el-col>
</el-row>
<el-table :data="studyExperience" style="width: 100%" border>
<el-table-column label="开始时间" width="200">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.startdate }}</span>
<span v-else><el-date-picker v-model="scope.row.startdate" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择开始日期"/></span>
</template>
</el-table-column>
<el-table-column label="结束时间" width="200">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.enddate }}</span>
<span v-else><el-date-picker v-model="scope.row.enddate" value-format="yyyy-MM-dd" type="date" placeholder="选择结束日期" size="small"/></span>
</template>
</el-table-column>
<el-table-column label="学校" width="280">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.school }}</span>
<span v-else><el-input v-model="scope.row.school" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="类别" width="180">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.major }}</span>
<span v-else><el-input v-model="scope.row.major" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.notes }}</span>
<span v-else><el-input v-model="scope.row.notes" size="small" placeholder="非必填"/></span>
</template>
</el-table-column>
<el-table-column v-if="dialogStatus!='info'" label="操作" width="100">
<template slot-scope="scope">
<el-button icon="el-icon-delete" size="small" type="danger" plain @click="studyExperience.splice(scope.$index,1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<el-collapse-item title="社会关系" name="4">
<el-row v-if="dialogStatus!='info'" style="margin-bottom: 10px">
<el-col :span="24">
<el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addLine('social')">新增一行</el-button>
</el-col>
</el-row>
<el-table :data="socialRelation" style="width: 100%" border>
<el-table-column label="关系" width="180">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.relation }}</span>
<span v-else><el-input v-model="scope.row.relation" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.name }}</span>
<span v-else><el-input v-model="scope.row.name" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="出生年月" width="190">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.birth }}</span>
<span v-else><el-date-picker v-model="scope.row.birth" value-format="yyyy-MM" type="month" size="small" placeholder="选择出生年月"/></span>
</template>
</el-table-column>
<el-table-column label="政治面貌">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.politicalStatus }}</span>
<span v-else><el-input v-model="scope.row.politicalStatus" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="工作单位及职务">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.work }}</span>
<span v-else><el-input v-model="scope.row.work" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column v-if="dialogStatus!='info'" label="操作" width="100">
<template slot-scope="scope">
<el-button icon="el-icon-delete" size="small" type="danger" plain @click="socialRelation.splice(scope.$index,1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<el-collapse-item title="证书信息" name="5">
<el-row v-if="dialogStatus!='info'" style="margin-bottom: 10px">
<el-col :span="24">
<el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addLine('certificate')">新增一行</el-button>
</el-col>
</el-row>
<el-table :data="certificateInfo" style="width: 100%" border>
<el-table-column label="证书名称">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.name }}</span>
<span v-else><el-input v-model="scope.row.name" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="颁证单位">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.unit }}</span>
<span v-else><el-input v-model="scope.row.unit" size="small" placeholder="必填"/></span>
</template>
</el-table-column>
<el-table-column label="颁证时间" width="190">
<template slot-scope="scope">
<span v-if="dialogStatus=='info'">{{ scope.row.date }}</span>
<span v-else><el-date-picker v-model="scope.row.date" type="month" value-format="yyyy-MM" size="small" placeholder="选择颁证时间"/></span>
</template>
</el-table-column>
<el-table-column v-if="dialogStatus!='info'" label="操作" width="100">
<template slot-scope="scope">
<el-button icon="el-icon-delete" size="small" type="danger" plain @click="certificateInfo.splice(scope.$index,1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</el-form>
<div v-if="dialogStatus!='info'" style="height: 120px;">
<el-row type="flex" justify="center">
<el-col :span="15" style="text-align:center">
<el-button v-show="!isEditMode" size="medium" @click="resetForm"> 重置 </el-button>
<el-button :disabled="!canSave" type="primary" size="medium" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
</el-col>
</el-row>
</div>
</app-container>
</template>
<script>
import DeptSelect from '@/components/DeptSelect'
import { Uploadimg } from '@/api/common'
import { addPerson, updatePerson, personInfo, getSexType, getNationType } from '@/api/system/person'
import { getBirthdayByIdNO, getSexByIdNO } from '@/utils/dataAnalysis'
import { getPostList } from '@/api/system/post'
export default {
name: 'AddPerson',
components: { DeptSelect },
data() {
const validateIDCard = (rule, value, callback) => {
if (value !== '') {
if ((/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value) === false) {
callback(new Error('请输入合法的身份证号'))
} else {
callback()
}
} else {
callback(new Error('身份证号不能为空'))
}
}
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update,info
isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
personType: '1', // 人员角色，1为员工，0为访客
canSave: true, // 是否可以点击保存，当点击后该值置为false，直到后台返回结果再置为true
isSave: false, // 当点击保存按钮后，并返回200结果，置为true，表示已经保存
personForm: {
id: '', // 人员id
idCardNo: '', // 身份证号
name: '', // 姓名
deptid: '', // 单位/部门
remarks: '', // 备注
duty: '', // 岗位
sex: '', // 性别
personType: '1', // 人员类型
birthday: '', // 出生日期
nation: '', // 民族
photo: '',
ext: {
address: ''// 住址
}
}, // 表单
workExperience: [{
enterprise: '',
duty: '',
startdate: '',
enddate: '',
notes: ''
}], // 工作经历
studyExperience: [{
school: '',
major: '',
startdate: '',
enddate: '',
notes: ''
}], // 教育经历
socialRelation: [{
name: '', // 姓名
relation: '', // 关系
birth: '', // 生日
work: '', // 工作单位及职务
politicalStatus: '' // 政治面貌
}], // 社会关系
certificateInfo: [{
name: '',
unit: '',
date: ''
}], // 证书信息
photo: '', // 图片路径
defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
fileList: [],
imageList: [],
sexList: [], // 性别列表
dutyList: [], // 岗位列表
nationList: [], // 民族列表
rules: {
personCode: [{ required: true, message: '员工编号必填', trigger: ['blur', 'change'] }],
name: [{ required: true, message: '姓名必填', trigger: ['blur', 'change'] }],
idCardNo: [{ required: true, validator: validateIDCard, trigger: ['blur', 'change'] }],
deptid: [{ required: true, message: '单位/部门必选', trigger: 'change' }],
duty: [{ required: true, message: '岗位必选', trigger: 'change' }],
sex: [{ required: true, message: '性别必选', trigger: 'blur' }],
birthday: [{ required: true, message: '出生日期必填', trigger: ['blur'] }]
},
dialogVisible: false,
labelPosition: 'right',
deptShowTop: false, // 权属单位下拉是否显示顶级
deptShow: true,
formLoading: false,
activeNames: ['1', '2', '3', '4', '5'] // 折叠面板展开index
}
},
watch: {
'personForm.idCardNo': function(val) {
this.personForm.birthday = getBirthdayByIdNO(val)
this.personForm.sex = getSexByIdNO(val)
}
},
mounted() {
this.fetchSexType()// 获取性别列表
this.fetchDutyType() // 获取岗位列表
this.fetchNationType() // 获取民族列表
if (this.$route.query && this.$route.query.type) {
const type = this.$route.query.type
this.dialogStatus = type
this.isSave = false // isSave置为false,表示没有点击过保存按钮
if (type === 'create') {
this.isEditMode = false // 不是编辑页面
} else if (type === 'update') {
this.isEditMode = true // 是编辑页面
this.fetchData(this.$route.query.id)
} else if (type === 'info') {
this.isEditMode = false
this.fetchData(this.$route.query.id)
}
}
},
activated() {
if (this.$route.query && this.$route.query.type) {
this.isSave = false // isSave置为false,表示没有点击过保存按钮
const type = this.$route.query.type
if (type === 'create') {
this.isEditMode = false
this.canSave = true
} else if (type === 'update') {
this.isEditMode = true
this.canSave = true
this.fetchData(this.$route.query.id)
}
}
// if (this.$route.query.personType) {
// this.personType = this.$route.query.personType
// this.personForm.personType = this.$route.query.personType
// }
},
methods: {
// 取消
cancel() {
this.dialogFormVisible = false
this.fileList = []
// 清除验证
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
fetchData(id) {
this.formLoading = true
const base_url = this.baseConfig.baseUrl + 'static/'
personInfo(id).then(response => {
const personForm = response.data
this.personForm = {
id: personForm.id, // 人员id
personCode: personForm.personCode, // 人员编号
idCardNo: personForm.idCardNo, // 身份证号
name: personForm.name, // 姓名
deptid: personForm.deptid, // 单位/部门
remarks: personForm.remarks, // 备注
duty: personForm.duty, // 岗位
sex: personForm.sex, // 性别
personType: personForm.personType, // 人员类型
birthday: personForm.birthday, // 出生日期
nation: personForm.nation, // 民族
photo: personForm.photo,
ext: {
address: personForm.ext.address// 住址
}
}
// 解析教育、工作经历，社会关系，证书信息
this.workExperience = JSON.parse(personForm.ext.workExperience)
this.studyExperience = JSON.parse(personForm.ext.studyExperience)
this.socialRelation = JSON.parse(personForm.ext.socialRelation)
this.certificateInfo = JSON.parse(personForm.ext.certificateInfo)
// 解析照片
if (personForm.photo !== '') {
this.photo = base_url + personForm.photo
}
this.formLoading = false
})
},
// 点击新增行
addLine(type) {
if (type === 'experience') {
this.workExperience.push({
enterprise: '',
duty: '',
startdate: '',
enddate: '',
notes: ''
})
} else if (type === 'study') {
this.studyExperience.push({
school: '',
major: '',
startdate: '',
enddate: '',
notes: ''
}) // 教育经历
} else if (type === 'social') {
this.socialRelation.push({
name: '', // 姓名
relation: '', // 关系
birth: '', // 生日
work: '', // 工作单位及职务
politicalStatus: '' // 政治面貌
}) // 社会关系
} else if (type === 'certificate') {
this.certificateInfo.push({
name: '',
unit: '',
date: ''
})
}
},
// 重置表单
resetForm() {
this.personForm = {
idCardNo: '', // 身份证号
name: '', // 姓名
deptid: '', // 单位/部门
remarks: '', // 备注
duty: '', // 岗位
sex: '', // 性别
personType: '1', // 人员类型
birthday: '', // 出生日期
nation: '', // 民族
photo: '',
ext: {
address: '', // 住址
workExperience: '',
studyExperience: ''
}
}
this.workExperience = [{ enterprise: '', duty: '', startdate: '', enddate: '', notes: '' }]
this.studyExperience = [{ school: '', major: '', startdate: '', enddate: '', notes: '' }]
this.socialRelation = [{ name: '', relation: '', birth: '', work: '', politicalStatus: '' }]
this.certificateInfo = [{ name: '', unit: '', date: '' }] // 证书信息
this.photo = ''
// 清除验证
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
// 保存数据
saveData: function() {
// 照片不为空则对照片进行处理
if (this.photo !== '') {
if (this.photo.startsWith('http')) { // 上传的普通图片
let index = this.photo.indexOf('/static/')
if (index !== -1) {
index += 8
}
this.personForm.photo = this.photo.substring(index)
} else if (this.photo.startsWith('data:image')) { // 读卡器读的base64图片
this.personForm.photo = this.photo
}
}
// 遍历教育、工作经历，社会关系，证书信息
if (this.workExperience) {
// 过滤空的
this.workExperience = this.workExperience.filter(item => item.startdate !== '' && item.enterprice !== '')
this.personForm.ext.workExperience = JSON.stringify(this.workExperience)
}
if (this.studyExperience) {
// 过滤空的
this.studyExperience = this.studyExperience.filter(item => item.startdate !== '' && item.school !== '')
this.personForm.ext.studyExperience = JSON.stringify(this.studyExperience)
}
if (this.socialRelation) {
// 过滤空的
this.socialRelation = this.socialRelation.filter(item => item.name !== '' && item.relation !== '')
this.personForm.ext.socialRelation = JSON.stringify(this.socialRelation)
}
if (this.certificateInfo) {
// 过滤空的
this.certificateInfo = this.certificateInfo.filter(item => item.name !== '' && item.unit !== '')
this.personForm.ext.certificateInfo = JSON.stringify(this.certificateInfo)
}
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 如果新增页面未保存，则调用add
// 如果是新增页面已经保存，则调用update
// 其他情况均为修改页面
if (this.isSave === false && this.isEditMode === false) {
addPerson(this.personForm).then(response => {
if (response.code === 200) {
// 保存用户id
this.personForm.id = response.data.id
this.personForm.personCode = response.data.code
this.isSave = true
this.$message.success('保存成功!')
this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
this.$router.go(-1)
}
this.canSave = true
}).catch(() => {
this.canSave = true
})
} else {
updatePerson(this.personForm).then(response => {
if (response.code === 200) {
this.$message.success('保存成功!')
this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
this.$router.go(-1)
}
})
}
}
})
},
// 图片上传
uploadFile(file) {
console.log('uploadFile:' + file.file.name)
const base_url = this.baseConfig.baseUrl + 'static/'
Uploadimg(file).then(res => {
if (res.code === 200) {
this.photo = base_url + res.data
} else {
this.$message.warning(res.message)
}
})
},
// 上传前判断文件格式及大小
handleBeforeUpload(file) {
const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
let res = true
const isLt2M = file.size / 1024 / 1024 < 5
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
res = false
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 5MB!')
res = false
}
return res
},
// 上传成功后回显
handleSuccess(response, file) {
console.log('handleSuccess')
const base_url = this.baseConfig.baseUrl + 'static/'
if (response.code === 200) {
this.photo = base_url + response.data
} else {
this.$message.warning(response.message)
}
},
// 获取性别
fetchSexType() {
getSexType().then(response => {
this.sexList = response.data
})
},
// 获取岗位
fetchDutyType() {
getPostList().then(response => {
this.dutyList = response.data
})
},
// 获取民族
fetchNationType() {
getNationType().then(response => {
this.nationList = response.data
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.hide .el-upload--picture-card {
display: none;
}
.main-form{
margin: 0px 0px;
padding: 30px;
overflow: auto;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
width:100%;
}
.el-dialog{
width:700px
}
.el-select{
width: 100%;
}
.line{
width: 50px;
margin-left: 5px;
}
.hide .el-upload-–picture-card{
display: none;
}
.imgBox{
width: 100%;
text-align: center;
}
.avatar-uploader .el-upload {
margin-left: 12px;
margin-top: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 238px;
line-height: 238px;
text-align: center;
}
.avatar {
margin: 10px;
display: block;
}
.id-card-btn{
width:126px;
margin-left: 12px;
margin-top: 20px;
}
</style>
