discounts-minapp/trip/expense/rules.vue

<template>
  <view class="expense">
    <view class="block">
      <view class="label">
        起步价
      </view>
      <view class="notice">
        实际计费以下单时为准，超出部分加收里程费。
      </view>
      <view class="item title ">
        <view class="label">
          00:00-07:00
        </view>
        <view class="value">
          18元（含3.0公里）
        </view>
      </view>
      <view class="item title ">
        <view class="label">
          07:00-21:00
        </view>
        <view class="value">
          18元（含3.0公里）
        </view>
      </view>
      <view class="item title border">
        <view class="label">
          21:00-24:00
        </view>
        <view class="value">
          18元（含3.0公里）
        </view>
      </view>

      <view class="label">
        里程费
      </view>
      <view class="notice">
        起步超出里程后开始计算。
      </view>
      <view class="item title ">
        <view class="label">
          00:00-24:00
        </view>
        <view class="value">
          2元（0.8公里）
        </view>
      </view>
      <view class="label">
        返程费
      </view>
      <view class="notice">
        总里程超过一定公里数后，加收返程费。
      </view>
      <view class="item title border">
        <view class="label">
          00:00-24:00
        </view>
        <view class="value">
          超过7公里，加收30%返程费
        </view>
      </view>
      <view class="label">
        等待费
      </view>
      <view class="notice">
        司机到达后开始计算等待费。
      </view>
      <view class="item title border">
        <view class="label">
          00:00-24:00
        </view>
        <view class="value">
          免费10分钟，超出后1元/分钟
        </view>
      </view>
      <view class="label">
        动态调价
      </view>
      <view class="notice border">
        当恶劣天气、节假日、高峰期、周围司机较少时，为了鼓励司机更快接单，平台会临时调价以保障您的出行。
      </view>

      <view class="item title border">

      </view>
      <view class="label">
        取消费
      </view>
      <view class="notice border">
        因您的责任导致订单取消时，您可能需要支付一定的费用，用于补偿代驾师傅的空驶成本。
      </view>

      <view class="item title border">
      </view>
<!--       
      <view class="notice">
        预付费用是根据实时交通情况、预估行驶里程、时间等因素计算
        得出，存在波动，仅供参考。（行程调整、路线修改、高速费等
        将影响最终价格）
      </view> -->
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {

  },
  onLoad() {

  },

}
</script>

<style lang="scss" scoped>
.expense {
  background: #f5f5f5;
  height: 100vh;
  padding-top: 20rpx;

  .block {
    margin-bottom: 20rpx;
    background: #fff;
    padding: 28rpx 34rpx;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #AAAAAA;
    font-size: 28rpx;
    line-height: 70rpx;
    position: relative;

    .jiantou {
      position: absolute;
      top: 50%;
      right: 0%;
      transform: translateY(-50%);
      width: 20rpx;
      height: 20rpx;
    }
  }

  .item.title {
    color: #222222;
  }

  .item.border {
    border-bottom: 2rpx solid #F0F0F0;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
  }

  .total {
    text-align: right;
    color: #222222;
    font-size: 28rpx;
    margin: 28rpx 0;

    .num {
      font-weight: bold;
      font-size: 36rpx;
    }
  }

  .notice {
    color: #AAAAAA;
    font-size: 24rpx;
  }

}
</style>