feat: 初版

src/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { computed, nextTick, watch } from 'vue';
+
+</script>
+
+<style lang="scss">
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+</style>

src/api/api.ts

@@ -0,0 +1,37 @@
+import type { Model, Partner, Solution, SystemInfo } from "@/type";
+import http from "./index";
+
+export default class Website {
+  // 获取系统基本信息
+  async getSystemInfo (): Promise<{ data: SystemInfo }> {
+    return http({
+      url: '/out/web/getInfo',
+      method: 'get'
+    })
+  }
+  // 获取model列表
+  async getModels (): Promise<{ rows: Model[] }> {
+    return http({
+      url: '/out/web/listModel',
+      method: 'get'
+    })
+  }
+  // 获取model列表
+  async getSolutions (): Promise<{ rows: Solution[] }> {
+    return http({
+      url: '/out/web/listColumn',
+      method: 'get'
+    })
+  }
+  // 获取Partner列表
+  async getPartners (): Promise<{ rows: Partner[] }> {
+    return http({
+      url: '/out/web/listPartners',
+      method: 'get',
+      params: {
+        pageNum: 1,
+        pageSize: 100
+      }
+    })
+  }
+}

src/api/index.ts

@@ -0,0 +1,24 @@
+import axios from "axios"
+
+
+// 创建实例
+const http = axios.create({
+  baseURL: window.APP_BASEURL
+})
+
+// 请求拦截器
+http.interceptors.request.use((config) => {
+  return config
+}, (error) => {
+  return Promise.reject(error)
+})
+// 响应拦截器
+http.interceptors.response.use((response) => {
+  if (response.data.code === 200) {
+    return response.data
+  }
+}, (error) => {
+
+})
+
+export default http

src/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+// import 'reset.css'
+import './theme.scss'
+
+import App from './App.vue'
+import router from './router'
+import './styles.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,22 @@
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../views/index.vue')
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/'
+    }
+  ]
+})
+
+router.beforeEach((to, from ,next) => {
+  next()
+})
+
+export default router

src/stores/system.ts

@@ -0,0 +1,77 @@
+import type { Model, Partner, Solution, SystemInfo } from "@/type";
+import { defineStore } from "pinia";
+import { ref, type Ref } from "vue";
+
+export const useSystemStore = defineStore('', () => {
+  // 系统信息
+  const systemInfo: Ref<SystemInfo> = ref({
+    id: 0,
+    logo: '',
+    address: '',
+    email: '',
+    phonenumber: '',
+    introduction: '',
+    advantage: ''
+  })
+  // models
+  const models: Ref<Model[]> = ref([])
+  // solutions
+  const solutions: Ref<Solution[]> = ref([])
+  // partners
+  const partners: Ref<Partner[]> = ref([])
+  const hash = ref('')
+  // 菜单栏是否固定
+  const menuFixed = ref(false)
+  // 解决方案激活项
+  const solutionActive: Ref<Solution | null> = ref(null)
+  // 更新系统信息
+  function updateSystemInfo (payload: SystemInfo) {
+    systemInfo.value = payload
+  }
+  // 更新models
+  function updateModels (payload: Model[]) {
+    models.value = payload
+  }
+  // 更新solutions
+  function updateSolutions (payload: Solution[]) {
+    solutions.value = payload
+  }
+  // 更新partners
+  function updatePartners (payload: Partner[]) {
+    partners.value = payload
+  }
+  function updateHash (payload: string) {
+    hash.value = payload
+  }
+  function updateMenuFixed (payload: boolean) {
+    menuFixed.value = payload
+  }
+  function updateSolutionActive (payload: string | Solution) {
+    if (typeof payload === 'string') {
+      const flag = solutions.value.find(el => el.title === payload)
+      if (flag) {
+        solutionActive.value = flag
+      } else {
+        solutionActive.value = solutions.value.length ? solutions.value[0] : null
+      }
+    } else {
+      solutionActive.value = payload
+    }
+  }
+  return {
+    systemInfo,
+    updateSystemInfo,
+    models,
+    updateModels,
+    solutions,
+    updateSolutions,
+    partners,
+    updatePartners,
+    hash,
+    updateHash,
+    menuFixed,
+    updateMenuFixed,
+    solutionActive,
+    updateSolutionActive
+  }
+})

