1

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">
-        <img width="100%" :src="product.img" />
-        <div class="boxTableHeader">
-          <div class="h2">{{product.name}}</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 class="products-section">
+       <div class="container">
+         <h2 class="section-title">核心解决方案</h2>
+         <p class="section-subtitle">为不同行业提供专业的技术解决方案，助力企业数字化转型</p>
+         
+         <div id="pageBoxesContainer" class="page pageBoxes">
+           <div class="box" v-for="product in productData" :key="product.name">
+             <div class="product-image">
+               <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: [
-        {
-          name: '智能终端',
-          img: boxbg_cleaning,
-          url: '/超广角设备.pdf',
-          isLink: true,
-        },
-        {
-          name: '智能建筑',
-          img: boxbg_smartbuildings,
-          url: '/IntelligentBuild',
-        },
-        {
-          name: '物联网',
-          img: boxbg_iot,
-          url: '/ourPlan/iot',
-        },
-        {
-          name: '模型管理',
-          img: boxbg_facilitiesmanagement,
-          url: 'http://mor.bimwe.com/',
-        },
-        {
-          name: '三维展示',
-          img: boxbg_errands,
-          url: '/ourPlan/reaEstate',
-        },
-        {
-          name: '智慧系统',
-          img: boxbg_propertyandrealestate,
-          url: 'http://soda.bimwe.com/',
-        },
-      ],
+             productData: [
+         {
+           name: 'AI集成',
+           img: boxbg_cleaning,
+           url: '/ourPlan/aiSolutions',
+           isLink: false,
+           description: '基于人工智能技术，为企业提供智能化的业务解决方案',
+           tags: ['机器学习', '深度学习', '智能分析']
+         },
+         {
+           name: '智能建筑',
+           img: boxbg_smartbuildings,
+           url: '/ourPlan/estateManagement',
+           isLink: false,
+           description: '通过先进技术打造智能化建筑环境，提升建筑管理效率',
+           tags: ['BIM技术', '智能监控', '自动化管理']
+         },
+         {
+           name: '物联网',
+           img: boxbg_iot,
+           url: '/ourPlan/iot',
+           isLink: false,
+           description: '连接万物，智能互联，打造数字化未来',
+           tags: ['传感器网络', '数据采集', '智能分析']
+         },
+         {
+           name: '设施管理',
+           img: boxbg_facilitiesmanagement,
+           url: '/ourPlan/facilityManagement',
+           isLink: false,
+           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 {
-  bottom: 10%;
+ /* 产品展示区域样式 */
+.products-section {
+  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>