oa-system/src/components/OP/OpVisaPriec.vue

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div>
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="OpVisaPriceData.diId" clearable filterable placeholder="团组选择"
                                :disabled="isShow" style="width: 220px;" @change="DiIdSelectChange">
                                <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="团 号:" prop="tourCode" label-width="160px">
                            <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="客户:" prop="clientName" label-width="160px">
                            <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="出访时间:" label-width="160px">
                            <el-input placeholder="出访时间" v-model="VisitDate" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访人数:" label-width="160px">
                            <el-input placeholder="出访人数" v-model="delegationInfo.visitPNumber" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访天数:" label-width="160px">
                            <el-input placeholder="出访天数" v-model="delegationInfo.visitDays" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <el-form :model="OpVisaPriceData" ref="OpVisaPriceData" :rules="OpVisaPriceDataRules" label-width="100px"
                class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="签证客户:" prop="visaClient" label-width="160px">
                            <el-input placeholder="签证客户" v-model="OpVisaPriceData.visaClient">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="签证费用:" prop="visaPrice" label-width="160px">
                            <el-input placeholder="签证费用" v-model="OpVisaPriceData.visaPrice" style="width: 58%;">
                            </el-input>
                            <el-select v-model="OpVisaPriceData.visaCurrency" filterable placeholder="币种"
                                style="width: 35%;">
                                <el-option v-for="item in currencyList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="是否第三方代办:" prop="isThird" label-width="160px">
                            <el-radio-group v-model="OpVisaPriceData.isThird">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="客户类型:" prop="passengerType" label-width="160px">
                            <el-select v-model="OpVisaPriceData.passengerType" clearable filterable placeholder="客户类型">
                                <el-option v-for="item in passengerTypeSelect" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="签证办理人数:" prop="visaNumber" label-width="160px">
                            <el-input placeholder="签证办理人数" v-model="OpVisaPriceData.visaNumber" style="width: 58%;">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="免签人数:" prop="visaFreeNumber" label-width="160px">
                            <el-input placeholder="免签人数" v-model="OpVisaPriceData.visaFreeNumber" style="width: 58%;">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 81%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpVisaPriceData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <hr style='background-color:#5555; height:1px; border:none;margin-top: 10px;' />
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="支付方式:" prop="payDId" label-width="160px">
                            <el-select v-model="OpVisaPriceData.payDId" placeholder="支付方式" style="width: 100%;"
                                @change="payChange">
                                <el-option v-for="item in payment" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="消费方式:" prop="consumptionPatterns" label-width="160px">
                            <el-input placeholder="消费方式" v-model="OpVisaPriceData.consumptionPatterns">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="消费日期:" prop="consumptionDate" label-width="160px">
                            <el-date-picker v-model="OpVisaPriceData.consumptionDate" placeholder="消费日期" type="date">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="付款金额:" prop="payMoney" label-width="160px">
                            <el-input placeholder="付款金额" v-model="OpVisaPriceData.visaPrice" style="width: 52%;"
                                :disabled="true">
                            </el-input>
                            <el-select v-model="OpVisaPriceData.visaCurrency" style="width: 45%;" :disabled="true">
                                <el-option v-for="item in currencyList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div v-if="OpVisaPriceData.payDId == 72">
                    <div style="display: flex;">
                        <div style="width: 25%;">
                            <el-form-item label="卡类型:" prop="ctdId" label-width="160px">
                                <el-select v-model="OpVisaPriceData.ctdId" placeholder="卡类型" style="width: 100%;"
                                    @change="ctdChange">
                                    <el-option v-for="item in bankCard" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="银行卡号:" prop="bankNo" label-width="160px">
                                <el-input placeholder="银行卡号" v-model="OpVisaPriceData.bankNo" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="持卡人姓名:" prop="cardholderName" label-width="160px">
                                <el-input placeholder="持卡人姓名" v-model="OpVisaPriceData.cardholderName" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="OpVisaPriceData.payDId == 73">
                    <div style="display: flex;">
                        <div style="width: 25%;">
                            <el-form-item label="公司银行账号:" label-width="160px" prop="companyBankNo">
                                <el-input placeholder="公司银行账号" v-model="OpVisaPriceData.companyBankNo">
                                </el-input>

                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                <el-input placeholder="对方开户行:" v-model="OpVisaPriceData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                <el-input placeholder="对方银行卡号" v-model="OpVisaPriceData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                <el-input placeholder="对方姓名" v-model="OpVisaPriceData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else-if="OpVisaPriceData.payDId == 83">
                    <div style="display: flex;">
                        <div style="width: 25%;">
                            <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                <el-input placeholder="对方开户行" v-model="OpVisaPriceData.otherBankName">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                <el-input placeholder="对方银行卡号" v-model="OpVisaPriceData.otherSideNo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 25%;">
                            <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                <el-input placeholder="对方姓名" v-model="OpVisaPriceData.otherSideName">
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div v-else></div>
                <div style="display:flex;">
                    <div style="width: 25%;">
                        <el-form-item label="收款方:" prop="payee" label-width="160px">
                            <el-input placeholder="对方姓名:" v-model="OpVisaPriceData.payee">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
                            <el-select v-model="OpVisaPriceData.orbitalPrivateTransfer" placeholder="费用标识"
                                style="width: 100%;">
                                <el-option key="0" label="公转" :value=0>
                                </el-option>
                                <el-option key="1" label="私转" :value=1>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpVisaPriceData.cRemark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="addBtn">保存</el-button>

                        <el-button @click="EscAdd">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { dE } from '@fullcalendar/core/internal-common';
