v26110643 测一测答题/结果页加底色和卡片设计(不再纯白)
- 新增 topic/_shared/quiz-skin.css:主色浅底渐变 + 柔光 + 小圆点底纹,题目卡白卡+顶部色条,选项白卡带阴影 - guangchang/ceshi(30 个测试)和 topic/ceshi、duiyou、yali、yinshi、zhunbei 共 6 页引入 Co-Authored-By: AI 助手 <noreply@local>
This commit is contained in:
@@ -231,6 +231,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../topic/_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
|
||||
</head>
|
||||
<body>
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- 11-04 UGC 总开关(孕妈广场 + 测一测,后台 /box_bm/plaza 顶部切换),见 js/ugc.js -->
|
||||
<script src="js/ugc.js?v=26110702"></script>
|
||||
<!-- V:26110642 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26110643 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<link rel="stylesheet" href="night.css?v=26110608">
|
||||
<link rel="stylesheet" href="js/wh-cm.css?v=26110642">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26110642';
|
||||
var VER = '26110643';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
|
||||
38
topic/_shared/quiz-skin.css
Normal file
38
topic/_shared/quiz-skin.css
Normal file
@@ -0,0 +1,38 @@
|
||||
/* 测一测 · 答题 / 结果页底色与卡片(2026-11-07 用户:「答题页面加一些设计感,加一些背景色,不要纯白色,所有答题页面都设计一下」)
|
||||
共用页:guangchang/ceshi(30 个测试)+ topic/ceshi、duiyou、yali、yinshi、zhunbei,放在各页 <style> 之后覆盖。
|
||||
· 底:主色浅底渐变 + 两团柔光 + 极淡小圆点,固定在 #scroll 背后(伪元素 position:fixed,iOS 上不跟着抖);颜色全取各页的 --c / --cbg / --c2,换测试自动换色。
|
||||
· 卡:题目卡白底 + 顶部主色渐变条 + 大引号水印;选项白卡带轻阴影(原来白底灰边,铺在白页上看不出层次)。
|
||||
· 开始页原有自己的渐变,只把它的「渐到纯白」改成透明,露出这层底。 */
|
||||
html,body{background:var(--cbg)}
|
||||
#scroll{isolation:isolate}
|
||||
#scroll:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||||
background:
|
||||
radial-gradient(circle at 1px 1px,var(--c10) 1.2px,transparent 1.6px) 0 0/22px 22px,
|
||||
radial-gradient(60% 38% at 100% 4%,var(--c2,color-mix(in srgb,var(--c) 28%,#fff)) 0%,transparent 70%),
|
||||
radial-gradient(56% 34% at 0% 62%,color-mix(in srgb,var(--c2,color-mix(in srgb,var(--c) 28%,#fff)) 70%,#fff) 0%,transparent 72%),
|
||||
radial-gradient(50% 30% at 96% 100%,rgba(255,255,255,.75) 0%,transparent 70%),
|
||||
linear-gradient(180deg,var(--cbg) 0%,color-mix(in srgb,var(--cbg) 55%,#fff) 55%,var(--cbg) 100%)}
|
||||
.bar.sh{background:color-mix(in srgb,var(--cbg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--c10)}
|
||||
#vStart.on{background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 70%)}
|
||||
|
||||
/* ② 答题 */
|
||||
.qtop .no b{font-size:20px}
|
||||
.qcard{background:#fff;border-radius:26px;padding-top:24px;box-shadow:0 14px 34px -14px var(--c20),0 2px 6px var(--c06)}
|
||||
.qcard:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--c),var(--c2,color-mix(in srgb,var(--c) 28%,#fff)))}
|
||||
.qcard:after{width:150px;height:150px;right:-48px;top:-56px;background:radial-gradient(circle,var(--c10),transparent 70%)}
|
||||
.qcard h2:before{content:"\201C";position:absolute;right:-6px;bottom:-34px;font:900 96px/1 Georgia,serif;color:var(--c06);pointer-events:none}
|
||||
.opt{background:rgba(255,255,255,.92);border-color:transparent;box-shadow:0 4px 14px -6px var(--c20)}
|
||||
.opt .l{background:var(--cbg);color:var(--c)}
|
||||
.opt.sel{background:#fff;box-shadow:0 8px 20px -8px var(--c)}
|
||||
.opt.ok{box-shadow:0 8px 20px -10px #2DB37D}.opt.no{box-shadow:none}
|
||||
.exp{background:rgba(255,255,255,.88);box-shadow:0 4px 14px -8px var(--c20)}
|
||||
.qtip{color:color-mix(in srgb,var(--c) 55%,#86909C)}
|
||||
|
||||
/* ③ 结果 */
|
||||
.rcard{box-shadow:0 16px 36px -16px var(--c20)}
|
||||
.read,.rv{background:rgba(255,255,255,.82);box-shadow:0 4px 14px -8px var(--c20)}
|
||||
.rv .it{background:var(--cbg)}
|
||||
.tp,.rec{background:rgba(255,255,255,.9);border-color:transparent;box-shadow:0 4px 14px -8px var(--c20)}
|
||||
.oth{background:linear-gradient(110deg,#fff,rgba(255,255,255,.6) 80%)}
|
||||
.btn.sec{background:rgba(255,255,255,.9)}
|
||||
.foot{color:color-mix(in srgb,var(--c) 40%,#86909C)}
|
||||
@@ -176,6 +176,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标(每题一个场景图标 q-*) -->
|
||||
|
||||
@@ -177,6 +177,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标(每题一个场景图标 q-*) -->
|
||||
|
||||
@@ -195,6 +195,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.care p{font-size:14.5px;line-height:1.8;color:var(--ink)}
|
||||
.care p+p{margin-top:8px}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标(每题一个场景图标 q-*) -->
|
||||
|
||||
@@ -194,6 +194,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.src{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.6}
|
||||
.warn{margin-top:20px;padding:10px 14px;border-radius:14px;background:var(--cbg);color:#4F7F2A;font-size:13px;line-height:1.6;text-align:center}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标(每题一个场景图标 q-*) -->
|
||||
|
||||
@@ -195,6 +195,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标(每题一个场景图标 q-*) -->
|
||||
|
||||
Reference in New Issue
Block a user