fix(mini-program): 修复剧本详情页内容超出屏幕和间距问题

修复内容:
1. 信息卡片右侧超出屏幕:
   - .info-value 添加 flex:1 + overflow: hidden + word-break: break-all
   - 长文本自动换行,不会超出屏幕
   - .info-label 添加 flex-shrink: 0 防止被压缩
   - .info-row 添加 min-width: 0 防止 flex 子项溢出

2. 卡片顶部与 header 无间距:
   - .detail-content padding 顶部从 0 改为 20rpx

3. 正文区域右侧超出:
   - .full-content 添加 overflow: hidden + word-break: break-all
   - Markdown 内容自动换行
This commit is contained in:
2026-04-07 22:56:20 +08:00
parent ec7c07d187
commit 21c07ba450
@@ -150,7 +150,7 @@ const goBack = () => {
.detail-content { .detail-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0 32rpx 32rpx; padding: 20rpx 32rpx 32rpx;
} }
.content-container { .content-container {
@@ -176,6 +176,7 @@ const goBack = () => {
align-items: center; align-items: center;
padding: 16rpx 0; padding: 16rpx 0;
border-bottom: 1px solid rgba(168, 85, 247, 0.1); border-bottom: 1px solid rgba(168, 85, 247, 0.1);
min-width: 0;
} }
.info-row:last-child { .info-row:last-child {
@@ -188,11 +189,18 @@ const goBack = () => {
font-weight: 600; font-weight: 600;
letter-spacing: 2rpx; letter-spacing: 2rpx;
text-transform: uppercase; text-transform: uppercase;
flex-shrink: 0;
} }
.info-value { .info-value {
font-size: 26rpx; flex: 1;
text-align: right;
margin-left: 16rpx;
overflow: hidden;
word-break: break-all;
color: rgba(243, 232, 255, 0.9); color: rgba(243, 232, 255, 0.9);
font-size: 26rpx;
line-height: 1.5;
} }
/* ==================== 完整内容卡片 ==================== */ /* ==================== 完整内容卡片 ==================== */
@@ -202,6 +210,8 @@ const goBack = () => {
border: 1px solid rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.2);
border-radius: 40rpx; border-radius: 40rpx;
min-height: 400rpx; min-height: 400rpx;
overflow: hidden;
word-break: break-all;
} }
.content-header { .content-header {