diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 47fe3c9..976b6b5 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -95,8 +95,27 @@ const items = computed<NavigationMenuItem[]>(() => [
   },
   {
     label: '物联网解决方案',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
+    active: route.path.startsWith('/IoTSolutions'),
+    children: [
+      {
+        label: '物联网应用定制',
+        icon: 'i-lucide-settings',
+        description: '规范化的开发流程，实现产品快速落地',
+        to: '/IoTSolutions/applicationCustomization',
+      },
+      {
+        label: '物联网智能硬件',
+        icon: 'i-lucide-cpu',
+        description: '支持定制，满足各类硬件场景需求',
+        to: '/IoTSolutions/smartHardware',
+      },
+      {
+        label: '物联网IoT云平台',
+        icon: 'i-lucide-cloud',
+        description: '灵活、可靠、安全，有效降低成本',
+        to: '/IoTSolutions/iotCloudPlatform',
+      }
+    ]
   },
   {
     label: '关于创特',
diff --git a/app/components/IoTSolutions/applicationCustomization/index.vue b/app/components/IoTSolutions/applicationCustomization/index.vue
new file mode 100644
index 0000000..c086cd1
--- /dev/null
+++ b/app/components/IoTSolutions/applicationCustomization/index.vue
@@ -0,0 +1,588 @@
+<script lang="ts" setup>
+// 物联网系统开发数据
+const iotSystemDevelopment = {
+  title: '物联网系统开发',
+  subtitle: '一站式物联网解决方案提供，携手搭建物联网生态圈',
+  description: '专业的物联网系统开发团队，为企业提供全方位的物联网解决方案'
+}
+
+// APP/微信/小程序用户端功能
+const userClientFeatures = [
+  {
+    id: 1,
+    title: '蓝牙连接',
+    icon: 'i-lucide-bluetooth',
+    description: '通过蓝牙连接完成APP与智能终端间的对接'
+  },
+  {
+    id: 2,
+    title: 'GPS定位',
+    icon: 'i-lucide-map-pin',
+    description: '调用GPS定位，达到定位用户位置，记录用户运动'
+  },
+  {
+    id: 3,
+    title: '数据分享',
+    icon: 'i-lucide-share',
+    description: '将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动'
+  },
+  {
+    id: 4,
+    title: '扫码使用',
+    icon: 'i-lucide-qr-code',
+    description: '扫码使用设备，流程简单、体验佳'
+  },
+  {
+    id: 5,
+    title: '硬件数据分析',
+    icon: 'i-lucide-bar-chart',
+    description: '实时分析硬件数据，提供智能决策支持'
+  }
+]
+
+// PC管理端功能
+const pcManagementFeatures = [
+  {
+    id: 1,
+    title: '设备管理',
+    icon: 'i-lucide-settings',
+    description: '全面的设备管理功能，支持设备配置、监控和维护'
+  },
+  {
+    id: 2,
+    title: '设备监控',
+    icon: 'i-lucide-monitor',
+    description: '实时监控设备状态，及时发现和处理异常情况'
+  },
+  {
+    id: 3,
+    title: '生命周期管理',
+    icon: 'i-lucide-clock',
+    description: '完整的设备生命周期管理，从采购到报废全程跟踪'
+  },
+  {
+    id: 4,
+    title: '维修工单管理',
+    icon: 'i-lucide-wrench',
+    description: '高效的维修工单管理系统，提升维护效率'
+  },
+  {
+    id: 5,
+    title: '合同管理',
+    icon: 'i-lucide-file-text',
+    description: '完善的合同管理功能，确保合规运营'
+  },
+  {
+    id: 6,
+    title: '工单流程管理',
+    icon: 'i-lucide-workflow',
+    description: '灵活的工单流程管理，支持自定义业务流程'
+  }
+]
+
+// APP移动运维端功能
+const mobileOandMFeatures = [
+  {
+    id: 1,
+    title: '实时监控',
+    icon: 'i-lucide-activity',
+    description: '监控所有设备位置、运行状态，实时掌握设备情况'
+  },
+  {
+    id: 2,
+    title: '权限分配',
+    icon: 'i-lucide-user-check',
+    description: '手机权限分配，支持厂家-经销商-合同能源管理企业-用户等角色管理'
+  },
+  {
+    id: 3,
+    title: '工单流转',
+    icon: 'i-lucide-arrow-right-left',
+    description: '手机工单流转，提升工作效率'
+  },
+  {
+    id: 4,
+    title: '扫码注册',
+    icon: 'i-lucide-scan',
+    description: '扫描二维码注册，识别当前设备所有参数、运行信息、维护人员及历史消息等'
+  },
+  {
+    id: 5,
+    title: '售后服务',
+    icon: 'i-lucide-headphones',
+    description: '售后拍照回传、信息录入、抄表，提供完善的售后服务支持'
+  }
+]
+
+// 系统特性
+const systemFeatures = [
+  {
+    id: 1,
+    title: '模块化设计',
+    icon: 'i-lucide-package',
+    description: '采用模块化设计，简便易用，高度自定义，无需二次开发'
+  },
+  {
+    id: 2,
+    title: '高度自定义',
+    icon: 'i-lucide-settings-2',
+    description: '根据用户需求配置各种应用模块，灵活适应不同业务场景'
+  },
+  {
+    id: 3,
+    title: '无需二次开发',
+    icon: 'i-lucide-zap',
+    description: '开箱即用的解决方案，快速部署，降低开发成本'
+  }
+]
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <!-- Hero Section - 物联网系统开发 -->
+    <section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
+      <!-- 背景 -->
+      <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+        <!-- 几何图案 -->
+        <div class="absolute inset-0 opacity-20">
+          <div class="absolute inset-0">
+            <!-- 网格图案 -->
+            <div 
+              v-for="i in 20" 
+              :key="i"
+              class="absolute w-4 h-4 border border-blue-400/30 rounded"
+              :style="{
+                left: Math.random() * 100 + '%',
+                top: Math.random() * 100 + '%',
+                transform: `rotate(${Math.random() * 360}deg)`
+              }"
+            ></div>
+          </div>
+        </div>
+        
+        <!-- 发光圆形 -->
+        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96">
+          <div class="w-full h-full rounded-full border-2 border-dashed border-blue-400/50 animate-pulse"></div>
+          <div class="absolute inset-8 rounded-full border border-dashed border-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
+        </div>
+        
+        <!-- 曲线线条 -->
+        <div class="absolute bottom-0 right-0 w-64 h-64">
+          <svg class="w-full h-full text-blue-400/30" viewBox="0 0 100 100">
+            <path d="M0,80 Q30,20 60,40 T100,20" stroke="currentColor" stroke-width="2" fill="none" class="animate-pulse"/>
+            <path d="M0,60 Q20,10 50,30 T100,10" stroke="currentColor" stroke-width="1" fill="none" class="animate-pulse" style="animation-delay: 1s"/>
+          </svg>
+        </div>
+        
+        <!-- 手部线框 -->
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-32 h-32">
+          <svg class="w-full h-full text-blue-400" viewBox="0 0 100 100">
+            <path d="M20,80 L30,70 L40,75 L50,65 L60,70 L70,60 L80,65 L85,55" stroke="currentColor" stroke-width="2" fill="none"/>
+            <circle cx="25" cy="75" r="3" fill="currentColor"/>
+            <circle cx="35" cy="70" r="3" fill="currentColor"/>
+            <circle cx="45" cy="75" r="3" fill="currentColor"/>
+            <circle cx="55" cy="65" r="3" fill="currentColor"/>
+            <circle cx="65" cy="70" r="3" fill="currentColor"/>
+            <circle cx="75" cy="60" r="3" fill="currentColor"/>
+            <circle cx="80" cy="65" r="3" fill="currentColor"/>
+            <circle cx="85" cy="55" r="3" fill="currentColor"/>
+          </svg>
+        </div>
+      </div>
+      
+      <!-- 内容 -->
+      <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center text-white">
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+            {{ iotSystemDevelopment.title }}
+          </h1>
+          <p class="text-xl md:text-2xl text-blue-200 dark:text-blue-300 mb-8 max-w-4xl mx-auto leading-relaxed">
+            {{ iotSystemDevelopment.subtitle }}
+          </p>
+          <p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 max-w-2xl mx-auto">
+            {{ iotSystemDevelopment.description }}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- APP/微信/小程序用户端 -->
+    <section class="py-16 md:py-20 bg-white dark:bg-gray-800">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            APP/微信/小程序用户端
+          </h2>
+          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <!-- 手机展示 -->
+          <div class="relative flex justify-center items-center">
+            <div class="relative w-64 h-96 md:w-80 md:h-[480px]">
+              <!-- 手机外壳 -->
+              <div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
+                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
+                  <!-- 应用界面 -->
+                  <div class="p-4 h-full">
+                    <!-- 通知区域 -->
+                    <div class="flex items-center mb-4">
+                      <div class="w-8 h-4 bg-pink-200 dark:bg-pink-800 rounded mr-2"></div>
+                      <div class="w-12 h-4 bg-pink-200 dark:bg-pink-800 rounded"></div>
+                    </div>
+                    
+                    <!-- 用户信息 -->
+                    <div class="text-center mb-6">
+                      <div class="w-16 h-16 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-2 flex items-center justify-center">
+                        <UIcon name="i-lucide-user" class="w-8 h-8 text-gray-600 dark:text-gray-300" />
+                      </div>
+                      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
+                      <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto"></div>
+                    </div>
+                    
+                    <!-- 聊天区域 -->
+                    <div class="flex justify-end mb-4">
+                      <div class="w-20 h-12 bg-gray-900 dark:bg-gray-100 rounded-lg flex items-center justify-center">
+                        <div class="w-6 h-4 bg-white dark:bg-gray-800 rounded"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 功能连接点 -->
+              <div class="absolute inset-0">
+                <!-- 蓝牙连接 -->
+                <div class="absolute -left-8 top-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    蓝牙连接
+                  </div>
+                </div>
+                
+                <!-- GPS定位 -->
+                <div class="absolute -right-8 top-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    GPS定位
+                  </div>
+                </div>
+                
+                <!-- 扫码使用 -->
+                <div class="absolute -right-8 bottom-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    扫码使用
+                  </div>
+                </div>
+                
+                <!-- 硬件数据分析 -->
+                <div class="absolute -left-8 bottom-1/3">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    硬件数据分析
+                  </div>
+                </div>
+                
+                <!-- 连接线 -->
+                <svg class="absolute inset-0 w-full h-full pointer-events-none">
+                  <line x1="0" y1="25%" x2="20%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
+                  <line x1="80%" y1="25%" x2="100%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
+                  <line x1="80%" y1="75%" x2="100%" y2="75%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
+                  <line x1="0" y1="66%" x2="20%" y2="66%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- 功能列表 -->
+          <div class="space-y-6">
+            <div 
+              v-for="feature in userClientFeatures" 
+              :key="feature.id"
+              class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
+            >
+              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
+                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {{ feature.title }}
+                </h3>
+                <p class="text-gray-600 dark:text-gray-300">
+                  {{ feature.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PC管理端 -->
+    <section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            PC管理端
+          </h2>
+          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <!-- 功能列表 -->
+          <div class="space-y-6">
+            <div 
+              v-for="feature in pcManagementFeatures" 
+              :key="feature.id"
+              class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300"
+            >
+              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
+                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {{ feature.title }}
+                </h3>
+                <p class="text-gray-600 dark:text-gray-300">
+                  {{ feature.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 电脑展示 -->
+          <div class="relative flex justify-center items-center">
+            <div class="relative w-80 h-64 md:w-96 md:h-72">
+              <!-- 电脑外壳 -->
+              <div class="absolute inset-0 bg-gray-200 dark:bg-gray-600 rounded-lg shadow-2xl">
+                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
+                  <!-- 屏幕内容 -->
+                  <div class="p-4 h-full">
+                    <!-- 顶部卡片 -->
+                    <div class="flex space-x-2 mb-4">
+                      <div class="w-16 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
+                      <div class="w-20 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
+                    </div>
+                    
+                    <!-- 图表区域 -->
+                    <div class="flex space-x-4 mb-4">
+                      <!-- 饼图 -->
+                      <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
+                        <div class="w-12 h-12 bg-red-500 rounded-full"></div>
+                      </div>
+                      
+                      <!-- 柱状图 -->
+                      <div class="flex-1 space-y-1">
+                        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
+                        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
+                      </div>
+                    </div>
+                    
+                    <!-- 底部图表 -->
+                    <div class="space-y-2">
+                      <div class="h-2 bg-red-500 rounded"></div>
+                      <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                      <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 功能标签 -->
+              <div class="absolute -top-4 -left-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
+                <div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
+                  <UIcon name="i-lucide-wrench" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                </div>
+              </div>
+              
+              <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
+                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center">
+                  <UIcon name="i-lucide-check-square" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- APP移动运维端 -->
+    <section class="py-16 md:py-20 bg-white dark:bg-gray-800">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            APP移动运维端
+          </h2>
+          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <!-- 手机展示 -->
+          <div class="relative flex justify-center items-center">
+            <div class="relative w-64 h-96 md:w-80 md:h-[480px]">
+              <!-- 手机外壳 -->
+              <div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
+                <div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
+                  <!-- 应用界面 -->
+                  <div class="p-4 h-full">
+                    <!-- 进度环 -->
+                    <div class="flex justify-center mb-6">
+                      <div class="relative w-20 h-20">
+                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
+                          <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
+                          <circle cx="50" cy="50" r="40" stroke="#ef4444" stroke-width="8" fill="none" 
+                                  stroke-dasharray="251.2" stroke-dashoffset="105.5"/>
+                        </svg>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                          <span class="text-sm font-bold text-gray-900 dark:text-white">58%</span>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 列表项 -->
+                    <div class="space-y-3">
+                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
+                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
+                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-5/6"></div>
+                      <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-2/3"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 功能连接点 -->
+              <div class="absolute inset-0">
+                <!-- 实时监控 -->
+                <div class="absolute -left-8 top-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    实时监控
+                  </div>
+                </div>
+                
+                <!-- 权限分配 -->
+                <div class="absolute -right-8 top-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    权限分配
+                  </div>
+                </div>
+                
+                <!-- 工单流转 -->
+                <div class="absolute -left-8 top-1/2">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    工单流转
+                  </div>
+                </div>
+                
+                <!-- 扫码注册 -->
+                <div class="absolute -left-8 bottom-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    扫码注册
+                  </div>
+                </div>
+                
+                <!-- 售后服务 -->
+                <div class="absolute -right-8 bottom-1/4">
+                  <div class="w-4 h-4 bg-red-500 rounded-full"></div>
+                  <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
+                    售后服务
+                  </div>
+                </div>
+                
+                <!-- 连接线 -->
+                <svg class="absolute inset-0 w-full h-full pointer-events-none">
+                  <circle cx="50%" cy="50%" r="45%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <!-- 功能列表 -->
+          <div class="space-y-6">
+            <div 
+              v-for="feature in mobileOandMFeatures" 
+              :key="feature.id"
+              class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
+            >
+              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
+                <UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {{ feature.title }}
+                </h3>
+                <p class="text-gray-600 dark:text-gray-300">
+                  {{ feature.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 系统特性 -->
+    <section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- 标题区域 -->
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            系统特性
+          </h2>
+          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
+        </div>
+
+        <!-- 特性展示 -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div 
+            v-for="feature in systemFeatures" 
+            :key="feature.id"
+            class="text-center p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
+          >
+            <div class="w-16 h-16 mx-auto mb-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
+              <UIcon :name="feature.icon" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+              {{ feature.title }}
+            </h3>
+            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
+              {{ feature.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义动画 */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .grid-cols-3 {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/softwareDevelopment/MiniProgram/index.vue b/app/components/softwareDevelopment/MiniProgram/index.vue
index 621c940..b8e8ae6 100644
--- a/app/components/softwareDevelopment/MiniProgram/index.vue
+++ b/app/components/softwareDevelopment/MiniProgram/index.vue
@@ -3,7 +3,7 @@
 const qualityAssurance = {
   title: '品质保证 源码交付',
   year: '2016',
-  company: 'New Yu Xi',
+  company: '创特',
   description: '专业的软件开发团队，提供高品质的源码交付服务'
 }
 
@@ -100,42 +100,45 @@ const sevenGuarantees = [
     <!-- Hero Section - 品质保证 源码交付 -->
     <section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
       <!-- 背景 -->
-      <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      <div
+          class="absolute inset-0 bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
         <!-- 星空效果 -->
         <div class="absolute inset-0">
-          <div 
-            v-for="i in 50" 
-            :key="i"
-            class="absolute w-1 h-1 bg-white rounded-full animate-pulse"
-            :style="{
+          <div
+              v-for="i in 50"
+              :key="i"
+              :style="{
               left: Math.random() * 100 + '%',
               top: Math.random() * 100 + '%',
               animationDelay: Math.random() * 3 + 's'
             }"
-          ></div>
+              class="absolute w-1 h-1 bg-white rounded-full animate-pulse"
+          />
         </div>
-        
+
         <!-- 地球效果 -->
         <div class="absolute right-8 top-1/2 transform -translate-y-1/2 w-64 h-64 md:w-80 md:h-80">
-          <div class="w-full h-full rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-500 dark:to-blue-700 relative overflow-hidden">
+          <div
+              class="w-full h-full rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-500 dark:to-blue-700 relative overflow-hidden">
             <!-- 地球纹理 -->
-            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
-            <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
+            <div
+                class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"/>
+            <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"/>
             <!-- 城市灯光效果 -->
-            <div 
-              v-for="i in 20" 
-              :key="i"
-              class="absolute w-1 h-1 bg-white rounded-full animate-ping"
-              :style="{
+            <div
+                v-for="i in 20"
+                :key="i"
+                :style="{
                 left: Math.random() * 100 + '%',
                 top: Math.random() * 100 + '%',
                 animationDelay: Math.random() * 2 + 's'
               }"
-            ></div>
+                class="absolute w-1 h-1 bg-white rounded-full animate-ping"
+            />
           </div>
         </div>
       </div>
-      
+
       <!-- 内容 -->
       <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center text-white">
@@ -160,7 +163,7 @@ const sevenGuarantees = [
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <!-- 标题区域 -->
         <div class="text-center mb-16">
-          <div class="inline-block w-8 h-8 bg-blue-600 dark:bg-blue-500 rounded-full mb-4"></div>
+          <div class="inline-block w-8 h-8 bg-blue-600 dark:bg-blue-500 rounded-full mb-4"/>
           <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-2">
             五大技术核心
           </h2>
@@ -171,26 +174,27 @@ const sevenGuarantees = [
 
         <!-- 技术展示 -->
         <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 md:gap-8">
-          <div 
-            v-for="tech in coreTechnologies" 
-            :key="tech.id"
-            class="group text-center"
+          <div
+              v-for="tech in coreTechnologies"
+              :key="tech.id"
+              class="group text-center"
           >
             <!-- 圆形图标 -->
             <div class="relative mx-auto mb-6 w-24 h-24 md:w-28 md:h-28 lg:w-32 lg:h-32">
-              <div class="w-full h-full rounded-full border-2 border-blue-200 dark:border-blue-700 bg-white dark:bg-gray-700 flex items-center justify-center group-hover:border-blue-500 dark:group-hover:border-blue-400 transition-all duration-300 group-hover:scale-110">
-                <UIcon 
-                  :name="tech.icon" 
-                  class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300" 
+              <div
+                  class="w-full h-full rounded-full border-2 border-blue-200 dark:border-blue-700 bg-white dark:bg-gray-700 flex items-center justify-center group-hover:border-blue-500 dark:group-hover:border-blue-400 transition-all duration-300 group-hover:scale-110">
+                <UIcon
+                    :name="tech.icon"
+                    class="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300"
                 />
               </div>
             </div>
-            
+
             <!-- 标题 -->
             <h3 class="text-lg md:text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
               {{ tech.title }}
             </h3>
-            
+
             <!-- 描述 -->
             <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
               {{ tech.description }}
@@ -211,27 +215,27 @@ const sevenGuarantees = [
           <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-4">
             Seven guarantee
           </p>
-          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
+          <div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"/>
         </div>
 
         <!-- 保障卡片 -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
-          <div 
-            v-for="(guarantee, index) in sevenGuarantees" 
-            :key="guarantee.id"
-            class="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
-            :class="index === 6 ? 'md:col-span-2 lg:col-span-1 xl:col-span-1' : ''"
+          <div
+              v-for="(guarantee, index) in sevenGuarantees"
+              :key="guarantee.id"
+              :class="index === 6 ? 'md:col-span-2 lg:col-span-1 xl:col-span-1' : ''"
+              class="group bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
           >
             <!-- 图片区域 -->
             <div class="relative h-48 md:h-56 overflow-hidden">
-              <img 
-                :src="guarantee.image" 
-                :alt="guarantee.chineseTitle"
-                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+              <img
+                  :alt="guarantee.chineseTitle"
+                  :src="guarantee.image"
+                  class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
               >
               <!-- 叠加层 -->
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
-              
+              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"/>
+
               <!-- 标题 -->
               <div class="absolute bottom-4 left-4 right-4">
                 <h3 class="text-2xl md:text-3xl font-bold text-white mb-1">
@@ -242,7 +246,7 @@ const sevenGuarantees = [
                 </p>
               </div>
             </div>
-            
+
             <!-- 描述区域 -->
             <div class="p-6">
               <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
diff --git a/app/components/industrySolutions/ElectCar/item1.vue b/app/pages/IoTSolutions/applicationCustomization.vue
similarity index 70%
rename from app/components/industrySolutions/ElectCar/item1.vue
rename to app/pages/IoTSolutions/applicationCustomization.vue
index cfe0640..e08f3a1 100644
--- a/app/components/industrySolutions/ElectCar/item1.vue
+++ b/app/pages/IoTSolutions/applicationCustomization.vue
@@ -4,7 +4,7 @@
 
 <template>
   <view>
-    145
+    <IoTSolutionsApplicationCustomization/>
   </view>
 </template>