更新

src/App.vue

@@ -1,29 +1,15 @@
 <template>
   <div class="min-h-screen bg-surface text-text-primary font-sans">
-    <!-- ① 顶部导航 -->
     <Navbar />
-
     <main>
-      <Hero />
-      <Features />
-      <Services />
-      <About />
-      <Location />
-      <Contact />
+      <RouterView />
     </main>
-
-    <!-- ⑦ 底部信息 -->
     <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
+import { RouterView } from 'vue-router'
 import Navbar from './components/Navbar.vue'
-import Hero from './components/Hero.vue'
-import Features from './components/Features.vue'
-import Services from './components/Services.vue'
-import About from './components/About.vue'
-import Contact from './components/Contact.vue'
-import Location from './components/Location.vue'
 import Footer from './components/Footer.vue'
 </script>

src/assets/main.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
-
+html {
+  scroll-behavior: smooth;
+}
 /* ==========================================================
    Zozolive 官网主题配色
    风格：深色背景 + 青绿色品牌色

src/components/Features.vue

@@ -1,78 +1,12 @@
 <template>
-  <!-- Features区块：重新定义教学制作体验 -->
-  <section class="relative bg-surface">
-    <div class="max-w-6xl mx-auto px-6 py-20">
-
-      <!-- 标题区：顶部小标签 + 主标题 + 描述 -->
-      <div class="text-center mb-14">
-        <div
-          class="inline-flex items-center px-4 py-1.5 rounded-full bg-surface-2 border border-border text-xs text-text-secondary mb-6">
-          为什么选择我们
-        </div>
-        <h2 class="text-3xl sm:text-4xl font-bold text-text-primary leading-tight">
-          重新定义教学创作体验
-        </h2>
-        <p class="mt-4 text-sm text-text-secondary max-w-xl mx-auto leading-relaxed">
-          无论你是个人知识创作者、在线教育机构还是企业培训团队
-        </p>
-        <p class=" text-sm text-text-secondary max-w-xl mx-auto leading-relaxed">
-          Zozolive都为你提供专业级的工具和无缝的工作流。
-        </p>
-      </div>
-
-      <!-- 三张功能卡片 -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div v-for="card in cards" :key="card.title" class="bg-surface-2 border border-border rounded-2xl p-6">
-          <!-- 图片区：在卡片内有内边距，图片有圆角 -->
-          <div class="rounded-xl overflow-hidden">
-            <img :src="card.image" :alt="card.title" class="w-full h-44 object-cover" />
-          </div>
-          <!-- 图标区：在图片下方卡片背景上 -->
-          <div class="mt-4 w-8 h-8 rounded-lg flex items-center justify-center"
-            :style="{ backgroundColor: card.iconBg }">
-            <img :src="card.icon" alt="" class="w-5 h-5" />
-          </div>
-          <!-- 文字区 -->
-          <div class="mt-3">
-            <h3 class="text-lg font-semibold text-text-primary">{{ card.title }}</h3>
-            <p class="mt-3 text-sm text-text-secondary leading-relaxed">{{ card.desc }}</p>
-          </div>
-        </div>
-      </div>
-
+  <footer class="border-t border-border-soft bg-surface">
+    <div class="max-w-6xl mx-auto px-6">
     </div>
-  </section>
+  </footer>
 </template>
 
 <script setup lang="ts">
-import frame1 from '@/assets/images/Frame_1.png'
-import frame2 from '@/assets/images/Frame_2.png'
-import frame3 from '@/assets/images/Frame_3.png'
-import videoIcon from '@/assets/images/video.png'
-import radioIcon from '@/assets/images/radio.png'
-import chartIcon from '@/assets/images/chart-bar.png'
-
-const cards = [
-  {
-    image: frame1,
-    title: '专业视频录制',
-    desc: '支持录制、剪辑、字幕生成，让每一节课都呈现专业品质。无需昂贵设备，手机即可开始。',
-    icon: videoIcon,
-    iconBg: 'rgba(132, 204, 22, 0.2)',
-  },
-  {
-    image: frame2,
-    title: '实时互动直播',
-    desc: '超低延迟直播技术，实时弹幕互动、提问连麦、签到打卡，让线上课堂和线下一样生动高效。',
-    icon: radioIcon,
-    iconBg: 'rgba(34, 197, 94, 0.2)',
-  },
-  {
-    image: frame3,
-    title: '数据驱动增长',
-    desc: '全面的学员行为分析、课程完成追踪、收入数据报表，帮助你不断优化课程，实现持续增长。',
-    icon: chartIcon,
-    iconBg: 'rgba(139, 92, 246, 0.2)',
-  },
-]
+import { RouterLink } from 'vue-router'
+import logoImg from '@/assets/images/Logo.png'
+import ZozoliveImg from '@/assets/images/Zozolive.png'
 </script>

src/components/Navbar.vue

@@ -2,22 +2,37 @@
   <header class="sticky top-0 z-50 bg-surface/90 backdrop-blur-md border-b border-border-soft">
     <nav class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
       <!-- Logo + 品牌名 -->
-      <a href="#" class="flex items-center gap-2 group">
+      <RouterLink to="/" class="flex items-center gap-2 group">
         <img :src="logoImg" alt="Logo" class="h-8 w-auto" />
         <img :src="textImg" alt="Zozolive" class="h-6 w-auto" />
-      </a>
+      </RouterLink>
 
       <!-- 右侧导航链接 -->
       <ul class="flex items-center gap-8 text-sm font-semibold text-text-secondary">
-        <li><a href="#" class="text-text-primary transition-colors">首页</a></li>
-        <li><a href="#about" class="hover:text-text-primary transition-colors">关于我们</a></li>
-        <li><a href="#contact" class="hover:text-text-primary transition-colors">联系我们</a></li>
+        <li>
+          <RouterLink to="/" class="transition-colors" :class="{ 'text-text-primary': $route.path === '/' }">
+            首页
+          </RouterLink>
+        </li>
+        <li>
+          <RouterLink to="/about" class="transition-colors hover:text-text-primary"
+            :class="{ 'text-text-primary': $route.path === '/about' }">
+            关于我们
+          </RouterLink>
+        </li>
+        <li>
+          <RouterLink to="/contact" class="transition-colors hover:text-text-primary"
+            :class="{ 'text-text-primary': $route.path === '/contact' }">
+            联系我们
+          </RouterLink>
+        </li>
       </ul>
     </nav>
   </header>
 </template>
 
 <script setup lang="ts">
+import { RouterLink } from 'vue-router'
 import logoImg from '@/assets/images/Logo.png'
 import textImg from '@/assets/images/Zozolive.png'
 </script>

src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+import './assets/main.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -1,8 +1,18 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '@/views/HomePage.vue'
+import AboutPage from '@/views/AboutPage.vue'
+import ContactPage from '@/views/ContactPage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    { path: '/', name: 'home', component: HomePage },
+    { path: '/about', name: 'about', component: AboutPage },
+    { path: '/contact', name: 'contact', component: ContactPage },
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    return savedPosition || { top: 0 }
+  },
 })
 
-export default router
+export default router

src/views/AboutPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="bg-surface min-h-screen">
+    <About />
+  </div>
+</template>
+
+<script setup lang="ts">
+import About from '@/components/About.vue'
+</script>

src/views/ContactPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="bg-surface min-h-screen">
+    <Contact />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Contact from '@/components/Contact.vue'
+</script>

src/views/HomePage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <Hero />
+    <Features />
+    <Services />
+    <About />
+    <Location />
+    <Contact />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Hero from '@/components/Hero.vue'
+import Features from '@/components/Features.vue'
+import Services from '@/components/Services.vue'
+import About from '@/components/About.vue'
+import Location from '@/components/Location.vue'
+import Contact from '@/components/Contact.vue'
+</script>