<template>
  <view class="page-wrapper">
    <!-- 可滚动内容区 -->
    <view class="scroll-content">
      <!-- 列表区 -->
      <view class="records-list">
        <view v-for="(item, idx) in records" :key="idx" class="records-card">
          <view class="records-row">
            <view class="records-car">{{ item.car }}</view>
            <view class="records-fee">￥{{ item.fee }}</view>
          </view>
          <view class="records-time">{{ item.time }}<text v-if="idx === 0">——{{ item.time }}</text></view>
        </view>
      </view>
      <!-- 底部客服 -->
      <view class="records-service">
        <image src="/static/ic_payment_record_01.png" class="records-service-icon" />
        <text class="records-service-text">有疑问请联系客服</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [
        { car: '渝A·B8889', fee: '11.84', time: '2025-07-04 15:23:45' },
        { car: '渝A·B8889', fee: '11.84', time: '2025-07-04 15:23:45' },
        { car: '渝A·B8889', fee: '11.84', time: '2025-07-04 15:23:45' },
        { car: '渝A·B8889', fee: '11.84', time: '2025-07-04 15:23:45' },
        { car: '渝A·B8889', fee: '11.84', time: '2025-07-04 15:23:45' },
        { car: '渝A·B8889', fee: '11.84', time: '2025-07-04 15:23:45' }
      ]
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.page-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  overflow-y: auto;
  background: #f7f7f7;
  padding-bottom: 40rpx;
}
.records-navbar {
  width: 100%;
  height: 120rpx;
  padding-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
  flex-shrink: 0;
}
.records-back {
  position: absolute;
  left: 37rpx;
  width: 15rpx;
  height: 33rpx;
}
.records-title {
  font-size: 36rpx;
  color: #000;
  font-weight: 500;
}
.records-list {
  margin: 32rpx 0 0 0;
  padding: 40rpx 24rpx;
}
.records-card {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  padding: 32rpx 32rpx 24rpx 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  border: none;
}
.records-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.records-car {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}
.records-fee {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
}
.records-time {
  font-size: 24rpx;
  color: #888;
  margin-top: 2rpx;
}
.records-service {
  margin-top: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.records-service-icon {
  width: 26rpx;
  height: 29rpx;
  margin-right: 6rpx;
}
.records-service-text {
  color: #2186FF;
  font-size: 24rpx;
}
</style>