H5/americanContainer.git

parent: 1ee3b952 | 补丁 | 提交 | ignore whitespace

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanCont...

gongjinbao

2025-01-09 cdef5e20df78f8b8a131500cf1c803b5d085fa0c

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanContainer

2个文件已添加

	src/component/detailInfo.vue	602 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/component/detailInfoTop.vue	668 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/component/detailInfo.vue

New file
@@ -0,0 +1,602 @@
<template>
    <div class="contanier">
        <!-- card-two -->
        <el-card class="box-card mt-13">
            <div slot="header" class="clearfix">
                <span class="clearfix_text">其他费用</span>
            </div>
            <div class="box-cardes">
                <div class="flex">
                    <div class="table-box">
                        <el-table :data="tableData" style="width: 100%" border>
                            <el-table-column prop="orderld" label="序号" align="center">
                            </el-table-column>
                            <el-table-column prop="container" label="费用名称" align="center">
                            </el-table-column>
                            <el-table-column prop="bol" label="费用金额" align="center">
                            </el-table-column>
                            <el-table-column prop="post" label="备注" align="center">
                            </el-table-column>
                        </el-table>

                        <!-- <div class="text-right pagination-card">
                <el-pagination background :page-size="pagination.pageSize" layout="slot,prev,pager,next"
                    :current-page="pagination.pageNum" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" :total="pagination.total">
                    <span class="total-num">共{{ pagination.total }}条记录</span>
                </el-pagination>
            </div> -->
                    </div>
                </div>
            </div>
        </el-card>
        <!-- card-three -->
        <el-card class="box-card mt-13">
            <div slot="header" class="clearfix">
                <span class="clearfix_text">备注说明</span>
            </div>
            <div class="box-cardes">
                <div class="flex">
                    <div class="box33">
                        <div class="box_text1">备注：</div>
                    </div>
                    <el-input type="textarea" v-model="form.poundWeight" placeholder="请输入不超过200字备注">
                    </el-input>
                </div>
            </div>

        </el-card>
        <div class="btn">
            <div class="btn_close">关闭</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: Number,
            default: () => 0
        }
    },

    data() {
        return {
            form: {
                container: "", //集装箱号
                bol: "", //提单号
                cargoType: "", //货柜类型
                carrier: "", //船司
                vesselAndVoyage: "", //航名航次
                pickupLocation: "", //提柜地
                ETA: "", //预计到达日期
                SOC: "", //SOC
                DG: "", //DG
                overweight: "", //超重
                customsInspection: "", //查验
                dropOrLive: "", //DROP/LIVE
                clientOrder: "", //客户订单号
                product: "", //品名
                QTY: "", //包装数量
                weight: "", //重量
                poundWeight: "", //≈重量(磅)
                volume: "", //体积
                contact: "", //收件人
                consigneeCompany: "", //收件人公司
                post: "", //目的地邮编
                address: "", //地址
                tel: "", //联系电话
                email: "", //邮箱
                PUExplain: '',//PU说明
                PUFileUrl: '',//PU附件
                DOFileUrl: '',//DO附件
                PODFileUrls: '',//POD附件
                otherFileUrls: '',//其他附件
                specialRequest: '',//特殊要求
                remark: '',//备注
            },
            tableData: [],
        };
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.bgWhite {
    background: #fff;
}

.a-center {
    align-items: center;
}

.box-cards {
    padding: 23px 0 0px 24px;
}

.box-cardes {
    padding: 23px 0 38px 0;
}

.editor {

    ::v-deep .ql-container {
        height: 200px;
    }
}

.box-carde {
    padding: 27px 0 41px 24px;

    ::v-deep .el-form-item__label {
        text-align: left !important;
    }
}

::v-deep .el-form-item__content {
    margin: 0 !important;
}

::v-deep .el-card {
    border-radius: 6px !important;
}

::v-deep .el-card__body {
    padding: 0 !important;
}

::v-deep .el-card__header {
    padding: 35px 23px 23px 23px !important;
}

::v-deep .el-input__inner {
    width: 230px !important;
    height: 50px !important;
}

::v-deep .el-form-item {
    display: flex !important;
    align-items: center !important;
}

::v-deep .el-radio__label {
    font-size: 16px !important;
    color: rgba(59, 63, 86, 0.8) !important;
}

::v-deep .el-radio__inner {
    width: 24px !important;
    height: 24px !important;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
    border: 4px solid #fff !important;

    border-color: rgba(1, 64, 153, 1) !important;
    background: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio__inner::after {
    // width: 16px !important;
    // height: 16px !important;
    // background-color: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio {
    width: 65px !important;
    margin-right: 42px !important;
}

::v-deep .el-textarea {
    width: 1576px !important;
}

.table-box {
    margin-top: 16px;
    margin-left: 185px;
    margin-right: 185px;
    width: calc(100% - 370px);
    border-radius: 6px;
    background-color: #fff;
    padding-bottom: 24px;

    ::v-deep {
        .el-table__header {
            .el-table__cell {
                background-color: rgba(246, 246, 247, 1) !important;

                .cell {
                    font-family: SourceHanSansCN, SourceHanSansCN;
                    font-weight: 500;
                    font-size: 16px;
                    color: #3B3F56;
                }
            }
        }
    }

    ::v-deep {
        .el-table__cell {
            height: 50px;
        }
    }

    ::v-deep .el-table__row {
        .el-table__cell {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 16px;
            color: #3B3F56 !important;
        }
    }

    .table-btn {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 16px;
        color: #014099;
    }

    .line-set {
        font-size: 14px;
        color: #014099;
        margin: 0 5px;
    }

    .total-num {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #989BB0;
        margin-right: 12px;
    }
}

.upload_btn {
    width: 107px;
    height: 43px;
    background: #014099;
    border-radius: 1px;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ql-editor {
    height: 243px;
    width: 100%;
}

.mr-14 {
    margin-right: 14px;
}

.mr-129 {
    margin-right: 129px;
}

.bg {
    height: 75px;
    background: rgba(1, 64, 153, 0.11);
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    padding: 17px 0 17px 24px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 16px;
    color: #3b3f56;
    line-height: 24px;
    text-align: left;
    font-style: normal;
}

.contanier {
    background: #ededf3;
    // padding: 13px 35px 23px 35px;
}

.mt-13 {
    margin-top: 13px;
}

.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clearfix_text {
    font-weight: bold;
    font-size: 20px;
    color: #3b3f56;
    line-height: 30px;
    text-align: left;
    font-style: normal;
}

.clearfix_btn {
    display: flex;
    align-items: center;
    background: #014099;
    border-radius: 4px;
    padding: 15px 7px 15px 16px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
    text-align: left;
    font-style: normal;
}

.clearfix_btn_img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.clearfix_img {
    width: 24px;
    height: 24px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 27px;

    .btn_close {
        width: 190px;
        height: 50px;
        background: #ffffff;
        border-radius: 4px;
        border: 2px solid #d2d2d2;
        font-weight: 500;
        font-size: 20px;
        color: #000000;
        line-height: 30px;
        text-align: right;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn_comfirm {
        width: 190px;
        height: 50px;
        background: #014099;
        border-radius: 4px;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        line-height: 30px;
        text-align: right;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
    }
}

.box {
    width: 90px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.label1 {
    ::v-deep .el-form-item__error {
        left: 90px !important;
    }
}

.label2 {
    ::v-deep .el-form-item__error {
        left: 214px !important;
    }
}

.label3 {
    ::v-deep .el-form-item__error {
        left: 213px !important;
    }
}

.label4 {
    ::v-deep .el-form-item__error {
        left: 247px !important;
    }
}

.label5 {
    ::v-deep .el-form-item {
        margin-bottom: 11px !important;
    }
}

.mt-43 {
    margin-top: 43px;
}

.box1 {
    width: 215px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box2 {
    width: 247px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box3 {
    width: 213px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box33 {
    width: 94px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box4 {
    width: 100px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-start;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box5 {
    width: 206px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 44px;
}

.box6 {
    width: 188px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box7 {
    width: 247px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box8 {
    width: 100px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box9 {
    width: 110px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box10 {
    width: 120px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box_text1 {
    font-weight: 500;
    font-size: 16px;
    color: rgba(59, 63, 86, 0.8);
    line-height: 24px;
}

.box_text2 {
    font-weight: 500;
    font-size: 14px;
    color: rgba(59, 63, 86, 0.8);
    line-height: 24px;
    margin-right: 14px;
}

.box_text3 {
    font-weight: 500;
    font-size: 12px;
    color: rgba(59, 63, 86, 0.8);
    line-height: 24px;
    margin-right: 14px;
}

.red {
    color: red;
}

.tip_box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tip {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    color: #FE3333;
    line-height: 18px;
    text-align: left;
    padding-right: 29px;

    .tip-img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}
</style>

 src/component/detailInfoTop.vue

New file
@@ -0,0 +1,668 @@
<template>
    <div class="contanier">
        <el-form ref="form" :model="form" label-width="80px">
            <div class="box-cardes bgWhite">
                <div class="flex">
                    <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
                        <div class="flex a-center">
                            <div class="box9 ">
                                <div class="box_text1">基础运费：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="" class="label2" prop="product" label-width="0px">
                        <div class="flex a-center">
                            <div class="box1">
                                <div class="box_text1">Chassis：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="" class="label3" prop="QTY" label-width="0px">
                        <div class="flex a-center">
                            <div class="box3">
                                <div class="box_text1">Chassis Split：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
                        <div class="flex a-center">
                            <div class="box2">
                                <div class="box_text1">SOC Fee：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>
                </div>
                <div class="flex">
                    <el-form-item label="" class="label1" prop="weight" label-width="0px">
                        <div class="flex a-center">
                            <div class="box9">
                                <div class="box_text1">PrePull：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
                        <div class="flex a-center">
                            <div class="box1">
                                <div class="box_text1">码头小费：</div>
                            </div>
                            <el-input v-model="form.poundWeight" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="" class="label3" prop="volume" label-width="0px">
                        <div class="flex a-center">
                            <div class="box3">
                                <div class="box_text1">OW fee：</div>
                            </div>
                            <el-input v-model="form.volume" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
                        <div class="flex a-center">
                            <div class="box2">
                                <div class="box_text1">待时费：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>
                </div>
                <div class="flex">
                    <el-form-item label="" class="label1" prop="weight" label-width="0px">
                        <div class="flex a-center">
                            <div class="box9">
                                <div class="box_text1">Storage：</div>
                            </div>
                            <el-input v-model="form.clientOrder" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
                        <div class="flex a-center">
                            <div class="box1">
                                <div class="box_text1">Storage 免费时长：</div>
                            </div>
                            <el-input v-model="form.poundWeight" placeholder="请输入">
                                <div style="line-height: 50px;padding-right: 14px;" slot="suffix">小时</div>
                            </el-input>
                        </div>
                    </el-form-item>
                </div>
            </div>
            
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => { }
        }
    },

    data() {
        return {
            form: {
                container: "", //集装箱号
                bol: "", //提单号
                cargoType: "", //货柜类型
                carrier: "", //船司
                vesselAndVoyage: "", //航名航次
                pickupLocation: "", //提柜地
                ETA: "", //预计到达日期
                SOC: "", //SOC
                DG: "", //DG
                overweight: "", //超重
                customsInspection: "", //查验
                dropOrLive: "", //DROP/LIVE
                clientOrder: "", //客户订单号
                product: "", //品名
                QTY: "", //包装数量
                weight: "", //重量
                poundWeight: "", //≈重量(磅)
                volume: "", //体积
                contact: "", //收件人
                consigneeCompany: "", //收件人公司
                post: "", //目的地邮编
                address: "", //地址
                tel: "", //联系电话
                email: "", //邮箱
                PUExplain: '',//PU说明
                PUFileUrl: '',//PU附件
                DOFileUrl: '',//DO附件
                PODFileUrls: '',//POD附件
                otherFileUrls: '',//其他附件
                specialRequest: '',//特殊要求
                remark: '',//备注
            },
        };
    },
    methods: {
    },
};
</script>

<style lang="less" scoped>
.bgWhite {
    background: #fff;
}

.a-center {
    align-items: center;
}

.box-cards {
    padding: 23px 0 0px 24px;
}

.box-cardes {
    padding: 23px 0 38px 0;
}

.editor {

    ::v-deep .ql-container {
        height: 200px;
    }
}

.box-carde {
    padding: 27px 0 41px 24px;

    ::v-deep .el-form-item__label {
        text-align: left !important;
    }
}

::v-deep .el-form-item__content {
    margin: 0 !important;
}

::v-deep .el-card {
    border-radius: 6px !important;
}

::v-deep .el-card__body {
    padding: 0 !important;
}

::v-deep .el-card__header {
    padding: 35px 23px 23px 23px !important;
}

::v-deep .el-input__inner {
    width: 230px !important;
    height: 50px !important;
}

::v-deep .el-form-item {
    display: flex !important;
    align-items: center !important;
}

::v-deep .el-radio__label {
    font-size: 16px !important;
    color: rgba(59, 63, 86, 0.8) !important;
}

::v-deep .el-radio__inner {
    width: 24px !important;
    height: 24px !important;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
    border: 4px solid #fff !important;

    border-color: rgba(1, 64, 153, 1) !important;
    background: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio__inner::after {
    // width: 16px !important;
    // height: 16px !important;
    // background-color: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio {
    width: 65px !important;
    margin-right: 42px !important;
}

::v-deep .el-textarea {
    width: 1576px !important;
}

.table-box {
    margin-top: 16px;
    margin-left: 185px;
    margin-right: 185px;
    width: calc(100% - 370px);
    border-radius: 6px;
    background-color: #fff;
    padding-bottom: 24px;

    ::v-deep {
        .el-table__header {
            .el-table__cell {
                background-color: rgba(246, 246, 247, 1) !important;

                .cell {
                    font-family: SourceHanSansCN, SourceHanSansCN;
                    font-weight: 500;
                    font-size: 16px;
                    color: #3B3F56;
                }
            }
        }
    }

    ::v-deep {
        .el-table__cell {
            height: 50px;
        }
    }

    ::v-deep .el-table__row {
        .el-table__cell {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 16px;
            color: #3B3F56 !important;
        }
    }

    .table-btn {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 16px;
        color: #014099;
    }

    .line-set {
        font-size: 14px;
        color: #014099;
        margin: 0 5px;
    }

    .total-num {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #989BB0;
        margin-right: 12px;
    }
}

.upload_btn {
    width: 107px;
    height: 43px;
    background: #014099;
    border-radius: 1px;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ql-editor {
    height: 243px;
    width: 100%;
}

.mr-14 {
    margin-right: 14px;
}

.mr-129 {
    margin-right: 129px;
}

.bg {
    height: 75px;
    background: rgba(1, 64, 153, 0.11);
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    padding: 17px 0 17px 24px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 16px;
    color: #3b3f56;
    line-height: 24px;
    text-align: left;
    font-style: normal;
}

.contanier {
    background: #ededf3;
    // padding: 13px 35px 23px 35px;
}

.mt-13 {
    margin-top: 13px;
}

.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clearfix_text {
    font-weight: bold;
    font-size: 20px;
    color: #3b3f56;
    line-height: 30px;
    text-align: left;
    font-style: normal;
}

.clearfix_btn {
    display: flex;
    align-items: center;
    background: #014099;
    border-radius: 4px;
    padding: 15px 7px 15px 16px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
    text-align: left;
    font-style: normal;
}

.clearfix_btn_img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.clearfix_img {
    width: 24px;
    height: 24px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 27px;

    .btn_close {
        width: 190px;
        height: 50px;
        background: #ffffff;
        border-radius: 4px;
        border: 2px solid #d2d2d2;
        font-weight: 500;
        font-size: 20px;
        color: #000000;
        line-height: 30px;
        text-align: right;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn_comfirm {
        width: 190px;
        height: 50px;
        background: #014099;
        border-radius: 4px;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        line-height: 30px;
        text-align: right;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
    }
}

.box {
    width: 90px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.label1 {
    ::v-deep .el-form-item__error {
        left: 90px !important;
    }
}

.label2 {
    ::v-deep .el-form-item__error {
        left: 214px !important;
    }
}

.label3 {
    ::v-deep .el-form-item__error {
        left: 213px !important;
    }
}

.label4 {
    ::v-deep .el-form-item__error {
        left: 247px !important;
    }
}

.label5 {
    ::v-deep .el-form-item {
        margin-bottom: 11px !important;
    }
}

.mt-43 {
    margin-top: 43px;
}

.box1 {
    width: 215px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box2 {
    width: 247px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box3 {
    width: 213px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box33 {
    width: 94px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box4 {
    width: 100px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-start;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box5 {
    width: 206px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 44px;
}

.box6 {
    width: 188px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box7 {
    width: 247px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box8 {
    width: 100px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 14px;
}

.box9 {
    width: 110px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box10 {
    width: 120px;
    display: flex;
    flex-direction: column;
    line-height: 23px !important;
    align-items: flex-end;
    font-weight: 500;
    flex-shrink: 0;
}

.box_text1 {
    font-weight: 500;
    font-size: 16px;
    color: rgba(59, 63, 86, 0.8);
    line-height: 24px;
}

.box_text2 {
    font-weight: 500;
    font-size: 14px;
    color: rgba(59, 63, 86, 0.8);
    line-height: 24px;
    margin-right: 14px;
}

.box_text3 {
    font-weight: 500;
    font-size: 12px;
    color: rgba(59, 63, 86, 0.8);
    line-height: 24px;
    margin-right: 14px;
}

.red {
    color: red;
}

.tip_box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tip {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    color: #FE3333;
    line-height: 18px;
    text-align: left;
    padding-right: 29px;

    .tip-img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}
</style>

New file
			@@ -0,0 +1,602 @@
			<template>
			<div class="contanier">
			<!-- card-two -->
			<el-card class="box-card mt-13">
			<div slot="header" class="clearfix">
			<span class="clearfix_text">其他费用</span>
			</div>
			<div class="box-cardes">
			<div class="flex">
			<div class="table-box">
			<el-table :data="tableData" style="width: 100%" border>
			<el-table-column prop="orderld" label="序号" align="center">
			</el-table-column>
			<el-table-column prop="container" label="费用名称" align="center">
			</el-table-column>
			<el-table-column prop="bol" label="费用金额" align="center">
			</el-table-column>
			<el-table-column prop="post" label="备注" align="center">
			</el-table-column>
			</el-table>

			<!-- <div class="text-right pagination-card">
			<el-pagination background :page-size="pagination.pageSize" layout="slot,prev,pager,next"
			:current-page="pagination.pageNum" @current-change="handleCurrentChange"
			@size-change="handleSizeChange" :total="pagination.total">
			<span class="total-num">共{{ pagination.total }}条记录</span>
			</el-pagination>
			</div> -->
			</div>
			</div>
			</div>
			</el-card>
			<!-- card-three -->
			<el-card class="box-card mt-13">
			<div slot="header" class="clearfix">
			<span class="clearfix_text">备注说明</span>
			</div>
			<div class="box-cardes">
			<div class="flex">
			<div class="box33">
			<div class="box_text1">备注：</div>
			</div>
			<el-input type="textarea" v-model="form.poundWeight" placeholder="请输入不超过200字备注">
			</el-input>
			</div>
			</div>

			</el-card>
			<div class="btn">
			<div class="btn_close">关闭</div>
			</div>
			</div>
			</template>

			<script>
			export default {
			props: {
			id: {
			type: Number,
			default: () => 0
			}
			},

			data() {
			return {
			form: {
			container: "", //集装箱号
			bol: "", //提单号
			cargoType: "", //货柜类型
			carrier: "", //船司
			vesselAndVoyage: "", //航名航次
			pickupLocation: "", //提柜地
			ETA: "", //预计到达日期
			SOC: "", //SOC
			DG: "", //DG
			overweight: "", //超重
			customsInspection: "", //查验
			dropOrLive: "", //DROP/LIVE
			clientOrder: "", //客户订单号
			product: "", //品名
			QTY: "", //包装数量
			weight: "", //重量
			poundWeight: "", //≈重量(磅)
			volume: "", //体积
			contact: "", //收件人
			consigneeCompany: "", //收件人公司
			post: "", //目的地邮编
			address: "", //地址
			tel: "", //联系电话
			email: "", //邮箱
			PUExplain: '',//PU说明
			PUFileUrl: '',//PU附件
			DOFileUrl: '',//DO附件
			PODFileUrls: '',//POD附件
			otherFileUrls: '',//其他附件
			specialRequest: '',//特殊要求
			remark: '',//备注
			},
			tableData: [],
			};
			},
			methods: {

			},
			};
			</script>

			<style lang="less" scoped>
			.bgWhite {
			background: #fff;
			}

			.a-center {
			align-items: center;
			}

			.box-cards {
			padding: 23px 0 0px 24px;
			}

			.box-cardes {
			padding: 23px 0 38px 0;
			}

			.editor {

			::v-deep .ql-container {
			height: 200px;
			}
			}

			.box-carde {
			padding: 27px 0 41px 24px;

			::v-deep .el-form-item__label {
			text-align: left !important;
			}
			}

			::v-deep .el-form-item__content {
			margin: 0 !important;
			}

			::v-deep .el-card {
			border-radius: 6px !important;
			}

			::v-deep .el-card__body {
			padding: 0 !important;
			}

			::v-deep .el-card__header {
			padding: 35px 23px 23px 23px !important;
			}

			::v-deep .el-input__inner {
			width: 230px !important;
			height: 50px !important;
			}

			::v-deep .el-form-item {
			display: flex !important;
			align-items: center !important;
			}

			::v-deep .el-radio__label {
			font-size: 16px !important;
			color: rgba(59, 63, 86, 0.8) !important;
			}

			::v-deep .el-radio__inner {
			width: 24px !important;
			height: 24px !important;
			}

			::v-deep .el-radio__input.is-checked .el-radio__inner {
			border: 4px solid #fff !important;

			border-color: rgba(1, 64, 153, 1) !important;
			background: rgba(1, 64, 153, 1) !important;
			}

			::v-deep .el-radio__inner::after {
			// width: 16px !important;
			// height: 16px !important;
			// background-color: rgba(1, 64, 153, 1) !important;
			}

			::v-deep .el-radio {
			width: 65px !important;
			margin-right: 42px !important;
			}

			::v-deep .el-textarea {
			width: 1576px !important;
			}

			.table-box {
			margin-top: 16px;
			margin-left: 185px;
			margin-right: 185px;
			width: calc(100% - 370px);
			border-radius: 6px;
			background-color: #fff;
			padding-bottom: 24px;

			::v-deep {
			.el-table__header {
			.el-table__cell {
			background-color: rgba(246, 246, 247, 1) !important;

			.cell {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 16px;
			color: #3B3F56;
			}
			}
			}
			}

			::v-deep {
			.el-table__cell {
			height: 50px;
			}
			}

			::v-deep .el-table__row {
			.el-table__cell {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 16px;
			color: #3B3F56 !important;
			}
			}

			.table-btn {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 16px;
			color: #014099;
			}

			.line-set {
			font-size: 14px;
			color: #014099;
			margin: 0 5px;
			}

			.total-num {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 12px;
			color: #989BB0;
			margin-right: 12px;
			}
			}

			.upload_btn {
			width: 107px;
			height: 43px;
			background: #014099;
			border-radius: 1px;
			font-weight: 500;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.ql-editor {
			height: 243px;
			width: 100%;
			}

			.mr-14 {
			margin-right: 14px;
			}

			.mr-129 {
			margin-right: 129px;
			}

			.bg {
			height: 75px;
			background: rgba(1, 64, 153, 0.11);
			border-radius: 1px;
			display: flex;
			flex-direction: column;
			padding: 17px 0 17px 24px;
			margin-bottom: 16px;
			font-weight: 500;
			font-size: 16px;
			color: #3b3f56;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			}

			.contanier {
			background: #ededf3;
			// padding: 13px 35px 23px 35px;
			}

			.mt-13 {
			margin-top: 13px;
			}

			.clearfix {
			display: flex;
			align-items: center;
			justify-content: space-between;
			}

			.clearfix_text {
			font-weight: bold;
			font-size: 20px;
			color: #3b3f56;
			line-height: 30px;
			text-align: left;
			font-style: normal;
			}

			.clearfix_btn {
			display: flex;
			align-items: center;
			background: #014099;
			border-radius: 4px;
			padding: 15px 7px 15px 16px;
			font-weight: 500;
			font-size: 16px;
			color: #ffffff;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			}

			.clearfix_btn_img {
			width: 20px;
			height: 20px;
			margin-right: 9px;
			}

			.clearfix_img {
			width: 24px;
			height: 24px;
			}

			.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 27px;

			.btn_close {
			width: 190px;
			height: 50px;
			background: #ffffff;
			border-radius: 4px;
			border: 2px solid #d2d2d2;
			font-weight: 500;
			font-size: 20px;
			color: #000000;
			line-height: 30px;
			text-align: right;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.btn_comfirm {
			width: 190px;
			height: 50px;
			background: #014099;
			border-radius: 4px;
			font-weight: 500;
			font-size: 20px;
			color: #ffffff;
			line-height: 30px;
			text-align: right;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20px;
			}
			}

			.box {
			width: 90px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.label1 {
			::v-deep .el-form-item__error {
			left: 90px !important;
			}
			}

			.label2 {
			::v-deep .el-form-item__error {
			left: 214px !important;
			}
			}

			.label3 {
			::v-deep .el-form-item__error {
			left: 213px !important;
			}
			}

			.label4 {
			::v-deep .el-form-item__error {
			left: 247px !important;
			}
			}

			.label5 {
			::v-deep .el-form-item {
			margin-bottom: 11px !important;
			}
			}

			.mt-43 {
			margin-top: 43px;
			}

			.box1 {
			width: 215px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box2 {
			width: 247px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box3 {
			width: 213px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box33 {
			width: 94px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box4 {
			width: 100px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-start;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box5 {
			width: 206px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 44px;
			}

			.box6 {
			width: 188px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box7 {
			width: 247px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box8 {
			width: 100px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box9 {
			width: 110px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box10 {
			width: 120px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box_text1 {
			font-weight: 500;
			font-size: 16px;
			color: rgba(59, 63, 86, 0.8);
			line-height: 24px;
			}

			.box_text2 {
			font-weight: 500;
			font-size: 14px;
			color: rgba(59, 63, 86, 0.8);
			line-height: 24px;
			margin-right: 14px;
			}

			.box_text3 {
			font-weight: 500;
			font-size: 12px;
			color: rgba(59, 63, 86, 0.8);
			line-height: 24px;
			margin-right: 14px;
			}

			.red {
			color: red;
			}

			.tip_box {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			}

			.tip {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 12px;
			color: #FE3333;
			line-height: 18px;
			text-align: left;
			padding-right: 29px;

			.tip-img {
			width: 16px;
			height: 16px;
			margin-right: 4px;
			}
			}
			</style>

New file
			@@ -0,0 +1,668 @@
			<template>
			<div class="contanier">
			<el-form ref="form" :model="form" label-width="80px">
			<div class="box-cardes bgWhite">
			<div class="flex">
			<el-form-item label="" class="label1" prop="clientOrder" label-width="0">
			<div class="flex a-center">
			<div class="box9 ">
			<div class="box_text1">基础运费：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>

			<el-form-item label="" class="label2" prop="product" label-width="0px">
			<div class="flex a-center">
			<div class="box1">
			<div class="box_text1">Chassis：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>

			<el-form-item label="" class="label3" prop="QTY" label-width="0px">
			<div class="flex a-center">
			<div class="box3">
			<div class="box_text1">Chassis Split：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>
			<el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
			<div class="flex a-center">
			<div class="box2">
			<div class="box_text1">SOC Fee：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>
			</div>
			<div class="flex">
			<el-form-item label="" class="label1" prop="weight" label-width="0px">
			<div class="flex a-center">
			<div class="box9">
			<div class="box_text1">PrePull：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>

			<el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
			<div class="flex a-center">
			<div class="box1">
			<div class="box_text1">码头小费：</div>
			</div>
			<el-input v-model="form.poundWeight" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>

			<el-form-item label="" class="label3" prop="volume" label-width="0px">
			<div class="flex a-center">
			<div class="box3">
			<div class="box_text1">OW fee：</div>
			</div>
			<el-input v-model="form.volume" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>

			<el-form-item label="" class="label4" prop="QTYUnit" label-width="0">
			<div class="flex a-center">
			<div class="box2">
			<div class="box_text1">待时费：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>
			</div>
			<div class="flex">
			<el-form-item label="" class="label1" prop="weight" label-width="0px">
			<div class="flex a-center">
			<div class="box9">
			<div class="box_text1">Storage：</div>
			</div>
			<el-input v-model="form.clientOrder" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">$</div>
			</el-input>
			</div>
			</el-form-item>

			<el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
			<div class="flex a-center">
			<div class="box1">
			<div class="box_text1">Storage 免费时长：</div>
			</div>
			<el-input v-model="form.poundWeight" placeholder="请输入">
			<div style="line-height: 50px;padding-right: 14px;" slot="suffix">小时</div>
			</el-input>
			</div>
			</el-form-item>
			</div>
			</div>

			</el-form>
			</div>
			</template>

			<script>
			export default {
			props: {
			info: {
			type: Object,
			default: () => { }
			}
			},

			data() {
			return {
			form: {
			container: "", //集装箱号
			bol: "", //提单号
			cargoType: "", //货柜类型
			carrier: "", //船司
			vesselAndVoyage: "", //航名航次
			pickupLocation: "", //提柜地
			ETA: "", //预计到达日期
			SOC: "", //SOC
			DG: "", //DG
			overweight: "", //超重
			customsInspection: "", //查验
			dropOrLive: "", //DROP/LIVE
			clientOrder: "", //客户订单号
			product: "", //品名
			QTY: "", //包装数量
			weight: "", //重量
			poundWeight: "", //≈重量(磅)
			volume: "", //体积
			contact: "", //收件人
			consigneeCompany: "", //收件人公司
			post: "", //目的地邮编
			address: "", //地址
			tel: "", //联系电话
			email: "", //邮箱
			PUExplain: '',//PU说明
			PUFileUrl: '',//PU附件
			DOFileUrl: '',//DO附件
			PODFileUrls: '',//POD附件
			otherFileUrls: '',//其他附件
			specialRequest: '',//特殊要求
			remark: '',//备注
			},
			};
			},
			methods: {
			},
			};
			</script>

			<style lang="less" scoped>
			.bgWhite {
			background: #fff;
			}

			.a-center {
			align-items: center;
			}

			.box-cards {
			padding: 23px 0 0px 24px;
			}

			.box-cardes {
			padding: 23px 0 38px 0;
			}

			.editor {

			::v-deep .ql-container {
			height: 200px;
			}
			}

			.box-carde {
			padding: 27px 0 41px 24px;

			::v-deep .el-form-item__label {
			text-align: left !important;
			}
			}

			::v-deep .el-form-item__content {
			margin: 0 !important;
			}

			::v-deep .el-card {
			border-radius: 6px !important;
			}

			::v-deep .el-card__body {
			padding: 0 !important;
			}

			::v-deep .el-card__header {
			padding: 35px 23px 23px 23px !important;
			}

			::v-deep .el-input__inner {
			width: 230px !important;
			height: 50px !important;
			}

			::v-deep .el-form-item {
			display: flex !important;
			align-items: center !important;
			}

			::v-deep .el-radio__label {
			font-size: 16px !important;
			color: rgba(59, 63, 86, 0.8) !important;
			}

			::v-deep .el-radio__inner {
			width: 24px !important;
			height: 24px !important;
			}

			::v-deep .el-radio__input.is-checked .el-radio__inner {
			border: 4px solid #fff !important;

			border-color: rgba(1, 64, 153, 1) !important;
			background: rgba(1, 64, 153, 1) !important;
			}

			::v-deep .el-radio__inner::after {
			// width: 16px !important;
			// height: 16px !important;
			// background-color: rgba(1, 64, 153, 1) !important;
			}

			::v-deep .el-radio {
			width: 65px !important;
			margin-right: 42px !important;
			}

			::v-deep .el-textarea {
			width: 1576px !important;
			}

			.table-box {
			margin-top: 16px;
			margin-left: 185px;
			margin-right: 185px;
			width: calc(100% - 370px);
			border-radius: 6px;
			background-color: #fff;
			padding-bottom: 24px;

			::v-deep {
			.el-table__header {
			.el-table__cell {
			background-color: rgba(246, 246, 247, 1) !important;

			.cell {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 16px;
			color: #3B3F56;
			}
			}
			}
			}

			::v-deep {
			.el-table__cell {
			height: 50px;
			}
			}

			::v-deep .el-table__row {
			.el-table__cell {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 16px;
			color: #3B3F56 !important;
			}
			}

			.table-btn {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 16px;
			color: #014099;
			}

			.line-set {
			font-size: 14px;
			color: #014099;
			margin: 0 5px;
			}

			.total-num {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 12px;
			color: #989BB0;
			margin-right: 12px;
			}
			}

			.upload_btn {
			width: 107px;
			height: 43px;
			background: #014099;
			border-radius: 1px;
			font-weight: 500;
			font-size: 16px;
			color: #FFFFFF;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.ql-editor {
			height: 243px;
			width: 100%;
			}

			.mr-14 {
			margin-right: 14px;
			}

			.mr-129 {
			margin-right: 129px;
			}

			.bg {
			height: 75px;
			background: rgba(1, 64, 153, 0.11);
			border-radius: 1px;
			display: flex;
			flex-direction: column;
			padding: 17px 0 17px 24px;
			margin-bottom: 16px;
			font-weight: 500;
			font-size: 16px;
			color: #3b3f56;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			}

			.contanier {
			background: #ededf3;
			// padding: 13px 35px 23px 35px;
			}

			.mt-13 {
			margin-top: 13px;
			}

			.clearfix {
			display: flex;
			align-items: center;
			justify-content: space-between;
			}

			.clearfix_text {
			font-weight: bold;
			font-size: 20px;
			color: #3b3f56;
			line-height: 30px;
			text-align: left;
			font-style: normal;
			}

			.clearfix_btn {
			display: flex;
			align-items: center;
			background: #014099;
			border-radius: 4px;
			padding: 15px 7px 15px 16px;
			font-weight: 500;
			font-size: 16px;
			color: #ffffff;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			}

			.clearfix_btn_img {
			width: 20px;
			height: 20px;
			margin-right: 9px;
			}

			.clearfix_img {
			width: 24px;
			height: 24px;
			}

			.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 27px;

			.btn_close {
			width: 190px;
			height: 50px;
			background: #ffffff;
			border-radius: 4px;
			border: 2px solid #d2d2d2;
			font-weight: 500;
			font-size: 20px;
			color: #000000;
			line-height: 30px;
			text-align: right;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.btn_comfirm {
			width: 190px;
			height: 50px;
			background: #014099;
			border-radius: 4px;
			font-weight: 500;
			font-size: 20px;
			color: #ffffff;
			line-height: 30px;
			text-align: right;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20px;
			}
			}

			.box {
			width: 90px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.label1 {
			::v-deep .el-form-item__error {
			left: 90px !important;
			}
			}

			.label2 {
			::v-deep .el-form-item__error {
			left: 214px !important;
			}
			}

			.label3 {
			::v-deep .el-form-item__error {
			left: 213px !important;
			}
			}

			.label4 {
			::v-deep .el-form-item__error {
			left: 247px !important;
			}
			}

			.label5 {
			::v-deep .el-form-item {
			margin-bottom: 11px !important;
			}
			}

			.mt-43 {
			margin-top: 43px;
			}

			.box1 {
			width: 215px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box2 {
			width: 247px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box3 {
			width: 213px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box33 {
			width: 94px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box4 {
			width: 100px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-start;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box5 {
			width: 206px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 44px;
			}

			.box6 {
			width: 188px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box7 {
			width: 247px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box8 {
			width: 100px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			margin-right: 14px;
			}

			.box9 {
			width: 110px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box10 {
			width: 120px;
			display: flex;
			flex-direction: column;
			line-height: 23px !important;
			align-items: flex-end;
			font-weight: 500;
			flex-shrink: 0;
			}

			.box_text1 {
			font-weight: 500;
			font-size: 16px;
			color: rgba(59, 63, 86, 0.8);
			line-height: 24px;
			}

			.box_text2 {
			font-weight: 500;
			font-size: 14px;
			color: rgba(59, 63, 86, 0.8);
			line-height: 24px;
			margin-right: 14px;
			}

			.box_text3 {
			font-weight: 500;
			font-size: 12px;
			color: rgba(59, 63, 86, 0.8);
			line-height: 24px;
			margin-right: 14px;
			}

			.red {
			color: red;
			}

			.tip_box {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			}

			.tip {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 12px;
			color: #FE3333;
			line-height: 18px;
			text-align: left;
			padding-right: 29px;

			.tip-img {
			width: 16px;
			height: 16px;
			margin-right: 4px;
			}
			}
			</style>