77 lines
4.6 KiB
Plaintext
77 lines
4.6 KiB
Plaintext
/* 完全复用积分组件的样式 */
|
|
page { background: #f5f5f5; }
|
|
|
|
.container { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
|
|
|
|
.scroll { width: 100%; box-sizing: border-box; padding: 20rpx 24rpx; }
|
|
|
|
.tip { text-align: center; color: #999; font-size: 24rpx; padding: 30rpx 0; }
|
|
.empty { display: flex; flex-direction: column; align-items: center; padding-top: 200rpx; color: #999; font-size: 28rpx; }
|
|
|
|
.card { width: 100%; box-sizing: border-box; background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
|
|
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
|
|
.time { font-size: 24rpx; color: #999; }
|
|
.tag { font-size: 20rpx; padding: 2rpx 14rpx; border-radius: 16rpx; display: inline-block; }
|
|
|
|
/* 状态标签颜色（与积分组件完全相同） */
|
|
.zhuangtai-daijiaona { background: #FFF3E0; color: #E65100; } /* 待缴纳 */
|
|
.zhuangtai-yijiaona { background: #E8F5E9; color: #2E7D32; } /* 已缴纳 */
|
|
.zhuangtai-shensuzhong { background: #E3F2FD; color: #1565C0; } /* 申诉中 */
|
|
.zhuangtai-yibohui { background: #F3E5F5; color: #7B1FA2; } /* 申诉成功 */
|
|
|
|
.info { display: block; font-size: 26rpx; color: #333; margin-top: 8rpx; }
|
|
|
|
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: flex-end; justify-content: center; }
|
|
.modal-panel { width: 100%; box-sizing: border-box; max-height: 85vh; background: #fff; border-radius: 24rpx 24rpx 0 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 30rpx 16rpx; border-bottom: 1px solid #eee; }
|
|
.modal-title { font-size: 32rpx; font-weight: 600; }
|
|
.modal-close { width: 44rpx; height: 44rpx; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #888; }
|
|
|
|
.modal-body { width: 100%; box-sizing: border-box; padding: 20rpx 30rpx; overflow-y: auto; }
|
|
.row { display: flex; margin-bottom: 16rpx; }
|
|
.lbl { width: 150rpx; font-size: 26rpx; color: #888; flex-shrink: 0; }
|
|
.val { flex: 1; font-size: 26rpx; color: #333; word-break: break-all; }
|
|
.strong { font-weight: 600; color: #E53935; }
|
|
.section { margin: 20rpx 0; }
|
|
.sec-title { font-size: 26rpx; color: #888; margin-bottom: 12rpx; display: block; }
|
|
|
|
.img-grid { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 12rpx; }
|
|
.img-box { position: relative; width: calc((100% - 24rpx) / 3); height: 0; padding-bottom: calc((100% - 24rpx) / 3); }
|
|
.img-box .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10rpx; background: #f0f0f0; }
|
|
.img-del { position: absolute; top: -6rpx; right: -6rpx; width: 34rpx; height: 34rpx; background: #e53935; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18rpx; z-index: 2; }
|
|
.img-add { width: calc((100% - 24rpx) / 3); height: 0; padding-bottom: calc((100% - 24rpx) / 3); border: 2rpx dashed #ccc; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; font-size: 48rpx; color: #aaa; position: relative; box-sizing: border-box; }
|
|
|
|
.form-group { margin-bottom: 24rpx; }
|
|
.textarea { width: 100%; box-sizing: border-box; height: 180rpx; background: #f9f9f9; border-radius: 10rpx; padding: 16rpx; font-size: 26rpx; border: 1px solid #eee; }
|
|
.word-count { text-align: right; font-size: 22rpx; color: #bbb; margin-top: 6rpx; }
|
|
.progress-box { margin-top: 12rpx; }
|
|
.progress-bar { height: 10rpx; background: #eee; border-radius: 5rpx; }
|
|
.progress-inner { height: 100%; background: #2e7d32; border-radius: 5rpx; }
|
|
.progress-text { font-size: 22rpx; color: #2e7d32; text-align: right; margin-top: 4rpx; }
|
|
|
|
.modal-foot { width: 100%; box-sizing: border-box; display: flex; padding: 16rpx 30rpx 30rpx; gap: 20rpx; border-top: 1px solid #eee; }
|
|
.btn { flex: 1; text-align: center; padding: 22rpx 0; border-radius: 16rpx; font-size: 28rpx; font-weight: 600; }
|
|
.primary { background: #2e7d32; color: #fff; }
|
|
.default { background: #f0f0f0; color: #555; }
|
|
.btn:active { opacity: 0.8; }
|
|
|
|
|
|
/* ===== 获取更多按钮 ===== */
|
|
.load-more-btn {
|
|
width: 80%;
|
|
margin: 20rpx auto 30rpx;
|
|
padding: 22rpx 0;
|
|
text-align: center;
|
|
background: #ffffff;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 20rpx;
|
|
color: #555;
|
|
font-size: 26rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
|
|
transition: all 0.15s;
|
|
}
|
|
.load-more-btn:active {
|
|
background: #f5f5f5;
|
|
border-color: #2e7d32;
|
|
color: #2e7d32;
|
|
} |