86 lines
5.1 KiB
Plaintext
86 lines
5.1 KiB
Plaintext
/* 页面与容器 */
|
||
page { background: #f5f5f5; }
|
||
|
||
/* 🔥 组件自身必须占满宽度，且 padding 左右严格相等 */
|
||
.container { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
|
||
|
||
/* 🔥 滚动区 padding 左右必须相等，且容器用 box-sizing */
|
||
.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; }
|
||
|
||
/* 🔥 卡片 width:100% + box-sizing 使左右边距完全由父容器决定 */
|
||
.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-daichuli { background: #fff3e0; color: #e65100; }
|
||
.zhuangtai-yichufa { background: #e8f5e9; color: #2e7d32; }
|
||
.zhuangtai-yibohui { background: #f3e5f5; color: #7b1fa2; }
|
||
.zhuangtai-shensuzhong { background: #e3f2fd; color: #1565c0; }
|
||
.zhuangtai-weizhi { background: #f0f0f0; color: #888; }
|
||
.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; }
|
||
|
||
/* 🔥 弹窗面板 width:100% + box-sizing */
|
||
.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; }
|
||
|
||
/* 🔥 内容区左右 padding 严格相等 */
|
||
.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; }
|
||
.section { margin: 20rpx 0; }
|
||
.sec-title { font-size: 26rpx; color: #888; margin-bottom: 12rpx; display: block; }
|
||
|
||
/* 🔥 图片网格：gap 均等，无任何额外水平偏移 */
|
||
.img-grid { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 12rpx; }
|
||
.img { width: calc((100% - 24rpx) / 3); height: 0; padding-bottom: calc((100% - 24rpx) / 3); border-radius: 10rpx; background: #f0f0f0; display: block; position: relative; }
|
||
.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%; padding-bottom: 0; }
|
||
.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: 52rpx; color: #aaa; box-sizing: border-box; position: relative; }
|
||
|
||
/* 表单 */
|
||
.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; }
|
||
|
||
/* 🔥 底部按钮区左右 padding 严格均等 */
|
||
.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;
|
||
} |