diff --git a/index.html b/index.html
index 396c358..7a9705c 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>乐望云</title>
+    <title>四川明君科技</title>
     <meta name="keywords">
     <meta name="description">
     <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
diff --git a/public/favicon.ico b/public/favicon.ico
index c3d9eed..a60a618 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/global.config.js b/public/global.config.js
index 46b331a..22426c1 100644
--- a/public/global.config.js
+++ b/public/global.config.js
@@ -1 +1 @@
-window.APP_BASEURL='https://www.byhah.com/api'
\ No newline at end of file
+window.APP_BASEURL='https://www.byhah.com'
\ No newline at end of file
diff --git a/src/api/api.ts b/src/api/api.ts
index 235ed47..16a592c 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -2,6 +2,37 @@ import type { Model, Partner, Solution, SystemInfo } from "@/type";
 import http from "./index";
 
 export default class Website {
+  // 获取成功案例数据
+  async toSaveConsult (params: any): Promise<{ data: SystemInfo }> {
+    return http({
+      url: '/test/anon/website/saveConsult',
+      method: 'post',
+      data: params
+    })
+  }
+  // 获取成功案例数据
+  async getCommentPage (params: any): Promise<{ data: SystemInfo }> {
+    return http({
+      url: '/test/anon/website/commentPage',
+      method: 'get',
+      params: params
+    })
+  }
+  // 获取成功案例数据
+  async getCasePage (params: any): Promise<{ data: SystemInfo }> {
+    return http({
+      url: '/test/anon/website/casePage',
+      method: 'get',
+      params: params
+    })
+  }
+  // new获取系统网站信息
+  async getWebInfo (): Promise<{ data: SystemInfo }> {
+    return http({
+      url: '/test/anon/website/info',
+      method: 'get'
+    })
+  }
   // 获取系统基本信息
   async getSystemInfo (): Promise<{ data: SystemInfo }> {
     return http({
diff --git a/src/views/components/About.vue b/src/views/components/About.vue
new file mode 100644
index 0000000..13eeda9
--- /dev/null
+++ b/src/views/components/About.vue
@@ -0,0 +1,85 @@
+<template>
+    <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">{{aboutData.aboutUsInfo?.remark || ''}}</p>
+          </div>
+          
+          <div class="grid md:grid-cols-3 gap-8" v-if="aboutData.targets">
+            <div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover" v-for="(item,index) in aboutData.targets" :key="'targets' + index">
+              <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
+                <i class="fa text-secondary text-2xl" :class="item.name.includes('使命')?'fa-bullseye': item.name.includes('愿景')? 'fa-eye':'fa-balance-scale'"></i>
+              </div>
+              <h3 class="text-xl font-semibold mb-3 text-secondary">{{item.name || ''}}</h3>
+              <p class="text-gray-400">
+                {{item.remark || ''}}
+              </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" v-if="aboutData.aboutUsInfo && aboutData.aboutUsInfo.items">
+            <div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover" v-for="(item,index) in aboutData.aboutUsInfo.items" :key="'item' + index">
+              <div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="12">{{item.num}}</div>
+              <p class="text-gray-400">{{item.title}}</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>
+</template>
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+const props = defineProps({
+  aboutData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+onMounted(() => {
+})
+watch(() => props.aboutData, (val) => {
+  console.log(props.aboutData,'2')
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+<style lang="scss">
+
+</style>
diff --git a/src/views/components/Case.vue b/src/views/components/Case.vue
new file mode 100644
index 0000000..80a7ccc
--- /dev/null
+++ b/src/views/components/Case.vue
@@ -0,0 +1,195 @@
+<template>
+    <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">{{caseData.successInfo?.remark || ''}}</p>
+          </div>
+          
+          <!-- 案例筛选 -->
+          <div class="flex flex-wrap justify-center gap-4 mb-10">
+            <button class="case-filter px-5 py-2 rounded-full" 
+                v-for="item in typeList" :key="'type'+ item.type"
+                :class="currentType == item.type? 'active bg-primary text-white font-medium': 'bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors'"
+                @click="changeType(item)"
+                >{{item.name}}</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" v-for="(item,index) in caseList" :key="'caseitem' + index">
+              <div class="h-56 overflow-hidden relative">
+                <img :src="item.pic" :alt="item.typeName" 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" v-if="item.typeId == 1">{{item.typeName}}</div>
+                <div class="absolute top-4 left-4 bg-secondary text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 2">{{item.typeName}}</div>
+                <div class="absolute top-4 left-4 bg-green-500 text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 3">{{item.typeName}}</div>
+                <div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 4">{{item.typeName}}</div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">{{item.name}}</h3>
+                <p class="text-gray-400 mb-4 line-clamp-2">
+                  {{item.remark}}
+                </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>
+</template>
+<script setup>
+import Website from "@/api/api";
+import { computed, onMounted, ref, watch } from 'vue';
+const props = defineProps({
+  caseData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+onMounted(() => {
+  getCaseData()
+})
+const typeList = ref([
+    {type: '0',name: '全部案例',id: 'all000'},
+])
+const caseList = ref([])
+watch(() => props.caseData, (val) => {
+  console.log(props.caseData,'5')
+  props.caseData.caseTypes?.forEach((itm,idx) => {
+    itm.type = idx + 1
+    typeList.value.push(itm)
+  });
+}, {
+  deep: false
+})
+const currentType = ref('0')
+
+const getCaseData = async () => {
+  console.log('88')
+  const website = new Website()
+  const res = await website.getCasePage({typeId: '0',pageNum: 1,pageSize: 10})
+  console.log('66',res)
+  if(res.code == 200){
+    let resLs = res.data?.records || []
+    if(resLs.length > 0){
+      caseList.value = resLs
+    } else {
+      caseList.value = [
+        {
+          name: '某科技园区智能管理系统',pic: 'https://picsum.photos/id/42/600/400',
+          remark: '为占地500亩的科技园区提供了全套智能管理解决方案，包括智能安防、停车管理、能源监控等系统。',
+          typeName: '智慧园区',typeId: 1
+        } // 测试数据
+      ]
+    }
+  }
+}
+  
+const changeType = (item) => {
+    currentType.value = item.type
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/components/Contact.vue b/src/views/components/Contact.vue
new file mode 100644
index 0000000..bd6d336
--- /dev/null
+++ b/src/views/components/Contact.vue
@@ -0,0 +1,291 @@
+<template>
+    <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">{{contactData.contactInfo?.address || ''}}</p>
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-start" v-if="contactData.contactInfo?.phone">
+                    <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" v-for="pitem,pindex in contactData.contactInfo.phoneArr" :key="'phone' + pindex">{{pitem}}</p>
+                      <!-- <p class="text-gray-400">138-8888-7777</p> -->
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-start" v-if="contactData.contactInfo?.email">
+                    <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" v-for="eitem,eindex in contactData.contactInfo.emailArr" :key="'email' + eindex">{{eitem}}</p>
+                      <!-- <p class="text-gray-400">service@mingjuntech.com</p> -->
+                    </div>
+                  </div>
+                  
+                  <div class="flex items-start" v-if="contactData.contactInfo?.workInfo">
+                    <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" v-for="titem,tindex in contactData.contactInfo.workInfoArr" :key="'time' + tindex">{{titem}}</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" v-model="formData.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 class="formErrorTips text-sm" v-if="errors.name">{{ errors.name }}</div>
+                    </div>
+                    <div>
+                      <label for="phone" class="block text-gray-400 mb-2">电话</label>
+                      <input type="tel" id="phone" v-model="formData.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 class="formErrorTips text-sm" v-if="errors.phone">{{ errors.phone }}</div>
+                    </div>
+                  </div>
+                  
+                  <div class="mb-6">
+                    <label for="email" class="block text-gray-400 mb-2">邮箱</label>
+                    <input type="email" id="email" v-model="formData.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 class="formErrorTips text-sm" v-if="errors.email">{{ errors.email }}</div>
+                  </div>
+                  
+                  <div class="mb-6">
+                    <label for="service" class="block text-gray-400 mb-2">咨询服务</label>
+                    <select id="service" v-model="formData.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="item.id" v-for="(item,index) in serviceOption" :key="'serviceOption' + index">{{item.name}}</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" v-model="formData.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 class="w-full btn-primary flex items-center justify-center" :disabled="isSubmitting" @click.stop="toDoSubmit">
+                    <i class="fa fa-paper-plane mr-2"></i> {{ isSubmitting ? '提交中...' : '提交咨询' }}
+                  </button>
+                  <div v-if="submitSuccess" class="success-message">
+                    <i class="fa fa-check-circle"></i>
+                    <span>提交成功！我们会尽快与您联系。</span>
+                  </div>
+                    <div v-if="submitError" class="error-message">
+                    <i class="fa fa-exclamation-circle"></i> {{ submitError }}
+                  </div>
+                <!-- </form> -->
+              </div>
+            </div>
+          </div>
+        </div>
+    </section>
+</template>
+<script setup>
+    import Website from "@/api/api";
+    import { computed, onMounted, ref, watch } from 'vue';
+    const props = defineProps({
+      contactData: {
+        type: Object,
+        default: () => ({})
+      }
+    })
+    const serviceOption = ref([])
+    watch(() => props.contactData, (val) => {
+      console.log(props.contactData,'7')
+      serviceOption.value = val.consultTypes || []
+      if(val.contactInfo){
+        val.contactInfo.phoneArr = val.contactInfo.phone.split('\n')
+        val.contactInfo.emailArr = val.contactInfo.email.split('\n')
+        val.contactInfo.workInfoArr = val.contactInfo.workInfo.split('\n')
+      }
+    }, {
+      deep: false
+    })
+    const formData = ref({
+        name: '',
+        phone: '',
+        email: '',
+        service: '',
+        message: ''
+    });
+    const errors = ref({
+        name: '',
+        phone: '',
+        email: '',
+        service: ''
+    });
+    const isSubmitting = ref(false);
+    const submitSuccess = ref(false);
+    const submitError = ref('')
+    const toDoSubmit = async () => {
+        console.log(formData.value.name,'1')
+        console.log(formData.value.phone,'2')
+        console.log(formData.value.email,'3')
+        console.log(formData.value.service,'4')
+        console.log(formData.value.message,'5')
+        // 重置状态
+        submitSuccess.value = false;
+        submitError.value = '';
+        // 验证表单
+        if (!validateForm()) {
+            return;
+        }
+        console.log('可以发请求了')
+        isSubmitting.value = true;
+        let params = {
+          "name": formData.value.name,
+          "phone": formData.value.phone,
+          "email": formData.value.email,
+          "typeId": formData.value.service,
+          "content": formData.value.message
+        }
+        const website = new Website()
+        try {
+          const res = await website.toSaveConsult(params)
+          if(res.code === 200){
+            submitSuccess.value = true
+            formData.value = {
+                name: '',
+                phone: '',
+                email: '',
+                service: '',
+                message: ''
+            };
+            isSubmitting.value = false;
+          } else {
+            isSubmitting.value = false;
+            submitError.value = '提交失败，请稍后再试。'
+          }
+        } catch (error) {
+          isSubmitting.value = false;
+          submitError.value = '提交失败，请稍后再试。'
+        }
+    }
+    const validateField = (fieldName, value) => {
+        let isValid = true;
+        
+        switch(fieldName) {
+            case 'name':
+                if (!value.trim()) {
+                    errors.value.name = '姓名是必填项';
+                    isValid = false;
+                } else {
+                    errors.value.name = '';
+                }
+                break;
+            
+            case 'phone':
+                if (!value.trim()) {
+                    errors.value.phone = '电话是必填项';
+                    isValid = false;
+                } else if (!/^1[3-9]\d{9}$/.test(value)) {
+                    errors.value.phone = '请输入有效的手机号码';
+                    isValid = false;
+                } else {
+                    errors.value.phone = '';
+                }
+                break;
+            
+            case 'email':
+                if (!value.trim()) {
+                    errors.value.email = '邮箱是必填项';
+                    isValid = false;
+                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                    errors.value.email = '请输入有效的邮箱地址';
+                    isValid = false;
+                } else {
+                    errors.value.email = '';
+                }
+                break;
+            
+            case 'service':
+                if (!value) {
+                    errors.value.service = '请选择咨询服务类型';
+                    isValid = false;
+                } else {
+                    errors.value.service = '';
+                }
+                break;
+        }
+        
+        return isValid;
+    };
+
+    const validateForm = () => {
+        let isValid = true;
+        
+        isValid = validateField('name', formData.value.name) && isValid;
+        isValid = validateField('phone', formData.value.phone) && isValid;
+        isValid = validateField('email', formData.value.email) && isValid;
+        // isValid = validateField('service', formData.value.service) && isValid;
+        
+        return isValid;
+    };
+</script>
+<style lang="scss">
+.success-message{
+    text-align: center;
+    padding-top: 5px;
+}
+.error-message{
+    text-align: center;
+    color: #f00;
+    padding-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/Evaluate.vue b/src/views/components/Evaluate.vue
new file mode 100644
index 0000000..d4c9b34
--- /dev/null
+++ b/src/views/components/Evaluate.vue
@@ -0,0 +1,129 @@
+<template>
+    <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" v-for="(item,index) in commentList" :key="'commentitem' + index">
+              <div class="flex items-center mb-6">
+                <img :src="item.avatar" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
+                <div>
+                  <h4 class="font-semibold text-secondary">{{item.name}}</h4>
+                  <p class="text-gray-400 text-sm">某科技园区</p>
+                </div>
+              </div>
+              <div class="text-yellow-400 mb-4">
+                <i class="fa fa-star mgr" v-for="(starit,sindex) in item.starShow" :key="'stat' + item.id + sindex"></i>
+                <i class="fa fa-star-half-o mgr" v-if="item.starShowHalf"></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">
+                {{item.content}}
+              </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 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-half-o mgr"></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 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> -->
+          </div>
+        </div>
+    </section>
+</template>
+<script setup>
+import Website from "@/api/api";
+import { computed, onMounted, ref, watch } from 'vue';
+onMounted(() => {
+  getCommentData()
+})
+const commentList = ref([])
+
+const getCommentData = async () => {
+  console.log('00')
+  const website = new Website()
+  const res = await website.getCommentPage({pageNum: 1,pageSize: 10})
+  console.log('77',res)
+  if(res.code == 200){
+    let resLs = res.data?.records || []
+    if(resLs.length > 0){
+      resLs.forEach(element => {
+        let star = Number(element.star)
+        if(!star){
+          element.starShow = 0
+          element.starShowHalf = false
+        } else {
+          if(Number.isInteger(star)){
+            element.starShow = star
+            element.starShowHalf = false
+          } else {
+            element.starShow = Math.trunc(star)
+            element.starShowHalf = true
+          }
+        }
+      });
+      commentList.value = resLs
+    } else {
+      commentList.value = [
+        {
+          id: 1790,
+          name: '张经理',avatar: 'https://picsum.photos/id/64/100/100',
+          remark: '某科技园区',
+          starShow: 5,
+          starShowHalf: false,
+          content: '"明君科技为我们园区提供的智能管理系统非常出色，不仅提升了管理效率，也为入驻企业提供了更好的服务体验。他们的技术团队专业且负责，值得信赖。"',star: 4.5
+        } // 测试数据
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/components/Hardware.vue b/src/views/components/Hardware.vue
new file mode 100644
index 0000000..27d24c9
--- /dev/null
+++ b/src/views/components/Hardware.vue
@@ -0,0 +1,125 @@
+<template>
+    <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">{{hardwareData.productInfo?.remark || ''}}</p>
+          </div>
+          
+          <div class="grid md:grid-cols-3 gap-8" v-if="hardwareData.products">
+            <!-- 摄像头 -->
+            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover" v-for="(item,index) in hardwareData.products" :key="'products' + index">
+              <div class="h-56 overflow-hidden relative">
+                <img :src="item.pic || 'https://picsum.photos/id/96/600/400'" :alt="item.name" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
+                <div class="absolute top-4 left-4 text-dark px-3 py-1 rounded-full text-sm font-medium" :class="item.tag.includes('热销')?'bg-secondary': item.tag.includes('新品')? 'bg-accent': 'bg-green-500'">
+                  {{item.tag}}
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-semibold mb-3 text-secondary">{{item.name}}</h3>
+                <p class="text-gray-400 mb-4">
+                  {{item.remark}}
+                </p>
+                <ul class="space-y-2 mb-6" v-if="item.extra && item.extra.advantages">
+                  <li class="flex items-center text-sm text-gray-400" v-for="(sitem,sindex) in item.extra.advantages" :key="'advantages' + sindex">
+                    <i class="fa fa-check-circle text-accent mr-2"></i> {{sitem.name}}
+                  </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>
+</template>
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+const props = defineProps({
+  hardwareData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+onMounted(() => {
+})
+watch(() => props.hardwareData, (val) => {
+  console.log(props.hardwareData,'3')
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/components/Home.vue b/src/views/components/Home.vue
new file mode 100644
index 0000000..3ff0eee
--- /dev/null
+++ b/src/views/components/Home.vue
@@ -0,0 +1,102 @@
+<template>
+  <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">
+            {{homeData.remark || ''}}
+            </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" v-if="homeData.services">
+            <div class="flex items-center" v-for="(item,index) in homeData.services" :key="'services' + index">
+                <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">{{item || '-'}}</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="homeData.sloganUrl || 'https://picsum.photos/id/1/800/600'" alt="智能科技解决方案展示" class="w-full h-auto homePic">
+            <!-- 悬浮数据指标 -->
+            <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>
+</template>
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+const props = defineProps({
+  homeData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+onMounted(() => {
+    console.log(props.homeData)
+})
+watch(() => props.homeData, (val) => {
+  console.log(props.homeData,'1')
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+<style lang="scss">
+.homePic{
+    max-height: 534px;
+}
+</style>
diff --git a/src/views/components/Software.vue b/src/views/components/Software.vue
new file mode 100644
index 0000000..3bd4ac4
--- /dev/null
+++ b/src/views/components/Software.vue
@@ -0,0 +1,143 @@
+<template>
+    <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">{{softwareData.softwareInfo?.remark || ''}}</p>
+          </div>
+          
+          <div class="grid md:grid-cols-2 gap-8 lg:gap-12" v-if="softwareData.plans">
+            <!-- 智慧园区 -->
+            <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover" v-for="(item,index) in softwareData.plans" :key="'plans' + index">
+              <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" v-if="item.name.includes('应急管理')"></i>
+                <i class="fa fa-home text-secondary text-3xl" v-else-if="item.name.includes('乡村治理')"></i>
+                <i class="fa fa-graduation-cap text-secondary text-3xl" v-else-if="item.name.includes('智慧教育')"></i>
+                <i class="fa fa-building-o text-secondary text-3xl" v-else></i>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold mb-3 text-secondary">{{item.name || ''}}</h3>
+                <p class="text-gray-400 mb-4">
+                  {{item.remark || ''}}
+                </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>
+</template>
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+const props = defineProps({
+  softwareData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+onMounted(() => {
+})
+watch(() => props.softwareData, (val) => {
+  console.log(props.softwareData,'4')
+}, {
+  deep: true,
+  immediate: true
+})
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 254c164..6b61b9e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -28,14 +28,14 @@
           </div>
           
           <!-- 移动端菜单按钮 -->
-          <button id="menu-toggle" class="md:hidden text-light hover:text-secondary">
+          <button id="menu-toggle" class="md:hidden text-light hover:text-secondary" @click="showMobilMenu">
             <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 id="mobile-menu" class="md:hidden bg-dark/95 backdrop-blur-md border-t border-primary/20" :class="showMobilMenuFlag?'':'hidden'">
         <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>
@@ -50,712 +50,30 @@
 
     <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>
+      <Home :home-data="homeData"></Home>
       
       <!-- 公司简介 -->
-      <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>
+      <About :about-data="aboutData"></About>
       
       <!-- 硬件产品 -->
-      <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>
+      <Hardware :hardware-data="hardwareData"></Hardware>
+      
       
       <!-- 软件服务 -->
-      <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>
+      <Software :software-data="softwareData"></Software>
+      
       
       <!-- 成功案例 -->
-      <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>
+      <Case :case-data="caseData"></Case>
+      
       
       <!-- 客户评价 -->
-      <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>
+      <Evaluate></Evaluate>
+      
       
       <!-- 咨询联系 -->
-      <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>
+      <Contact :contact-data="contactData"></Contact>
+      
     </main>
   
     <!-- 页脚 -->
@@ -831,15 +149,29 @@
     </button>
   </div>
 </template>
-<script lang="ts" setup>
+<script setup>
+import Website from "@/api/api";
 import { computed, onMounted, ref } from 'vue';
+import Home from './components/Home.vue';
+import About from './components/About.vue';
+import Hardware from './components/Hardware.vue';
+import Software from './components/Software.vue';
+import Case from './components/Case.vue';
+import Evaluate from './components/Evaluate.vue';
+import Contact from './components/Contact.vue';
 
 const showToTop = ref(false)
-const number1 = ref(100)
+const showMobilMenuFlag = ref(false)
+const homeData = ref({})
+const aboutData = ref({})
+const hardwareData = ref({})
+const softwareData = ref({})
+const caseData = ref({})
+const contactData = ref({})
 
 onMounted(() => {
     window.onscroll = () => {
-      console.log(window.scrollY,'滚动了')
+      // console.log(window.scrollY,'滚动了')
         if (window.scrollY > 50) {
           showToTop.value = true
         } else {
@@ -847,6 +179,23 @@ onMounted(() => {
         }
     }
 })
+
+const showMobilMenu = () => {
+  showMobilMenuFlag.value = !showMobilMenuFlag.value
+}
+const getWebData = async () => {
+  console.log('999')
+  const website = new Website()
+  const res = await website.getWebInfo()
+  console.log('123456')
+  homeData.value = res.data.indexInfo || {}
+  aboutData.value = {aboutUsInfo: res.data?.aboutUsInfo || {},targets: res.data?.targets || []}
+  hardwareData.value = {productInfo: res.data?.productInfo || {},products: res.data?.products || []}
+  softwareData.value = {softwareInfo: res.data?.softwareInfo || {},plans: res.data?.plans || []}
+  caseData.value = {caseTypes: res.data?.caseTypes || [],successInfo: res.data?.successInfo || {}}
+  contactData.value = {consultTypes: res.data?.consultTypes || [],contactInfo: res.data?.contactInfo || {}}
+}
+getWebData()
 const toTop = () => {
   window.scrollTo({
     top: 0,
@@ -854,21 +203,13 @@ const toTop = () => {
   });
 }
 
-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;
 }
+.formErrorTips{
+  padding-top: 4px;
+  color: rgb(236, 40, 40);
+}
 </style>
\ No newline at end of file