初始化

2026-02-25 18:49:41 +08:00
commit 23d9e73969
14 changed files with 2364 additions and 0 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npm create vite@latest . -- --template vue 2>&1)",
+      "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npm create vite@latest . -- --template vue --force 2>&1)",
+      "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npm install 2>&1)",
+      "Bash(cd \"D:/git/gitea/LoveKeyOW\" && npx vite build 2>&1)"
+    ]
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist_electron
+/dist
+iOSAI
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LoveKeyOW</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "lovekeyow-website",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "vite": "^6.3.5"
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,23 @@
+<template>
+  <FullPage ref="fullpageRef">
+    <PageHome @navigate="handleNavigate" />
+    <PageProduct />
+    <PageAdvantage />
+    <PageContact />
+  </FullPage>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import FullPage from './components/FullPage.vue'
+import PageHome from './components/PageHome.vue'
+import PageProduct from './components/PageProduct.vue'
+import PageAdvantage from './components/PageAdvantage.vue'
+import PageContact from './components/PageContact.vue'
+
+const fullpageRef = ref(null)
+
+function handleNavigate(index) {
+  fullpageRef.value?.goTo(index)
+}
+</script>
--- a/src/components/FullPage.vue
+++ b/src/components/FullPage.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="fullpage-container" @wheel.prevent="handleWheel" @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd">
+    <div class="fullpage-wrapper" :style="wrapperStyle">
+      <slot />
+    </div>
+    <div class="fullpage-dots">
+      <span v-for="i in pageCount" :key="i" class="dot" :class="{ active: currentIndex === i - 1 }"
+        @click="goTo(i - 1)" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, useSlots } from 'vue'
+
+const slots = useSlots()
+const pageCount = computed(() => {
+  const defaultSlot = slots.default?.()
+  return defaultSlot ? defaultSlot.length : 0
+})
+
+const currentIndex = ref(0)
+const isAnimating = ref(false)
+const touchStartY = ref(0)
+
+const wrapperStyle = computed(() => ({
+  transform: `translateY(-${currentIndex.value * 100}vh)`,
+  transition: isAnimating.value ? 'transform 0.8s cubic-bezier(0.65, 0, 0.35, 1)' : 'none',
+}))
+
+function goTo(index) {
+  if (isAnimating.value || index === currentIndex.value) return
+  if (index < 0 || index >= pageCount.value) return
+  isAnimating.value = true
+  currentIndex.value = index
+  setTimeout(() => {
+    isAnimating.value = false
+  }, 800)
+}
+
+function handleWheel(e) {
+  if (isAnimating.value) return
+  if (e.deltaY > 0) {
+    goTo(currentIndex.value + 1)
+  } else if (e.deltaY < 0) {
+    goTo(currentIndex.value - 1)
+  }
+}
+
+function handleTouchStart(e) {
+  touchStartY.value = e.touches[0].clientY
+}
+
+function handleTouchEnd(e) {
+  const deltaY = touchStartY.value - e.changedTouches[0].clientY
+  if (Math.abs(deltaY) > 50) {
+    if (deltaY > 0) {
+      goTo(currentIndex.value + 1)
+    } else {
+      goTo(currentIndex.value - 1)
+    }
+  }
+}
+
+defineExpose({ currentIndex, goTo })
+</script>
+
+<style scoped>
+.fullpage-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.fullpage-wrapper {
+  width: 100%;
+  will-change: transform;
+}
+
+.fullpage-dots {
+  position: fixed;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 100;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.dot.active {
+  background: #fff;
+  transform: scale(1.3);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+}
+</style>
--- a/src/components/PageAdvantage.vue
+++ b/src/components/PageAdvantage.vue
@@ -0,0 +1,174 @@
+<template>
+  <section class="page page-advantage">
+    <div class="section-header">
+      <h2 class="section-title">核心优势</h2>
+      <div class="section-line"></div>
+      <p class="section-desc">我们的独特竞争力</p>
+    </div>
+    <div class="advantage-layout">
+      <div class="advantage-left">
+        <!-- 预留左侧大图位置 -->
+        <div class="left-image-placeholder">
+          <span>展示图片</span>
+        </div>
+      </div>
+      <div class="advantage-right">
+        <div class="advantage-item" v-for="(item, index) in advantages" :key="index">
+          <div class="item-icon-placeholder">
+            <span>{{ index + 1 }}</span>
+          </div>
+          <div class="item-content">
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const advantages = [
+  { title: '技术领先', desc: '持续投入研发，掌握行业核心技术，保持产品竞争力' },
+  { title: '品质保障', desc: '严格的质量管控体系，从设计到交付全流程把控' },
+  { title: '快速响应', desc: '敏捷的服务团队，7×24小时响应客户需求' },
+  { title: '生态完善', desc: '开放的合作生态，携手伙伴共建行业解决方案' },
+]
+</script>
+
+<style scoped>
+.page-advantage {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(180deg, #0a0e27 0%, #111538 50%, #0d1137 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-advantage::before {
+  content: '';
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
+  top: 10%;
+  left: -100px;
+  border-radius: 50%;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  margin-bottom: 16px;
+}
+
+.section-line {
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #6366f1, #a855f7);
+  margin: 0 auto 20px;
+  border-radius: 2px;
+}
+
+.section-desc {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 2px;
+}
+
+.advantage-layout {
+  display: flex;
+  gap: 60px;
+  max-width: 1100px;
+  width: 100%;
+  align-items: center;
+}
+
+.advantage-left {
+  flex: 1;
+}
+
+.left-image-placeholder {
+  width: 100%;
+  height: 400px;
+  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.advantage-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.advantage-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 14px;
+  transition: all 0.3s ease;
+}
+
+.advantage-item:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(99, 102, 241, 0.25);
+  transform: translateX(6px);
+}
+
+.item-icon-placeholder {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #6366f1, #a855f7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.item-content h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  letter-spacing: 1px;
+}
+
+.item-content p {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.7;
+}
+
+@media (max-width: 800px) {
+  .advantage-layout {
+    flex-direction: column;
+  }
+  .left-image-placeholder {
+    height: 240px;
+  }
+}
+</style>
--- a/src/components/PageContact.vue
+++ b/src/components/PageContact.vue
@@ -0,0 +1,269 @@
+<template>
+  <section class="page page-contact">
+    <div class="section-header">
+      <h2 class="section-title">联系我们</h2>
+      <div class="section-line"></div>
+      <p class="section-desc">期待与您的合作</p>
+    </div>
+    <div class="contact-layout">
+      <div class="contact-info">
+        <div class="info-item" v-for="(item, index) in contactList" :key="index">
+          <div class="info-icon-placeholder">
+            <span>{{ item.icon }}</span>
+          </div>
+          <div class="info-text">
+            <h4>{{ item.label }}</h4>
+            <p>{{ item.value }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="contact-map">
+        <!-- 预留地图或图片位置 -->
+        <div class="map-placeholder">
+          <span>地图 / 公司图片</span>
+        </div>
+      </div>
+    </div>
+    <footer class="footer">
+      <div class="footer-content">
+        <div class="footer-left">
+          <!-- 预留底部Logo -->
+          <div class="footer-logo-placeholder">LOGO</div>
+          <p class="footer-slogan">用心创造，为爱而生</p>
+        </div>
+        <div class="footer-links">
+          <a href="#">首页</a>
+          <a href="#">产品介绍</a>
+          <a href="#">核心优势</a>
+          <a href="#">联系我们</a>
+        </div>
+        <div class="footer-right">
+          <!-- 预留二维码图片位置 -->
+          <div class="qrcode-placeholder">
+            <span>二维码</span>
+          </div>
+          <p class="qr-text">扫码关注</p>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>© 2026 LoveKeyOW. All Rights Reserved.</p>
+      </div>
+    </footer>
+  </section>
+</template>
+
+<script setup>
+const contactList = [
+  { icon: '📍', label: '公司地址', value: '请填写公司地址信息' },
+  { icon: '📞', label: '联系电话', value: '请填写联系电话' },
+  { icon: '✉️', label: '电子邮箱', value: '请填写邮箱地址' },
+  { icon: '🕐', label: '工作时间', value: '周一至周五 9:00 - 18:00' },
+]
+</script>
+
+<style scoped>
+.page-contact {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(180deg, #0d1137 0%, #0a0e27 60%, #080b1f 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 60px;
+  position: relative;
+  overflow: hidden;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.section-title {
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  margin-bottom: 16px;
+}
+
+.section-line {
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #6366f1, #a855f7);
+  margin: 0 auto 20px;
+  border-radius: 2px;
+}
+
+.section-desc {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 2px;
+}
+
+.contact-layout {
+  display: flex;
+  gap: 60px;
+  max-width: 1100px;
+  width: 100%;
+  margin-bottom: 48px;
+}
+
+.contact-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  transition: all 0.3s;
+}
+
+.info-item:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+.info-icon-placeholder {
+  width: 42px;
+  height: 42px;
+  min-width: 42px;
+  border-radius: 10px;
+  background: rgba(99, 102, 241, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.info-text h4 {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  letter-spacing: 1px;
+}
+
+.info-text p {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.contact-map {
+  flex: 1;
+}
+
+.map-placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: 260px;
+  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.footer {
+  width: 100%;
+  max-width: 1100px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding-top: 32px;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.footer-logo-placeholder {
+  width: 80px;
+  height: 30px;
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.footer-slogan {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.35);
+  letter-spacing: 2px;
+}
+
+.footer-links {
+  display: flex;
+  gap: 28px;
+}
+
+.footer-links a {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.45);
+  transition: color 0.3s;
+}
+
+.footer-links a:hover {
+  color: #fff;
+}
+
+.footer-right {
+  text-align: center;
+}
+
+.qrcode-placeholder {
+  width: 72px;
+  height: 72px;
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.3);
+  margin-bottom: 6px;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.qr-text {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.footer-bottom p {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+@media (max-width: 800px) {
+  .contact-layout {
+    flex-direction: column;
+  }
+  .footer-content {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+</style>
--- a/src/components/PageHome.vue
+++ b/src/components/PageHome.vue
@@ -0,0 +1,229 @@
+<template>
+  <section class="page page-home">
+    <nav class="nav">
+      <div class="nav-logo">
+        <!-- 预留Logo图片位置 -->
+        <div class="logo-placeholder">LOGO</div>
+      </div>
+      <ul class="nav-links">
+        <li><a href="#" class="active">首页</a></li>
+        <li><a href="#">产品介绍</a></li>
+        <li><a href="#">核心优势</a></li>
+        <li><a href="#">联系我们</a></li>
+      </ul>
+    </nav>
+    <div class="hero">
+      <div class="hero-content">
+        <!-- 预留主视觉图片位置 -->
+        <div class="hero-image-placeholder">
+          <span>主视觉图片</span>
+        </div>
+        <h1 class="hero-title">LoveKeyOW</h1>
+        <p class="hero-subtitle">用心创造，为爱而生</p>
+        <div class="hero-btn" @click="$emit('navigate', 1)">了解更多</div>
+      </div>
+    </div>
+    <div class="scroll-hint">
+      <div class="mouse">
+        <div class="wheel"></div>
+      </div>
+      <p>滚动探索</p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineEmits(['navigate'])
+</script>
+
+<style scoped>
+.page-home {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 50%, #0d1137 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-home::before {
+  content: '';
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
+  top: -100px;
+  right: -100px;
+  border-radius: 50%;
+}
+
+.page-home::after {
+  content: '';
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
+  bottom: -50px;
+  left: -50px;
+  border-radius: 50%;
+}
+
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 60px;
+  position: relative;
+  z-index: 10;
+}
+
+.logo-placeholder {
+  width: 120px;
+  height: 40px;
+  border: 1px dashed rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  border-radius: 6px;
+}
+
+.nav-links {
+  display: flex;
+  gap: 36px;
+}
+
+.nav-links a {
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.7);
+  transition: color 0.3s;
+  position: relative;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+  color: #fff;
+}
+
+.nav-links a.active::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #6366f1, #a855f7);
+  border-radius: 1px;
+}
+
+.hero {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 10;
+}
+
+.hero-content {
+  text-align: center;
+}
+
+.hero-image-placeholder {
+  width: 280px;
+  height: 280px;
+  margin: 0 auto 40px;
+  border: 2px dashed rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.hero-title {
+  font-size: 56px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  margin-bottom: 16px;
+  background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 20px;
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 8px;
+  margin-bottom: 48px;
+}
+
+.hero-btn {
+  display: inline-block;
+  padding: 14px 48px;
+  background: linear-gradient(135deg, #6366f1, #a855f7);
+  border-radius: 50px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+  letter-spacing: 2px;
+}
+
+.hero-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
+}
+
+.scroll-hint {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  z-index: 10;
+  animation: fadeInUp 1.5s ease infinite;
+}
+
+.mouse {
+  width: 24px;
+  height: 38px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-radius: 12px;
+  margin: 0 auto 8px;
+  position: relative;
+}
+
+.wheel {
+  width: 4px;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 2px;
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: scrollWheel 1.5s ease infinite;
+}
+
+.scroll-hint p {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 2px;
+}
+
+@keyframes scrollWheel {
+  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
+}
+
+@keyframes fadeInUp {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+</style>
--- a/src/components/PageProduct.vue
+++ b/src/components/PageProduct.vue
@@ -0,0 +1,134 @@
+<template>
+  <section class="page page-product">
+    <div class="section-header">
+      <h2 class="section-title">产品介绍</h2>
+      <div class="section-line"></div>
+      <p class="section-desc">探索我们的核心产品与服务</p>
+    </div>
+    <div class="product-grid">
+      <div class="product-card" v-for="(item, index) in products" :key="index">
+        <!-- 预留产品图片位置 -->
+        <div class="card-image-placeholder">
+          <span>产品图片 {{ index + 1 }}</span>
+        </div>
+        <h3 class="card-title">{{ item.title }}</h3>
+        <p class="card-desc">{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const products = [
+  { title: '智能硬件', desc: '融合前沿科技与精致工艺，打造极致用户体验的智能设备' },
+  { title: '软件平台', desc: '强大的云端平台，提供稳定可靠的数据服务与智能分析' },
+  { title: '解决方案', desc: '针对不同场景定制专属方案，满足多元化业务需求' },
+  { title: '技术服务', desc: '专业团队全程支持，确保项目顺利落地与持续运营' },
+]
+</script>
+
+<style scoped>
+.page-product {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(180deg, #0d1137 0%, #121640 50%, #0a0e27 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  position: relative;
+  overflow: hidden;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  margin-bottom: 16px;
+}
+
+.section-line {
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #6366f1, #a855f7);
+  margin: 0 auto 20px;
+  border-radius: 2px;
+}
+
+.section-desc {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 2px;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 30px;
+  max-width: 1200px;
+  width: 100%;
+}
+
+.product-card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  padding: 32px 24px;
+  text-align: center;
+  transition: all 0.4s ease;
+  backdrop-filter: blur(10px);
+}
+
+.product-card:hover {
+  transform: translateY(-8px);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(99, 102, 241, 0.3);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.card-image-placeholder {
+  width: 100%;
+  height: 160px;
+  border: 1px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 14px;
+  margin-bottom: 24px;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.card-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  letter-spacing: 2px;
+}
+
+.card-desc {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.8;
+}
+
+@media (max-width: 900px) {
+  .product-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 560px) {
+  .product-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul, li {
+  list-style: none;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})