项目阶段性完成

src/App.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/assets/main.css

@@ -0,0 +1,152 @@
+/* 全局样式 - 简约科技风格 */
+
+:root {
+    /* 主色调 - 科技蓝 */
+    --primary-color: #0066ff;
+    --primary-light: #4d94ff;
+    --primary-dark: #0052cc;
+
+    /* 辅助色 - 青色 */
+    --accent-color: #00d4ff;
+    --accent-light: #66e5ff;
+
+    /* 中性色 */
+    --text-primary: #1a1a1a;
+    --text-secondary: #666666;
+    --text-light: #999999;
+    --bg-white: #ffffff;
+    --bg-light: #f8f9fa;
+    --bg-gray: #f0f2f5;
+    --border-color: #e8e8e8;
+
+    /* 渐变色 */
+    --gradient-primary: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);
+    --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif, 'Microsoft YaHei', '微软雅黑';
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: var(--text-primary);
+    background-color: var(--bg-white);
+    line-height: 1.6;
+}
+
+#app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 通用容器 */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* 标题样式 */
+.section-title {
+    font-size: 36px;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 16px;
+    color: var(--text-primary);
+    position: relative;
+}
+
+.section-subtitle {
+    font-size: 16px;
+    color: var(--text-secondary);
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+/* 按钮样式 */
+.btn-primary {
+    display: inline-block;
+    padding: 12px 32px;
+    background: var(--gradient-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
+}
+
+.btn-outline {
+    display: inline-block;
+    padding: 12px 32px;
+    background: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.btn-outline:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+/* 卡片样式 */
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 32px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.15);
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .section-title {
+        font-size: 28px;
+    }
+
+    .container {
+        padding: 0 16px;
+    }
+}

src/main.js

@@ -0,0 +1,13 @@
+import './assets/main.css'
+
+import {createApp} from 'vue'
+import App from './App.vue'
+
+import router from '@/router/router.js';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App)
+app.use(router);
+app.use(ElementPlus)
+app.mount('#app')

src/module/footer.vue

