.home { /* background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); */ background: #f5f6f8; height: 100vh; display: flex; flex-direction: column; position: relative; } /* 浮动语言切换器 */ .language-switcher-float { position: fixed; top: 20px; right: 20px; z-index: 1000; opacity: 0.8; transition: opacity 0.2s ease; } .language-switcher-float:hover { opacity: 1; } /* ScrollView 容器样式 */ .home-scroll { flex: 1; height: 100%; } .home-header { position: fixed; top: 16px; left: calc(50% - 40%); z-index: 1000; padding: 4px 16px; text-align: center; width: 80%; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ff6b35 100%); border-radius: 20px; box-shadow: 0 4px 12px rgb(255 107 107 / 30%); overflow: hidden; animation: pulse-glow 2s ease-in-out infinite alternate; } .home-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, rgb(255 255 255 / 10%) 0%, transparent 100%); pointer-events: none; } .home-header::after { content: '🎁'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 16px; animation: bounce 1.5s ease-in-out infinite; } .coupon-text { display: inline-block; font-weight: 800; font-size: 14px; color: #fff; background: rgb(255 255 255 / 20%); padding: 2px 8px; border-radius: 6px; margin-left: 6px; border: 1px dashed rgb(255 255 255 / 60%); letter-spacing: 0.5px; animation: shine 2s linear infinite; } @keyframes pulse-glow { 0% { box-shadow: 0 4px 12px rgb(255 107 107 / 30%); } 100% { box-shadow: 0 6px 16px rgb(255 107 107 / 40%); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(-50%); } 40% { transform: translateY(-60%); } 60% { transform: translateY(-55%); } } @keyframes shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .home-title { font-size: 56px; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 16px; letter-spacing: -1px; } .home-subtitle { font-size: 32px; color: #666; display: block; font-weight: 500; } /* 瀑布流布局 - 简化为标准grid布局 */ .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 100%; margin: 0 auto; padding: 14px 16px 80px; min-height: 100%; }