.home { padding-bottom: 4.375rem; position: relative; /* 明亮奢华背景:金属拉丝纹理覆盖层 + 柔和浅色渐变 */ background: repeating-linear-gradient(0deg, rgba(180,180,180,0.12) 0, rgba(180,180,180,0.12) 0.0625rem, rgba(255,255,255,0.0) 0.0625rem, rgba(255,255,255,0.0) 0.3125rem), linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.35) 100%); min-height: 100vh; } .home-bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } /* 公告栏 */ .notice { margin: 0 0.75rem 0.75rem; padding: 0.625rem 0.6875rem; border-radius: 0.625rem; background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); border: 0.0625rem solid rgba(203, 166, 61, 0.28); display: flex; align-items: center; gap: 0.5rem; } .notice-left { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 31.21875rem; background: linear-gradient(135deg, #FFE69A, #F4CF62); color: #3f320f; font-size: 0.75rem; font-weight: 800; } .notice-swiper { height: 2.25rem; flex: 1; } .notice-item { display: flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; } .notice-text { color: #4b3e19; font-size: 0.875rem; line-height: 1.125rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notice-tag { color: #B4880F; font-size: 0.6875rem; padding: 0.125rem 0.3125rem; border-radius: 31.21875rem; background: rgba(215,167,46,0.18); } .notice-right { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 1.375rem; color: #B4880F; font-size: 0.8125rem; padding-left: 0.25rem; } /* 分割标题 */ .section-title { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.875rem 0; } .section-title::before { content: ''; display: block; width: 0.25rem; height: 0.875rem; border-radius: 0.25rem; background: linear-gradient(180deg, #FFE69A, #D7A72E); } .section-text { color: #6b5a2a; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03125rem; } /* 顶部英雄区:浅色玻璃卡片,带金色描边与柔和阴影 */ .hero { margin: 0.75rem; padding: 1rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.65); -webkit-backdrop-filter: blur(0.4375rem); backdrop-filter: blur(0.4375rem); border: 0.0625rem solid rgba(203, 166, 61, 0.35); box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.10), 0 0 0 0.0625rem rgba(255,255,255,0.60) inset; color: #473c22; } .hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.625rem; } .brand { font-size: 1.3125rem; font-weight: 700; letter-spacing: 0.0625rem; color: #B4880F; /* 金色标题 */ } .cta { padding: 0.3125rem 0.6875rem; border-radius: 31.21875rem; background: linear-gradient(135deg, rgba(255, 220, 128, 0.65), rgba(255, 240, 190, 0.65)); border: 0.0625rem solid rgba(203, 166, 61, 0.45); box-shadow: 0 0.1875rem 0.4375rem rgba(203, 166, 61, 0.25); } .cta-text { color: #5a4712; font-size: 0.8125rem; } .kpi { display: flex; } .kpi-item { flex: 1; } .kpi-label { opacity: 0.9; font-size: 0.75rem; color: #6b5a2a; } .kpi-value { display: block; margin-top: 0.375rem; font-size: 1.4375rem; font-weight: 800; color: #B4880F; } /* 功能容器:整体玻璃面板,增强融入感 */ .grid-wrap { margin: 0 0.625rem 1rem; padding: 0.875rem 0.625rem 0.375rem; border-radius: 0.75rem; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(0.3125rem); backdrop-filter: blur(0.3125rem); border: 0.0625rem solid rgba(203,166,61,0.22); box-shadow: 0 0.25rem 0.5625rem rgba(0,0,0,0.06); } /* 功能九宫格 */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: 2rem; grid-column-gap: 1.125rem; padding: 1.25rem 0.875rem 0.875rem; } .grid-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .icon { display: flex; align-items: center; justify-content: center; color: #6b5a2a; position: relative; } .icon-squircle { width: 4.125rem; height: 4.125rem; border-radius: 0.875rem; background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70)); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); border: 0.0625rem solid rgba(203,166,61,0.22); box-shadow: 0 0.3125rem 0.75rem rgba(0,0,0,0.10), 0 0 0 0.0625rem rgba(255,255,255,0.65) inset; overflow: hidden; } .icon-squircle::before { content: ''; position: absolute; left: -30%; top: -40%; width: 160%; height: 70%; background: linear-gradient( to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.0) ); transform: rotate(12deg); } .icon-img { width: 3rem; height: 3rem; } .icon-emoji { font-size: 1.875rem; line-height: 1; } .icon-placeholder { width: 2.625rem; height: 2.625rem; border-radius: 0.5625rem; background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(255,255,255,0.0)), repeating-linear-gradient(90deg, rgba(180,150,60,0.35) 0, rgba(180,150,60,0.35) 0.25rem, transparent 0.25rem, transparent 0.5rem), repeating-linear-gradient(0deg, rgba(180,150,60,0.20) 0, rgba(180,150,60,0.20) 0.25rem, transparent 0.25rem, transparent 0.5rem); box-shadow: inset 0 0 0 0.0625rem rgba(203,166,61,0.28); } .icon-text { font-size: 1.4375rem; font-weight: 700; } .grid-title { display: none; } .grid-chip { margin-top: 0.4375rem; padding: 0.1875rem 0.4375rem; border-radius: 31.21875rem; background: rgba(215,167,46,0.16); color: #5a4a1f; font-size: 0.6875rem; } /* 底部操作条:浅色半透明 + 金色主按钮 */ .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 0.4375rem 0.5625rem calc(env(safe-area-inset-bottom) + 0.4375rem); background: rgba(255,255,255,0.85); box-shadow: 0 -0.1875rem 0.5625rem rgba(0,0,0,0.08); -webkit-backdrop-filter: blur(0.3125rem); backdrop-filter: blur(0.3125rem); } .tab { flex: 1; text-align: center; color: #8a7535; font-size: 0.8125rem; } .tab.active { color: #B4880F; } .tab.primary { flex: 0 0 auto; min-width: 5.625rem; margin: 0 0.5625rem; padding: 0.5625rem 1rem; background: linear-gradient(135deg, #FFE69A 0%, #F4CF62 45%, #D7A72E 100%); color: #493c1b; border-radius: 31.21875rem; font-size: 0.9375rem; font-weight: 800; box-shadow: 0 0.3125rem 0.6875rem rgba(215,167,46,0.25), 0 0 0 0.0625rem rgba(255,255,255,0.70) inset; }