<template>
|
<div class="contanier1">
|
<el-form ref="form" :model="form" label-width="80px">
|
<div class="box-cardes1 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-cardes1 {
|
// 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;
|
}
|
|
.contanier1 {
|
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>
|