src/styles.css

@@ -0,0 +1,32 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .content-auto {
+        content-visibility: auto;
+    }
+    .text-glow {
+        text-shadow: 0 0 10px rgba(0, 163, 255, 0.5);
+    }
+    .bg-grid {
+        background-image: linear-gradient(rgba(15, 82, 186, 0.1) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(15, 82, 186, 0.1) 1px, transparent 1px);
+        background-size: 20px 20px;
+    }
+    .neon-border {
+        box-shadow: 0 0 5px theme('colors.secondary'), 0 0 10px theme('colors.secondary/50');
+    }
+    .section-padding {
+        @apply py-16 md:py-24;
+    }
+    .card-hover {
+        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:neon-border;
+    }
+    .btn-primary {
+        @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-all duration-300 shadow-lg hover:shadow-primary/30 hover:shadow-xl;
+    }
+    .btn-secondary {
+        @apply bg-transparent text-white border border-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition-all duration-300;
+    }
+}

src/theme.scss

@@ -0,0 +1,9 @@
+:root {
+  --color-black: #000;
+  --color-gray: #555;
+  --color-gray-8: #888888;
+  --color-white: #fff;
+  --color-blue: #238FF0;
+  --bg-gray: #F3F6F8;
+  --bg-blue: #001C63B2;
+}

src/type.ts

@@ -0,0 +1,49 @@
+export interface SystemInfo {
+  id: number
+  logo: string // logo
+  address: string // 联系地址
+  email: string // 邮箱
+  phonenumber: string // 手机号
+  introduction: string // 介绍
+  advantage: string // 优势
+  sloganUrl?: string // 宣传图片
+  qrCode?: string // 二维码
+  backgroundUrl?: string // 背景图
+  remark?: string // 备注
+  updateTime?: string // 更新时间
+  createTime?: string // 创建时间
+  updateBy?: string // 更新人
+  createBy?: string // 创建人
+}
+
+export interface Model {
+  id: number // id
+  title: string // 标题
+  content: string // 内容
+  backgroundUrl: string // 背景图片
+}
+
+export interface Solution {
+  id: number // id
+  title: string // 标题
+  subtitle: string // 二级标题
+  content: string // 内容
+  icon: string // 图标
+  headImgUrl: string // 封面
+  caseInfoList: Array<{ // 案例列表
+    id: number // id
+    name: string // 名称
+    content: string // 内容
+  }>
+  moduleInfoList: Array<{ // 模块列表
+    id: number // id
+    name: string // 名称
+    content: string // 内容
+  }>
+}
+
+export interface Partner {
+  id: number // id
+  name: string // 名称
+  logo: string // logo
+}

src/types.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  APP_BASEURL: string
+}

src/views/index.vue

