添加订单

gongjinbao

2025-01-08 00283eaef6efe95e3523f205920ab4b7538e9444

添加订单

 package-lock.json

Diff too large

 src/assets/addOrder/img1@2x.png

 src/assets/addOrder/img2@2x.png

 src/assets/addOrder/img2x.png

 src/assets/addOrder/img3@2x.png

 src/assets/addOrder/img4@2x.png

 src/assets/addOrder/img5@2x.png

 src/router/index.js

@@ -34,7 +34,17 @@
          hide: true,
          privilege: 'login'
        },
        component: () => import("../view/login"),
        component: () => import("../view/Login"),
      },
      {
        path: "/addOrder",
        meta: {
          title: "添加订单",
          oneself: true,
          hide: true,
          privilege: 'addOrder'
        },
        component: () => import("../view/addOrder"),
      },
    ]
  }

 src/view/addOrder.vue

New file
@@ -0,0 +1,1021 @@
<template>
  <div class="contanier">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <!-- card-one -->
      <el-card class="">
        <div slot="header" class="clearfix">
          <span class="clearfix_text">添加订单</span>
          <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
        </div>
        <div class="box-cards">
          <div class="flex">
            
            <el-form-item label="" class="label1" prop="container" label-width="0">
              <div class="flex">
                <div class="box">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">集装箱号：</div>
                  </div>
                  <div class="box_text2">Contain#</div>
                </div>
                <el-input v-model="form.container" placeholder="请输入"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="" class="label2" prop="bol" label-width="0px">
              <div class="flex">
                <div class="box1">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">提单号：</div>
                  </div>
                  <div class="box_text2">BOLI#</div>
                </div>
                <el-input v-model="form.bol" placeholder="请输入"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="" class="label3" prop="cargoType" label-width="0px">
              <div class="flex">
                <div class="box3">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">货柜类型：</div>
                  </div>
                  <div class="box_text2">Cargo Type</div>
                </div>
                <el-select v-model="form.cargoType" clearable placeholder="请选择" prop="type">
                  <el-option :label="item.label" :value="item.value" v-for="item in options"
                    :key="item.value"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="" class="label1" prop="carrier" label-width="0px">
              <div class="flex">
                <div class="box">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">船司：</div>
                  </div>
                  <div class="box_text2">Carrier</div>
                </div>
                <el-select v-model="form.carrier" clearable placeholder="请选择">
                  <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                    :key="item.value"></el-option>
                </el-select>
              </div>
            </el-form-item>

            <el-form-item label="" class="label2" prop="vesselAndVoyage" label-width="0px">
              <div class="flex">
                <div class="box1">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">航名航次：</div>
                  </div>
                  <div class="box_text2">Vessel & Voyage</div>
                </div>
                <el-input v-model="form.vesselAndVoyage" placeholder="请输入"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="" class="label3" prop="pickupLocation" label-width="0px">
              <div class="flex">
                <div class="box3">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">提柜地：</div>
                  </div>
                  <div class="box_text2">Pickup Location</div>
                </div>
                <el-select v-model="form.pickupLocation" clearable placeholder="请选择">
                  <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                    :key="item.value"></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="" class="label4" prop="ETA" label-width="0">
              <div class="flex">
                <div class="box2">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">预计到达日期：</div>
                  </div>
                  <div class="box_text2">ETA</div>
                </div>
                <el-date-picker type="date" placeholder="选择日期" v-model="form.ETA" style="width: 100%"></el-date-picker>
              </div>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="" class="" prop="SOC" label-width="0">
              <div class="flex" style="align-items: center">
                <div class="box4">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">SOC：</div>
                  </div>
                </div>
                <el-radio-group text-color="#014099" fill="#014099" v-model="form.SOC">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="" class="" prop="DG" label-width="0">
              <div class="flex" style="align-items: center">
                <div class="box5">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">DG：</div>
                  </div>
                </div>
                <el-radio-group text-color="#014099" fill="#014099" v-model="form.DG">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="" class="" prop="overweight" label-width="0">
              <div class="flex" style="align-items: center">
                <div class="box6">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">是否超重：</div>
                  </div>
                  <div class="box_text1 mr-14">Over Weight</div>
                </div>
                <el-radio-group text-color="#014099" fill="#014099" v-model="form.overweight">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="" class="" prop="customsInspection" label-width="0">
              <div class="flex" style="align-items: center">
                <div class="box7">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">是否查验：</div>
                  </div>
                  <div class="box_text1">Customs Inspection</div>
                </div>
                <el-radio-group text-color="#014099" fill="#014099" v-model="form.customsInspection">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="" class="" prop="dropOrLive" label-width="0">
              <div class="flex" style="align-items: center">
                <div class="box8">
                  <div class="flex">
                    <div class="box_text1">DROP/LIVE：</div>
                  </div>
                </div>
                <el-radio-group text-color="#014099" fill="#014099" v-model="form.dropOrLive">
                  <el-radio label="Drop"></el-radio>
                  <el-radio label="Live"></el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="bg">
          <span>如果是OT/FR等特种柜型，请提供具体包装明细</span>
          <span>Pls supply detailed packing list for an OT or FR conainer</span>
        </div>
      </el-card>
      <!-- card-two -->

      <el-card class="box-card mt-13">
        <div slot="header" class="clearfix">
          <span class="clearfix_text">货柜信息 ｜ Container Det</span>
        </div>
        <div class="box-cardes">
          <div class="flex">
            <el-form-item label="" class="label1" prop="clientOrder" label-width="0">
              <div class="flex">
                <div class="box9">
                  <div class="flex">
                    <!-- <div class="red">*</div> -->
                    <div class="box_text1">客户单号：</div>
                  </div>
                  <div class="box_text2">Clinet Order#</div>
                </div>
                <el-input v-model="form.clientOrder" placeholder="请输入"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="" class="label2" prop="product" label-width="0px">
              <div class="flex">
                <div class="box1">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">品名：</div>
                  </div>
                  <div class="box_text2">Product</div>
                </div>
                <el-input v-model="form.product" placeholder="请输入"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="" class="label3" prop="QTY" label-width="0px">
              <div class="flex">
                <div class="box3">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">包装数量：</div>
                  </div>
                  <div class="box_text2">QTY</div>
                </div>
                <el-input v-model="form.QTY" placeholder="请输入"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="" class="label4" prop="ETA" label-width="0">
              <div class="flex">
                <div class="box2">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">单位选择：</div>
                  </div>
                  <div class="box_text2">QTY Unit</div>
                </div>
                <el-select v-model="form.carrier" clearable placeholder="请选择">
                  <el-option :label="item.label" :value="item.value" v-for="item in optionsUs"
                    :key="item.value"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="" class="label1" prop="weight" label-width="0px">
              <div class="flex">
                <div class="box9">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">重量：</div>
                  </div>
                  <div class="box_text2">Weight</div>
                </div>
                <el-input v-model="form.weight" placeholder="请输入"></el-input>
              </div>
            </el-form-item>

            <el-form-item label="" class="label2" prop="poundWeight" label-width="0px">
              <div class="flex">
                <div class="box1">
                  <div class="flex">
                    <!-- <div class="red">*</div> -->
                    <div class="box_text1">≈重量(磅)：</div>
                  </div>
                  <div class="box_text2">≈Pound weight</div>
                </div>
                <el-input v-model="form.poundWeight" placeholder="请输入"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="" class="label3" prop="volume" label-width="0px">
              <div class="flex">
                <div class="box3">
                  <div class="flex">
                    <div class="red">*</div>
                    <div class="box_text1">体积：</div>
                  </div>
                  <div class="box_text2">Voume</div>
                </div>
                <el-input v-model="form.volume" placeholder="请输入"></el-input>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-card>
      <!-- card-three -->

      <el-card class="box-card mt-13">
        <div slot="header" class="clearfix">
          <span class="clearfix_text">收件人信息 ｜ Consignee</span>
          <div class="clearfix_btn">
            <img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
            <span>选择已添加信息</span>
          </div>
        </div>
        <div class="">
          <div class="box-cards">
            <div class="flex">
              <el-form-item label="" class="label1" prop="contact" label-width="0">
                <div class="flex">
                  <div class="box">
                    <div class="flex">
                      <!-- <div class="red">*</div> -->
                      <div class="box_text1">收件人：</div>
                    </div>
                    <div class="box_text2">Contact</div>
                  </div>
                  <el-input v-model="form.contact" placeholder="请输入"></el-input>
                </div>
              </el-form-item>

              <el-form-item label="" class="label2" prop="consigneeCompany" label-width="0px">
                <div class="flex">
                  <div class="box1">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">收件人公司：</div>
                    </div>
                    <div class="box_text2">Consignee-Company</div>
                  </div>
                  <el-input v-model="form.consigneeCompany" placeholder="请输入"></el-input>
                </div>
              </el-form-item>

              <el-form-item label="" class="label3" prop="post" label-width="0px">
                <div class="flex">
                  <div class="box3">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">目的地邮编：</div>
                    </div>
                    <div class="box_text2">Post</div>
                  </div>
                  <el-select v-model="form.post" clearable placeholder="请选择" prop="type">
                    <el-option :label="item.label" :value="item.value" v-for="item in options"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="" class="label4" prop="address" label-width="0">
                <div class="flex">
                  <div class="box2">
                    <div class="flex">
                      <div class="red">*</div>
                      <div class="box_text1">地址：</div>
                    </div>
                    <div class="box_text2">Address</div>
                  </div>
                  <el-input v-model="form.address" placeholder="请输入"></el-input>
                </div>
              </el-form-item>
            </div>
            <div class="flex">
              <div class="tip_box">

                <el-form-item label="" class="label5" prop="tel" label-width="0px">
                  <div class="flex">
                    <div class="box">
                      <div class="flex">
                        <!-- <div class="red">*</div> -->
                        <div class="box_text1">联系电话：</div>
                      </div>
                      <div class="box_text2">Tel</div>
                    </div>
                    <el-select v-model="form.tel" clearable placeholder="请选择">
                      <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                        :key="item.value"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <div class="tip">
                  <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                  <span>联系电话和邮箱至少填写其中一项</span>
                </div>
              </div>
              <div class="tip_box">
                <el-form-item label="" class="label5" prop="email" label-width="0px">
                  <div class="flex">
                    <div class="box1">
                      <div class="flex">
                        <!-- <div class="red">*</div> -->
                        <div class="box_text1">邮箱：</div>
                      </div>
                      <div class="box_text2">Email</div>
                    </div>
                    <el-input v-model="form.email" placeholder="请输入"></el-input>
                  </div>
                </el-form-item>
                <div class="tip">
                  <img class="tip-img" src="@/assets/addOrder/img1@2x.png" alt="" />
                  <span>联系电话和邮箱至少填写其中一项</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card mt-13">
        <div slot="header" class="clearfix">
          <span class="clearfix_text">附件</span>
        </div>
        <div class="box-carde">
          <div class="flex">
            <el-form-item label="Do：" class="mr-129" prop="DOFileUrl" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="PU#：" class="mr-129" prop="PUFileUrl" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
              <el-input v-model="form.PUExplain" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <div class="upload_btn">+上传附件</div>
              </el-upload>
            </el-form-item>
          </div>
        </div>
      </el-card>
      <div class="btn">
        <div class="btn_close">关闭</div>
        <div class="btn_comfirm" @click="submitForm('form')">确认</div>
      </div>
    </el-form>
  </div>
