/* 页面基础样式 */ page { background-color: #f5f7fb; box-sizing: border-box; } .order-list { width: 100%; } /* 月份分组样式 */ .month-group { } .month-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; font-size: 26rpx; color: #999999; } .month-title { } .month-expense { } /* 订单项样式 */ .order-item { background-color: #ffffff; padding: 30rpx; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); position: relative; border-bottom: 1rpx solid #eeeeee; } .order-left { flex: 1; display: flex; flex-direction: column; } /* 订单类型样式 */ .order-type { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; } .order-type1 { display: flex; align-items: center; } .order-icon { width: 40rpx; height: 40rpx; margin-right: 10rpx; } .order-type-text { font-size: 28rpx; color: #333333; margin-right: 15rpx; } .order-status { font-size: 24rpx; color: #333; } /* 停车场信息样式 */ .order-park-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; } .order-park-name { font-size: 28rpx; color: #333333; font-weight: bold; flex: 1; } .order-amount { font-size: 36rpx; color: #333; font-weight: bold; margin-left: 20rpx; } /* 车辆信息样式 */ .order-car-info { display: flex; align-items: center; margin-bottom: 15rpx; } .order-car-number { font-size: 28rpx; color: #999999; margin-right: 15rpx; } .order-car-type { font-size: 24rpx; padding: 4rpx 16rpx; border-radius: 20rpx; background-color: #fff1f0; color: #ff4d4f; } /* 时间样式 */ .order-time { font-size: 24rpx; color: #999999; } /* 删除按钮样式 */ .delete-button { width: 40rpx; height: 40rpx; position: absolute; bottom: 30rpx; right: 30rpx; } /* 空状态样式 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 0; } .empty-icon { width: 200rpx; height: 200rpx; margin-bottom: 30rpx; } .empty-text { font-size: 28rpx; color: #999999; } /* 响应式调整 */ @media screen and (min-width: 768px) { .order-item { padding: 40rpx; } .month-title { font-size: 32rpx; } .order-park-name { font-size: 36rpx; } .order-amount { font-size: 40rpx; } } /* 触摸反馈样式 */ .order-item:active { background-color: #f8f8f8; } .delete-button:active { opacity: 0.7; }