<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text class="active">消费</text>
	  <text>充值</text>
    </view>

    <!-- 主体内容 -->
    <scroll-view class="scroll-content" scroll-y>
      <view class="month-list">
		  <!-- 3月记录 -->
		  <view class="month-card">
		    <view class="month-header">
		      <text class="month-title">2025年3月</text>
		      <text class="month-total">总计：￥4.00</text>
		    </view>
		    
		    <view class="record-list">
		      <view 
		        class="record-item"
		        v-for="(item, index) in marchRecords"
		        :key="index"
		      >
		        <view class="item-left">
		          <text class="amount-label">消费</text>
				  <text class="time">{{item.time}}</text>
		        </view>
				<text class="amount">￥{{item.amount}}</text>
		      </view>
		    </view>
		  </view>
		  
		  <!-- 2月记录 -->
		  <view class="month-card">
		    <view class="month-header">
		      <text class="month-title">2025年2月</text>
		      <text class="month-total">总计：￥6.00</text>
		    </view>
		    
		    <view class="record-list">
		      <view 
		        class="record-item"
		        v-for="(item, index) in febRecords"
		        :key="index"
		      >
		        <view class="item-left">
		          <text class="amount-label">消费</text>
				  <text class="time">{{item.time}}</text>
		        </view>
		         <text class="amount">￥{{item.amount}}</text>
		      </view>
		    </view>
		  </view>
	  </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      marchRecords: [
        { amount: 1.00, time: '2025/03/04 08:00:29' },
        { amount: 1.00, time: '2025/03/03 18:42:57' },
        { amount: 1.00, time: '2025/03/03 18:16:31' },
        { amount: 1.00, time: '2025/03/03 08:06:20' }
      ],
      febRecords: [
        { amount: 1.00, time: '2025/02/28 20:36:46' },
        { amount: 1.00, time: '2025/02/28 07:55:45' }
      ]
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  padding: 30px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  > text {
    font-size: 16px;
	font-weight: bold;
	color: #333;
	margin: 0 10px;
  }
  .active{
	  color: #ff0000;
  }
}

.scroll-content {
  flex-grow: 1;
  .month-list{
	  padding: 0 15px;
  }
}

.month-card {
  margin-bottom: 15px;
  overflow: hidden;
}

.month-header {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  
  .month-title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  
  .month-total {
    font-size: 14px;
    color: #666;
  }
}

.record-list {
  padding: 0 15px;
  background-color: #fff;
  border-radius: 8px;
}

.record-item {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
	flex-direction: column;
  }
  
  .amount-label {
    font-size: 14px;
    color: #333;
	font-weight: bold;
  }
  
  .amount {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  
  .time {
    font-size: 12px;
    color: #999;
	margin-top: 5px;
  }
}
</style>
