discounts-minapp/trip/expense/question.vue

<template>
  <view class="expense">
    <view class="block">
      <view class="item title ">
        <view class="label">
          为什么预估价格与实际价格不一样
        </view>
        <view class="value">

        </view>
      </view>

      <view class="notice">
        下单前的预估价格是根据单时的实时路况预估行驶里程，行驶时长计算得出，预估价格仅供参考。 实际支付价格是根据实际行驶里程，等候时长，下单区域，行驶时长等综合因素计算得出，是最终的订单价格。
      </view>
      <view class="item title ">
        <view class="label">
          路桥费、停车费、加油费等费用
        </view>
        <view class="value">

        </view>
      </view>

      <view class="notice">
        服务过程中产生的路桥费、停车费、加油费及其其他附加费由车主承担。 实际支付价格是根据实际行驶里程，等候时长，下单区域，行驶时长等综合因素计算得出，是最终的订单价格。
      </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>