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

style(小程序): 首页hero徽章改毛玻璃 + CTA三按钮主标题同款渐变(55%透明)

Browse Source
This commit is contained in:
Pine
2026-08-28 17:19:37 +08:00
parent 3889456e49
commit a039abf378
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/pages/index/index.jsx
+3 -3
View File
@@ -23,9 +23,9 @@ export default function Index() {
</View>
<Text className="mk-subhead">{MK_HERO.subhead}</Text>
<View className="mk-cta">
<Button className="btn btn-cta" onClick={goTab(MK_HERO.ctaPrimary.tab)}>{MK_HERO.ctaPrimary.label}</Button>
<Button className="btn btn-ghost" onClick={goTab(MK_HERO.ctaSecondary.tab)}>{MK_HERO.ctaSecondary.label}</Button>
<Button className="btn btn-ghost" onClick={() => Taro.navigateTo({ url: '/pages/park-apply/index' })}>入驻申请</Button>
<Button className="mk-cta-btn" onClick={goTab(MK_HERO.ctaPrimary.tab)}>{MK_HERO.ctaPrimary.label}</Button>
<Button className="mk-cta-btn" onClick={goTab(MK_HERO.ctaSecondary.tab)}>{MK_HERO.ctaSecondary.label}</Button>
<Button className="mk-cta-btn" onClick={() => Taro.navigateTo({ url: '/pages/park-apply/index' })}>入驻</Button>
</View>
</View>
miniprogram/src/pages/index/index.scss
+16 -3
View File
@@ -28,9 +28,11 @@
.mk-badge {
display: inline-flex;
border: 1rpx solid rgba(255, 255, 255, 0.22);
color: #c8c8c8;
background: rgba(40, 40, 42, 0.6);
border: 1rpx solid rgba(99, 132, 255, 0.22);
color: #5a6aa3;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-radius: 999px;
padding: 12rpx 32rpx;
font-size: 24rpx;
@@ -80,6 +82,17 @@
animation-delay: 0.4s;
}
/* CTA 三按钮：与主标题同款渐变实底（更明显的背景） */
.mk-cta-btn {
margin: 0; padding: 0 44rpx; line-height: 2.5;
border-radius: 999px; border: none;
font-size: 28rpx; font-weight: 700; color: #ffffff;
background: linear-gradient(120deg, rgba(143,195,255,0.55) 0%, rgba(168,160,255,0.55) 45%, rgba(224,160,255,0.55) 80%, rgba(127,224,255,0.55) 120%);
box-shadow: 0 8rpx 24rpx rgba(148, 160, 255, 0.35);
text-shadow: 0 1rpx 4rpx rgba(35, 49, 92, 0.18);
}
.mk-cta-btn::after { border: none; }
@keyframes mkReveal {
from {
opacity: 0;