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

style(毛玻璃): 小程序全部卡片/表单面由纯白色改为毛玻璃材质(半透白+背景模糊)

Browse Source 
- 所有卡片容器(.cell/.mk-product/.pa-card/.step/card/表单控件等)由 #fff 改 rgba(255,255,255,.55)+backdrop-filter blur(20px) saturate(160%)
- 内容/活动等类近白(0.82~0.9)半透卡统一降至 0.55 毛玻璃
- 全局降级覆盖(app.scss)去掉 .ed-img.placeholder 白底强制，让占位封面保留柔彩渐变
- 小元素(选中芯片/圆形图标/tag角标等)保持不透明，避免阅读性劣化
- 页面为柔彩渐变+固定光晕背景，毛玻璃可正常采样模糊
This commit is contained in:
Pine
2026-08-27 16:45:45 +08:00
parent 89f8d12c3e
commit 7bf214e026
13 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/app.scss
+6 -4
View File
@@ -78,7 +78,7 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
/* 通用卡片（Soft UI：柔白面 + 软阴影 + 大圆角） */
.card {
background: rgba(255, 255, 255, 0.82);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(99, 132, 255, 0.12);
border-radius: 20px;
padding: 24px;
@@ -226,7 +226,7 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
}
.ot-qcard {
background: rgba(255, 255, 255, 0.85);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(99, 132, 255, 0.12);
border-radius: 16px;
padding: 28px 30px;
@@ -368,9 +368,11 @@ page { -ms-overflow-style: none; scrollbar-width: none; }
/* ============================================================
Soft UI 全局降级：表单控件/选项统一柔白面 + 深蓝灰文本（覆盖各页暗色控件）
============================================================ */
.input, .picker, .ot-opt, .sv-opt, .sv-textarea, .sv-lk, .ed-form, .ed-img.placeholder,
.input, .picker, .ot-opt, .sv-opt, .sv-textarea, .sv-lk, .ed-form,
.ca-textarea, .ca-code .input, .pt-picker, .pt-textarea, .pa-textarea, .pa-picker, .step, .summary, .cell {
background: #ffffff !important;
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-color: rgba(99, 132, 255, 0.16) !important;
color: #3a4672 !important;
}
miniprogram/src/pages/booking/index.scss
+3 -3
View File
@@ -49,7 +49,7 @@
gap: 20rpx;
}
.cell {
background: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99,132,255,0.12);
box-shadow: 0 8rpx 24rpx rgba(59,79,125,0.08);
border-radius: 18rpx;
@@ -74,7 +74,7 @@
}
.cell-tags { position: absolute; top: 14rpx; left: 14rpx; display: flex; gap: 8rpx; }
.ev-tag {
font-size: 20rpx; font-weight: 700; color: #000; background: rgba(255,255,255,0.92);
font-size: 20rpx; font-weight: 700; color: #000; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border-radius: 999px; padding: 3rpx 14rpx;
}
.ev-tag.alt { background: rgba(91,140,255,0.92); color: #23315c; }
@@ -105,7 +105,7 @@
/* ---------- 近期活动 · 首屏倒计时（从首页迁入） ---------- */
.mk-section { margin-top: 0; }
.mk-count {
background: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99,132,255,0.14);
box-shadow: 0 8rpx 24rpx rgba(59,79,125,0.08);
border-radius: 20px;
miniprogram/src/pages/cert-apply/index.scss
+3 -3
View File
@@ -8,7 +8,7 @@
.ca-card {
margin: 24rpx 16rpx 0;
padding: 28rpx 24rpx;
background: linear-gradient(180deg, #ffffff, #ffffff);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(99,132,255,.14);
border-radius: 20rpx;
}
@@ -17,11 +17,11 @@
.ca-radios { display: flex; gap: 24rpx; font-size: 26rpx; color: #3a4672; }
.field { margin-top: 12rpx; }
.input {
background: #ffffff; border: 1rpx solid #d7ddf0; border-radius: 10rpx;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid #d7ddf0; border-radius: 10rpx;
color: #3a4672; padding: 14rpx 16rpx; font-size: 27rpx; width: 100%;
}
.ca-textarea {
width: 100%; min-height: 140rpx; background: #ffffff; border: 1rpx solid #d7ddf0;
width: 100%; min-height: 140rpx; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid #d7ddf0;
border-radius: 10rpx; color: #3a4672; padding: 14rpx 16rpx; font-size: 27rpx;
}
.ca-doc { display: flex; align-items: center; gap: 16rpx; margin-top: 12rpx; }
miniprogram/src/pages/event-detail/index.scss
+6 -6
View File
@@ -13,7 +13,7 @@
}
.ed-img-tag {
align-self: flex-start; font-size: 24rpx; font-weight: 700; color: #6284ff;
background: rgba(255, 255, 255, 0.88); border: 1rpx solid rgba(99, 132, 255, 0.18);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(99, 132, 255, 0.18);
border-radius: 999px; padding: 6rpx 22rpx;
}
.ed-img-title { font-size: 44rpx; font-weight: 800; color: #23315c; line-height: 1.3; }
@@ -31,7 +31,7 @@
.ed-title { display: block; font-size: 40rpx; font-weight: 800; color: #23315c; line-height: 1.35; }
.ed-sub { display: block; font-size: 26rpx; color: #9aa4c6; margin-top: 10rpx; }
.ed-info { margin-top: 28rpx; background: #ffffff; border: 1rpx solid rgba(255,255,255,0.12); border-radius: 16px; padding: 8rpx 28rpx; }
.ed-info { margin-top: 28rpx; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(255,255,255,0.12); border-radius: 16px; padding: 8rpx 28rpx; }
.ed-line { display: flex; gap: 24rpx; padding: 20rpx 0; border-bottom: 1rpx solid rgba(255,255,255,0.06); }
.ed-line:last-child { border-bottom: none; }
.ed-k { flex-shrink: 0; width: 88rpx; font-size: 25rpx; color: #9aa4c6; }
@@ -42,16 +42,16 @@
.ed-desc-text { display: block; font-size: 26rpx; color: #4a5580; line-height: 1.8; }
/* 报名表单 */
.ed-form { margin-top: 36rpx; padding: 32rpx; background: linear-gradient(180deg, #ffffff, #ffffff); border-radius: 24px 24px 0 0; }
.ed-form { margin-top: 36rpx; padding: 32rpx; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: 24px 24px 0 0; }
.ed-form-title { display: block; font-size: 32rpx; font-weight: 700; color: #23315c; margin-bottom: 8rpx; }
.field { margin-top: 22rpx; }
.label { display: block; font-size: 24rpx; color: #9aa4c6; margin-bottom: 10rpx; }
.input {
background: #ffffff; border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
padding: 18rpx 22rpx; font-size: 28rpx; color: #23315c;
}
.picker {
background: #ffffff; border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
color: #23315c; font-size: 28rpx; padding: 18rpx 22rpx; line-height: 1.4;
}
.row { display: flex; gap: 16rpx; align-items: center; }
@@ -74,7 +74,7 @@
/* ---------- 我的报名状态卡 ---------- */
.mybook-card {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(255,255,255,0.14);
border-radius: 16rpx;
padding: 28rpx 30rpx;
miniprogram/src/pages/index/index.scss
+9 -9
View File
@@ -163,7 +163,7 @@
}
.mk-cmp {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 16px;
padding: 32rpx;
@@ -236,7 +236,7 @@
}
.mk-product {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 16px;
padding: 36rpx;
@@ -256,14 +256,14 @@
font-size: 22rpx;
font-weight: 700;
color: #000;
background: #fff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border-radius: 999px;
padding: 6rpx 22rpx;
margin-bottom: 24rpx;
}
.mk-tag.alt {
background: rgba(255, 255, 255, 0.72);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
color: #6284ff;
}
@@ -317,7 +317,7 @@
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #fff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.mk-pcta {
@@ -332,7 +332,7 @@
}
.mk-core-item {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 14px;
padding: 32rpx;
@@ -371,7 +371,7 @@
/* ---------- 倒计时 ---------- */
.mk-count {
background: rgba(255, 255, 255, 0.88);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
box-shadow: 0 8rpx 24rpx rgba(59, 79, 125, 0.08);
border-radius: 20px;
@@ -444,7 +444,7 @@
display: flex;
align-items: center;
gap: 24rpx;
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 14px;
padding: 28rpx 32rpx;
@@ -579,7 +579,7 @@
}
.btn-white {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
color: #000000;
}
miniprogram/src/pages/mine/index.scss
+3 -3
View File
@@ -97,7 +97,7 @@
/* 卡片 */
.mine-card {
background: linear-gradient(180deg, #ffffff, #ffffff);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 20px;
padding: 32rpx;
@@ -211,7 +211,7 @@
}
.row { display: flex; gap: 16rpx; align-items: center; }
.input {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 14px;
padding: 16rpx 20rpx;
@@ -235,7 +235,7 @@
gap: 16rpx;
}
.bk-card {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 18px;
padding: 28rpx 30rpx;
miniprogram/src/pages/park-apply/index.scss
+4 -4
View File
@@ -7,7 +7,7 @@
.pa-card {
margin: 24rpx 16rpx 0;
padding: 28rpx 24rpx;
background: linear-gradient(180deg, #ffffff, #ffffff);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(99,132,255,.14);
border-radius: 20rpx;
}
@@ -18,7 +18,7 @@
.input {
width: 100%; box-sizing: border-box;
height: 88rpx; line-height: 88rpx;
background: #ffffff; border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
color: #23315c; font-size: 28rpx; padding: 0 22rpx;
}
.input::placeholder { color: #5b5b5b; }
@@ -26,7 +26,7 @@
.pa-picker {
width: 100%; box-sizing: border-box;
height: 88rpx; line-height: 88rpx;
background: #ffffff; border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
color: #23315c; font-size: 28rpx; padding: 0 22rpx;
}
.pa-radios, .pa-checks { display: flex; flex-wrap: wrap; gap: 12rpx; align-items: center; }
@@ -34,7 +34,7 @@
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20rpx; }
.pa-textarea {
width: 100%; box-sizing: border-box; min-height: 200rpx;
background: #ffffff; border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid rgba(99, 132, 255, 0.14); border-radius: 14px;
color: #23315c; font-size: 28rpx; line-height: 1.5; padding: 18rpx 22rpx;
}
.pa-doc { margin: 24rpx 0 0; }
miniprogram/src/pages/park-transfer/index.scss
+4 -4
View File
@@ -7,7 +7,7 @@
.pt-card {
margin: 24rpx 16rpx 0;
padding: 28rpx 24rpx;
background: linear-gradient(180deg, #ffffff, #ffffff);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(99,132,255,.14);
border-radius: 20rpx;
}
@@ -16,16 +16,16 @@
.pt-line { display: block; font-size: 25rpx; color: #3a4672; margin-top: 8rpx; }
.pt-status { color: #6284ff; }
.pt-picker {
background: #ffffff; border: 1rpx solid #d7ddf0; border-radius: 10rpx;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid #d7ddf0; border-radius: 10rpx;
color: #3a4672; padding: 14rpx 16rpx; font-size: 27rpx;
}
.pt-textarea {
width: 100%; min-height: 120rpx; background: #ffffff; border: 1rpx solid #d7ddf0;
width: 100%; min-height: 120rpx; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid #d7ddf0;
border-radius: 10rpx; color: #3a4672; padding: 14rpx 16rpx; font-size: 27rpx;
}
.field { margin-top: 12rpx; }
.input {
background: #ffffff; border: 1rpx solid #d7ddf0; border-radius: 10rpx;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1rpx solid #d7ddf0; border-radius: 10rpx;
color: #3a4672; padding: 14rpx 16rpx; font-size: 27rpx; width: 100%;
}
.pt-foot { margin-top: 20rpx; text-align: center; font-size: 23rpx; color: #9aa4c6; }
miniprogram/src/pages/plan/index.scss
+2 -2
View File
@@ -23,9 +23,9 @@
}
.opt.sel { background: #ffffff; color: #000000; font-weight: 600; }
.step { display: flex; gap: 20px; background: #ffffff; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.step { display: flex; gap: 20px; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.no {
width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #000;
width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); color: #000;
font-size: 32px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.body { flex: 1; }
miniprogram/src/pages/policy/index.scss
+1 -1
View File
@@ -25,6 +25,6 @@
.org { font-size: 22px; color: #9aa4c6; margin: 8px 0; }
.amount {
display: inline-block; font-size: 24px; font-weight: 600; color: #000;
background: #fff; border-radius: 999px; padding: 6px 20px; margin: 8px 0;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: 999px; padding: 6px 20px; margin: 8px 0;
}
.note { display: block; margin: 24px 0; line-height: 1.6; }
miniprogram/src/pages/scan-login/index.scss
+1 -1
View File
@@ -2,7 +2,7 @@
.sl { position: relative; z-index: 2; }
.sl-card {
margin: 40rpx 32rpx 0; padding: 60rpx 40rpx;
background: linear-gradient(180deg, #ffffff, #ffffff);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(99,132,255,.14); border-radius: 20rpx; text-align: center;
}
.sl-icon { font-size: 72rpx; margin-bottom: 20rpx; }
miniprogram/src/pages/survey/index.scss
+4 -4
View File
@@ -130,7 +130,7 @@
/* ---------- 问题卡片 ---------- */
.sv-qcard {
background: linear-gradient(180deg, #ffffff, #ffffff);
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 20px;
padding: 34rpx 32rpx;
@@ -181,7 +181,7 @@
display: flex;
align-items: flex-start;
gap: 16rpx;
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 22rpx 24rpx;
@@ -229,7 +229,7 @@
display: flex;
align-items: center;
gap: 20rpx;
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 20rpx 24rpx;
@@ -269,7 +269,7 @@
width: 100%;
box-sizing: border-box;
min-height: 160rpx;
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
color: #23315c;
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 16px;
miniprogram/src/pages/test/index.scss
+7 -7
View File
@@ -62,7 +62,7 @@
}
.ot-vcard {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 16px;
padding: 28rpx 32rpx;
@@ -136,7 +136,7 @@
font-size: 20rpx;
font-weight: 600;
color: #000;
background: #fff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border-radius: 999px;
padding: 4rpx 16rpx;
vertical-align: middle;
@@ -179,7 +179,7 @@
}
.ot-qcard {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 16px;
padding: 28rpx 30rpx;
@@ -239,7 +239,7 @@
display: flex;
align-items: flex-start;
gap: 12rpx;
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 14px;
padding: 20rpx 22rpx;
@@ -365,7 +365,7 @@
width: 132rpx;
height: 132rpx;
border-radius: 50%;
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
display: flex;
align-items: center;
justify-content: center;
@@ -489,7 +489,7 @@
/* 卡片（赛道 / 角色 / 工具） */
.ot-card {
background: #ffffff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1rpx solid rgba(99, 132, 255, 0.14);
border-radius: 16px;
padding: 28rpx 30rpx;
@@ -516,7 +516,7 @@
font-size: 20rpx;
font-weight: 700;
color: #000;
background: #fff;
background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border-radius: 999px;
padding: 4rpx 16rpx;
flex-shrink: 0;