supplier-dispatch-h5/src/views/index/supplierInfo.vue

<template>
  <div>
    <div class="nav_bar_bg status_danger">
      <template v-if="false">
        <div class="status_wrap">
          <img class="wait_icon" src="@/assets/supplier/waitIcon.png" alt="">
          <span class="wait_status">审批中</span>
        </div>
      </template>
      <template v-if="false">
        <div class="status_wrap">
          <img class="wait_icon" src="@/assets/supplier/successIcon.png" alt="">
          <span class="wait_status success_status">恭喜你，审核通过！</span>
        </div>
      </template>
      <template>
        <div class="status_wrap">
          <img class="wait_icon" src="@/assets/supplier/failIcon.png" alt="">
          <span class="wait_status danger_status">审核不通过</span>
        </div>
        <div class="danger_tip">
          不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道
        </div>
      </template>
    </div>
    <div class="supplier_content">
      <div class="credentials_info">
        <div class="common_title">证件照信息</div>
        <div class="credentials_wrap">
          <div class="credentials_item">
            <div class="credentials_title">1. 法人身份证正面</div>
            <img src="@/assets/supplier/idCardPerson.png" alt="">
          </div>
          <div class="credentials_item ml2">
            <div class="credentials_title">2. 法人身份证反面</div>
            <img src="@/assets/supplier/idCardPerson.png" alt="">
          </div>
          <div class="credentials_item ml2">
            <div class="credentials_title">3. 营业执照</div>
            <img src="@/assets/supplier/idCardPerson.png" alt="">
          </div>
        </div>
      </div>
      <div class="company_info">
        <div class="common_title">公司信息</div>
        <div class="info_wrap">
          <div class="info_item">
            <div class="label">服务商名称：</div>
            <div class="content">苏州速道汽车服务有限公司</div>
          </div>
          <div class="info_item">
            <div class="label">法人姓名：</div>
            <div class="content">666</div>
          </div>
          <div class="info_item">
            <div class="label">联系人姓名：</div>
            <div class="content">666</div>
          </div>
          <div class="info_item">
            <div class="label">联系电话：</div>
            <div class="content">666</div>
          </div>
          <div class="info_item">
            <div class="label">服务能力：</div>
            <div class="content service_color">拖车服务、抢修服务</div>
          </div>
          <div class="info_item">
            <div class="label">拖车数量：</div>
            <div class="content">23</div>
          </div>
          <div class="info_item">
            <div class="label">抢修车数量：</div>
            <div class="content">12</div>
          </div>
          <div class="info_item">
            <div class="label">服务区域：</div>
            <div class="content">省/市/区</div>
          </div>
        </div>
      </div>
      <div class="btn_wrap">
        修改信息
      </div>
    </div>
  </div>
</template>

<script>
  import {myMixins} from "@/utils/myMixins"
  export default {
    name: "supplierInfo",
    mixins:[myMixins],
    data() {
      return {
        id:'', //车辆Id
      }
    }
  }
</script>

<style scoped lang="scss">
  .nav_bar_bg {
    width: 100%;
    height: 125px;
    padding-top: 50px;
  }
  .status_wait {
    background: linear-gradient( 180deg, #FFE4C9 0%, rgba(255,248,233,0) 100%);
  }
  .status_success {
    background: linear-gradient( 180deg, #DAFFF8 0%, rgba(237,255,233,0) 100%);
  }
  .status_danger {
    background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
  }
  .status_wrap {
    display: flex;
    align-items: center;
    .wait_icon {
      width: 34px;
      height: 34px;
      margin-left: 31px;
    }
    .wait_status {
      color: #E69B0B;
      font-weight: 600;
      font-size: 16px;
      margin-left: 11px;
    }
    .success_status {
      color: #37B864;
    }
    .danger_status {
      color: #ED440C;
    }
  }
  .danger_tip {
    font-size: 12px;
    color: #FF553B;
    line-height: 18px;
    padding-left: 38px;
    padding-right: 23px;
    margin-top: 5px;
  }
  .supplier_content {
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
  }
  .common_title {
    font-weight: 500;
    font-size: 14px;
    color: rgba(50, 54, 67, 0.66);
    padding-left: 2px;
  }
  .common_title::after {
    content: '';
    display: block;
    width: 100%;
    border: 1px solid;
    margin-top: 10px;
    opacity: 0.16;
    border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
  }
  .credentials_wrap {
    display: flex;
    width: 100%;
    margin-top: 10px;
    .credentials_item {
      width: 32%;
      text-align: center;
      .credentials_title {
        font-size: 12px;
        color: #4A4A4A;
        padding: 10px 0;
      }
      img {
        width: 97px;
        height: 64px;
      }
    }
    .ml2 {
      margin-left: 2%;
    }
  }
  .company_info {
    margin-top: 20px;
    .company_wrap {
      .info_wrap {
        margin-top: 10px;
        .info_item {
          display: flex;
          padding: 10px 2px;
          .label {
            font-size: 13px;
            color: rgba(50, 54, 67, 0.6);
            width: 90px;
            flex-shrink: 0;
          }
          .content {
            font-size: 13px;
            color: #323643;
            /*font-weight: bold;*/
            flex: 1;
          }
          .service_color {
            color: rgba(230, 155, 11, 0.9);
          }
        }
      }
    }
  }
  .btn_wrap {
    width: calc(100% - 80px);
    height: 46px;
    position: fixed;
    bottom: 20px;
    left: 40px;
    background: #0E76F4;
    border-radius: 5px;
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    line-height: 46px;
  }
</style>