export default {
    data() {
        return {
            title: "新增商邀费用",
            token: '',
            userId: 0,
            id: '',
            isShow: false,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            currencyList: [],//币种下拉框
            bankCard: [],//卡类型下拉框
            payment: [],//支付方式下拉框
            OpVisaPriceData: {
                status: 0,
                id: 0,
                diId: '',
                visaClient: '',
                visaPrice: 0,
                visaCurrency: '',
                isThird: '',
                passengerType: '',
                visaNumber: 0,
                visaFreeNumber: 0,
                createUserId: 0,
                remark: '',
                payDId: 72,
                consumptionPatterns: '',
                consumptionDate: '',
                ctdId: '',
                companyBankNo: '',
                otherBankName: '',
                otherSideNo: '',
                otherSideName: '',
                bankNo: '',
                cardholderName: '',
                payee: '',
                orbitalPrivateTransfer: 0,
                cRemark: '',
            },
            IsAuditGM: 0,
            VisitDate: '',
            passengerTypeSelect: [],
            transformDateFormat: function (value) {

                // 将value转换为Date对象
                var date = new Date(value);
                // 获取年、月、日
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                // 将月份和日期转换为两位数的格式

                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                // 返回格式化后的日期字符串
                return year + '-' + month + '-' + day;
            },
            OpVisaPriceDataRules: {
                visaPrice: [
                    { required: true, message: '请输入费用金额', trigger: ['blur', 'change'] },
                    { pattern: /^(([1-9]?\d{0,8}(\.\d{1,2})?)|999999999|999999999\.(0){1,2})$/, message: '请输入正确的金额(最多2位小数)' }
                ],
                visaClient: [
                    { required: true, message: '请输入费用名称', trigger: ['blur', 'change'] },
                ],
                isThird: [
                    { required: true, message: '请选择是否第三方代办', trigger: ['blur', 'change'] },
                ],
                passengerType: [
                    { required: true, message: '请选择客户类型', trigger: ['blur', 'change'] },

                ],
                visaNumber: [
                    { required: true, message: '请输入办理人数', trigger: ['blur', 'change'] },
                    { pattern: /^[0-9]\d*$/, message: '请输入正确的数字', trigger: ['blur', 'change'] },
                ],
                visaFreeNumber: [
                    { required: true, message: '请输入办理人数', trigger: ['blur', 'change'] },
                    { pattern: /^[0-9]\d*$/, message: '请输入正确的数字', trigger: ['blur', 'change'] },
                ],
                payDId: [
                    { required: true, message: '请选择支付方式', trigger: ['blur', 'change'] },

                ],
                consumptionPatterns: [
                    { required: true, message: '请输入消费方式', trigger: ['blur', 'change'] },

                ],
                consumptionDate: [
                    { required: true, message: '请选择消费日期', trigger: ['blur', 'change'] },
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
                ],
                ctdId: [
                    { required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },
                ],
                companyBankNo: [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },],
                otherBankName: [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },],
                otherSideNo: [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },],
                totherSideName: [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },],
            }
        }
    },
    methods: {
        //初始化下拉框
        initializeSelect() {
            //团组下拉框绑定
            var url = "/api/Groups/DecreasePaymentsSelect"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    ctId: 80
                }
            }).then(function (res) {
                if (res.data.code == 200) {

                    that.delegationInfoList = res.data.data.groupName;
                    that.payment = res.data.data.payment
                    for (let index = 0; index < that.delegationInfoList.length; index++) {

                        if (that.delegationInfoList[index].id == that.OpVisaPriceData.diId) {
                            that.delegationInfo = that.delegationInfoList[index];

                            that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                            break;
                        }
                    }
                }
            })

            var url = "/api/Groups/VisaPriceAddSelect"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {

                    that.bankCard = res.data.data.bankCard;
                    that.payment = res.data.data.payment;
                    that.currencyList = res.data.data.currencyList;
                    that.passengerTypeSelect = res.data.data.passengerType;
                }
            })
        },
        DiIdSelectChange() {
            var that = this;
            for (let index = 0; index < that.delegationInfoList.length; index++) {
                if (that.delegationInfoList[index].id == that.OpVisaPriceData.diId) {
                    that.delegationInfo = that.delegationInfoList[index];

                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                    break;
                }
            }
        },
        payChange() {
            this.OpVisaPriceData.ctdId = '';
            this.OpVisaPriceData.bankNo = '';
            this.OpVisaPriceData.cardholderName = '';
            this.OpVisaPriceData.companyBankNo = '';
            this.OpVisaPriceData.otherBankName = '';
            this.OpVisaPriceData.otherSideNo = '';
            this.OpVisaPriceData.otherSideName = '';
            this.OpVisaPriceData.cRemark = '';
            if (this.OpVisaPriceData.payDId == 73) {
                this.OpVisaPriceDataRules.companyBankNo = [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.ctdId = []
            } else if (this.OpVisaPriceData.payDId == 72) {
                this.OpVisaPriceDataRules.ctdId = [{ required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.companyBankNo = []
                this.OpVisaPriceDataRules.otherBankName = []
                this.OpVisaPriceDataRules.otherSideNo = []
                this.OpVisaPriceDataRules.otherSideName = []
            } else if (this.OpVisaPriceData.payDId == 83) {
                this.OpVisaPriceDataRules.companyBankNo = []
                this.OpVisaPriceDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
                this.OpVisaPriceDataRules.ctdId = []
            } else {
                this.OpVisaPriceDataRules.companyBankNo = []
                this.OpVisaPriceDataRules.otherBankName = []
                this.OpVisaPriceDataRules.otherSideNo = []
                this.OpVisaPriceDataRules.otherSideName = []
                this.OpVisaPriceDataRules.ctdId = []
            }
        },
        ctdChange(id) {
            this.OpVisaPriceData.cardholderName = 'Zhang Hailin';
            for (var i = 0; i < this.bankCard.length; i++) {
                if (this.bankCard[i].id == parseInt(id)) {
                    this.OpVisaPriceData.bankNo = this.bankCard[i].remark
                }
            }
        },
        //根据Id获取单挑数据及C表数据
        QueryVisaById() {
            var url = "/api/Groups/QueryVisaById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: that.OpVisaPriceData.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var CreditCardPayment = res.data.data.creditCardPayment;
                    var VisaInfo = res.data.data.visaInfo;
                    that.IsAuditGM = CreditCardPayment.isAuditGM;
                    that.OpVisaPriceData.visaClient = VisaInfo.visaClient;
                    that.OpVisaPriceData.visaPrice = VisaInfo.visaPrice;
                    that.OpVisaPriceData.visaCurrency = VisaInfo.visaCurrency;
                    that.OpVisaPriceData.isThird = VisaInfo.isThird;
                    that.OpVisaPriceData.passengerType = parseInt(VisaInfo.passengerType);
                    that.OpVisaPriceData.visaNumber = VisaInfo.visaNumber;
                    that.OpVisaPriceData.visaFreeNumber = VisaInfo.visaFreeNumber;
                    that.OpVisaPriceData.createUserId = VisaInfo.createUserId;
                    that.OpVisaPriceData.remark = VisaInfo.remark;
                    that.OpVisaPriceData.payDId = CreditCardPayment.payDId;
                    that.OpVisaPriceData.consumptionPatterns = CreditCardPayment.consumptionPatterns;
                    that.OpVisaPriceData.consumptionDate = CreditCardPayment.consumptionDate;
                    that.OpVisaPriceData.ctdId = CreditCardPayment.ctdId;
                    that.OpVisaPriceData.bankNo = CreditCardPayment.bankNo;
                    that.OpVisaPriceData.cardholderName = CreditCardPayment.cardholderName;
                    that.OpVisaPriceData.companyBankNo = CreditCardPayment.companyBankNo
                    that.OpVisaPriceData.otherBankName = CreditCardPayment.otherBankName
                    that.OpVisaPriceData.otherSideNo = CreditCardPayment.otherSideNo
                    that.OpVisaPriceData.otherSideName = CreditCardPayment.otherSideName
                    that.OpVisaPriceData.payee = CreditCardPayment.payee;
                    that.OpVisaPriceData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer;
                    that.OpVisaPriceData.cRemark = CreditCardPayment.remark;
                }
            })
        },
        addBtn() {
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (this.OpVisaPriceData.diId == null && this.OpVisaPriceData.diId == undefined && this.OpVisaPriceData.diId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                } else {
                    const that = this;
                    that.$refs.OpVisaPriceData.validate((valid) => {
                        if (valid) {
                            debugger
                            that.OpVisaPriceData.createUserId = that.userId;
                            if (that.OpVisaPriceData.ctdId == '') {
                                that.OpVisaPriceData.ctdId = 0
                            }

                            var url = "/api/Groups/OpVisaPrice"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                data: that.OpVisaPriceData
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    that.loading = true;
                                    setTimeout(() => {
                                        that.$router.push({
                                            path: "/home/VisaPriec",
                                            query: {
                                                diId: that.OpVisaPriceData.diId
                                            }
                                        })
                                    }, 3000);
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            })
                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },
        EscAdd() {
            this.$router.push({
                path: "/home/VisaPriec",
                query: {
                    diId: this.OpVisaPriceData.diId
                }
            })
        }
    },

    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.initializeSelect();
        this.OpVisaPriceData.diId = parseInt(this.$route.query.DiId)
        this.OpVisaPriceData.id = this.$route.query.id
        debugger
        if (this.OpVisaPriceData.id != null && this.OpVisaPriceData.id != undefined && this.OpVisaPriceData.id != 0) {
            this.QueryVisaById();
            this.title = "修改签证费用";
            this.OpVisaPriceData.status = 2
            this.isShow = true
        } else {
            this.OpVisaPriceData.status = 1
            this.title = "新增签证费用"
            this.isShow = false
        }

    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    
}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>