前端搭建

2025-09-15 21:22:59 +08:00
parent e12034b1d2
commit 9569326c37
31 changed files with 1085 additions and 3 deletions
--- a/frontend/unpackage/dist/dev/app-plus/pages/index/index.css
+++ b/frontend/unpackage/dist/dev/app-plus/pages/index/index.css
@@ -0,0 +1,103 @@
+
+.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;
+}