@@ -0,0 +1,874 @@
+<template>
+  <div class="font-roboto text-light bg-dark overflow-x-hidden">
+    <!-- 导航栏 -->
+    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-dark/80 backdrop-blur-md">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16 md:h-20">
+          <!-- Logo -->
+          <a href="#" class="flex items-center space-x-3">
+            <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center neon-border">
+              <i class="fa fa-microchip text-white text-xl"></i>
+            </div>
+            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">四川明君科技</span>
+          </a>
+          
+          <!-- 桌面导航 -->
+          <nav class="hidden md:flex space-x-8">
+            <a href="#home" class="text-light hover:text-secondary font-medium transition-colors">首页</a>
+            <a href="#hardware" class="text-light hover:text-secondary font-medium transition-colors">硬件产品</a>
+            <a href="#software" class="text-light hover:text-secondary font-medium transition-colors">软件服务</a>
+            <a href="#cases" class="text-light hover:text-secondary font-medium transition-colors">成功案例</a>
+            <a href="#about" class="text-light hover:text-secondary font-medium transition-colors">关于我们</a>
+            <a href="#contact" class="text-light hover:text-secondary font-medium transition-colors">联系我们</a>
+          </nav>
+          
+          <!-- 联系按钮 -->
+          <div class="hidden md:block">
+            <a href="#contact" class="btn-primary">咨询方案</a>
+          </div>
+          
+          <!-- 移动端菜单按钮 -->
+          <button id="menu-toggle" class="md:hidden text-light hover:text-secondary">
+            <i class="fa fa-bars text-2xl"></i>
+          </button>
+        </div>
+      </div>
+      
+      <!-- 移动端导航菜单 -->
+      <div id="mobile-menu" class="md:hidden hidden bg-dark/95 backdrop-blur-md border-t border-primary/20">
+        <div class="container mx-auto px-4 py-3 space-y-3">
+          <a href="#home" class="block py-2 text-light hover:text-secondary font-medium">首页</a>
+          <a href="#hardware" class="block py-2 text-light hover:text-secondary font-medium">硬件产品</a>
+          <a href="#software" class="block py-2 text-light hover:text-secondary font-medium">软件服务</a>
+          <a href="#cases" class="block py-2 text-light hover:text-secondary font-medium">成功案例</a>
+          <a href="#about" class="block py-2 text-light hover:text-secondary font-medium">关于我们</a>
+          <a href="#contact" class="block py-2 text-light hover:text-secondary font-medium">联系我们</a>
+          <a href="#contact" class="block w-full text-center btn-primary mt-4">咨询方案</a>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <!-- 英雄区域 -->
+      <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 relative bg-grid overflow-hidden">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div class="space-y-6 max-w-xl">
+              <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-2">
+                智慧科技解决方案提供商
+              </div>
+              <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-glow">
+                创新科技<br><span class="bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">引领未来</span>
+              </h1>
+              <p class="text-gray-300 text-lg md:text-xl">
+                四川明君科技专注于智能硬件销售与定制化软件服务，为智慧园区、应急管理、乡村治理、智慧教育等领域提供一体化解决方案。
+              </p>
+              <div class="flex flex-col sm:flex-row gap-4 pt-4">
+                <a href="#contact" class="btn-primary text-center flex items-center justify-center">
+                  <i class="fa fa-rocket mr-2"></i> 立即咨询
+                </a>
+                <a href="#cases" class="btn-secondary text-center flex items-center justify-center">
+                  <i class="fa fa-play-circle mr-2"></i> 案例展示
+                </a>
+              </div>
+              
+              <!-- 技术优势 -->
+              <div class="pt-8 grid grid-cols-2 gap-4">
+                <div class="flex items-center">
+                  <div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
+                    <i class="fa fa-check text-accent"></i>
+                  </div>
+                  <span class="text-sm">10年+行业经验</span>
+                </div>
+                <div class="flex items-center">
+                  <div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
+                    <i class="fa fa-check text-accent"></i>
+                  </div>
+                  <span class="text-sm">定制化解决方案</span>
+                </div>
+                <div class="flex items-center">
+                  <div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
+                    <i class="fa fa-check text-accent"></i>
+                  </div>
+                  <span class="text-sm">专业技术团队</span>
+                </div>
+                <div class="flex items-center">
+                  <div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
+                    <i class="fa fa-check text-accent"></i>
+                  </div>
+                  <span class="text-sm">完善售后服务</span>
+                </div>
+              </div>
+            </div>
+            
+            <div class="relative">
+              <div class="relative z-10 rounded-2xl overflow-hidden transform md:rotate-1 transition-transform hover:rotate-0 duration-500 neon-border">
+                <img src="https://picsum.photos/id/1/800/600" alt="智能科技解决方案展示" class="w-full h-auto">
+                <!-- 悬浮数据指标 -->
+                <div class="absolute top-4 right-4 bg-dark/80 backdrop-blur-sm px-3 py-2 rounded-lg border border-secondary/30">
+                  <div class="text-accent font-mono text-lg">99.9% 可靠性</div>
+                  <div class="text-xs text-gray-400">系统稳定性</div>
+                </div>
+              </div>
+              <!-- 装饰元素 -->
+              <div class="absolute -bottom-6 -left-6 w-40 h-40 bg-secondary/20 rounded-full blur-3xl"></div>
+              <div class="absolute -top-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-3xl"></div>
+              <!-- 几何装饰 -->
+              <div class="absolute top-1/4 -left-10 w-16 h-16 border border-accent/30 rotate-45"></div>
+              <div class="absolute bottom-1/3 -right-8 w-12 h-12 rounded-full border border-secondary/50"></div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 波浪分隔线 -->
+        <div class="absolute bottom-0 left-0 right-0">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
+            <path fill="#0A1128" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
+          </svg>
+        </div>
+      </section>
+      
+      <!-- 公司简介 -->
+      <section id="about" class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="text-center max-w-3xl mx-auto mb-16">
+            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
+              关于我们
+            </div>
+            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">四川明君科技有限公司</h2>
+            <p class="text-gray-400 text-lg">我们致力于通过科技创新，为各行业提供专业的智能硬件与软件解决方案，推动数字化转型</p>
+          </div>
+          
+          <div class="grid md:grid-cols-3 gap-8">
+            <div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
+              <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
+                <i class="fa fa-bullseye text-secondary text-2xl"></i>
+              </div>
+              <h3 class="text-xl font-semibold mb-3 text-secondary">我们的使命</h3>
+              <p class="text-gray-400">
+                以科技赋能产业升级，通过持续创新和优质服务，为客户创造最大价值，助力社会智能化发展。
+              </p>
+            </div>
+            
+            <div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
+              <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
+                <i class="fa fa-eye text-secondary text-2xl"></i>
+              </div>
+              <h3 class="text-xl font-semibold mb-3 text-secondary">我们的愿景</h3>
+              <p class="text-gray-400">
+                成为西南地区领先的智能科技解决方案提供商，打造行业标杆，引领产业创新发展方向。
+              </p>
+            </div>
+            
+            <div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
+              <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
+                <i class="fa fa-balance-scale text-secondary text-2xl"></i>
+              </div>
+              <h3 class="text-xl font-semibold mb-3 text-secondary">核心价值观</h3>
+              <p class="text-gray-400">
+                创新驱动、客户至上、诚信正直、合作共赢，以专业技术和卓越服务赢得客户信赖。
+              </p>
+            </div>
+          </div>
+          
+          <!-- 数据统计 -->
+          <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
+              <div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="12">{{number1}}</div>
+              <p class="text-gray-400">年行业经验</p>
+            </div>
+            <div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
+              <div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="600">0</div>
+              <p class="text-gray-400">成功案例</p>
+            </div>
+            <div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
+              <div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="350">0</div>
+              <p class="text-gray-400">合作伙伴</p>
+            </div>
+            <div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
+              <div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="80">0</div>
+              <p class="text-gray-400">技术专家</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <!-- 硬件产品 -->
+      <section id="hardware" class="section-padding bg-dark relative bg-grid">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="text-center max-w-3xl mx-auto mb-16">
+            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
+              硬件产品
+            </div>
+            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">智能硬件解决方案</h2>
+            <p class="text-gray-400 text-lg">我们提供高品质的智能硬件产品，为各行业智能化建设提供坚实的硬件基础</p>
+          </div>
+          
+          <div class="grid md:grid-cols-3 gap-8">
+            <!-- 摄像头 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/96/600/400" alt="高清智能摄像头" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                <div class="absolute top-4 left-4 bg-secondary text-dark px-3 py-1 rounded-full text-sm font-medium">
+                  热销产品
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-3 text-secondary">高清智能摄像头</h3>
+                <p class="text-gray-400 mb-4">
+                  4K超高清分辨率，AI智能分析，支持人脸识别、行为分析，适用于安防监控、智慧园区等场景。
+                </p>
+                <ul class="space-y-2 mb-6">
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 夜视距离可达50米
+                  </li>
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 支持IP66防水等级
+                  </li>
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 内置AI智能算法
+                  </li>
+                </ul>
+                <a href="#contact" class="block text-center btn-primary">了解详情</a>
+              </div>
+            </div>
+            
+            <!-- 应急广播 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/119/600/400" alt="智能应急广播系统" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                <div class="absolute top-4 left-4 bg-accent text-dark px-3 py-1 rounded-full text-sm font-medium">
+                  新品上市
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-3 text-secondary">智能应急广播系统</h3>
+                <p class="text-gray-400 mb-4">
+                  支持多区域控制，IP网络传输，远程管理，适用于校园、社区、景区等场所的应急通知和日常广播。
+                </p>
+                <ul class="space-y-2 mb-6">
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 应急响应时间<1秒
+                  </li>
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 支持多种触发方式
+                  </li>
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 覆盖半径可达1公里
+                  </li>
+                </ul>
+                <a href="#contact" class="block text-center btn-primary">了解详情</a>
+              </div>
+            </div>
+            
+            <!-- 服务器 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/180/600/400" alt="高性能服务器" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                <div class="absolute top-4 left-4 bg-green-500 text-dark px-3 py-1 rounded-full text-sm font-medium">
+                  稳定可靠
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-3 text-secondary">高性能服务器</h3>
+                <p class="text-gray-400 mb-4">
+                  企业级高性能服务器，支持虚拟化技术，高可靠性，适用于数据中心、云计算平台、大型企业应用。
+                </p>
+                <ul class="space-y-2 mb-6">
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 支持24小时不间断运行
+                  </li>
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 冗余电源设计
+                  </li>
+                  <li class="flex items-center text-sm text-gray-400">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> 可扩展性强
+                  </li>
+                </ul>
+                <a href="#contact" class="block text-center btn-primary">了解详情</a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-12">
+            <a href="#contact" class="btn-secondary inline-flex items-center">
+              查看全部产品 <i class="fa fa-arrow-right ml-2"></i>
+            </a>
+          </div>
+        </div>
+      </section>
+      
+      <!-- 软件服务 -->
+      <section id="software" class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="text-center max-w-3xl mx-auto mb-16">
+            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
+              软件服务
+            </div>
+            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">定制化软件解决方案</h2>
+            <p class="text-gray-400 text-lg">根据客户需求提供定制化软件开发服务，为不同行业打造专属的智能解决方案</p>
+          </div>
+          
+          <div class="grid md:grid-cols-2 gap-8 lg:gap-12">
+            <!-- 智慧园区 -->
+            <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
+              <div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
+                <i class="fa fa-building-o text-secondary text-3xl"></i>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold mb-3 text-secondary">智慧园区解决方案</h3>
+                <p class="text-gray-400 mb-4">
+                  整合安防监控、智能停车、能源管理、人员管理等系统，打造安全、高效、节能的智慧园区管理平台。
+                </p>
+                <a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
+                  了解更多 <i class="fa fa-angle-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 应急管理 -->
+            <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
+              <div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
+                <i class="fa fa-ambulance text-secondary text-3xl"></i>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold mb-3 text-secondary">应急管理系统</h3>
+                <p class="text-gray-400 mb-4">
+                  实现突发事件的快速响应、指挥调度、资源调配和事后评估，提升应急处理能力和效率。
+                </p>
+                <a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
+                  了解更多 <i class="fa fa-angle-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 乡村治理 -->
+            <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
+              <div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
+                <i class="fa fa-home text-secondary text-3xl"></i>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold mb-3 text-secondary">乡村治理平台</h3>
+                <p class="text-gray-400 mb-4">
+                  整合村务管理、平安乡村、便民服务等功能，提升乡村治理数字化水平，助力乡村振兴。
+                </p>
+                <a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
+                  了解更多 <i class="fa fa-angle-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 智慧教育 -->
+            <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
+              <div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
+                <i class="fa fa-graduation-cap text-secondary text-3xl"></i>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold mb-3 text-secondary">智慧教育解决方案</h3>
+                <p class="text-gray-400 mb-4">
+                  构建智慧教学、校园管理、家校互动一体化平台，提升教学质量和管理效率，打造智慧校园。
+                </p>
+                <a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
+                  了解更多 <i class="fa fa-angle-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 服务流程 -->
+          <div class="mt-20">
+            <h3 class="text-2xl font-bold text-center mb-12 text-secondary">我们的服务流程</h3>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
+              <!-- 连接线 - 仅在中等屏幕以上显示 -->
+              <div class="hidden md:block absolute top-1/4 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary -translate-y-1/2 z-0"></div>
+              
+              <div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
+                <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
+                  <span class="font-bold">1</span>
+                </div>
+                <h4 class="font-semibold mb-2 text-secondary">需求分析</h4>
+                <p class="text-gray-400 text-sm">深入了解客户需求，进行详细分析和评估</p>
+              </div>
+              
+              <div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
+                <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
+                  <span class="font-bold">2</span>
+                </div>
+                <h4 class="font-semibold mb-2 text-secondary">方案设计</h4>
+                <p class="text-gray-400 text-sm">根据需求制定个性化解决方案和实施计划</p>
+              </div>
+              
+              <div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
+                <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
+                  <span class="font-bold">3</span>
+                </div>
+                <h4 class="font-semibold mb-2 text-secondary">开发实施</h4>
+                <p class="text-gray-400 text-sm">专业团队进行开发、部署和系统集成</p>
+              </div>
+              
+              <div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
+                <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
+                  <span class="font-bold">4</span>
+                </div>
+                <h4 class="font-semibold mb-2 text-secondary">运维支持</h4>
+                <p class="text-gray-400 text-sm">提供持续的技术支持和系统维护服务</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <!-- 成功案例 -->
+      <section id="cases" class="section-padding bg-dark relative bg-grid">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="text-center max-w-3xl mx-auto mb-16">
+            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
+              成功案例
+            </div>
+            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户成功案例展示</h2>
+            <p class="text-gray-400 text-lg">我们为各行业客户提供了优质的产品和服务，以下是部分成功案例</p>
+          </div>
+          
+          <!-- 案例筛选 -->
+          <div class="flex flex-wrap justify-center gap-4 mb-10">
+            <button class="case-filter active px-5 py-2 rounded-full bg-primary text-white font-medium">全部案例</button>
+            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧园区</button>
+            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">应急管理</button>
+            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">乡村治理</button>
+            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧教育</button>
+          </div>
+          
+          <!-- 案例展示 -->
+          <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- 案例1 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/42/600/400" alt="智慧园区案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">智慧园区</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某科技园区智能管理系统</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  为占地500亩的科技园区提供了全套智能管理解决方案，包括智能安防、停车管理、能源监控等系统。
+                </p>
+                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
+                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 案例2 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/26/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某市应急指挥系统</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  为某市应急管理局开发了应急指挥系统，实现了突发事件的快速响应和高效指挥调度。
+                </p>
+                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
+                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 案例3 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/164/600/400" alt="乡村治理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4 bg-green-500 text-dark text-sm px-3 py-1 rounded-full">乡村治理</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某县乡村治理平台</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  为某县200多个行政村建设了乡村治理平台，实现了村务公开、平安乡村、便民服务等功能。
+                </p>
+                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
+                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 案例4 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/20/600/400" alt="智慧教育案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full">智慧教育</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某大学智慧校园建设</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  为某大学建设了智慧校园平台，整合了教学管理、校园安防、后勤服务等系统，提升了管理效率。
+                </p>
+                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
+                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 案例5 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/48/600/400" alt="智慧园区案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">智慧园区</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某工业园区智能安防系统</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  为大型工业园区部署了智能安防系统，包括高清监控、周界防范、智能巡检等功能模块。
+                </p>
+                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
+                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- 案例6 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
+              <div class="h-56 overflow-hidden relative">
+                <img src="https://picsum.photos/id/91/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某景区应急广播系统</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  为5A级景区部署了智能应急广播系统，覆盖面积达10平方公里，支持分区控制和应急播报。
+                </p>
+                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
+                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="text-center mt-12">
+            <a href="#contact" class="btn-secondary inline-flex items-center">
+              查看更多案例 <i class="fa fa-arrow-right ml-2"></i>
+            </a>
+          </div>
+        </div>
+      </section>
+      
+      <!-- 客户评价 -->
+      <section class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="text-center max-w-3xl mx-auto mb-16">
+            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
+              客户评价
+            </div>
+            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户对我们的评价</h2>
+            <p class="text-gray-400 text-lg">听听我们的客户怎么说，他们的满意是我们前进的动力</p>
+          </div>
+          
+          <div class="grid md:grid-cols-3 gap-8">
+            <!-- 评价1 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
+              <div class="flex items-center mb-6">
+                <img src="https://picsum.photos/id/64/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
+                <div>
+                  <h4 class="font-semibold text-secondary">张经理</h4>
+                  <p class="text-gray-400 text-sm">某科技园区</p>
+                </div>
+              </div>
+              <div class="text-yellow-400 mb-4">
+                <i class="fa fa-star mgr"></i>
+                <i class="fa fa-star mgr"></i>
+                <i class="fa fa-star mgr"></i>
+                <i class="fa fa-star mgr"></i>
+                <i class="fa fa-star mgr"></i>
+              </div>
+              <p class="text-gray-400 italic">
+                "明君科技为我们园区提供的智能管理系统非常出色，不仅提升了管理效率，也为入驻企业提供了更好的服务体验。他们的技术团队专业且负责，值得信赖。"
+              </p>
+            </div>
+            
+            <!-- 评价2 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
+              <div class="flex items-center mb-6">
+                <img src="https://picsum.photos/id/65/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
+                <div>
+                  <h4 class="font-semibold text-secondary">李局长</h4>
+                  <p class="text-gray-400 text-sm">某应急管理局</p>
+                </div>
+              </div>
+              <div class="text-yellow-400 mb-4">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star-half-o"></i>
+              </div>
+              <p class="text-gray-400 italic">
+                "应急指挥系统在几次突发事件中发挥了关键作用，反应迅速，调度高效。明君科技的技术支持也非常及时，解决问题能力强，是可靠的合作伙伴。"
+              </p>
+            </div>
+            
+            <!-- 评价3 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
+              <div class="flex items-center mb-6">
+                <img src="https://picsum.photos/id/91/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
+                <div>
+                  <h4 class="font-semibold text-secondary">王校长</h4>
+                  <p class="text-gray-400 text-sm">某大学</p>
+                </div>
+              </div>
+              <div class="text-yellow-400 mb-4">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+              </div>
+              <p class="text-gray-400 italic">
+                "智慧校园平台极大地提升了我们的管理效率和教学质量，学生和老师的反馈都非常好。明君科技的定制化能力很强，能够根据我们的需求提供个性化解决方案。"
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <!-- 咨询联系 -->
+      <section id="contact" class="section-padding bg-dark relative bg-grid">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div class="text-center max-w-3xl mx-auto mb-16">
+            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
+              联系我们
+            </div>
+            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">咨询解决方案</h2>
+            <p class="text-gray-400 text-lg">填写下方表单或通过以下方式联系我们，我们将尽快为您提供专业的解决方案</p>
+          </div>
+          
+          <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div class="space-y-8">
+              <div>
+                <h3 class="text-2xl font-semibold mb-6 text-secondary">联系方式</h3>
+                <div class="space-y-6">
+                  <div class="flex items-start">
+                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
+                      <i class="fa fa-map-marker text-secondary text-xl"></i>
+                    </div>
+                    <div>
+                      <h4 class="font-medium mb-1">公司地址</h4>
+                      <p class="text-gray-400">四川省成都市高新区天府大道中段1388号</p>
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-start">
+                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
+                      <i class="fa fa-phone text-secondary text-xl"></i>
+                    </div>
+                    <div>
+                      <h4 class="font-medium mb-1">联系电话</h4>
+                      <p class="text-gray-400">028-8888-7777</p>
+                      <p class="text-gray-400">138-8888-7777</p>
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-start">
+                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
+                      <i class="fa fa-envelope text-secondary text-xl"></i>
+                    </div>
+                    <div>
+                      <h4 class="font-medium mb-1">电子邮箱</h4>
+                      <p class="text-gray-400">info@mingjuntech.com</p>
+                      <p class="text-gray-400">service@mingjuntech.com</p>
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-start">
+                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
+                      <i class="fa fa-clock-o text-secondary text-xl"></i>
+                    </div>
+                    <div>
+                      <h4 class="font-medium mb-1">工作时间</h4>
+                      <p class="text-gray-400">周一至周五: 9:00 - 18:00</p>
+                      <p class="text-gray-400">周六: 9:00 - 12:00</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div>
+                <h3 class="text-xl font-semibold mb-4 text-secondary">关注我们</h3>
+                <div class="flex space-x-4">
+                  <a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
+                    <i class="fa fa-weixin text-secondary text-xl"></i>
+                  </a>
+                  <a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
+                    <i class="fa fa-weibo text-secondary text-xl"></i>
+                  </a>
+                  <a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
+                    <i class="fa fa-linkedin text-secondary text-xl"></i>
+                  </a>
+                  <a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
+                    <i class="fa fa-youtube-play text-secondary text-xl"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+            
+            <div>
+              <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
+                <h3 class="text-2xl font-semibold mb-6 text-secondary">咨询表单</h3>
+                <form>
+                  <div class="grid md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                      <label for="name" class="block text-gray-400 mb-2">姓名</label>
+                      <input type="text" id="name" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的姓名">
+                    </div>
+                    <div>
+                      <label for="phone" class="block text-gray-400 mb-2">电话</label>
+                      <input type="tel" id="phone" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的电话">
+                    </div>
+                  </div>
+                  
+                  <div class="mb-6">
+                    <label for="email" class="block text-gray-400 mb-2">邮箱</label>
+                    <input type="email" id="email" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的邮箱">
+                  </div>
+                  
+                  <div class="mb-6">
+                    <label for="service" class="block text-gray-400 mb-2">咨询服务</label>
+                    <select id="service" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors">
+                      <option value="">请选择咨询服务类型</option>
+                      <option value="hardware">硬件产品咨询</option>
+                      <option value="software-park">智慧园区解决方案</option>
+                      <option value="software-emergency">应急管理系统</option>
+                      <option value="software-village">乡村治理平台</option>
+                      <option value="software-education">智慧教育解决方案</option>
+                      <option value="other">其他服务咨询</option>
+                    </select>
+                  </div>
+                  
+                  <div class="mb-6">
+                    <label for="message" class="block text-gray-400 mb-2">留言内容</label>
+                    <textarea id="message" rows="4" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的需求或问题"></textarea>
+                  </div>
+                  
+                  <button type="submit" class="w-full btn-primary flex items-center justify-center">
+                    <i class="fa fa-paper-plane mr-2"></i> 提交咨询
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  
+    <!-- 页脚 -->
+    <footer class="bg-dark border-t border-primary/20 py-12 relative">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div class="grid md:grid-cols-4 gap-12 mb-12">
+          <div>
+            <div class="flex items-center space-x-3 mb-6">
+              <div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center neon-border">
+                <i class="fa fa-microchip text-white text-xl"></i>
+              </div>
+              <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">四川明君科技</span>
+            </div>
+            <p class="text-gray-400 mb-6">
+              专注于智能硬件销售与定制化软件服务，为各行业提供专业的智慧解决方案。
+            </p>
+            <div class="flex space-x-4">
+              <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
+                <i class="fa fa-weixin text-xl"></i>
+              </a>
+              <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
+                <i class="fa fa-weibo text-xl"></i>
+              </a>
+              <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
+                <i class="fa fa-linkedin text-xl"></i>
+              </a>
+              <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
+                <i class="fa fa-youtube-play text-xl"></i>
+              </a>
+            </div>
+          </div>
+          
+          <div>
+            <h4 class="text-lg font-semibold mb-6 text-secondary">产品中心</h4>
+            <ul class="space-y-3">
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">高清智能摄像头</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">智能应急广播系统</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">高性能服务器</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">其他硬件产品</a></li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 class="text-lg font-semibold mb-6 text-secondary">解决方案</h4>
+            <ul class="space-y-3">
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">智慧园区解决方案</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">应急管理系统</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">乡村治理平台</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">智慧教育解决方案</a></li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 class="text-lg font-semibold mb-6 text-secondary">关于我们</h4>
+            <ul class="space-y-3">
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">公司简介</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">团队介绍</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">新闻动态</a></li>
+              <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">联系我们</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="pt-8 border-t border-primary/10 text-center text-gray-500 text-sm">
+          <p>© 2025 四川明君科技有限公司 版权所有 | 蜀ICP备12345678号</p>
+        </div>
+      </div>
+    </footer>
+    
+    <!-- 返回顶部按钮 -->
+    <button v-show="showToTop" @click="toTop" id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg opacity-100 visible transition-all duration-300 z-50 neon-border">
+      <i class="fa fa-arrow-up"></i>
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+const showToTop = ref(false)
+const number1 = ref(100)
+
+onMounted(() => {
+    window.onscroll = () => {
+      console.log(window.scrollY,'滚动了')
+        if (window.scrollY > 50) {
+          showToTop.value = true
+        } else {
+          showToTop.value = false
+        }
+    }
+})
+const toTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  });
+}
+
+const phone = ref(false)
+window.onresize = () => {
+  judgeWidth()
+}
+judgeWidth()
+function judgeWidth () {
+  if (window.innerWidth <= 992) {
+    phone.value = true
+  } else {
+    phone.value = false
+  }
+}
+</script>
+<style lang="scss">
+.mgr{
+  margin-right: 4px;
+}
+</style>