.home { position: relative; display: flex; flex-direction: column; min-height: 100vh; background: #1a0710; } /* 渐变背景层:锁到视口,滚动时不移位 */ .hero-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 60% at 50% 0%, #3a0a1a 0%, #1a0710 55%, #0d0308 100%); } .hero-blob { position: absolute; border-radius: 50%; filter: blur(80rpx); opacity: 0.85; } .hero-blob.blob-1 { width: 700rpx; height: 700rpx; top: -80rpx; left: -120rpx; background: radial-gradient(circle, #c4232f 0%, rgba(196, 35, 47, 0) 70%); } .hero-blob.blob-2 { width: 620rpx; height: 620rpx; top: 220rpx; right: -160rpx; background: radial-gradient(circle, #e63946 0%, rgba(230, 57, 70, 0) 70%); opacity: 0.75; } .hero-blob.blob-3 { width: 800rpx; height: 500rpx; bottom: -100rpx; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, #7a1424 0%, rgba(122, 20, 36, 0) 70%); opacity: 0.7; } .hero-noise { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 2rpx, transparent 2rpx 6rpx), repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2rpx, transparent 2rpx 6rpx); mix-blend-mode: overlay; pointer-events: none; } /* 顶栏 */ .topbar { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 88rpx; padding: 0 32rpx; } .brand-mini { font-size: 30rpx; font-weight: 600; color: rgba(255, 255, 255, 0.92); letter-spacing: 2rpx; } .topbar-more { width: 64rpx; height: 64rpx; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6rpx; background: rgba(255, 255, 255, 0.12); border: 1rpx solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); } .topbar-more:active { background: rgba(255, 255, 255, 0.22); } .topbar-more .dot { width: 8rpx; height: 8rpx; border-radius: 50%; background: #fff; } /* Hero 标题 */ .hero { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 48rpx; text-align: center; } .hero-title { font-size: 56rpx; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: 1rpx; text-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.35); } .hero-sub { margin-top: 20rpx; font-size: 28rpx; color: rgba(255, 255, 255, 0.72); letter-spacing: 1rpx; } /* 快捷入口胶囊 */ .quick-bar { position: relative; z-index: 2; display: flex; justify-content: center; gap: 24rpx; padding: 0 32rpx 20rpx; } .quick-chip { display: flex; align-items: center; gap: 10rpx; height: 72rpx; padding: 0 28rpx; border-radius: 36rpx; background: rgba(255, 255, 255, 0.1); border: 1rpx solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 26rpx; backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); } .quick-chip:active { background: rgba(255, 255, 255, 0.2); } .quick-ico { font-size: 28rpx; } /* 底部输入区 */ .input-bar { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 16rpx; padding: 16rpx 24rpx calc(24rpx + env(safe-area-inset-bottom)); } .btn-icon { flex: 0 0 auto; width: 72rpx; height: 72rpx; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1rpx solid rgba(255, 255, 255, 0.28); color: #fff; backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); } .btn-icon .icon { font-size: 36rpx; color: #fff; } .input-text { flex: 1; height: 72rpx; padding: 0 28rpx; border-radius: 36rpx; font-size: 28rpx; box-sizing: border-box; background: rgba(255, 255, 255, 0.12); border: 1rpx solid rgba(255, 255, 255, 0.28); color: #fff; backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); } .input-ph { color: rgba(255, 255, 255, 0.55); }