fix: 优化官网内容

src/views/ourPlan/ourPlan.vue

@@ -1,89 +1,42 @@
 <template>
   <div class="our-plan-page">
     <ihead></ihead>
-    
-    <!-- 页面横幅 -->
-    <div class="page-banner">
-      <div class="banner-content">
-        <div class="container">
-          <h1 class="banner-title">我们的方案</h1>
-          <p class="banner-subtitle">AI驱动数字化转型，重塑企业核心竞争力</p>
-        </div>
-      </div>
-      <!-- GIF Banner -->
-      <div class="gif-banner">
-        <img src="https://bimwe.oss-cn-shanghai.aliyuncs.com/web/foundry_1.gif" alt="技术展示" class="banner-gif">
-      </div>
-    </div>
 
-    <!-- 主要内容 -->
-    <div class="main-content">
+    <section class="page-banner">
+      <div class="gif-banner" aria-hidden="true">
+        <img src="https://bimwe.oss-cn-shanghai.aliyuncs.com/web/foundry_1.gif" alt="" class="banner-gif">
+      </div>
+      <div class="container banner-content">
+        <h1 class="banner-title">解决方案</h1>
+        <p class="banner-subtitle">覆盖 AI、App、小程序与 Web 产品交付，面向真实业务场景落地。</p>
+      </div>
+    </section>
+
+    <section 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">BIM</div>
-              <h4>AI智能建筑</h4>
-              <p>运用AI技术打造智能化建筑，通过机器学习优化建筑管理效率和用户体验。</p>
-              <router-link to="/ourPlan/estateManagement" class="service-link">了解更多</router-link>
-            </div>
-            
-            <div class="service-card">
-              <div class="service-icon">IoT</div>
-              <h4>AI物联网</h4>
-              <p>构建AI驱动的物联网生态系统，实现智能设备互联互通和自动化控制。</p>
-              <router-link to="/ourPlan/iot" class="service-link">了解更多</router-link>
-            </div>
-            
-            <div class="service-card">
-              <div class="service-icon">
-                <img src="../../assets/img/ic_1.png" alt="设施管理" class="icon-image">
-              </div>
-              <h4>AI设施管理</h4>
-              <p>提供AI驱动的设施管理解决方案，通过智能分析确保设备高效运行。</p>
-              <router-link to="/ourPlan/facilityManagement" class="service-link">了解更多</router-link>
-            </div>
-            
-            <div class="service-card">
-              <div class="service-icon">
-                <img src="../../assets/img/ic_2.png" alt="AI解决方案" class="icon-image">
-              </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">
-                <img src="../../assets/img/ic_3.png" alt="技术集成" class="icon-image">
-              </div>
-              <h4>AI技术集成</h4>
-              <p>整合多种AI技术平台，构建统一的智能技术架构体系。</p>
-              <router-link to="/ourPlan/technologyIntegration" class="service-link">了解更多</router-link>
-            </div>
-          </div>
+        <h2 class="section-title">核心服务</h2>
+        <div class="services-grid">
+          <article class="service-card" v-for="item in services" :key="item.title">
+            <div class="service-icon" v-html="item.icon"></div>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.description }}</p>
+            <router-link :to="item.url" class="service-link">查看方案</router-link>
+          </article>
         </div>
+      </div>
+    </section>
 
-        <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>
+    <section class="main-content muted">
+      <div class="container">
+        <h2 class="section-title">交付方式</h2>
+        <div class="features">
+          <div class="feature-item" v-for="feature in features" :key="feature.title">
+            <h3>{{ feature.title }}</h3>
+            <p>{{ feature.description }}</p>
           </div>
         </div>
       </div>
-    </div>
+    </section>
 
     <ifooter></ifooter>
   </div>
@@ -93,11 +46,72 @@
 import ihead from '@/components/ihead.vue'
 import ifooter from '@/components/ifooter.vue'
 
