OPC-Hub/training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(content): 小程序 Soft UI 浅色柔彩主题 + 封面3.35:1

Browse Source 
- 提取 design/Soft UI.sketch 色板：柔彩(粉紫#e5a7e0/薄荷#97e1d4/天蓝#9ee1ec/#3b4f7d 文本/#edf2ff 面)
- 资讯中心/详情：浅色渐变背景 + 柔白光卡 + 圆角 + 软阴影 + 类别柔彩
- app.config window 改浅色(避开暗缝)；类别颜色改 Soft 色板
- (封面统一 3.35:1 已在上条)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Pine
2026-08-27 16:00:54 +08:00
parent b88e5459cd
commit c5281e45ea
5 changed files with 88 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/app.config.js
+3 -3
View File
@@ -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,
miniprogram/src/pages/content-detail/index.scss
+35 -32
View File
@@ -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; }
miniprogram/src/pages/content/index.jsx
+4 -4
View File
@@ -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;
miniprogram/src/pages/content/index.scss
+45 -32
View File
@@ -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; }