104 lines
3.1 KiB
CSS
104 lines
3.1 KiB
CSS
|
|
.home {
|
|
padding-bottom: 4.375rem;
|
|
/* 深色奢华背景：暗金晕光 + 碳素黑 */
|
|
background: radial-gradient(120% 80% at 100% 0, rgba(214,175,85,0.10) 0, rgba(214,175,85,0.00) 40%), linear-gradient(180deg, #0b0c10 0%, #090b11 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 顶部渐变英雄区：深色石墨 + 金色高光，并叠加金属拉丝纹理 */
|
|
.hero {
|
|
margin: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 0.0625rem, rgba(0,0,0,0.0) 0.0625rem, rgba(0,0,0,0.0) 0.5rem), linear-gradient(145deg, #16181e 0%, #0e1016 100%);
|
|
color: #ffffff;
|
|
border: 0.0625rem solid rgba(236, 203, 116, 0.6);
|
|
box-shadow: 0 0.5625rem 1.125rem rgba(0, 0, 0, 0.35), 0 0 0 0.0625rem rgba(236,203,116,0.25) inset;
|
|
}
|
|
.hero-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.brand {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.0625rem;
|
|
color: #f2d58a;
|
|
}
|
|
.cta {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 31.21875rem;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(0, 153, 255, 0.25));
|
|
border: 0.0625rem solid rgba(0, 187, 255, 0.4);
|
|
}
|
|
.cta-text { color: #ffffff; font-size: 0.8125rem;
|
|
}
|
|
.kpi { display: flex;
|
|
}
|
|
.kpi-item { flex: 1;
|
|
}
|
|
.kpi-label { opacity: 0.9; font-size: 0.75rem;
|
|
}
|
|
.kpi-value { display: block; margin-top: 0.375rem; font-size: 1.4375rem; font-weight: 700; color: #f2d58a;
|
|
}
|
|
|
|
/* 功能九宫格 */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-row-gap: 1.5rem;
|
|
grid-column-gap: 0.875rem;
|
|
padding: 1.25rem 0.875rem 0.625rem;
|
|
}
|
|
.grid-item { display: flex; flex-direction: column; align-items: center;
|
|
}
|
|
.icon {
|
|
width: 3.75rem;
|
|
height: 3.75rem;
|
|
border-radius: 0.875rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background: linear-gradient(145deg, #1a1d24 0%, #0f1218 100%);
|
|
border: 0.0625rem solid rgba(236,203,116,0.55);
|
|
box-shadow: 0 0.3125rem 0.6875rem rgba(0,0,0,0.26), 0 0 0 0.0625rem rgba(236,203,116,0.18) inset;
|
|
}
|
|
.icon-text { font-size: 1.4375rem; font-weight: 600;
|
|
}
|
|
.grid-title { margin-top: 0.5625rem; color: #e6e6e6; font-size: 0.875rem;
|
|
}
|
|
|
|
/* 底部操作条 */
|
|
.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(12,14,20,0.92);
|
|
box-shadow: 0 -0.1875rem 0.5625rem rgba(0,0,0,0.35);
|
|
-webkit-backdrop-filter: blur(0.25rem);
|
|
backdrop-filter: blur(0.25rem);
|
|
}
|
|
.tab { flex: 1; text-align: center; color: #aaa; font-size: 0.8125rem;
|
|
}
|
|
.tab.active { color: #f2d58a;
|
|
}
|
|
.tab.primary {
|
|
flex: 0 0 auto;
|
|
min-width: 5.625rem;
|
|
margin: 0 0.5625rem;
|
|
padding: 0.5625rem 1rem;
|
|
background: linear-gradient(135deg, #F6E27A 0%, #E6C65B 40%, #CBA63D 100%);
|
|
color: #212121;
|
|
border-radius: 31.21875rem;
|
|
font-size: 0.9375rem;
|
|
font-weight: 700;
|
|
box-shadow: 0 0.3125rem 0.6875rem rgba(203,166,61,0.35), 0 0 0 0.0625rem rgba(255,255,255,0.45) inset;
|
|
}
|