</template>

<script>
export 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: '',//其他附件
      },
      // 导入参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/common/upload"
      },
      options: [
        {
          value: "20GP",
          label: "20GP",
        },
        {
          value: "40GP",
          label: "40GP",
        },
        {
          value: "40HQ",
          label: "40HQ",
        },
        {
          value: "45HQ",
          label: "45HQ",
        },
        {
          value: "40FR",
          label: "40FR",
        },
        {
          value: "40OT",
          label: "40OT",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      optionsSc: [
        {
          value: "COSCO",
          label: "COSCO",
        },
        {
          value: "OOCL",
          label: "OOCL",
        },
        {
          value: "ONE",
          label: "ONE",
        },
        {
          value: "CMA",
          label: "CMA",
        },
        {
          value: "CGM",
          label: "CGM",
        },
      ],
      optionsCpa: [
        {
          value: "COSCO",
          label: "COSCO",
        },
        {
          value: "OOCL",
          label: "OOCL",
        },
        {
          value: "ONE",
          label: "ONE",
        },
        {
          value: "CMA",
          label: "CMA",
        },
        {
          value: "CGM",
          label: "CGM",
        },
      ],
      optionsUs: [
        {
          value: "carton",
          label: "carton",
        },
        {
          value: "pailet",
          label: "pailet",
        },
        {
          value: "case",
          label: "case",
        },
        {
          value: "others",
          label: "others",
        },
      ],
      rules: {
        container: [{ required: true, message: "请输入", trigger: "blur" }],
        bol: [{ required: true, message: "请输入", trigger: "blur" }],
        cargoType: [{ required: true, message: "请选择", trigger: "change" }],
        carrier: [{ required: true, message: "请选择", trigger: "change" }],
        vesselAndVoyage: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        pickupLocation: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        ETA: [{ required: true, message: "请选择", trigger: "change" }],
        SOC: [{ required: true, message: "请选择", trigger: "change" }],
        DG: [{ required: true, message: "请选择", trigger: "change" }],
        overweight: [{ required: true, message: "请选择", trigger: "change" }],
        customsInspection: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        product: [{ required: true, message: "请输入", trigger: "blur" }],
        QTY: [{ required: true, message: "请输入", trigger: "blur" }],
        weight: [{ required: true, message: "请输入", trigger: "blur" }],
        volume: [{ required: true, message: "请输入", trigger: "blur" }],
        consigneeCompany: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        post: [{ required: true, message: "请输入", trigger: "blur" }],
        address: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box-cards {
  padding: 23px 0 0 24px;
}

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

.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;
}

.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;
}

.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;
  }
}

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

.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;
}

.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;
}

.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;
}

.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>