kd-aiot-frontend-wms/src/views/warehouseManagement/stockManagement/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <PageHeader title="入库单详情"> </PageHeader>
      </div>
      <div>
        <!-- <StatusStep :activeCode="infoData.verifyStatus" /> -->
        <div class="stepsStatus">
          <el-steps :active="active" align-center>
            <el-step title="创建"></el-step>
            <el-step title="待审核"></el-step>
            <el-step :title="stepsTitle" :status="stepsStatus"></el-step>
          </el-steps>
        </div>
        <div class="content-detail">
          <header-title title="基本信息" size="16px"></header-title>

          <div class="mt20">
            <el-form label-width="120px">
              <el-col :span="8">
                <el-form-item label="入库单:">
                  <span>{{ infoData.bizNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库物品类型:">
                  <span>{{ handleAssetType(extInfo.assetType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库场景:">
                  <span>{{ getSceneState(infoData.bizType) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="销售订单:">
                  <span>{{ extInfo.documentSource }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权属部门:">
                  <span>{{ extInfo.deptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库登记人:">
                  <span>{{ extInfo.createUserName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="创建时间:">
                  <span>{{ infoData.createTime }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="入库时间:">
                  <span>{{ infoData.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态:">
                  <span>{{ stepsTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核人:">
                  <span>{{ infoData.verifyName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="infoData.bizType == 2">
                <el-form-item label="客户:">
                  <span>{{ infoData.clientName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8" v-if="infoData.bizType == 2">
                <el-form-item label="客户代码:">
                  <span>{{ infoData.clientCode }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8" v-if="infoData.bizType == 2">
                <el-form-item label="供应商:">
                  <span>{{ extInfo.supplierName }}</span>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8" v-if="infoData.bizType != 2">
                <el-form-item label="供应商代码:">
                  <span>{{ extInfo.supplierCode }}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="送货人:">
                  <span>{{ infoData.fromUser }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="送货人联系方式:">
                  <span>{{ extInfo.deliveryPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="附件:">
                  <el-link
                    type="primary"
                    v-for="item in infoData.qualityFile"
                    @click="download(item)"
                    :key="item.name"
                    >{{ item.name }}</el-link
                  >
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <span>{{ infoData.remark }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
        </div>
        <div class="content-detail mt20">
          <header-title title="物品信息" size="16px"></header-title>

          <div class="mt20">
            <div class="mt10">
              <el-table
                ref="multipleTable"
                :data="warehousingMaterialList"
                tooltip-effect="dark"
                :max-height="300"
                :key="infoData.assetType"
                style="width: 100%"
                stripe
                :header-cell-style="rowClass"
              >
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column
                  label="编码"
                  prop="categoryCode"
                  align="center"
                  width="150"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  label="名称"
                  align="center"
                  width="170"
                  prop="name"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  v-for="(item, index) in tableHeader"
                  :key="index"
                  align="center"
                  :label="item.label"
                  :width="item.width"
                  :prop="item.prop"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="{ row }">
                    <template v-if="item.formatter">{{
                      item.formatter(row)
                    }}</template>
                    <template v-else>{{ row[item.prop] }}</template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="批号"
                  prop="manualBatchNo"
                  width="100"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  v-if="clientEnvironmentId != 2"
                  label="批次号"
                  prop="batchNo"
                  width="70"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="最小包装单元"
                  align="center"
                  prop="minPackingCount"
                  width="300"
                >
                  <!-- <el-table-column label="" prop="measurementUnit" width="100">
                    <template slot-scope="{ row, $index }">
                      {{ row.minPackingCount }}
                    </template>
                  </el-table-column> -->
                  <el-table-column
                    label=""
                    prop="measurementUnit"
                    align="center"
                    width="110"
                  >
                    <template slot-scope="{ row, $index }">
                      {{ row.minPackingCount }} {{ row.measuringUnit }} /{{
                        row.packingUnit
                      }}
                    </template>
                  </el-table-column>
                </el-table-column>

                <el-table-column
                  label="包装数量"
                  prop="packingCount"
                  width="100"
                  align="center"
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.packingCount }} {{ row.packingUnit }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="计量数量"
                  prop="batchNo"
                  width="100"
                  align="center"
                >
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.minPackingCount * row.packingCount }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="计量单位"
                  prop="batchNo"
                  width="100"
                  align="center"
                >
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.measuringUnit }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="重量"
                  prop="count"
                  width="100"
                  align="center"
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.weight }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="重量单位"
                  prop="count"
                  width="100"
                  align="center"
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.weightUnit }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="单价"
                  prop="univalence"
                  width="100"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <template>
                      {{ row.price ? row.price : '-' + '元' }}/{{
                        row.measuringUnit
                      }}
                      <!-- {{ { yuan: '元', wanyuan: '万元' }[row.univalenceUnit] }} -->
                    </template>
                  </template>
                </el-table-column>

                <el-table-column
                  label="金额"
                  align="center"
                  prop="contentImage"
                  :show-overflow-tooltip="true"
                  width="100"
                >
                  <template slot-scope="{ row, $index }">
                    <!-- // calcSum(
                      //   row.outInNum,
                      //   row.univalenceUnit,
                      //   row.univalence,
                      //   row
                      // ) -->
                    {{ row.totalMoney ? row.totalMoney : 0 }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="货位"
                  prop="warehouseName"
                  width="200"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="{ row, $index }">
                    {{ row.position }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="mt20">
          <!-- =={{ getDictValue('类型用途', infoData.assetType) }} -->
          <!-- ${handleAssetType(extInfo.assetType)} -->
          <header-title :title="`包装明细`" size="16px"></header-title>

          <el-table
            ref="multipleTable"
            :data="showMaterialCodeReqList"
            tooltip-effect="dark"
            :max-height="300"
            :row-class-name="tableRowClassName"
            :header-cell-style="rowClass"
            style="width: 100%"
            stripe
            v-el-table-infinite-scroll="wrapHandleScroll"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="编码"
              prop="categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="name"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="批号" prop="manualBatchNo" width="100">
            </el-table-column>
            <el-table-column
              v-if="clientEnvironmentId != 2"
              label="批次号"
              prop="batchNo"
            ></el-table-column>
            <el-table-column
              label="发货条码"
              prop="barcodes"
              width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装编码"
              prop="code"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="packingCount"
              width="80"
            ></el-table-column>
            <el-table-column
              label="包装单位"
              prop="packingUnit"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="minPackingCount"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="measuringUnit"
            ></el-table-column>
            <el-table-column label="物料代号" prop="materielCode" width="130">
              <template slot-scope="{ row }">
                {{ row.materielCode }}
              </template>
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
              <template slot-scope="{ row }">
                {{ row.clientCode }}
              </template>
            </el-table-column>
            <!-- v-if="infoData.bizType == 1" -->
            <el-table-column label="刻码" prop="engrave">
              <template slot-scope="{ row }">
                {{ row.engrave }}
              </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight">
              <template slot-scope="{ row }">
                {{ row.weight }}
              </template>
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUtil">
              <template slot-scope="{ row }">
                {{ row.weightUtil }}
              </template>
            </el-table-column>
            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <span v-if="row.result == 0">合格</span>
                <span v-else-if="row.result == 1">不合格</span>
                <span v-else-if="row.result == ''"></span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span v-if="row.status == 0">未检</span>
                <span v-else-if="row.status == 1">已检</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="日期" prop="createTime" width="200">
              <template slot="header" slot-scope="scope">
                {{ dateTypes == 1 ? '采购日期' : '生产日期' }}
              </template>
              <template slot-scope="{ row }">
                {{ row.createTime }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt20">
          <header-title :title="`物料明细`" size="16px"> </header-title>
          <el-table
            ref="multipleTable"
            :data="showResultArray"
            tooltip-effect="dark"
            :max-height="300"
            :row-class-name="tableRowClassName"
            :header-cell-style="rowClass"
            style="width: 100%"
            stripe
            height="300px"
            v-el-table-infinite-scroll="materielHandleScroll"
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="编码"
              prop="assetCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="assetName"
              width="200"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="批号" prop="manualBatchNo" width="100">
            </el-table-column>
            <el-table-column
              v-if="clientEnvironmentId != 2"
              label="批次号"
              prop="batchNo"
              width="80"
            ></el-table-column>
            <el-table-column
              label="物料编码"
              prop="no"
              width="200"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="发货条码"
              prop="barcodes"
              width="80"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="minPackingCount"
              width="90"
            ></el-table-column>
            <el-table-column
              width="80"
              label="计量单位"
              prop="measuringUnit"
            ></el-table-column>
            <el-table-column label="物料代号" prop="materielCode" width="130">
              <template slot-scope="{ row }">
                {{ row.materielCode }}
              </template>
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
              <template slot-scope="{ row }">
                {{ row.clientCode }}
              </template>
            </el-table-column>
            <!-- v-if="infoData.bizType == 1" -->
            <el-table-column label="刻码" prop="engrave">
              <template slot-scope="{ row }">
                {{ row.engrave }}
              </template>
            </el-table-column>
            <el-table-column width="100" label="重量" prop="weight">
              <template slot-scope="{ row }">
                {{ row.weight }}
              </template>
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUnit">
              <template slot-scope="{ row }">
                {{ row.weightUnit }}
              </template>
            </el-table-column>
            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <span>
                  <span v-if="row.result == 0">合格</span>
                  <span v-else-if="row.result == 1">不合格</span>
                  <span v-else-if="row.result == ''"></span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span>
                  <span v-if="row.status == 0">未检</span>
                  <span v-if="row.status == 1">已检</span>
                  <span v-if="row.status == ''"></span>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
  import { getFile } from '@/api/system/file/index.js';
  // import { getInfo } from '@/api/stockManagement';
  import PageHeader from '@/components/PageHeader';
  import StatusStep from '@/components/StatusStep/common.vue';
  import { fileSystemDownload } from '@/utils';
  import outin from '@/api/warehouseManagement/outin';
  import { getTreeByPid, allCategoryLevel } from '@/api/classifyManage';

  import {
    materialType,
    warehousingType,
    useDict,
    useDictLabel,
    inputStatus,
    emergencyState,
    sceneState
  } from '@/utils/dict/index';
  import { auditStatus } from '@/utils/dict/common';
  // import { batchBarPrint } from '@/api/ledgerAssets/booksList';
  import { tableHeader } from '../common';
  import { mapGetters, mapActions } from 'vuex';
  export default {
    components: { StatusStep, PageHeader },
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data() {
      return {
        dateTypes: 1,
        pageSize: 20,
        wrapPageNum: 1,
        materielPageNum: 1,
        showMaterialCodeReqList: [],
        materialCodeReqList: [],
        showResultArray: [],
        resultArray: [],
        extInfo: {},
        codeList: [],
        auditStatus,
        infoData: {},
        warehousingMaterialList: [],
        tableData2: [],
        activeName: 'a',
        num: 1,
        openWindows: false, //打印弹窗
        barCodeConfig: [],
        stepsTitle: '已完成',
        stepsStatus: 'success',
        active: 0,

        // 条码类型枚举
        codeTypeObj: {
          生产设备: 'EQUIPMENT',
          舟皿: '',
          周转车: 'TURNOVER_CAR',
          模具: 'MODE',
          库位: 'STORE_LOCAL',
          混合料: 'MIX_MATER',
          混炼料: 'MIXING_MATER',
          破碎料: 'CRUSH_MATER',
          货架: 'GOODS_SHELF',
          返回料: 'RETURN_MATER',
          返工料: 'REWORK_MATER',
          备品备件: 'SPARE_PART',
          车削料: 'LATHE_MATER',
          风管料: 'WIND_PIPE_MATER',
          地面料: 'GROUND_MATER'
        }
      };
    },
    watch: {
      'infoData.verifyStatus': {
        immediate: true,
        handler(val) {
          if (val == 0) {
            this.active = 1;
            this.stepsTitle = '未审核';
            this.stepsStatus = 'wait';
          } else if (val == 1) {
            this.active = 2;
            this.stepsTitle = '审核中';
            this.stepsStatus = 'process';
          } else if (val == 2) {
            this.active = 2;
            this.stepsTitle = '审核通过';
            this.stepsStatus = 'success';
          } else if (val == 3) {
            this.active = 2;
            this.stepsTitle = '驳回';
            this.stepsStatus = 'error';
          }
        }
      }
    },
    computed: {
      ...mapGetters(['getDictValue']),
      tableHeader() {
        return tableHeader(this.infoData.assetType);
      },
      emergencyState() {
        return useDict(emergencyState)(this.infoData.emergencyState);
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
      // 条码信息
      // materialCodeReqList() {
      //   return this.warehousingMaterialList.warehouseLedgerDetails;
      // }
    },
    created() {
      this.requestDict('类型用途');
      this._getInfo();
    },
    methods: {
      wrapHandleScroll() {
        console.log('---------wrapHandleScroll------------');
        if (
          this.showMaterialCodeReqList.length < this.materialCodeReqList.length
        ) {
          if (this.materialCodeReqList.length > this.pageSize) {
            this.wrapPageNum += 1;
          }
          this.wrapFetchData();
        }
      },
      wrapFetchData() {
        const start = (this.wrapPageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showMaterialCodeReqList = this.showMaterialCodeReqList.concat(
          this.materialCodeReqList.slice(start, end)
        );
        console.log(start, end);
        console.log(this.materialCodeReqList);
        console.log(this.showMaterialCodeReqList);
      },
      materielHandleScroll() {
        console.log('---------materielHandleScroll------------');
        if (this.showResultArray.length < this.resultArray.length) {
          if (this.resultArray.length > this.pageSize) {
            this.materielPageNum += 1;
          }
          this.materielFetchData();
        }
      },
      materielFetchData() {
        const start = (this.materielPageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showResultArray = this.showResultArray.concat(
          this.resultArray.slice(start, end)
        );
        console.log(this.showResultArray);
      },
      ...mapActions('dict', ['requestDict']),
      getAuditStatus: useDictLabel(auditStatus),
      getMaterialType: useDictLabel(materialType),
      getInputStatus: useDictLabel(inputStatus),
      getSceneState: useDictLabel(sceneState),
      handleRowUnit(row) {
        if (this.extInfo.assetType == 1) {
          console.log(row);
          return row.weightUnit;
        } else if (this.extInfo.assetType == 4) {
          return row.measuringUnit;
        } else {
          return row.measuringUnit;
        }
      },
      handleAssetType(r) {
        const code = this.codeList.find((item) => item.dictCode == r);
        return code?.dictValue;
      },
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        if (row.result == 1) {
          return 'warning-row';
        } else {
          return '';
        }
      },
      rowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1) {
          return {
            display: 'none',
            background: '#EEEEEE',
            border: 'none'
          };
        }
        return { background: '#0000', border: 'none' };
      },
      async _getInfo() {
        const res = await outin.getById(this.$route.query.id);
        console.log('===', res);
        if (res) {
          this.infoData = res;
          this.extInfo = res.extInfo;
          this.warehousingMaterialList = res.outInDetailVOList;
          const arr = [];
          for (const key in this.warehousingMaterialList) {
            for (const k in this.warehousingMaterialList[key]
              .outInDetailRecordVOList) {
              arr.push({
                ...this.warehousingMaterialList[key].outInDetailRecordVOList[k],
                weightUnit: this.warehousingMaterialList[key].weightUnit
              });
            }
          }
          this.dateTypes = arr[0].dateType;
          this.materialCodeReqList = arr;
          let iArr = [];
          arr.forEach((item) => {
            item.outInDetailRecordMaterialDetailVOList.forEach((ele) => {
              iArr.push({ ...ele });
            });
          });
          this.resultArray = iArr;
          console.log(this.materialCodeReqList);
          console.log(this.resultArray);
          this.wrapFetchData();
          this.materielFetchData();
        }
        // const { data } = await getTreeByPid(0);
        const { data } = await allCategoryLevel();
        this.codeList = data.map((item) => {
          return { dictCode: item.id, dictValue: item.name };
        });
      },
      calcSum(a, b, c, row) {
        if (
          (Number.isNaN(+a) && a !== '') ||
          (Number.isNaN(+b) && b !== '') ||
          (Number.isNaN(+c) && c !== '')
        ) {
          return '';
        }

        return a * b * c + { yuan: '元', wanyuan: '万元' }[row.univalenceUnit];
      },
      download(row) {
        if (row.storePath) {
          getFile({ objectName: row.storePath }, row.name);
        }
      },
      selectActive(num) {
        this.num = num;
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .warning-row {
    color: red;
  }
  ::v-deep .page-title {
    border-bottom: none;
  }
  ::v-deep .page-title-div {
    width: 100%;
  }
  .stepsStatus {
    width: 40%;
    margin: 0 auto;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .p20 {
    padding: 20px;
  }
  .flex {
    display: flex;
  }
  .title {
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    span {
      font-size: 16px;
    }
    .col {
      padding-left: 40px;
      font-size: 14px;
      color: #aaaaaa;
    }
  }
  .degree {
    margin-right: 10px;
    padding: 0px 15px;
    color: #fff;
    font-size: 13px;
    line-height: 23px;
    border-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      width: 5px;
      height: 5px;
      border-radius: 100%;
      margin-right: 6px;
      background-color: #fff;
    }
  }
  .red {
    background-color: rgb(163, 0, 20);
  }
  .blue {
    background-color: #1989fa;
  }
  .createdInfo {
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .mt40 {
    margin-top: 40px;
  }

  .custSteps {
    margin-top: 20px;
    margin-left: 70px;
    .box {
      width: 158px;
      border: 1px solid #ccc;
      padding: 10px;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-between;
      font-size: 12px;
      color: #9e9e9e;
      .x {
        width: 20px;
        height: 15px;
        margin-right: 5px;
      }
      .q {
        background-color: #d0e4d5;
      }
      .b {
        background-color: #1989fa;
      }
      .g {
        background-color: #157a2c;
      }
      .r {
        background-color: #a30014;
      }
      .a {
        align-items: center;
        margin-bottom: 10px;
      }
      .mr10 {
        margin-right: 10px;
      }
      .mb0 {
        margin-bottom: 0;
      }
    }
    .stepsInfo {
      // flex: 1;
      width: 483px;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .executor {
    font-size: 14px;
    .col {
      color: #6e6e6e;
      padding-right: 10px;
    }
  }
  .result {
    justify-content: space-around;
  }
  .mr20 {
    margin-right: 20px;
  }
  .details {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .customSteps {
    margin-top: 40px;
    font-size: 14px;
    margin-left: 80px;
    .time {
      font-size: 12px;
      color: #6e6e6e;
      margin-right: 20px;
      position: relative;
      &::after {
        content: '';
        width: 1px;
        height: 100%;
        background-color: #157a2c;
        position: absolute;
        right: -26px;
      }
    }
    .flex:last-child {
      .time {
        &::after {
          display: none;
        }
      }
    }
    .round {
      margin-right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #157a2c;
      position: relative;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 100%;
        transform: translate(-2px, -2px);
      }
    }
    .text {
      .info {
        margin-top: 10px;
        width: 955px;
        background-color: #f0f3f3;
        overflow: hidden;
        padding: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .switch_left li {
    border-right: 1px solid rgba(222, 222, 222, 1);
    border-left: 1px solid rgba(222, 222, 222, 1);
  }
</style>