style(小程序): 首页hero徽章改毛玻璃 + CTA三按钮主标题同款渐变(55%透明)
This commit is contained in:
@@ -23,9 +23,9 @@ export default function Index() {
|
|||||||
</View>
|
</View>
|
||||||
<Text className="mk-subhead">{MK_HERO.subhead}</Text>
|
<Text className="mk-subhead">{MK_HERO.subhead}</Text>
|
||||||
<View className="mk-cta">
|
<View className="mk-cta">
|
||||||
<Button className="btn btn-cta" onClick={goTab(MK_HERO.ctaPrimary.tab)}>{MK_HERO.ctaPrimary.label}</Button>
|
<Button className="mk-cta-btn" 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="mk-cta-btn" 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={() => Taro.navigateTo({ url: '/pages/park-apply/index' })}>入驻</Button>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
|||||||
@@ -28,9 +28,11 @@
|
|||||||
|
|
||||||
.mk-badge {
|
.mk-badge {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.22);
|
border: 1rpx solid rgba(99, 132, 255, 0.22);
|
||||||
color: #c8c8c8;
|
color: #5a6aa3;
|
||||||
background: rgba(40, 40, 42, 0.6);
|
background: rgba(255, 255, 255, 0.55);
|
||||||
|
backdrop-filter: blur(20px) saturate(160%);
|
||||||
|
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
padding: 12rpx 32rpx;
|
padding: 12rpx 32rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
@@ -80,6 +82,17 @@
|
|||||||
animation-delay: 0.4s;
|
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 {
|
@keyframes mkReveal {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user