3 周之前 · 5c52599ab7
--- a/.env
+++ b/.env
@@ -0,0 +1,4 @@
 
				+#
			
 
				+VITE_APP_TITLE 'development'
			
 
				+VITE_APP_BASE_URL=/api
			
 
				+VITE_APP_ENV=development
			
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,4 @@
 
				+# 
			
 
				+VITE_APP_TITLE='production'
			
 
				+VITE_APP_BASE_URL=https://api.yourdomain.com
			
 
				+VITE_APP_ENV=production
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,32 @@
 
				+.DS_Store
			
 
				+.history
			
 
				+node_modules/
			
 
				+dist/
			
 
				+dist-*/
			
 
				+.kiro/
			
 
				+design/
			
 
				+
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+**/*.log
			
 
				+
			
 
				+tests/**/coverage/
			
 
				+tests/e2e/reports
			
 
				+selenium-debug.log
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+vue.config.js
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.local
			
 
				+
			
 
				+package-lock.json
			
 
				+yarn.lock
			
 
				+PROJECT_STRUCTURE.md
			
 
				+
			
 
				+.codegpt
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <link rel="icon" href="/favicon.ico">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>达泽科技</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/src/main.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/logo.png
+++ b/logo.png
--- a/package.json
+++ b/package.json
@@ -0,0 +1,22 @@
 
				+{
			
 
				+  "name": "claudetest",
			
 
				+  "version": "1.0.0",
			
 
				+  "main": "vite.config.js",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vite build",
			
 
				+    "serve": "vite preview"
			
 
				+  },
			
 
				+  "keywords": [],
			
 
				+  "author": "",
			
 
				+  "license": "ISC",
			
 
				+  "description": "",
			
 
				+  "dependencies": {
			
 
				+    "@vitejs/plugin-vue": "^5.2.4",
			
 
				+    "axios": "^1.11.0",
			
 
				+    "pinia": "^3.0.3",
			
 
				+    "vite": "^6.3.5",
			
 
				+    "vue": "^3.5.20",
			
 
				+    "vue-router": "^4.5.1"
			
 
				+  }
			
 
				+}
			
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,13 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh-CN">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <link rel="icon" href="/favicon.ico">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>企业官网</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/src/main.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,21 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <router-view />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'App'
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  color: #2c3e50;
			
 
				+  min-height: 100vh;
			
 
				+}
			
 
				+</style>
			
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -0,0 +1,8 @@
 
				+// API
			
 
				+import homeApi from './modules/home'
			
 
				+import productsApi from './modules/products'
			
 
				+
			
 
				+export {
			
 
				+  homeApi,
			
 
				+  productsApi
			
 
				+}
			
