diff --git a/index.html b/index.html index c92582b..48b81db 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + Vue + 萧康云医
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue index 2c3ea2d..bd1ae6f 100644 --- a/src/components/SiteHeader.vue +++ b/src/components/SiteHeader.vue @@ -55,13 +55,15 @@ const themeOptions = [ const menuGroups = [ { key: 'home', label: '首页', to: '/', links: siteConfig.navigation.secondary.home }, { key: 'product', label: '产品', to: '/product', links: siteConfig.navigation.secondary.product }, - { key: 'video', label: '视频', to: '/video/user', activePath: '/video', links: siteConfig.navigation.secondary.video } + { key: 'video', label: '视频', to: '/video/user', activePath: '/video', links: siteConfig.navigation.secondary.video }, + { key: 'about', label: '关于我们', to: '/about', links: siteConfig.navigation.secondary.about } ] const activeTheme = computed(() => themeOptions.find((item) => item.value === themeMode.value) || themeOptions[0]) const isHome = computed(() => route.path === '/') const isProduct = computed(() => route.path.startsWith('/product')) const isVideo = computed(() => route.path.startsWith('/video')) +const isAbout = computed(() => route.path.startsWith('/about')) const isNavSolid = computed(() => isPastFirstScreen.value) const navTone = computed(() => { if (isHome.value && !isNavSolid.value) return 'dark' @@ -92,6 +94,14 @@ const routeSearchItems = computed(() => [ to: '/video/user', category: '页面', keywords: ['视频库', '演示视频', '用户端', '医生端', '店长端'] + }, + { + id: 'route-about', + title: '关于我们', + description: siteConfig.about.visionTitle, + to: '/about', + category: '页面', + keywords: ['关于我们', '愿景', '位置', siteConfig.about.locationName, siteConfig.about.visionBody] } ]) @@ -99,7 +109,8 @@ const navigationSearchItems = computed(() => { const groups = [ { category: '首页标题', links: siteConfig.navigation.secondary.home }, { category: '产品标题', links: siteConfig.navigation.secondary.product }, - { category: '视频分区', links: siteConfig.navigation.secondary.video } + { category: '视频分区', links: siteConfig.navigation.secondary.video }, + { category: '关于我们', links: siteConfig.navigation.secondary.about } ] return groups.flatMap((group) => @@ -197,7 +208,34 @@ const contentSearchItems = computed(() => { })) ]) - return [...homeItems, ...productItems, ...videoItems] + const aboutItems = [ + { + id: 'about-vision', + title: '我们的愿景', + description: siteConfig.about.visionTitle, + to: '/about#vision', + category: '关于我们', + keywords: ['愿景', siteConfig.about.visionTitle, siteConfig.about.visionBody] + }, + ...siteConfig.about.principles.map((item) => ({ + id: `about-principle-${item.title}`, + title: item.title, + description: item.body, + to: '/about#principles', + category: '发展理念', + keywords: [item.title, item.body] + })), + { + id: 'about-location', + title: siteConfig.about.locationName, + description: `在高德地图中查看${siteConfig.about.locationName}。`, + to: '/about#location', + category: '公司位置', + keywords: ['高德地图', '地图', siteConfig.about.locationName, siteConfig.about.mapQuery] + } + ] + + return [...homeItems, ...productItems, ...videoItems, ...aboutItems] }) const searchItems = computed(() => { @@ -425,7 +463,8 @@ onBeforeUnmount(() => { 'site-header-home': isHome && !isNavSolid, 'site-header-solid': isNavSolid, 'site-header-product': isProduct, - 'site-header-video': isVideo + 'site-header-video': isVideo, + 'site-header-about': isAbout } ]" > @@ -437,7 +476,8 @@ onBeforeUnmount(() => { 'site-nav-solid': isNavSolid, 'site-nav-overlay': !isNavSolid, 'site-nav-product': isProduct, - 'site-nav-video': isVideo + 'site-nav-video': isVideo, + 'site-nav-about': isAbout } ]" style="animation-delay: 0ms" diff --git a/src/components/vue-bits/BlurText.vue b/src/components/vue-bits/BlurText.vue new file mode 100644 index 0000000..eca7e92 --- /dev/null +++ b/src/components/vue-bits/BlurText.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue index 92f4ee1..9a6d771 100644 --- a/src/layouts/Header.vue +++ b/src/layouts/Header.vue @@ -9,6 +9,7 @@ const route = useRoute() const backdropClass = computed(() => { if (route.path.startsWith('/video')) return 'video-route-backdrop' if (route.path.startsWith('/product')) return 'product-route-backdrop' + if (route.path.startsWith('/about')) return 'about-route-backdrop' return 'home-route-backdrop' }) @@ -30,6 +31,7 @@ const backdropClass = computed(() => { 首页 产品 视频 + 关于我们 业务介绍 定价计划 联系咨询 diff --git a/src/router/index.js b/src/router/index.js index 54925e3..edd9174 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -11,6 +11,7 @@ const routes = [ { path: 'product', name: 'Product', component: () => import('@/views/product/index.vue') }, { path: 'video', redirect: '/video/user' }, { path: 'video/:audience(user|doctor|manager)', name: 'VideoShowcase', component: () => import('@/views/video/index.vue') }, + { path: 'about', name: 'About', component: () => import('@/views/about/index.vue') }, ], }, ] diff --git a/src/site.config.js b/src/site.config.js index c51513a..3c740f7 100644 --- a/src/site.config.js +++ b/src/site.config.js @@ -8,7 +8,8 @@ export const siteConfig = { primary: [ { label: '首页', to: '/' }, { label: '产品', to: '/product' }, - { label: '视频', to: '/video/user' } + { label: '视频', to: '/video/user' }, + { label: '关于我们', to: '/about' } ], secondary: { home: [ @@ -28,6 +29,12 @@ export const siteConfig = { { label: '用户端', to: '/video/user' }, { label: '医生端', to: '/video/doctor' }, { label: '小程序店长管理端', to: '/video/manager' } + ], + about: [ + { label: '我们的愿景', to: '/about#vision' }, + { label: '发展理念', to: '/about#principles' }, + { label: '公司位置', to: '/about#location' }, + { label: '联系咨询', to: '/product#contact' } ] } }, @@ -42,6 +49,32 @@ export const siteConfig = { phone: '400-820-9618', email: 'hello@xiaokangcloudmed.cn', address: '上海市浦东新区张江医疗创新园' + }, + about: { + visionTitle: '让基层医疗机构以更低门槛拥有稳定、合规、可持续的数字化能力。', + visionBody: '萧康云医希望把复杂的医疗协同、经营管理和线上服务能力，沉淀成机构每天都能用得顺手的云端工作台。我们关注的不只是系统上线，而是医生、运营团队和患者之间能否形成长期、可靠、可追踪的服务闭环。', + principles: [ + { + title: '医疗协同', + body: '围绕患者、医生和机构角色建立统一任务流，让跨岗位协作更清晰。' + }, + { + title: '长期服务', + body: '支持随访、复诊、回访和转诊沉淀，帮助机构建立持续服务能力。' + }, + { + title: '合规安全', + body: '以权限、审计、备案协助和部署选择为基础，适配医疗行业的合规要求。' + }, + { + title: '经营增长', + body: '把挂号、处方、对账、推广和客户运营串联起来，帮助机构看清经营状态。' + } + ], + locationName: '大远科创园A栋', + mapQuery: '大远科创园A栋', + mapUrl: 'https://www.amap.com/search?query=%E5%A4%A7%E8%BF%9C%E7%A7%91%E5%88%9B%E5%9B%ADA%E6%A0%8B', + mapOpenUrl: 'https://www.amap.com/search?query=%E5%A4%A7%E8%BF%9C%E7%A7%91%E5%88%9B%E5%9B%ADA%E6%A0%8B' } } diff --git a/src/style.css b/src/style.css index 3c824a9..7e1abba 100644 --- a/src/style.css +++ b/src/style.css @@ -2573,7 +2573,7 @@ textarea { display: block; font-size: clamp(3rem, 13vw, 9.5rem); font-weight: 400; - letter-spacing: -0.04em; + letter-spacing: 0; line-height: 0.92; margin: 0 0 1.2rem; perspective: 900px; @@ -4219,6 +4219,351 @@ textarea { } } +/* About page */ +.about-page { + --about-bg: #f8fbfc; + --about-bg-deep: #eef5f6; + --about-ink: #101416; + --about-muted: #5c6d74; + --about-panel: rgba(255, 255, 255, 0.92); + --about-panel-solid: #ffffff; + --about-line: rgba(15, 23, 42, 0.12); + --about-line-strong: rgba(13, 148, 136, 0.28); + --about-accent: #0f766e; + --about-accent-strong: #0f4f4a; + --about-sky: #0891b2; + --about-shadow: 0 24px 70px rgba(15, 23, 42, 0.12); + color: var(--about-ink); + overflow: clip; +} + +:root[data-theme="dark"] .about-route-backdrop, +:root[data-theme="dark"] .about-page { + --about-bg: #0c0f10; + --about-bg-deep: #050707; + --about-ink: #eef7fb; + --about-muted: rgba(215, 226, 234, 0.72); + --about-panel: rgba(13, 18, 20, 0.9); + --about-panel-solid: #0d1214; + --about-line: rgba(215, 226, 234, 0.14); + --about-line-strong: rgba(45, 212, 191, 0.32); + --about-accent: #2dd4bf; + --about-accent-strong: #99f6e4; + --about-sky: #22d3ee; + --about-shadow: 0 28px 82px rgba(0, 0, 0, 0.38); +} + +.about-route-backdrop { + background: + linear-gradient(180deg, var(--about-bg) 0%, var(--about-bg-deep) 48%, var(--about-bg) 100%); +} + +.about-route-backdrop::before { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 252, 0.58) 22%, rgba(245, 251, 252, 0.62) 82%, rgba(255, 255, 255, 0.74)); +} + +:root[data-theme="dark"] .about-route-backdrop::before { + background: + linear-gradient(180deg, rgba(5, 9, 10, 0.8), rgba(5, 9, 10, 0.58) 24%, rgba(5, 9, 10, 0.66) 82%, rgba(5, 9, 10, 0.84)); +} + +.about-route-backdrop .theme-backdrop-canvas { + opacity: 0.16; +} + +:root[data-theme="dark"] .about-route-backdrop .theme-backdrop-canvas { + opacity: 0.28; +} + +.about-hero { + min-height: 88vh; + padding-bottom: 4rem; +} + +.about-hero-inner, +.about-section-inner, +.about-location-shell { + margin: 0 auto; + max-width: 1180px; + width: 100%; +} + +.about-hero-copy { + display: grid; + gap: 1.25rem; + max-width: 880px; +} + +.about-eyebrow, +.about-section-heading span, +.about-vision-panel > span, +.about-map-meta span { + align-items: center; + color: var(--about-accent-strong); + display: inline-flex; + font-size: 0.8rem; + font-weight: 900; + gap: 0.5rem; +} + +.about-eyebrow { + background: color-mix(in srgb, var(--about-accent) 10%, var(--about-panel-solid)); + border: 1px solid var(--about-line-strong); + border-radius: 999px; + padding: 0.5rem 0.78rem; + width: max-content; +} + +.about-hero-title { + color: var(--about-ink); + font-size: clamp(2.35rem, 6vw, 5.25rem); + font-weight: 900; + letter-spacing: 0; + line-height: 1.02; + margin: 0; + max-width: 960px; + text-wrap: balance; +} + +.about-hero-subtitle, +.about-section-heading p, +.about-vision-panel p, +.about-principle-card p, +.about-map-meta small { + color: var(--about-muted); + line-height: 1.78; +} + +.about-hero-subtitle { + font-size: clamp(1.05rem, 2vw, 1.45rem); + max-width: 720px; +} + +.about-hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 0.75rem; +} + +.about-primary-action, +.about-secondary-action, +.about-map-meta a { + align-items: center; + border-radius: 999px; + display: inline-flex; + font-weight: 900; + gap: 0.45rem; + min-height: 46px; + padding: 0.75rem 1rem; + text-decoration: none; + transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out; +} + +.about-primary-action, +.about-map-meta a { + background: var(--about-ink); + color: var(--about-bg); +} + +.about-primary-action:hover, +.about-map-meta a:hover { + background: linear-gradient(135deg, #ffffff 0%, #c8fff2 48%, #ffffff 100%); + color: #041012; + transform: translateY(-1px); +} + +.about-secondary-action { + border: 1px solid var(--about-line-strong); + color: var(--about-ink); +} + +.about-secondary-action:hover { + background: color-mix(in srgb, var(--about-accent) 10%, transparent); +} + +.about-section { + padding: 5.5rem 0; +} + +.about-section-muted { + background: + linear-gradient(120deg, color-mix(in srgb, var(--about-accent) 8%, transparent), transparent 42%), + color-mix(in srgb, var(--about-panel-solid) 74%, transparent); +} + +:root[data-theme="dark"] .about-section-muted { + background: + linear-gradient(120deg, color-mix(in srgb, var(--about-accent) 10%, transparent), transparent 42%), + rgba(7, 20, 23, 0.34); +} + +.about-vision-panel, +.about-principle-card, +.about-map-panel { + background: var(--about-panel); + border: 1px solid var(--about-line); + box-shadow: var(--about-shadow); + color: var(--about-ink); + overflow: hidden; + position: relative; +} + +.about-vision-panel { + border-radius: 30px; + display: grid; + gap: 1rem; + padding: clamp(1.5rem, 4vw, 2.5rem); +} + +.about-vision-panel h2, +.about-section-heading h2 { + color: var(--about-ink); + font-size: clamp(2rem, 4vw, 3.6rem); + font-weight: 900; + line-height: 1.08; + margin: 0.4rem 0 0; + text-wrap: balance; +} + +.about-vision-panel p { + font-size: 1.08rem; + max-width: 880px; +} + +.about-section-heading { + display: grid; + gap: 0.6rem; + max-width: 760px; +} + +.about-principle-grid { + display: grid; + gap: 1rem; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-top: 2rem; +} + +.about-principle-reveal { + height: 100%; +} + +.about-principle-card { + border-radius: 24px; + display: grid; + gap: 0.7rem; + height: 100%; + min-height: 240px; + padding: 1.2rem; + transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out; +} + +.about-principle-card:hover { + border-color: var(--about-line-strong); + box-shadow: 0 28px 78px color-mix(in srgb, var(--about-accent) 12%, rgba(15, 23, 42, 0.12)); + transform: translateY(-2px); +} + +.about-principle-card svg, +.about-map-meta > svg { + color: var(--about-accent); +} + +.about-principle-card h3 { + color: var(--about-ink); + font-size: 1.18rem; + font-weight: 900; + margin: 0; +} + +.about-location-shell { + display: grid; + gap: 1.5rem; + max-width: 1480px; +} + +.about-map-panel { + border-radius: 30px; + display: grid; + gap: 1rem; + grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.36fr); + padding: 1rem; +} + +.about-map-frame { + aspect-ratio: 16 / 9; + background: + linear-gradient(135deg, color-mix(in srgb, var(--about-accent) 12%, var(--about-panel-solid)), var(--about-panel-solid)); + border: 1px solid var(--about-line); + border-radius: 24px; + min-height: 560px; + overflow: hidden; + position: relative; +} + +.about-map-frame iframe { + border: 0; + height: 100%; + width: 100%; +} + +.about-map-meta { + align-content: center; + display: grid; + gap: 1rem; + padding: 0.5rem; +} + +.about-map-meta strong { + color: var(--about-ink); + display: block; + font-size: 1.35rem; + margin: 0.25rem 0; +} + +@media (max-width: 1023px) { + .about-principle-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .about-map-panel { + grid-template-columns: 1fr; + } + + .about-map-frame { + min-height: 500px; + } +} + +@media (max-width: 767px) { + .about-hero { + min-height: auto; + } + + .about-hero-actions, + .about-primary-action, + .about-secondary-action, + .about-map-meta a { + width: 100%; + } + + .about-primary-action, + .about-secondary-action, + .about-map-meta a { + justify-content: center; + } + + .about-principle-grid { + grid-template-columns: 1fr; + } + + .about-map-frame { + aspect-ratio: 4 / 5; + min-height: 460px; + } +} + /* Final nav contrast, backdrop interaction, and home marquee fixes */ .site-header { --nav-ink: #f8ffff; @@ -4242,7 +4587,8 @@ textarea { .site-header-home, :root[data-theme="dark"] .site-header-solid, -:root[data-theme="dark"] .site-header-product { +:root[data-theme="dark"] .site-header-product, +:root[data-theme="dark"] .site-header-about { --nav-ink: #f8ffff; --nav-muted: rgba(215, 226, 234, 0.78); --nav-panel: rgba(12, 12, 12, 0.78); diff --git a/src/views/about/index.vue b/src/views/about/index.vue new file mode 100644 index 0000000..383e0c1 --- /dev/null +++ b/src/views/about/index.vue @@ -0,0 +1,126 @@ + + +