修改页面

This commit is contained in:
admin-lmm
2023-07-06 17:53:11 +08:00
parent 35efeb8993
commit feb66a5a60
2 changed files with 398 additions and 218 deletions

View File

@@ -56,3 +56,11 @@ export function createSettleAccount(data) {
data: data
})
}
// 修改信息
export function updateAdapayMember(data) {
return request({
url: '/adapay/member/updateAdapayMember',
method: 'post',
data: data
})
}

View File

@@ -1,67 +1,46 @@
<template>
<div class="app-container">
<!-- <div>
<input type="file" accept="image/*" @change="getFile($event)" />
</div> -->
<el-card v-if="adapayMember == null" shadow="hover" style="margin-bottom:10px">
<div style="margin: 12px 0" >
没有查询到结算账户请点击按钮创建结算账户
<!-- 刷新按钮 -->
<el-button
size="medium"
type="primary"
@click="dialog = true"
>
<el-button size="medium" type="primary" @click="dialog = true">
创建结算账户
</el-button>
</div>
</el-card>
<template v-else>
<el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
<h2>会员信息</h2>
<hr>
<el-descriptions>
<!-- <el-descriptions-item label="会员昵称">{{
dialogForm.nickname
}}</el-descriptions-item> -->
<el-descriptions-item label="会员邮箱">{{
dialogForm.email
}}</el-descriptions-item>
<!-- <el-descriptions-item label="会员性别">{{
dialogForm.gender === "FEMALE" ? "女" : "男"
}}</el-descriptions-item> -->
<el-descriptions-item label="公司地址">{{
dialogForm.location
}}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="box-card" shadow="hover" style="margin:20px 0">
<!-- <div style="margin: 12px 0">汇付结算账户</div> -->
<h2>结算账户</h2>
<hr>
<el-descriptions :column="2" v-for="(item,index) in settleAccountList" :key="index">
<el-descriptions-item label="银行账户类型">{{ item.bankAcctType === '1'? '对公':'对私'}}</el-descriptions-item>
<el-descriptions-item label="银行卡号">{{
item.cardId
}}</el-descriptions-item>
<el-descriptions-item label="银行卡对应的户名">{{
item.cardName
}}</el-descriptions-item>
<el-descriptions-item label="手机号">{{
item.telNo
}}</el-descriptions-item>
<el-descriptions-item label="银行编码">{{
item.bankCode
}}</el-descriptions-item>
<el-descriptions-item label="银行账户开户银行所在省份编码">{{provCode(item.provCode)}}/ {{areaCode(item.areaCode)}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="box-card" shadow="hover" style="margin:20px 0" v-if="showAccountList">
<h2>结算账户</h2>
<hr>
<el-descriptions :column="2" v-for="(item,index) in settleAccountList" :key="index">
<el-descriptions-item label="银行账户类型">{{ item.bankAcctType === '1'? '对公':'对私'}}</el-descriptions-item>
<el-descriptions-item label="会员邮箱">{{
dialogForm.email
}}</el-descriptions-item>
<el-descriptions-item label="公司地址">{{
dialogForm.location
}}</el-descriptions-item>
<el-descriptions-item label="银行卡号">{{
item.cardId
}}</el-descriptions-item>
<el-descriptions-item label="银行卡对应的户名">{{
item.cardName
}}</el-descriptions-item>
<el-descriptions-item label="手机号">{{
item.telNo
}}</el-descriptions-item>
<el-descriptions-item label="银行编码">{{
item.bankCode
}}</el-descriptions-item>
<el-descriptions-item label="银行账户开户银行所在省份编码">{{provCode(item.provCode)}}/ {{areaCode(item.areaCode)}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</template>
<el-dialog title="创建结算账户" :visible.sync="dialog" width="50%">
<el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm" label-width="220px">
<el-form-item label="银行账户类型" prop="bankAcctType">
<el-form-item label="银行账户类型" prop="bankAcctType">
<el-radio-group v-model="dialogForm.bankAcctType">
<el-radio label="1">对公</el-radio>
<el-radio label="2">对私</el-radio>
@@ -69,41 +48,201 @@
</el-form-item>
<template v-if="dialogForm.bankAcctType === '1'">
<el-form-item label="企业名称" prop="businessName">
<el-input type="textarea" v-model="dialogForm.businessName" maxlength="50"></el-input>
<el-input type="textarea" v-model="dialogForm.businessName" maxlength="50"></el-input>
</el-form-item>
<el-form-item label="统一社会信用码" prop="socialCreditCode">
<el-input v-model="dialogForm.socialCreditCode" maxlength="18"></el-input>
</el-form-item>
<el-form-item label="统一社会信用证有效期" prop="socialCreditCodeExpires">
<el-date-picker
editable
v-model="dialogForm.socialCreditCodeExpires"
type="date"
placeholder="输入有效期格式为20190909"
format="yyyyMMdd"
value-format="yyyyMMdd">
</el-date-picker>
</el-form-item>
<el-form-item label="经营范围" prop="businessScope">
<el-input type="textarea" v-model="dialogForm.businessScope" maxlength="200"></el-input>
</el-form-item>
<el-form-item label="法人姓名" prop="legalPerson">
<el-input v-model="dialogForm.legalPerson"></el-input>
</el-form-item>
<el-form-item label="法人身份证号码" prop="legalCertId">
<el-input v-model="dialogForm.legalCertId" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="法人身份证有效期" prop="legalCertIdExpires">
<el-date-picker
editable
v-model="dialogForm.legalCertIdExpires"
type="date"
placeholder="输入有效期格式为20190909"
format="yyyyMMdd"
value-format="yyyyMMdd">
</el-date-picker>
</el-form-item>
<el-form-item label="法人手机号" prop="legalMp">
<el-input v-model="dialogForm.legalMp"></el-input>
</el-form-item>
<el-form-item label="企业地址" prop="address">
<el-input v-model="dialogForm.address"></el-input>
</el-form-item>
<el-form-item label="邮编">
<el-input v-model="dialogForm.zipCode"></el-input>
</el-form-item>
<el-form-item label="企业电话">
<el-input v-model="dialogForm.telphone"></el-input>
</el-form-item>
<el-form-item label="企业邮箱">
<el-input v-model="dialogForm.email"></el-input>
</el-form-item>
<el-form-item label="上传附件" prop="imgList">
<el-upload
class="upload-demo"
:action="actionUrl"
:headers="headers"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture"
:limit="3"
accept=".png,.jpg"
:on-exceed="handleExceed">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">上传法人身份证正面照法人身份证反面照开户银行许可证</div>
</el-upload>
</el-form-item>
<el-form-item label="银行代码" prop="bankCode">
<el-input v-model="dialogForm.bankCode"></el-input>
</el-form-item>
<el-form-item label="银行卡号" prop="cardNo">
<el-input v-model="dialogForm.cardNo"></el-input>
</el-form-item>
<el-form-item label="银行卡对应的户名" prop="cardName">
<el-input v-model="dialogForm.cardName"></el-input>
</el-form-item>
<el-form-item label="银行账户开户银行所在省份编码" prop="provCode">
<el-cascader
v-model="value"
:options="options"
@change="enterpriseChange"
:props="cateProps"
></el-cascader>
</el-form-item>
</template>
<template v-else>
<el-form-item label="会员邮箱" prop="email">
<el-input v-model="dialogForm.email"></el-input>
</el-form-item>
<el-form-item label="银行卡号" prop="cardId">
<el-input v-model="dialogForm.cardId"></el-input>
</el-form-item>
<el-form-item label="银行卡对应的户名" prop="cardName">
<el-input v-model="dialogForm.cardName"></el-input>
</el-form-item>
<el-form-item
v-if="dialogForm.bankAcctType === '2' "
label="证件号"
prop="certId"
:rules="dialogForm.bankAcctType === '2' ? dialogRules.certId : [{ required: false }]"
>
<el-input v-model="dialogForm.certId"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="telNo">
<el-input v-model="dialogForm.telNo"></el-input>
</el-form-item>
<el-form-item label="公司地址" prop="location">
<!-- type="textarea" -->
<el-input v-model="dialogForm.location"></el-input>
</el-form-item>
</template>
<el-form-item>
<el-button type="primary" @click="submitDialogForm('dialogForm')"
>提交</el-button
>
<el-button @click="resetForm('dialogForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 对公-->
<el-card class="box-card" shadow="hover" style="margin:20px;padding: 20px" v-if="showAdapayCorp != null">
<!-- <div style="margin: 12px 0">汇付结算账户</div> -->
<h2>对公结算账户</h2>
<hr>
<h4>{{auditStatus(adapayCorpMember.auditState)}}</h4>
<h4>{{adapayCorpMember.auditDesc}}</h4>
<el-descriptions>
<el-descriptions-item label="企业名称">{{adapayCorpMember.name}}</el-descriptions-item>
<el-descriptions-item label="统一社会信用码">{{adapayCorpMember.socialCreditCode}}</el-descriptions-item>
<el-descriptions-item label="统一社会信用证有效期">{{adapayCorpMember.socialCreditCodeExpires}}</el-descriptions-item>
<el-descriptions-item label="法人姓名">{{adapayCorpMember.legalPerson}}</el-descriptions-item>
<el-descriptions-item label="法人身份证号码">{{adapayCorpMember.legalCertId}}</el-descriptions-item>
<el-descriptions-item label="法人身份证有效期">{{adapayCorpMember.legalCertIdExpires}}</el-descriptions-item>
<el-descriptions-item label="法人手机号">{{adapayCorpMember.legalMp}}</el-descriptions-item>
<el-descriptions-item label="企业地址">{{adapayCorpMember.address}}</el-descriptions-item>
<el-descriptions-item label="邮编">{{adapayCorpMember.zipCode}}</el-descriptions-item>
<el-descriptions-item label="企业电话">{{adapayCorpMember.telphone}}</el-descriptions-item>
<el-descriptions-item label="企业邮箱">{{adapayCorpMember.email}}</el-descriptions-item>
<el-descriptions-item label="银行代码">{{adapayCorpMember.bankCode}}</el-descriptions-item>
<el-descriptions-item label="银行卡号">{{adapayCorpMember.cardNo}}</el-descriptions-item>
<el-descriptions-item label="银行卡对应的户名">{{adapayCorpMember.cardName}}</el-descriptions-item>
<el-descriptions-item label="银行账户开户银行所在省份编码">{{provCode(adapayCorpMember.provCode)}}/ {{areaCode(adapayCorpMember.areaCode)}}</el-descriptions-item>
<el-descriptions-item label="经营范围">{{adapayCorpMember.businessScope}}</el-descriptions-item>
</el-descriptions>
<el-button type="primary" v-if="adapayCorpMember.auditState != 'E'" @click="dialog=true">新建</el-button>
<el-button type="primary" v-if="adapayCorpMember.auditState == 'E'" @click="updateDialog=true">更改</el-button>
</el-card>
<el-dialog title="修改信息" :visible.sync="updateDialog" width="50%">
<el-form :model="adapayCorpMember" :rules="adapayCorpRules" ref="updateForm" label-width="220px">
<el-form-item label="统一社会信用码" prop="socialCreditCode">
<el-input v-model="dialogForm.socialCreditCode" maxlength="18"></el-input>
<el-input v-model="adapayCorpMember.socialCreditCode" maxlength="18"></el-input>
</el-form-item>
<el-form-item label="统一社会信用证有效期" prop="socialCreditCodeExpires">
<el-input v-model.number="dialogForm.socialCreditCodeExpires" maxlength="8" placeholder="有效期格式为:20190909"></el-input>
<el-date-picker
editable
v-model="adapayCorpMember.socialCreditCodeExpires"
type="date"
placeholder="输入有效期格式为20190909"
format="yyyyMMdd"
value-format="yyyyMMdd">
</el-date-picker>
</el-form-item>
<el-form-item label="经营范围" prop="businessScope">
<el-input type="textarea" v-model="dialogForm.businessScope"></el-input>
<el-input type="textarea" v-model="adapayCorpMember.businessScope" maxlength="200"></el-input>
</el-form-item>
<el-form-item label="法人姓名" prop="legalPerson">
<el-input v-model="dialogForm.legalPerson"></el-input>
<el-input v-model="adapayCorpMember.legalPerson"></el-input>
</el-form-item>
<el-form-item label="法人身份证号码" prop="legalCertId">
<el-input v-model="dialogForm.legalCertId" maxlength="20"></el-input>
<el-input v-model="adapayCorpMember.legalCertId" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="法人身份证有效期" prop="legalCertIdExpires">
<el-input v-model.number="dialogForm.legalCertIdExpires" maxlength="8" placeholder="有效期格式为:20190909"></el-input>
<el-date-picker
editable
v-model="adapayCorpMember.legalCertIdExpires"
type="date"
placeholder="输入有效期格式为20190909"
format="yyyyMMdd"
value-format="yyyyMMdd">
</el-date-picker>
</el-form-item>
<el-form-item label="法人手机号" prop="legalMp">
<el-input v-model="dialogForm.legalMp"></el-input>
<el-input v-model="adapayCorpMember.legalMp"></el-input>
</el-form-item>
<el-form-item label="企业地址" prop="address">
<el-input v-model="dialogForm.address"></el-input>
<el-input v-model="adapayCorpMember.address"></el-input>
</el-form-item>
<el-form-item label="邮编">
<el-input v-model="dialogForm.zipCode"></el-input>
<el-input v-model="adapayCorpMember.zipCode"></el-input>
</el-form-item>
<el-form-item label="企业电话">
<el-input v-model="dialogForm.telphone"></el-input>
<el-input v-model="adapayCorpMember.telphone"></el-input>
</el-form-item>
<el-form-item label="企业邮箱">
<el-input v-model="dialogForm.email"></el-input>
<el-form-item label="企业邮箱">
<el-input v-model="adapayCorpMember.email"></el-input>
</el-form-item>
<el-form-item label="上传附件" prop="imgList">
<el-upload
@@ -120,85 +259,92 @@
:on-exceed="handleExceed">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">上传法人身份证正面照法人身份证反面照开户银行许可证</div>
</el-upload>
</el-upload>
</el-form-item>
<el-form-item label="银行代码" prop="bankCode">
<el-input v-model="dialogForm.bankCode"></el-input>
</el-form-item>
<el-form-item label="银行卡号" prop="cardNo">
<el-input v-model="dialogForm.cardNo"></el-input>
</el-form-item>
<el-form-item label="银行卡对应的户名" prop="cardName">
<el-input v-model="dialogForm.cardName"></el-input>
</el-form-item>
<el-form-item label="银行账户开户银行所在省份编码" prop="provCode">
<el-cascader
v-model="value"
:options="options"
@change="enterpriseChange"
:props="cateProps"
></el-cascader>
</el-form-item>
</template>
<template v-else>
<el-form-item label="会员邮箱" prop="email">
<el-input v-model="dialogForm.email"></el-input>
</el-form-item>
<!-- <el-form-item label="会员性别" prop="gender">
<el-radio-group v-model="dialogForm.gender">
<el-radio label="MALE"></el-radio>
<el-radio label="FEMALE"></el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="银行卡号" prop="cardId">
<el-input v-model="dialogForm.cardId"></el-input>
</el-form-item>
<el-form-item label="银行卡对应的户名" prop="cardName">
<el-input v-model="dialogForm.cardName"></el-input>
</el-form-item>
<el-form-item
v-if="dialogForm.bankAcctType === '2'"
label="证件号"
prop="certId"
:rules="
dialogForm.bankAcctType === '2'
? dialogRules.certId
: [{ required: false }]
"
>
<el-input v-model="dialogForm.certId"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="telNo">
<el-input v-model="dialogForm.telNo"></el-input>
</el-form-item>
<el-form-item label="公司地址" prop="location">
<!-- type="textarea" -->
<el-input v-model="dialogForm.location"></el-input>
</el-form-item>
</template>
<el-form-item>
<el-button type="primary" @click="submitDialogForm('dialogForm')"
>提交</el-button
>
<el-button @click="resetForm('dialogForm')">重置</el-button>
<el-button type="primary" @click="updateDialogForm('updateForm')"
>提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {
selectAdapayMember,
createAdapayMember,createCorpMember,createSettleAccount
createAdapayMember,createCorpMember,createSettleAccount,updateAdapayMember
} from "@/api/adapayMember/adapayMember";
import { getToken } from "@/utils/auth";
export default {
components: {},
props: ["merchantId"],
data() {
return {
showAdapayCorp:null,
updateDialog:false,
adapayCorpRules:{
name: [
{
required: true,
message: "请填写企业名称",
trigger: "blur",
},
],
socialCreditCode:[
{
required: true,
message: "请填写统一社会信用码",
trigger: "blur",
},
],
socialCreditCodeExpires:[
{
required: true,
message: "请填写统一社会信用证有效期",
trigger: "blur",
},
],
businessScope:[
{
required: true,
message: "请填写经营范围",
trigger: "blur",
},
],
legalPerson:[
{
required: true,
message: "请填写法人姓名",
trigger: "blur",
},
],
legalCertId:[
{
required: true,
message: "请填写法人身份证号码",
trigger: "blur",
},
],
legalCertIdExpires:[
{
required: true,
message: "请填写会员昵称",
trigger: "blur",
},
],
legalMp:[
{
required: true,
message: "请填写会员昵称",
trigger: "blur",
},
],
},
adapayCorpMember:{}, // 对公信息
showAccountList:false,
dialog:false,
dialogForm:{
bankAcctType:'1',
@@ -301,90 +447,80 @@ export default {
message: "请填写银行编码",
trigger: "blur",
}
],
],
cardNo:[
{
{
required: true,
message: "请填写银行卡号",
trigger: "blur",
}
],
// imgList: [
// {
// required: true,
// message: "请上传三张照片",
// trigger: "change",
// }
// ],
businessName:[{
required: true,
message: "请输入企业名称",
trigger: "blur",
},],
provCode:[{
required: true,
message: "请选择省份编码",
trigger: "change",
},],
socialCreditCode:[{
required: true,
message: "请输入统一社会信用码",
trigger: "blur",
},],
socialCreditCodeExpires:[{
required: true,
message: "请输入统一社会信用证有效期",
trigger: "blur",
},
{
type: "number",
message: "请输入正确的统一社会信用证有效期",
trigger: "blur",
},
],
businessScope:[{
required: true,
message: "请输入经营范围",
trigger: "blur",
},],
legalPerson:[{
required: true,
message: "请输入法人姓名",
trigger: "blur",
},],
legalCertId:[{
required: true,
message: "请输入法人身份证号码",
trigger: "blur",
},
],
legalCertIdExpires:[{
required: true,
message: "请输入法人身份证有效期",
trigger: "blur",
},
imgList: [
{
type: "number",
message: "请输入正确的法人身份证有效期",
trigger: "blur",
},
],
legalMp:[{
required: true,
message: "请输入法人手机号",
trigger: "blur",
},
{
message: "请上传三张照片",
trigger: "change",
}
],
businessName:[{
required: true,
message: "请输入企业名称",
trigger: "blur",
},],
provCode:[{
required: true,
message: "请选择省份编码",
trigger: "change",
},],
socialCreditCode:[{
required: true,
message: "请输入统一社会信用码",
trigger: "blur",
},],
socialCreditCodeExpires:[{
required: true,
message: "请输入统一社会信用证有效期",
trigger: "blur",
}
],
businessScope:[{
required: true,
message: "请输入经营范围",
trigger: "blur",
},],
legalPerson:[{
required: true,
message: "请输入法人姓名",
trigger: "blur",
},],
legalCertId:[{
required: true,
message: "请输入法人身份证号码",
trigger: "blur",
},
],
legalCertIdExpires:[{
required: true,
message: "请输入法人身份证有效期",
trigger: "blur",
}
],
legalMp:[{
required: true,
message: "请输入法人手机号",
trigger: "blur",
},
{
pattern: /^1\d{10}$/,
message: "手机号码格式有误",
trigger: "blur",
},
],
],
address:[{
required: true,
message: "请输入企业地址",
trigger: "blur",
},]
required: true,
message: "请输入企业地址",
trigger: "blur",
},]
},
cateProps: {
expandTrigger: "click",
@@ -406,20 +542,32 @@ export default {
};
},
methods: {
getFile(e){
// console.log(e,'file');
const file = e.target.files
// this.file = e.target.files[0]
if(file.length !== 0) {
const reader = new FileReader()
reader.readAsDataURL(file[0])
// reader.readAsText(file[0])
reader.addEventListener('load',() =>{
console.log('asdfjao',reader.result);
})
updateDialogForm(form){
console.log(this.adapayCorpMember,'this.adapayCorpMember')
this.adapayCorpMember.merchantId = this.merchantId
this.$refs[form].validate((valid) =>{
if (valid) {
console.log(valid,'valid');
updateAdapayMember(this.adapayCorpMember).then((response) =>{
console.log('修改',response);
this.updateDialog = false
this.selectAdapayMember();
})
}
})
},
// <!-- A-待审核B-审核失败C-开户失败D-开户成功但未创建结算账户E-开户和创建结算账户成功
auditStatus(status){
let arr = [{type:'A',statusTitle:'待审核'},{type:'B',statusTitle:'审核失败'},{type:'C',statusTitle:'开户失败'},{type:'D',statusTitle:'开户成功但未创建结算账户'},{type:'E',statusTitle:'开户和创建结算账户成功'}]
let str = arr.find(item => item.type == status)
// console.log(str,'str auditStatus')
if (str ==null){
return '一'
} else{
return str.statusTitle
}
},
handleExceed(files, fileList) {
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 张图片,本次选择了 ${
files.length
@@ -427,6 +575,8 @@ export default {
);
},
handleSuccess(res, file) {
// this.$refs.dialogForm.clearValidate()
// this.$refs.updateForm.clearValidate()
this.imageUrl = URL.createObjectURL(file.raw);
console.log("图片上传成功 url", this.imageUrl);
// console.log("图片上传成功 res", res);
@@ -434,7 +584,6 @@ export default {
// console.log('push方法', this.fileList);
this.dialogForm.imgList = this.fileList.map(obj => obj.url)
console.log(this.dialogForm.imgList,'this.dialogForm.imgList');
},
handleRemove(file, fileList) {
console.log("移除图片", file, fileList);
@@ -450,18 +599,27 @@ export default {
},
areaCode(area){
let arr = this.options.find(item => item.cities[0].value == area)
return arr.title
if (arr ==null){
return '一'
} else{
return arr.title
}
},
provCode(code){
let arr = this.options.find(item => item.value == code)
return arr.title
if (arr ==null){
return '一'
} else{
return arr.title
}
},
enterpriseChange(value) {
this.dialogForm.provCode = value[0]
this.dialogForm.areaCode = value[1]
},
submitDialogForm(dialogForm){
console.log(this.dialogForm);
this.$refs[dialogForm].validate((valid) =>{
if (valid) {
@@ -489,11 +647,19 @@ export default {
};
selectAdapayMember(param).then((response) => {
console.log("查询 selectAdapayMember", response);
this.adapayMember = response.data;
this.adapayMember = response.data;
if (response.data != null) {
this.dialogForm = response.data.adapayMember;
this.settleAccountList= response.data.settleAccountList
console.log(' this.settleAccountList', this.settleAccountList)
// 对公返回的结果
// console.log('对公信息',this.adapayCorpMember)
if(response.data.settleAccountList !== null) {
this.dialogForm = response.data.adapayMember;
this.settleAccountList= response.data.settleAccountList
this.showAccountList = true
}
this.showAdapayCorp = response.data.adapayCorpMember
if (response.data.adapayCorpMember != null) return this.adapayCorpMember = response.data.adapayCorpMember
// console.log(' this.settleAccountList', this.settleAccountList)
}
});
},
@@ -526,5 +692,11 @@ export default {
::v-deep .el-input .el-input--medium{
width: 43% !important;
}
.my-label {
background: #E1F3D8;
}
.my-content {
background: #FDE2E2;
}
</style>