1

README.md

@@ -50,7 +50,6 @@ src/
 ├── components/          # 组件目录
 │   ├── ihead.vue      # 现代化头部组件
 │   ├── ifooter.vue    # 现代化页脚组件
-│   └── leftMenu.vue   # 左侧菜单组件
 ├── views/              # 页面目录
 │   ├── index.vue      # 升级后的首页
 │   └── aboutUs/       # 关于我们页面
@@ -123,7 +122,7 @@ npm run build
 ```css
 :root {
   --primary-color: #3498db;
-  --secondary-color: #9b59b6;
+  --secondary-color: #3498db;
   --success-color: #27ae60;
   --warning-color: #f39c12;
   --danger-color: #e74c3c;

src/assets/css/common.css

@@ -2010,7 +2010,7 @@ body {
 
 .progress-bar {
   height: 100%;
-  background: linear-gradient(90deg, #3498db, #9b59b6);
+  background: linear-gradient(90deg, #3498db, #2980b9);
   border-radius: 4px;
   transition: width 0.3s ease;
 }

src/component.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import ihead from './components/ihead.vue'
 import ifooter from './components/ifooter.vue'
 import icontent from './components/icontent.vue'
-import leftMenu from './components/leftMenu.vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 
 class Component {
@@ -11,7 +10,6 @@ class Component {
         Vue.component("ihead", ihead);
         Vue.component("ifooter", ifooter);
         Vue.component("icontent", icontent);
-        Vue.component("leftMenu", leftMenu);
         
         // 注册Swiper组件
         Vue.use(VueAwesomeSwiper);

src/components/ihead.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="header bottomShadow" :class="{ 'mini': isMiniHeader }">
       <div class="content pageWidth">
-        
+
         <!-- 主要导航区域 -->
         <div class="bottom desktop">
           <div class="nav-container">
@@ -13,17 +13,13 @@
               <nav class="mainMenu">
                 <div class="nav-item" v-for="menu in menus" :key="menu.name">
                   <router-link :to="menu.url" class="nav-link">
-                    {{menu.name}}
+                    {{ menu.name }}
-                    <span v-if="menu.child.length>0" class="downCaret"></span>
+                    <span v-if="menu.child.length > 0" class="downCaret">▼</span>
                   </router-link>
-                  <div class="dropDown bottomShadowSegment" v-if="menu.child.length>0">
+                  <div class="dropDown bottomShadowSegment" v-if="menu.child.length > 0">
-                    <router-link 
+                    <router-link :to="sonMenu.url" v-for="sonMenu in menu.child" :key="sonMenu.name"
-                      :to="sonMenu.url" 
+                      class="dropdown-item">
-                      v-for="sonMenu in menu.child" 
+                      {{ sonMenu.name }}
-                      :key="sonMenu.name"
-                      class="dropdown-item"
-                    >
-                      {{sonMenu.name}}
                     </router-link>
                   </div>
                 </div>
@@ -44,18 +40,18 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 移动端菜单 -->
       <div id="mobileMenu" class="headerMobileMenu bread">
         <div class="menuDummy"></div>
         <div class="menuContent">
           <ul>
             <li v-for="menu in menus" :key="menu.name">
-              <router-link :to="menu.url" v-if="menu.name=='首页'">{{menu.name}}</router-link>
+              <router-link :to="menu.url" v-if="menu.child.length === 0">{{ menu.name }}</router-link>
-              <label v-else class="hasSubmenu" style="display:block;">{{menu.name}}</label>
+              <label v-else class="hasSubmenu" style="display:block;">{{ menu.name }}</label>
-              <ul class="subMenu" v-if="menu.child.length>0">
+              <ul class="subMenu" v-if="menu.child.length > 0">
                 <li v-for="sonMenu in menu.child" :key="sonMenu.name">
-                  <router-link class="hasSubmenu" :to="sonMenu.url">{{sonMenu.name}}</router-link>
+                  <router-link class="hasSubmenu" :to="sonMenu.url">{{ sonMenu.name }}</router-link>
                 </li>
               </ul>
             </li>
@@ -88,18 +84,18 @@ export default {
         },
         {
           name: '关于我们',
-          url: '/aboutUs/aboutUs',
+          url: '/aboutUs',
           child: []
         },
         {
           name: '我们的方案',
-          url: '/ourPlan/ourPlan',
+          url: '/ourPlan',
           child: [
+            { name: 'AI集成', url: '/ourPlan/aiSolutions' },
             { name: '智能建筑', url: '/ourPlan/estateManagement' },
             { name: '物联网', url: '/ourPlan/iot' },
             { name: '设施管理', url: '/ourPlan/facilityManagement' },
-            { name: 'AI解决方案', url: '/ourPlan/aiSolutions' },
+            { name: '系统集成', url: '/ourPlan/technologyIntegration' }
-            { name: '技术集成', url: '/ourPlan/technologyIntegration' }
           ]
         },
 
@@ -175,18 +171,18 @@ export default {
         this.toggle_class("mobileMenu", "active", true);
       }, true);
 
-             // 返回按钮
+      // 返回按钮
-       this.add_event_listener(".linkGoBack", "click", () => {
+      this.add_event_listener(".linkGoBack", "click", () => {
-         this.remove_class("mobileMenu", "active", true);
+        this.remove_class("mobileMenu", "active", true);
-         // 关闭移动端菜单后滚动到顶部
+        // 关闭移动端菜单后滚动到顶部
-         window.scrollTo({
+        window.scrollTo({
-           top: 0,
+          top: 0,
-           left: 0,
+          left: 0,
-           behavior: 'smooth'
+          behavior: 'smooth'
-         });
+        });
-       });
+      });
     },
-    
+
     initScrollListener() {
       window.addEventListener('scroll', () => {
         if (window.pageYOffset > 200) {
@@ -230,7 +226,7 @@ export default {
   z-index: 1000 !important;
   background: rgba(255, 255, 255, 0.95) !important;
   backdrop-filter: blur(10px) !important;
-  transition: all var(--transition-speed) ease !important;
+  transition: all 0.3s ease !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
   /* 覆盖旧表格布局 */
   display: block !important;
@@ -239,68 +235,7 @@ export default {
 
 .header.mini {
   background: rgba(255, 255, 255, 0.98) !important;
-  box-shadow: var(--shadow-light) !important;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
-}
-
-/* 顶部联系信息 - 覆盖旧样式 */
-.top {
-  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
-  padding: 8px 0 !important;
-  /* 覆盖旧表格布局 */
-  display: block !important;
-  height: auto !important;
-  text-align: left !important;
-}
-
-.contact-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: white;
-}
-
-.contact-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: opacity 0.3s ease;
-}
-
-.contact-item:hover {
-  opacity: 0.8;
-}
-
-.contact-item a {
-  color: white;
-  text-decoration: none;
-  font-size: 14px;
-}
-
-.inlineTextIcon {
-  width: 16px;
-  height: 16px;
-  filter: brightness(0) invert(1);
-}
-
-/* 搜索框 */
-.search {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 20px;
-  padding: 6px 15px;
-  color: white;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.search::placeholder {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.search:focus {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: rgba(255, 255, 255, 0.5);
-  outline: none;
 }
 
 /* 主要导航区域 - 覆盖旧样式 */
@@ -313,8 +248,14 @@ export default {
 
 .nav-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  width: 100%;
+}
+
+.logoCell {
+  flex-shrink: 0;
+  margin-right: 40px;
 }
 
 .logoCell .logo {
@@ -326,10 +267,18 @@ export default {
   transform: scale(1.05);
 }
 
+.mainMenuCell {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+}
+
 /* 主导航菜单 */
 .mainMenu {
   display: flex;
   gap: 0;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .nav-item {
@@ -344,8 +293,9 @@ export default {
   font-weight: 500;
   font-size: 16px;
   transition: all 0.3s ease;
-  border-radius: var(--border-radius);
+  border-radius: 8px;
   position: relative;
+  white-space: nowrap;
 }
 
 .nav-link:hover {
@@ -373,15 +323,16 @@ export default {
 .dropDown {
   position: absolute;
   top: 100%;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   background: white;
-  border-radius: var(--border-radius);
+  border-radius: 8px;
-  box-shadow: var(--shadow-medium);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   padding: 15px 0;
   min-width: 200px;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-10px);
+  transform: translateX(-50%) translateY(-10px);
   transition: all 0.3s ease;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -389,7 +340,7 @@ export default {
 .nav-item:hover .dropDown {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
+  transform: translateX(-50%) translateY(0);
 }
 
 .dropdown-item {
@@ -399,6 +350,7 @@ export default {
   text-decoration: none;
   transition: all 0.3s ease;
   border-radius: 0;
+  text-align: center;
 }
 
 .dropdown-item:hover {
@@ -412,6 +364,7 @@ export default {
   display: inline-block;
   margin-left: 5px;
   transition: transform 0.3s ease;
+  font-size: 12px;
 }
 
 .nav-item:hover .downCaret {
@@ -480,8 +433,8 @@ export default {
   color: #2c3e50;
   text-decoration: none;
   font-weight: 500;
-  border-radius: var(--border-radius);
+  border-radius: 8px;
-  transition: all var(--transition-speed) ease;
+  transition: all 0.3s ease;
 }
 
 .menuContent a:hover,
@@ -515,267 +468,77 @@ export default {
   color: #3498db;
 }
 
-/* 现代响应式设计 - 使用容器查询和逻辑属性 */
+/* 响应式设计 */
-/* 基础响应式容器 */
+@media (max-width: 768px) {
-.header {
-  container-type: inline-size;
-  container-name: header;
-}
-
-/* 使用容器查询替代媒体查询 */
-@container header (max-width: 768px) {
   .desktop {
     display: none !important;
   }
-  
+
   .mobile {
     display: block !important;
   }
-  
+
-  .contact-info {
-    flex-direction: column !important;
-    gap: 10px !important;
-    align-items: flex-start !important;
-  }
-  
-  .searchContainer {
-    width: 100% !important;
-    margin-top: 10px !important;
-  }
-  
-  .search {
-    width: 100% !important;
-    margin-left: 0 !important;
-  }
-  
-  /* 移动端头部高度调整 */
-  .header {
-    height: auto !important;
-  }
-  
   .header .content {
     padding: 0 1em !important;
   }
+
+  body {
+    padding-top: 100px !important;
+  }
+
+  .nav-container {
+    gap: 1rem !important;
+  }
 }
 
-@container header (min-width: 769px) {
+@media (min-width: 769px) {
   .mobile {
     display: none !important;
   }
-  
+
   .desktop {
     display: block !important;
   }
-}
 
-/* 使用逻辑属性实现更好的国际化支持 */
+  .nav-container {
-.header .content {
+    gap: 2rem;
-  padding-inline: 3em;
-  padding-block: 0;
-}
-
-@media (max-width: 768px) {
-  .header .content {
-    padding-inline: 1em;
   }
 }
 
-/* 使用 CSS Grid 实现更灵活的布局 */
+@media (max-width: 1200px) {
-.nav-container {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 2rem;
-  align-items: center;
-}
-
-@container header (max-width: 768px) {
   .nav-container {
-    grid-template-columns: 1fr auto;
     gap: 1rem;
   }
-}
 
-/* 使用 CSS 自定义属性实现主题切换 */
+  .nav-link {
-:root {
+    padding: 12px 20px;
-  --header-bg: rgba(255, 255, 255, 0.95);
+    font-size: 15px;
-  --header-border: rgba(0, 0, 0, 0.1);
-  --nav-hover-bg: rgba(52, 152, 219, 0.1);
-  --nav-hover-color: #3498db;
-}
-
-/* 深色主题支持 */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --header-bg: rgba(30, 30, 30, 0.95);
-    --header-border: rgba(255, 255, 255, 0.1);
-    --nav-hover-bg: rgba(52, 152, 219, 0.2);
   }
 }
 
-/* 使用 CSS 自定义属性 */
+@media (max-width: 1024px) {
-.header {
+  .nav-link {
-  background: var(--header-bg) !important;
+    padding: 10px 15px;
-  border-bottom: 1px solid var(--header-border) !important;
+    font-size: 14px;
-}
-
-.nav-link:hover {
-  background: var(--nav-hover-bg) !important;
-  color: var(--nav-hover-color) !important;
-}
-
-/* 现代动画效果 - 使用 CSS 自定义属性和性能优化 */
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
   }
-  to {
+
-    opacity: 1;
+  .logoCell .logo {
-    transform: translateY(0);
+    height: 45px;
   }
 }
 
-/* 使用 will-change 优化动画性能 */
+/* 确保内容不被遮挡 */
-.nav-item {
-  will-change: transform, opacity;
-}
-
-/* 使用 CSS 自定义属性控制动画延迟 */
-.nav-item {
-  animation: slideDown 0.5s ease forwards;
-  animation-delay: calc(var(--animation-index, 0) * 0.1s);
-}
-
-/* 使用 CSS 计数器自动生成动画延迟 */
-.nav-item:nth-child(1) { --animation-index: 1; }
-.nav-item:nth-child(2) { --animation-index: 2; }
-.nav-item:nth-child(3) { --animation-index: 3; }
-.nav-item:nth-child(4) { --animation-index: 4; }
-
-/* 使用 CSS 逻辑属性实现更好的动画方向 */
-@keyframes slideInFromStart {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 支持 RTL 的动画 */
-[dir="rtl"] .nav-item {
-  animation: slideInFromStart 0.5s ease forwards;
-}
-
-/* 使用现代 CSS 实现内容间距 */
-/* 使用 CSS 自定义属性定义头部高度 */
-:root {
-  --header-height: 120px;
-  --header-height-mobile: 100px;
-  
-  /* 添加更多主题变量 */
-  --transition-speed: 0.3s;
-  --border-radius: 8px;
-  --shadow-light: 0 2px 20px rgba(0, 0, 0, 0.1);
-  --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
-}
-
-/* 容器查询回退方案 - 为不支持容器查询的浏览器提供媒体查询 */
-@supports not (container-type: inline-size) {
-  @media (max-width: 768px) {
-    .desktop {
-      display: none !important;
-    }
-    
-    .mobile {
-      display: block !important;
-    }
-    
-    .contact-info {
-      flex-direction: column !important;
-      gap: 10px !important;
-      align-items: flex-start !important;
-    }
-    
-    .searchContainer {
-      width: 100% !important;
-      margin-top: 10px !important;
-    }
-    
-    .search {
-      width: 100% !important;
-      margin-left: 0 !important;
-    }
-    
-    .header {
-      height: auto !important;
-    }
-    
-    .header .content {
-      padding: 0 1em !important;
-    }
-    
-    body {
-      padding-top: 100px !important;
-    }
-    
-    .nav-container {
-      grid-template-columns: 1fr auto !important;
-      gap: 1rem !important;
-    }
-  }
-  
-  @media (min-width: 769px) {
-    .mobile {
-      display: none !important;
-    }
-    
-    .desktop {
-      display: block !important;
-    }
-  }
-}
-
-/* 使用逻辑属性确保内容不被遮挡 */
 body {
-  padding-block-start: var(--header-height) !important;
+  padding-top: 120px !important;
-}
-
-/* 使用容器查询替代媒体查询 */
-@container header (max-width: 768px) {
-  body {
-    padding-block-start: var(--header-height-mobile) !important;
-  }
-}
-
-/* 使用 CSS 逻辑属性实现更好的 RTL 支持 */
-.header {
-  inset-block-start: 0;
-  inset-inline: 0;
-}
-
-/* 使用 CSS 逻辑属性实现更好的间距 */
-.contact-info {
-  gap: 1rem;
 }
 
+/* 使用逻辑属性实现更好的间距 */
 .nav-container {
   gap: 2rem;
 }
 
-/* 使用 CSS 逻辑属性实现更好的边框 */
+/* 使用逻辑属性实现更好的边框 */
 .header {
-  border-block-end: 1px solid var(--header-border) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
 }
-
-.nav-item {
-  animation: slideDown 0.5s ease forwards;
-}
-
-.nav-item:nth-child(1) { animation-delay: 0.1s; }
-.nav-item:nth-child(2) { animation-delay: 0.2s; }
-.nav-item:nth-child(3) { animation-delay: 0.3s; }
-.nav-item:nth-child(4) { animation-delay: 0.4s; }
 </style>

src/components/leftMenu.vue

@@ -1,76 +0,0 @@
-<template>
-
-  <div class="contentTableLeft" id="navSidebar" v-if="!isMobile">
-
-    <div id="navAccordion" class="accordion" style="opacity: 1;">
-
-      <div class="h1">
-        <font style="vertical-align: inherit;" v-if="curMenu">
-          <font style="vertical-align: inherit;"> {{curMenu.name}}</font>
-        </font>
-      </div>
-
-      <ul class="content" v-if="curMenu">
-        <li class="category" v-for=" sonmenu in curMenu.child" :key="sonmenu.name">
-          <router-link :to="sonmenu.url" :class="sonmenu.strong">
-            <div class="triangle"></div>
-            <font style="vertical-align: inherit;">
-              <font style="vertical-align: inherit;"> {{sonmenu.name}}</font>
-            </font>
-          </router-link>
-          <div class="mobileContent">
-            <h1> {{sonmenu.name}}</h1>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-
-</template>
-<script>
-import '../assets/css/content_pages.css';
-import { common } from '../static/common';
-export default {
-    data() {
-        return {
-            menus: window.config.menus,
-            isMobile: false,
-            curMenu: null,
-            curChildMenu: null,
-            strong: '',
-        };
-    },
-    created: function () {
-        this.Init();
-    },
-    methods: {
-        Init: function () {
-            this.isMobile = common.isMobile();
-            var path = this.$route.fullPath.split('/');
-
-            this.curMenu = this.menus.find((p) => {
-                return p.url.indexOf(path[1]) > 0;
-            });
-
-            this.curChildMenu = this.curMenu.child.find((p) => {
-                return p.url.indexOf(path[2]) > 0;
-            });
-
-            this.curMenu.child.map((p) => {
-                p.strong = 'categoryHead h2 linkProduct';
-                if (p.url.indexOf(path[2]) > 0) {
-                    this.curChildMenu.strong =
-                        'categoryHead h2 linkProduct strong';
-                }
-            });
-        },
-    },
-};
-</script>
-
-<style scoped>
-.contentTableLeft {
-    display: table;
-    float: left;
-}
-</style>

src/main.js

@@ -1,9 +1,7 @@
 import './assets/css/cookieconsent.min.css'
 import './assets/css/common.css'
 import 'swiper/swiper.min.css'
-import './static/config.js'
 import 'es6-promise/auto'
-
 import Vue from 'vue'
 import App from './App.vue'
 import Vuex from 'vuex'

src/router.js

@@ -2,12 +2,7 @@ import Vue from 'vue'
 import Router from "vue-router"
 
 import index from './views/index'
-
 import aboutUs from './views/aboutUs/aboutUs'
-
-
-
-
 import ourPlan from './views/ourPlan/ourPlan'
 import estateManagement from './views/ourPlan/estateManagement'
 import facilityManagement from './views/ourPlan/facilityManagement'
@@ -15,9 +10,6 @@ import iot from './views/ourPlan/iot'
 import aiSolutions from './views/ourPlan/aiSolutions'
 import technologyIntegration from './views/ourPlan/technologyIntegration'
 
-
-
-
 Vue.use(Router);
 
 const router = new Router({
@@ -36,19 +28,29 @@ const router = new Router({
       path: '/aboutUs',
       component: aboutUs
     },
-
     {
       path: '/ourPlan',
-      component: ourPlan,
+      component: ourPlan
-      children: [
+    },
-        { path: '', redirect: 'ourPlan' },
+    {
-        { path: 'ourPlan', component: ourPlan },
+      path: '/ourPlan/estateManagement',
-        { path: 'estateManagement', component: estateManagement },
+      component: estateManagement
-        { path: 'facilityManagement', component: facilityManagement },
+    },
-        { path: 'iot', component: iot },
+    {
-        { path: 'aiSolutions', component: aiSolutions },
+      path: '/ourPlan/facilityManagement',
-        { path: 'technologyIntegration', component: technologyIntegration }
+      component: facilityManagement
-      ]
+    },
+    {
+      path: '/ourPlan/iot',
+      component: iot
+    },
+    {
+      path: '/ourPlan/aiSolutions',
+      component: aiSolutions
+    },
+    {
+      path: '/ourPlan/technologyIntegration',
+      component: technologyIntegration
     },
     {
       path: '*',

src/static/config.js

@@ -1,57 +0,0 @@
-window.config = {
-    menus: [{
-            name: "首页",
-            url: "/index",
-            child: []
-        },
-        {
-            name: "我们的方案",
-            url: "/ourPlan",
-            child: [{
-                    name: "三维展示",
-                    url: "/ourPlan/reaEstate",
-                },
-                {
-                    name: "房地产和物业管理",
-                    url: "/ourPlan/estateManagement",
-                },
-                {
-                    name: "物联网（iot）",
-                    url: "/ourPlan/iot",
-                },
-                {
-                    name: "技术和集成",
-                    url: "/ourPlan/technologyIntegration",
-                },
-            ]
-        },
-        {
-            name: "前沿",
-            url: "/fulEdge",
-            child: [{
-                    name: "移动解决方案",
-                    url: "/fulEdge/mobileSolution",
-                },
-                {
-                    name: "其他",
-                    url: "/fulEdge/other",
-                }
-            ]
-        },
-        {
-            name: "关于我们",
-            url: "/aboutUs",
-            child: [{
-                    name: "与我们合作",
-                    url: "/aboutUs/cooperateWithUs",
-                },
-                {
-                    name: "丙维科技",
-                    url: "/aboutUs/propystTechnology",
-                },
-            ]
-        },
-
-    ]
-
-}

src/views/aboutUs/aboutUs.vue

@@ -351,7 +351,7 @@ export default {
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
-  background: linear-gradient(90deg, #3498db, #9b59b6);
+          background: linear-gradient(90deg, #3498db, #2980b9);
   border-radius: 2px;
 }
 

src/views/index.vue

@@ -91,16 +91,37 @@
       </a>
     </div>
 
-    <div id="pageBoxesContainer" class="page pageBoxes">
+         <!-- 产品展示区域 -->
-      <div class="box" v-for="product in productData" :key="product.name">
+     <div class="products-section">
-        <img width="100%" :src="product.img" />
+       <div class="container">
-        <div class="boxTableHeader">
+         <h2 class="section-title">核心解决方案</h2>
-          <div class="h2">{{product.name}}</div>
+         <p class="section-subtitle">为不同行业提供专业的技术解决方案，助力企业数字化转型</p>
-        </div>
+         
-        <a v-if="product.isLink||product.url.indexOf('http')>-1" target="view_window" :href="product.url"></a>
+         <div id="pageBoxesContainer" class="page pageBoxes">
-        <router-link v-else :to="product.url"> </router-link>
+           <div class="box" v-for="product in productData" :key="product.name">
-      </div>
+             <div class="product-image">
-    </div>
+               <img width="100%" :src="product.img" />
+               <div class="product-overlay">
+                 <div class="overlay-content">
+                   <span class="view-more">了解更多</span>
+                 </div>
+               </div>
+             </div>
+             
+             <div class="boxTableHeader">
+               <div class="h2">{{product.name}}</div>
+               <div class="product-description">{{product.description}}</div>
+               <div class="product-tags">
+                 <span v-for="tag in product.tags" :key="tag" class="tag">{{tag}}</span>
+               </div>
+             </div>
+             
+             <a v-if="product.isLink||product.url.indexOf('http')>-1" target="view_window" :href="product.url"></a>
+             <router-link v-else :to="product.url"> </router-link>
+           </div>
+         </div>
+       </div>
+     </div>
 
     <!-- 联系我们区域 -->
     <div class="contact-section">
@@ -147,7 +168,6 @@ let boxbg_smartbuildings = require('../assets/img/boxbg_smartbuildings.png')
 let boxbg_iot = require('../assets/img/boxbg_iot.png')
 let boxbg_facilitiesmanagement = require('../assets/img/boxbg_facilitiesmanagement.png')
 let boxbg_errands = require('../assets/img/boxbg_errands.png')
-let boxbg_propertyandrealestate = require('../assets/img/boxbg_propertyandrealestate.png')
 
 export default {
   data() {
@@ -230,39 +250,48 @@ export default {
           features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计']
         }
       ],
-      productData: [
+             productData: [
-        {
+         {
-          name: '智能终端',
+           name: 'AI集成',
-          img: boxbg_cleaning,
+           img: boxbg_cleaning,
-          url: '/超广角设备.pdf',
+           url: '/ourPlan/aiSolutions',
-          isLink: true,
+           isLink: false,
-        },
+           description: '基于人工智能技术，为企业提供智能化的业务解决方案',
-        {
+           tags: ['机器学习', '深度学习', '智能分析']
-          name: '智能建筑',
+         },
-          img: boxbg_smartbuildings,
+         {
-          url: '/IntelligentBuild',
+           name: '智能建筑',
-        },
+           img: boxbg_smartbuildings,
-        {
+           url: '/ourPlan/estateManagement',
-          name: '物联网',
+           isLink: false,
-          img: boxbg_iot,
+           description: '通过先进技术打造智能化建筑环境，提升建筑管理效率',
-          url: '/ourPlan/iot',
+           tags: ['BIM技术', '智能监控', '自动化管理']
-        },
+         },
-        {
+         {
-          name: '模型管理',
+           name: '物联网',
-          img: boxbg_facilitiesmanagement,
+           img: boxbg_iot,
-          url: 'http://mor.bimwe.com/',
+           url: '/ourPlan/iot',
-        },
+           isLink: false,
-        {
+           description: '连接万物，智能互联，打造数字化未来',
-          name: '三维展示',
+           tags: ['传感器网络', '数据采集', '智能分析']
-          img: boxbg_errands,
+         },
-          url: '/ourPlan/reaEstate',
+         {
-        },
+           name: '设施管理',
-        {
+           img: boxbg_facilitiesmanagement,
-          name: '智慧系统',
+           url: '/ourPlan/facilityManagement',
-          img: boxbg_propertyandrealestate,
+           isLink: false,
-          url: 'http://soda.bimwe.com/',
+           description: '智能化设施管理，提升运营效率与用户体验',
-        },
+           tags: ['预防性维护', '智能调度', '成本优化']
-      ],
+         },
+         {
+           name: '系统集成',
+           img: boxbg_errands,
+           url: '/ourPlan/technologyIntegration',
+           isLink: false,
+           description: '专业系统整合，构建统一的企业级平台',
+           tags: ['API集成', '数据同步', '统一管理']
+         },
+       ],
     }
   },
 
@@ -350,7 +379,7 @@ export default {
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
-  background: linear-gradient(90deg, #3498db, #9b59b6);
+  background: linear-gradient(90deg, #3498db, #2980b9);
   border-radius: 2px;
 }
 
@@ -581,20 +610,155 @@ export default {
     grid-template-columns: 1fr;
   }
   
-  .company-intro,
+       .company-intro,
   .core-advantages,
   .business-areas,
-  .contact-section {
+  .contact-section,
+  .products-section {
     padding: 60px 0;
   }
+  
+  .pageBoxes {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .boxTableHeader {
+    padding: 20px;
+  }
+  
+  .product-tags {
+    gap: 6px;
+  }
+  
+  .tag {
+    font-size: 0.75rem;
+    padding: 3px 10px;
+  }
 }
 
-/* 原有样式保持 */
+ /* 产品展示区域样式 */
-.swiper-pagination {
+.products-section {
-  bottom: 10%;
+  padding: 80px 0;
+  background: white;
 }
 
 .pageBoxes {
-  margin-top: 60px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 40px;
+  margin-top: 50px;
 }
+
+.box {
+  background: white;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
+  cursor: pointer;
+}
+
+.box:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+.product-image {
+  position: relative;
+  overflow: hidden;
+}
+
+.product-image img {
+  transition: transform 0.3s ease;
+}
+
+.box:hover .product-image img {
+  transform: scale(1.05);
+}
+
+.product-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(52, 152, 219, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.box:hover .product-overlay {
+  opacity: 1;
+}
+
+.overlay-content {
+  text-align: center;
+  color: white;
+}
+
+.view-more {
+  font-size: 1.2rem;
+  font-weight: 600;
+  padding: 12px 24px;
+  border: 2px solid white;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+}
+
+.box:hover .view-more {
+  background: white;
+  color: #3498db;
+}
+
+.boxTableHeader {
+  padding: 25px;
+  text-align: center;
+}
+
+.boxTableHeader .h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.product-description {
+  color: #6c757d;
+  line-height: 1.6;
+  margin-bottom: 20px;
+  font-size: 0.95rem;
+}
+
+.product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.tag {
+  background: #e9ecef;
+  color: #495057;
+  padding: 4px 12px;
+  border-radius: 15px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.tag:hover {
+  background: #3498db;
+  color: white;
+  transform: translateY(-2px);
+}
+
+ /* 原有样式保持 */
+ .swiper-pagination {
+   bottom: 10%;
+ }
 </style>

src/views/ourPlan/aiSolutions.vue

@@ -26,18 +26,22 @@
           <h3 class="section-title">核心AI服务</h3>
           <div class="ai-services">
             <div class="service-item">
+              <div class="service-icon">📊</div>
               <h4>智能数据分析</h4>
               <p>利用AI算法分析海量数据，挖掘商业价值，为决策提供数据支撑。</p>
             </div>
             <div class="service-item">
+              <div class="service-icon">💬</div>
               <h4>智能客服系统</h4>
               <p>基于NLP技术的智能客服，24/7全天候服务，提升客户体验。</p>
             </div>
             <div class="service-item">
+              <div class="service-icon">🔮</div>
               <h4>预测性维护</h4>
               <p>通过AI预测设备故障，实现预防性维护，降低维护成本。</p>
             </div>
             <div class="service-item">
+              <div class="service-icon">👁️</div>
               <h4>智能图像识别</h4>
               <p>计算机视觉技术，实现自动化检测、质量控制和安防监控。</p>
             </div>
@@ -50,6 +54,28 @@
             AI解决方案广泛应用于制造业、金融、医疗、零售、物流等多个行业，帮助企业实现智能化升级，提升核心竞争力。
           </p>
         </div>
+
+        <div class="content-section">
+          <h3 class="section-title">技术架构</h3>
+          <div class="tech-architecture">
+            <div class="tech-layer">
+              <h4>应用层</h4>
+              <p>智能应用、业务系统、用户界面</p>
+            </div>
+            <div class="tech-layer">
+              <h4>算法层</h4>
+              <p>机器学习、深度学习、自然语言处理</p>
+            </div>
+            <div class="tech-layer">
+              <h4>数据层</h4>
+              <p>数据存储、数据处理、数据安全</p>
+            </div>
+            <div class="tech-layer">
+              <h4>基础设施层</h4>
+              <p>云计算、GPU集群、网络通信</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -74,6 +100,8 @@ export default {
 .ai-solutions-page {
   min-height: 100vh;
   background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
 }
 
 .page-banner {
@@ -81,6 +109,7 @@ export default {
   color: white;
   padding: 80px 0;
   text-align: center;
+  flex-shrink: 0;
 }
 
 .banner-title {
@@ -95,6 +124,7 @@ export default {
 }
 
 .main-content {
+  flex: 1;
   padding: 60px 0;
 }
 
@@ -126,7 +156,7 @@ export default {
 
 .ai-services {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   margin-top: 40px;
 }
@@ -134,20 +164,28 @@ export default {
 .service-item {
   background: white;
   padding: 30px;
-  border-radius: 10px;
+  border-radius: 15px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
   text-align: center;
-  transition: transform 0.3s ease;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .service-item:hover {
-  transform: translateY(-5px);
+  transform: translateY(-8px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+.service-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
 }
 
 .service-item h4 {
   color: #3498db;
   font-size: 1.3rem;
   margin-bottom: 1rem;
+  font-weight: 600;
 }
 
 .service-item p {
@@ -155,6 +193,40 @@ export default {
   line-height: 1.6;
 }
 
+.tech-architecture {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 25px;
+  margin-top: 40px;
+}
+
+.tech-layer {
+  background: white;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  border-left: 4px solid #3498db;
+  transition: transform 0.3s ease;
+}
+
+.tech-layer:hover {
+  transform: translateY(-5px);
+}
+
+.tech-layer h4 {
+  color: #2c3e50;
+  font-size: 1.2rem;
+  margin-bottom: 0.8rem;
+  font-weight: 600;
+}
+
+.tech-layer p {
+  color: #666;
+  line-height: 1.5;
+  font-size: 0.95rem;
+}
+
 @media (max-width: 768px) {
   .banner-title {
     font-size: 2rem;
@@ -167,5 +239,17 @@ export default {
   .ai-services {
     grid-template-columns: 1fr;
   }
+  
+  .tech-architecture {
+    grid-template-columns: 1fr;
+  }
+  
+  .main-content {
+    padding: 40px 0;
+  }
+  
+  .content-section {
+    margin-bottom: 40px;
+  }
 }
 </style>

src/views/ourPlan/estateManagement.vue

@@ -1,24 +1,163 @@
 <template>
-  <div>
+  <div class="estate-management-page">
-    <leftMenu> </leftMenu>
+    <ihead></ihead>
-    <icontent>
+    
-      <p> 房地产和物业是涵盖多个学科的专业，旨在确保建筑环境的功能。这是通过将人员，地点，流程和技术相互整合来实现的。</p>
+    <div class="page-content">
-
+      <div class="banner-section">
-      <p> 无论您是购买，出售，租赁还是翻新您的房产，我们的解决方案都可以帮助您根据显示趋势和实时数据的当前图形关键指标做出明智的决策。</p>
+        <h1>智能建筑解决方案</h1>
-
+        <p>通过先进技术打造智能化建筑环境</p>
-      <p> 在我们的解决方案中，所有功能都完全集成在一起，但也可以单独使用。</p>
+      </div>
-    </icontent>
+      
+      <div class="content-section">
+        <div class="intro-text">
+          <h2>智能建筑概述</h2>
+          <p>房地产和物业是涵盖多个学科的专业，旨在确保建筑环境的功能。这是通过将人员，地点，流程和技术相互整合来实现的。</p>
+          
+          <p>无论您是购买，出售，租赁还是翻新您的房产，我们的解决方案都可以帮助您根据显示趋势和实时数据的当前图形关键指标做出明智的决策。</p>
+          
+          <p>在我们的解决方案中，所有功能都完全集成在一起，但也可以单独使用。</p>
+        </div>
+        
+        <div class="features-grid">
+          <div class="feature-card">
+            <h3>智能监控</h3>
+            <p>实时监控建筑状态，包括能耗、安全、环境等关键指标</p>
+          </div>
+          <div class="feature-card">
+            <h3>自动化管理</h3>
+            <p>通过AI算法自动调节建筑系统，提升运营效率</p>
+          </div>
+          <div class="feature-card">
+            <h3>数据分析</h3>
+            <p>深度分析建筑数据，为决策提供科学依据</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <ifooter></ifooter>
   </div>
-
 </template>
 
 <script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+
 export default {
-    data() {
+  name: 'EstateManagement',
-        return {};
+  components: {
-    },
+    ihead,
+    ifooter
+  },
+  data() {
+    return {};
+  },
 };
 </script>
 
 <style scoped>
+.estate-management-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  flex: 1;
+  padding-top: 120px;
+}
+
+.banner-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.banner-section h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  font-weight: 300;
+}
+
+.banner-section p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.content-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.intro-text {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.intro-text h2 {
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.intro-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #666;
+  margin-bottom: 20px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-top: 60px;
+}
+
+.feature-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+}
+
+.feature-card h3 {
+  font-size: 1.5rem;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.feature-card p {
+  color: #666;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .banner-section h1 {
+    font-size: 2rem;
+  }
+  
+  .banner-section p {
+    font-size: 1rem;
+  }
+  
+  .content-section {
+    padding: 40px 20px;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/views/ourPlan/facilityManagement.vue

@@ -1,20 +1,274 @@
 <template>
-  <div>
+  <div class="facility-management-page">
-    <leftMenu> </leftMenu>
+    <ihead></ihead>
-    <icontent></icontent>
+    
+    <div class="page-content">
+      <div class="banner-section">
+        <h1>设施管理解决方案</h1>
+        <p>智能化设施管理，提升运营效率与用户体验</p>
+      </div>
+      
+      <div class="content-section">
+        <div class="intro-text">
+          <h2>设施管理概述</h2>
+          <p>现代设施管理不仅仅是维护和运营，更是通过技术手段实现智能化、数据化的综合管理，为企业创造更大的价值。</p>
+        </div>
+        
+        <div class="services-grid">
+          <div class="service-card">
+            <div class="service-icon">🏢</div>
+            <h3>建筑维护</h3>
+            <p>定期检查、预防性维护、应急响应，确保建筑设施始终处于最佳状态</p>
+          </div>
+          
+          <div class="service-card">
+            <div class="service-icon">🔧</div>
+            <h3>设备管理</h3>
+            <p>设备生命周期管理、性能监控、故障预警，最大化设备使用效率</p>
+          </div>
+          
+          <div class="service-card">
+            <div class="service-icon">📊</div>
+            <h3>数据分析</h3>
+            <p>运营数据收集、性能分析、优化建议，数据驱动的决策支持</p>
+          </div>
+          
+          <div class="service-card">
+            <div class="service-icon">👥</div>
+            <h3>人员管理</h3>
+            <p>工作流程优化、任务分配、绩效评估，提升团队工作效率</p>
+          </div>
+        </div>
+        
+        <div class="benefits-section">
+          <h2>我们的优势</h2>
+          <div class="benefits-list">
+            <div class="benefit-item">
+              <span class="benefit-number">01</span>
+              <div class="benefit-content">
+                <h4>智能化管理</h4>
+                <p>AI算法优化运营流程，自动识别问题并提供解决方案</p>
+              </div>
+            </div>
+            
+            <div class="benefit-item">
+              <span class="benefit-number">02</span>
+              <div class="benefit-content">
+                <h4>实时监控</h4>
+                <p>24/7实时监控系统状态，及时发现并处理潜在问题</p>
+              </div>
+            </div>
+            
+            <div class="benefit-item">
+              <span class="benefit-number">03</span>
+              <div class="benefit-content">
+                <h4>成本优化</h4>
+                <p>通过预防性维护和智能调度，显著降低运营成本</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <ifooter></ifooter>
   </div>
-
 </template>
 
 <script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+
 export default {
-    data() {
+  name: 'FacilityManagement',
-        return {
+  components: {
-            msg: 'Welcome to Your Vue.js App',
+    ihead,
-        };
+    ifooter
-    },
+  },
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+    };
+  },
 };
 </script>
 
 <style scoped>
+.facility-management-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  flex: 1;
+  padding-top: 120px;
+}
+
+.banner-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.banner-section h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  font-weight: 300;
+}
+
+.banner-section p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.content-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.intro-text {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.intro-text h2 {
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.intro-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #666;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 30px;
+  margin: 60px 0;
+}
+
+.service-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.service-card:hover {
+  transform: translateY(-10px);
+  border-color: #667eea;
+  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
+}
+
+.service-icon {
+  font-size: 3rem;
+  margin-bottom: 20px;
+}
+
+.service-card h3 {
+  font-size: 1.5rem;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.service-card p {
+  color: #666;
+  line-height: 1.6;
+}
+
+.benefits-section {
+  margin-top: 80px;
+}
+
+.benefits-section h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 50px;
+}
+
+.benefits-list {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.benefit-item {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  padding: 30px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  transition: transform 0.3s ease;
+}
+
+.benefit-item:hover {
+  transform: translateX(10px);
+}
+
+.benefit-number {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.benefit-content h4 {
+  font-size: 1.3rem;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.benefit-content p {
+  color: #666;
+  line-height: 1.6;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .banner-section h1 {
+    font-size: 2rem;
+  }
+  
+  .banner-section p {
+    font-size: 1rem;
+  }
+  
+  .content-section {
+    padding: 40px 20px;
+  }
+  
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .benefit-item {
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+  
+  .benefit-item:hover {
+    transform: translateY(-5px);
+  }
+}
 </style>

src/views/ourPlan/iot.vue

@@ -1,28 +1,228 @@
 <template>
-  <div>
+  <div class="iot-page">
-    <leftMenu> </leftMenu>
+    <ihead></ihead>
-    <icontent>
+    
-      <p>
+    <div class="page-content">
-        <img src="../../assets/img/iot1.jpg" style="width:100%" />
+      <div class="banner-section">
-      </p>
+        <h1>物联网解决方案</h1>
-
+        <p>连接万物，智能互联，打造数字化未来</p>
-      <p>
+      </div>
-        <img src="../../assets/img/iot1.jpg" style="width:100%" />
+      
-      </p>
+      <div class="content-section">
-    </icontent>
+        <div class="intro-text">
+          <h2>物联网技术概述</h2>
+          <p>物联网（IoT）技术通过传感器、网络和数据分析，实现设备间的智能互联和数据共享，为企业提供实时监控和智能决策支持。</p>
+        </div>
+        
+        <div class="image-showcase">
+          <div class="image-item">
+            <img src="@/assets/img/iot1.jpg" alt="物联网应用场景1" />
+            <div class="image-overlay">
+              <h3>智能监控</h3>
+              <p>实时数据采集与分析</p>
+            </div>
+          </div>
+          
+          <div class="image-item">
+            <img src="@/assets/img/iot2.jpg" alt="物联网应用场景2" />
+            <div class="image-overlay">
+              <h3>设备互联</h3>
+              <p>万物互联的智能网络</p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="features-grid">
+          <div class="feature-card">
+            <h3>传感器网络</h3>
+            <p>部署多种传感器，实时监测环境参数和设备状态</p>
+          </div>
+          <div class="feature-card">
+            <h3>数据采集</h3>
+            <p>高效收集和处理海量物联网数据</p>
+          </div>
+          <div class="feature-card">
+            <h3>智能分析</h3>
+            <p>AI算法分析数据，提供预测性维护建议</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <ifooter></ifooter>
   </div>
 </template>
 
 <script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+
 export default {
-    data() {
+  name: 'IoT',
-        return {
+  components: {
-            msg: 'Welcome to Your Vue.js App',
+    ihead,
-        };
+    ifooter
-    },
+  },
-    mounted() {},
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+    };
+  },
+  mounted() {},
 };
 </script>
 
 <style scoped>
+.iot-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  flex: 1;
+  padding-top: 120px;
+}
+
+.banner-section {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.banner-section h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  font-weight: 300;
+}
+
+.banner-section p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.content-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.intro-text {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.intro-text h2 {
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.intro-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #666;
+  max-width: 800px;
+  margin: 0 auto 20px;
+}
+
+.image-showcase {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px;
+  margin: 60px 0;
+}
+
+.image-item {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.image-item img {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.image-item:hover img {
+  transform: scale(1.05);
+}
+
+.image-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0,0,0,0.8));
+  color: white;
+  padding: 30px 20px 20px;
+  text-align: center;
+}
+
+.image-overlay h3 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+.image-overlay p {
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-top: 60px;
+}
+
+.feature-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+}
+
+.feature-card h3 {
+  font-size: 1.5rem;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.feature-card p {
+  color: #666;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .banner-section h1 {
+    font-size: 2rem;
+  }
+  
+  .banner-section p {
+    font-size: 1rem;
+  }
+  
+  .content-section {
+    padding: 40px 20px;
+  }
+  
+  .image-showcase {
+    grid-template-columns: 1fr;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/views/ourPlan/ourPlan.vue

@@ -1,25 +1,236 @@
 <template>
-  <div>
+  <div class="our-plan-page">
     <ihead></ihead>
-    <div class="contentPage">
+    
-
+    <!-- 页面横幅 -->
-      <div class="contentTable">
+    <div class="page-banner">
-        <router-view></router-view>
+      <div class="banner-content">
+        <div class="container">
+          <h1 class="banner-title">我们的方案</h1>
+          <p class="banner-subtitle">专业解决方案，助力企业数字化转型</p>
+        </div>
       </div>
     </div>
+
+    <!-- 主要内容 -->
+    <div class="main-content">
+      <div class="container">
+        <div class="content-section">
+          <h3 class="section-title">核心服务</h3>
+          <div class="services-grid">
+            <div class="service-card">
+              <div class="service-icon">🏗️</div>
+              <h4>智能建筑</h4>
+              <p>运用先进技术打造智能化建筑，提升建筑管理效率和用户体验。</p>
+              <router-link to="/ourPlan/estateManagement" class="service-link">了解更多</router-link>
+            </div>
+            
+            <div class="service-card">
+              <div class="service-icon">🌐</div>
+              <h4>物联网</h4>
+              <p>构建完整的物联网生态系统，实现设备互联互通和智能控制。</p>
+              <router-link to="/ourPlan/iot" class="service-link">了解更多</router-link>
+            </div>
+            
+            <div class="service-card">
+              <div class="service-icon">⚙️</div>
+              <h4>设施管理</h4>
+              <p>提供全面的设施管理解决方案，确保设备高效运行。</p>
+              <router-link to="/ourPlan/facilityManagement" class="service-link">了解更多</router-link>
+            </div>
+            
+            <div class="service-card">
+              <div class="service-icon">🤖</div>
+              <h4>AI解决方案</h4>
+              <p>运用人工智能技术，为企业提供智能化决策支持。</p>
+              <router-link to="/ourPlan/aiSolutions" class="service-link">了解更多</router-link>
+            </div>
+            
+            <div class="service-card">
+              <div class="service-icon">🔧</div>
+              <h4>技术集成</h4>
+              <p>整合多种技术平台，构建统一的技术架构体系。</p>
+              <router-link to="/ourPlan/technologyIntegration" class="service-link">了解更多</router-link>
+            </div>
+          </div>
+        </div>
+
+        <div class="content-section">
+          <h3 class="section-title">为什么选择我们？</h3>
+          <div class="features">
+            <div class="feature-item">
+              <h4>专业团队</h4>
+              <p>拥有丰富的行业经验和专业技术能力</p>
+            </div>
+            <div class="feature-item">
+              <h4>创新技术</h4>
+              <p>持续关注前沿技术，提供最新解决方案</p>
+            </div>
+            <div class="feature-item">
+              <h4>优质服务</h4>
+              <p>全程专业服务，确保项目成功实施</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <ifooter></ifooter>
   </div>
 </template>
 
 <script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+
 export default {
-    data() {
+  name: 'ourPlan',
-        return {
+  components: {
-            msg: 'Welcome to Your Vue.js App',
+    ihead,
-        };
+    ifooter
-    },
+  }
-};
+}
 </script>
 
 <style scoped>
+.our-plan-page {
+  min-height: 100vh;
+  background: #f8f9fa;
+}
+
+.page-banner {
+  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+  color: white;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.banner-title {
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+.banner-subtitle {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.main-content {
+  padding: 60px 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.content-section {
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2rem;
+  color: #2c3e50;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.service-card {
+  background: white;
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.service-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+.service-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.service-card h4 {
+  color: #2c3e50;
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.service-card p {
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.service-link {
+  display: inline-block;
+  padding: 10px 20px;
+  background: #3498db;
+  color: white;
+  text-decoration: none;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.service-link:hover {
+  background: #2980b9;
+  transform: scale(1.05);
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-item {
+  text-align: center;
+  padding: 30px;
+}
+
+.feature-item h4 {
+  color: #3498db;
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+}
+
+.feature-item p {
+  color: #666;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .banner-title {
+    font-size: 2rem;
+  }
+  
+  .banner-subtitle {
+    font-size: 1rem;
+  }
+  
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .features {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/views/ourPlan/technologyIntegration.vue

@@ -1,22 +1,318 @@
 <template>
-  <div>
+  <div class="technology-integration-page">
-    <leftMenu> </leftMenu>
+    <ihead></ihead>
-    <icontent>
+    
-      <p> 我们所有的解决方案都基于最新技术，完全基于云的SaaS服务。为了传递数据和图形，可以对所有类型的系统进行基于Web服务的集成。</p>
+    <div class="page-content">
-      <p> 我们强大的移动应用程序使用我们的GeoModel来可视化图形。有关我们的GeoModel的更多信息，请参阅“智能建筑和物联网”这一点。</p>
+             <div class="banner-section">
-    </icontent>
+         <h1>系统集成解决方案</h1>
+         <p>专业系统整合，构建统一的企业级平台</p>
+       </div>
+      
+      <div class="content-section">
+                 <div class="intro-text">
+           <h2>系统集成概述</h2>
+           <p>我们提供专业的系统集成服务，帮助企业将分散的业务系统、数据源和应用程序进行统一整合。基于云原生架构，构建稳定可靠的企业级集成平台。</p>
+           <p>通过标准化的集成接口和强大的数据同步能力，实现业务流程的自动化和数据的实时共享，提升企业运营效率。</p>
+         </div>
+        
+                 <div class="integration-methods">
+           <h2>集成方案</h2>
+          <div class="methods-grid">
+            <div class="method-card">
+              <div class="method-icon">🔌</div>
+              <h3>API集成</h3>
+              <p>提供标准化的RESTful API接口，支持多种数据格式，实现系统间的无缝连接</p>
+              <ul>
+                <li>RESTful API</li>
+                <li>JSON/XML支持</li>
+                <li>OAuth2认证</li>
+                <li>实时数据同步</li>
+              </ul>
+            </div>
+            
+                           <div class="method-card">
+                 <div class="method-icon">🌐</div>
+                 <h3>中间件集成</h3>
+                 <p>基于企业级中间件技术，实现复杂业务系统的深度集成</p>
+                 <ul>
+                   <li>消息队列</li>
+                   <li>ESB总线</li>
+                   <li>工作流引擎</li>
+                   <li>事务管理</li>
+                 </ul>
+               </div>
+            
+                           <div class="method-card">
+                 <div class="method-icon">📱</div>
+                 <h3>数据集成</h3>
+                 <p>实现多源数据的统一采集、清洗和同步，构建企业数据中台</p>
+                 <ul>
+                   <li>ETL工具</li>
+                   <li>数据仓库</li>
+                   <li>实时同步</li>
+                   <li>数据治理</li>
+                 </ul>
+               </div>
+          </div>
+        </div>
+        
+                 <div class="features-section">
+           <h2>服务优势</h2>
+          <div class="features-list">
+                         <div class="feature-item">
+               <div class="feature-icon">☁️</div>
+               <div class="feature-content">
+                 <h4>云端部署</h4>
+                 <p>基于云原生架构，支持弹性扩展，确保系统高可用性和稳定性</p>
+               </div>
+             </div>
+            
+                         <div class="feature-item">
+               <div class="feature-icon">🔒</div>
+               <div class="feature-content">
+                 <h4>安全可靠</h4>
+                 <p>多层次安全防护，支持企业级权限管理，确保数据安全和系统稳定</p>
+               </div>
+             </div>
+            
+                         <div class="feature-item">
+               <div class="feature-icon">📊</div>
+               <div class="feature-content">
+                 <h4>统一管理</h4>
+                 <p>提供统一的系统管理界面，简化运维操作，提升管理效率</p>
+               </div>
+             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <ifooter></ifooter>
   </div>
 </template>
 
 <script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+
 export default {
-    data() {
+  name: 'TechnologyIntegration',
-        return {
+  components: {
-            msg: 'Welcome to Your Vue.js App',
+    ihead,
-        };
+    ifooter
-    },
+  },
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+    };
+  },
 };
 </script>
 
 <style scoped>
+.technology-integration-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-content {
+  flex: 1;
+  padding-top: 120px;
+}
+
+.banner-section {
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  color: white;
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.banner-section h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  font-weight: 300;
+}
+
+.banner-section p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.content-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.intro-text {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.intro-text h2 {
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.intro-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #666;
+  max-width: 800px;
+  margin: 0 auto 20px;
+}
+
+.integration-methods {
+  margin: 80px 0;
+}
+
+.integration-methods h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 50px;
+}
+
+.methods-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 30px;
+}
+
+.method-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: transform 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.method-card:hover {
+  transform: translateY(-10px);
+  border-color: #3498db;
+  box-shadow: 0 20px 40px rgba(52, 152, 219, 0.2);
+}
+
+.method-icon {
+  font-size: 3rem;
+  margin-bottom: 20px;
+}
+
+.method-card h3 {
+  font-size: 1.5rem;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.method-card p {
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.method-card ul {
+  list-style: none;
+  padding: 0;
+  text-align: left;
+}
+
+.method-card li {
+  color: #555;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+  position: relative;
+  padding-left: 20px;
+}
+
+.method-card li:before {
+  content: "✓";
+  color: #3498db;
+  position: absolute;
+  left: 0;
+  font-weight: bold;
+}
+
+.method-card li:last-child {
+  border-bottom: none;
+}
+
+.features-section {
+  margin-top: 80px;
+}
+
+.features-section h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 50px;
+}
+
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  padding: 30px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  transition: transform 0.3s ease;
+}
+
+.feature-item:hover {
+  transform: translateX(10px);
+}
+
+.feature-icon {
+  font-size: 3rem;
+  flex-shrink: 0;
+}
+
+.feature-content h4 {
+  font-size: 1.3rem;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.feature-content p {
+  color: #666;
+  line-height: 1.6;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .banner-section h1 {
+    font-size: 2rem;
+  }
+  
+  .banner-section p {
+    font-size: 1rem;
+  }
+  
+  .content-section {
+    padding: 40px 20px;
+  }
+  
+  .methods-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .feature-item {
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+  
+  .feature-item:hover {
+    transform: translateY(-5px);
+  }
+}
 </style>