components/pc/truck/detail.vue

<template>
  <el-dialog
    title="车辆管理 · 车辆详情"
    :visible.sync="isShow"
    width="60%"
    :append-to-body="true"
  >
    <div class="order-detail" v-show="true||detail.orderId != ''">
      <div flex="main:left" class="group">
        <div class="w100">车牌号：{{ detail.carNumber }}</div>
        <div>驾驶员：{{ driverList }}</div>
      </div>
      <div flex="main:left" class="group">
        <div class="w100">行驶证资料 上传行驶证</div>
        <div>号牌号码：鲁GJT00C</div>
        <div>车辆类型：{{ detail.typeName }}</div>
        <div class="w100">所有人：{{ detail.owner }}</div>
        <div class="w100">住址：{{ detail.address }}</div>
        <div>使用性质：{{ detail.useNature }}</div>
        <div>品牌型号：XX牌XXXXXXXXXXX</div>
        <div>车辆识别代号：{{ detail.vehicleIdCode }}</div>
        <div>发动机号码：{{ detail.engineNumber }}</div>
        <div>注册日期：{{ detail.registerDate }}</div>
        <div>发证日期：{{ detail.issueDate }}</div>
        <div>档案编号：{{ detail.fileNo }}</div>
        <div>核定载人数：{{ detail.approvedCapacity }}人</div>
        <div>总质量：{{ detail.grossMass }}</div>
        <div>整备质量：{{ detail.unladenMass }} kg</div>
        <div>核定载质量：{{ detail.approvedLoad }}</div>
        <div>外廓尺寸：{{ detail.overallDimension }}</div>
        <div>准牵引总质量：{{ detail.tractionMass }} kg</div>
        <div>检验记录（能源类型）：{{ detail.energyType }}</div>
        <div>
          <div>行驶证第一页：</div>
          <img :src="'https://dwx.auyen.com/'+detail.faceUrl"/>
        </div>
        <div>行驶证第二页：</div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { $truckFindById } from '@/service/strategy'
export default {
  name: 'truckDetail',
  data() {
    return {
      isShow: false,
      detail: {}
    }
  },
  methods: {
    open(args) {
      this.isShow = true
      $truckFindById({ id: args.truckId }).then(res => {
        this.detail = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.group {
  width: 100%;
  flex-wrap: wrap;
  border-bottom: 2px solid #eee;
  padding: 20px;
  padding-top: 10px;

  div {
    margin-top: 10px;
    width: 50%;

    // 偶数
    &:nth-child(even).hidden {
      width: 100%;
    }
  }

  span {
    margin-left: 10px;
  }

  div:empty,
  span:empty,
  .hidden {
    width: 1px;
    height: 0;
    margin: 0;
    padding: 0 !important;
    visibility: hidden;
  }

  .detail {
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #eee;
    flex-wrap: wrap;

    .rd {
      margin: 0;
      margin-bottom: 4px;
      & div {
        margin: 0;
      }
      .desc {
        font-size: 12px;
        margin-left: 10px;
      }
      // &::before {
      //   content: "|";
      //   margin: 0 10px;
      // }

      // &:first-child::before {
      //   content: "";
      //   margin: 0;
      // }
    }
  }

  .nm {
    margin: 0;
  }

  .w100 {
    width: 100%;
  }
}

.btn {
  margin-left: 10px;
  padding: 0;
}
</style>