```
<template>
<view class="container">
<!
-- 日期筛选
-->
<view class="filter
-box">
<picker mode="date" @change="startDateChange">
<view class="date
-picker">开始日期：{{ startDate || '请选择' }}</view>
</picker>
<picker mode="date" @change="endDateChange">
<view class="date
-picker">结束日期：{{ endDate || '请选择' }}</view>
</picker>
<button @tap="filterData" class="filter
-btn">筛选</button>
</view>
<!
-- 考核进度
-->
<view class="progress
-card">
<text class="title">个人考核进度</text>
<progress
:percent="progress" stroke
-width="6" activeColor="#4cd964"/>
<text class="progress
-text">{{ progress }}%（当前阶段：{{ currentStage }}）</text>
</view>
<!
-- 选项卡切换
-->
<view class="tabs">
<text
:class="['tab
-item', activeTab === 0 ? 'active'
: '']"
@tap="switchTab(0)">订单记录</text>
<text
:class="['tab
-item', activeTab === 1 ? 'active'
: '']"
@tap="switchTab(1)">消费记录</text>
</view>
<!
-- 记录列表
-->
<scroll
-view
scroll
-y
class="list
-container"
@scrolltolower="loadMore">
<view v
-if="activeTab === 0" class="list">
<view v
-for="(item, index) in filteredOrders"
:key="index" class="list
-item">
<text class="order
-no">订单号：{{ item.orderNo }}</text>
<text class="order
-date">{{ item.date }}</text>
<text class="order
-amount">金额：¥{{ item.amount }}</text>
</view>
<view v
-if="!filteredOrders.length" class="empty
-tip">暂无订单记录</view>
</view>
<view v
-if="activeTab === 1" class="list">
<view v
-for="(item, index) in filteredConsumptions"
:key="index" class="list
-item">
<text class="consume
-type">{{ item.type }}</text>
<text class="consume
-date">{{ item.date }}</text>
<text class="consume
-amount">¥{{ item.amount }}</text>
</view>
<view v
-if="!filteredConsumptions.length" class="empty
-tip">暂无消费记录</view>
</view>
<view v
-if="loading" class="loading">加载中...</view>
</scroll
-view>
</view>
</template>
<style lang="scss">
.container {
padding
: 20rpx;
}
.filter
-box {
display
: flex;
align
-items
: center;
margin-bottom
: 20rpx;
.date
-picker {
flex
: 1;
padding
: 15rpx;
border
: 1rpx solid #eee;
margin-right
: 10rpx;
border
-radius
: 8rpx;
}
.filter
-btn {
width
: 150rpx;
height
: 70rpx;
line
-height
: 70rpx;
}
}
.progress
-card {
background
: #fff;
padding
: 30rpx;
border
-radius
: 16rpx;
margin-bottom
: 30rpx;
box
-shadow
: 0 2rpx 12rpx rgba(0,0,0,0.1);
.title {
display
: block;
font
-size
: 34rpx;
margin-bottom
: 20rpx;
}
.progress
-text {
display
: block;
margin-top
: 15rpx;
color
: #666;
}
}
.tabs {
display
: flex;
border
-bottom
: 1rpx solid #eee;
.tab
-item {
flex
: 1;
text
-align
: center;
padding
: 25rpx;
color
: #666;
&.active {
color
: #007AFF;
border
-bottom
: 4rpx solid #007AFF;
}
}
}
.list
-container {
height
: calc(100vh
- 400rpx);
.list
-item {
padding
: 30rpx;
background
: #fff;
margin-bottom
: 20rpx;
border
-radius
: 12rpx;
display
: flex;
justify
-content
: space
-between;
box
-shadow
: 0 2rpx 8rpx rgba(0,0,0,0.05);
.order
-amount, .consume
-amount {
color
: #e64340;
font
-weight
: bold;
}
}
.empty
-tip {
text
-align
: center;
color
: #999;
padding
: 50rpx;
}
.loading {
text
-align
: center;
padding
: 30rpx;
color
: #999;
}
}
</style>```我需要消费记录样式和订单记录样式帮我在我这个代码写一下
本文详细解释了在CSS中如何利用margin-left:auto实现元素水平居中。当width设置为固定值，且margin-right不设置时，默认为0，margin-left会占据剩余的全部宽度，使元素向右靠拢，达到居中效果。这一方法适用于包含块的宽度明确的情况。
扫一扫
1679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
