From d4a6b4bf3a41e4486e0320baad9fb3dff07781d9 Mon Sep 17 00:00:00 2001 From: Pine Date: Thu, 27 Aug 2026 16:06:15 +0800 Subject: [PATCH] =?UTF-8?q?style(all):=20=E5=B0=8F=E7=A8=8B=E5=BA=8F?= =?UTF-8?q?=E5=85=A8=E9=A1=B5=E9=9D=A2=20Soft=20UI=20=E6=B5=85=E8=89=B2?= =?UTF-8?q?=E6=9F=94=E5=BD=A9=E4=B8=BB=E9=A2=98=EF=BC=88=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E9=87=8D=E7=BD=AE=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - page 背景改 Soft 柔彩渐变(粉紫/薄荷/天蓝 + #3a4672 文本) - 全局共享 .card/.card-title/.desc/.section-head/.muted/.btn-main/.btn-ghost 转柔白面+软阴影+深蓝文本 - 答题组件(ot-qcard/ot-opt/ot-qtext/ot-progress/ot-back 等) 转 Soft 浅色 - 表单控件(.input/.picker/.ot-opt/.cell/.step 等) 全局柔白+深蓝灰文本(!important 覆盖各页暗色) - 自定义 tabBar 去暗/金→柔白玻璃+蓝紫激活 - 图标均 mask SVG(无 emoji) Co-Authored-By: Claude --- miniprogram/src/app.scss | 98 ++++++++++++++--------- miniprogram/src/custom-tab-bar/index.scss | 35 ++++---- 2 files changed, 76 insertions(+), 57 deletions(-) diff --git a/miniprogram/src/app.scss b/miniprogram/src/app.scss index a2c2130..11964fd 100644 --- a/miniprogram/src/app.scss +++ b/miniprogram/src/app.scss @@ -9,11 +9,17 @@ 不依赖任何 App 层 DOM（Taro 下 App.render 不会渲染成包裹页面的容器）。 */ /* page = 微信真正的根节点，背景直接铺这里（Taro 下 App.render 不渲染成包裹容器的 DOM）。 星点：平铺小格(各自尺寸 + repeat)；光晕与底：满屏(100%)；逐层 background-size/repeat 匹配。 */ -/* 干净深空底色（无动画、无 canvas，真机流畅不遮挡） */ +/* Soft UI 浅色柔彩底色（无动画、无 canvas，真机流畅不遮挡） */ page { - background: #05060d; - color: #ffffff; + background: #f4f6ff; + color: #3a4672; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; + background-image: + radial-gradient(64% 42% at 12% 2%, rgba(229, 167, 224, 0.26), transparent 60%), + radial-gradient(56% 40% at 94% 4%, rgba(158, 225, 236, 0.30), transparent 60%), + radial-gradient(50% 42% at 84% 100%, rgba(151, 225, 212, 0.22), transparent 60%), + linear-gradient(165deg, #edf2ff 0%, #f6eefc 40%, #ecf7f6 72%, #eaf4ff 100%); + background-attachment: fixed; } /* 隐藏滚动条：所有页面内容可滚动，但不显示滚动条（含内部横向滚动容器） */ @@ -70,38 +76,39 @@ page { -ms-overflow-style: none; scrollbar-width: none; } } } -/* 通用卡片（Appica 风格：暗色面 + 层级阴影） */ +/* 通用卡片（Soft UI：柔白面 + 软阴影 + 大圆角） */ .card { - background: linear-gradient(180deg, #0e0e12, #0a0a0d); - border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.82); + border: 1px solid rgba(99, 132, 255, 0.12); border-radius: 20px; padding: 24px; margin-bottom: 16px; - box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.42); + box-shadow: 0 10rpx 28rpx rgba(59, 79, 125, 0.09); + backdrop-filter: blur(8px); } .card-title { font-size: 30px; font-weight: 700; - color: #ffffff; + color: #23315c; } .card-desc { font-size: 26px; - color: #c4c2c3; + color: #6a76a8; line-height: 1.6; margin-top: 8px; } .btn-main { - background: linear-gradient(135deg, #5b8cff, #9d6bff); + background: linear-gradient(135deg, #6b8bff, #8f7bff); color: #ffffff; border-radius: 999px; font-weight: 600; font-size: 28px; padding: 0 40px; line-height: 2.6; - box-shadow: 0 8rpx 24rpx rgba(120, 110, 255, 0.4); + box-shadow: 0 8rpx 24rpx rgba(98, 132, 255, 0.28); } .btn-main::after { @@ -109,9 +116,9 @@ page { -ms-overflow-style: none; scrollbar-width: none; } } .btn-ghost { - background: transparent; - color: #e8e8e8; - border: 1px solid rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.7); + color: #5a6aa3; + border: 1px solid rgba(99, 132, 255, 0.22); border-radius: 999px; font-weight: 600; font-size: 28px; @@ -126,12 +133,12 @@ page { -ms-overflow-style: none; scrollbar-width: none; } .section-head { font-size: 32px; font-weight: 700; - color: #ffffff; + color: #23315c; margin: 32px 0 16px; } .muted { - color: #8e8e8e; + color: #9aa4c6; font-size: 24px; } @@ -158,9 +165,9 @@ page { -ms-overflow-style: none; scrollbar-width: none; } display: inline-flex; align-items: center; font-size: 22px; - color: #a8c4ff; - background: rgba(140, 160, 255, 0.12); - border: 1px solid rgba(140, 160, 255, 0.3); + color: #6284ff; + background: rgba(99, 132, 255, 0.10); + border: 1px solid rgba(99, 132, 255, 0.24); border-radius: 999px; padding: 4px 14px; } @@ -168,15 +175,15 @@ page { -ms-overflow-style: none; scrollbar-width: none; } .ot-quiz-title { font-size: 30px; font-weight: 700; - color: #fff; + color: #23315c; } .ot-quiz-tag { margin-left: 14px; font-size: 20px; font-weight: 600; - color: #000; - background: #fff; + color: #fff; + background: linear-gradient(135deg, #6b8bff, #8f7bff); border-radius: 999px; padding: 4px 16px; vertical-align: middle; @@ -184,13 +191,13 @@ page { -ms-overflow-style: none; scrollbar-width: none; } .ot-progress-text { font-size: 24px; - color: #8e8e8e; + color: #9aa4c6; } .ot-progress { height: 10px; border-radius: 999px; - background: rgba(255, 255, 255, 0.12); + background: rgba(99, 132, 255, 0.14); margin: 20px 0; overflow: hidden; } @@ -198,14 +205,14 @@ page { -ms-overflow-style: none; scrollbar-width: none; } .ot-progress-fill { height: 100%; border-radius: 999px; - background: linear-gradient(90deg, #ffd28a, #ff8f6b); + background: linear-gradient(90deg, #6b8bff, #8f7bff); transition: width 0.3s ease; } .ot-part { display: block; font-size: 24px; - color: #ffd28a; + color: #6284ff; margin-bottom: 8px; } @@ -214,20 +221,21 @@ page { -ms-overflow-style: none; scrollbar-width: none; } display: block; margin-top: 16px; font-size: 22px; - color: #8e8e8e; + color: #9aa4c6; text-align: center; } .ot-qcard { - background: #0c0c0e; - border: 1px solid rgba(255, 255, 255, 0.14); + background: rgba(255, 255, 255, 0.85); + border: 1px solid rgba(99, 132, 255, 0.12); border-radius: 16px; padding: 28px 30px; margin-bottom: 20px; + box-shadow: 0 8rpx 24rpx rgba(59, 79, 125, 0.08); } .ot-qcard.answered { - border-color: rgba(255, 210, 138, 0.5); + border-color: rgba(98, 132, 255, 0.5); } /* 一题一屏：卡片更突出，题目/选项更大 */ @@ -251,12 +259,12 @@ page { -ms-overflow-style: none; scrollbar-width: none; } justify-content: space-between; align-items: center; font-size: 22px; - color: #6f6f6f; + color: #a3abc9; margin-bottom: 12px; } .ot-check { - color: #ffd28a; + color: #6284ff; font-size: 26px; } @@ -264,7 +272,7 @@ page { -ms-overflow-style: none; scrollbar-width: none; } display: block; font-size: 30px; font-weight: 600; - color: #fff; + color: #23315c; line-height: 1.5; margin-bottom: 20px; } @@ -279,31 +287,31 @@ page { -ms-overflow-style: none; scrollbar-width: none; } display: flex; align-items: flex-start; gap: 12px; - background: #141417; - border: 1px solid rgba(255, 255, 255, 0.12); + background: #f6f8ff; + border: 1px solid rgba(99, 132, 255, 0.14); border-radius: 14px; padding: 20px 22px; } .ot-opt.sel { - border-color: #ffd28a; - background: rgba(255, 210, 138, 0.08); + border-color: #6284ff; + background: rgba(99, 132, 255, 0.08); } .opt-key { font-family: 'BubbledotICG', monospace; - color: #8e8e8e; + color: #8a94c0; font-size: 26px; flex-shrink: 0; } .ot-opt.sel .opt-key { - color: #ffd28a; + color: #6284ff; } .opt-text { font-size: 27px; - color: #c4c2c3; + color: #4a5580; line-height: 1.55; flex: 1; } @@ -356,3 +364,13 @@ page { -ms-overflow-style: none; scrollbar-width: none; } .ic-thumb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 10v12M15 5.9s0-1-.5-2a1.5 1.5 0 0 0-2.8 1C12.4 6.6 11 10 11 10h6a2 2 0 0 1 2 2.5l-1.4 5.6a2 2 0 0 1-2 1.5H7M15 6l2-1.5a1.5 1.5 0 0 1 2.7 1.3L18 13M7 22H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 10v12M15 5.9s0-1-.5-2a1.5 1.5 0 0 0-2.8 1C12.4 6.6 11 10 11 10h6a2 2 0 0 1 2 2.5l-1.4 5.6a2 2 0 0 1-2 1.5H7M15 6l2-1.5a1.5 1.5 0 0 1 2.7 1.3L18 13M7 22H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); } .ic-share { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); } .ic-cmt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } + +/* ============================================================ + Soft UI 全局降级：表单控件/选项统一柔白面 + 深蓝灰文本（覆盖各页暗色控件） + ============================================================ */ +.input, .picker, .ot-opt, .sv-opt, .sv-textarea, .sv-lk, .ed-form, .ed-img.placeholder, +.ca-textarea, .ca-code .input, .pt-picker, .pt-textarea, .pa-textarea, .pa-picker, .step, .summary, .cell { + background: #ffffff !important; + border-color: rgba(99, 132, 255, 0.16) !important; + color: #3a4672 !important; +} diff --git a/miniprogram/src/custom-tab-bar/index.scss b/miniprogram/src/custom-tab-bar/index.scss index 9f12de4..10e38c5 100644 --- a/miniprogram/src/custom-tab-bar/index.scss +++ b/miniprogram/src/custom-tab-bar/index.scss @@ -5,8 +5,9 @@ right: 0; bottom: 0; z-index: 1000; - background: linear-gradient(to top, rgba(8, 9, 12, 0.97), rgba(10, 11, 16, 0.88)); - box-shadow: 0 -6rpx 30rpx rgba(0, 0, 0, 0.35); + background: linear-gradient(to top, rgba(255,255,255,0.92), rgba(244,246,255,0.88)); + backdrop-filter: blur(14px); + box-shadow: 0 -6rpx 30rpx rgba(59, 79, 125, 0.10); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } @@ -36,12 +37,12 @@ align-items: center; justify-content: center; gap: 6rpx; - color: #8a8a93; + color: #9aa4c6; transition: color 0.2s ease; } .tab-item--active { - color: #ffd28a; + color: #6284ff; } .tab-item--active::before { @@ -53,7 +54,7 @@ width: 64rpx; height: 2rpx; border-radius: 2rpx; - background: linear-gradient(90deg, transparent, #ffd28a, transparent); + background: linear-gradient(90deg, transparent, #6284ff, transparent); opacity: 0.9; } @@ -65,7 +66,7 @@ } .tab-item--active .tab-item__icon { - filter: drop-shadow(0 2rpx 10rpx rgba(255, 210, 138, 0.55)); + filter: drop-shadow(0 2rpx 10rpx rgba(98, 132, 255, 0.55)); } .tab-item--active .tab-icon { @@ -83,7 +84,7 @@ margin-top: -30rpx; z-index: 2; justify-content: flex-start; - color: rgba(255, 210, 138, 0.55); + color: rgba(98, 132, 255, 0.55); } .home-blob { @@ -95,11 +96,11 @@ height: 108rpx; /* 上圆下收的异形（水滴/倒角蛋形） */ border-radius: 52% 52% 44% 44% / 58% 58% 42% 42%; - background: linear-gradient(180deg, #2c2640, #15121e 72%); - border: 2rpx solid rgba(255, 210, 138, 0.4); + background: linear-gradient(180deg, #ffffff, #eef1ff 72%); + border: 2rpx solid rgba(98, 132, 255, 0.30); box-shadow: - 0 8rpx 26rpx rgba(0, 0, 0, 0.5), - inset 0 0 22rpx rgba(255, 210, 138, 0.1); + 0 8rpx 26rpx rgba(59, 79, 125, 0.16), + inset 0 0 22rpx rgba(98, 132, 255, 0.1); } .home-inner { @@ -120,24 +121,24 @@ font-weight: 800; line-height: 1; letter-spacing: 2rpx; - color: #fff; + color: #23315c; } /* 激活：底座点亮 + 星星辉光 */ .tab-item--home.tab-item--active { - color: #ffd28a; + color: #6284ff; } .tab-item--home.tab-item--active .home-blob { - border-color: rgba(255, 210, 138, 0.9); + border-color: rgba(98, 132, 255, 0.9); box-shadow: - 0 0 36rpx rgba(255, 210, 138, 0.45), + 0 0 36rpx rgba(98, 132, 255, 0.45), 0 8rpx 26rpx rgba(0, 0, 0, 0.5), - inset 0 0 28rpx rgba(255, 210, 138, 0.22); + inset 0 0 28rpx rgba(98, 132, 255, 0.22); } .tab-item--home.tab-item--active .ic-star { - filter: drop-shadow(0 0 10rpx rgba(255, 210, 138, 0.9)); + filter: drop-shadow(0 0 10rpx rgba(98, 132, 255, 0.9)); transform: scale(1.12); }