diff --git a/miniprogram/src/pages/content/index.jsx b/miniprogram/src/pages/content/index.jsx index 3a33ce3..33a3222 100644 --- a/miniprogram/src/pages/content/index.jsx +++ b/miniprogram/src/pages/content/index.jsx @@ -1,4 +1,4 @@ -import { View, Text, Image } from '@tarojs/components'; +import { View, Text, Image, ScrollView } from '@tarojs/components'; import Taro from '@tarojs/taro'; import { useState, useEffect } from 'react'; import { listContent, CONTENT_CATS } from '@/utils/content'; @@ -115,6 +115,8 @@ export default function ContentIndex() { + {/* 内容区独立滚动:页头(标题+tab)固定不动 */} + {/* 政策测评入口(非 tab,政策分类下提供) */} {cat === 'policy' && ( @@ -133,6 +135,7 @@ export default function ContentIndex() { ) : ( )} + ); } diff --git a/miniprogram/src/pages/content/index.scss b/miniprogram/src/pages/content/index.scss index 571d8a9..552b07d 100644 --- a/miniprogram/src/pages/content/index.scss +++ b/miniprogram/src/pages/content/index.scss @@ -1,8 +1,11 @@ /* 资讯中心 · Soft UI 风格(浅色柔彩:渐变底 + 柔和圆角卡片 + 软阴影) */ /* 页面柔彩渐变背景(浅色粉紫→薄荷→天蓝) */ -.ct { position: relative; z-index: 2; padding: 16rpx 24rpx 60rpx; min-height: 100vh; +.ct { position: relative; z-index: 2; display: flex; flex-direction: column; + height: 100vh; overflow: hidden; padding: 24rpx 24rpx 0; box-sizing: border-box; background: linear-gradient(165deg, #edf2ff 0%, #f6eefc 34%, #ecf7f6 68%, #eaf4ff 100%); } +/* 内容区独立滚动(页头固定),底部避开自定义 tabBar */ +.ct-scroll { flex: 1; min-height: 0; padding-bottom: 180rpx; } /* 顶部柔光装饰(可选,营造 Soft 氛围) */ .ct::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 46% at 12% 4%, rgba(229,167,224,.30), transparent 60%), @@ -11,13 +14,13 @@ } /* 标准页头(对齐「我的/活动」页头:kicker + 渐变标题 + 英文注脚) */ -.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12rpx; padding: 8rpx 0 20rpx; } +.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12rpx; margin: 32rpx 0 20rpx; padding: 0 8rpx; } .ct-head-l { display: flex; flex-direction: column; flex-shrink: 0; max-width: 42%; } -.ct-no { font-family: 'BubbledotICG', monospace; font-size: 22rpx; color: #b9c2dd; letter-spacing: 3rpx; } +.ct-no { font-family: 'BubbledotICG', monospace; color: #a3abc9; font-size: 26rpx; letter-spacing: 2rpx; } .ct-title { font-size: 40rpx; font-weight: 800; letter-spacing: -0.5rpx; line-height: 1.3; background: linear-gradient(120deg, #8fc3ff 0%, #a8a0ff 45%, #e0a0ff 80%, #7fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } -.ct-en { font-family: 'BubbledotICG', monospace; color: #5b5b5b; font-size: 22rpx; letter-spacing: 2rpx; } +.ct-en { font-family: 'BubbledotICG', monospace; color: #5b5b5b; font-size: 24rpx; letter-spacing: 2rpx; } /* 类别 tab:药丸居右,4 个一行与标题同排 */ .ct-cats { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8rpx; padding: 0 0 6rpx; }