@@ -0,0 +1,196 @@
+<script setup>
+
+const currentYear = new Date().getFullYear()
+
+const footerLinks = {
+  product: [
+    {name: '产品功能', path: '/products'},
+  ],
+  company: [
+    {name: '关于我们', path: '/about'},
+  ],
+  support: [
+    {name: '帮助中心', path: '/contact'},
+  ]
+}
+
+const socialLinks = [
+  {name: '微信', icon: '💬', ref: 'https://weixin.qq.com/'},
+  {name: '微博', icon: '🌐', ref: 'https://weibo.com/'},
+  {name: 'GitHub', icon: '💻', ref: 'https://github.com/'},
+  {name: 'LinkedIn', icon: '💼', ref: 'https://weixin.qq.com/'}
+]
+</script>
+
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <!--公司信息-->
+        <div class="footer-section">
+          <h3 class="footer-logo">团队名</h3>
+          <p class="footer-desc">团队简要描述</p>
+          <div class="social-links">
+            <a
+                v-for="social in socialLinks"
+                :key="social.name"
+                :href="social.ref"
+                :title="social.name"
+                class="social-link"
+                rel="noopener noreferrer"
+                target="_blank">
+              {{ social.icon }}
+            </a>
+          </div>
+        </div>
+
+        <!--产品链接-->
+        <div class="footer-section">
+          <h4 class="footer-title">产品</h4>
+          <ul class="footer-links">
+            <li v-for="link in footerLinks.product" :key="link.name">
+              <router-link :to="link.path">{{ link.name }}</router-link>
+            </li>
+          </ul>
+        </div>
+
+        <!--链接-->
+        <div class="footer-section">
+          <h4 class="footer-title">我们</h4>
+          <ul class="footer-links">
+            <li v-for="link in footerLinks.company" :key="link.name">
+              <router-link :to="link.path">{{ link.name }}</router-link>
+            </li>
+          </ul>
+        </div>
+
+        <!--支持链接-->
+        <div class="footer-section">
+          <h4 class="footer-title">帮助</h4>
+          <ul class="footer-links">
+            <li v-for="link in footerLinks.support" :key="link.name">
+              <router-link :to="link.path">{{ link.name }}</router-link>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!--底部版权-->
+      <div class="footer-bottom">
+        <p>&copy; {{ currentYear }} 团队名. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  background: var(--gradient-dark);
+  color: white;
+  padding: 60px 20px 30px;
+  margin-top: auto;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 40px;
+  margin-bottom: 40px;
+}
+
+.footer-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-logo {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.footer-desc {
+  font-size: 14px;
+  line-height: 1.8;
+  opacity: 0.8;
+  margin-bottom: 20px;
+}
+
+.social-links {
+  display: flex;
+  gap: 12px;
+}
+
+.social-link {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  font-size: 18px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.social-link:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+}
+
+.footer-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: white;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 12px;
+}
+
+.footer-links a {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.footer-links a:hover {
+  color: white;
+  padding-left: 4px;
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 30px;
+  text-align: center;
+}
+
+.footer-bottom p {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .footer {
+    padding: 40px 16px 20px;
+  }
+}
+</style>

src/module/head_menu.vue

@@ -0,0 +1,133 @@
+<script setup>
+import {useRoute, useRouter} from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const menuItems = [
+  {name: '首页', path: '/'},
+  {name: '产品服务', path: '/products'},
+  {name: '关于我们', path: '/about'},
+  {name: '联系我们', path: '/contact'}
+]
+</script>
+
+<template>
+  <div class="header-wrapper">
+    <el-menu
+        :default-active="route.path"
+        :ellipsis="false"
+        class="header-menu"
+        mode="horizontal"
+    >
+      <div class="logo">
+        <span class="logo-text">团队名</span>
+      </div>
+      <div class="menu-items">
+        <router-link
+            v-for="item in menuItems"
+            :key="item.path"
+            :to="item.path"
+            class="menu-item"
+        >
+          {{ item.name }}
+        </router-link>
+      </div>
+    </el-menu>
+  </div>
+</template>
+
+<style scoped>
+.header-wrapper {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.header-menu {
+  max-width: 1200px;
+  margin: 0 auto;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 70px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo-text {
+  font-size: 24px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  cursor: pointer;
+}
+
+.menu-items {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+
+.menu-item {
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.menu-item:hover {
+  color: var(--primary-color);
+  background: rgba(0, 102, 255, 0.05);
+}
+
+.menu-item.router-link-active {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.menu-item.router-link-active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 3px;
+  background: var(--gradient-primary);
+  border-radius: 2px;
+}
+
+@media (max-width: 768px) {
+  .header-menu {
+    padding: 0 16px;
+  }
+
+  .menu-items {
+    gap: 20px;
+  }
+
+  .menu-item {
+    font-size: 14px;
+    padding: 6px 12px;
+  }
+
+  .logo-text {
+    font-size: 20px;
+  }
+}
+</style>

src/router/router.js

@@ -0,0 +1,31 @@
+import {createRouter, createWebHistory} from "vue-router";
+
+const routes = [
+    {
+        name: '首页',
+        path: '/',
+        component: () => import('../views/index/index.vue')
+    },
+    {
+        name: '产品服务',
+        path: '/products',
+        component: () => import('../views/products/products.vue')
+    },
+    {
+        name: '关于我们',
+        path: '/about',
+        component: () => import('../views/about/about.vue')
+    },
+    {
+        name: '联系我们',
+        path: '/contact',
+        component: () => import('../views/contact/contact.vue')
+    }
+]
+
+const router = createRouter({
+    routes,
+    history: createWebHistory()
+})
+
+export default router

src/views/about/about.vue

@@ -0,0 +1,474 @@
+<script setup>
+import Head_menu from "@/module/head_menu.vue";
+import Footer from "@/module/footer.vue";
+
+// 公司信息
+const companyInfo = {
+  name: '团队名',
+  founded: '2020年',
+  location: '中国·北京',
+  employees: '200+',
+  mission: '子标题 使命 的内容',
+  vision: '子标题 愿景 的内容'
+}
+
+// 团队成贝
+const teamMembers = [
+  {
+    name: '姓名',
+    position: '职位',
+    avatar: '👨‍💼',
+    description: '简单的描述'
+  },
+  {
+    name: '姓名',
+    position: '职位',
+    avatar: '👨‍💻',
+    description: '简单的描述'
+  },
+  {
+    name: '姓名',
+    position: '职位',
+    avatar: '👩‍💼',
+    description: '简单的描述'
+  },
+  {
+    name: '姓名',
+    position: '职位',
+    avatar: '👨‍🎨',
+    description: '简单的描述'
+  }
+]
+
+// 发展历程
+const milestones = [
+  {
+    year: 'xxxx年',
+    title: 'xxxxxx',
+    description: '简要描述'
+  },
+  {
+    year: 'xxxx年',
+    title: 'xxxxxx',
+    description: '简要描述'
+  },
+  {
+    year: 'xxxx年',
+    title: 'xxxxxx',
+    description: '简要描述'
+  },
+  {
+    year: 'xxxx年',
+    title: 'xxxxxx',
+    description: '简要描述'
+  },
+  {
+    year: 'xxxx年',
+    title: 'xxxxxx',
+    description: '简要描述'
+  },
+  {
+    year: 'xxxx年',
+    title: 'xxxxxx',
+    description: '简要描述'
+  }
+]
+
+// 核心价值
+const values = [
+  {
+    icon: '🎯',
+    title: '核心价值 标题',
+    description: '核心价值 简介'
+  },
+  {
+    icon: '💡',
+    title: '核心价值 标题',
+    description: '核心价值 简介'
+  },
+  {
+    icon: '🤝',
+    title: '核心价值 标题',
+    description: '核心价值 简介'
+  },
+  {
+    icon: '⚡',
+    title: '核心价值 标题',
+    description: '核心价值 简介'
+  }
+]
+</script>
+
+<template>
+  <div class="about-page">
+    <!--顶部导航栏-->
+    <head_menu></head_menu>
+
+    <!--简介区域-->
+    <section class="hero-section">
+      <div class="container">
+        <h1 class="page-title">关于我们</h1>
+        <p class="page-subtitle">了解我们的故事和愿景</p>
+      </div>
+    </section>
+
+    <!--介绍区域-->
+    <section class="intro-section container">
+      <div class="intro-content card">
+        <div class="intro-text">
+          <h2 class="intro-title">简介</h2>
+          <p class="intro-desc">这里填写一大串的介绍文本</p>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="info-label">成立于：</span>
+              <span class="info-value">{{ companyInfo.founded }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">地点：</span>
+              <span class="info-value">{{ companyInfo.location }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">规模：</span>
+              <span class="info-value">{{ companyInfo.employees }}</span>
+            </div>
+          </div>
+          <div class="mission-vision">
+            <div class="mv-item">
+              <h3>使命</h3>
+              <p>{{ companyInfo.mission }}</p>
+            </div>
+            <div class="mv-item">
+              <h3>愿景</h3>
+              <p>{{ companyInfo.vision }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!--核心价值区域-->
+    <section class="values-section">
+      <div class="container">
+        <h2 class="section-title">核心价值</h2>
+        <p class="section-subtitle">我们的价值观指引着每一步前行</p>
+        <div class="values-grid">
+          <div v-for="(value, index) in values" :key="index" class="value-card card">
+            <div class="value-icon">{{ value.icon }}</div>
+            <h3 class="value-title">{{ value.title }}</h3>
+            <p class="value-desc">{{ value.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!--团队展示区域-->
+    <section class="team-section container">
+      <h2 class="section-title">核心团队</h2>
+      <p class="section-subtitle">优秀的团队成就卓越的事业</p>
+      <div class="team-grid">
+        <div v-for="(member, index) in teamMembers" :key="index" class="team-card card">
+          <div class="member-avatar">{{ member.avatar }}</div>
+          <h3 class="member-name">{{ member.name }}</h3>
+          <p class="member-position">{{ member.position }}</p>
+          <p class="member-desc">{{ member.description }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!--发展历程区域-->
+    <section class="timeline-section">
+      <div class="container">
+        <h2 class="section-title">发展历程</h2>
+        <p class="section-subtitle">记录我们的成长足迹</p>
+        <div class="timeline">
+          <div v-for="(milestone, index) in milestones" :key="index" class="timeline-item">
+            <div class="timeline-marker"></div>
+            <div class="timeline-content card">
+              <div class="timeline-year">{{ milestone.year }}</div>
+              <h3 class="timeline-title">{{ milestone.title }}</h3>
+              <p class="timeline-desc">{{ milestone.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!--页脚-->
+    <Footer/>
+  </div>
+</template>
+
+<style scoped>
+.about-page {
+  min-height: 100vh;
+}
+
+/* 顶部区域 */
+.hero-section {
+  background: var(--gradient-primary);
+  padding: 80px 20px;
+  text-align: center;
+  color: white;
+}
+
+.page-title {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.page-subtitle {
+  font-size: 18px;
+  opacity: 0.95;
+}
+
+/* 公司介绍区域 */
+.intro-section {
+  padding: 80px 20px;
+}
+
+.intro-content {
+  padding: 50px;
+}
+
+.intro-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 24px;
+  color: var(--text-primary);
+}
+
+.intro-desc {
+  font-size: 16px;
+  line-height: 1.8;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.info-label {
+  font-size: 14px;
+  color: var(--text-light);
+}
+
+.info-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.mission-vision {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+}
+
+.mv-item h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--primary-color);
+}
+
+.mv-item p {
+  font-size: 16px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* 核心价值区域 */
+.values-section {
+  background: var(--bg-light);
+  padding: 80px 20px;
+}
+
+.values-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.value-card {
+  text-align: center;
+  padding: 40px 30px;
+}
+
+.value-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.value-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.value-desc {
+  font-size: 15px;
+  color: var(--text-secondary);
+  line-height: 1.8;
+}
+
+/* 团队展示区域 */
+.team-section {
+  padding: 80px 20px;
+}
+
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.team-card {
+  text-align: center;
+  padding: 40px 30px;
+}
+
+.member-avatar {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  background: var(--gradient-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+}
+
+.member-name {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.member-position {
+  font-size: 14px;
+  color: var(--primary-color);
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+.member-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* 发展历程区域 */
+.timeline-section {
+  background: var(--bg-light);
+  padding: 80px 20px;
+}
+
+.timeline {
+  position: relative;
+  max-width: 800px;
+  margin: 40px auto 0;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background: var(--border-color);
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.timeline-item:nth-child(odd) {
+  flex-direction: row-reverse;
+}
+
+.timeline-marker {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  background: var(--primary-color);
+  border-radius: 50%;
+  border: 3px solid white;
+  box-shadow: 0 0 0 3px var(--primary-color);
+  z-index: 1;
+}
+
+.timeline-content {
+  width: 45%;
+  padding: 24px;
+}
+
+.timeline-year {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--primary-color);
+  margin-bottom: 8px;
+}
+
+.timeline-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.timeline-desc {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .page-title {
+    font-size: 36px;
+  }
+
+  .intro-content {
+    padding: 30px 20px;
+  }
+
+  .timeline::before {
+    left: 20px;
+  }
+
+  .timeline-marker {
+    left: 20px;
+  }
+
+  .timeline-item,
+  .timeline-item:nth-child(odd) {
+    flex-direction: row;
+    padding-left: 50px;
+  }
+
+  .timeline-content {
+    width: 100%;
+  }
+}
+</style>

src/views/contact/contact.vue

@@ -0,0 +1,392 @@
+<script setup>
+import Head_menu from "@/module/head_menu.vue";
+import Footer from "@/module/footer.vue";
+import {ref} from 'vue'
+
+// 联系表单数据
+const contactForm = ref({
+  name: '',
+  email: '',
+  phone: '',
+  subject: '',
+  message: ''
+})
+
+// 联系方式
+const contactInfo = [
+  {
+    icon: '图标 1',
+    title: '标题 1',
+    content: '内容 1'
+  },
+  {
+    icon: '图标 2',
+    title: '标题 2',
+    content: '内容 2'
+  },
+  {
+    icon: '图标 3',
+    title: '标题 3',
+    content: '内容 3'
+  },
+  {
+    icon: '图标 4',
+    title: '标题 4',
+    content: '内容 4'
+  }
+]
+
+const faqList = [
+  {
+    title: '问题 1',
+    content: '内容 1'
+  },
+  {
+    title: '问题 2',
+    content: '内容 2'
+  },
+  {
+    title: '问题 3',
+    content: '内容 3'
+  },
+]
+</script>
+
+<template>
+  <div class="contact-page">
+    <!--顶部导航栏-->
+    <head_menu></head_menu>
+
+    <!--页面标题区域-->
+    <section class="hero-section">
+      <div class="container">
+        <h1 class="page-title">联系我们</h1>
+        <p class="page-subtitle">子标题</p>
+      </div>
+    </section>
+
+    <!--联系信息区域-->
+    <section class="info-section container">
+      <div class="info-grid">
+        <div v-for="(info, index) in contactInfo" :key="index" class="info-card card">
+          <div class="info-icon">{{ info.icon }}</div>
+          <h3 class="info-title">{{ info.title }}</h3>
+          <p class="info-content">{{ info.content }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!--我们的信息-->
+    <section class="form-section container">
+      <div class="form-wrapper">
+        <!--我们的信息-->
+        <div class="form-container card">
+          <h2 class="form-title">我们的信息</h2>
+          <p class="form-desc">QQ、微信、邮箱 等...</p>
+
+          <el-container>
+            <el-form ref="contactForm" :model="contactForm" label-width="80px">
+              <div>
+                <div class="link-me">
+                  <p style="font-size: 110%; font-weight: bold; margin-right: 10px;">QQ:</p>
+                  <p style="">1234567891</p>
+                </div>
+                <div class="link-me">
+                  <p style="font-size: 110%; font-weight: bold; margin-right: 10px;">微信:</p>
+                  <p style="">1234567891</p>
+                </div>
+                <div class="link-me">
+                  <p style="font-size: 110%; font-weight: bold; margin-right: 10px;">Email:</p>
+                  <p style="">export.mail@com</p>
+                </div>
+              </div>
+            </el-form>
+          </el-container>
+        </div>
+
+      </div>
+    </section>
+
+    <!--常见问题区域-->
+    <section class="faq-section">
+      <div class="container">
+        <h2 class="section-title">常见问题</h2>
+        <p class="section-subtitle">快速找到您需要的答案</p>
+
+        <div class="faq-list">
+          <el-collapse accordion>
+            <el-collapse-item
+                v-for="(faq, index) in faqList"
+                :key="index"
+                :name="index + 1"
+                :title="faq.title"
+            >
+              <div class="faq-answer">
+                {{ faq.content }}
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </section>
+
+    <!--页脚-->
+    <Footer/>
+  </div>
+</template>
+
+<style scoped>
+/* 我们的信息 */
+.link-me {
+  display: flex;
+}
+
+.contact-page {
+  min-height: 100vh;
+}
+
+/* 顶部区域 */
+.hero-section {
+  background: var(--gradient-primary);
+  padding: 80px 20px;
+  text-align: center;
+  color: white;
+}
+
+.page-title {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.page-subtitle {
+  font-size: 18px;
+  opacity: 0.95;
+}
+
+/* 联系信息区域 */
+.info-section {
+  padding: 60px 20px;
+  margin-top: -40px;
+  position: relative;
+  z-index: 10;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+}
+
+.info-card {
+  text-align: center;
+  padding: 32px 24px;
+}
+
+.info-icon {
+  font-size: 40px;
+  margin-bottom: 16px;
+}
+
+.info-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+}
+
+.info-content {
+  font-size: 15px;
+  color: var(--text-secondary);
+}
+
+/* 表单区域 */
+.form-section {
+  padding: 60px 20px;
+}
+
+.form-wrapper {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 30px;
+}
+
+.form-container {
+  padding: 40px;
+}
+
+.form-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.form-desc {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.contact-form {
+  margin-top: 24px;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.map-container {
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+}
+
+.map-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 24px;
+  color: var(--text-primary);
+}
+
+.map-placeholder {
+  flex: 1;
+  background: var(--bg-light);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.map-content {
+  text-align: center;
+}
+
+.map-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.map-text {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.map-address {
+  font-size: 14px;
+  color: var(--text-light);
+}
+
+/* FAQ区域 */
+.faq-section {
+  background: var(--bg-light);
+  padding: 80px 20px;
+}
+
+.faq-list {
+  max-width: 900px;
+  margin: 40px auto 0;
+}
+
+/* Element Plus Collapse 自定义样式 */
+.faq-list :deep(.el-collapse) {
+  border: none;
+  background: transparent;
+}
+
+.faq-list :deep(.el-collapse-item) {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+}
+
+.faq-list :deep(.el-collapse-item:hover) {
+  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.12);
+  transform: translateY(-2px);
+}
+
+.faq-list :deep(.el-collapse-item__header) {
+  background: white;
+  color: var(--text-primary);
+  font-size: 17px;
+  font-weight: 600;
+  padding: 20px 24px;
+  border: none;
+  line-height: 1.6;
+  transition: all 0.3s ease;
+}
+
+.faq-list :deep(.el-collapse-item__header:hover) {
+  background: linear-gradient(135deg, rgba(0, 102, 255, 0.03) 0%, rgba(0, 212, 255, 0.03) 100%);
+  color: var(--primary-color);
+}
+
+.faq-list :deep(.el-collapse-item__header.is-active) {
+  background: linear-gradient(135deg, rgba(0, 102, 255, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
+  color: var(--primary-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.faq-list :deep(.el-collapse-item__arrow) {
+  font-size: 14px;
+  color: var(--primary-color);
+  transition: transform 0.3s ease;
+}
+
+.faq-list :deep(.el-collapse-item__wrap) {
+  border: none;
+  background: white;
+}
+
+.faq-list :deep(.el-collapse-item__content) {
+  padding: 24px;
+  color: var(--text-secondary);
+  font-size: 15px;
+  line-height: 1.8;
+  background: white;
+}
+
+.faq-answer {
+  position: relative;
+  padding-left: 16px;
+}
+
+.faq-answer::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  width: 4px;
+  height: calc(100% - 16px);
+  background: var(--gradient-primary);
+  border-radius: 2px;
+  opacity: 0.6;
+}
+
+@media (max-width: 768px) {
+  .page-title {
+    font-size: 36px;
+  }
+
+  .form-wrapper {
+    grid-template-columns: 1fr;
+  }
+
+  .form-container,
+  .map-container {
+    padding: 30px 20px;
+  }
+
+  .info-section {
+    margin-top: -20px;
+  }
+}
+</style>

src/views/index/index.vue

@@ -0,0 +1,296 @@
+<script setup>
+import Head_menu from "@/module/head_menu.vue";
+import Footer from "@/module/footer.vue";
+
+// 轮播图数据
+const carouselImages = [
+  {id: 1, src: new URL('./img/background.png', import.meta.url).href, title: '<团队名>', desc: '<团队简介>'},
+  {
+    id: 2,
+    src: new URL('./img/background.png', import.meta.url).href,
+    title: '智能解决方案',
+    desc: '为您提供全方位服务'
+  },
+  {id: 3, src: new URL('./img/background.png', import.meta.url).href, title: '专业团队', desc: '打造卓越产品体验'}
+]
+
+// 核心特性数据
+const features = [
+  {
+    icon: '🚀',
+    title: '特性&优势',
+    description: '简介'
+  },
+  {
+    icon: '🔒',
+    title: '特性&优势',
+    description: '简介'
+  },
+  {
+    icon: '💡',
+    title: '特性&优势',
+    description: '简介'
+  },
+  {
+    icon: '🌐',
+    title: '特性&优势',
+    description: '简介'
+  }
+]
+
+// 统计数据
+const stats = [
+  {value: '1000+', label: '加入我们的伙伴们'},
+  {value: '24/7', label: '客服在线'},
+  {value: '50+', label: '我们的案例'}
+]
+</script>
+
+<template>
+  <div class="home-page">
+    <!--顶部导航栏-->
+    <head_menu></head_menu>
+
+    <!--轮播图区域-->
+    <section class="hero-section">
+      <el-carousel :interval="5000" arrow="always" height="500px" indicator-position="outside">
+        <el-carousel-item v-for="item in carouselImages" :key="item.id">
+          <div class="carousel-content">
+            <img :alt="item.title" :src="item.src" class="carousel-img">
+            <div class="carousel-overlay">
+              <div class="carousel-text">
+                <h1 class="carousel-title">{{ item.title }}</h1>
+                <p class="carousel-desc">{{ item.desc }}</p>
+                <el-button class="cta-button" size="large" type="primary">了解更多</el-button>
+              </div>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </section>
+
+    <!--核心特性区域-->
+    <section class="features-section container">
+      <h2 class="section-title">核心优势</h2>
+      <p class="section-subtitle">我们致力于为客户提供最优质的技术服务</p>
+      <div class="features-grid">
+        <div v-for="(feature, index) in features" :key="index" class="feature-card card fade-in-up">
+          <div class="feature-icon">{{ feature.icon }}</div>
+          <h3 class="feature-title">{{ feature.title }}</h3>
+          <p class="feature-desc">{{ feature.description }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!--数据统计区域-->
+    <section class="stats-section">
+      <div class="container">
+        <div class="stats-grid">
+          <div v-for="(stat, index) in stats" :key="index" class="stat-item">
+            <div class="stat-value">{{ stat.value }}</div>
+            <div class="stat-label">{{ stat.label }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!--行动号召区域-->
+    <section class="cta-section container">
+      <div class="cta-content card">
+        <h2 class="cta-title">准备好开始了吗？</h2>
+        <p class="cta-desc">点击下方立即加入我们吧！</p>
+        <div class="cta-buttons">
+          <router-link class="btn-primary" to="/contact">联系我们</router-link>
+          <router-link class="btn-outline" to="/products">查看服务</router-link>
+        </div>
+      </div>
+    </section>
+
+    <!--页脚-->
+    <Footer/>
+  </div>
+</template>
+
+<style scoped>
+.home-page {
+  min-height: 100vh;
+}
+
+/* 轮播图区域 */
+.hero-section {
+  position: relative;
+  width: 100%;
+}
+
+.carousel-content {
+  position: relative;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+
+.carousel-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.carousel-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(0, 102, 255, 0.7) 0%, rgba(0, 212, 255, 0.5) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-text {
+  text-align: center;
+  color: white;
+  padding: 20px;
+}
+
+.carousel-title {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.carousel-desc {
+  font-size: 20px;
+  margin-bottom: 32px;
+  opacity: 0.95;
+  animation: fadeInUp 0.8s ease-out 0.2s both;
+}
+
+.cta-button {
+  animation: fadeInUp 0.8s ease-out 0.4s both;
+}
+
+/* 核心特性区域 */
+.features-section {
+  padding: 80px 20px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-card {
+  text-align: center;
+  padding: 40px 30px;
+}
+
+.feature-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.feature-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.feature-desc {
+  font-size: 15px;
+  color: var(--text-secondary);
+  line-height: 1.8;
+}
+
+/* 数据统计区域 */
+.stats-section {
+  background: var(--gradient-dark);
+  padding: 60px 20px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 40px;
+  text-align: center;
+}
+
+.stat-item {
+  color: white;
+}
+
+.stat-value {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.stat-label {
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+/* 行动号召区域 */
+.cta-section {
+  padding: 80px 20px;
+}
+
+.cta-content {
+  text-align: center;
+  padding: 60px 40px;
+  background: var(--bg-light);
+}
+
+.cta-title {
+  font-size: 36px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: var(--text-primary);
+}
+
+.cta-desc {
+  font-size: 18px;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .carousel-title {
+    font-size: 32px;
+  }
+
+  .carousel-desc {
+    font-size: 16px;
+  }
+
+  .features-section,
+  .cta-section {
+    padding: 60px 16px;
+  }
+
+  .stat-value {
+    font-size: 36px;
+  }
+
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>

src/views/products/products.vue

@@ -0,0 +1,373 @@
+<script setup>
+import Head_menu from "@/module/head_menu.vue";
+import Footer from "@/module/footer.vue";
+// 过滤产品
+import {computed, ref} from 'vue'
+
+// 产品分类
+const categories = [
+  {id: 'all', name: '全部'},
+  {id: 'ArtCustomization', name: '子类 1'},
+  {id: 'ModelMaking', name: '子类 2'},
+  {id: 'MoreServices', name: '子类 3'}
+]
+
+const activeCategory = ref('all')
+
+// 产品列表
+const products = [
+  {
+    id: 1,
+    category: 'ArtCustomization',
+    icon: '🖼️︎',
+    name: '美术定制',
+    description: '美术定制 简介',
+    features: ['美术定制'],
+    price: '¥ 999/张 起'
+  },
+  {
+    id: 2,
+    category: 'ModelMaking',
+    icon: '🛩️',
+    name: '模型制作',
+    description: '模型制作 简介',
+    features: ['模型制作'],
+    price: '¥ 1999/个 起'
+  },
+  {
+    id: 3,
+    category: 'MoreServices',
+    icon: '🗐',
+    name: '更多服务...',
+    description: '更多服务敬请期待...',
+    features: ['更多服务'],
+    price: '¥ xxx/月 起'
+  }
+]
+
+const filteredProducts = computed(() => {
+  if (activeCategory.value === 'all') {
+    return products
+  }
+  return products.filter(p => p.category === activeCategory.value)
+})
+
+// 服务特色
+const serviceFeatures = [
+  {
+    icon: '⚡',
+    title: '快速',
+    description: '客服极速响应，不再等待！'
+  },
+  {
+    icon: '🔄',
+    title: '持续',
+    description: '定期推出我们的更新'
+  },
+  {
+    icon: '🎯',
+    title: '定制',
+    description: '根据需求提供个性化解决方案'
+  },
+  {
+    icon: '💬',
+    title: '专属',
+    description: '一对一技术支持和咨询服务'
+  }
+]
+</script>
+
+<template>
+  <div class="products-page">
+    <!--顶部导航栏-->
+    <head_menu></head_menu>
+
+    <!--页面标题区域-->
+    <section class="hero-section">
+      <div class="container">
+        <h1 class="page-title">我们的服务</h1>
+        <p class="page-subtitle">为您提供前所未有的服务体验！</p>
+      </div>
+    </section>
+
+    <!--产品分类筛选-->
+    <section class="filter-section container">
+      <div class="filter-tabs">
+        <button
+            v-for="category in categories"
+            :key="category.id"
+            :class="['filter-tab', { active: activeCategory === category.id }]"
+            @click="activeCategory = category.id"
+        >
+          {{ category.name }}
+        </button>
+      </div>
+    </section>
+
+    <!--产品列表区域-->
+    <section class="products-section container">
+      <div class="products-grid">
+        <div v-for="product in filteredProducts" :key="product.id" class="product-card card">
+          <div class="product-header">
+            <div class="product-icon">{{ product.icon }}</div>
+            <h3 class="product-name">{{ product.name }}</h3>
+          </div>
+          <p class="product-desc">{{ product.description }}</p>
+          <div class="product-features">
+            <span v-for="(feature, index) in product.features" :key="index" class="feature-tag">
+              {{ feature }}
+            </span>
+          </div>
+          <div class="product-footer">
+            <div class="product-price">{{ product.price }}</div>
+            <el-button size="default" type="primary">了解详情</el-button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!--服务特色区域-->
+    <section class="features-section">
+      <div class="container">
+        <h2 class="section-title">服务特色</h2>
+        <p class="section-subtitle">为什么选择我们的产品和服务</p>
+        <div class="features-grid">
+          <div v-for="(feature, index) in serviceFeatures" :key="index" class="feature-item card">
+            <div class="feature-icon">{{ feature.icon }}</div>
+            <h3 class="feature-title">{{ feature.title }}</h3>
+            <p class="feature-desc">{{ feature.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!--行动号召区域-->
+    <section class="cta-section container">
+      <div class="cta-content card">
+        <h2 class="cta-title">需要定制化解决方案？</h2>
+        <p class="cta-desc">我们的专家团队将为您量身打造最适合的产品组合</p>
+        <router-link class="btn-primary" to="/contact">联系我们</router-link>
+      </div>
+    </section>
+
+    <!--页脚-->
+    <Footer/>
+  </div>
+</template>
+
+<style scoped>
+.products-page {
+  min-height: 100vh;
+}
+
+/* 顶部区域 */
+.hero-section {
+  background: var(--gradient-primary);
+  padding: 80px 20px;
+  text-align: center;
+  color: white;
+}
+
+.page-title {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.page-subtitle {
+  font-size: 18px;
+  opacity: 0.95;
+}
+
+/* 筛选区域 */
+.filter-section {
+  padding: 40px 20px;
+}
+
+.filter-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.filter-tab {
+  padding: 10px 24px;
+  border: 2px solid var(--border-color);
+  background: white;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.filter-tab:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.filter-tab.active {
+  background: var(--primary-color);
+  border-color: var(--primary-color);
+  color: white;
+}
+
+/* 产品列表区域 */
+.products-section {
+  padding: 40px 20px 80px;
+}
+
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 30px;
+}
+
+.product-card {
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.product-header {
+  margin-bottom: 20px;
+}
+
+.product-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.product-name {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+}
+
+.product-desc {
+  font-size: 15px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 20px;
+  flex: 1;
+}
+
+.product-features {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.feature-tag {
+  padding: 6px 12px;
+  background: var(--bg-light);
+  color: var(--primary-color);
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.product-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-color);
+}
+
+.product-price {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
+/* 服务特色区域 */
+.features-section {
+  background: var(--bg-light);
+  padding: 80px 20px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-item {
+  text-align: center;
+  padding: 40px 30px;
+}
+
+.feature-icon {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.feature-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.feature-desc {
+  font-size: 15px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* 行动号召区域 */
+.cta-section {
+  padding: 80px 20px;
+}
+
+.cta-content {
+  text-align: center;
+  padding: 60px 40px;
+  background: var(--gradient-dark);
+  color: white;
+}
+
+.cta-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.cta-desc {
+  font-size: 16px;
+  opacity: 0.9;
+  margin-bottom: 32px;
+}
+
+@media (max-width: 768px) {
+  .page-title {
+    font-size: 36px;
+  }
+
+  .products-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-tabs {
+    gap: 12px;
+  }
+
+  .filter-tab {
+    padding: 8px 16px;
+    font-size: 14px;
+  }
+
+  .product-footer {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+}
+</style>