diff --git a/src/styles.css b/src/styles.css index 607e1a5..d363a51 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,724 +1,110 @@ :root { - font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #17322a; - background-color: #edebe4; - - /* Brand Theme Tokens */ - --primary-deep: #09372d; - --primary: #0c4d3f; - --primary-light: #156655; - --primary-subtle: #e8f2ef; - --accent-gold: #c89547; - --accent-light: #fdf6ea; - --accent-warm: #e3b063; - - /* Neutrals */ - --bg-app: #f6f5f0; - --card-bg: #ffffff; - --line: rgba(12, 77, 63, 0.08); - --line-light: rgba(12, 77, 63, 0.04); - --text-main: #142e27; - --text-sub: #576d65; - --text-muted: #8d9e97; - - /* Shadows */ - --shadow-card: 0 4px 16px -2px rgba(9, 55, 45, 0.05), 0 2px 6px -1px rgba(9, 55, 45, 0.03); - --shadow-float: 0 12px 32px -4px rgba(9, 55, 45, 0.12); + font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; + color: #173a34; + background: #f2f0e9; + font-synthesis: none; + --green: #0c5045; + --deep: #123f37; + --cream: #f8f4e8; + --gold: #d6a657; + --line: rgba(18, 63, 55, 0.12); } -* { - box-sizing: border-box; - margin: 0; - padding: 0; - -webkit-tap-highlight-color: transparent; -} +* { box-sizing: border-box; } +body { margin: 0; min-width: 320px; min-height: 100vh; background: #f2f0e9; } +button, input, textarea { font: inherit; } +button { cursor: pointer; } -body { - min-height: 100vh; - background-color: #edebe4; - display: flex; - justify-content: center; -} - -#app { - width: 100%; - max-width: 460px; - min-height: 100vh; - background: var(--bg-app); - box-shadow: 0 0 40px rgba(0, 0, 0, 0.06); - position: relative; - overflow-x: hidden; - display: flex; - flex-direction: column; -} - -button, input, textarea { - font: inherit; - border: none; - outline: none; -} - -button { - cursor: pointer; -} - -/* Common Typography */ .eyebrow { - display: inline-flex; - align-items: center; - gap: 4px; - margin: 0 0 6px; - color: var(--accent-gold); + margin: 0 0 8px; + color: #b68b48; font-size: 11px; font-weight: 700; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -/* Page Shell Layout */ -.page-shell { - min-height: 100vh; - padding: 16px 16px calc(90px + env(safe-area-inset-bottom)); - background: var(--bg-app); - display: flex; - flex-direction: column; -} - -/* Card Common */ -.section-card { - background: var(--card-bg); - border-radius: 20px; - padding: 18px 16px; - margin-bottom: 14px; - border: 1px solid var(--line); - box-shadow: var(--shadow-card); -} - -.section-title { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 14px; -} - -.section-title > span { - font-size: 16px; - font-weight: 700; - color: var(--text-main); - letter-spacing: -0.01em; -} - -.section-title small { - color: var(--text-muted); - font-size: 12px; -} - -.section-title button { - background: transparent; - color: var(--primary); - font-size: 13px; - font-weight: 600; - padding: 4px 8px; - border-radius: 6px; -} - -/* Auth Page */ -.auth-page { - min-height: 100vh; - background: var(--bg-app); - display: flex; - flex-direction: column; + letter-spacing: 0.16em; } +.auth-page { min-height: 100vh; background: var(--cream); } .brand-panel { - padding: calc(36px + env(safe-area-inset-top)) 24px 38px; + min-height: 42vh; + padding: 54px 28px 42px; color: #fff; background: - radial-gradient(circle at 85% 15%, rgba(227, 176, 99, 0.24), transparent 45%), - radial-gradient(circle at 10% 90%, rgba(21, 102, 85, 0.4), transparent 50%), - linear-gradient(155deg, var(--primary-deep) 0%, var(--primary) 65%, #13463b 100%); - border-radius: 0 0 32px 32px; - position: relative; + radial-gradient(circle at 82% 12%, rgba(236, 202, 137, .28), transparent 28%), + linear-gradient(145deg, #0b5548, #123d37 74%); + border-radius: 0 0 42px 42px; +} +.brand-mark { + display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 28px; + border: 1px solid rgba(255,255,255,.42); border-radius: 50%; font-family: serif; font-size: 24px; +} +.brand-panel h1 { max-width: 560px; margin: 0; font-family: "Songti SC", serif; font-size: clamp(32px, 8vw, 54px); line-height: 1.2; font-weight: 500; } +.brand-copy { max-width: 480px; margin: 18px 0 24px; color: rgba(255,255,255,.72); line-height: 1.7; } +.feature-row { display: flex; gap: 10px; flex-wrap: wrap; } +.feature-row span { padding: 7px 12px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; font-size: 12px; } + +.auth-card { position: relative; width: min(520px, calc(100% - 32px)); margin: -20px auto 0; padding: 28px 22px; background: #fff; border-radius: 24px; box-shadow: 0 18px 50px rgba(24,59,52,.12); } +.auth-heading h2 { margin: 0; font-family: "Songti SC", serif; font-size: 28px; } +.auth-heading > p:last-child { margin: 8px 0 24px; color: #70817d; font-size: 14px; } +.auth-card .van-field { margin-bottom: 12px; padding: 14px 12px; background: #f7f7f3; border-radius: 12px; } +.auth-card .van-button { margin-top: 20px; height: 48px; } +.text-button { display: block; margin: 18px auto 0; border: 0; background: transparent; color: var(--green); font-size: 14px; } +.privacy-note { margin: 20px 0 0; color: #9a9f9c; font-size: 11px; line-height: 1.6; text-align: center; } + +.page-shell { min-height: 100vh; padding: 28px 16px 110px; background: #f3f1ea; } +.page-header, .dashboard-header { max-width: 760px; margin: 0 auto 24px; padding: 12px 4px; } +.page-header h1, .dashboard-header h1 { margin: 0; font-family: "Songti SC", serif; font-size: 30px; font-weight: 600; } +.page-header > p:last-child, .dashboard-header > div > p:last-child { color: #73817d; line-height: 1.6; } + +.section-card, .hero-card, .metric-strip { max-width: 760px; margin: 0 auto 16px; padding: 20px; background: #fff; border: 1px solid rgba(18,63,55,.06); border-radius: 20px; box-shadow: 0 8px 24px rgba(31,66,58,.05); } +.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } +.section-title > span { font-size: 18px; font-weight: 700; } +.section-title small { color: #82908c; } +.section-title button { border: 0; background: transparent; color: var(--green); } + +.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } +.module-card { min-height: 160px; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: #f8f8f4; color: var(--deep); transition: .2s; } +.module-card.selected { color: #fff; background: var(--green); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(12,80,69,.18); } +.module-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border: 1px solid currentColor; border-radius: 50%; font-size: 20px; } +.module-card strong, .module-card small { display: block; } +.module-card small { min-height: 36px; margin-top: 7px; opacity: .7; line-height: 1.5; } +.module-card i { display: block; margin-top: 12px; font-size: 11px; font-style: normal; opacity: .75; } +.form-card .van-field { padding: 14px 0; border-bottom: 1px solid #eee; } +.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } +.sticky-action { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); background: rgba(248,246,240,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); } +.sticky-action .van-button { max-width: 720px; height: 50px; margin: 0 auto; } + +.dashboard-header { display: flex; align-items: center; justify-content: space-between; } +.avatar-button { width: 46px; height: 46px; color: #fff; border: 0; border-radius: 50%; background: var(--green); } +.hero-card { padding: 26px; color: #fff; background: linear-gradient(140deg, #0c5549, #163f38); } +.hero-card h2 { margin: 6px 0 12px; font-family: "Songti SC", serif; font-size: 28px; } +.hero-card > p:not(.eyebrow) { color: rgba(255,255,255,.72); line-height: 1.7; } +.tag-row { display: flex; gap: 8px; margin: 18px 0; } +.tag-row span { padding: 6px 12px; border-radius: 20px; background: rgba(255,255,255,.12); font-size: 12px; } +.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 8px; } +.metric-strip div { padding: 4px 14px; border-right: 1px solid var(--line); } +.metric-strip div:last-child { border-right: 0; } +.metric-strip small, .metric-strip strong { display: block; } +.metric-strip small { color: #80908b; font-size: 11px; } +.metric-strip strong { margin-top: 7px; font-size: 21px; } +.metric-strip em { margin-left: 3px; font-size: 11px; font-style: normal; font-weight: 500; } +.plan-item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid #edf0ec; } +.plan-item:first-of-type { border-top: 0; } +.plan-index { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--green); background: #e9f1ed; } +.plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } +.plan-heading span { color: #b1813f; font-size: 12px; text-align: right; } +.plan-item p, .scene-row p { margin: 7px 0 0; color: #75847f; font-size: 13px; line-height: 1.6; } +.status-dot { color: #a27639 !important; } +.scene-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border-radius: 14px; background: #f6f7f3; } +.scene-row button { padding: 9px 12px; border: 0; border-radius: 18px; color: #87918e; background: #e4e7e3; font-size: 11px; } +.medical-note { max-width: 760px; margin: 24px auto; color: #969e9b; font-size: 11px; text-align: center; } +.loading-card { color: #73817d; text-align: center; } + +@media (max-width: 520px) { + .module-grid { grid-template-columns: 1fr; } + .module-card { min-height: auto; } + .two-column { grid-template-columns: 1fr; } + .brand-panel { min-height: 390px; } + .auth-card { margin-top: -54px; } + .plan-heading { display: block; } + .plan-heading span { display: block; margin-top: 5px; text-align: left; } } - -.brand-badge { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 5px 12px 5px 6px; - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.18); - border-radius: 24px; - font-size: 12px; - margin-bottom: 20px; - backdrop-filter: blur(8px); -} - -.brand-badge-icon { - width: 24px; - height: 24px; - background: var(--accent-gold); - color: #fff; - border-radius: 50%; - display: grid; - place-items: center; - font-weight: 700; - font-size: 13px; -} - -.brand-panel h1 { - font-size: 28px; - font-weight: 700; - line-height: 1.25; - margin-bottom: 10px; - letter-spacing: -0.02em; -} - -.brand-copy { - font-size: 13px; - color: rgba(255, 255, 255, 0.76); - line-height: 1.6; - margin-bottom: 18px; -} - -.feature-pill-row { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.feature-pill-row span { - padding: 5px 11px; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 16px; - font-size: 11px; - color: rgba(255, 255, 255, 0.9); -} - -.auth-card { - width: calc(100% - 32px); - margin: -24px auto 24px; - padding: 22px 20px 24px; - background: #fff; - border-radius: 24px; - box-shadow: var(--shadow-float); - border: 1px solid var(--line); - position: relative; - z-index: 2; -} - -.auth-tab-switch { - display: flex; - background: #f1efea; - border-radius: 12px; - padding: 3px; - margin-bottom: 20px; -} - -.auth-tab-switch button { - flex: 1; - padding: 9px 0; - font-size: 14px; - font-weight: 600; - border-radius: 9px; - color: var(--text-sub); - background: transparent; - transition: all 0.2s ease; -} - -.auth-tab-switch button.active { - background: #ffffff; - color: var(--primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); -} - -.auth-card .van-field { - margin-bottom: 12px; - padding: 12px 14px; - background: #f8f7f4; - border-radius: 14px; - border: 1px solid transparent; - transition: border-color 0.2s; -} - -.auth-card .van-field:focus-within { - border-color: var(--primary); - background: #ffffff; -} - -.auth-card .van-button { - margin-top: 14px; - height: 48px; - font-weight: 600; - font-size: 15px; - box-shadow: 0 8px 20px -2px rgba(12, 77, 63, 0.28); -} - -.privacy-note { - margin-top: 18px; - font-size: 11px; - color: var(--text-muted); - text-align: center; - line-height: 1.5; -} - -/* Onboarding Header */ -.page-header { - margin-bottom: 18px; - padding: 6px 4px 0; -} - -.page-header h1 { - font-size: 24px; - font-weight: 700; - color: var(--text-main); - margin: 4px 0 8px; - letter-spacing: -0.02em; -} - -.page-header p { - color: var(--text-sub); - font-size: 13px; - line-height: 1.5; -} - -/* Module Selection Grid (3 Columns) */ -.module-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; -} - -.module-card { - padding: 14px 10px; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - border: 1.5px solid var(--line); - border-radius: 16px; - background: #faf9f6; - color: var(--text-main); - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - position: relative; -} - -.module-card.selected { - border-color: var(--primary); - background: var(--primary-subtle); - color: var(--primary); -} - -.module-icon { - width: 36px; - height: 36px; - border-radius: 50%; - background: #ffffff; - display: grid; - place-items: center; - font-size: 18px; - margin-bottom: 8px; - border: 1px solid var(--line); - box-shadow: var(--shadow-card); -} - -.module-card.selected .module-icon { - background: var(--primary); - color: #fff; - border-color: transparent; -} - -.module-card strong { - font-size: 13px; - font-weight: 700; - margin-bottom: 4px; -} - -.module-card small { - font-size: 10px; - color: var(--text-muted); - line-height: 1.3; -} - -.module-card.selected small { - color: var(--primary-light); -} - -.module-check { - margin-top: 8px; - padding: 2px 8px; - border-radius: 10px; - font-size: 10px; - font-weight: 600; - background: #eee; - color: var(--text-muted); -} - -.module-card.selected .module-check { - background: var(--primary); - color: #fff; -} - -/* Profile Form Elements */ -.form-group-title { - font-size: 12px; - font-weight: 700; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.05em; - margin: 12px 0 8px; -} - -.two-column { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; -} - -.custom-field-box { - background: #f8f7f3; - border-radius: 14px; - padding: 8px 12px; - margin-bottom: 8px; - border: 1px solid transparent; - transition: all 0.2s; -} - -.custom-field-box:focus-within { - background: #fff; - border-color: var(--primary); -} - -.custom-field-box .van-field { - padding: 0; - background: transparent; -} - -/* Sticky Bottom Action */ -.sticky-action { - position: fixed; - z-index: 50; - left: 50%; - transform: translateX(-50%); - width: 100%; - max-width: 460px; - bottom: 0; - padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); - background: rgba(246, 245, 240, 0.92); - backdrop-filter: blur(16px); - border-top: 1px solid var(--line); -} - -.sticky-action .van-button { - height: 48px; - font-size: 15px; - font-weight: 600; - box-shadow: 0 8px 24px -2px rgba(12, 77, 63, 0.25); -} - -/* Dashboard Header */ -.dashboard-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 16px; - padding: 8px 2px 0; -} - -.header-meta h1 { - font-size: 22px; - font-weight: 700; - color: var(--text-main); - letter-spacing: -0.02em; - line-height: 1.3; -} - -.date-badge { - display: inline-flex; - align-items: center; - gap: 4px; - margin-top: 4px; - color: var(--text-sub); - font-size: 12px; -} - -.user-chip { - display: flex; - align-items: center; - gap: 8px; - padding: 5px 12px 5px 6px; - background: #fff; - border: 1px solid var(--line); - border-radius: 20px; - box-shadow: var(--shadow-card); - transition: transform 0.15s; -} - -.user-chip:active { - transform: scale(0.97); -} - -.avatar-badge { - width: 28px; - height: 28px; - border-radius: 50%; - background: var(--primary); - color: #fff; - display: grid; - place-items: center; - font-size: 13px; - font-weight: 700; -} - -.user-chip-name { - font-size: 12px; - font-weight: 600; - color: var(--text-main); -} - -/* Hero Health Card */ -.hero-card { - padding: 22px 20px; - color: #fff; - border-radius: 24px; - background: - radial-gradient(circle at 90% 10%, rgba(227, 176, 99, 0.28), transparent 45%), - linear-gradient(145deg, var(--primary-deep) 0%, var(--primary) 70%, #155749 100%); - box-shadow: var(--shadow-float); - border: 1px solid rgba(255, 255, 255, 0.12); - margin-bottom: 14px; -} - -.hero-top-row { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; -} - -.hero-card h2 { - font-size: 22px; - font-weight: 700; - line-height: 1.3; - margin-bottom: 8px; - letter-spacing: -0.01em; -} - -.hero-summary { - font-size: 13px; - color: rgba(255, 255, 255, 0.8); - line-height: 1.65; - margin-bottom: 16px; -} - -.tag-row { - display: flex; - gap: 6px; - flex-wrap: wrap; - margin-bottom: 14px; -} - -.tag-pill { - padding: 4px 10px; - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.16); - border-radius: 12px; - font-size: 11px; - color: #fff; -} - -.hero-action-row { - display: flex; - gap: 10px; - align-items: center; - margin-top: 8px; -} - -/* Metrics Strip (3 Cards) */ -.metric-strip { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; - margin-bottom: 14px; -} - -.metric-card { - background: #fff; - border-radius: 16px; - padding: 12px 10px; - text-align: center; - border: 1px solid var(--line); - box-shadow: var(--shadow-card); -} - -.metric-label { - display: flex; - align-items: center; - justify-content: center; - gap: 3px; - font-size: 11px; - color: var(--text-muted); - margin-bottom: 4px; -} - -.metric-card strong { - display: block; - font-size: 19px; - font-weight: 800; - color: var(--text-main); - letter-spacing: -0.02em; -} - -.metric-card em { - font-size: 11px; - font-style: normal; - font-weight: 500; - color: var(--text-sub); - margin-left: 2px; -} - -.metric-desc { - font-size: 10px; - color: var(--accent-gold); - margin-top: 2px; -} - -/* Actionable Plan Items */ -.plan-item { - display: flex; - gap: 12px; - padding: 14px 0; - border-top: 1px solid var(--line); -} - -.plan-item:first-of-type { - border-top: none; - padding-top: 2px; -} - -.plan-item-icon { - width: 36px; - height: 36px; - border-radius: 12px; - background: var(--primary-subtle); - color: var(--primary); - display: grid; - place-items: center; - font-size: 16px; - flex-shrink: 0; -} - -.plan-item-content { - flex: 1; -} - -.plan-item-header { - display: flex; - align-items: baseline; - justify-content: space-between; - margin-bottom: 4px; -} - -.plan-item-header strong { - font-size: 14px; - font-weight: 700; - color: var(--text-main); -} - -.plan-item-target { - font-size: 11px; - color: var(--accent-gold); - font-weight: 600; - background: var(--accent-light); - padding: 2px 7px; - border-radius: 6px; -} - -.plan-item-advice { - font-size: 12px; - color: var(--text-sub); - line-height: 1.6; -} - -/* Smart Space / IoT Card */ -.smart-space-card { - background: linear-gradient(135deg, #ffffff 0%, #f7faf9 100%); - border: 1px solid rgba(12, 77, 63, 0.12); -} - -.smart-scene-box { - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px 14px; - background: #fff; - border: 1px solid var(--line); - border-radius: 14px; -} - -.scene-icon-title { - display: flex; - align-items: center; - gap: 10px; -} - -.scene-icon { - width: 34px; - height: 34px; - border-radius: 10px; - background: #f2f5f4; - color: var(--primary); - display: grid; - place-items: center; - font-size: 16px; -} - -.scene-text strong { - display: block; - font-size: 13px; - font-weight: 700; - color: var(--text-main); -} - -.scene-text p { - font-size: 11px; - color: var(--text-muted); - margin-top: 2px; -} - -.smart-badge { - font-size: 10px; - padding: 4px 8px; - border-radius: 8px; - background: #f1efea; - color: var(--text-sub); - font-weight: 600; -} - -.medical-disclaimer { - text-align: center; - font-size: 11px; - color: var(--text-muted); - line-height: 1.6; - margin: 18px 8px 10px; -} - -/* Mobile Touch Optimization */ -@media (max-width: 360px) { - .module-grid { - gap: 6px; - } - .module-card { - padding: 10px 6px; - } - .module-card strong { - font-size: 12px; - } - .metric-card strong { - font-size: 16px; - } -} - diff --git a/src/views/AuthView.vue b/src/views/AuthView.vue index 8862ed6..84ef77e 100644 --- a/src/views/AuthView.vue +++ b/src/views/AuthView.vue @@ -9,7 +9,7 @@ const router = useRouter() const mode = ref<'login' | 'register'>('login') const loading = ref(false) const form = reactive({ phone: '', password: '', displayName: '' }) -const title = computed(() => mode.value === 'login' ? '欢迎回来' : '开启专属健康档案') +const title = computed(() => mode.value === 'login' ? '欢迎回来' : '创建健康档案') async function submit() { loading.value = true @@ -31,84 +31,54 @@ async function submit() { - diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue index 7cfc875..88d3e46 100644 --- a/src/views/DashboardView.vue +++ b/src/views/DashboardView.vue @@ -1,7 +1,7 @@