template-parking-h5/src/pages/parkingFee/components/officeBlue/parkingReceipt/parkingHeaderDetail.vue

<template>
  <scroll-view class="scroll-Y" scroll-y>
    <div class="part" v-if="header.invoiceTitleType === 'COMPANY'">
      <div class="part-item">
        <span class="part-item-key">抬头类型</span>
        <div class="part-item-value">单位</div>
      </div>
      <div class="part-item">
        <span class="part-item-key">抬头名称</span>
        <span class="part-item-value">{{ header.titleName }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">公司税号</span>
        <span class="part-item-value">{{ header.taxNo }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">公司地址</span>
        <span class="part-item-value">{{ header.companyAddress }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">公司电话</span>
        <span class="part-item-value">{{ header.companyTel }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">开户银行</span>
        <span class="part-item-value">{{ header.depositBank }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">开户账户</span>
        <span class="part-item-value">{{ header.depositAccount }}</span>
      </div>
    </div>
    <div class="part" v-else>
      <div class="part-item">
        <span class="part-item-key">抬头类型</span>
        <div class="part-item-value">个人/非企业单位</div>
      </div>
      <div class="part-item">
        <span class="part-item-key">抬头名称</span>
        <span class="part-item-value">{{ header.titleName }}</span>
      </div>
    </div>
  </scroll-view>
</template>

<script>
import parkingHeaderDetailJs from '../../../mixins/parkingReceipt/parkingHeaderDetail';

export default {
  mixins: [parkingHeaderDetailJs],
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f7ff;
  padding: 20px;
  box-sizing: border-box;

  .part {
    padding: 0 30px;
    background: #fafbff;
    border-radius: 4px;
    border: 1px solid #d8dae0;
    padding-top: 30px;

    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 30px;
      box-sizing: border-box;

      .part-item-key {
        font-size: 30px;
        font-weight: 400;
        color: #999999;
        line-height: 42px;
      }

      .part-item-value {
        color: #6f6f70;
        text-align: right;
        display: flex;
        align-items: center;
        font-size: 30px;
        font-weight: 400;
        color: #333333;
        line-height: 42px;

        > img {
          width: 30px;
        }
      }
    }
  }
}
</style>