+const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`
+
 export default {
   name: 'ourPlan',
-  components: {
-    ihead,
-    ifooter
+  components: { ihead, ifooter },
+  data() {
+    return {
+      services: [
+        {
+          title: 'AI 集成',
+          description: '将智能能力接入知识库、客服、工单和运营流程，形成可验收业务结果。',
+          url: '/ourPlan/aiSolutions',
+          icon: icon('<path d="M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"/><path d="M9 9h6v6H9zM12 2v2M12 20v2M2 12h2M20 12h2"/>')
+        },
+        {
+          title: '智能建筑',
+          description: '整合空间、设备与巡检数据，支持告警联动和建筑运营看板。',
+          url: '/ourPlan/estateManagement',
+          icon: icon('<path d="M4 21V5.8C4 4.8 4.8 4 5.8 4h7.4c1 0 1.8.8 1.8 1.8V21"/><path d="M15 9h3.2c1 0 1.8.8 1.8 1.8V21"/><path d="M8 8h3M8 12h3M8 16h3M3 21h18"/>')
+        },
+        {
+          title: '物联网',
+          description: '连接设备与边缘数据，建设实时状态感知和运维调度能力。',
+          url: '/ourPlan/iot',
+          icon: icon('<circle cx="12" cy="12" r="3"/><path d="M3 9a9 9 0 0 1 18 0M6 12a6 6 0 0 1 12 0M9 15a3 3 0 0 1 6 0"/><path d="M12 15v6"/>')
+        },
+        {
+          title: '设施管理',
+          description: '围绕工单、保养、备件和验收搭建标准化设施运营流程。',
+          url: '/ourPlan/facilityManagement',
+          icon: icon('<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/>')
+        },
+        {
+          title: '系统集成',
+          description: '打通业务系统、数据平台和权限体系，减少重复建设成本。',
+          url: '/ourPlan/technologyIntegration',
+          icon: icon('<path d="M4 7h6v4H4zM14 13h6v4h-6z"/><path d="M10 9h4v2h-4zM10 14h4v2h-4z"/>')
+        },
+        {
+          title: 'App 交付',
+          description: '覆盖 iOS / Android 的业务应用设计、开发、联调和版本迭代。',
+          url: '/ourPlan/appDelivery',
+          icon: icon('<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M10 5h4M11 18h2"/>')
+        },
+        {
+          title: '小程序方案',
+          description: '提供小程序从场景定义、功能开发到上线运营的全流程支持。',
+          url: '/ourPlan/miniProgram',
+          icon: icon('<rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/>')
+        }
+      ],
+      features: [
+        {
+          title: '先评估再实施',
+          description: '先确认数据质量、系统边界与业务目标，再定义交付优先级。'
+        },
+        {
+          title: '跨端协同开发',
+          description: '同一业务场景可同步规划 Web、App、小程序和后台管理能力。'
+        },
+        {
+          title: '结果可验收',
+          description: '围绕效率、时效、稳定性等指标跟踪上线效果，支持持续迭代。'
+        }
+      ]
+    }
   }
 }
 </script>
@@ -105,31 +119,21 @@ export default {
 <style scoped>
 .our-plan-page {
   min-height: 100vh;
-  background: #f8f9fa;
+  background: #f8fafc;
+}
+
+.container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 24px;
 }
 
 .page-banner {
-  background: transparent;
-  color: white;
-  padding: 80px 0;
-  text-align: center;
   position: relative;
-  min-height: 500px;
-}
-
-.banner-title {
-  font-size: 3rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-  color: white;
-}
-
-.banner-subtitle {
-  font-size: 1.2rem;
-  opacity: 0.95;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
-  color: white;
+  padding: 160px 0 86px;
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
 }
 
 .banner-content {
@@ -139,10 +143,7 @@ export default {
 
 .gif-banner {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   z-index: 1;
 }
 
@@ -150,152 +151,115 @@ export default {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 0;
-  box-shadow: none;
-  transition: opacity 0.3s ease;
+  filter: saturate(0.86) brightness(0.7);
 }
 
-.banner-gif:hover {
-  opacity: 0.9;
+.banner-title {
+  margin: 0 0 16px;
+  font-size: 44px;
+  letter-spacing: -0.02em;
+}
+
+.banner-subtitle {
+  margin: 0 auto;
+  max-width: 760px;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 18px;
+  line-height: 1.85;
 }
 
 .main-content {
-  padding: 60px 0;
+  padding: 88px 0;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.content-section {
-  margin-bottom: 60px;
+.main-content.muted {
+  background: #f1f5f9;
 }
 
 .section-title {
-  font-size: 2rem;
-  color: #2c3e50;
-  margin-bottom: 2rem;
+  margin: 0 0 34px;
   text-align: center;
+  color: #101828;
+  font-size: 34px;
+  letter-spacing: -0.015em;
 }
 
 .services-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 30px;
-  margin-top: 40px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px;
 }
 
 .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);
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  padding: 28px;
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
 }
 
 .service-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: 16px;
+  color: #2563eb;
 }
 
-.service-icon .icon-image {
-  width: 60px;
-  height: 60px;
-  object-fit: contain;
+.service-icon /deep/ svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.service-card h4 {
-  color: #2c3e50;
-  font-size: 1.4rem;
-  margin-bottom: 1rem;
-  font-weight: 600;
+.service-card h3 {
+  margin: 0 0 10px;
+  color: #101828;
+  font-size: 21px;
 }
 
 .service-card p {
-  color: #666;
-  line-height: 1.6;
-  margin-bottom: 1.5rem;
+  margin: 0 0 16px;
+  color: #667085;
+  line-height: 1.75;
 }
 
 .service-link {
-  display: inline-block;
-  padding: 10px 20px;
-  background: #3498db;
-  color: white;
+  color: #1d4ed8;
   text-decoration: none;
-  border-radius: 25px;
-  transition: all 0.3s ease;
-  font-weight: 500;
-}
-
-.service-link:hover {
-  background: #2980b9;
-  transform: scale(1.05);
+  font-weight: 700;
 }
 
 .features {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 30px;
-  margin-top: 40px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 22px;
 }
 
 .feature-item {
-  text-align: center;
-  padding: 30px;
+  border: 1px solid #dbe5f1;
+  border-radius: 12px;
+  background: #fff;
+  padding: 26px;
 }
 
-.feature-item h4 {
-  color: #3498db;
-  font-size: 1.3rem;
-  margin-bottom: 1rem;
+.feature-item h3 {
+  margin: 0 0 10px;
+  color: #101828;
+  font-size: 20px;
 }
 
 .feature-item p {
-  color: #666;
-  line-height: 1.6;
+  margin: 0;
+  color: #667085;
+  line-height: 1.75;
 }
 
-@media (max-width: 768px) {
-  .banner-title {
-    font-size: 2rem;
-  }
-  
-  .banner-subtitle {
-    font-size: 1rem;
-  }
-  
-  .gif-banner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-  
-  .banner-gif {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .services-grid {
-    grid-template-columns: 1fr;
-  }
-  
+@media (max-width: 992px) {
+  .services-grid,
   .features {
     grid-template-columns: 1fr;
   }