From c5281e45ea52c361b90912554f5fdcec07611d19 Mon Sep 17 00:00:00 2001 From: Pine Date: Thu, 27 Aug 2026 16:00:54 +0800 Subject: [PATCH] =?UTF-8?q?style(content):=20=E5=B0=8F=E7=A8=8B=E5=BA=8F?= =?UTF-8?q?=20Soft=20UI=20=E6=B5=85=E8=89=B2=E6=9F=94=E5=BD=A9=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=20+=20=E5=B0=81=E9=9D=A23.35:1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 提取 design/Soft UI.sketch 色板：柔彩(粉紫#e5a7e0/薄荷#97e1d4/天蓝#9ee1ec/#3b4f7d 文本/#edf2ff 面) - 资讯中心/详情：浅色渐变背景 + 柔白光卡 + 圆角 + 软阴影 + 类别柔彩 - app.config window 改浅色(避开暗缝)；类别颜色改 Soft 色板 - (封面统一 3.35:1 已在上条) Co-Authored-By: Claude --- miniprogram/src/app.config.js | 6 +- .../src/pages/content-detail/index.scss | 67 ++++++++-------- miniprogram/src/pages/content/index.jsx | 8 +- miniprogram/src/pages/content/index.scss | 77 +++++++++++-------- website/src/user/Content.jsx | 2 +- 5 files changed, 88 insertions(+), 72 deletions(-) diff --git a/miniprogram/src/app.config.js b/miniprogram/src/app.config.js index c477e5a..a70f4d7 100644 --- a/miniprogram/src/app.config.js +++ b/miniprogram/src/app.config.js @@ -18,10 +18,10 @@ export default { ], window: { backgroundTextStyle: 'light', - navigationBarBackgroundColor: '#05060d', // 与页面背景一致，避免导航栏与页面标题间露出背景缝隙 + navigationBarBackgroundColor: '#f7f9ff', // Soft UI 浅色，避免导航栏与页面标题间露出背景缝隙 navigationBarTitleText: '云超服OPC · 为进化而设计', - navigationBarTextStyle: 'white', - backgroundColor: '#05060d' + navigationBarTextStyle: 'black', + backgroundColor: '#f7f9ff' }, tabBar: { custom: true, diff --git a/miniprogram/src/pages/content-detail/index.scss b/miniprogram/src/pages/content-detail/index.scss index 5ba542b..8357ab2 100644 --- a/miniprogram/src/pages/content-detail/index.scss +++ b/miniprogram/src/pages/content-detail/index.scss @@ -1,49 +1,52 @@ -/* 资讯详情 · 小程序样式（微信文章式） */ -.cd { position: relative; z-index: 2; padding: 0 0 60rpx; } -.cd-cover { width: 100%; aspect-ratio: 3.35 / 1; object-fit: cover; border-radius: 20rpx; } -.cd-video { width: 100%; height: 400rpx; border-radius: 20rpx; margin-bottom: 24rpx; } -.cd-title { display: block; margin-top: 24rpx; padding: 0 28rpx; font-size: 40rpx; color: #fff; font-weight: 700; line-height: 1.4; } +/* 资讯详情 · Soft UI 风格（浅色柔彩） */ +.cd { position: relative; z-index: 2; padding: 0 0 60rpx; min-height: 100vh; + background: linear-gradient(180deg, #f7f9ff 0%, #f3eefc 100%); } +.cd::before { content: ''; position: fixed; inset: 0; z-index: -1; + background: radial-gradient(50% 40% at 88% 6%, rgba(158,225,236,.30), transparent 60%), + radial-gradient(46% 40% at 10% 10%, rgba(229,167,224,.22), transparent 60%); } +.cd-cover { width: 100%; aspect-ratio: 3.35 / 1; object-fit: cover; border-radius: 20rpx; display: block; margin: 20rpx 24rpx 0; width: calc(100% - 48rpx); } +.cd-video { width: calc(100% - 48rpx); height: 400rpx; border-radius: 20rpx; margin: 20rpx 24rpx 0; } +.cd-title { display: block; margin-top: 24rpx; padding: 0 28rpx; font-size: 38rpx; color: #23315c; font-weight: 700; line-height: 1.4; } .cd-meta-row { display: flex; align-items: center; gap: 10rpx; padding: 20rpx 28rpx 0; } -.cd-ava { width: 36rpx; height: 36rpx; border-radius: 50%; background: linear-gradient(135deg, #555, #333); flex-shrink: 0; } -.cd-ava2 { width: 44rpx; height: 44rpx; border-radius: 50%; background: linear-gradient(135deg, #555, #333); flex-shrink: 0; } -.cd-author { font-size: 25rpx; color: #c4c2c3; display: inline-flex; align-items: center; gap: 4rpx; } -.cd-badge-ic { width: 22rpx; height: 22rpx; color: #26a69a; margin-left: 6rpx; } -.cd-act-ic { width: 34rpx; height: 34rpx; color: #cfcfd2; } -.cd-act-ic.on { color: #3b82f6; } +.cd-ava { width: 36rpx; height: 36rpx; border-radius: 50%; background: linear-gradient(135deg, #e5a7e0, #9ee1ec); flex-shrink: 0; } +.cd-ava2 { width: 44rpx; height: 44rpx; border-radius: 50%; background: linear-gradient(135deg, #e5a7e0, #9ee1ec); flex-shrink: 0; } +.cd-author { font-size: 25rpx; color: #5a6aa3; display: inline-flex; align-items: center; gap: 4rpx; } +.cd-badge-ic { width: 22rpx; height: 22rpx; color: #6284ff; margin-left: 6rpx; } .cd-meta-line { display: flex; align-items: center; gap: 8rpx; padding: 8rpx 28rpx 0; } -.cd-meta-at { font-size: 23rpx; color: #7c7c80; } -.cd-dot { font-size: 23rpx; color: #6d6d72; } -.cd-summary { display: block; margin: 20rpx 28rpx 0; font-size: 27rpx; color: #c4c2c3; line-height: 1.7; } -.cd-body { display: block; margin: 20rpx 28rpx 0; font-size: 30rpx; color: #e4e4e6; line-height: 1.9; } +.cd-meta-at { font-size: 23rpx; color: #9aa4c6; } +.cd-dot { font-size: 23rpx; color: #c0c7e2; } +.cd-summary { display: block; margin: 20rpx 28rpx 0; font-size: 27rpx; color: #6a76a8; line-height: 1.7; } +.cd-body { display: block; margin: 20rpx 28rpx 0; font-size: 30rpx; color: #3a4672; line-height: 1.9; } .cd-body img, .cd-body video { max-width: 100%; border-radius: 14rpx; } .cd-body p { margin: 0 0 8rpx; } .cd-gallery { display: flex; gap: 12rpx; margin: 24rpx 28rpx 0; white-space: nowrap; } .cd-gal-img { width: 240rpx; height: 240rpx; border-radius: 14rpx; flex-shrink: 0; margin-right: 12rpx; } .cd-link { margin: 28rpx 28rpx 0; } -/* 作者条 + 动作 */ -.cd-bar { display: flex; align-items: center; justify-content: space-between; padding: 22rpx 28rpx; margin-top: 24rpx; border-top: 1rpx solid rgba(255,255,255,.08); } +/* 作者条 + 动作（软卡片） */ +.cd-bar { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 28rpx; margin: 26rpx 24rpx 0; + border-radius: 20rpx; background: rgba(255,255,255,.82); box-shadow: 0 8rpx 24rpx rgba(59,79,125,.08); } .cd-bar-left { display: flex; align-items: center; gap: 12rpx; } .cd-bar-actions { display: flex; align-items: center; gap: 2rpx; } -.cd-act { display: flex; flex-direction: column; align-items: center; gap: 2rpx; padding: 6rpx 16rpx; border-radius: 10rpx; } -.cd-act-ic { font-size: 34rpx; color: #cfcfd2; } -.cd-act-ic.on { color: #3b82f6; } -.cd-act-n { font-size: 20rpx; color: #8e8e8e; } +.cd-act { display: flex; flex-direction: column; align-items: center; gap: 2rpx; padding: 6rpx 14rpx; border-radius: 10rpx; } +.cd-act-ic { width: 34rpx; height: 34rpx; color: #9aa4c6; } +.cd-act-ic.on { color: #6284ff; } +.cd-act-n { font-size: 20rpx; color: #a3abc9; } /* 阅读 + 留言 */ -.cd-read { padding: 24rpx 28rpx 0; font-size: 24rpx; color: #7c7c80; } -.cd-comments { padding: 20rpx 28rpx 0; border-top: 1rpx solid rgba(255,255,255,.08); margin-top: 20rpx; } -.cd-cmt-title { display: block; font-size: 30rpx; color: #fff; font-weight: 700; margin-bottom: 16rpx; } -.cd-cmt-input { display: flex; align-items: center; gap: 12rpx; background: #14141a; border: 1rpx solid #2a2a2d; border-radius: 14rpx; padding: 10rpx 16rpx; } -.cd-cmt-field { flex: 1; color: #e4e4e6; font-size: 26rpx; } -.cd-cmt-tools { display: flex; gap: 14rpx; font-size: 30rpx; color: #9b9b9b; } +.cd-read { padding: 24rpx 28rpx 0; font-size: 24rpx; color: #9aa4c6; } +.cd-comments { padding: 20rpx 28rpx 0; margin-top: 20rpx; } +.cd-cmt-title { display: block; font-size: 30rpx; color: #23315c; font-weight: 700; margin-bottom: 16rpx; } +.cd-cmt-input { display: flex; align-items: center; gap: 12rpx; background: rgba(255,255,255,.85); border: 1rpx solid rgba(99,132,255,.16); border-radius: 16rpx; padding: 10rpx 16rpx; } +.cd-cmt-field { flex: 1; color: #3a4672; font-size: 26rpx; } +.cd-cmt-tools .ic { width: 32rpx; height: 32rpx; color: #b0b8d6; } .cd-cmt-send { margin: 0; padding: 0 20rpx; font-size: 22rpx; line-height: 2; } -.cd-cmt-empty { display: block; padding: 60rpx 0; text-align: center; font-size: 24rpx; color: #8e8e8e; } +.cd-cmt-empty { display: block; padding: 60rpx 0; text-align: center; font-size: 24rpx; color: #a3abc9; } .cd-cmt { margin-top: 22rpx; } .cd-cmt-head { display: flex; align-items: center; gap: 12rpx; } .cd-cmt-meta { display: flex; flex-direction: column; } -.cd-cmt-name { font-size: 24rpx; color: #8e8e8e; } -.cd-cmt-time { font-size: 20rpx; color: #6d6d72; } -.cd-cmt-text { display: block; margin-top: 10rpx; font-size: 27rpx; color: #e4e4e6; line-height: 1.6; } +.cd-cmt-name { font-size: 24rpx; color: #7a86b0; } +.cd-cmt-time { font-size: 20rpx; color: #b0b8d6; } +.cd-cmt-text { display: block; margin-top: 10rpx; font-size: 27rpx; color: #3a4672; line-height: 1.6; } -.cd-err { display: block; padding: 90rpx 0; text-align: center; font-size: 26rpx; color: #8e8e8e; } +.cd-err { display: block; padding: 90rpx 0; text-align: center; font-size: 26rpx; color: #9aa4c6; } diff --git a/miniprogram/src/pages/content/index.jsx b/miniprogram/src/pages/content/index.jsx index f93c268..1afa50c 100644 --- a/miniprogram/src/pages/content/index.jsx +++ b/miniprogram/src/pages/content/index.jsx @@ -8,10 +8,10 @@ import './index.scss'; /** 类别视觉（无 image 字段时用类别渐变占位） */ const CAT_META = { - policy: { label: '政策', from: '#3b82f6', to: '#2563eb' }, - news: { label: '资讯', from: '#10b981', to: '#0ea5e9' }, - skill: { label: '技能', from: '#f59e0b', to: '#ef4444' }, - dynamic: { label: '动态', from: '#8b5cf6', to: '#ec4899' }, + policy: { label: '政策', from: '#6b8bff', to: '#8f7bff' }, + news: { label: '资讯', from: '#2ea8f0', to: '#9ee1ec' }, + skill: { label: '技能', from: '#ff72b6', to: '#e5a7e0' }, + dynamic: { label: '动态', from: '#9b8cff', to: '#d6a8f0' }, }; const catMeta = (t) => CAT_META[t] || CAT_META.news; diff --git a/miniprogram/src/pages/content/index.scss b/miniprogram/src/pages/content/index.scss index aa80d42..56ddd5c 100644 --- a/miniprogram/src/pages/content/index.scss +++ b/miniprogram/src/pages/content/index.scss @@ -1,25 +1,38 @@ -/* 资讯中心 · 小程序样式（暗色令牌一致，两种卡片自由混排） */ -.ct { position: relative; z-index: 2; padding: 16rpx 24rpx 60rpx; } +/* 资讯中心 · Soft UI 风格（浅色柔彩：渐变底 + 柔和圆角卡片 + 软阴影） */ -/* 类别分段 */ +/* 页面柔彩渐变背景（浅色粉紫→薄荷→天蓝） */ +.ct { position: relative; z-index: 2; padding: 16rpx 24rpx 60rpx; min-height: 100vh; + background: linear-gradient(165deg, #edf2ff 0%, #f6eefc 34%, #ecf7f6 68%, #eaf4ff 100%); } +/* 顶部柔光装饰（可选，营造 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%), + radial-gradient(50% 40% at 92% 8%, rgba(158,225,236,.34), transparent 60%), + radial-gradient(46% 40% at 80% 96%, rgba(151,225,212,.26), transparent 60%); +} + +/* 类别分段（Soft 胶囊） */ .ct-cats { display: flex; gap: 10rpx; padding: 8rpx 0 16rpx; } .ct-cat { - flex: 1; text-align: center; padding: 14rpx 0; border-radius: 12rpx; - background: #17171b; border: 1rpx solid #2a2a2d; color: #9b9b9b; font-size: 27rpx; + flex: 1; text-align: center; padding: 14rpx 0; border-radius: 999px; + background: rgba(255,255,255,.72); border: 1rpx solid rgba(99,132,255,.14); color: #8a94c0; font-size: 27rpx; + backdrop-filter: blur(8px); } -.ct-cat.on { background: #fff; color: #111; border-color: #fff; font-weight: 600; } +.ct-cat.on { background: linear-gradient(135deg, #6b8bff, #8f7bff); color: #fff; border-color: transparent; font-weight: 600; + box-shadow: 0 8rpx 22rpx rgba(98,132,255,.28); } /* 政策测评入口 */ .ct-quiz { display: flex; align-items: center; justify-content: space-between; - padding: 18rpx 22rpx; margin-bottom: 12rpx; border-radius: 14rpx; - background: linear-gradient(180deg, #14141a, #0e0e12); border: 1rpx solid rgba(255,255,255,.12); + padding: 18rpx 22rpx; margin-bottom: 12rpx; border-radius: 18rpx; + background: linear-gradient(135deg, rgba(229,167,224,.18), rgba(158,225,236,.18)); + border: 1rpx solid rgba(255,255,255,.6); } -.ct-quiz-l { font-size: 27rpx; color: #fff; font-weight: 600; } -.ct-quiz-d { font-size: 24rpx; color: #ffd28a; } +.ct-quiz-l { font-size: 27rpx; color: #3b4f7d; font-weight: 600; } +.ct-quiz-d { font-size: 24rpx; color: #6284ff; } -/* ---------- 行式卡片（缩略图左） ---------- */ -.ct-row { display: flex; gap: 18rpx; padding: 20rpx 2rpx; border-bottom: 1rpx solid rgba(255,255,255,.06); } +/* 行式卡片（软白表面 + 软阴影 + 圆角） */ +.ct-row { display: flex; gap: 18rpx; padding: 18rpx; margin-bottom: 14rpx; border-radius: 20rpx; + background: rgba(255,255,255,.82); box-shadow: 0 8rpx 24rpx rgba(59,79,125,.08); } .ct-thumb { width: 112rpx; height: 112rpx; border-radius: 16rpx; flex-shrink: 0; display: flex; align-items: center; justify-content: center; @@ -29,35 +42,35 @@ .ct-tag { display: block; font-size: 22rpx; font-weight: 600; margin-bottom: 6rpx; } .ct-row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - font-size: 28rpx; color: #fff; line-height: 1.45; font-weight: 600; + font-size: 28rpx; color: #2b3a66; line-height: 1.45; font-weight: 600; } .ct-row-meta { display: flex; align-items: center; gap: 8rpx; margin-top: 12rpx; } .ct-ava { width: 28rpx; height: 28rpx; border-radius: 50%; flex-shrink: 0; } -.ct-author { font-size: 22rpx; color: #a9a9ac; } -.ct-dot { font-size: 22rpx; color: #6d6d72; } -.ct-time { font-size: 22rpx; color: #7c7c80; } +.ct-author { font-size: 22rpx; color: #8a94c0; } +.ct-dot { font-size: 22rpx; color: #b9c0e0; } +.ct-time { font-size: 22rpx; color: #a3abc9; } -/* ---------- 大图卡片 ---------- */ -.ct-card { margin: 6rpx 0 18rpx; border-radius: 22rpx; overflow: hidden; background: #111116; border: 1rpx solid #222228; } +/* 大图卡片 */ +.ct-card { margin: 6rpx 0 18rpx; border-radius: 24rpx; overflow: hidden; + background: rgba(255,255,255,.9); box-shadow: 0 12rpx 32rpx rgba(59,79,125,.10); } .ct-cover { position: relative; width: 100%; aspect-ratio: 3.35 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ct-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } -.ct-play { position: relative; z-index: 2; } .ct-play { - position: relative; z-index: 2; width: 72rpx; height: 72rpx; border-radius: 50%; background: rgba(255,255,255,.9); - color: #111; display: flex; align-items: center; justify-content: center; - box-shadow: 0 4rpx 16rpx rgba(0,0,0,.4); + position: relative; z-index: 2; width: 68rpx; height: 68rpx; border-radius: 50%; + background: rgba(255,255,255,.9); color: #6284ff; display: flex; align-items: center; justify-content: center; + box-shadow: 0 6rpx 20rpx rgba(59,79,125,.22); } -.ct-play .ic { width: 38rpx; height: 38rpx; color: #111; } -.ct-card-bd { padding: 20rpx 22rpx 8rpx; } +.ct-play .ic { width: 36rpx; height: 36rpx; color: #6284ff; } +.ct-card-bd { padding: 18rpx 22rpx 8rpx; } .ct-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - font-size: 31rpx; color: #fff; line-height: 1.4; font-weight: 700; + font-size: 31rpx; color: #2b3a66; line-height: 1.4; font-weight: 700; } -.ct-card-ad { display: flex; align-items: center; gap: 8rpx; margin-top: 16rpx; padding-bottom: 22rpx; } -.ct-like { margin-left: auto; width: 56rpx; height: 56rpx; border-radius: 50%; background: #1d1d22; display: flex; align-items: center; justify-content: center; } -.ct-like .ic { width: 30rpx; height: 30rpx; color: #9b9b9b; } -.ct-like.on .ic { color: #ff3b5c; } -.ct-like.on { background: #2a1520; } +.ct-card-ad { display: flex; align-items: center; gap: 8rpx; margin-top: 16rpx; padding-bottom: 20rpx; } +.ct-like { margin-left: auto; width: 56rpx; height: 56rpx; border-radius: 50%; background: #eef1ff; display: flex; align-items: center; justify-content: center; } +.ct-like .ic { width: 30rpx; height: 30rpx; color: #9aa4c6; } +.ct-like.on { background: #ffe9ef; } +.ct-like.on .ic { color: #ff5f86; } -.ct-empty { padding: 80rpx 0; text-align: center; font-size: 26rpx; color: #8e8e8e; } -.ct-err { display: block; padding: 60rpx 0; text-align: center; font-size: 26rpx; color: #f0b8b8; } +.ct-empty { padding: 80rpx 0; text-align: center; font-size: 26rpx; color: #9aa4c6; } +.ct-err { display: block; padding: 60rpx 0; text-align: center; font-size: 26rpx; color: #ff5f86; } diff --git a/website/src/user/Content.jsx b/website/src/user/Content.jsx index c166c20..b8e0b53 100644 --- a/website/src/user/Content.jsx +++ b/website/src/user/Content.jsx @@ -35,7 +35,7 @@ export default function Content() { ); } -const CAT_COLOR = { policy: '#3b82f6', news: '#10b981', skill: '#f59e0b', dynamic: '#8b5cf6' }; +const CAT_COLOR = { policy: '#6b8bff', news: '#2ea8f0', skill: '#ff72b6', dynamic: '#9b8cff' }; /** 资讯卡片（大图/行式，点击链接到独立详情页）。 */ function NewsCard({ it, big }) {