Files
ws c46ffcf567 配色和二维码滚动修复
style: 统一界面视觉风格与配色方 在遮罩层和内容区都加上 catchtouchmove 阻止触摸穿透滚动:
2026-04-24 17:51:02 +08:00

190 lines
3.1 KiB
Plaintext

/**records.wxss**/
page {
background-color: #f0f5fa;
min-height: 100vh;
}
.page {
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}
/* 筛选标签 */
.tabs {
display: flex;
background: #ffffff;
padding: 16rpx 32rpx;
border-bottom: 1rpx solid #e8eef5;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 2rpx 12rpx rgba(91, 155, 213, 0.06);
}
.tab {
flex: 1;
text-align: center;
font-size: 26rpx;
color: #7f8fa6;
padding: 16rpx 0;
position: relative;
letter-spacing: 1rpx;
}
.tab-active {
color: #5b9bd5;
font-weight: 600;
}
.tab-active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
border-radius: 3rpx;
}
/* 记录列表 */
.record-list {
padding: 24rpx 32rpx;
}
.record-card {
background: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
}
.record-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #e8eef5;
}
.qrcode-btn {
font-size: 24rpx;
color: #fff;
background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
padding: 10rpx 28rpx;
border-radius: 30rpx;
letter-spacing: 1rpx;
box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.25);
}
.qrcode-btn:active {
opacity: 0.85;
}
.status-tag {
font-size: 24rpx;
padding: 6rpx 20rpx;
border-radius: 20rpx;
font-weight: 500;
margin-left: auto;
}
.status-pending {
background: rgba(240, 164, 93, 0.12);
color: #e6a23c;
}
.status-approved {
background: rgba(110, 198, 160, 0.12);
color: #52c41a;
}
.status-rejected {
background: rgba(239, 83, 80, 0.1);
color: #ef5350;
}
.status-cancelled {
background: rgba(127, 143, 166, 0.1);
color: #7f8fa6;
}
.record-body {
margin-bottom: 8rpx;
}
.record-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12rpx 0;
}
.record-label {
font-size: 26rpx;
color: #7f8fa6;
flex-shrink: 0;
}
.record-value {
font-size: 26rpx;
color: #2c3e50;
text-align: right;
margin-left: 32rpx;
}
.record-footer {
padding-top: 20rpx;
border-top: 1rpx solid #e8eef5;
display: flex;
justify-content: flex-end;
}
.cancel-btn {
font-size: 26rpx;
color: #ef5350;
padding: 12rpx 32rpx;
border: 1rpx solid rgba(239, 83, 80, 0.25);
border-radius: 30rpx;
}
.cancel-btn:active {
background: rgba(239, 83, 80, 0.06);
}
/* 空状态 */
.empty {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 200rpx;
}
.empty-icon {
font-size: 120rpx;
margin-bottom: 32rpx;
}
.empty-text {
font-size: 28rpx;
color: #7f8fa6;
margin-bottom: 48rpx;
}
.empty-btn {
font-size: 28rpx;
color: #fff;
background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
padding: 20rpx 64rpx;
border-radius: 40rpx;
font-weight: 600;
letter-spacing: 2rpx;
box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.3);
}
.empty-btn:active {
opacity: 0.85;
}