zhywpt-sp/subpackage/orders/order-cardQuota-progress.vue

<template>
  <!-- 	<navBar title="补卡额申请"></navBar> -->
  <view class="cardQuota">
    <view class="details">
      <view class="head">
        <view class="head-row" style="margin-bottom: 30rpx">
          <view class="">
            流水单号：<text style="color: #333333">MA89200010</text>
          </view>
          <view> 交易金额 </view>
        </view>
        <view class="head-row">
          <view class="">
            ETC卡号：<text style="color: #333333">0110200001</text>
          </view>
          <view class="price">
            ￥<text style="font-size: 36rpx">104</text>.00
          </view>
        </view>
      </view>
      <view class="content">
        <view class="">
          <view>贵阳西</view>
          <view>12:09</view>
          <text>2023-01-08</text>
        </view>
        <view class="">
          <view>XXXXX</view>
          <view>18:52</view>
          <text>2023-01-08</text>
        </view>
        <view class="icon-left">
          <text>粤A12345</text>
          <image :src="`${$imgUrl}order/arrowCard.png`" mode=""></image>
        </view>
      </view>
    </view>

    <view class="order-details">
      <view class="head">
        <view class=""> 售后单号：GZ92400001 </view>
        <text>审核中</text>
      </view>

      <view class="content">
        <view class="item">
          <text>业务类型：</text><text class="item-text">补卡额退费</text>
        </view>
        <view class="item">
          <text>补卡额：</text
          ><text class="item-text" style="color: #00b38b">12.00</text>
        </view>
        <view class="item">
          <text>创建时间：</text
          ><text class="item-text">2023-01-10 12:09:00</text>
        </view>
        <view class="item">
          <text>完成时间：</text
          ><text class="item-text">2023-01-10 12:09:00</text>
        </view>
        <view class="item">
          <text>不通过原因：</text
          ><text class="item-text">XXXXXXXXXXXXXXXXXXXX</text>
        </view>
        <view class="item">
          <text>业务员：</text><text class="item-text">XXX</text>
        </view>
        <view class="image-box">
          <view> </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import navBar from "@/pages/ETCcancellation/components/nav-bar.vue"
</script>

<style>
page {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss" scoped>
.cardQuota {
  width: 100%;
  height: 100%;
  background-color: #eef7f7;
  padding: 30rpx;

  .details {
    height: 338rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;

    .head {
      border-bottom: 1rpx solid #dcdcdc;
      padding: 30rpx;

      .head-row {
        display: flex;
        justify-content: space-between;

        view {
          font-size: 26rpx;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #999999;
        }

        .price {
          font-size: 25rpx;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    .content {
      display: flex;
      flex: 1;
      justify-content: space-between;
      padding: 20rpx 60rpx;
      line-height: 45rpx;
      position: relative;

      view {
        text-align: center;
        font-size: 30rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #333333;
      }

      text {
        font-size: 24rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #999999;
      }

      .icon-left {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 35rpx;
        text {
          font-size: 26rpx;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #666666;
        }

        image {
          width: 186rpx;
          height: 12rpx;
          display: block;
        }
      }
    }
  }

  .order-details {
    margin-top: 30rpx;
    // height: 680rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
    border-radius: 20rpx;

    .head {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #dcdcdc;

      view {
        font-size: 30rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #333333;
      }

      text {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #00b38b;
      }
    }

    .content {
      padding: 30rpx;

      .item {
        font-size: 26rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #999999;
        margin-bottom: 35rpx;

        .item-text {
          font-size: 26rpx;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #333333;
        }
      }

      .image-box {
        view {
          width: 161rpx;
          height: 161rpx;
          background: #f3f3f3;
          border: 1px solid #dcdcdc;
          border-radius: 6rpx;
        }
      }
    }
  }
}
</style>