--- a/src/api/modules/home.js
+++ b/src/api/modules/home.js
@@ -0,0 +1,33 @@
 
				+import request from '@/utils/request'
			
 
				+
			
 
				+// 获取首页数据
			
 
				+export const getHomeData = () => {
			
 
				+  return request({
			
 
				+    url: '/home/data',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取产品列表
			
 
				+export const getProducts = () => {
			
 
				+  return request({
			
 
				+    url: '/home/products',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取技术优势
			
 
				+export const getAdvantages = () => {
			
 
				+  return request({
			
 
				+    url: '/home/advantages',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取统计数据
			
 
				+export const getStats = () => {
			
 
				+  return request({
			
 
				+    url: '/home/stats',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
--- a/src/api/modules/products.js
+++ b/src/api/modules/products.js
@@ -0,0 +1,33 @@
 
				+import request from '@/utils/request'
			
 
				+
			
 
				+// 获取产品数据
			
 
				+export const getProductsData = () => {
			
 
				+  return request({
			
 
				+    url: '/api/products/data',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取核心模块
			
 
				+export const getCoreModules = () => {
			
 
				+  return request({
			
 
				+    url: '/api/products/modules',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取产品特色
			
 
				+export const getProductHighlights = () => {
			
 
				+  return request({
			
 
				+    url: '/api/products/highlights',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取技术架构信息
			
 
				+export const getTechArchitecture = () => {
			
 
				+  return request({
			
 
				+    url: '/api/products/architecture',
			
 
				+    method: 'get'
			
 
				+  })
			
 
				+}
			
--- a/src/assets/about-banner-s1.png
+++ b/src/assets/about-banner-s1.png
--- a/src/assets/about-banner-s2.png
+++ b/src/assets/about-banner-s2.png
--- a/src/assets/about-banner-s3.png
+++ b/src/assets/about-banner-s3.png
--- a/src/assets/about-bg1.png
+++ b/src/assets/about-bg1.png
--- a/src/assets/arrow-down.png
+++ b/src/assets/arrow-down.png
--- a/src/assets/arrow-down.svg
+++ b/src/assets/arrow-down.svg
@@ -0,0 +1 @@
 
				+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1758790897144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4673" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="4674" fill="#666666"></path></svg>
			
--- a/src/assets/arrow-right.png
+++ b/src/assets/arrow-right.png
--- a/src/assets/banner.png
+++ b/src/assets/banner.png
--- a/src/assets/cases-banner.png
+++ b/src/assets/cases-banner.png
--- a/src/assets/cases-bg-01.png
+++ b/src/assets/cases-bg-01.png
--- a/src/assets/cases-bg-02.png
+++ b/src/assets/cases-bg-02.png
--- a/src/assets/contact-addr.png
+++ b/src/assets/contact-addr.png
--- a/src/assets/contact-banner.png
+++ b/src/assets/contact-banner.png
--- a/src/assets/contact-bg.png
+++ b/src/assets/contact-bg.png
--- a/src/assets/contact-mail.png
+++ b/src/assets/contact-mail.png
--- a/src/assets/contact-map.png
+++ b/src/assets/contact-map.png
--- a/src/assets/contact-phone.png
+++ b/src/assets/contact-phone.png
--- a/src/assets/contact-wx01.png
+++ b/src/assets/contact-wx01.png
--- a/src/assets/contact-wx02.png
+++ b/src/assets/contact-wx02.png
--- a/src/assets/footer-addr.png
+++ b/src/assets/footer-addr.png
--- a/src/assets/footer-bg.png
+++ b/src/assets/footer-bg.png
--- a/src/assets/footer-phone.png
+++ b/src/assets/footer-phone.png
--- a/src/assets/footer-qrcode.png
+++ b/src/assets/footer-qrcode.png
--- a/src/assets/index-about-bg.png
+++ b/src/assets/index-about-bg.png
--- a/src/assets/index-cases-bg.png
+++ b/src/assets/index-cases-bg.png
--- a/src/assets/index-cooperation-bg.png
+++ b/src/assets/index-cooperation-bg.png
--- a/src/assets/index-products-01.png
+++ b/src/assets/index-products-01.png
--- a/src/assets/index-products-bg.png
+++ b/src/assets/index-products-bg.png
--- a/src/assets/products-banner.png
+++ b/src/assets/products-banner.png
--- a/src/assets/products-bg01.png
+++ b/src/assets/products-bg01.png
--- a/src/assets/products-bg02.png
+++ b/src/assets/products-bg02.png
--- a/src/assets/products-select.png
+++ b/src/assets/products-select.png
--- a/src/assets/products-youshi-01.png
+++ b/src/assets/products-youshi-01.png
--- a/src/assets/products-youshi-02.png
+++ b/src/assets/products-youshi-02.png
--- a/src/assets/products-youshi-03.png
+++ b/src/assets/products-youshi-03.png
--- a/src/assets/products-youshi-04.png
+++ b/src/assets/products-youshi-04.png
--- a/src/assets/products-youshi-05.png
+++ b/src/assets/products-youshi-05.png
--- a/src/assets/products-youshi-06.png
+++ b/src/assets/products-youshi-06.png
--- a/src/assets/slide-arrow-left.png
+++ b/src/assets/slide-arrow-left.png
--- a/src/assets/slide-arrow-right.png
+++ b/src/assets/slide-arrow-right.png
--- a/src/components/common/message/Message.vue
+++ b/src/components/common/message/Message.vue
@@ -0,0 +1,96 @@
 
				+<template>
			
 
				+  <div class="message" :class="type" v-show="visible">
			
 
				+    <div class="message-content">
			
 
				+      <span class="message-text">{{ message }}</span>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'Message',
			
 
				+  props: {
			
 
				+    message: {
			
 
				+      type: String,
			
 
				+      default: ''
			
 
				+    },
			
 
				+    type: {
			
 
				+      type: String,
			
 
				+      default: 'info'
			
 
				+    },
			
 
				+    duration: {
			
 
				+      type: Number,
			
 
				+      default: 3000
			
 
				+    }
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      visible: false
			
 
				+    }
			
 
				+  },
			
 
				+  methods: {
			
 
				+    show() {
			
 
				+      this.visible = true
			
 
				+      setTimeout(() => {
			
 
				+        this.hide()
			
 
				+      }, this.duration)
			
 
				+    },
			
 
				+    hide() {
			
 
				+      this.visible = false
			
 
				+      this.$el.addEventListener('transitionend', () => {
			
 
				+        this.$destroy()
			
 
				+        this.$el.remove()
			
 
				+      })
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.message {
			
 
				+  position: fixed;
			
 
				+  top: 20px;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  z-index: 9999;
			
 
				+  padding: 15px 20px;
			
 
				+  border-radius: 4px;
			
 
				+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			
 
				+  transition: opacity 0.3s, transform 0.3s;
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+
			
 
				+.message.info {
			
 
				+  background-color: #f0f9eb;
			
 
				+  border: 1px solid #e1f3d8;
			
 
				+  color: #67c23a;
			
 
				+}
			
 
				+
			
 
				+.message.success {
			
 
				+  background-color: #f0f9eb;
			
 
				+  border: 1px solid #e1f3d8;
			
 
				+  color: #67c23a;
			
 
				+}
			
 
				+
			
 
				+.message.warning {
			
 
				+  background-color: #fdf6ec;
			
 
				+  border: 1px solid #faecd8;
			
 
				+  color: #e6a23c;
			
 
				+}
			
 
				+
			
 
				+.message.error {
			
 
				+  background-color: #fef0f0;
			
 
				+  border: 1px solid #fde2e2;
			
 
				+  color: #f56c6c;
			
 
				+}
			
 
				+
			
 
				+.message-content {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+
			
 
				+.message-text {
			
 
				+  font-size: 14px;
			
 
				+  line-height: 1.4;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/common/message/index.js
+++ b/src/components/common/message/index.js
@@ -0,0 +1,53 @@
 
				+import { createVNode, render } from 'vue'
			
 
				+import MessageConstructor from './Message.vue'
			
 
				+
			
 
				+const Message = function(options) {
			
 
				+  console.log(options)
			
 
				+  options = options || {}
			
 
				+  if (typeof options === 'string') {
			
 
				+    options = {
			
 
				+      message: options
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  const vnode = createVNode(MessageConstructor, options)
			
 
				+  const container = document.createElement('div')
			
 
				+  render(vnode, container)
			
 
				+  document.body.appendChild(container)
			
 
				+  vnode.component.proxy.show()
			
 
				+}
			
 
				+
			
 
				+Message.success = function(message, options) {
			
 
				+  console.log(message, options)
			
 
				+  return Message({
			
 
				+    message,
			
 
				+    type: 'success',
			
 
				+    ...options
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+Message.warning = function(message, options) {
			
 
				+  return Message({
			
 
				+    message,
			
 
				+    type: 'warning',
			
 
				+    ...options
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+Message.info = function(message, options) {
			
 
				+  return Message({
			
 
				+    message,
			
 
				+    type: 'info',
			
 
				+    ...options
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+Message.error = function(message, options) {
			
 
				+  return Message({
			
 
				+    message,
			
 
				+    type: 'error',
			
 
				+    ...options
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export default Message
			
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -0,0 +1,14 @@
 
				+import Message from './common/message'
			
 
				+
			
 
				+// 全局组件注册
			
 
				+export default {
			
 
				+  install(app) {
			
 
				+    // 注册全局组件
			
 
				+    app.config.globalProperties.$message = Message
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 单独导出
			
 
				+export {
			
 
				+  Message
			
 
				+}
			
--- a/src/components/layout/Footer.vue
+++ b/src/components/layout/Footer.vue
@@ -0,0 +1,304 @@
 
				+<template>
			
 
				+  <footer class="footer">
			
 
				+    <!-- 主要内容区域 -->
			
 
				+    <div class="footer-main">
			
 
				+      <div class="container">
			
 
				+        <div class="footer-content">
			
 
				+          <!-- 左侧联系方式 -->
			
 
				+          <div class="contact-section">
			
 
				+            <h3 class="section-title">联系我们</h3>
			
 
				+            <div class="contact-item phone">
			
 
				+              <img src="@assets/footer-phone.png" alt="电话" class="contact-icon">
			
 
				+              <span class="contact-text">400-624-0069</span>
			
 
				+            </div>
			
 
				+            <div class="contact-item addr">
			
 
				+              <img src="@assets/footer-addr.png" alt="地址" class="contact-icon">
			
 
				+              <span class="contact-text">贵州省贵阳市观山湖区金融城MAX-A座</span>
			
 
				+            </div>
			
 
				+            <div class="qrcode-section">
			
 
				+              <img src="@assets/footer-qrcode.png" alt="微信公众号" class="qrcode">
			
 
				+              <p class="qrcode-text">微信公众号入口</p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <!-- 右侧导航链接 -->
			
 
				+          <div class="nav-sections">
			
 
				+            <!-- 达泽科技 -->
			
 
				+            <div class="nav-column">
			
 
				+              <h3 class="section-title">达泽科技</h3>
			
 
				+              <ul class="nav-list">
			
 
				+                <li><a href="#" class="nav-link">首页</a></li>
			
 
				+                <li><a href="#" class="nav-link">关于我们</a></li>
			
 
				+                <li><a href="#" class="nav-link">解决方案</a></li>
			
 
				+                <li><a href="#" class="nav-link">技术框架</a></li>
			
 
				+              </ul>
			
 
				+            </div>
			
 
				+
			
 
				+            <!-- 关于我们 -->
			
 
				+            <div class="nav-column">
			
 
				+              <h3 class="section-title">关于我们</h3>
			
 
				+              <ul class="nav-list">
			
 
				+                <li><a href="#" class="nav-link">企业简介</a></li>
			
 
				+                <li><a href="#" class="nav-link">发展历程</a></li>
			
 
				+                <li><a href="#" class="nav-link">企业荣誉</a></li>
			
 
				+              </ul>
			
 
				+            </div>
			
 
				+
			
 
				+            <!-- 联系我们 -->
			
 
				+            <div class="nav-column">
			
 
				+              <h3 class="section-title">联系我们</h3>
			
 
				+              <ul class="nav-list">
			
 
				+                <li><a href="#" class="nav-link">联系方式</a></li>
			
 
				+              </ul>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 底部版权信息 -->
			
 
				+    <div class="footer-bottom">
			
 
				+      <div class="container">
			
 
				+        <div class="copyright-content">
			
 
				+          <p class="copyright-text">
			
 
				+            CopyRight © 贵州达泽科技有限公司 Guizhou Gui Daze Technology Co.,Ltd. 黔ICP备19000775号-1 贵公网安备52062102001026号
			
 
				+          </p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </footer>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'Footer'
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.footer {
			
 
				+  // background: linear-gradient(135deg, #4a6cf7 0%, #1e3a8a 50%, #0f172a 100%);
			
 
				+  background: url('@assets/footer-bg.png') no-repeat center top;
			
 
				+  background-size: cover;
			
 
				+  // background-color: #07122A;
			
 
				+  color: white;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.footer-main {
			
 
				+  padding: 205px 0 $spacing-xl 0;
			
 
				+}
			
 
				+
			
 
				+.container {
			
 
				+  max-width: $container-width;
			
 
				+  margin: 0 auto;
			
 
				+  padding: 0 $container-padding;
			
 
				+}
			
 
				+
			
 
				+.footer-content {
			
 
				+  display: grid;
			
 
				+  grid-template-columns: 1fr 2fr;
			
 
				+  gap: 300px;
			
 
				+  align-items: flex-start;
			
 
				+}
			
 
				+
			
 
				+.contact-section {
			
 
				+  .section-title {
			
 
				+    font-size: 32px;
			
 
				+    font-weight: 400;
			
 
				+    margin-bottom: 50px;
			
 
				+    color: white;
			
 
				+    padding-bottom: 15px;
			
 
				+    display: inline-block;
			
 
				+    position: relative;;
			
 
				+    &::after{
			
 
				+      content: '';
			
 
				+      width: 64px;
			
 
				+      height: 4px;
			
 
				+      position: absolute;
			
 
				+      left: 0;
			
 
				+      bottom: 0;
			
 
				+      background-color: #2E64AF;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .contact-item {
			
 
				+    font-size: 18px;
			
 
				+    display: flex;
			
 
				+    align-items: flex-start;
			
 
				+    margin-bottom: $spacing-base;
			
 
				+
			
 
				+    .contact-icon {
			
 
				+      width: 20px;
			
 
				+      height: 20px;
			
 
				+      margin-right: 10px;
			
 
				+      margin-top: 2px;
			
 
				+      flex-shrink: 0;
			
 
				+    }
			
 
				+
			
 
				+    .contact-text {
			
 
				+      color: rgba(255, 255, 255, 0.9);
			
 
				+    }
			
 
				+    &.phone{font-size: 32px;margin-bottom: 24px;}
			
 
				+    &.addr{margin-bottom: 32px;}
			
 
				+  }
			
 
				+
			
 
				+  .qrcode-section {
			
 
				+    margin-top: 12px;
			
 
				+    text-align: left;
			
 
				+
			
 
				+    .qrcode {
			
 
				+      width: 120px;
			
 
				+      height: 120px;
			
 
				+      border-radius: $border-radius-base;
			
 
				+      background: white;
			
 
				+      padding: 4px;
			
 
				+    }
			
 
				+
			
 
				+    .qrcode-text {
			
 
				+      margin-top: $spacing-small;
			
 
				+      color: rgba(255, 255, 255, 0.8);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.nav-sections {
			
 
				+  display: grid;
			
 
				+  grid-template-columns: repeat(3, 1fr);
			
 
				+  gap: $spacing-xl;
			
 
				+}
			
 
				+
			
 
				+.nav-column {
			
 
				+  .section-title {
			
 
				+    font-size: 28px;
			
 
				+    font-weight: 400;
			
 
				+    margin-bottom: 50px;
			
 
				+    color: white;
			
 
				+    display: inline-block;
			
 
				+  }
			
 
				+
			
 
				+  .nav-list {
			
 
				+    list-style: none;
			
 
				+    padding: 0;
			
 
				+    margin: 0;
			
 
				+
			
 
				+    li {
			
 
				+      margin-bottom: 30px;
			
 
				+    }
			
 
				+
			
 
				+    .nav-link {
			
 
				+      color: rgba(255, 255, 255, 0.8);
			
 
				+      text-decoration: none;
			
 
				+      font-size: 18px;
			
 
				+      transition: color 0.3s ease;
			
 
				+
			
 
				+      &:hover {
			
 
				+        color: white;
			
 
				+        // text-decoration: underline;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.footer-bottom {
			
 
				+  // background: rgba(0, 0, 0, 0.3);
			
 
				+  padding: $spacing-base 0;
			
 
				+  border-top: 1px solid rgba(255, 255, 255, 0.1);
			
 
				+
			
 
				+  .copyright-content {
			
 
				+    text-align: center;
			
 
				+
			
 
				+    .copyright-text {
			
 
				+      font-size: $font-size-small;
			
 
				+      color: rgba(255, 255, 255, 0.4);
			
 
				+      margin: 0;
			
 
				+      line-height: 1.5;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 移动端适配
			
 
				+@media (max-width: 768px) {
			
 
				+  .footer-main {
			
 
				+    padding: $spacing-xl 0 $spacing-large 0;
			
 
				+  }
			
 
				+
			
 
				+  .footer-content {
			
 
				+    grid-template-columns: 1fr;
			
 
				+    gap: $spacing-large;
			
 
				+  }
			
 
				+
			
 
				+  .contact-section {
			
 
				+    .contact-item {
			
 
				+      .contact-text {
			
 
				+        font-size: $font-size-small;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .qrcode-section {
			
 
				+      text-align: center;
			
 
				+      margin-top: $spacing-medium;
			
 
				+
			
 
				+      .qrcode {
			
 
				+        width: 100px;
			
 
				+        height: 100px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .nav-sections {
			
 
				+    // grid-template-columns: 1fr;
			
 
				+    gap: $spacing-medium;
			
 
				+  }
			
 
				+
			
 
				+  .nav-column {
			
 
				+    .section-title {
			
 
				+      font-size: $font-size-medium;
			
 
				+    }
			
 
				+
			
 
				+    .nav-list {
			
 
				+      .nav-link {
			
 
				+        font-size: $font-size-small;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .footer-bottom {
			
 
				+    .copyright-text {
			
 
				+      font-size: 11px;
			
 
				+      padding: 0 $spacing-small;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 超小屏幕适配
			
 
				+@media (max-width: 480px) {
			
 
				+  .footer{
			
 
				+    background-position: 0px -35px;
			
 
				+    background-color: #07122A;
			
 
				+  }
			
 
				+  .container {
			
 
				+    padding: 0 $spacing-base;
			
 
				+  }
			
 
				+
			
 
				+  .footer-main {
			
 
				+    padding: $spacing-large 0;
			
 
				+  }
			
 
				+
			
 
				+  .contact-section {
			
 
				+    .contact-item {
			
 
				+      flex-direction: row;
			
 
				+      align-items: center;
			
 
				+
			
 
				+      .contact-icon {
			
 
				+        margin-bottom: $spacing-xs;
			
 
				+        // margin-right: 0;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .nav-sections {
			
 
				+    gap: $spacing-base;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -0,0 +1,285 @@
 
				+<template>
			
 
				+  <header class="header">
			
 
				+    <div class="container">
			
 
				+      <div class="header-content">
			
 
				+        <!-- Logo -->
			
 
				+        <div class="logo">
			
 
				+          <router-link to="/" class="logo-link">
			
 
				+            <img src="/logo.png" alt="智慧校园" class="logo-img" />
			
 
				+            <!-- <span class="logo-text">智慧校园平台</span> -->
			
 
				+          </router-link>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 导航菜单 -->
			
 
				+        <nav class="nav">
			
 
				+          <ul class="nav-list">
			
 
				+            <li class="nav-item">
			
 
				+              <router-link to="/" class="nav-link" :class="{ active: $route.path === '/' }">
			
 
				+                首页
			
 
				+              </router-link>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <router-link to="/products" class="nav-link" :class="{ active: $route.path.startsWith('/products') }">
			
 
				+                产品中心
			
 
				+              </router-link>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <router-link to="/cases" class="nav-link" :class="{ active: $route.path.startsWith('/cases') }">
			
 
				+                行业案例
			
 
				+              </router-link>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <router-link to="/about" class="nav-link" :class="{ active: $route.path.startsWith('/about') }">
			
 
				+                企业介绍
			
 
				+              </router-link>
			
 
				+            </li>
			
 
				+            <li class="nav-item">
			
 
				+              <router-link to="/contact" class="nav-link" :class="{ active: $route.path.startsWith('/contact') }">
			
 
				+                联系我们
			
 
				+              </router-link>
			
 
				+            </li>
			
 
				+          </ul>
			
 
				+        </nav>
			
 
				+
			
 
				+        <!-- 移动端菜单按钮 -->
			
 
				+        <div class="mobile-menu-btn" @click="toggleMobileMenu">
			
 
				+          <span class="hamburger" :class="{ active: mobileMenuOpen }"></span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 移动端菜单 -->
			
 
				+      <div class="mobile-menu" :class="{ open: mobileMenuOpen }">
			
 
				+        <ul class="mobile-nav-list">
			
 
				+          <li class="mobile-nav-item">
			
 
				+            <router-link to="/" class="mobile-nav-link" @click="closeMobileMenu">首页</router-link>
			
 
				+          </li>
			
 
				+          <li class="mobile-nav-item">
			
 
				+            <router-link to="/products" class="mobile-nav-link" @click="closeMobileMenu">产品中心</router-link>
			
 
				+          </li>
			
 
				+          <li class="mobile-nav-item">
			
 
				+            <router-link to="/cases" class="mobile-nav-link" @click="closeMobileMenu">行业案例</router-link>
			
 
				+          </li>
			
 
				+          <li class="mobile-nav-item">
			
 
				+            <router-link to="/about" class="mobile-nav-link" @click="closeMobileMenu">企业介绍</router-link>
			
 
				+          </li>
			
 
				+          <li class="mobile-nav-item">
			
 
				+            <router-link to="/contact" class="mobile-nav-link" @click="closeMobileMenu">联系我们</router-link>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </header>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref } from 'vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'Header',
			
 
				+  setup() {
			
 
				+    const mobileMenuOpen = ref(false)
			
 
				+
			
 
				+    const toggleMobileMenu = () => {
			
 
				+      mobileMenuOpen.value = !mobileMenuOpen.value
			
 
				+    }
			
 
				+
			
 
				+    const closeMobileMenu = () => {
			
 
				+      mobileMenuOpen.value = false
			
 
				+    }
			
 
				+
			
 
				+    return {
			
 
				+      mobileMenuOpen,
			
 
				+      toggleMobileMenu,
			
 
				+      closeMobileMenu
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.header {
			
 
				+  background: rgba(255, 255, 255, 0.95);
			
 
				+  backdrop-filter: blur(10px);
			
 
				+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  right: 0;
			
 
				+  z-index: 1000;
			
 
				+  transition: all 0.3s ease;
			
 
				+}
			
 
				+
			
 
				+.header-content {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: space-between;
			
 
				+  height: 100px;
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+  .logo-link {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    gap: 12px;
			
 
				+  }
			
 
				+
			
 
				+  .logo-img {
			
 
				+    height: 30px;
			
 
				+    width: auto;
			
 
				+  }
			
 
				+
			
 
				+  .logo-text {
			
 
				+    font-size: 20px;
			
 
				+    font-weight: 600;
			
 
				+    color: $text-primary;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.nav {
			
 
				+  .nav-list {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    gap: 80px;
			
 
				+  }
			
 
				+
			
 
				+  .nav-link {
			
 
				+    font-size: 26px;
			
 
				+    font-weight: 500;
			
 
				+    color: $text-primary;
			
 
				+    padding: 8px 0;
			
 
				+    position: relative;
			
 
				+    transition: all 0.3s ease;
			
 
				+    display: block;
			
 
				+    height: 100px;
			
 
				+    line-height: 100px;
			
 
				+
			
 
				+    &:hover,
			
 
				+    &.active {
			
 
				+      color: $primary-color;
			
 
				+    }
			
 
				+
			
 
				+    &.active::after {
			
 
				+      content: '';
			
 
				+      position: absolute;
			
 
				+      bottom: -0;
			
 
				+      left: 0;
			
 
				+      right: 0;
			
 
				+      height: 2px;
			
 
				+      background: $primary-color;
			
 
				+      border-radius: 1px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.mobile-menu-btn {
			
 
				+  display: none;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: center;
			
 
				+  width: 30px;
			
 
				+  height: 30px;
			
 
				+  cursor: pointer;
			
 
				+
			
 
				+  .hamburger {
			
 
				+    width: 100%;
			
 
				+    height: 2px;
			
 
				+    background: $text-primary;
			
 
				+    transition: all 0.3s ease;
			
 
				+    position: relative;
			
 
				+
			
 
				+    &::before,
			
 
				+    &::after {
			
 
				+      content: '';
			
 
				+      position: absolute;
			
 
				+      width: 100%;
			
 
				+      height: 2px;
			
 
				+      background: $text-primary;
			
 
				+      transition: all 0.3s ease;
			
 
				+    }
			
 
				+
			
 
				+    &::before {
			
 
				+      top: -8px;
			
 
				+    }
			
 
				+
			
 
				+    &::after {
			
 
				+      bottom: -8px;
			
 
				+    }
			
 
				+
			
 
				+    &.active {
			
 
				+      background: transparent;
			
 
				+
			
 
				+      &::before {
			
 
				+        top: 0;
			
 
				+        transform: rotate(45deg);
			
 
				+      }
			
 
				+
			
 
				+      &::after {
			
 
				+        bottom: 0;
			
 
				+        transform: rotate(-45deg);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.mobile-menu {
			
 
				+  display: none;
			
 
				+  position: absolute;
			
 
				+  top: 100%;
			
 
				+  left: 0;
			
 
				+  right: 0;
			
 
				+  background: white;
			
 
				+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			
 
				+  transform: translateY(-100%);
			
 
				+  opacity: 0;
			
 
				+  visibility: hidden;
			
 
				+  transition: all 0.3s ease;
			
 
				+
			
 
				+  &.open {
			
 
				+    transform: translateY(0);
			
 
				+    opacity: 1;
			
 
				+    visibility: visible;
			
 
				+  }
			
 
				+
			
 
				+  .mobile-nav-list {
			
 
				+    padding: 20px 0;
			
 
				+  }
			
 
				+
			
 
				+  .mobile-nav-item {
			
 
				+    border-bottom: 1px solid $border-color;
			
 
				+
			
 
				+    &:last-child {
			
 
				+      border-bottom: none;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .mobile-nav-link {
			
 
				+    display: block;
			
 
				+    padding: 15px 20px;
			
 
				+    font-size: 16px;
			
 
				+    color: $text-primary;
			
 
				+    transition: all 0.3s ease;
			
 
				+
			
 
				+    &:hover {
			
 
				+      background: $bg-light;
			
 
				+      color: $primary-color;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media (max-width: 768px) {
			
 
				+  .nav {
			
 
				+    display: none;
			
 
				+  }
			
 
				+
			
 
				+  .mobile-menu-btn {
			
 
				+    display: flex;
			
 
				+  }
			
 
				+
			
 
				+  .mobile-menu {
			
 
				+    display: block;
			
 
				+  }
			
 
				+
			
 
				+  .logo-text {
			
 
				+    font-size: 18px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -0,0 +1,35 @@
 
				+<template>
			
 
				+  <div class="layout">
			
 
				+    <Header />
			
 
				+    <main class="main-content">
			
 
				+      <slot />
			
 
				+    </main>
			
 
				+    <Footer />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Header from '@/components/layout/Header.vue'
			
 
				+import Footer from '@/components/layout/Footer.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'DefaultLayout',
			
 
				+  components: {
			
 
				+    Header,
			
 
				+    Footer
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.layout {
			
 
				+  min-height: 100vh;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+.main-content {
			
 
				+  flex: 1;
			
 
				+  padding-top: 70px; // Header height
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,14 @@
 
				+import { createApp } from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import store from './stores'
			
 
				+import components from './components'
			
 
				+import '@/styles/index.css'
			
 
				+
			
 
				+const app = createApp(App)
			
 
				+
			
 
				+app.use(store)
			
 
				+app.use(router)
			
 
				+app.use(components)
			
 
				+
			
 
				+app.mount('#app')
			
--- a/src/pages/about/Index.vue
+++ b/src/pages/about/Index.vue
@@ -0,0 +1,522 @@
 
				+<template>
			
 
				+  <DefaultLayout>
			
 
				+    <!-- banner -->
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/about-banner-s1.png" alt="" srcset="">
			
 
				+    </section>
			
 
				+    <section class="banner-section about-us">
			
 
				+      <img src="@assets/about-banner-s2.png" alt="" srcset="">
			
 
				+
			
 
				+      <!-- 数据模块 -->
			
 
				+      <div class="data-stats">
			
 
				+        <div class="stats-item">
			
 
				+          <div class="stats-number">31</div>
			
 
				+          <div class="stats-label">员工平均年龄</div>
			
 
				+        </div>
			
 
				+        <div class="stats-divider"></div>
			
 
				+        <div class="stats-item">
			
 
				+          <div class="stats-number">83%</div>
			
 
				+          <div class="stats-label">本科学历以上占比</div>
			
 
				+        </div>
			
 
				+        <div class="stats-divider"></div>
			
 
				+        <div class="stats-item">
			
 
				+          <div class="stats-number">57%</div>
			
 
				+          <div class="stats-label">专业技术人员占比</div>
			
 
				+        </div>
			
 
				+        <div class="stats-divider"></div>
			
 
				+        <div class="stats-item">
			
 
				+          <div class="stats-number">38%</div>
			
 
				+          <div class="stats-label">行业专业技术人才占比</div>
			
 
				+        </div>
			
 
				+        <div class="stats-divider"></div>
			
 
				+        <div class="stats-item">
			
 
				+          <div class="stats-number">53%</div>
			
 
				+          <div class="stats-label">中高级职称人员占比</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/about-banner-s3.png" alt="" srcset="">
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 企业资质 -->
			
 
				+    <section class="qualification-section">
			
 
				+      <div class="container">
			
 
				+        <!-- 标题 -->
			
 
				+        <div class="section-title">
			
 
				+          <h2>企业资质</h2>
			
 
				+          <p class="title-en">ENTERPRISE QUALIFICATION</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 证书切换按钮 -->
			
 
				+        <div class="certificate-tabs">
			
 
				+          <button v-for="(category, index) in certificateCategories" :key="index"
			
 
				+            :class="['tab-btn', { active: activeTab === index }]" @click="switchTab(index)">
			
 
				+            {{ category.name }}
			
 
				+          </button>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 证书列表 -->
			
 
				+        <div class="certificate-container">
			
 
				+          <div class="certificate-slider"
			
 
				+            :style="{ transform: `translateX(-${currentSlide * itemWidth * itemsPerPage}px)` }">
			
 
				+            <div v-for="(certificate, index) in currentCertificates" :key="index" class="certificate-item">
			
 
				+              <img :src="certificate.image" :alt="certificate.title" />
			
 
				+              <!-- <p class="certificate-title">{{ certificate.title }}</p> -->
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <!-- 左右切换按钮 -->
			
 
				+          <button v-if="showNavButtons && currentSlide > 0" class="nav-btn nav-btn-left" @click="prevSlide">
			
 
				+            <img src="@assets/slide-arrow-left.png" alt="上一页" />
			
 
				+          </button>
			
 
				+          <button v-if="showNavButtons && currentSlide < maxSlide" class="nav-btn nav-btn-right" @click="nextSlide">
			
 
				+            <img src="@assets/slide-arrow-right.png" alt="下一页" />
			
 
				+          </button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+  </DefaultLayout>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref, onMounted, computed, nextTick } from 'vue'
			
 
				+import DefaultLayout from '@/layouts/DefaultLayout.vue'
			
 
				+import { getProductsData } from '@/api/modules/products'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'AboutPage',
			
 
				+  components: {
			
 
				+    DefaultLayout
			
 
				+  },
			
 
				+  setup() {
			
 
				+    // 当前激活的标签页
			
 
				+    const activeTab = ref(0)
			
 
				+    // 当前滑动位置
			
 
				+    const currentSlide = ref(0)
			
 
				+    // 每页显示的证书数量
			
 
				+    const itemsPerPage = ref(5)
			
 
				+    // 每个证书项的宽度（包括间距）
			
 
				+    const itemWidth = ref(220)
			
 
				+
			
 
				+    // 证书分类数据
			
 
				+    const certificateCategories = ref([
			
 
				+      {
			
 
				+        name: '授权证书',
			
 
				+        certificates: [
			
 
				+          { title: '智慧校园管理系统软件著作权', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '在线教学平台软件著作权', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '学生信息管理系统著作权', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '智能考试系统软件著作权', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '校园安全监控系统著作权', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '教务管理平台软件著作权', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '数字化图书馆系统著作权', image: 'https://unsplash.it/256/354' }
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '著作权证书',
			
 
				+        certificates: [
			
 
				+          { title: '智慧教育云平台V1.0', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '校园一卡通系统V2.0', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '在线学习评估系统V1.5', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '智能排课系统V3.0', image: 'https://unsplash.it/256/354' }
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '荣誉证书',
			
 
				+        certificates: [
			
 
				+          { title: '国家高新技术企业证', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '优秀教育科技企业奖', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '创新型企业认证证书', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: 'ISO9001质量管理体', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: 'ISO27001信息安全', image: 'https://unsplash.it/256/354' },
			
 
				+          { title: '教育行业优质服务', image: 'https://unsplash.it/256/354' }
			
 
				+        ]
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    // 当前分类的证书列表
			
 
				+    const currentCertificates = computed(() => {
			
 
				+      return certificateCategories.value[activeTab.value]?.certificates || []
			
 
				+    })
			
 
				+
			
 
				+    // 是否显示导航按钮
			
 
				+    const showNavButtons = computed(() => {
			
 
				+      return currentCertificates.value.length > itemsPerPage.value
			
 
				+    })
			
 
				+
			
 
				+    // 最大滑动页数
			
 
				+    const maxSlide = computed(() => {
			
 
				+      return Math.max(0, Math.ceil(currentCertificates.value.length / itemsPerPage.value) - 1)
			
 
				+    })
			
 
				+
			
 
				+    // 切换标签页
			
 
				+    const switchTab = (index) => {
			
 
				+      activeTab.value = index
			
 
				+      currentSlide.value = 0 // 重置滑动位置
			
 
				+    }
			
 
				+
			
 
				+    // 上一页
			
 
				+    const prevSlide = () => {
			
 
				+      if (currentSlide.value > 0) {
			
 
				+        currentSlide.value--
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 下一页
			
 
				+    const nextSlide = () => {
			
 
				+      if (currentSlide.value < maxSlide.value) {
			
 
				+        currentSlide.value++
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // API调用方法
			
 
				+    const loadProductsData = async () => {
			
 
				+      try {
			
 
				+        const data = await getProductsData()
			
 
				+        console.log('产品数据:', data)
			
 
				+      } catch (error) {
			
 
				+        console.error('加载产品数据失败:', error)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    onMounted(() => {
			
 
				+      loadProductsData()
			
 
				+    })
			
 
				+
			
 
				+    return {
			
 
				+      activeTab,
			
 
				+      currentSlide,
			
 
				+      itemWidth,
			
 
				+      itemsPerPage,
			
 
				+      certificateCategories,
			
 
				+      currentCertificates,
			
 
				+      showNavButtons,
			
 
				+      maxSlide,
			
 
				+      switchTab,
			
 
				+      prevSlide,
			
 
				+      nextSlide
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+// banner区域
			
 
				+.banner-section {
			
 
				+  position: relative;
			
 
				+
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+
			
 
				+  // 数据统计模块
			
 
				+  &.about-us {
			
 
				+    .data-stats {
			
 
				+      position: absolute;
			
 
				+      bottom: 98px;
			
 
				+      left: 10%;
			
 
				+      right: 10%;
			
 
				+      background: rgba(255, 255, 255, 0.5);
			
 
				+      backdrop-filter: blur(10px);
			
 
				+      padding: 30px 0;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      border-radius: 10px;
			
 
				+      gap: 60px;
			
 
				+
			
 
				+      .stats-item {
			
 
				+        text-align: center;
			
 
				+        color: #0054FF;
			
 
				+
			
 
				+        .stats-number {
			
 
				+          font-size: 48px;
			
 
				+          font-weight: 700;
			
 
				+          line-height: 1;
			
 
				+          margin-bottom: 8px;
			
 
				+        }
			
 
				+
			
 
				+        .stats-label {
			
 
				+          font-size: 14px;
			
 
				+          font-weight: 400;
			
 
				+          color: #333;
			
 
				+          white-space: nowrap;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .stats-divider {
			
 
				+        width: 1px;
			
 
				+        height: 60px;
			
 
				+        background: linear-gradient(to bottom, transparent, #ddd 20%, #ddd 80%, transparent);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 企业资质区域
			
 
				+.qualification-section {
			
 
				+  padding: 80px 0;
			
 
				+  position: relative;
			
 
				+
			
 
				+  &::before {
			
 
				+    position: absolute;
			
 
				+    content: '';
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    top: -3px;
			
 
				+    bottom: -138px;
			
 
				+    background: url('@assets/about-bg1.png') no-repeat center center;
			
 
				+    ;
			
 
				+    background-size: cover;
			
 
				+  }
			
 
				+
			
 
				+  .container {
			
 
				+    margin: 0 auto;
			
 
				+    padding: 0 20px;
			
 
				+  }
			
 
				+
			
 
				+  // 标题样式
			
 
				+  .section-title {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 125px;
			
 
				+
			
 
				+    h2 {
			
 
				+      font-size: 36px;
			
 
				+      font-weight: 600;
			
 
				+      color: #333;
			
 
				+      margin-bottom: 10px;
			
 
				+      position: relative;
			
 
				+    }
			
 
				+
			
 
				+    .title-en {
			
 
				+      font-size: 14px;
			
 
				+      color: #999;
			
 
				+      letter-spacing: 2px;
			
 
				+      margin-top: 15px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 证书切换标签
			
 
				+  .certificate-tabs {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    margin-bottom: 50px;
			
 
				+    // gap: 20px;
			
 
				+
			
 
				+    .tab-btn {
			
 
				+      padding: 12px 30px;
			
 
				+      border: 2px solid #F5F9FD;
			
 
				+      background: #F5F9FD;
			
 
				+      color: #666;
			
 
				+      font-size: 16px;
			
 
				+      font-weight: 500;
			
 
				+      border-radius: 10px;
			
 
				+      cursor: pointer;
			
 
				+      transition: all 0.3s ease;
			
 
				+      box-sizing: border-box;
			
 
				+      width: 440px;
			
 
				+
			
 
				+      &:hover {
			
 
				+        border-color: #2E64AF;
			
 
				+        color: #0862C8;
			
 
				+      }
			
 
				+
			
 
				+      &.active {
			
 
				+        background: #EAF2FA;
			
 
				+        border-color: #2E64AF;
			
 
				+        color: #0862C8;
			
 
				+        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 证书容器
			
 
				+  .certificate-container {
			
 
				+    position: relative;
			
 
				+    overflow: hidden;
			
 
				+    padding: 60px; // 为导航按钮留出空间
			
 
				+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
			
 
				+    background-color: rgba(255, 255, 255, 0.9);
			
 
				+    border-radius: 10px;
			
 
				+
			
 
				+    .certificate-slider {
			
 
				+      display: flex;
			
 
				+      transition: transform 0.5s ease;
			
 
				+      gap: 44px;
			
 
				+    }
			
 
				+
			
 
				+    .certificate-item {
			
 
				+      flex: 0 0 256px;
			
 
				+      text-align: center;
			
 
				+      // background: #fff;
			
 
				+      border-radius: 12px;
			
 
				+      // padding: 20px;
			
 
				+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			
 
				+      transition: all 0.3s ease;
			
 
				+
			
 
				+      &:hover {
			
 
				+        transform: translateY(-5px);
			
 
				+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        width: 100%;
			
 
				+        height: 354px;
			
 
				+        object-fit: cover;
			
 
				+        // border-radius: 8px;
			
 
				+        // margin-bottom: 15px;
			
 
				+        border: 1px solid #f0f0f0;
			
 
				+      }
			
 
				+
			
 
				+      .certificate-title {
			
 
				+        font-size: 14px;
			
 
				+        color: #333;
			
 
				+        font-weight: 500;
			
 
				+        line-height: 1.4;
			
 
				+        margin: 0;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 导航按钮
			
 
				+    .nav-btn {
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      transform: translateY(-50%);
			
 
				+      width: 40px;
			
 
				+      height: 40px;
			
 
				+      background: rgba(255, 255, 255, 0.9);
			
 
				+      border: 1px solid #e0e0e0;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      transition: all 0.3s ease;
			
 
				+      z-index: 10;
			
 
				+
			
 
				+      &:hover {
			
 
				+        background: #fff;
			
 
				+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			
 
				+        transform: translateY(-50%) scale(1.1);
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        width: 16px;
			
 
				+        height: 16px;
			
 
				+      }
			
 
				+
			
 
				+      &.nav-btn-left {
			
 
				+        left: 10px;
			
 
				+      }
			
 
				+
			
 
				+      &.nav-btn-right {
			
 
				+        right: 10px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 响应式设计
			
 
				+@media (max-width: 768px) {
			
 
				+  .banner-section.about-us {
			
 
				+    .data-stats {
			
 
				+      padding: 20px 15px;
			
 
				+      gap: 30px;
			
 
				+      flex-wrap: wrap;
			
 
				+
			
 
				+      .stats-item {
			
 
				+        .stats-number {
			
 
				+          font-size: 36px;
			
 
				+        }
			
 
				+
			
 
				+        .stats-label {
			
 
				+          font-size: 12px;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .stats-divider {
			
 
				+        height: 40px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .qualification-section {
			
 
				+    padding: 60px 0;
			
 
				+
			
 
				+    .section-title {
			
 
				+      margin-bottom: 40px;
			
 
				+
			
 
				+      h2 {
			
 
				+        font-size: 28px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .certificate-tabs {
			
 
				+      flex-wrap: wrap;
			
 
				+      gap: 10px;
			
 
				+      margin-bottom: 30px;
			
 
				+
			
 
				+      .tab-btn {
			
 
				+        padding: 10px 20px;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .certificate-container {
			
 
				+      padding: 0 50px;
			
 
				+
			
 
				+      .certificate-item {
			
 
				+        flex: 0 0 160px;
			
 
				+        padding: 15px;
			
 
				+
			
 
				+        img {
			
 
				+          height: 200px;
			
 
				+        }
			
 
				+
			
 
				+        .certificate-title {
			
 
				+          font-size: 12px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media (max-width: 480px) {
			
 
				+  .banner-section.about-us {
			
 
				+    .data-stats {
			
 
				+      padding: 15px 10px;
			
 
				+      gap: 20px;
			
 
				+
			
 
				+      .stats-item {
			
 
				+        .stats-number {
			
 
				+          font-size: 28px;
			
 
				+        }
			
 
				+
			
 
				+        .stats-label {
			
 
				+          font-size: 11px;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .stats-divider {
			
 
				+        height: 30px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .qualification-section {
			
 
				+    .certificate-container {
			
 
				+      padding: 0 40px;
			
 
				+
			
 
				+      .certificate-item {
			
 
				+        flex: 0 0 140px;
			
 
				+        padding: 12px;
			
 
				+
			
 
				+        img {
			
 
				+          height: 180px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/cases/Index.vue
+++ b/src/pages/cases/Index.vue
@@ -0,0 +1,523 @@
 
				+<template>
			
 
				+  <DefaultLayout>
			
 
				+    <!-- banner -->
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/cases-banner.png" alt="" srcset="">
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 智慧解决方案 -->
			
 
				+    <section class="smart-solutions">
			
 
				+      <div class="container">
			
 
				+        <!-- 标题区域 -->
			
 
				+        <div class="title-section">
			
 
				+          <h2 class="main-title">智慧解决方案</h2>
			
 
				+          <p class="sub-title">SMART SOLUTION</p>
			
 
				+          <p class="description">智慧管理系统采用先进的开发技术，为智慧产业提供一站式解决方案</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 解决方案列表 -->
			
 
				+        <div class="solutions-grid">
			
 
				+          <div v-for="(solution, index) in visibleSolutions" :key="solution.id" class="solution-card">
			
 
				+            <div class="card-image">
			
 
				+              <img :src="solution.image" :alt="solution.title" />
			
 
				+            </div>
			
 
				+            <div class="card-content">
			
 
				+              <h3 class="card-title">{{ solution.title }}</h3>
			
 
				+              <p class="card-description">{{ solution.description }}</p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 切换按钮 -->
			
 
				+        <div class="navigation-buttons">
			
 
				+          <button class="nav-btn prev-btn" :class="{ disabled: currentPage === 0 }" @click="prevPage"
			
 
				+            :disabled="currentPage === 0">
			
 
				+            <img src="@assets/slide-arrow-left.png" alt="上一页" />
			
 
				+          </button>
			
 
				+          <button class="nav-btn next-btn" :class="{ disabled: currentPage >= maxPage }" @click="nextPage"
			
 
				+            :disabled="currentPage >= maxPage">
			
 
				+            <img src="@assets/slide-arrow-right.png" alt="下一页" />
			
 
				+          </button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 更多案例 -->
			
 
				+    <section class="more-cases">
			
 
				+      <div class="container">
			
 
				+        <!-- 标题区域 -->
			
 
				+        <div class="title-section">
			
 
				+          <h2 class="main-title">更多案例</h2>
			
 
				+          <p class="sub-title">MORE CASES</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <!-- 案例列表 -->
			
 
				+        <div class="cases-list">
			
 
				+          <div v-for="(caseItem, index) in casesList" :key="caseItem.id" class="case-item"
			
 
				+            :class="{ 'fifth-row': Math.floor(index / 2) === 4 }" @click="goToCaseDetail(caseItem.id)">
			
 
				+            <div class="case-content">
			
 
				+              <h3 class="case-title">{{ caseItem.title }}</h3>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+  </DefaultLayout>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref, computed, onMounted } from 'vue'
			
 
				+import { useRouter } from 'vue-router'
			
 
				+import DefaultLayout from '@/layouts/DefaultLayout.vue'
			
 
				+import { getProductsData } from '@/api/modules/products'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'ProductsPage',
			
 
				+  components: {
			
 
				+    DefaultLayout
			
 
				+  },
			
 
				+  setup() {
			
 
				+    const router = useRouter()
			
 
				+    const currentPage = ref(0)
			
 
				+    const itemsPerPage = 6 // 每页显示6个（2行 × 3列）
			
 
				+
			
 
				+    // 解决方案数据
			
 
				+    const solutions = ref([
			
 
				+      {
			
 
				+        id: 1,
			
 
				+        title: '智慧农业（种植+养殖）',
			
 
				+        description: '通过物联网设备和数据分析，实现精准农业管理，提高农业生产效率和产品质量。',
			
 
				+        image: '/src/assets/products-youshi-01.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 2,
			
 
				+        title: '智慧停车',
			
 
				+        description: '通过智能化停车管理系统，实现停车位的智能分配和管理，提升停车效率。',
			
 
				+        image: '/src/assets/products-youshi-02.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 3,
			
 
				+        title: '数据服务系统',
			
 
				+        description: '为政府部门提供数据整合、分析和可视化服务，支持科学决策和管理优化。',
			
 
				+        image: '/src/assets/products-youshi-03.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 4,
			
 
				+        title: '景区一码游系统',
			
 
				+        description: '通过移动互联网技术，为游客提供便捷的景区服务，提升旅游体验。',
			
 
				+        image: '/src/assets/products-youshi-04.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 5,
			
 
				+        title: '智慧林场',
			
 
				+        description: '通过物联网和大数据技术，实现森林资源的智能监管和保护。',
			
 
				+        image: '/src/assets/products-youshi-05.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 6,
			
 
				+        title: '森林防火',
			
 
				+        description: '利用先进的监测技术和预警系统，实现森林火灾的早期发现和快速响应。',
			
 
				+        image: '/src/assets/products-youshi-06.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 7,
			
 
				+        title: '智慧城市',
			
 
				+        description: '构建智慧城市管理平台，实现城市运行的智能化监管和服务。',
			
 
				+        image: '/src/assets/products-youshi-01.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 8,
			
 
				+        title: '智慧医疗',
			
 
				+        description: '通过数字化技术提升医疗服务质量，实现医疗资源的优化配置。',
			
 
				+        image: '/src/assets/products-youshi-02.png'
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    // 更多案例数据
			
 
				+    const casesList = ref([
			
 
				+      { id: 1, title: '海南教育局大数据中心建设项目' },
			
 
				+      { id: 2, title: '贵阳某龙新区疫情网络安全监测项目' },
			
 
				+      { id: 3, title: '六盘水区民法院网络安全项目' },
			
 
				+      { id: 4, title: '某某人民银行' },
			
 
				+      { id: 5, title: '阿里大数据中心项目' },
			
 
				+      { id: 6, title: '贵阳市花溪区大学城项目' },
			
 
				+      { id: 7, title: '修文县商务局' },
			
 
				+      { id: 8, title: '贵州某通信集团公司综合考核管理系统项目' },
			
 
				+      { id: 9, title: '贵州省金沙开发区政务子信息产业园区15栋' },
			
 
				+      { id: 10, title: '六盘水市人民法院网络安全项目' },
			
 
				+      { id: 11, title: '贵州大学中科院学子化学院项目' },
			
 
				+      { id: 12, title: '修文县商务局' },
			
 
				+      { id: 13, title: '贵州某通信集团公司综合考核管理系统项目' },
			
 
				+      { id: 14, title: '贵州省金沙开发区政务子信息产业园区' },
			
 
				+      { id: 15, title: '六盘水市人民法院网络安全项目' },
			
 
				+      { id: 16, title: '兴义安龙县法院网络安全' },
			
 
				+      { id: 17, title: '贵阳市人力资源大数据智能化' },
			
 
				+      { id: 18, title: '贵州省食药监药品监管智能化项目智能化' },
			
 
				+      { id: 19, title: '兴义安龙县正式网络安全工程' },
			
 
				+      { id: 20, title: '兴义安龙县法院网络安全工程' }
			
 
				+    ])
			
 
				+
			
 
				+    // 跳转到案例详情页
			
 
				+    const goToCaseDetail = (caseId) => {
			
 
				+      router.push({
			
 
				+        name: 'Casesdetails',
			
 
				+        query: { id: caseId }
			
 
				+      })
			
 
				+    }
			
 
				+
			
 
				+    // 计算当前页显示的解决方案
			
 
				+    const visibleSolutions = computed(() => {
			
 
				+      const start = currentPage.value * itemsPerPage
			
 
				+      const end = start + itemsPerPage
			
 
				+      return solutions.value.slice(start, end)
			
 
				+    })
			
 
				+
			
 
				+    // 计算最大页数
			
 
				+    const maxPage = computed(() => {
			
 
				+      return Math.ceil(solutions.value.length / itemsPerPage) - 1
			
 
				+    })
			
 
				+
			
 
				+    // 上一页
			
 
				+    const prevPage = () => {
			
 
				+      if (currentPage.value > 0) {
			
 
				+        currentPage.value--
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 下一页
			
 
				+    const nextPage = () => {
			
 
				+      if (currentPage.value < maxPage.value) {
			
 
				+        currentPage.value++
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // API调用方法
			
 
				+    const loadProductsData = async () => {
			
 
				+      try {
			
 
				+        const data = await getProductsData()
			
 
				+        console.log('产品数据:', data)
			
 
				+      } catch (error) {
			
 
				+        console.error('加载产品数据失败:', error)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    onMounted(() => {
			
 
				+      loadProductsData()
			
 
				+    })
			
 
				+
			
 
				+    return {
			
 
				+      currentPage,
			
 
				+      solutions,
			
 
				+      visibleSolutions,
			
 
				+      maxPage,
			
 
				+      prevPage,
			
 
				+      nextPage,
			
 
				+      casesList,
			
 
				+      goToCaseDetail
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+// banner区域
			
 
				+.banner-section {
			
 
				+  position: relative;
			
 
				+
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 智慧解决方案区域
			
 
				+.smart-solutions {
			
 
				+  padding: 80px 0;
			
 
				+  background: url('@assets/cases-bg-01.png') center/cover no-repeat;
			
 
				+  position: relative;
			
 
				+
			
 
				+  .container {
			
 
				+    margin: 0 auto;
			
 
				+    padding: 0 20px;
			
 
				+    position: relative;
			
 
				+    z-index: 2;
			
 
				+  }
			
 
				+
			
 
				+  .title-section {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    .main-title {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      color: #333;
			
 
				+      margin-bottom: 10px;
			
 
				+      position: relative;
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .sub-title {
			
 
				+      font-size: 16px;
			
 
				+      color: #999;
			
 
				+      margin-bottom: 20px;
			
 
				+      letter-spacing: 2px;
			
 
				+      font-weight: 500;
			
 
				+    }
			
 
				+
			
 
				+    .description {
			
 
				+      font-size: 16px;
			
 
				+      color: #333;
			
 
				+      line-height: 1.6;
			
 
				+      max-width: 600px;
			
 
				+      margin: 0 auto;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .solutions-grid {
			
 
				+    display: grid;
			
 
				+    grid-template-columns: repeat(3, 1fr);
			
 
				+    grid-template-rows: repeat(2, 1fr);
			
 
				+    gap: 30px;
			
 
				+    margin-bottom: 50px;
			
 
				+  }
			
 
				+
			
 
				+  .solution-card {
			
 
				+    background: #fff;
			
 
				+    border-radius: 8px;
			
 
				+    overflow: hidden;
			
 
				+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			
 
				+    transition: transform 0.3s ease, box-shadow 0.3s ease;
			
 
				+
			
 
				+    &:hover {
			
 
				+      transform: translateY(-5px);
			
 
				+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
			
 
				+    }
			
 
				+
			
 
				+    .card-image {
			
 
				+      height: 282px;
			
 
				+      overflow: hidden;
			
 
				+
			
 
				+      img {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        object-fit: contain;
			
 
				+        transition: transform 0.3s ease;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &:hover .card-image img {
			
 
				+      transform: scale(1.05);
			
 
				+    }
			
 
				+
			
 
				+    .card-content {
			
 
				+      padding: 20px;
			
 
				+
			
 
				+      .card-title {
			
 
				+        font-size: 24px;
			
 
				+        font-weight: bold;
			
 
				+        color: #333;
			
 
				+        margin-bottom: 10px;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+
			
 
				+      .card-description {
			
 
				+        font-size: 16px;
			
 
				+        color: #666;
			
 
				+        line-height: 1.6;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .navigation-buttons {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    gap: 20px;
			
 
				+
			
 
				+    .nav-btn {
			
 
				+      width: 50px;
			
 
				+      height: 50px;
			
 
				+      border: none;
			
 
				+      background: #fff;
			
 
				+      border-radius: 50%;
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			
 
				+      transition: all 0.3s ease;
			
 
				+
			
 
				+      &:hover:not(.disabled) {
			
 
				+        transform: translateY(-2px);
			
 
				+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			
 
				+      }
			
 
				+
			
 
				+      &.disabled {
			
 
				+        opacity: 0.3;
			
 
				+        cursor: not-allowed;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        width: 20px;
			
 
				+        height: 20px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 响应式设计
			
 
				+  @media (max-width: 768px) {
			
 
				+    padding: 60px 0;
			
 
				+
			
 
				+    .title-section {
			
 
				+      .main-title {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .solutions-grid {
			
 
				+      grid-template-columns: 1fr;
			
 
				+      grid-template-rows: repeat(6, 1fr);
			
 
				+      gap: 20px;
			
 
				+    }
			
 
				+
			
 
				+    .solution-card {
			
 
				+      .card-image {
			
 
				+        height: 150px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  @media (max-width: 1024px) and (min-width: 769px) {
			
 
				+    .solutions-grid {
			
 
				+      grid-template-columns: repeat(2, 1fr);
			
 
				+      grid-template-rows: repeat(3, 1fr);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 更多案例区域
			
 
				+.more-cases {
			
 
				+  padding: 80px 0;
			
 
				+  background: #fff;
			
 
				+  position: relative;
			
 
				+  &::before{
			
 
				+    position: absolute;
			
 
				+    content: '';
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    top: 0;
			
 
				+    bottom: -138px;
			
 
				+    background: url('@assets/cases-bg-02.png') no-repeat center center;
			
 
				+    background-size: cover;
			
 
				+  }
			
 
				+
			
 
				+  .container {
			
 
				+    position: relative;
			
 
				+    margin: 0 auto;
			
 
				+    padding: 0 20px;
			
 
				+  }
			
 
				+
			
 
				+  .title-section {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    .main-title {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      color: #333;
			
 
				+      margin-bottom: 10px;
			
 
				+      position: relative;
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+
			
 
				+    .sub-title {
			
 
				+      font-size: 16px;
			
 
				+      color: #999;
			
 
				+      margin-bottom: 20px;
			
 
				+      letter-spacing: 2px;
			
 
				+      font-weight: 500;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .cases-list {
			
 
				+    display: grid;
			
 
				+    grid-template-columns: repeat(2, 1fr);
			
 
				+    gap: 25px 40px;
			
 
				+    padding: 68px 164px;
			
 
				+    background-color: rgba(255, 255, 255, 0.3);
			
 
				+    backdrop-filter: blur(8px);
			
 
				+    border-radius: 16px;
			
 
				+
			
 
				+    .case-item {
			
 
				+      background: transparent;
			
 
				+      border: none;
			
 
				+      cursor: pointer;
			
 
				+      transition: all 0.3s ease;
			
 
				+
			
 
				+      &:hover {
			
 
				+        background: rgba(74, 144, 226, 0.05);
			
 
				+        border-radius: 4px;
			
 
				+      }
			
 
				+
			
 
				+      &:hover .case-title {
			
 
				+        color: #4a90e2;
			
 
				+      }
			
 
				+
			
 
				+      // 第五行特殊样式
			
 
				+      &.fifth-row {
			
 
				+        margin-bottom: 20px;
			
 
				+      }
			
 
				+
			
 
				+      .case-content {
			
 
				+        text-align: left;
			
 
				+
			
 
				+        .case-title {
			
 
				+          font-size: 16px;
			
 
				+          font-weight: 500;
			
 
				+          color: #333;
			
 
				+          margin-bottom: 0;
			
 
				+          line-height: 1.4;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          &:before {
			
 
				+            content: '•';
			
 
				+            color: #4a90e2;
			
 
				+            font-size: 20px;
			
 
				+            margin-right: 10px;
			
 
				+            line-height: 1;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 响应式设计
			
 
				+  @media (max-width: 768px) {
			
 
				+    padding: 60px 0;
			
 
				+
			
 
				+    .title-section {
			
 
				+      .main-title {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .cases-list {
			
 
				+      grid-template-columns: 1fr;
			
 
				+      gap: 20px;
			
 
				+
			
 
				+      .case-item {
			
 
				+        padding: 12px 0;
			
 
				+        margin-bottom: 10px;
			
 
				+
			
 
				+        &:hover {
			
 
				+          padding: 12px 8px;
			
 
				+        }
			
 
				+
			
 
				+        &.fifth-row {
			
 
				+          margin-bottom: 30px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/casesdetails/Index.vue
+++ b/src/pages/casesdetails/Index.vue
@@ -0,0 +1,723 @@
 
				+<template>
			
 
				+  <DefaultLayout>
			
 
				+    <!-- banner -->
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/cases-banner.png" alt="" srcset="">
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 案例详情内容 -->
			
 
				+    <section class="case-details">
			
 
				+      <div class="container">
			
 
				+        <div class="content-wrapper">
			
 
				+          <!-- 左侧菜单 -->
			
 
				+          <div class="sidebar">
			
 
				+            <div class="menu-list">
			
 
				+              <div v-for="item in menuItems" :key="item.id" class="menu-item"
			
 
				+                :class="{ 'has-children': item.children && item.children.length > 0 }">
			
 
				+                <!-- 一级菜单 -->
			
 
				+                <div class="menu-title" :class="{
			
 
				+                  'active': isMenuActive(item),
			
 
				+                  'expanded': expandedMenus.includes(item.id)
			
 
				+                }" @click="handleMenuClick(item)">
			
 
				+                  <span>{{ item.title }}</span>
			
 
				+                  <img src="@assets/arrow-down.svg"  v-if="item.children && item.children.length > 0" class="expand-icon"
			
 
				+                    :class="{ 'expanded': expandedMenus.includes(item.id) }" alt="" srcset="">
			
 
				+                  <!-- <i v-if="item.children && item.children.length > 0" class="expand-icon"
			
 
				+                    :class="{ 'expanded': expandedMenus.includes(item.id) }">▼</i> -->
			
 
				+                </div>
			
 
				+
			
 
				+                <!-- 二级菜单 -->
			
 
				+                <div v-if="item.children && item.children.length > 0" class="submenu"
			
 
				+                  :class="{ 'expanded': expandedMenus.includes(item.id) }">
			
 
				+                  <div v-for="child in item.children" :key="child.id" class="submenu-item"
			
 
				+                    :class="{ 'active': currentCaseId === child.id }" @click="selectCase(child)">
			
 
				+                    {{ child.title }}
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <!-- 右侧内容 -->
			
 
				+          <div class="main-content">
			
 
				+            <div class="case-content">
			
 
				+              <h1 class="case-title">{{ currentCase?.title || '' }}</h1>
			
 
				+              <div class="case-body" v-html="currentCase?.content || ''"></div>
			
 
				+
			
 
				+              <!-- 导航按钮 -->
			
 
				+              <div class="navigation">
			
 
				+                <div class="nav-item prev-nav">
			
 
				+                  <span class="nav-label">上一篇：</span>
			
 
				+                  <span class="nav-title" :class="{ 'disabled': !prevCase }" @click="goToPrevCase">
			
 
				+                    {{ prevCase ? prevCase.title : '没有了' }}
			
 
				+                  </span>
			
 
				+                </div>
			
 
				+
			
 
				+                <div class="nav-item next-nav">
			
 
				+                  <span class="nav-label">下一篇：</span>
			
 
				+                  <span class="nav-title" :class="{ 'disabled': !nextCase }" @click="goToNextCase">
			
 
				+                    {{ nextCase ? nextCase.title : '没有了' }}
			
 
				+                  </span>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+  </DefaultLayout>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref, computed, onMounted, watch } from 'vue'
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import DefaultLayout from '@/layouts/DefaultLayout.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'CaseDetailsPage',
			
 
				+  components: {
			
 
				+    DefaultLayout
			
 
				+  },
			
 
				+  setup() {
			
 
				+    const route = useRoute()
			
 
				+    const router = useRouter()
			
 
				+
			
 
				+    const currentCaseId = ref(null)
			
 
				+    const expandedMenus = ref([])
			
 
				+    const searchKeyword = ref('')
			
 
				+
			
 
				+    // 案例菜单数据
			
 
				+    const menuItems = ref([
			
 
				+      {
			
 
				+        id: 'smart-agriculture',
			
 
				+        title: '智慧农业（种植+养殖）',
			
 
				+        children: [
			
 
				+          {
			
 
				+            id: 1,
			
 
				+            title: '智慧农业综合管理平台',
			
 
				+            content: `
			
 
				+              <p>智慧农业综合管理平台采用先进的物联网技术、大数据分析技术，为农业生产提供全面、精准的管理服务。通过实时监测土壤、气候、作物生长状态等关键指标，实现精准农业管理，提高农业生产效率和产品质量。</p>
			
 
				+              
			
 
				+              <h3>一、关键技术</h3>
			
 
				+              <p><strong>1. 物联网技术：</strong>通过在农田中部署各类传感器设备，实时监测温度、湿度、土壤养分等关键参数，并通过无线网络将数据传输至云端管理平台，为精准农业管理提供数据支撑。</p>
			
 
				+              
			
 
				+              <p><strong>2. 大数据分析：</strong>收集并分析海量农业数据，整合各类农业生产要素信息，通过大数据挖掘技术发现农业生产规律，为农业决策提供科学依据。</p>
			
 
				+              
			
 
				+              <p><strong>3. 人工智能技术：</strong>利用机器学习、深度学习等AI技术，对农作物生长状态进行智能识别与分析，实现病虫害早期预警、产量预测等功能，提升农业生产的智能化水平。</p>
			
 
				+              
			
 
				+              <p><strong>4. 精准农业设备：</strong>整合各类人工、智能农机设备的数字化改造，实现农田管理的自动化、精准化，自动化、智能人机协作，提高人机协作效率。</p>
			
 
				+              
			
 
				+              <h3>二、应用案例</h3>
			
 
				+              <p><strong>1. 无人机巡检：</strong>无人机可以定期巡检农田监测农作物生长状态，特别是对病虫害、农药残留等，实现精确农业巡检和监测，大幅提升农业巡检效率。</p>
			
 
				+              
			
 
				+              <p><strong>2. 智慧温室大棚：</strong>结合物联网技术和智能控制系统，实现温室大棚的自动化管理，智能控制温度、湿度、光照等环境参数，智慧农业综合管理平台可以实时监控温室大棚的运行状态，特别是对于水肥一体化管理，可以大幅提升农业生产效率10%。</p>
			
 
				+              
			
 
				+              <p><strong>3. 智能灌溉大棚：</strong>通过智能灌溉、施肥、光照、水肥平衡，为作物提供最佳的生长环境，智能灌溉大棚可以节约用水34%，农药使用量减少10%至20%。</p>
			
 
				+              
			
 
				+              <h3>三、产品介绍</h3>
			
 
				+              <img src="/src/assets/smart-agriculture-dashboard.png" alt="智慧农业综合管理平台界面" style="width: 100%; margin: 20px 0;" />
			
 
				+            `
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'smart-parking',
			
 
				+        title: '智慧停车',
			
 
				+        content: `
			
 
				+          <p>智慧停车系统通过物联网技术和智能化管理，为城市停车难题提供有效解决方案。系统集成了车位检测、智能引导、移动支付等功能，大幅提升停车效率和用户体验。</p>
			
 
				+          
			
 
				+          <h3>系统特点</h3>
			
 
				+          <p>1. 实时车位监测与引导</p>
			
 
				+          <p>2. 移动端预约与支付</p>
			
 
				+          <p>3. 数据分析与优化建议</p>
			
 
				+          <p>4. 违停自动识别与处理</p>
			
 
				+        `
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'data-service',
			
 
				+        title: '数据服务系统',
			
 
				+        content: `
			
 
				+          <p>数据服务系统为政府部门和企业提供数据整合、分析和可视化服务，支持科学决策和管理优化。通过大数据技术，实现数据的深度挖掘和价值发现。</p>
			
 
				+          
			
 
				+          <h3>核心功能</h3>
			
 
				+          <p>1. 多源数据整合与清洗</p>
			
 
				+          <p>2. 实时数据分析与挖掘</p>
			
 
				+          <p>3. 可视化报表与仪表盘</p>
			
 
				+          <p>4. 预测分析与决策支持</p>
			
 
				+        `
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'scenic-tour',
			
 
				+        title: '景区一码游系统',
			
 
				+        content: `
			
 
				+          <p>景区一码游系统通过移动互联网技术，为游客提供便捷的景区服务，包括门票预订、导览服务、设施查询等功能，全面提升旅游体验。</p>
			
 
				+          
			
 
				+          <h3>主要功能</h3>
			
 
				+          <p>1. 在线门票预订与验证</p>
			
 
				+          <p>2. 智能导览与路线推荐</p>
			
 
				+          <p>3. 景点介绍与AR体验</p>
			
 
				+          <p>4. 服务设施查询与预约</p>
			
 
				+        `
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'smart-forest',
			
 
				+        title: '智慧林场',
			
 
				+        content: `
			
 
				+          <p>智慧林场管理系统通过物联网和大数据技术，实现森林资源的智能监管和保护。系统提供森林健康监测、病虫害预警、资源管理等功能。</p>
			
 
				+          
			
 
				+          <h3>系统优势</h3>
			
 
				+          <p>1. 森林环境实时监测</p>
			
 
				+          <p>2. 病虫害智能预警</p>
			
 
				+          <p>3. 资源动态管理</p>
			
 
				+          <p>4. 生态效益评估</p>
			
 
				+        `
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'forest-fire',
			
 
				+        title: '森林防火',
			
 
				+        content: `
			
 
				+          <p>森林防火系统利用先进的监测技术和预警系统，实现森林火灾的早期发现和快速响应。通过多维度监测和智能分析，有效降低火灾风险。</p>
			
 
				+          
			
 
				+          <h3>技术特点</h3>
			
 
				+          <p>1. 多传感器融合监测</p>
			
 
				+          <p>2. 智能火险等级评估</p>
			
 
				+          <p>3. 快速预警与响应</p>
			
 
				+          <p>4. 应急指挥调度</p>
			
 
				+        `
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'digital-factory',
			
 
				+        title: '数字工厂',
			
 
				+        children: [
			
 
				+          {
			
 
				+            id: 2,
			
 
				+            title: '智能制造执行系统',
			
 
				+            content: `
			
 
				+              <p>智能制造执行系统（MES）是面向制造企业车间执行层的生产信息化管理系统，为企业提供包括制造数据管理、计划排程管理、生产调度管理、库存管理、质量管理、人力资源管理、工作中心/设备管理、工具工装管理、采购管理、成本管理、项目看板管理、生产过程控制、底层数据集成分析、上层数据接口等管理模块。</p>
			
 
				+              
			
 
				+              <h3>系统特点</h3>
			
 
				+              <p>1. 实时数据采集与监控</p>
			
 
				+              <p>2. 智能排产与调度优化</p>
			
 
				+              <p>3. 质量全程追溯管理</p>
			
 
				+              <p>4. 设备状态实时监控</p>
			
 
				+            `
			
 
				+          },
			
 
				+          {
			
 
				+            id: 3,
			
 
				+            title: '工业物联网平台',
			
 
				+            content: `
			
 
				+              <p>工业物联网平台通过连接工厂内的各种设备、传感器和系统，实现数据的实时采集、传输和分析，为企业提供全面的数字化解决方案。</p>
			
 
				+              
			
 
				+              <h3>核心功能</h3>
			
 
				+              <p>1. 设备连接与数据采集</p>
			
 
				+              <p>2. 实时监控与预警</p>
			
 
				+              <p>3. 数据分析与优化建议</p>
			
 
				+              <p>4. 远程运维与管理</p>
			
 
				+            `
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'smart-elderly',
			
 
				+        title: '智慧养老',
			
 
				+        children: [
			
 
				+          {
			
 
				+            id: 4,
			
 
				+            title: '居家养老服务平台',
			
 
				+            content: `
			
 
				+              <p>居家养老服务平台是专为老年人及其家庭提供的综合性智慧养老解决方案，通过物联网、大数据、人工智能等技术，为老年人提供安全、便捷、舒适的居家养老服务。</p>
			
 
				+              
			
 
				+              <h3>主要功能</h3>
			
 
				+              <p>1. 健康监测与管理</p>
			
 
				+              <p>2. 紧急救助服务</p>
			
 
				+              <p>3. 生活服务预约</p>
			
 
				+              <p>4. 家属远程关怀</p>
			
 
				+            `
			
 
				+          }
			
 
				+        ]
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'smart-security',
			
 
				+        title: '智慧安防',
			
 
				+        content: `
			
 
				+          <p>智慧安防系统集成视频监控、入侵检测、门禁控制等多种安防技术，通过人工智能和大数据分析，实现智能化安全管理和风险预警。</p>
			
 
				+          
			
 
				+          <h3>核心技术</h3>
			
 
				+          <p>1. 智能视频分析</p>
			
 
				+          <p>2. 人脸识别与行为分析</p>
			
 
				+          <p>3. 多维度风险评估</p>
			
 
				+          <p>4. 应急联动响应</p>
			
 
				+        `
			
 
				+      },
			
 
				+      {
			
 
				+        id: 'other-cases',
			
 
				+        title: '其他案例',
			
 
				+        content: `
			
 
				+          <p>我们还为各行各业提供了多样化的智慧解决方案，包括智慧教育、智慧医疗、智慧交通等领域，累计服务客户500+，覆盖全国多个省市。</p>
			
 
				+          
			
 
				+          <h3>服务领域</h3>
			
 
				+          <p>1. 智慧教育解决方案</p>
			
 
				+          <p>2. 智慧医疗管理系统</p>
			
 
				+          <p>3. 智慧交通监控平台</p>
			
 
				+          <p>4. 智慧社区服务系统</p>
			
 
				+        `
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    // 当前选中的案例
			
 
				+    const currentCase = ref(null)
			
 
				+
			
 
				+    // 搜索过滤后的菜单项
			
 
				+    const filteredMenuItems = computed(() => {
			
 
				+      if (!searchKeyword.value) {
			
 
				+        return menuItems.value
			
 
				+      }
			
 
				+
			
 
				+      return menuItems.value.filter(item => {
			
 
				+        const titleMatch = item.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
			
 
				+        const childrenMatch = item.children && item.children.some(child =>
			
 
				+          child.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
			
 
				+        )
			
 
				+        return titleMatch || childrenMatch
			
 
				+      })
			
 
				+    })
			
 
				+
			
 
				+    // 扁平化所有案例（用于上一篇/下一篇导航）
			
 
				+    const flattenedCases = computed(() => {
			
 
				+      const cases = []
			
 
				+      menuItems.value.forEach(menu => {
			
 
				+        if (menu.children && menu.children.length > 0) {
			
 
				+          // 有子菜单的情况，添加所有子项
			
 
				+          cases.push(...menu.children)
			
 
				+        } else if (menu.content) {
			
 
				+          // 没有子菜单但有内容的情况，添加菜单项本身
			
 
				+          cases.push(menu)
			
 
				+        }
			
 
				+      })
			
 
				+      return cases
			
 
				+    })
			
 
				+
			
 
				+    // 当前案例的索引
			
 
				+    const currentCaseIndex = computed(() => {
			
 
				+      return flattenedCases.value.findIndex(c => c.id === currentCaseId.value)
			
 
				+    })
			
 
				+
			
 
				+    // 上一篇案例
			
 
				+    const prevCase = computed(() => {
			
 
				+      const index = currentCaseIndex.value
			
 
				+      return index > 0 ? flattenedCases.value[index - 1] : null
			
 
				+    })
			
 
				+
			
 
				+    // 下一篇案例
			
 
				+    const nextCase = computed(() => {
			
 
				+      const index = currentCaseIndex.value
			
 
				+      return index < flattenedCases.value.length - 1 ? flattenedCases.value[index + 1] : null
			
 
				+    })
			
 
				+
			
 
				+    // 判断菜单是否激活
			
 
				+    const isMenuActive = (menu) => {
			
 
				+      if (menu.children && menu.children.length > 0) {
			
 
				+        // 有子菜单的情况：检查是否有子项被选中
			
 
				+        return menu.children.some(child => child.id === currentCaseId.value)
			
 
				+      } else {
			
 
				+        // 没有子菜单的情况：检查自身是否被选中
			
 
				+        return menu.id === currentCaseId.value
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 处理菜单点击
			
 
				+    const handleMenuClick = (menu) => {
			
 
				+      if (menu.children && menu.children.length > 0) {
			
 
				+        // 有子菜单的情况：切换展开/收起状态
			
 
				+        const index = expandedMenus.value.indexOf(menu.id)
			
 
				+        if (index > -1) {
			
 
				+          expandedMenus.value.splice(index, 1)
			
 
				+        } else {
			
 
				+          expandedMenus.value.push(menu.id)
			
 
				+        }
			
 
				+      } else {
			
 
				+        // 没有子菜单的情况：直接选中该菜单项（如果它有内容的话）
			
 
				+        if (menu.content) {
			
 
				+          selectCase(menu)
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 选择案例
			
 
				+    const selectCase = (caseItem) => {
			
 
				+      currentCaseId.value = caseItem.id
			
 
				+      currentCase.value = caseItem
			
 
				+
			
 
				+      // 更新URL
			
 
				+      router.replace({
			
 
				+        name: 'Casesdetails',
			
 
				+        query: { id: caseItem.id }
			
 
				+      })
			
 
				+    }
			
 
				+
			
 
				+    // 搜索处理
			
 
				+    const handleSearch = () => {
			
 
				+      // 搜索时自动展开所有匹配的菜单
			
 
				+      if (searchKeyword.value) {
			
 
				+        const expandIds = []
			
 
				+        menuItems.value.forEach(menu => {
			
 
				+          if (menu.children && menu.children.length > 0) {
			
 
				+            const hasMatch = menu.children.some(child =>
			
 
				+              child.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
			
 
				+            )
			
 
				+            if (hasMatch || menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())) {
			
 
				+              expandIds.push(menu.id)
			
 
				+            }
			
 
				+          }
			
 
				+        })
			
 
				+        expandedMenus.value = expandIds
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 上一篇
			
 
				+    const goToPrevCase = () => {
			
 
				+      if (prevCase.value) {
			
 
				+        selectCase(prevCase.value)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 下一篇
			
 
				+    const goToNextCase = () => {
			
 
				+      if (nextCase.value) {
			
 
				+        selectCase(nextCase.value)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 根据ID查找并高亮案例
			
 
				+    const findAndHighlightCase = (caseId) => {
			
 
				+      const id = parseInt(caseId) || caseId // 支持字符串ID
			
 
				+      let foundCase = null
			
 
				+      let parentMenuId = null
			
 
				+
			
 
				+      // 查找案例
			
 
				+      for (const menu of menuItems.value) {
			
 
				+        if (menu.children && menu.children.length > 0) {
			
 
				+          // 在子菜单中查找
			
 
				+          const found = menu.children.find(child => child.id === id)
			
 
				+          if (found) {
			
 
				+            foundCase = found
			
 
				+            parentMenuId = menu.id
			
 
				+            break
			
 
				+          }
			
 
				+        } else if (menu.id === id && menu.content) {
			
 
				+          // 在一级菜单中查找（没有子菜单但有内容）
			
 
				+          foundCase = menu
			
 
				+          break
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      if (foundCase) {
			
 
				+        // 展开父菜单（如果有的话）
			
 
				+        if (parentMenuId && !expandedMenus.value.includes(parentMenuId)) {
			
 
				+          expandedMenus.value.push(parentMenuId)
			
 
				+        }
			
 
				+
			
 
				+        // 选中案例
			
 
				+        currentCaseId.value = foundCase.id
			
 
				+        currentCase.value = foundCase
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 监听路由变化
			
 
				+    watch(() => route.query.id, (newId) => {
			
 
				+      if (newId) {
			
 
				+        findAndHighlightCase(newId)
			
 
				+      }
			
 
				+    }, { immediate: true })
			
 
				+
			
 
				+    onMounted(() => {
			
 
				+      // 初始化时根据URL参数加载案例
			
 
				+      const caseId = route.query.id
			
 
				+      if (caseId) {
			
 
				+        findAndHighlightCase(caseId)
			
 
				+      } else {
			
 
				+        // 默认选择第一个案例并展开其父菜单
			
 
				+        const firstCase = flattenedCases.value[0]
			
 
				+        if (firstCase) {
			
 
				+          // 找到第一个案例的父菜单并展开（如果有父菜单的话）
			
 
				+          for (const menu of menuItems.value) {
			
 
				+            if (menu.children && menu.children.some(child => child.id === firstCase.id)) {
			
 
				+              if (!expandedMenus.value.includes(menu.id)) {
			
 
				+                expandedMenus.value.push(menu.id)
			
 
				+              }
			
 
				+              break
			
 
				+            }
			
 
				+          }
			
 
				+          selectCase(firstCase)
			
 
				+        }
			
 
				+      }
			
 
				+    })
			
 
				+
			
 
				+    return {
			
 
				+      currentCaseId,
			
 
				+      currentCase,
			
 
				+      menuItems,
			
 
				+      filteredMenuItems,
			
 
				+      expandedMenus,
			
 
				+      searchKeyword,
			
 
				+      prevCase,
			
 
				+      nextCase,
			
 
				+      isMenuActive,
			
 
				+      handleMenuClick,
			
 
				+      selectCase,
			
 
				+      handleSearch,
			
 
				+      goToPrevCase,
			
 
				+      goToNextCase
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+// banner区域
			
 
				+.banner-section {
			
 
				+  position: relative;
			
 
				+
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 案例详情区域
			
 
				+.case-details {
			
 
				+  padding: 40px 0 80px;
			
 
				+  background: #F5F9FF;
			
 
				+  position: relative;
			
 
				+  &::before{
			
 
				+    position: absolute;
			
 
				+    content: '';
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    top: 0;
			
 
				+    bottom: -138px;
			
 
				+    background: #F5F9FF;
			
 
				+    background-size: cover;
			
 
				+  }
			
 
				+
			
 
				+  .container {
			
 
				+    max-width: 1200px;
			
 
				+    margin: 0 auto;
			
 
				+    padding: 0 20px;
			
 
				+  }
			
 
				+
			
 
				+  .content-wrapper {
			
 
				+    display: flex;
			
 
				+    gap: 30px;
			
 
				+    align-items: flex-start;
			
 
				+  }
			
 
				+
			
 
				+  // 左侧菜单
			
 
				+  .sidebar {
			
 
				+    width: 280px;
			
 
				+    position: sticky;
			
 
				+    top: 20px;
			
 
				+
			
 
				+    .menu-list {
			
 
				+      .menu-item {
			
 
				+        margin-bottom: 0;
			
 
				+
			
 
				+        .menu-title {
			
 
				+          padding: 15px 20px;
			
 
				+          cursor: pointer;
			
 
				+          display: flex;
			
 
				+          justify-content: space-between;
			
 
				+          align-items: center;
			
 
				+          font-weight: 500;
			
 
				+          color: #333;
			
 
				+          transition: all 0.3s ease;
			
 
				+          margin-bottom: 17px;
			
 
				+          background: #fff;
			
 
				+          height: 48px;
			
 
				+
			
 
				+          &:hover {
			
 
				+            border-color: #4a90e2;
			
 
				+            color: #4a90e2;
			
 
				+          }
			
 
				+
			
 
				+          &.active {
			
 
				+            border-color: #4a90e2;
			
 
				+            color: #0054FF;
			
 
				+            background: linear-gradient(to right,#CAE0FF,#E4EFFF);
			
 
				+          }
			
 
				+
			
 
				+          .expand-icon {
			
 
				+            font-size: 12px;
			
 
				+            transition: transform 0.3s ease;
			
 
				+            color: #999;
			
 
				+            width: 25px;
			
 
				+            height: auto;
			
 
				+
			
 
				+            &.expanded {
			
 
				+              transform: rotate(180deg);
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .submenu {
			
 
				+          max-height: 0;
			
 
				+          overflow: hidden;
			
 
				+          transition: max-height 0.3s ease;
			
 
				+
			
 
				+          &.expanded {
			
 
				+            max-height: 500px;
			
 
				+          }
			
 
				+
			
 
				+          .submenu-item {
			
 
				+            padding: 12px 20px;
			
 
				+            cursor: pointer;
			
 
				+            color: #666;
			
 
				+            font-size: 14px;
			
 
				+            transition: all 0.3s ease;
			
 
				+            margin-bottom: 15px;
			
 
				+            margin-left: 20px;
			
 
				+            background: #fff;
			
 
				+
			
 
				+            &:hover {
			
 
				+              border-color: #4a90e2;
			
 
				+              color: #4a90e2;
			
 
				+            }
			
 
				+
			
 
				+            &.active {
			
 
				+              border-color: #0054FF;
			
 
				+              color: #4a90e2;
			
 
				+              background: linear-gradient(to right,#CAE0FF,#E4EFFF);
			
 
				+              font-weight: 500;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 右侧内容
			
 
				+  .main-content {
			
 
				+    flex: 1;
			
 
				+    padding: 30px;
			
 
				+    background: #fff;
			
 
				+
			
 
				+    .case-content {
			
 
				+      .case-title {
			
 
				+        font-size: 24px;
			
 
				+        font-weight: bold;
			
 
				+        color: #333;
			
 
				+        margin-bottom: 30px;
			
 
				+        text-align: center;
			
 
				+        border-bottom: 2px dashed #ccc;
			
 
				+        padding-bottom: 15px;
			
 
				+      }
			
 
				+
			
 
				+      .case-body {
			
 
				+        line-height: 1.8;
			
 
				+        color: #555;
			
 
				+        margin-bottom: 40px;
			
 
				+
			
 
				+        h3 {
			
 
				+          font-size: 18px;
			
 
				+          font-weight: bold;
			
 
				+          color: #333;
			
 
				+          margin: 25px 0 15px;
			
 
				+        }
			
 
				+
			
 
				+        p {
			
 
				+          margin-bottom: 15px;
			
 
				+          text-align: justify;
			
 
				+          text-indent: 2em;
			
 
				+        }
			
 
				+
			
 
				+        strong {
			
 
				+          color: #333;
			
 
				+          font-weight: 600;
			
 
				+        }
			
 
				+
			
 
				+        img {
			
 
				+          max-width: 100%;
			
 
				+          height: auto;
			
 
				+          display: block;
			
 
				+          margin: 20px auto;
			
 
				+          border-radius: 8px;
			
 
				+          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .navigation {
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				+        padding-top: 20px;
			
 
				+
			
 
				+        .nav-item {
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+          font-size: 14px;
			
 
				+
			
 
				+          .nav-label {
			
 
				+            color: #666;
			
 
				+            margin-right: 5px;
			
 
				+          }
			
 
				+
			
 
				+          .nav-title {
			
 
				+            color: #4a90e2;
			
 
				+            cursor: pointer;
			
 
				+            transition: color 0.3s ease;
			
 
				+
			
 
				+            &:hover:not(.disabled) {
			
 
				+              color: #2c5aa0;
			
 
				+              text-decoration: underline;
			
 
				+            }
			
 
				+
			
 
				+            &.disabled {
			
 
				+              color: #999;
			
 
				+              cursor: not-allowed;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .next-nav {
			
 
				+          text-align: right;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 响应式设计
			
 
				+@media (max-width: 768px) {
			
 
				+  .case-details {
			
 
				+    padding: 20px 0 40px;
			
 
				+
			
 
				+    .content-wrapper {
			
 
				+      flex-direction: column;
			
 
				+      gap: 20px;
			
 
				+    }
			
 
				+
			
 
				+    .sidebar {
			
 
				+      width: 100%;
			
 
				+      position: static;
			
 
				+    }
			
 
				+
			
 
				+    .main-content {
			
 
				+      .case-content {
			
 
				+        padding: 20px;
			
 
				+
			
 
				+        .case-title {
			
 
				+          font-size: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .navigation {
			
 
				+          flex-direction: column;
			
 
				+          gap: 15px;
			
 
				+
			
 
				+          .nav-btn {
			
 
				+            max-width: 100%;
			
 
				+            align-items: center;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/contact/Index.vue
+++ b/src/pages/contact/Index.vue
@@ -0,0 +1,535 @@
 
				+<template>
			
 
				+  <DefaultLayout>
			
 
				+    <!-- banner -->
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/contact-banner.png" alt="联系我们" />
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 带背景的内容区域 -->
			
 
				+    <div class="content-with-bg">
			
 
				+      <!-- 联系信息模块 -->
			
 
				+      <section class="contact-info-section">
			
 
				+        <div class="container">
			
 
				+          <div class="contact-info-card">
			
 
				+            <!-- 上半部分：联系信息 -->
			
 
				+            <div class="contact-details">
			
 
				+              <!-- 左侧信息 -->
			
 
				+              <div class="contact-left">
			
 
				+                <div class="contact-item">
			
 
				+                  <img src="@assets/contact-addr.png" alt="地址" class="contact-icon" />
			
 
				+                  <div class="contact-text">
			
 
				+                    <h4>公司地址：</h4>
			
 
				+                    <p>贵州省贵阳市观山湖区贵阳国际金融中心金融MAX-A座</p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div class="contact-item">
			
 
				+                  <img src="@assets/contact-phone.png" alt="电话" class="contact-icon" />
			
 
				+                  <div class="contact-text">
			
 
				+                    <h4>联系电话：</h4>
			
 
				+                    <p>座机号：18866568888</p>
			
 
				+                    <p>客服号：18888888666</p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div class="contact-item">
			
 
				+                  <img src="@assets/contact-mail.png" alt="邮箱" class="contact-icon" />
			
 
				+                  <div class="contact-text">
			
 
				+                    <h4>公司邮箱：</h4>
			
 
				+                    <p>000000000000</p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <!-- 右侧信息 -->
			
 
				+              <div class="contact-right">
			
 
				+                <div class="qr-codes">
			
 
				+                  <div class="qr-item">
			
 
				+                    <img src="@assets/contact-wx01.png" alt="微信公众号" />
			
 
				+                    <p>微信商务号 <br /> <b>达泽科技-张某</b></p>
			
 
				+                  </div>
			
 
				+                  <div class="qr-item">
			
 
				+                    <img src="@assets/contact-wx02.png" alt="企业微信" />
			
 
				+                    <p>微信商务号 <br /><b>达泽科技-吴某</b></p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <div class="website-info">
			
 
				+                  <img src="@assets/contact-mail.png" alt="网站" class="contact-icon" />
			
 
				+                  <div class="contact-text">
			
 
				+                    <h4>网站</h4>
			
 
				+                    <p>www.jgdazekg.com</p>
			
 
				+                  </div>
			
 
				+                  <div class="contact-text">
			
 
				+                    <h4>商务合作</h4>
			
 
				+                    <p>www.jgdazekg.com</p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <!-- 下半部分：地图 -->
			
 
				+            <div class="map-section">
			
 
				+              <!-- <img src="@assets/contact-map.png" alt="公司位置地图" class="map-image" /> -->
			
 
				+              <iframe style="width: 100%;;height: 350px;border-radius: 10px;" src="https://j.map.baidu.com/ef/0c9k" frameborder="0"></iframe>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </section>
			
 
				+
			
 
				+      <!-- 留言模块 -->
			
 
				+      <section class="message-section">
			
 
				+        <div class="container">
			
 
				+          <div class="message-card">
			
 
				+            <h2 class="section-title">在线留言</h2>
			
 
				+
			
 
				+            <form @submit.prevent="submitMessage" class="message-form">
			
 
				+              <div class="form-row">
			
 
				+                <div class="form-group">
			
 
				+                  <label>联系人</label>
			
 
				+                  <input type="text" v-model="messageForm.name" placeholder="请输入联系人" required />
			
 
				+                </div>
			
 
				+                <div class="form-group">
			
 
				+                  <label>联系电话</label>
			
 
				+                  <input type="tel" v-model="messageForm.phone" placeholder="请输入联系电话" required />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div class="form-row">
			
 
				+                <div class="form-group">
			
 
				+                  <label>联系邮箱</label>
			
 
				+                  <input type="email" v-model="messageForm.email" placeholder="请输入联系邮箱" />
			
 
				+                </div>
			
 
				+                <div class="form-group">
			
 
				+                  <label>联系地址</label>
			
 
				+                  <input type="text" v-model="messageForm.address" placeholder="请输入联系地址" />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div class="form-group full-width">
			
 
				+                <label>留言内容</label>
			
 
				+                <textarea v-model="messageForm.content" placeholder="请输入留言内容" rows="6" required></textarea>
			
 
				+              </div>
			
 
				+
			
 
				+              <div class="form-actions">
			
 
				+                <button type="submit" class="submit-btn" :disabled="isSubmitting">
			
 
				+                  {{ isSubmitting ? '提交中...' : '提交留言' }}
			
 
				+                </button>
			
 
				+              </div>
			
 
				+            </form>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </section>
			
 
				+
			
 
				+      <!-- 底部间距，确保背景延伸到footer下方 -->
			
 
				+      <div class="bottom-spacer"></div>
			
 
				+    </div>
			
 
				+  </DefaultLayout>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref, reactive } from 'vue'
			
 
				+import DefaultLayout from '@/layouts/DefaultLayout.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'ContactPage',
			
 
				+  components: {
			
 
				+    DefaultLayout
			
 
				+  },
			
 
				+  setup() {
			
 
				+    // 留言表单数据
			
 
				+    const messageForm = reactive({
			
 
				+      name: '',
			
 
				+      phone: '',
			
 
				+      email: '',
			
 
				+      address: '',
			
 
				+      content: ''
			
 
				+    })
			
 
				+
			
 
				+    const isSubmitting = ref(false)
			
 
				+
			
 
				+    // 提交留言
			
 
				+    const submitMessage = async () => {
			
 
				+      isSubmitting.value = true
			
 
				+
			
 
				+      try {
			
 
				+        // 这里可以调用API提交留言
			
 
				+        console.log('提交留言:', messageForm)
			
 
				+
			
 
				+        // 模拟API调用
			
 
				+        await new Promise(resolve => setTimeout(resolve, 1000))
			
 
				+
			
 
				+        alert('留言提交成功！我们会尽快与您联系。')
			
 
				+
			
 
				+        // 重置表单
			
 
				+        Object.keys(messageForm).forEach(key => {
			
 
				+          messageForm[key] = ''
			
 
				+        })
			
 
				+      } catch (error) {
			
 
				+        console.error('提交留言失败:', error)
			
 
				+        alert('提交失败，请稍后重试。')
			
 
				+      } finally {
			
 
				+        isSubmitting.value = false
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    return {
			
 
				+      messageForm,
			
 
				+      isSubmitting,
			
 
				+      submitMessage
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+// banner区域
			
 
				+.banner-section {
			
 
				+  position: relative;
			
 
				+
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+    display: block;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 带背景的内容区域
			
 
				+.content-with-bg {
			
 
				+  background: url('@assets/contact-bg.png') no-repeat center 185px;
			
 
				+  background-size: cover;
			
 
				+  position: relative;
			
 
				+  // 确保背景延伸到footer下方
			
 
				+  margin-bottom: -137px; // 负边距让背景延伸到footer下方
			
 
				+  padding-bottom: 137px; // 对应的内边距保持内容位置
			
 
				+}
			
 
				+
			
 
				+// 联系信息模块
			
 
				+.contact-info-section {
			
 
				+  position: relative;
			
 
				+  margin-top: -185px; // 向上覆盖banner
			
 
				+  z-index: 10;
			
 
				+  padding: 0 20px 60px;
			
 
				+
			
 
				+  .container {
			
 
				+    max-width: 1200px;
			
 
				+    margin: 0 auto;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 底部间距
			
 
				+.bottom-spacer {
			
 
				+  height: 100px; // 额外的间距确保背景覆盖footer下方
			
 
				+}
			
 
				+
			
 
				+.contact-info-card {
			
 
				+  background: linear-gradient(0deg, #fff 0%, #fff 50%, rgba(255,255,255,.0) 100%);
			
 
				+  backdrop-filter: blur(10px);
			
 
				+  border-radius: 12px;
			
 
				+  padding: 40px;
			
 
				+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
			
 
				+  border: 1px solid rgba(255, 255, 255, 0.2);
			
 
				+}
			
 
				+
			
 
				+.contact-details {
			
 
				+  display: flex;
			
 
				+  gap: 60px;
			
 
				+  margin-bottom: 40px;
			
 
				+
			
 
				+  @media (max-width: 768px) {
			
 
				+    flex-direction: column;
			
 
				+    gap: 30px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.contact-left {
			
 
				+  flex: 1;
			
 
				+
			
 
				+  .contact-item {
			
 
				+    display: flex;
			
 
				+    align-items: flex-start;
			
 
				+    gap: 15px;
			
 
				+    margin-bottom: 30px;
			
 
				+
			
 
				+    &:last-child {
			
 
				+      margin-bottom: 0;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .contact-icon {
			
 
				+    width: 24px;
			
 
				+    height: 24px;
			
 
				+    margin-top: 2px;
			
 
				+    flex-shrink: 0;
			
 
				+  }
			
 
				+
			
 
				+  .contact-text {
			
 
				+    h4 {
			
 
				+      color: #333;
			
 
				+      font-size: 16px;
			
 
				+      font-weight: 600;
			
 
				+      margin: 0 0 8px 0;
			
 
				+    }
			
 
				+
			
 
				+    p {
			
 
				+      color: #666;
			
 
				+      font-size: 14px;
			
 
				+      line-height: 1.5;
			
 
				+      margin: 0 0 4px 0;
			
 
				+
			
 
				+      &:last-child {
			
 
				+        margin-bottom: 0;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.contact-right {
			
 
				+  flex: 1;
			
 
				+
			
 
				+  .qr-codes {
			
 
				+    display: flex;
			
 
				+    gap: 60px;
			
 
				+    margin-bottom: 30px;
			
 
				+    justify-content: flex-start;
			
 
				+
			
 
				+    .qr-item {
			
 
				+      text-align: left;
			
 
				+
			
 
				+      img {
			
 
				+        width: 174px;
			
 
				+        height: 174px;
			
 
				+        border-radius: 8px;
			
 
				+        margin-bottom: 8px;
			
 
				+      }
			
 
				+
			
 
				+      p {
			
 
				+        color: #666;
			
 
				+        font-size: 16px;
			
 
				+        margin: 0;
			
 
				+        b{
			
 
				+          margin-top: 12px;
			
 
				+          display: block;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .website-info {
			
 
				+    display: flex;
			
 
				+    align-items: flex-start;
			
 
				+    gap: 15px;
			
 
				+
			
 
				+    .contact-icon {
			
 
				+      width: 24px;
			
 
				+      height: 24px;
			
 
				+      margin-top: 2px;
			
 
				+      flex-shrink: 0;
			
 
				+    }
			
 
				+
			
 
				+    .contact-text {
			
 
				+      flex: 1;
			
 
				+
			
 
				+      h4 {
			
 
				+        color: #333;
			
 
				+        font-size: 16px;
			
 
				+        font-weight: 600;
			
 
				+        margin: 0 0 8px 0;
			
 
				+      }
			
 
				+
			
 
				+      p {
			
 
				+        color: #666;
			
 
				+        font-size: 14px;
			
 
				+        line-height: 1.5;
			
 
				+        margin: 0 0 4px 0;
			
 
				+
			
 
				+        &:last-child {
			
 
				+          margin-bottom: 0;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      &+.contact-text {
			
 
				+        margin-left: 30px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.map-section {
			
 
				+  border-top: 1px solid #eee;
			
 
				+  padding-top: 30px;
			
 
				+
			
 
				+  .map-image {
			
 
				+    width: 100%;
			
 
				+    height: 300px;
			
 
				+    object-fit: cover;
			
 
				+    border-radius: 8px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 留言模块
			
 
				+.message-section {
			
 
				+  padding: 0 20px 60px;
			
 
				+
			
 
				+  .container {
			
 
				+    max-width: 1200px;
			
 
				+    margin: 0 auto;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.message-card {
			
 
				+  background: white;
			
 
				+  border-radius: 12px;
			
 
				+  padding: 40px;
			
 
				+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
			
 
				+}
			
 
				+
			
 
				+.section-title {
			
 
				+  text-align: center;
			
 
				+  font-size: 28px;
			
 
				+  font-weight: 600;
			
 
				+  color: #333;
			
 
				+  margin: 0 0 40px 0;
			
 
				+  position: relative;
			
 
				+
			
 
				+  &::after {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    bottom: -10px;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width: 60px;
			
 
				+    height: 3px;
			
 
				+    background: linear-gradient(90deg, #4A90E2, #7B68EE);
			
 
				+    border-radius: 2px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.message-form {
			
 
				+  .form-row {
			
 
				+    display: flex;
			
 
				+    gap: 20px;
			
 
				+    margin-bottom: 20px;
			
 
				+
			
 
				+    @media (max-width: 768px) {
			
 
				+      flex-direction: column;
			
 
				+      gap: 0;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .form-group {
			
 
				+    flex: 1;
			
 
				+    margin-bottom: 20px;
			
 
				+
			
 
				+    &.full-width {
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+
			
 
				+    label {
			
 
				+      display: block;
			
 
				+      color: #333;
			
 
				+      font-size: 14px;
			
 
				+      font-weight: 500;
			
 
				+      margin-bottom: 8px;
			
 
				+    }
			
 
				+
			
 
				+    input,
			
 
				+    textarea {
			
 
				+      width: 100%;
			
 
				+      padding: 12px 16px;
			
 
				+      border: 1px solid #ddd;
			
 
				+      border-radius: 6px;
			
 
				+      font-size: 14px;
			
 
				+      transition: all 0.3s ease;
			
 
				+      box-sizing: border-box;
			
 
				+
			
 
				+      &:focus {
			
 
				+        outline: none;
			
 
				+        border-color: #4A90E2;
			
 
				+        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
			
 
				+      }
			
 
				+
			
 
				+      &::placeholder {
			
 
				+        color: #999;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    textarea {
			
 
				+      resize: vertical;
			
 
				+      min-height: 120px;
			
 
				+      font-family: inherit;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .form-actions {
			
 
				+    text-align: center;
			
 
				+    margin-top: 30px;
			
 
				+  }
			
 
				+
			
 
				+  .submit-btn {
			
 
				+    background: linear-gradient(90deg, #4A90E2, #7B68EE);
			
 
				+    color: white;
			
 
				+    border: none;
			
 
				+    padding: 14px 40px;
			
 
				+    border-radius: 25px;
			
 
				+    font-size: 16px;
			
 
				+    font-weight: 500;
			
 
				+    cursor: pointer;
			
 
				+    transition: all 0.3s ease;
			
 
				+    min-width: 140px;
			
 
				+
			
 
				+    &:hover:not(:disabled) {
			
 
				+      transform: translateY(-2px);
			
 
				+      box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3);
			
 
				+    }
			
 
				+
			
 
				+    &:disabled {
			
 
				+      opacity: 0.6;
			
 
				+      cursor: not-allowed;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 响应式设计
			
 
				+@media (max-width: 768px) {
			
 
				+  .content-with-bg {
			
 
				+    // 移动端可能需要调整背景图位置
			
 
				+    background-position: center top;
			
 
				+    margin-bottom: -30px;
			
 
				+    padding-bottom: 30px;
			
 
				+  }
			
 
				+
			
 
				+  .contact-info-section {
			
 
				+    margin-top: -80px;
			
 
				+    padding: 0 15px 40px;
			
 
				+  }
			
 
				+
			
 
				+  .contact-info-card {
			
 
				+    padding: 30px 20px;
			
 
				+  }
			
 
				+
			
 
				+  .contact-right .qr-codes {
			
 
				+    gap: 20px;
			
 
				+
			
 
				+    .qr-item img {
			
 
				+      width: 60px;
			
 
				+      height: 60px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .message-section {
			
 
				+    padding: 40px 15px;
			
 
				+  }
			
 
				+
			
 
				+  .message-card {
			
 
				+    padding: 30px 20px;
			
 
				+  }
			
 
				+
			
 
				+  .section-title {
			
 
				+    font-size: 24px;
			
 
				+  }
			
 
				+
			
 
				+  .bottom-spacer {
			
 
				+    height: 50px; // 移动端减少间距
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -0,0 +1,1228 @@
 
				+<template>
			
 
				+  <DefaultLayout>
			
 
				+    <!-- banner -->
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/banner.png" alt="" srcset="">
			
 
				+      <div class="info-row">
			
 
				+        <div class="info-item">
			
 
				+          <span class="text">覆盖</span>
			
 
				+          <span class="number">10+</span>
			
 
				+          <span class="text">垂直行业</span>
			
 
				+        </div>
			
 
				+        <div class="info-item">
			
 
				+          <span class="number">72</span>
			
 
				+          <span class="text">小时原型交付</span>
			
 
				+        </div>
			
 
				+        <div class="info-item">
			
 
				+          <span class="text">定制成本降低</span>
			
 
				+          <span class="number">30%</span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 产品中心 -->
			
 
				+    <section class="products-section">
			
 
				+      <div class="container">
			
 
				+        <div class="section-header">
			
 
				+          <h2 class="section-title">产品中心</h2>
			
 
				+          <p class="section-subtitle">SMART SOLUTION</p>
			
 
				+          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="products-content">
			
 
				+          <div class="products-nav">
			
 
				+            <div v-for="product in productList" :key="product.id" class="nav-item"
			
 
				+              :class="{ active: activeProductId === product.id }" @click="setActiveProduct(product.id)">
			
 
				+              {{ product.title }}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div class="product-detail">
			
 
				+            <div class="detail-content">
			
 
				+              <h3 class="product-title">{{ activeProduct.title }}</h3>
			
 
				+              <p class="product-description">{{ activeProduct.description }}</p>
			
 
				+            </div>
			
 
				+            <div class="detail-image">
			
 
				+              <img :src="activeProduct.image" :alt="activeProduct.title" />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+    <!-- 行业案例 -->
			
 
				+    <section class="cases-section">
			
 
				+      <div class="container">
			
 
				+        <div class="section-header">
			
 
				+          <h2 class="section-title">行业案例</h2>
			
 
				+          <p class="section-subtitle">SMART SOLUTION</p>
			
 
				+          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="cases-carousel">
			
 
				+          <div class="nav-arrow nav-arrow-left" :class="{ disabled: currentCaseIndex === 0 }" @click="prevCase">
			
 
				+            <div class="arrow-icon">
			
 
				+              <img src="@assets/arrow-right.png" alt="Previous" />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div class="cases-container">
			
 
				+            <div class="cases-wrapper"
			
 
				+              :style="{ transform: `translateX(-${currentCaseIndex * (100 / visibleCases)}%)` }">
			
 
				+              <div v-for="caseItem in casesList" :key="caseItem.id" class="case-item">
			
 
				+                <div class="case-image">
			
 
				+                  <img :src="caseItem.image" :alt="caseItem.title" />
			
 
				+                </div>
			
 
				+                <div class="case-content">
			
 
				+                  <h3 class="case-title">{{ caseItem.title }}</h3>
			
 
				+                  <p class="case-description">{{ caseItem.description }}</p>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div class="nav-arrow nav-arrow-right" :class="{ disabled: currentCaseIndex >= maxCaseIndex }"
			
 
				+            @click="nextCase">
			
 
				+            <div class="arrow-icon">
			
 
				+              <img src="@assets/arrow-right.png" alt="Next" />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+    <!-- 企业简介 -->
			
 
				+    <section class="about-section">
			
 
				+      <div class="container">
			
 
				+        <div class="section-header">
			
 
				+          <h2 class="section-title">企业简介</h2>
			
 
				+          <p class="section-subtitle">ENTERPRISE QUALIFICATION</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="about-content">
			
 
				+          <div class="about-tabs">
			
 
				+            <div v-for="tab in aboutTabs" :key="tab.id" class="tab-item" :class="{ active: activeAboutTab === tab.id }"
			
 
				+              @click="setActiveAboutTab(tab.id)">
			
 
				+              {{ tab.title }}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div class="about-detail">
			
 
				+            <transition name="fade-slide" mode="out-in">
			
 
				+              <div :key="activeAboutTab" class="detail-content">
			
 
				+                <div class="content-left">
			
 
				+                  <img :src="activeAboutContent.image" :alt="activeAboutContent.title" />
			
 
				+                </div>
			
 
				+                <div class="content-right">
			
 
				+                  <h3 class="content-title">{{ activeAboutContent.title }}</h3>
			
 
				+                  <div class="content-description" v-html="activeAboutContent.description"></div>
			
 
				+                  <div class="content-action">
			
 
				+                    <button class="learn-more-btn">查看更多 →</button>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </transition>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+    <!-- 合作伙伴 -->
			
 
				+    <section class="cooperation-section">
			
 
				+      <div class="container">
			
 
				+        <div class="section-header">
			
 
				+          <h2 class="section-title">合作伙伴</h2>
			
 
				+          <p class="section-subtitle">BUSINESS PARTNER</p>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="partners-grid">
			
 
				+          <a v-for="partner in partnersList" :key="partner.id" :href="partner.url" target="_blank" class="partner-item">
			
 
				+            <img :src="partner.logo" :alt="partner.name" />
			
 
				+          </a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+
			
 
				+  </DefaultLayout>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref, computed, onMounted, onUnmounted } from 'vue'
			
 
				+import DefaultLayout from '@/layouts/DefaultLayout.vue'
			
 
				+import { getHomeData } from '@/api/modules/home'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'HomePage',
			
 
				+  components: {
			
 
				+    DefaultLayout
			
 
				+  },
			
 
				+  setup() {
			
 
				+    const activeProductId = ref(1)
			
 
				+
			
 
				+    const productList = ref([
			
 
				+      {
			
 
				+        id: 1,
			
 
				+        title: '低代码平台',
			
 
				+        description: '图形化界面和拖拽式组件，简化应用开发和部署，快速构建和迭代企业级应用。',
			
 
				+        image: 'src/assets/index-products-01.png'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 2,
			
 
				+        title: '物联网平台',
			
 
				+        description: '连接和管理各种智能设备，实现设备数据采集、监控和远程控制。',
			
 
				+        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=物联网平台'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 3,
			
 
				+        title: '统一权限系统',
			
 
				+        description: '集中管理用户权限和访问控制，确保系统安全和数据保护。',
			
 
				+        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=统一权限系统'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 4,
			
 
				+        title: '地图适配应用',
			
 
				+        description: '提供地理信息服务和位置定位功能，支持多种地图数据源。',
			
 
				+        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=地图适配应用'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 5,
			
 
				+        title: '数字学生',
			
 
				+        description: '学生信息管理和学习行为分析，提供个性化教育服务。',
			
 
				+        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=数字学生'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 6,
			
 
				+        title: '数据中台',
			
 
				+        description: '统一数据管理和分析平台，提供数据治理和业务洞察。',
			
 
				+        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=数据中台'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 7,
			
 
				+        title: 'AI大模型',
			
 
				+        description: '集成人工智能技术，提供智能分析和决策支持服务。',
			
 
				+        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=AI大模型'
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    const activeProduct = computed(() => {
			
 
				+      return productList.value.find(product => product.id === activeProductId.value) || productList.value[0]
			
 
				+    })
			
 
				+
			
 
				+    const setActiveProduct = (id) => {
			
 
				+      activeProductId.value = id
			
 
				+    }
			
 
				+
			
 
				+    // 行业案例数据和逻辑
			
 
				+    const currentCaseIndex = ref(0)
			
 
				+    const visibleCases = ref(3) // 同时显示的案例数量
			
 
				+
			
 
				+    // 企业简介数据和逻辑
			
 
				+    const activeAboutTab = ref('about')
			
 
				+
			
 
				+    const aboutTabs = ref([
			
 
				+      { id: 'about', title: '关于达泽' },
			
 
				+      { id: 'history', title: '发展历程' },
			
 
				+      { id: 'qualification', title: '荣誉资质' }
			
 
				+    ])
			
 
				+
			
 
				+    const aboutContents = ref({
			
 
				+      about: {
			
 
				+        title: '关于达泽',
			
 
				+        description: `
			
 
				+          <p>达泽科技是贵州省今日前沿信息技术有限责任公司旗下品牌，专业为软件开发及数字化商务的综合性企业。为政府、金融、保险、通讯、电力、教育、制造、零售、交通、教育、通信、水利、农业等领域的企业及机构提供了专业的信息化解决方案。</p>
			
 
				+          <p>公司一直致力为客户内部管理，为用户至上的服务理念，为客户提供，合作共赢，服务至上的服务理念，为社会创造更高的价值。</p>
			
 
				+        `,
			
 
				+        image: 'src/assets/index-about-bg.png'
			
 
				+      },
			
 
				+      history: {
			
 
				+        title: '发展历程',
			
 
				+        description: `
			
 
				+          <p><strong>2018年</strong> - 公司成立，专注于智慧校园解决方案</p>
			
 
				+          <p><strong>2019年</strong> - 推出低代码开发平台，服务客户超过50家</p>
			
 
				+          <p><strong>2020年</strong> - 获得高新技术企业认证，团队规模扩展至100人</p>
			
 
				+          <p><strong>2021年</strong> - 业务拓展至智慧农业、智慧停车等多个领域</p>
			
 
				+          <p><strong>2022年</strong> - 服务学校超过500所，用户突破100万</p>
			
 
				+          <p><strong>2023年</strong> - 推出AI大模型解决方案，引领行业创新</p>
			
 
				+        `,
			
 
				+        image: 'src/assets/index-about-bg.png'
			
 
				+      },
			
 
				+      qualification: {
			
 
				+        title: '荣誉资质',
			
 
				+        description: `
			
 
				+          <p><strong>国家高新技术企业</strong> - 2020年获得认证</p>
			
 
				+          <p><strong>软件企业认证</strong> - 贵州省软件行业协会会员单位</p>
			
 
				+          <p><strong>ISO9001质量管理体系认证</strong> - 2021年通过认证</p>
			
 
				+          <p><strong>信息安全等级保护三级</strong> - 系统安全等级认证</p>
			
 
				+          <p><strong>优秀合作伙伴奖</strong> - 多家知名企业颁发</p>
			
 
				+          <p><strong>创新技术奖</strong> - 贵州省科技厅颁发</p>
			
 
				+        `,
			
 
				+        image: 'src/assets/index-about-bg.png'
			
 
				+      }
			
 
				+    })
			
 
				+
			
 
				+    const activeAboutContent = computed(() => {
			
 
				+      return aboutContents.value[activeAboutTab.value]
			
 
				+    })
			
 
				+
			
 
				+    const setActiveAboutTab = (tabId) => {
			
 
				+      activeAboutTab.value = tabId
			
 
				+    }
			
 
				+
			
 
				+    // 合作伙伴数据
			
 
				+    const partnersList = ref([
			
 
				+      {
			
 
				+        id: 1,
			
 
				+        name: '浪潮',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=浪潮',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 2,
			
 
				+        name: '新信息',
			
 
				+        logo: 'https://unsplash.it/214/84',
			
 
				+        url: '#'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 3,
			
 
				+        name: 'DELL',
			
 
				+        logo: 'https://unsplash.it/214/84',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 4,
			
 
				+        name: '锐捷',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=锐捷',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 5,
			
 
				+        name: '河姆渡',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=河姆渡',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 6,
			
 
				+        name: 'SIEMENS',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=SIEMENS',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 7,
			
 
				+        name: 'HP',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=HP',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 8,
			
 
				+        name: 'Sygon',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=Sygon',
			
 
				+        url: '#'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 9,
			
 
				+        name: 'KSTAR',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=KSTAR',
			
 
				+        url: 'https://unsplash.it/214/84'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 10,
			
 
				+        name: 'WEIMO',
			
 
				+        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=WEIMO',
			
 
				+        url: '#'
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    const casesList = ref([
			
 
				+      {
			
 
				+        id: 1,
			
 
				+        title: '智慧农业（种植+养殖）',
			
 
				+        description: '通过物联网技术实现农业自动化管理，利用传感器监控土壤、水质等环境参数，提高农业生产效率。',
			
 
				+        image: 'https://unsplash.it/300/200'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 2,
			
 
				+        title: '智慧停车',
			
 
				+        description: '通过车牌识别技术及物联网设备实现停车场智能化管理，实现无感支付和车位引导等功能。',
			
 
				+        image: 'https://unsplash.it/300/200'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 3,
			
 
				+        title: '副控票务系统',
			
 
				+        description: '为景区提供智能化票务管理，智能闸机一体化管理系统，提升游客体验，优化景区运营。',
			
 
				+        image: 'https://unsplash.it/300/200'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 4,
			
 
				+        title: '智慧校园',
			
 
				+        description: '集成学生管理、教学管理、安全监控等功能，为教育机构提供全方位数字化解决方案。',
			
 
				+        image: 'https://unsplash.it/300/200'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 5,
			
 
				+        title: '智慧医疗',
			
 
				+        description: '通过数字化技术提升医疗服务效率，实现患者信息管理、远程诊疗等智能化医疗服务。',
			
 
				+        image: 'https://unsplash.it/300/200'
			
 
				+      },
			
 
				+      {
			
 
				+        id: 6,
			
 
				+        title: '智慧物流',
			
 
				+        description: '利用物联网和大数据技术优化物流配送，实现货物追踪、路径优化等智能化物流管理。',
			
 
				+        image: 'https://unsplash.it/300/200'
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    const maxCaseIndex = computed(() => {
			
 
				+      return Math.max(0, casesList.value.length - visibleCases.value)
			
 
				+    })
			
 
				+
			
 
				+    const nextCase = () => {
			
 
				+      if (currentCaseIndex.value < maxCaseIndex.value) {
			
 
				+        currentCaseIndex.value++
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    const prevCase = () => {
			
 
				+      if (currentCaseIndex.value > 0) {
			
 
				+        currentCaseIndex.value--
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // API调用方法
			
 
				+    const loadHomeData = async () => {
			
 
				+      try {
			
 
				+        const data = await getHomeData()
			
 
				+        // 这里可以更新products和advantages数据
			
 
				+        console.log('首页数据:', data)
			
 
				+      } catch (error) {
			
 
				+        console.error('加载首页数据失败:', error)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 响应式处理
			
 
				+    const updateVisibleCases = () => {
			
 
				+      if (window.innerWidth <= 768) {
			
 
				+        visibleCases.value = 1
			
 
				+      } else {
			
 
				+        visibleCases.value = 3
			
 
				+      }
			
 
				+      // 重置索引以防超出范围
			
 
				+      if (currentCaseIndex.value > maxCaseIndex.value) {
			
 
				+        currentCaseIndex.value = maxCaseIndex.value
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    onMounted(() => {
			
 
				+      loadHomeData()
			
 
				+      updateVisibleCases()
			
 
				+      window.addEventListener('resize', updateVisibleCases)
			
 
				+    })
			
 
				+
			
 
				+    onUnmounted(() => {
			
 
				+      window.removeEventListener('resize', updateVisibleCases)
			
 
				+    })
			
 
				+
			
 
				+    return {
			
 
				+      productList,
			
 
				+      activeProductId,
			
 
				+      activeProduct,
			
 
				+      setActiveProduct,
			
 
				+      casesList,
			
 
				+      currentCaseIndex,
			
 
				+      visibleCases,
			
 
				+      maxCaseIndex,
			
 
				+      nextCase,
			
 
				+      prevCase,
			
 
				+      aboutTabs,
			
 
				+      activeAboutTab,
			
 
				+      activeAboutContent,
			
 
				+      setActiveAboutTab,
			
 
				+      partnersList
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+// banner区域
			
 
				+.banner-section {
			
 
				+  position: relative;
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.info-row {
			
 
				+  height: 130px;
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				+  right: 0;
			
 
				+  bottom: 0;
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  backdrop-filter: blur(5px);
			
 
				+  background-color: rgba(255, 255, 255, 0.3);
			
 
				+
			
 
				+  .info-item {
			
 
				+    // flex: 1;
			
 
				+    padding: 0 78px;
			
 
				+    position: relative;
			
 
				+    text-align: center;
			
 
				+  }
			
 
				+
			
 
				+  .info-item:not(:last-child)::after {
			
 
				+    content: '';
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    right: 0;
			
 
				+    width: 1px;
			
 
				+    height: 20px;
			
 
				+    background-color: #ccc;
			
 
				+    transform: translateY(-50%);
			
 
				+  }
			
 
				+
			
 
				+  .number {
			
 
				+    color: #0066cc;
			
 
				+    font-weight: bold;
			
 
				+    font-size: 32px;
			
 
				+    vertical-align: middle;
			
 
				+    margin: 0 5px;
			
 
				+  }
			
 
				+
			
 
				+  .text {
			
 
				+    font-size: 18px;
			
 
				+    font-weight: 400;
			
 
				+    color: #333;
			
 
				+    margin: 0;
			
 
				+    display: inline-block;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 产品中心
			
 
				+.products-section {
			
 
				+  background: url('@assets/index-products-bg.png') no-repeat center center;
			
 
				+  background-size: cover;
			
 
				+  padding: 80px 0;
			
 
				+  position: relative;
			
 
				+
			
 
				+  .section-header {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    .section-title {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      color: #333;
			
 
				+      margin: 0 0 20px 0;
			
 
				+    }
			
 
				+
			
 
				+    .section-subtitle {
			
 
				+      font-size: 16px;
			
 
				+      color: #999;
			
 
				+      margin: 0 0 20px 0;
			
 
				+      letter-spacing: 2px;
			
 
				+      text-transform: uppercase;
			
 
				+    }
			
 
				+
			
 
				+    .section-description {
			
 
				+      font-size: 18px;
			
 
				+      color: #666;
			
 
				+      margin: 0;
			
 
				+      line-height: 1.6;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .products-content {
			
 
				+    display: flex;
			
 
				+    gap: 60px;
			
 
				+    align-items: flex-start;
			
 
				+  }
			
 
				+
			
 
				+  .products-nav {
			
 
				+    flex: 0 0 22%;
			
 
				+
			
 
				+    .nav-item {
			
 
				+      height: 100px;
			
 
				+      line-height: 100px;
			
 
				+      padding: 0 30px;
			
 
				+      margin-bottom: 2px;
			
 
				+      cursor: pointer;
			
 
				+      font-size: 24px;
			
 
				+      font-weight: 500;
			
 
				+      color: #343434;
			
 
				+      transition: all 0.3s ease;
			
 
				+      // border-radius: 8px;
			
 
				+      box-sizing: border-box;
			
 
				+
			
 
				+      &:hover {
			
 
				+        background: rgba(0, 102, 204, 0.1);
			
 
				+        border-color: #0066cc;
			
 
				+        color: #0066cc;
			
 
				+      }
			
 
				+
			
 
				+      &.active {
			
 
				+        background: linear-gradient(to right, #CAE0FF, #E5F0FF);
			
 
				+        color: #0054FF;
			
 
				+        // border-color: #0066cc;
			
 
				+        // box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .product-detail {
			
 
				+    flex: 1;
			
 
				+
			
 
				+    .detail-content {
			
 
				+      flex: 1;
			
 
				+
			
 
				+      .product-title {
			
 
				+        font-size: 36px;
			
 
				+        font-weight: bold;
			
 
				+        color: #333;
			
 
				+        margin: 0 0 20px 0;
			
 
				+      }
			
 
				+
			
 
				+      .product-description {
			
 
				+        font-size: 24px;
			
 
				+        color: #333;
			
 
				+        line-height: 1.5;
			
 
				+        margin-bottom: 35px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .detail-image {
			
 
				+      img {
			
 
				+        width: 100%;
			
 
				+        object-fit: cover;
			
 
				+        border-radius: 8px;
			
 
				+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 行业案例
			
 
				+.cases-section {
			
 
				+  background: url('@assets/index-cases-bg.png') no-repeat center center;
			
 
				+  background-size: cover;
			
 
				+  padding: 80px 0;
			
 
				+  position: relative;
			
 
				+
			
 
				+  .section-header {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    .section-title {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      color: #333;
			
 
				+      margin: 0 0 20px 0;
			
 
				+    }
			
 
				+
			
 
				+    .section-subtitle {
			
 
				+      font-size: 16px;
			
 
				+      color: #999;
			
 
				+      margin: 0 0 20px 0;
			
 
				+      letter-spacing: 2px;
			
 
				+      text-transform: uppercase;
			
 
				+    }
			
 
				+
			
 
				+    .section-description {
			
 
				+      font-size: 18px;
			
 
				+      color: #666;
			
 
				+      margin: 0;
			
 
				+      line-height: 1.6;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .cases-carousel {
			
 
				+    position: relative;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    gap: 30px;
			
 
				+  }
			
 
				+
			
 
				+  .nav-arrow {
			
 
				+    width: 60px;
			
 
				+    height: 60px;
			
 
				+    border-radius: 50%;
			
 
				+    background: rgba(255, 255, 255, 0.9);
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    cursor: pointer;
			
 
				+    transition: all 0.3s ease;
			
 
				+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			
 
				+    flex-shrink: 0;
			
 
				+
			
 
				+    &:hover {
			
 
				+      background: rgba(255, 255, 255, 1);
			
 
				+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
			
 
				+    }
			
 
				+
			
 
				+    &.disabled {
			
 
				+      opacity: 0.3;
			
 
				+      cursor: not-allowed;
			
 
				+      pointer-events: none;
			
 
				+    }
			
 
				+
			
 
				+    .arrow-icon {
			
 
				+      width: 24px;
			
 
				+      height: 24px;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+
			
 
				+      img {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        object-fit: contain;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    &.nav-arrow-left .arrow-icon {
			
 
				+      transform: rotate(180deg);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .cases-container {
			
 
				+    flex: 1;
			
 
				+    overflow: hidden;
			
 
				+    border-radius: 12px;
			
 
				+  }
			
 
				+
			
 
				+  .cases-wrapper {
			
 
				+    display: flex;
			
 
				+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+
			
 
				+  .case-item {
			
 
				+    flex: 0 0 calc(100% / 3);
			
 
				+    padding: 0 15px;
			
 
				+    box-sizing: border-box;
			
 
				+
			
 
				+    .case-image {
			
 
				+      width: 100%;
			
 
				+      height: 200px;
			
 
				+      border-radius: 12px 12px 0 0;
			
 
				+      overflow: hidden;
			
 
				+
			
 
				+      img {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        object-fit: cover;
			
 
				+        transition: transform 0.3s ease;
			
 
				+      }
			
 
				+
			
 
				+      &:hover img {
			
 
				+        transform: scale(1.05);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .case-content {
			
 
				+      background: rgba(255, 255, 255, 0.95);
			
 
				+      padding: 25px;
			
 
				+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
			
 
				+      backdrop-filter: blur(10px);
			
 
				+      border-radius: 0 0 12px 12px;
			
 
				+
			
 
				+      .case-title {
			
 
				+        text-align: center;
			
 
				+        font-size: 20px;
			
 
				+        font-weight: bold;
			
 
				+        color: #333;
			
 
				+        margin: 0 0 15px 0;
			
 
				+        line-height: 1.4;
			
 
				+      }
			
 
				+
			
 
				+      .case-description {
			
 
				+        font-size: 14px;
			
 
				+        color: #666;
			
 
				+        line-height: 1.6;
			
 
				+        margin: 0;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 企业简介
			
 
				+.about-section {
			
 
				+  background: url('@assets/index-about-bg.png') no-repeat center center;
			
 
				+  background-size: cover;
			
 
				+  padding: 80px 0;
			
 
				+  position: relative;
			
 
				+
			
 
				+  .section-header {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    .section-title {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      color: #333;
			
 
				+      margin: 0 0 20px 0;
			
 
				+    }
			
 
				+
			
 
				+    .section-subtitle {
			
 
				+      font-size: 16px;
			
 
				+      color: #999;
			
 
				+      margin: 0 0 20px 0;
			
 
				+      letter-spacing: 2px;
			
 
				+      text-transform: uppercase;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .about-content {
			
 
				+    // max-width: 1200px;
			
 
				+    margin: 0 auto;
			
 
				+  }
			
 
				+
			
 
				+  .about-tabs {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    // gap: 0;
			
 
				+    margin-bottom: 95px;
			
 
				+
			
 
				+    .tab-item {
			
 
				+      flex: 0 0 400px;
			
 
				+      height: 66px;
			
 
				+      line-height: 66px;
			
 
				+      text-align: center;
			
 
				+      font-size: 30px;
			
 
				+      font-weight: 500;
			
 
				+      color: #333;
			
 
				+      // background: rgba(255, 255, 255, 0.8);
			
 
				+      // border: 2px solid #E5E5E5;
			
 
				+      border-radius: 5px;
			
 
				+      cursor: pointer;
			
 
				+      transition: all 0.3s ease;
			
 
				+      position: relative;
			
 
				+
			
 
				+      // &:first-child {
			
 
				+      //   border-radius: 8px 0 0 8px;
			
 
				+      // }
			
 
				+
			
 
				+      // &:last-child {
			
 
				+      //   border-radius: 0 8px 8px 0;
			
 
				+      // }
			
 
				+
			
 
				+      // &:not(:last-child) {
			
 
				+      //   border-right: none;
			
 
				+      // }
			
 
				+
			
 
				+      &:hover {
			
 
				+        background: rgba(0, 102, 204, 0.1);
			
 
				+        color: #0066cc;
			
 
				+        border-color: #0066cc;
			
 
				+        z-index: 2;
			
 
				+      }
			
 
				+
			
 
				+      &.active {
			
 
				+        background: #0066cc;
			
 
				+        color: white;
			
 
				+        border-color: #0066cc;
			
 
				+        z-index: 3;
			
 
				+        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .about-detail {
			
 
				+    // background: rgba(255, 255, 255, 0.95);
			
 
				+    border-radius: 16px;
			
 
				+    padding: 40px 0;
			
 
				+    // box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
			
 
				+    // backdrop-filter: blur(10px);
			
 
				+    min-height: 400px;
			
 
				+  }
			
 
				+
			
 
				+  .detail-content {
			
 
				+    display: flex;
			
 
				+    gap: 110px;
			
 
				+    align-items: flex-start;
			
 
				+
			
 
				+    .content-left {
			
 
				+      flex: 0 0 800px;
			
 
				+
			
 
				+      img {
			
 
				+        width: 100%;
			
 
				+        height: 480px;
			
 
				+        object-fit: cover;
			
 
				+        border-radius: 12px;
			
 
				+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .content-right {
			
 
				+      flex: 1;
			
 
				+
			
 
				+      .content-title {
			
 
				+        font-size: 28px;
			
 
				+        font-weight: bold;
			
 
				+        color: #333;
			
 
				+        margin: 0 0 25px 0;
			
 
				+      }
			
 
				+
			
 
				+      .content-description {
			
 
				+        font-size: 16px;
			
 
				+        color: #666;
			
 
				+        line-height: 1.8;
			
 
				+        margin-bottom: 30px;
			
 
				+
			
 
				+        p {
			
 
				+          margin: 0 0 15px 0;
			
 
				+
			
 
				+          &:last-child {
			
 
				+            margin-bottom: 0;
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        strong {
			
 
				+          color: #0066cc;
			
 
				+          font-weight: 600;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .content-action {
			
 
				+        .learn-more-btn {
			
 
				+          background: transparent;
			
 
				+          color: #0054FF;
			
 
				+          border: 1px solid #0054FF;
			
 
				+          padding: 12px 30px;
			
 
				+          border-radius: 5px;
			
 
				+          font-size: 16px;
			
 
				+          font-weight: 500;
			
 
				+          cursor: pointer;
			
 
				+          transition: all 0.3s ease;
			
 
				+          box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
			
 
				+
			
 
				+          &:hover {
			
 
				+            transform: translateY(-2px);
			
 
				+            box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
			
 
				+          }
			
 
				+
			
 
				+          &:active {
			
 
				+            transform: translateY(0);
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 合作伙伴
			
 
				+.cooperation-section {
			
 
				+  // background: url('@assets/index-cooperation-bg.png') no-repeat center center;
			
 
				+  background-size: cover;
			
 
				+  padding: 80px 0;
			
 
				+  position: relative;
			
 
				+  &::before{
			
 
				+    position: absolute;
			
 
				+    content: '';
			
 
				+    width: 1346px;
			
 
				+    height: 335px;
			
 
				+    right: 150px;
			
 
				+    top: 0;
			
 
				+    background: url('@assets/index-cooperation-bg.png') no-repeat center center;;
			
 
				+    background-size: contain;
			
 
				+  }
			
 
				+
			
 
				+  .section-header {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 60px;
			
 
				+
			
 
				+    .section-title {
			
 
				+      font-size: 42px;
			
 
				+      font-weight: bold;
			
 
				+      color: #333;
			
 
				+      margin: 0 0 20px 0;
			
 
				+    }
			
 
				+
			
 
				+    .section-subtitle {
			
 
				+      font-size: 16px;
			
 
				+      color: #999;
			
 
				+      margin: 0 0 185px 0;
			
 
				+      letter-spacing: 2px;
			
 
				+      text-transform: uppercase;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .partners-grid {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    justify-content: center;
			
 
				+    gap: 30px;
			
 
				+    // max-width: 1000px;
			
 
				+    margin: 0 auto;
			
 
				+
			
 
				+    .partner-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      width: 214px;
			
 
				+      height: 84px;
			
 
				+      background: rgba(255, 255, 255, 0.9);
			
 
				+      border: 2px solid #E5E5E5;
			
 
				+      border-radius: 8px;
			
 
				+      transition: all 0.3s ease;
			
 
				+      text-decoration: none;
			
 
				+      backdrop-filter: blur(5px);
			
 
				+      overflow: hidden;
			
 
				+
			
 
				+      &:hover {
			
 
				+        background: rgba(255, 255, 255, 1);
			
 
				+        border-color: #0066cc;
			
 
				+        transform: translateY(-5px);
			
 
				+        box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        max-width: 100%;
			
 
				+        max-height: 84px;
			
 
				+        object-fit: contain;
			
 
				+        // filter: grayscale(100%);
			
 
				+        transition: filter 0.3s ease;
			
 
				+      }
			
 
				+
			
 
				+      &:hover img {
			
 
				+        filter: grayscale(0%);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+// 切换动画
			
 
				+.fade-slide-enter-active,
			
 
				+.fade-slide-leave-active {
			
 
				+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			
 
				+}
			
 
				+
			
 
				+.fade-slide-enter-from {
			
 
				+  opacity: 0;
			
 
				+  transform: translateX(30px);
			
 
				+}
			
 
				+
			
 
				+.fade-slide-leave-to {
			
 
				+  opacity: 0;
			
 
				+  transform: translateX(-30px);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+// 响应式设计
			
 
				+@media (max-width: 768px) {
			
 
				+  .cooperation-section{
			
 
				+    &::before{
			
 
				+      width: 0;
			
 
				+    }
			
 
				+    .section-header{
			
 
				+      .section-subtitle{
			
 
				+        margin-bottom: 10px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .info-row{
			
 
				+    .info-item{
			
 
				+      padding: 0 10px;
			
 
				+    }
			
 
				+    .text{
			
 
				+      font-size: 14px;
			
 
				+    }
			
 
				+    .number{
			
 
				+      font-size: 14px;
			
 
				+    }
			
 
				+  }
			
 
				+  .products-section {
			
 
				+    padding: 40px 0;
			
 
				+
			
 
				+    .section-header {
			
 
				+      margin-bottom: 40px;
			
 
				+
			
 
				+      .section-title {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .products-content {
			
 
				+      flex-direction: column;
			
 
				+      gap: 0;
			
 
				+    }
			
 
				+
			
 
				+    .products-nav {
			
 
				+      flex: none;
			
 
				+      display: flex;
			
 
				+      overflow-x: auto;
			
 
				+      gap: 10px;
			
 
				+      padding-bottom: 10px;
			
 
				+      flex-wrap: wrap;
			
 
				+
			
 
				+      .nav-item {
			
 
				+        flex: 0 0 auto;
			
 
				+        white-space: nowrap;
			
 
				+        padding: 15px 20px;
			
 
				+        font-size: 16px;
			
 
				+        height: auto;
			
 
				+        line-height: 1;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .product-detail {
			
 
				+      flex-direction: column;
			
 
				+      padding: 30px 20px;
			
 
				+
			
 
				+      .detail-image {
			
 
				+        flex: none;
			
 
				+        width: 100%;
			
 
				+
			
 
				+        img {
			
 
				+          height: 200px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .cases-section {
			
 
				+    padding: 40px 0;
			
 
				+
			
 
				+    .section-header {
			
 
				+      margin-bottom: 40px;
			
 
				+
			
 
				+      .section-title {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .cases-carousel {
			
 
				+      gap: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .nav-arrow {
			
 
				+      width: 50px;
			
 
				+      height: 50px;
			
 
				+
			
 
				+      .arrow-icon {
			
 
				+        width: 20px;
			
 
				+        height: 20px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .case-item {
			
 
				+      flex: 0 0 100%;
			
 
				+      padding: 0 10px;
			
 
				+
			
 
				+      .case-image {
			
 
				+        height: 180px;
			
 
				+        margin-bottom: 15px;
			
 
				+      }
			
 
				+
			
 
				+      .case-content {
			
 
				+        padding: 20px;
			
 
				+
			
 
				+        .case-title {
			
 
				+          font-size: 18px;
			
 
				+          margin-bottom: 12px;
			
 
				+        }
			
 
				+
			
 
				+        .case-description {
			
 
				+          font-size: 13px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .about-section {
			
 
				+    padding: 40px 0;
			
 
				+
			
 
				+    .section-header {
			
 
				+      margin-bottom: 40px;
			
 
				+
			
 
				+      .section-title {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .about-tabs {
			
 
				+      flex-direction: column;
			
 
				+      gap: 2px;
			
 
				+      margin-bottom: 30px;
			
 
				+
			
 
				+      .tab-item {
			
 
				+        flex: none;
			
 
				+        border-radius: 8px !important;
			
 
				+        border: 2px solid #E5E5E5 !important;
			
 
				+        margin-bottom: 2px;
			
 
				+        font-size: 16px;
			
 
				+        height: 50px;
			
 
				+        line-height: 50px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .about-detail {
			
 
				+      padding: 25px 20px;
			
 
				+      margin: 0 15px;
			
 
				+    }
			
 
				+
			
 
				+    .detail-content {
			
 
				+      flex-direction: column;
			
 
				+      gap: 25px;
			
 
				+
			
 
				+      .content-left {
			
 
				+        flex: none;
			
 
				+        width: 100%;
			
 
				+
			
 
				+        img {
			
 
				+          height: 200px;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .content-right {
			
 
				+        .content-title {
			
 
				+          font-size: 24px;
			
 
				+          margin-bottom: 20px;
			
 
				+        }
			
 
				+
			
 
				+        .content-description {
			
 
				+          font-size: 15px;
			
 
				+          margin-bottom: 25px;
			
 
				+        }
			
 
				+
			
 
				+        .content-action {
			
 
				+          text-align: center;
			
 
				+
			
 
				+          .learn-more-btn {
			
 
				+            padding: 10px 25px;
			
 
				+            font-size: 15px;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .cooperation-section {
			
 
				+    padding: 40px 0;
			
 
				+
			
 
				+    .section-header {
			
 
				+      margin-bottom: 40px;
			
 
				+
			
 
				+      .section-title {
			
 
				+        font-size: 32px;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .partners-grid {
			
 
				+      gap: 20px;
			
 
				+      margin: 0 20px;
			
 
				+
			
 
				+      .partner-item {
			
 
				+        width: calc(50% - 10px);
			
 
				+        height: 80px;
			
 
				+        padding: 15px;
			
 
				+
			
 
				+        img {
			
 
				+          max-height: 50px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/pages/products/Index.vue
+++ b/src/pages/products/Index.vue
@@ -0,0 +1,632 @@
 
				+<template>
			
 
				+  <DefaultLayout>
			
 
				+    <!-- banner -->
			
 
				+    <section class="banner-section">
			
 
				+      <img src="@assets/products-banner.png" alt="" srcset="">
			
 
				+    </section>
			
 
				+    <!-- skills section -->
			
 
				+    <section class="skills-section">
			
 
				+      <!-- 白色背景的标题和菜单部分 -->
			
 
				+      <div class="skills-header">
			
 
				+        <div class="container">
			
 
				+          <h2 class="section-title">为企业打造了一个全面的数字化基础设施</h2>
			
 
				+          <div class="platform-tabs">
			
 
				+            <div v-for="(platform, index) in platforms" :key="index" class="tab-item"
			
 
				+              :class="{ active: activePlatform === index }" @click="switchPlatform(index)">
			
 
				+              {{ platform.name }}
			
 
				+              <img v-if="activePlatform === index" src="@assets/products-select.png" alt="" class="select-indicator">
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- 内容部分 -->
			
 
				+      <div class="skills-content">
			
 
				+        <div class="container">
			
 
				+          <div class="content-wrapper">
			
 
				+            <h3 class="content-title">{{ platforms[activePlatform].title }}</h3>
			
 
				+            <img src="@assets/products-select.png" alt="" class="title-indicator">
			
 
				+            <p class="content-subtitle">{{ platforms[activePlatform].subtitle }}</p>
			
 
				+
			
 
				+            <!-- 图片轮播 -->
			
 
				+            <div class="carousel-container">
			
 
				+              <div class="carousel-wrapper" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
			
 
				+                <div class="carousel-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
			
 
				+                  <div v-for="(image, index) in platforms[activePlatform].images" :key="index" class="carousel-slide">
			
 
				+                    <img :src="image" :alt="`轮播图 ${index + 1}`">
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <!-- 指示器 -->
			
 
				+              <div class="carousel-indicators">
			
 
				+                <div v-for="(_, index) in platforms[activePlatform].images" :key="index" class="indicator"
			
 
				+                  :class="{ active: currentSlide === index }" @click="goToSlide(index)"></div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+
			
 
				+    <!-- 产品优势 section -->
			
 
				+    <section class="advantages-section">
			
 
				+      <div class="container">
			
 
				+        <h2 class="section-title">产品优势</h2>
			
 
				+        <img src="@assets/products-select.png" alt="" class="title-indicator">
			
 
				+
			
 
				+        <div class="advantages-grid">
			
 
				+          <div v-for="(advantage, index) in advantages" :key="index" class="advantage-item">
			
 
				+            <div class="advantage-content">
			
 
				+              <h3 class="advantage-title">{{ advantage.title }}</h3>
			
 
				+              <p class="advantage-description">{{ advantage.description }}</p>
			
 
				+            </div>
			
 
				+            <div class="advantage-image">
			
 
				+              <img :src="advantage.image" :alt="advantage.title">
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+  </DefaultLayout>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { ref, onMounted, onUnmounted } from 'vue'
			
 
				+import DefaultLayout from '@/layouts/DefaultLayout.vue'
			
 
				+import { getProductsData } from '@/api/modules/products'
			
 
				+import productsBg01 from '@/assets/products-bg01.png'
			
 
				+import productsBg02 from '@/assets/products-bg02.png'
			
 
				+import productsYoushi01 from '@/assets/products-youshi-01.png'
			
 
				+import productsYoushi02 from '@/assets/products-youshi-02.png'
			
 
				+import productsYoushi03 from '@/assets/products-youshi-03.png'
			
 
				+import productsYoushi04 from '@/assets/products-youshi-04.png'
			
 
				+import productsYoushi05 from '@/assets/products-youshi-05.png'
			
 
				+import productsYoushi06 from '@/assets/products-youshi-06.png'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'ProductsPage',
			
 
				+  components: {
			
 
				+    DefaultLayout
			
 
				+  },
			
 
				+  setup() {
			
 
				+    // 响应式数据
			
 
				+    const activePlatform = ref(0)
			
 
				+    const currentSlide = ref(0)
			
 
				+    let autoPlayTimer = null
			
 
				+
			
 
				+    // 平台数据
			
 
				+    const platforms = ref([
			
 
				+      {
			
 
				+        name: '低代码平台',
			
 
				+        title: '平台预览',
			
 
				+        subtitle: '图形化界面和拖拽式组件，简化应用开发复杂度，快速构建和配置各类企业应用。',
			
 
				+        images: [productsBg01, productsBg02, productsBg01]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '物联网平台',
			
 
				+        title: '物联网解决方案',
			
 
				+        subtitle: '全面的物联网设备管理和数据采集平台，实现设备互联和智能化管理。',
			
 
				+        images: [productsBg02, productsBg01, productsBg02]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '统一权限登录系统',
			
 
				+        title: '权限管理系统',
			
 
				+        subtitle: '统一身份认证和权限管理，确保系统安全性和用户体验的完美平衡。',
			
 
				+        images: [productsBg01, productsBg02, productsBg01]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '地图通感应用',
			
 
				+        title: '地图通感平台',
			
 
				+        subtitle: '基于地理信息的智能感知应用，提供精准的位置服务和空间数据分析。',
			
 
				+        images: [productsBg02, productsBg01, productsBg02]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '数字学生',
			
 
				+        title: '数字学生管理',
			
 
				+        subtitle: '全方位的学生信息管理和学习行为分析，助力个性化教育发展。',
			
 
				+        images: [productsBg01, productsBg02, productsBg01]
			
 
				+      },
			
 
				+      {
			
 
				+        name: '数据中台',
			
 
				+        title: '数据中台服务',
			
 
				+        subtitle: '企业级数据治理和分析平台，实现数据资产的统一管理和价值挖掘。',
			
 
				+        images: [productsBg02, productsBg01, productsBg02]
			
 
				+      },
			
 
				+      {
			
 
				+        name: 'AI大模型',
			
 
				+        title: 'AI智能服务',
			
 
				+        subtitle: '先进的人工智能大模型技术，为企业提供智能化解决方案和服务。',
			
 
				+        images: [productsBg01, productsBg02, productsBg01]
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    // 产品优势数据
			
 
				+    const advantages = ref([
			
 
				+      {
			
 
				+        title: '成本节约',
			
 
				+        description: '通过优化碳排放和碳资产配置，企业 可以在碳交易市场上卖出多余的碳排 放配额，实现成本节约。此外，提高 能效和采用清洁能源也有助于降低能 源成本。',
			
 
				+        image: productsYoushi01
			
 
				+      },
			
 
				+      {
			
 
				+        title: '市场竞争力提升',
			
 
				+        description: '积极管理碳资产的企业能够改善其 在绿色市场中的形象，吸引越来越 多注重可持续性的消费者和投资者， 从而提升市场竞争力。',
			
 
				+        image: productsYoushi02
			
 
				+      },
			
 
				+      {
			
 
				+        title: '详细合规与风险管理',
			
 
				+        description: '碳资产管理帮助企业准确监测和 报告碳排放，确保企业遵守相关 的环境法规和标准，降低因违反 碳排放规定而产生的法律和财务 风险。',
			
 
				+        image: productsYoushi03
			
 
				+      },
			
 
				+      {
			
 
				+        title: '技术创新与生产力提升',
			
 
				+        description: '碳资产管理促使企业投资于低碳技术和 能源效率改进，这些投资不仅有助于减 少碳排放，还能提高整体生产力和操作 效率。',
			
 
				+        image: productsYoushi04
			
 
				+      },
			
 
				+      {
			
 
				+        title: '长远战略规划',
			
 
				+        description: '碳资产管理有助于企业制定长期的碳 减排目标和策略，帮助企业在应对气 候变化的全球趋势中占据有利位置。 推动企业的可持续发展。',
			
 
				+        image: productsYoushi05
			
 
				+      },
			
 
				+      {
			
 
				+        title: '数据驱动决策支持',
			
 
				+        description: '碳资产管理平台提供的数据分析和报告功能， 能够帮助企业管理层做出更加明智的决策优 化资源分配，提高决策的数据驱动性。助力 企业制定长期的碳减排目标和策略。',
			
 
				+        image: productsYoushi06
			
 
				+      }
			
 
				+    ])
			
 
				+
			
 
				+    // 切换平台
			
 
				+    const switchPlatform = (index) => {
			
 
				+      activePlatform.value = index
			
 
				+      currentSlide.value = 0 // 切换平台时重置轮播
			
 
				+      resetAutoPlay()
			
 
				+    }
			
 
				+
			
 
				+    // 切换轮播图
			
 
				+    const goToSlide = (index) => {
			
 
				+      currentSlide.value = index
			
 
				+      resetAutoPlay()
			
 
				+    }
			
 
				+
			
 
				+    // 自动播放
			
 
				+    const startAutoPlay = () => {
			
 
				+      autoPlayTimer = setInterval(() => {
			
 
				+        const maxSlides = platforms.value[activePlatform.value].images.length
			
 
				+        currentSlide.value = (currentSlide.value + 1) % maxSlides
			
 
				+      }, 4000)
			
 
				+    }
			
 
				+
			
 
				+    // 重置自动播放
			
 
				+    const resetAutoPlay = () => {
			
 
				+      if (autoPlayTimer) {
			
 
				+        clearInterval(autoPlayTimer)
			
 
				+      }
			
 
				+      startAutoPlay()
			
 
				+    }
			
 
				+
			
 
				+    // 暂停自动播放
			
 
				+    const pauseAutoPlay = () => {
			
 
				+      if (autoPlayTimer) {
			
 
				+        clearInterval(autoPlayTimer)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    // 恢复自动播放
			
 
				+    const resumeAutoPlay = () => {
			
 
				+      startAutoPlay()
			
 
				+    }
			
 
				+
			
 
				+    // API调用方法
			
 
				+    const loadProductsData = async () => {
			
 
				+      try {
			
 
				+        const data = await getProductsData()
			
 
				+        console.log('产品数据:', data)
			
 
				+      } catch (error) {
			
 
				+        console.error('加载产品数据失败:', error)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    onMounted(() => {
			
 
				+      loadProductsData()
			
 
				+      startAutoPlay()
			
 
				+    })
			
 
				+
			
 
				+    onUnmounted(() => {
			
 
				+      if (autoPlayTimer) {
			
 
				+        clearInterval(autoPlayTimer)
			
 
				+      }
			
 
				+    })
			
 
				+
			
 
				+    return {
			
 
				+      activePlatform,
			
 
				+      currentSlide,
			
 
				+      platforms,
			
 
				+      advantages,
			
 
				+      switchPlatform,
			
 
				+      goToSlide,
			
 
				+      pauseAutoPlay,
			
 
				+      resumeAutoPlay
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+// banner区域
			
 
				+.banner-section {
			
 
				+  position: relative;
			
 
				+
			
 
				+  img {
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// skills区域
			
 
				+.skills-section {
			
 
				+  .skills-header {
			
 
				+    background: #fff;
			
 
				+    padding: 60px 0 40px;
			
 
				+
			
 
				+    .section-title {
			
 
				+      font-size: 36px;
			
 
				+      font-weight: 600;
			
 
				+      color: #333;
			
 
				+      text-align: center;
			
 
				+      margin-bottom: 50px;
			
 
				+      line-height: 1.4;
			
 
				+    }
			
 
				+
			
 
				+    .platform-tabs {
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      gap: 60px;
			
 
				+      flex-wrap: wrap;
			
 
				+
			
 
				+      .tab-item {
			
 
				+        position: relative;
			
 
				+        font-size: 18px;
			
 
				+        color: #666;
			
 
				+        cursor: pointer;
			
 
				+        padding: 10px 0;
			
 
				+        transition: all 0.3s ease;
			
 
				+
			
 
				+        &:hover {
			
 
				+          color: #1890ff;
			
 
				+        }
			
 
				+
			
 
				+        &.active {
			
 
				+          color: #1890ff;
			
 
				+          font-weight: 600;
			
 
				+        }
			
 
				+
			
 
				+        .select-indicator {
			
 
				+          position: absolute;
			
 
				+          bottom: -35px;
			
 
				+          left: 50%;
			
 
				+          transform: translateX(-50%);
			
 
				+          width: 132px;
			
 
				+          height: auto;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .skills-content {
			
 
				+    background: url('@assets/products-bg01.png') no-repeat center center;
			
 
				+    background-size: cover;
			
 
				+    background-position: center;
			
 
				+    background-repeat: no-repeat;
			
 
				+    padding: 80px 0 100px;
			
 
				+    position: relative;
			
 
				+
			
 
				+    // &::before {
			
 
				+    //   content: '';
			
 
				+    //   position: absolute;
			
 
				+    //   top: 0;
			
 
				+    //   left: 0;
			
 
				+    //   right: 0;
			
 
				+    //   bottom: 0;
			
 
				+    //   background: rgba(0, 0, 0, 0.3);
			
 
				+    //   z-index: 1;
			
 
				+    // }
			
 
				+
			
 
				+    .container {
			
 
				+      position: relative;
			
 
				+      z-index: 2;
			
 
				+    }
			
 
				+
			
 
				+    .content-wrapper {
			
 
				+      text-align: center;
			
 
				+      color: #333;
			
 
				+
			
 
				+      .content-title {
			
 
				+        font-size: 32px;
			
 
				+        font-weight: 600;
			
 
				+        margin-bottom: 20px;
			
 
				+        position: relative;
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+
			
 
				+      .title-indicator {
			
 
				+        width: 132px;
			
 
				+        height: auto;
			
 
				+        margin: 0 auto 20px;
			
 
				+        display: block;
			
 
				+      }
			
 
				+
			
 
				+      .content-subtitle {
			
 
				+        font-size: 16px;
			
 
				+        line-height: 1.6;
			
 
				+        margin-bottom: 60px;
			
 
				+        max-width: 600px;
			
 
				+        margin-left: auto;
			
 
				+        margin-right: auto;
			
 
				+        opacity: 0.9;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .carousel-container {
			
 
				+    max-width: 1434px;
			
 
				+    margin: 0 auto;
			
 
				+
			
 
				+    .carousel-wrapper {
			
 
				+      position: relative;
			
 
				+      overflow: hidden;
			
 
				+      border-radius: 12px;
			
 
				+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
			
 
				+
			
 
				+      .carousel-track {
			
 
				+        display: flex;
			
 
				+        transition: transform 0.5s ease-in-out;
			
 
				+
			
 
				+        .carousel-slide {
			
 
				+          min-width: 100%;
			
 
				+
			
 
				+          img {
			
 
				+            width: 100%;
			
 
				+            height: auto;
			
 
				+            max-height: 790px;
			
 
				+            display: block;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .carousel-indicators {
			
 
				+      position: relative;
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      gap: 12px;
			
 
				+      margin-top: -30px;
			
 
				+
			
 
				+      .indicator {
			
 
				+        width: 8px;
			
 
				+        height: 8px;
			
 
				+        border-radius: 4px;
			
 
				+        background: rgba(0, 0, 0, 0.4);
			
 
				+        cursor: pointer;
			
 
				+        transition: all 0.3s ease;
			
 
				+
			
 
				+        &:hover {
			
 
				+          background: rgba(255, 255, 255, 0.7);
			
 
				+        }
			
 
				+
			
 
				+        &.active {
			
 
				+          width: 24px;
			
 
				+          background: #fff;
			
 
				+          animation: indicatorExpand 0.3s ease;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 产品优势区域
			
 
				+.advantages-section {
			
 
				+  background: #f8f9fa;
			
 
				+  padding: 80px 0;
			
 
				+  position: relative;
			
 
				+  &::before{
			
 
				+    position: absolute;
			
 
				+    content: '';
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    top: 0;
			
 
				+    bottom: -138px;
			
 
				+    background: url('@assets/products-bg02.png') no-repeat center center;
			
 
				+    background-size: cover;
			
 
				+  }
			
 
				+  .container{
			
 
				+    position: relative;
			
 
				+  }
			
 
				+
			
 
				+  .section-title {
			
 
				+    font-size: 36px;
			
 
				+    font-weight: 600;
			
 
				+    color: #333;
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 20px;
			
 
				+    line-height: 1.4;
			
 
				+  }
			
 
				+
			
 
				+  .title-indicator {
			
 
				+    width: 132px;
			
 
				+    height: auto;
			
 
				+    margin: 0 auto 60px;
			
 
				+    display: block;
			
 
				+  }
			
 
				+
			
 
				+  .advantages-grid {
			
 
				+    display: grid;
			
 
				+    grid-template-columns: repeat(3, 1fr);
			
 
				+    gap: 49px;
			
 
				+    margin: 0 auto;
			
 
				+
			
 
				+    .advantage-item {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      background: linear-gradient(0deg, #DCEBFF 0%, #C8DFFF 100%);
			
 
				+      border-radius: 16px;
			
 
				+      padding: 30px;
			
 
				+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			
 
				+      transition: all 0.3s ease;
			
 
				+      position: relative;
			
 
				+      overflow: hidden;
			
 
				+
			
 
				+      &:hover {
			
 
				+        transform: translateY(-5px);
			
 
				+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
			
 
				+      }
			
 
				+
			
 
				+      &::before {
			
 
				+        content: '';
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        right: 0;
			
 
				+        bottom: 0;
			
 
				+        background: rgba(255, 255, 255, 0.1);
			
 
				+        opacity: 0;
			
 
				+        transition: opacity 0.3s ease;
			
 
				+      }
			
 
				+
			
 
				+      &:hover::before {
			
 
				+        opacity: 1;
			
 
				+      }
			
 
				+
			
 
				+      .advantage-content {
			
 
				+        flex: 1;
			
 
				+        color: #fff;
			
 
				+        margin-right: 30px;
			
 
				+
			
 
				+        .advantage-title {
			
 
				+          font-size: 20px;
			
 
				+          font-weight: 600;
			
 
				+          margin-bottom: 16px;
			
 
				+          line-height: 1.3;
			
 
				+          color: #333;
			
 
				+        }
			
 
				+
			
 
				+        .advantage-description {
			
 
				+          color: #666;
			
 
				+          font-size: 16px;
			
 
				+          line-height: 1.6;
			
 
				+          opacity: 0.95;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .advantage-image {
			
 
				+        flex-shrink: 0;
			
 
				+
			
 
				+        img {
			
 
				+          width: 208px;
			
 
				+          height: 161px;
			
 
				+          object-fit: contain;
			
 
				+          border-radius: 8px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 指示器动画
			
 
				+@keyframes indicatorExpand {
			
 
				+  0% {
			
 
				+    width: 8px;
			
 
				+  }
			
 
				+
			
 
				+  100% {
			
 
				+    width: 24px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 响应式设计
			
 
				+@media (max-width: 768px) {
			
 
				+  .skills-section {
			
 
				+    .skills-header {
			
 
				+      padding: 40px 0 30px;
			
 
				+
			
 
				+      .section-title {
			
 
				+        font-size: 28px;
			
 
				+        margin-bottom: 30px;
			
 
				+      }
			
 
				+
			
 
				+      .platform-tabs {
			
 
				+        gap: 30px;
			
 
				+
			
 
				+        .tab-item {
			
 
				+          font-size: 16px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .skills-content {
			
 
				+      padding: 60px 0 80px;
			
 
				+
			
 
				+      .content-wrapper {
			
 
				+        .content-title {
			
 
				+          font-size: 24px;
			
 
				+        }
			
 
				+
			
 
				+        .content-subtitle {
			
 
				+          font-size: 14px;
			
 
				+          margin-bottom: 40px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .carousel-container {
			
 
				+      margin: 0 20px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .advantages-section {
			
 
				+    padding: 60px 0;
			
 
				+
			
 
				+    .section-title {
			
 
				+      font-size: 28px;
			
 
				+      margin-bottom: 15px;
			
 
				+    }
			
 
				+
			
 
				+    .title-indicator {
			
 
				+      width: 100px;
			
 
				+      margin-bottom: 40px;
			
 
				+    }
			
 
				+
			
 
				+    .advantages-grid {
			
 
				+      grid-template-columns: 1fr;
			
 
				+      gap: 20px;
			
 
				+      padding: 0 20px;
			
 
				+
			
 
				+      .advantage-item {
			
 
				+        flex-direction: column;
			
 
				+        text-align: center;
			
 
				+        padding: 30px 20px;
			
 
				+
			
 
				+        .advantage-content {
			
 
				+          margin-right: 0;
			
 
				+          margin-bottom: 20px;
			
 
				+
			
 
				+          .advantage-title {
			
 
				+            font-size: 20px;
			
 
				+            margin-bottom: 12px;
			
 
				+          }
			
 
				+
			
 
				+          .advantage-description {
			
 
				+            font-size: 13px;
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .advantage-image {
			
 
				+          img {
			
 
				+            width: 160px;
			
 
				+            height: 124px;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,42 @@
 
				+import { createRouter, createWebHistory } from 'vue-router'
			
 
				+
			
 
				+// 其他路由将在对应页面组件创建后添加
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'Home',
			
 
				+    component: () => import('@/pages/home/Index.vue'),
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/products',
			
 
				+    name: 'Products',
			
 
				+    component: () => import('@/pages/products/Index.vue'),
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/cases',
			
 
				+    name: 'Cases',
			
 
				+    component: () => import('@/pages/cases/Index.vue'),
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/casesdetails',
			
 
				+    name: 'Casesdetails',
			
 
				+    component: () => import('@/pages/casesdetails/Index.vue'),
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/about',
			
 
				+    name: 'About',
			
 
				+    component: () => import('@/pages/about/Index.vue'),
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/contact',
			
 
				+    name: 'Contact',
			
 
				+    component: () => import('@/pages/contact/Index.vue'),
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHistory(),
			
 
				+  routes,
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -0,0 +1,5 @@
 
				+import { createPinia } from 'pinia'
			
 
				+
			
 
				+const store = createPinia()
			
 
				+
			
 
				+export default store
			
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -0,0 +1,119 @@
 
				+/* 全局样式重置 */
			
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+html,
			
 
				+body {
			
 
				+  height: 100%;
			
 
				+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  color: #333333;
			
 
				+  line-height: 1;
			
 
				+}
			
 
				+
			
 
				+#app {
			
 
				+  min-height: 100vh;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  text-decoration: none;
			
 
				+  color: inherit;
			
 
				+}
			
 
				+
			
 
				+ul,
			
 
				+ol {
			
 
				+  list-style: none;
			
 
				+}
			
 
				+
			
 
				+/* 容器样式 */
			
 
				+.container {
			
 
				+  position: relative;
			
 
				+  max-width: 1600px;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+/* 通用按钮样式 */
			
 
				+.btn {
			
 
				+  display: inline-block;
			
 
				+  padding: 12px 24px;
			
 
				+  border: none;
			
 
				+  border-radius: 8px;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 500;
			
 
				+  text-decoration: none;
			
 
				+  text-align: center;
			
 
				+  cursor: pointer;
			
 
				+  transition: all 0.3s ease;
			
 
				+}
			
 
				+
			
 
				+.btn-primary {
			
 
				+  background: linear-gradient(135deg, #1890ff, #00b4d8);
			
 
				+  color: white;
			
 
				+}
			
 
				+
			
 
				+.btn-primary:hover {
			
 
				+  background: linear-gradient(135deg, #0077b6, #0096c7);
			
 
				+  transform: translateY(-2px);
			
 
				+}
			
 
				+
			
 
				+.btn-outline {
			
 
				+  background: transparent;
			
 
				+  color: #1890ff;
			
 
				+  border: 2px solid #1890ff;
			
 
				+}
			
 
				+
			
 
				+.btn-outline:hover {
			
 
				+  background: #1890ff;
			
 
				+  color: white;
			
 
				+}
			
 
				+
			
 
				+/* 标题样式 */
			
 
				+.section-title {
			
 
				+  font-size: 32px;
			
 
				+  font-weight: 600;
			
 
				+  color: #333333;
			
 
				+  text-align: center;
			
 
				+  margin-bottom: 16px;
			
 
				+}
			
 
				+
			
 
				+.section-subtitle {
			
 
				+  font-size: 16px;
			
 
				+  color: #666666;
			
 
				+  text-align: center;
			
 
				+  margin-bottom: 48px;
			
 
				+}
			
 
				+
			
 
				+/* 卡片样式 */
			
 
				+.card {
			
 
				+  background: white;
			
 
				+  border-radius: 12px;
			
 
				+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
			
 
				+  transition: all 0.3s ease;
			
 
				+}
			
 
				+
			
 
				+.card:hover {
			
 
				+  transform: translateY(-4px);
			
 
				+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
			
 
				+}
			
 
				+
			
 
				+/* 响应式 */
			
 
				+@media (max-width: 768px) {
			
 
				+  .container {
			
 
				+    padding: 0 16px;
			
 
				+  }
			
 
				+
			
 
				+  .section-title {
			
 
				+    font-size: 24px;
			
 
				+  }
			
 
				+
			
 
				+  .btn {
			
 
				+    padding: 10px 20px;
			
 
				+    font-size: 13px;
			
 
				+  }
			
 
				+}
			
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -0,0 +1,40 @@
 
				+// 全局SCSS变量
			
 
				+$primary-color: #0054FF;
			
 
				+$secondary-color: #00b4d8;
			
 
				+$accent-color: #0077b6;
			
 
				+$text-primary: #333333;
			
 
				+$text-secondary: #666666;
			
 
				+$text-light: #999999;
			
 
				+$bg-light: #f8f9fa;
			
 
				+$bg-section: #ffffff;
			
 
				+$border-color: #e8e8e8;
			
 
				+
			
 
				+// 字体大小
			
 
				+$font-size-small: 12px;
			
 
				+$font-size-base: 14px;
			
 
				+$font-size-medium: 16px;
			
 
				+$font-size-large: 18px;
			
 
				+$font-size-xl: 24px;
			
 
				+$font-size-xxl: 32px;
			
 
				+
			
 
				+// 边距
			
 
				+$spacing-xs: 4px;
			
 
				+$spacing-small: 8px;
			
 
				+$spacing-base: 16px;
			
 
				+$spacing-medium: 24px;
			
 
				+$spacing-large: 32px;
			
 
				+$spacing-xl: 48px;
			
 
				+$spacing-xxl: 64px;
			
 
				+
			
 
				+// 容器宽度
			
 
				+$container-width: 1600px;
			
 
				+$container-padding: 20px;
			
 
				+
			
 
				+// 阴影
			
 
				+$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
			
 
				+$shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
			
 
				+
			
 
				+// 圆角
			
 
				+$border-radius-small: 4px;
			
 
				+$border-radius-base: 8px;
			
 
				+$border-radius-large: 12px;
			
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -0,0 +1,73 @@
 
				+import axios from 'axios'
			
 
				+
			
 
				+// 创建axios实例
			
 
				+const service = axios.create({
			
 
				+  baseURL: import.meta.env.VITE_APP_BASE_URL, // 基础URL
			
 
				+  timeout: 15000 // 请求超时时间
			
 
				+})
			
 
				+
			
 
				+// 请求拦截器
			
 
				+service.interceptors.request.use(
			
 
				+  config => {
			
 
				+    // 在发送请求之前做些什么
			
 
				+    const token = localStorage.getItem('access_token')
			
 
				+    if (token) {
			
 
				+      // 让每个请求携带自定义token
			
 
				+      config.headers['Authorization'] = 'Bearer ' + token
			
 
				+    }
			
 
				+    return config
			
 
				+  },
			
 
				+  error => {
			
 
				+    // 对请求错误做些什么
			
 
				+    console.log(error)
			
 
				+    return Promise.reject(error)
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+// 响应拦截器
			
 
				+service.interceptors.response.use(
			
 
				+  response => {
			
 
				+    // 对响应数据做点什么
			
 
				+    const res = response.data
			
 
				+    
			
 
				+    // 如果自定义代码不是200，则判断为错误
			
 
				+    if (res.code === 200) {
			
 
				+      return res
			
 
				+    } else {
			
 
				+      // 统一处理错误
			
 
				+      console.log('请求错误:', res.message)
			
 
				+      return Promise.reject(new Error(res.message || 'Error'))
			
 
				+    }
			
 
				+  },
			
 
				+  error => {
			
 
				+    // 对响应错误做点什么
			
 
				+    console.log('err' + error)
			
 
				+    if (error.response && error.response.status) {
			
 
				+      switch (error.response.status) {
			
 
				+        // 401: 未登录
			
 
				+        case 401:
			
 
				+          console.log('未登录或登录过期')
			
 
				+          // 清除本地token并跳转至登录页
			
 
				+          localStorage.removeItem('access_token')
			
 
				+          // window.location.href = '/login'
			
 
				+          break
			
 
				+        // 403: token过期
			
 
				+        case 403:
			
 
				+          console.log('登录过期或无权限')
			
 
				+          // 清除token并跳转至登录页
			
 
				+          localStorage.removeItem('access_token')
			
 
				+          // window.location.href = '/login'
			
 
				+          break
			
 
				+        // 500: 服务器错误
			
 
				+        case 500:
			
 
				+          console.log('服务器内部错误')
			
 
				+          break
			
 
				+        default:
			
 
				+          console.log('其他错误')
			
 
				+      }
			
 
				+      return Promise.reject(error)
			
 
				+    }
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+export default service
			
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,61 @@
 
				+/*******
			
 
				+ * @Author: gcz saadmin@126.com
			
 
				+ * @Date: 2025-09-01 11:38:45
			
 
				+ * @LastEditors: gcz saadmin@126.com
			
 
				+ * @LastEditTime: 2025-09-01 13:58:23
			
 
				+ * @FilePath: \claudetest\vite.config.js
			
 
				+ * @Description: 
			
 
				+ * @
			
 
				+ */
			
 
				+import { defineConfig } from 'vite'
			
 
				+import { resolve } from 'path'
			
 
				+import vue from '@vitejs/plugin-vue'
			
 
				+
			
 
				+// https://vitejs.dev/config/
			
 
				+export default defineConfig({
			
 
				+  plugins: [vue()],
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      '@': resolve(__dirname, 'src'),
			
 
				+      '@assets': resolve(__dirname, 'src/assets'),
			
 
				+      '@components': resolve(__dirname, 'src/components'),
			
 
				+      '@views': resolve(__dirname, 'src/views'),
			
 
				+      '@pages': resolve(__dirname, 'src/pages'),
			
 
				+      '@router': resolve(__dirname, 'src/router'),
			
 
				+      '@stores': resolve(__dirname, 'src/stores'),
			
 
				+      '@utils': resolve(__dirname, 'src/utils'),
			
 
				+      '@api': resolve(__dirname, 'src/api'),
			
 
				+      '@styles': resolve(__dirname, 'src/styles')
			
 
				+    }
			
 
				+  },
			
 
				+  css: {
			
 
				+    preprocessorOptions: {
			
 
				+      scss: {
			
 
				+        additionalData: `@use "@/styles/variables.scss" as *;`
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  server: {
			
 
				+    host: '0.0.0.0',
			
 
				+    // port: 3000,
			
 
				+    open: true,
			
 
				+    proxy: {
			
 
				+      '/api': {
			
 
				+        target: 'http://localhost:8080',
			
 
				+        changeOrigin: true,
			
 
				+        rewrite: (path) => path.replace(/^\/api/, '')
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  build: {
			
 
				+    outDir: 'dist',
			
 
				+    assetsDir: 'static',
			
 
				+    rollupOptions: {
			
 
				+      output: {
			
 
				+        chunkFileNames: 'static/js/[name]-[hash].js',
			
 
				+        entryFileNames: 'static/js/[name]-[hash].js',
			
 
				+        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+})