chore: initialize frontend miniapp repository

2026-06-09 21:08:45 +08:00
commit a90f63cef0
107 changed files with 60454 additions and 0 deletions
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -0,0 +1,67 @@
+/* 通用样式 */
+@import './variables.scss';
+
+/* 布局 */
+.container {
+  width: 100%;
+  min-height: 100vh;
+}
+
+.page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--museum-bg-light);
+}
+
+/* 卡片 */
+.card {
+  background-color: var(--museum-bg-surface);
+  border-radius: var(--radius-card);
+  padding: var(--space-md);
+  box-shadow: var(--shadow-sm);
+}
+
+/* 按钮 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-button);
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+.btn-primary {
+  background-color: var(--museum-accent);
+  color: var(--museum-text-primary);
+}
+
+.btn-secondary {
+  background-color: var(--museum-bg-surface);
+  color: var(--museum-text-secondary);
+  border: 1px solid var(--museum-border-light);
+}
+
+/* 输入框 */
+.input {
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--museum-border-light);
+  border-radius: var(--radius-small);
+  font-size: 14px;
+  background-color: var(--museum-bg-surface);
+}
+
+/* 毛玻璃效果 */
+.glass {
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: var(--blur-medium);
+  -webkit-backdrop-filter: var(--blur-medium);
+}
+
+.glass-light {
+  background-color: rgba(255, 255, 255, 0.4);
+  backdrop-filter: var(--blur-light);
+  -webkit-backdrop-filter: var(--blur-light);
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -0,0 +1,51 @@
+/* CSS 变量定义 */
+:root {
+  /* 主色调 */
+  --museum-accent: #E0DF00;
+  --museum-accent-dark: #C2C600;
+
+  /* 背景色 */
+  --museum-bg-map: #F6F8F5;
+  --museum-bg-light: #F9FAFB;
+  --museum-bg-surface: #FFFFFF;
+  --museum-bg-cream: #F5F5ED;
+
+  /* 文字色 */
+  --museum-text-primary: #000000;
+  --museum-text-secondary: #3F3F3F;
+  --museum-text-tertiary: #696962;
+  --museum-text-disabled: #ADB0B4;
+
+  /* 边框色 */
+  --museum-border-light: #E5E5E5;
+  --museum-border-medium: #DEDEDE;
+  --museum-border-dark: #C2C6D6;
+
+  /* 辅助色 */
+  --museum-poi-marker: #5ED0E4;
+  --museum-overlay: rgba(0, 0, 0, 0.2);
+
+  /* 圆角 */
+  --radius-phone: 32px;
+  --radius-card: 16px;
+  --radius-button: 8px;
+  --radius-small: 6px;
+  --radius-mini: 5.5px;
+
+  /* 间距 */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+
+  /* 阴影 */
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
+
+  /* 模糊 */
+  --blur-light: blur(5px);
+  --blur-medium: blur(10px);
+  --blur-heavy: blur(12px);
+}