fix: 优化官网内容

docs/image-rename-map.json

@@ -0,0 +1,72 @@
+{
+  "ChatGPT Image 2026年4月27日 15_12_15.png": "chatgpt-image-2026-4-27-15-12-15.png",
+  "ChatGPT Image 2026年4月27日 15_25_51.png": "chatgpt-image-2026-4-27-15-25-51.png",
+  "ChatGPT Image 2026年4月27日 15_25_58.png": "chatgpt-image-2026-4-27-15-25-58.png",
+  "ChatGPT Image 2026年4月27日 15_26_06.png": "chatgpt-image-2026-4-27-15-26-06.png",
+  "ChatGPT Image 2026年4月27日 15_26_14.png": "chatgpt-image-2026-4-27-15-26-14.png",
+  "ChatGPT Image 2026年4月27日 15_26_22.png": "chatgpt-image-2026-4-27-15-26-22.png",
+  "ChatGPT Image 2026年4月27日 15_26_26.png": "chatgpt-image-2026-4-27-15-26-26.png",
+  "Sparse-Deep-Learning-e1774302337562-660x370.webp": "sparse-deep-learning-e1774302337562-660x370.webp",
+  "banner_index0.png": "banner-index0.png",
+  "banner_index1.png": "banner-index1.png",
+  "banner_index1_mobile.jpg": "banner-index1-mobile.jpg",
+  "banner_index2.png": "banner-index2.png",
+  "banner_index3.png": "banner-index3.png",
+  "banner_page_about_us_mobile.jpg": "banner-page-about-us-mobile.jpg",
+  "beian_icon.png": "beian-icon.png",
+  "boxbg_cleaning.png": "boxbg-cleaning.png",
+  "boxbg_errands.png": "boxbg-errands.png",
+  "boxbg_facilitiesmanagement.png": "boxbg-facilitiesmanagement.png",
+  "boxbg_iot.png": "boxbg-iot.png",
+  "boxbg_propertyandrealestate.jpg": "boxbg-propertyandrealestate.jpg",
+  "boxbg_propertyandrealestate.png": "boxbg-propertyandrealestate.png",
+  "boxbg_smartbuildings.png": "boxbg-smartbuildings.png",
+  "ic_1.png": "ic-1.png",
+  "ic_2.png": "ic-2.png",
+  "ic_3.png": "ic-3.png",
+  "logo_b.svg": "logo-b.svg",
+  "logo_icon.png": "logo-icon.png",
+  "solution_ai_integration.svg": "solution-ai-integration.svg",
+  "solution_app_delivery.svg": "solution-app-delivery.svg",
+  "solution_estate_management.svg": "solution-estate-management.svg",
+  "solution_facility_management.svg": "solution-facility-management.svg",
+  "solution_iot.svg": "solution-iot.svg",
+  "solution_mini_program.svg": "solution-mini-program.svg",
+  "solution_technology_integration.svg": "solution-technology-integration.svg",
+  "svg/ic_arrow_back.svg": "svg/ic-arrow-back.svg",
+  "svg/ic_caret.svg": "svg/ic-caret.svg",
+  "svg/ic_directions.svg": "svg/ic-directions.svg",
+  "svg/ic_hamburger.svg": "svg/ic-hamburger.svg",
+  "svg/ic_mobile.svg": "svg/ic-mobile.svg",
+  "svg/ic_plane.svg": "svg/ic-plane.svg",
+  "svg/ic_position.svg": "svg/ic-position.svg",
+  "svg/ic_position_marker_shaded.svg": "svg/ic-position-marker-shaded.svg",
+  "svg/ic_world.svg": "svg/ic-world.svg",
+  "hezuo/client_01.png": "hezuo/client-01.png",
+  "hezuo/client_02.png": "hezuo/client-02.png",
+  "hezuo/client_03.png": "hezuo/client-03.png",
+  "hezuo/client_04.png": "hezuo/client-04.png",
+  "hezuo/client_05.png": "hezuo/client-05.png",
+  "hezuo/client_06.png": "hezuo/client-06.png",
+  "hezuo/client_07.png": "hezuo/client-07.png",
+  "hezuo/client_08.png": "hezuo/client-08.png",
+  "hezuo/client_09.png": "hezuo/client-09.png",
+  "hezuo/client_10.png": "hezuo/client-10.png",
+  "hezuo/client_11.png": "hezuo/client-11.png",
+  "hezuo/client_12.png": "hezuo/client-12.png",
+  "hezuo/client_13.png": "hezuo/client-13.png",
+  "hezuo/client_14.png": "hezuo/client-14.png",
+  "hezuo/client_15.png": "hezuo/client-15.png",
+  "hezuo/client_16.png": "hezuo/client-16.png",
+  "hezuo/client_17.png": "hezuo/client-17.png",
+  "hezuo/client_18.png": "hezuo/client-18.png",
+  "hezuo/client_19.png": "hezuo/client-19.png",
+  "hezuo/client_20.png": "hezuo/client-20.png",
+  "hezuo/client_21.png": "hezuo/client-21.png",
+  "hezuo/client_22.png": "hezuo/client-22.png",
+  "hezuo/client_23.png": "hezuo/client-23.png",
+  "hezuo/client_24.png": "hezuo/client-24.png",
+  "hezuo/client_25.png": "hezuo/client-25.png",
+  "hezuo/client_26.png": "hezuo/client-26.png",
+  "hezuo/client_27.png": "hezuo/client-27.png"
+}

quick-start.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$PROJECT_ROOT"
+
+echo "==> Official Network quick start"
+
+if ! command -v node >/dev/null 2>&1; then
+  echo "Error: Node.js is not installed. Please install Node.js >= 16."
+  exit 1
+fi
+
+if ! command -v npm >/dev/null 2>&1; then
+  echo "Error: npm is not installed."
+  exit 1
+fi
+
+NODE_MAJOR="$(node -v | sed -E 's/^v([0-9]+).*/\1/')"
+if [[ "${NODE_MAJOR}" -lt 16 ]]; then
+  echo "Warning: Detected Node.js $(node -v). Recommended: >= 16."
+fi
+
+if [[ ! -d node_modules ]]; then
+  echo "==> Installing dependencies..."
+  npm install
+else
+  echo "==> node_modules exists, skipping install."
+fi
+
+echo "==> Starting development server..."
+npm run serve

src/assets/img/solution-ai-integration.svg

@@ -0,0 +1,26 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="a" x1="0" y1="0" x2="1600" y2="900">
+      <stop stop-color="#0A234D"/>
+      <stop offset="1" stop-color="#4B2A8E"/>
+    </linearGradient>
+  </defs>
+  <rect width="1600" height="900" fill="url(#a)"/>
+  <g opacity="0.18" stroke="#B6C5FF">
+    <path d="M0 120H1600M0 240H1600M0 360H1600M0 480H1600M0 600H1600M0 720H1600"/>
+  </g>
+  <rect x="260" y="160" width="1080" height="560" rx="24" fill="#111C3A" stroke="#8EA8FF" stroke-width="4"/>
+  <rect x="340" y="230" width="320" height="430" rx="18" fill="#E9EEFF"/>
+  <rect x="740" y="230" width="520" height="180" rx="18" fill="#E9EEFF"/>
+  <rect x="740" y="480" width="520" height="180" rx="18" fill="#E9EEFF"/>
+  <rect x="380" y="280" width="240" height="44" rx="10" fill="#4A66DD"/>
+  <rect x="380" y="350" width="240" height="22" rx="8" fill="#9BB0F2"/>
+  <rect x="380" y="392" width="240" height="22" rx="8" fill="#9BB0F2"/>
+  <rect x="780" y="270" width="440" height="36" rx="10" fill="#4A66DD"/>
+  <rect x="780" y="330" width="440" height="22" rx="8" fill="#9BB0F2"/>
+  <rect x="780" y="520" width="440" height="36" rx="10" fill="#4A66DD"/>
+  <rect x="780" y="580" width="440" height="22" rx="8" fill="#9BB0F2"/>
+  <circle cx="700" cy="322" r="14" fill="#8EA8FF"/>
+  <circle cx="700" cy="540" r="14" fill="#8EA8FF"/>
+  <path d="M660 322H686M660 540H686M714 322H740M714 540H740" stroke="#8EA8FF" stroke-width="4"/>
+</svg>

src/assets/img/solution-app-delivery.svg

@@ -0,0 +1,38 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1600" y2="900" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#0B1F44"/>
+      <stop offset="1" stop-color="#134A8A"/>
+    </linearGradient>
+    <linearGradient id="panel" x1="0" y1="0" x2="1" y2="1">
+      <stop stop-color="#EAF3FF"/>
+      <stop offset="1" stop-color="#CFE5FF"/>
+    </linearGradient>
+  </defs>
+  <rect width="1600" height="900" fill="url(#bg)"/>
+  <g opacity="0.18" stroke="#8BC3FF">
+    <path d="M0 120H1600M0 240H1600M0 360H1600M0 480H1600M0 600H1600M0 720H1600"/>
+    <path d="M160 0V900M320 0V900M480 0V900M640 0V900M800 0V900M960 0V900M1120 0V900M1280 0V900M1440 0V900"/>
+  </g>
+  <rect x="560" y="120" width="480" height="680" rx="48" fill="#0F2144" stroke="#86C6FF" stroke-width="6"/>
+  <rect x="590" y="182" width="420" height="578" rx="26" fill="url(#panel)"/>
+  <rect x="648" y="250" width="304" height="58" rx="14" fill="#2E67D4"/>
+  <rect x="648" y="340" width="304" height="58" rx="14" fill="#4B83E8"/>
+  <rect x="648" y="430" width="304" height="58" rx="14" fill="#6A9CF3"/>
+  <rect x="648" y="550" width="304" height="24" rx="12" fill="#95B6E8"/>
+  <rect x="648" y="594" width="304" height="24" rx="12" fill="#95B6E8"/>
+  <rect x="648" y="638" width="304" height="24" rx="12" fill="#95B6E8"/>
+  <circle cx="300" cy="250" r="18" fill="#87D3FF"/>
+  <circle cx="250" cy="420" r="18" fill="#87D3FF"/>
+  <circle cx="320" cy="590" r="18" fill="#87D3FF"/>
+  <path d="M320 250L560 350M268 420L560 450M338 590L560 550" stroke="#84C8FF" stroke-width="4"/>
+  <circle cx="1300" cy="260" r="18" fill="#87D3FF"/>
+  <circle cx="1360" cy="420" r="18" fill="#87D3FF"/>
+  <circle cx="1280" cy="580" r="18" fill="#87D3FF"/>
+  <path d="M1040 330L1282 260M1040 450L1342 420M1040 550L1262 580" stroke="#84C8FF" stroke-width="4"/>
+  <rect x="160" y="744" width="1280" height="96" rx="20" fill="#0E2E5B" stroke="#78BBFF" stroke-width="3"/>
+  <rect x="240" y="772" width="200" height="40" rx="10" fill="#3678DF"/>
+  <rect x="520" y="772" width="200" height="40" rx="10" fill="#3678DF"/>
+  <rect x="800" y="772" width="200" height="40" rx="10" fill="#3678DF"/>
+  <rect x="1080" y="772" width="200" height="40" rx="10" fill="#3678DF"/>
+</svg>

src/assets/img/solution-estate-management.svg

@@ -0,0 +1,18 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs><linearGradient id="b" x1="0" y1="0" x2="1600" y2="900"><stop stop-color="#082A40"/><stop offset="1" stop-color="#1B4F8D"/></linearGradient></defs>
+  <rect width="1600" height="900" fill="url(#b)"/>
+  <rect x="180" y="160" width="1240" height="620" rx="24" fill="#102940" stroke="#6AB5FF" stroke-width="4"/>
+  <rect x="260" y="240" width="180" height="460" rx="10" fill="#D8EDFF"/>
+  <rect x="500" y="200" width="220" height="500" rx="10" fill="#E9F5FF"/>
+  <rect x="780" y="270" width="160" height="430" rx="10" fill="#D8EDFF"/>
+  <rect x="980" y="220" width="190" height="480" rx="10" fill="#E9F5FF"/>
+  <rect x="1220" y="300" width="120" height="400" rx="10" fill="#D8EDFF"/>
+  <g fill="#72AEEA">
+    <rect x="290" y="280" width="32" height="32"/><rect x="350" y="280" width="32" height="32"/>
+    <rect x="530" y="250" width="36" height="36"/><rect x="592" y="250" width="36" height="36"/><rect x="654" y="250" width="36" height="36"/>
+    <rect x="810" y="310" width="28" height="28"/><rect x="860" y="310" width="28" height="28"/>
+    <rect x="1010" y="260" width="30" height="30"/><rect x="1060" y="260" width="30" height="30"/><rect x="1110" y="260" width="30" height="30"/>
+  </g>
+  <path d="M180 650H1420" stroke="#6AB5FF" stroke-width="4"/>
+  <circle cx="420" cy="740" r="12" fill="#8FD4FF"/><circle cx="760" cy="740" r="12" fill="#8FD4FF"/><circle cx="1100" cy="740" r="12" fill="#8FD4FF"/>
+</svg>

src/assets/img/solution-facility-management.svg

@@ -0,0 +1,20 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs><linearGradient id="d" x1="0" y1="0" x2="1600" y2="900"><stop stop-color="#1A2445"/><stop offset="1" stop-color="#334F8D"/></linearGradient></defs>
+  <rect width="1600" height="900" fill="url(#d)"/>
+  <rect x="210" y="140" width="1180" height="620" rx="24" fill="#111D38" stroke="#9FC1FF" stroke-width="4"/>
+  <rect x="290" y="220" width="460" height="460" rx="16" fill="#EAF1FF"/>
+  <rect x="830" y="220" width="480" height="140" rx="16" fill="#EAF1FF"/>
+  <rect x="830" y="390" width="480" height="140" rx="16" fill="#EAF1FF"/>
+  <rect x="830" y="560" width="480" height="120" rx="16" fill="#EAF1FF"/>
+  <g fill="#557CDA">
+    <rect x="340" y="280" width="360" height="44" rx="10"/>
+    <rect x="340" y="350" width="360" height="24" rx="8" opacity=".6"/>
+    <rect x="340" y="394" width="360" height="24" rx="8" opacity=".6"/>
+    <rect x="870" y="270" width="400" height="30" rx="8"/>
+    <rect x="870" y="440" width="400" height="30" rx="8"/>
+    <rect x="870" y="600" width="400" height="28" rx="8"/>
+  </g>
+  <path d="M750 450H830" stroke="#8EB6FF" stroke-width="4"/>
+  <circle cx="790" cy="450" r="16" fill="#8EB6FF"/>
+  <path d="M290 720H1310" stroke="#8EB6FF" stroke-width="4"/>
+</svg>

src/assets/img/solution-iot.svg

@@ -0,0 +1,21 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs><linearGradient id="c" x1="0" y1="0" x2="1600" y2="900"><stop stop-color="#062F39"/><stop offset="1" stop-color="#0E7490"/></linearGradient></defs>
+  <rect width="1600" height="900" fill="url(#c)"/>
+  <circle cx="800" cy="450" r="120" fill="#D9FCFF"/>
+  <circle cx="800" cy="450" r="56" fill="#2AA7B8"/>
+  <g stroke="#91EEF7" stroke-width="4">
+    <path d="M800 140V300M800 600V760M490 450H650M950 450H1110"/>
+    <path d="M580 230L680 330M920 570L1020 670M1020 230L920 330M680 570L580 670"/>
+  </g>
+  <g fill="#BDF7FF">
+    <circle cx="800" cy="120" r="20"/><circle cx="800" cy="780" r="20"/>
+    <circle cx="470" cy="450" r="20"/><circle cx="1130" cy="450" r="20"/>
+    <circle cx="560" cy="210" r="20"/><circle cx="1040" cy="210" r="20"/>
+    <circle cx="560" cy="690" r="20"/><circle cx="1040" cy="690" r="20"/>
+  </g>
+  <rect x="220" y="740" width="1160" height="80" rx="16" fill="#0E3F4D" stroke="#7EE6F4" stroke-width="3"/>
+  <rect x="280" y="764" width="220" height="34" rx="8" fill="#1EA8BD"/>
+  <rect x="560" y="764" width="220" height="34" rx="8" fill="#1EA8BD"/>
+  <rect x="840" y="764" width="220" height="34" rx="8" fill="#1EA8BD"/>
+  <rect x="1120" y="764" width="200" height="34" rx="8" fill="#1EA8BD"/>
+</svg>

src/assets/img/solution-mini-program.svg

@@ -0,0 +1,51 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg2" x1="0" y1="0" x2="1600" y2="900" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#082B3A"/>
+      <stop offset="1" stop-color="#0F5A78"/>
+    </linearGradient>
+  </defs>
+  <rect width="1600" height="900" fill="url(#bg2)"/>
+  <g opacity="0.16" stroke="#7ED9D2">
+    <path d="M0 100H1600M0 200H1600M0 300H1600M0 400H1600M0 500H1600M0 600H1600M0 700H1600M0 800H1600"/>
+    <path d="M100 0V900M200 0V900M300 0V900M400 0V900M500 0V900M600 0V900M700 0V900M800 0V900M900 0V900M1000 0V900M1100 0V900M1200 0V900M1300 0V900M1400 0V900M1500 0V900"/>
+  </g>
+  <rect x="220" y="120" width="1140" height="660" rx="30" fill="#0D3C52" stroke="#8EEADF" stroke-width="4"/>
+  <rect x="300" y="190" width="230" height="500" rx="22" fill="#E8FFF9"/>
+  <rect x="360" y="190" width="230" height="500" rx="22" fill="#E8FFF9"/>
+  <rect x="420" y="190" width="230" height="500" rx="22" fill="#E8FFF9"/>
+  <rect x="326" y="230" width="178" height="48" rx="10" fill="#179A8E"/>
+  <rect x="386" y="230" width="178" height="48" rx="10" fill="#179A8E"/>
+  <rect x="446" y="230" width="178" height="48" rx="10" fill="#179A8E"/>
+  <g fill="#7BCABD">
+    <rect x="326" y="314" width="178" height="26" rx="8"/>
+    <rect x="326" y="368" width="178" height="26" rx="8"/>
+    <rect x="326" y="422" width="178" height="26" rx="8"/>
+    <rect x="326" y="476" width="178" height="26" rx="8"/>
+    <rect x="326" y="530" width="178" height="26" rx="8"/>
+    <rect x="386" y="314" width="178" height="26" rx="8"/>
+    <rect x="386" y="368" width="178" height="26" rx="8"/>
+    <rect x="386" y="422" width="178" height="26" rx="8"/>
+    <rect x="386" y="476" width="178" height="26" rx="8"/>
+    <rect x="386" y="530" width="178" height="26" rx="8"/>
+    <rect x="446" y="314" width="178" height="26" rx="8"/>
+    <rect x="446" y="368" width="178" height="26" rx="8"/>
+    <rect x="446" y="422" width="178" height="26" rx="8"/>
+    <rect x="446" y="476" width="178" height="26" rx="8"/>
+    <rect x="446" y="530" width="178" height="26" rx="8"/>
+  </g>
+  <rect x="1070" y="120" width="260" height="190" rx="20" fill="#EFFFFB" stroke="#77D9CB" stroke-width="3"/>
+  <g fill="#1C5B55">
+    <rect x="1110" y="156" width="26" height="26"/>
+    <rect x="1160" y="156" width="26" height="26"/>
+    <rect x="1210" y="156" width="26" height="26"/>
+    <rect x="1260" y="156" width="26" height="26"/>
+    <rect x="1110" y="206" width="26" height="26"/>
+    <rect x="1210" y="206" width="26" height="26"/>
+    <rect x="1260" y="206" width="26" height="26"/>
+    <rect x="1160" y="256" width="26" height="26"/>
+    <rect x="1210" y="256" width="26" height="26"/>
+  </g>
+  <rect x="96" y="300" width="220" height="92" rx="20" fill="#22A79B"/>
+  <rect x="80" y="434" width="320" height="122" rx="20" fill="#35B9AC"/>
+</svg>

src/assets/img/solution-technology-integration.svg

@@ -0,0 +1,23 @@
+<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs><linearGradient id="e" x1="0" y1="0" x2="1600" y2="900"><stop stop-color="#0C2440"/><stop offset="1" stop-color="#1D5F91"/></linearGradient></defs>
+  <rect width="1600" height="900" fill="url(#e)"/>
+  <rect x="220" y="150" width="1160" height="600" rx="24" fill="#102945" stroke="#8BC5FF" stroke-width="4"/>
+  <rect x="300" y="240" width="280" height="420" rx="14" fill="#E8F4FF"/>
+  <rect x="660" y="240" width="280" height="420" rx="14" fill="#E8F4FF"/>
+  <rect x="1020" y="240" width="280" height="420" rx="14" fill="#E8F4FF"/>
+  <g fill="#4C7DDD">
+    <rect x="340" y="290" width="200" height="40" rx="10"/>
+    <rect x="700" y="290" width="200" height="40" rx="10"/>
+    <rect x="1060" y="290" width="200" height="40" rx="10"/>
+    <rect x="340" y="360" width="200" height="24" rx="8" opacity=".65"/>
+    <rect x="700" y="360" width="200" height="24" rx="8" opacity=".65"/>
+    <rect x="1060" y="360" width="200" height="24" rx="8" opacity=".65"/>
+  </g>
+  <path d="M580 450H660M940 450H1020" stroke="#8BC5FF" stroke-width="4"/>
+  <circle cx="620" cy="450" r="14" fill="#8BC5FF"/>
+  <circle cx="980" cy="450" r="14" fill="#8BC5FF"/>
+  <rect x="260" y="770" width="1080" height="70" rx="14" fill="#0D335A" stroke="#7CB5F7" stroke-width="3"/>
+  <rect x="340" y="792" width="220" height="28" rx="8" fill="#3D77D4"/>
+  <rect x="690" y="792" width="220" height="28" rx="8" fill="#3D77D4"/>
+  <rect x="1040" y="792" width="220" height="28" rx="8" fill="#3D77D4"/>
+</svg>

src/components/ifooter.vue

@@ -58,7 +58,7 @@
         <div class="footer-bottom">
           <div class="footer-bottom-content">
             <div class="copyright">
-              <p>&copy; 2025 上海丙维数字科技有限公司. 保留所有权利.</p>
+              <p>&copy; {{ currentYear }} 上海丙维数字科技有限公司. 保留所有权利.</p>
             </div>
             <div class="footer-extra">
               <div class="beian">
@@ -83,6 +83,11 @@ import { getFooterSolutionsMenu } from '../config/menu'
 
 export default {
   name: 'ifooter',
+  computed: {
+    currentYear() {
+      return new Date().getFullYear()
+    }
+  },
   data() {
     const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`
     return {
@@ -121,13 +126,14 @@ export default {
 
 <style scoped>
 .footer {
-  background: #111827;
-  color: white;
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+  color: #0f172a;
   position: relative;
+  border-top: 1px solid #e2e8f0;
 }
 
 .footer-content {
-  padding: 60px 0 0 0;
+  padding: 56px 0 0 0;
 }
 
 .container {
@@ -140,26 +146,26 @@ export default {
 .footer-main {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 40px;
-  margin-bottom: 50px;
+  gap: 36px;
+  margin-bottom: 42px;
 }
 
 .footer-section h4 {
-  font-size: 1.3rem;
+  font-size: 1.08rem;
   font-weight: 600;
-  margin-bottom: 20px;
-  color: #ecf0f1;
+  margin-bottom: 16px;
+  color: #0f172a;
   position: relative;
 }
 
 .footer-section h4::after {
   content: '';
   position: absolute;
-  bottom: -8px;
+  bottom: -7px;
   left: 0;
-  width: 40px;
+  width: 30px;
   height: 2px;
-  background: #60a5fa;
+  background: #94a3b8;
   border-radius: 1px;
 }
 
@@ -167,18 +173,17 @@ export default {
 .footer-logo .logo {
   height: 50px;
   margin-bottom: 15px;
-  filter: brightness(0) invert(1);
 }
 
 .footer-logo h3 {
-  font-size: 1.2rem;
+  font-size: 1.14rem;
   font-weight: 600;
   margin-bottom: 10px;
-  color: #ecf0f1;
+  color: #0f172a;
 }
 
 .company-desc {
-  color: #bdc3c7;
+  color: #475569;
   font-size: 0.95rem;
   line-height: 1.5;
 }
@@ -189,12 +194,18 @@ export default {
   min-height: 38px;
   margin-top: 18px;
   padding: 0 16px;
-  border-radius: 4px;
+  border-radius: 8px;
   background: #2563eb;
   color: #fff;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
   text-decoration: none;
+  transition: background-color 0.25s ease, transform 0.25s ease;
+}
+
+.footer-cta:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
 }
 
 /* 链接列表 */
@@ -210,17 +221,16 @@ export default {
 
 .footer-links a,
 .contact-item a {
-  color: #bdc3c7;
+  color: #475569;
   text-decoration: none;
-  transition: all 0.3s ease;
+  transition: color 0.25s ease;
   display: inline-block;
   position: relative;
 }
 
 .footer-links a:hover,
 .contact-item a:hover {
-  color: #93c5fd;
-  transform: translateX(5px);
+  color: #1d4ed8;
 }
 
 /* 联系信息 */
@@ -234,7 +244,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 12px;
-  color: #bdc3c7;
+  color: #475569;
   font-size: 0.95rem;
 }
 
@@ -242,13 +252,13 @@ export default {
   width: 20px;
   height: 20px;
   text-align: center;
-  color: #93c5fd;
+  color: #64748b;
   flex-shrink: 0;
 }
 
 .footer-address {
   margin-top: 18px;
-  color: #7d8898;
+  color: #64748b;
   font-size: 0.86rem;
   line-height: 1.6;
 }
@@ -267,8 +277,8 @@ export default {
 
 /* 页脚底部 */
 .footer-bottom {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 25px 0;
+  border-top: 1px solid #dbe3ee;
+  padding: 22px 0;
 }
 
 .footer-bottom-content {
@@ -280,7 +290,7 @@ export default {
 }
 
 .copyright p {
-  color: #95a5a6;
+  color: #64748b;
   font-size: 0.9rem;
   margin: 0;
 }
@@ -295,7 +305,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #95a5a6;
+  color: #64748b;
   font-size: 0.9rem;
 }
 
@@ -303,7 +313,7 @@ export default {
   width: 20px;
   height: 20px;
   text-align: center;
-  color: #95a5a6;
+  color: #94a3b8;
 }
 
 /* 返回顶部按钮 */
@@ -322,14 +332,14 @@ export default {
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
   z-index: 1000;
 }
 
 .back-to-top:hover {
   transform: translateY(-3px);
   background: #1d4ed8;
-  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.34);
+  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
 }
 
 .back-to-top .arrow {
@@ -367,14 +377,4 @@ export default {
   }
 }
 
-/* 悬停效果增强 */
-.footer-section:hover {
-  transform: translateY(-2px);
-  transition: transform 0.3s ease;
-}
-
-.footer-links a:hover {
-  transform: translateX(8px);
-}
-
 </style>

src/components/ihead.vue

@@ -125,8 +125,8 @@ export default {
       return {
         logo: require('@/assets/img/logo.png'),
         mobile_logo: require('@/assets/img/logo.png'),
-        hamburger: require('@/assets/img/svg/ic_hamburger.svg'),
-        arrow_back: require('@/assets/img/svg/ic_arrow_back.svg')
+        hamburger: require('@/assets/img/svg/ic-hamburger.svg'),
+        arrow_back: require('@/assets/img/svg/ic-arrow-back.svg')
       }
     }
   },

src/config/menu.js

@@ -18,7 +18,9 @@ export const menuConfig = {
         { name: '智能建筑', url: '/ourPlan/estateManagement' },
         { name: '物联网', url: '/ourPlan/iot' },
         { name: '设施管理', url: '/ourPlan/facilityManagement' },
-        { name: '系统集成', url: '/ourPlan/technologyIntegration' }
+        { name: '系统集成', url: '/ourPlan/technologyIntegration' },
+        { name: 'App交付', url: '/ourPlan/appDelivery' },
+        { name: '小程序方案', url: '/ourPlan/miniProgram' }
       ]
     },
     {
@@ -48,7 +50,9 @@ export const menuConfig = {
       { name: '智能建筑', url: '/ourPlan/estateManagement' },
       { name: '物联网', url: '/ourPlan/iot' },
       { name: '设施管理', url: '/ourPlan/facilityManagement' },
-      { name: '系统集成', url: '/ourPlan/technologyIntegration' }
+      { name: '系统集成', url: '/ourPlan/technologyIntegration' },
+      { name: 'App交付', url: '/ourPlan/appDelivery' },
+      { name: '小程序方案', url: '/ourPlan/miniProgram' }
     ]
   }
 }

src/router.js

@@ -9,6 +9,8 @@ import facilityManagement from './views/ourPlan/facilityManagement'
 import iot from './views/ourPlan/iot'
 import aiSolutions from './views/ourPlan/aiSolutions'
 import technologyIntegration from './views/ourPlan/technologyIntegration'
+import appDelivery from './views/ourPlan/appDelivery'
+import miniProgram from './views/ourPlan/miniProgram'
 import LegalPage from './views/legal/LegalPage'
 
 Vue.use(Router);
@@ -65,6 +67,22 @@ const router = new Router({
       path: '/ourPlan/technologyIntegration',
       component: technologyIntegration
     },
+    {
+      path: '/ourPlan/appDelivery',
+      component: appDelivery,
+      meta: {
+        title: 'App交付方案 - 上海丙维数字科技有限公司',
+        description: '面向 iOS / Android 的企业级 App 交付方案，覆盖设计、开发、联调与版本迭代。'
+      }
+    },
+    {
+      path: '/ourPlan/miniProgram',
+      component: miniProgram,
+      meta: {
+        title: '小程序解决方案 - 上海丙维数字科技有限公司',
+        description: '围绕业务触达与服务闭环的小程序解决方案，支持功能开发、能力接入与持续运营。'
+      }
+    },
     {
       path: '/legal/:type',
       component: LegalPage,

src/views/aboutUs/aboutUs.vue

@@ -5,78 +5,71 @@
     <section class="page-hero">
       <div class="container">
         <h1>关于丙维科技</h1>
-        <p>以工程交付能力，推动企业智能化持续落地。</p>
+        <p>以工程化能力连接模型、系统与业务流程，推动企业智能化能力稳定落地。</p>
       </div>
     </section>
 
-    <section class="page-section">
+    <section class="section">
       <div class="container narrow">
-        <div class="section-header">
-          <h2>公司简介</h2>
-          <p>上海丙维数字科技有限公司成立于 2018 年，总部位于上海。</p>
-        </div>
-        <div class="fact-copy">
-          <p>公司长期服务于计算机软硬件、网络科技与信息科技领域，具备系统开发、集成与持续运维能力。</p>
-          <p>自 2022 年起，团队聚焦 AI 应用交付，面向企业场景提供可落地、可验收的解决方案。</p>
-        </div>
+        <h2 class="section-title">公司简介</h2>
+        <p class="section-subtitle">
+          上海丙维数字科技有限公司成立于2018年，长期服务计算机软硬件、网络科技和信息科技领域。
+          自2022年起，团队聚焦 AI 应用交付，面向企业场景提供从需求拆解、系统集成到上线运维的全流程服务。
+        </p>
       </div>
     </section>
 
-    <section class="page-section muted">
+    <section class="section section-muted">
       <div class="container">
-        <div class="section-header">
-          <h2>核心能力</h2>
-          <p>围绕业务目标、系统边界和持续运营组织交付。</p>
-        </div>
-        <div class="capability-grid">
-          <article class="card" v-for="item in capabilities" :key="item.title">
+        <h2 class="section-title">核心能力</h2>
+        <div class="card-grid">
+          <article class="card" v-for="item in coreCapabilities" :key="item.title">
             <h3>{{ item.title }}</h3>
-            <p>{{ item.text }}</p>
+            <p>{{ item.description }}</p>
           </article>
         </div>
       </div>
     </section>
 
-    <section class="page-section">
+    <section class="section">
       <div class="container">
-        <div class="section-header">
-          <h2>发展里程碑</h2>
-          <p>用清晰的阶段目标沉淀交付经验。</p>
-        </div>
-        <div class="milestone-grid">
-          <article class="card milestone-card" v-for="item in milestones" :key="item.year">
-            <span>{{ item.year }}</span>
+        <h2 class="section-title">产品交付能力</h2>
+        <div class="card-grid">
+          <article class="card" v-for="item in productCapabilities" :key="item.title">
             <h3>{{ item.title }}</h3>
-            <p>{{ item.text }}</p>
+            <p>{{ item.description }}</p>
+            <ul>
+              <li v-for="point in item.points" :key="point">{{ point }}</li>
+            </ul>
           </article>
         </div>
       </div>
     </section>
 
-    <section class="page-section muted">
-      <div class="container">
-        <div class="section-header">
-          <h2>方法论</h2>
-          <p>从小范围验证开始，逐步推进到稳定运行。</p>
-        </div>
-        <div class="method-steps">
-          <div class="method-step" v-for="(step, index) in methods" :key="step">
-            <span>{{ index + 1 }}</span>
-            <p>{{ step }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="contact-entry" id="contact">
-      <div class="container">
+    <section class="section section-muted">
+      <div class="container narrow">
+        <h2 class="section-title">发展里程碑</h2>
+        <div class="timeline">
+          <div class="timeline-item" v-for="item in milestones" :key="item.year">
+            <span class="year">{{ item.year }}</span>
             <div>
-          <h2>联系引导</h2>
-          <p>如果你希望评估当前业务是否适合 AI 改造，欢迎联系我们进行场景梳理。</p>
+              <h3>{{ item.title }}</h3>
+              <p>{{ item.description }}</p>
             </div>
-        <div class="contact-actions">
-          <a href="tel:13817819452" class="primary-cta">电话咨询</a>
-          <a href="mailto:bimwe@bimwe.com" class="secondary-cta">邮件沟通</a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="contact">
+      <div class="container narrow">
+        <h2 class="section-title">联系我们</h2>
+        <p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。</p>
+        <div class="contact-grid">
+          <div class="contact-item"><strong>地址</strong><span>上海市宝山区高逸路112-118号3幢6422室</span></div>
+          <div class="contact-item"><strong>电话</strong><span>13817819452</span></div>
+          <div class="contact-item"><strong>邮箱</strong><span>bimwe@bimwe.com</span></div>
+          <div class="contact-item"><strong>官网</strong><span>www.bimwe.com</span></div>
         </div>
       </div>
     </section>
@@ -86,49 +79,58 @@
 </template>
 
 <script>
-import ihead from '@/components/ihead.vue'
-import ifooter from '@/components/ifooter.vue'
-
 export default {
   name: 'AboutUs',
-  components: {
-    ihead,
-    ifooter
-  },
   data() {
     return {
-      capabilities: [
+      coreCapabilities: [
         {
           title: '需求工程与方案设计',
-          text: '将业务目标拆解为可执行的系统与模型任务。'
+          description: '围绕业务目标、数据来源和流程边界拆解需求，形成可执行且可验收的交付计划。'
         },
         {
           title: '系统集成与上线实施',
-          text: '连接现有业务系统、数据平台与设备端。'
+          description: '对接企业现有系统与设备平台，保障新能力平滑上线并可持续运行。'
         },
         {
           title: '运维复盘与持续优化',
-          text: '以指标追踪效果，支持长期迭代。'
+          description: '以时效、稳定性与效率指标跟踪效果，支持项目长期迭代。'
+        }
+      ],
+      productCapabilities: [
+        {
+          title: 'App 开发交付',
+          description: '面向 iOS / Android 的企业级应用交付，覆盖从原型到发布的完整链路。',
+          points: ['交互与流程设计', '接口联调与性能优化', '发布与版本管理']
+        },
+        {
+          title: '小程序交付',
+          description: '围绕业务触达与闭环运营，提供小程序开发、审核上线和持续优化服务。',
+          points: ['信息架构与页面设计', '支付/消息/地图能力接入', '灰度发布与数据复盘']
+        },
+        {
+          title: 'Web 产品工程化',
+          description: '构建面向管理端和业务端的 Web 平台，强调稳定性与可维护性。',
+          points: ['模块化前端工程', '权限审计与日志能力', '持续集成与迭代机制']
         }
       ],
       milestones: [
         {
           year: '2018',
           title: '公司成立',
-          text: '提供技术开发与系统服务。'
+          description: '开始提供技术开发与系统服务。'
         },
         {
           year: '2022',
-          title: '战略聚焦 AI 应用交付',
-          text: '面向企业业务场景建设可验收应用。'
+          title: '聚焦 AI 交付',
+          description: '业务重心转向智能应用交付与行业场景落地。'
         },
         {
           year: '至今',
-          title: '持续优化交付方法',
-          text: '服务多个行业客户，提升实施效率。'
+          title: '持续服务',
+          description: '服务多个行业客户，持续沉淀工程方法和交付经验。'
         }
-      ],
-      methods: ['业务诊断', '架构设计', '场景试点', '全量上线', '运营优化']
+      ]
     }
   }
 }
@@ -136,9 +138,8 @@ export default {
 
 <style scoped>
 .about-us-page {
-  min-height: 100vh;
+  padding-top: 84px;
   background: #fff;
-  color: #101828;
 }
 
 .container {
@@ -147,214 +148,208 @@ export default {
   padding: 0 24px;
 }
 
-.narrow {
-  max-width: 860px;
+.container.narrow {
+  max-width: 900px;
 }
 
 .page-hero {
-  padding: 168px 0 96px;
-  background: #0f172a;
+  padding: 92px 0 72px;
   color: #fff;
+  background: linear-gradient(135deg, #0f172a, #1e3a8a);
 }
 
 .page-hero h1 {
   margin: 0 0 18px;
-  font-size: 48px;
+  font-size: 46px;
+  letter-spacing: -0.02em;
   line-height: 1.18;
 }
 
 .page-hero p {
-  max-width: 620px;
-  margin: 0;
-  color: rgba(255, 255, 255, 0.78);
-  font-size: 20px;
-  line-height: 1.7;
-}
-
-.page-section {
-  padding: 88px 0;
-}
-
-.muted {
-  background: #f6f8fb;
-}
-
-.section-header {
   max-width: 760px;
-  margin: 0 auto 38px;
-  text-align: center;
-}
-
-.section-header h2,
-.contact-entry h2 {
-  margin: 0 0 14px;
-  color: #101828;
-  font-size: 34px;
-  line-height: 1.25;
-}
-
-.section-header p,
-.fact-copy p,
-.card p,
-.contact-entry p {
-  color: #667085;
-  font-size: 16px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 18px;
   line-height: 1.8;
 }
 
-.fact-copy {
-  display: grid;
-  gap: 14px;
+.section {
+  padding: 96px 0;
 }
 
-.fact-copy p {
-  margin: 0;
+.section-muted {
+  background: #f6f8fb;
 }
 
-.capability-grid,
-.milestone-grid {
+.section-title {
+  margin: 0 0 16px;
+  color: #101828;
+  text-align: center;
+  font-size: 33px;
+  letter-spacing: -0.015em;
+  line-height: 1.28;
+}
+
+.section-subtitle {
+  margin: 0 auto;
+  color: #667085;
+  text-align: center;
+  font-size: 17px;
+  line-height: 1.8;
+}
+
+.card-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 24px;
+  gap: 28px;
+  margin-top: 40px;
 }
 
 .card {
-  padding: 30px;
   border: 1px solid #e4e7ec;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #fff;
+  padding: 30px;
   box-shadow: 0 16px 40px rgba(16, 24, 40, 0.06);
 }
 
 .card h3 {
-  margin: 0 0 12px;
+  margin: 0 0 10px;
   color: #101828;
-  font-size: 20px;
-  line-height: 1.4;
+  font-size: 22px;
+  line-height: 1.35;
 }
 
 .card p {
   margin: 0;
-}
-
-.milestone-card span {
-  display: inline-flex;
-  margin-bottom: 16px;
-  color: #1d4ed8;
+  color: #667085;
   font-size: 15px;
-  font-weight: 700;
+  line-height: 1.75;
 }
 
-.method-steps {
+.card ul {
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 14px;
+  gap: 8px;
 }
 
-.method-step {
-  min-height: 116px;
-  padding: 22px;
+.card li {
+  position: relative;
+  padding-left: 16px;
+  color: #344054;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.card li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 9px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #2563eb;
+}
+
+.timeline {
+  margin-top: 34px;
+  display: grid;
+  gap: 16px;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: 18px;
+  padding: 20px 22px;
   border: 1px solid #e4e7ec;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #fff;
 }
 
-.method-step span {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  margin-bottom: 18px;
-  border-radius: 50%;
-  background: #eef4ff;
+.timeline-item .year {
   color: #1d4ed8;
-  font-size: 14px;
   font-weight: 700;
 }
 
-.method-step p {
-  margin: 0;
+.timeline-item h3 {
+  margin: 0 0 6px;
   color: #101828;
-  font-weight: 700;
+  font-size: 18px;
 }
 
-.contact-entry {
-  padding: 72px 0;
-  background: #111827;
-  color: #fff;
-}
-
-.contact-entry .container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 32px;
-}
-
-.contact-entry h2 {
-  color: #fff;
-}
-
-.contact-entry p {
-  max-width: 620px;
+.timeline-item p {
   margin: 0;
-  color: rgba(255, 255, 255, 0.76);
+  color: #667085;
+  line-height: 1.7;
 }
 
-.contact-actions {
-  display: flex;
-  gap: 12px;
-  flex-shrink: 0;
+.contact-grid {
+  margin-top: 34px;
+  display: grid;
+  gap: 14px;
 }
 
-.primary-cta,
-.secondary-cta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 44px;
-  padding: 0 18px;
-  border-radius: 4px;
-  font-weight: 700;
-  text-decoration: none;
+.contact-item {
+  display: grid;
+  grid-template-columns: 66px 1fr;
+  gap: 14px;
+  padding: 18px 20px;
+  border: 1px solid #e4e7ec;
+  border-radius: 12px;
+  background: #fff;
 }
 
-.primary-cta {
-  background: #2563eb;
-  color: #fff;
+.contact-item strong {
+  color: #1d4ed8;
 }
 
-.secondary-cta {
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  color: #fff;
+.contact-item span {
+  color: #475467;
 }
 
-@media (max-width: 900px) {
-  .capability-grid,
-  .milestone-grid,
-  .method-steps {
+@media (max-width: 992px) {
+  .card-grid {
     grid-template-columns: 1fr;
   }
-
-  .contact-entry .container,
-  .contact-actions {
-    align-items: stretch;
-    flex-direction: column;
-  }
 }
 
 @media (max-width: 768px) {
+  .about-us-page {
+    padding-top: 72px;
+  }
+
   .page-hero {
-    padding: 132px 0 72px;
+    padding: 72px 0 58px;
   }
 
   .page-hero h1 {
-    font-size: 36px;
+    font-size: 34px;
   }
 
-  .page-section {
-    padding: 64px 0;
+  .page-hero p {
+    font-size: 16px;
+  }
+
+  .section {
+    padding: 68px 0;
+  }
+
+  .section-title {
+    font-size: 28px;
+  }
+
+  .section-subtitle {
+    font-size: 15px;
+  }
+
+  .timeline-item,
+  .contact-item {
+    grid-template-columns: 1fr;
+    gap: 8px;
   }
 }
 </style>

src/views/index.vue

@@ -12,9 +12,19 @@
             <img :src="banner.img" width="100%" alt="" aria-hidden="true" />
             <div class="banner-overlay">
               <div class="banner-text">
+                <div class="banner-copy">
                   <h1 class="banner-title">{{banner.title}}</h1>
                   <p class="banner-subtitle">{{banner.subtitle}}</p>
                 </div>
+                <div class="hero-actions">
+                  <button type="button" class="primary-cta" @click="scrollToSection('contact')">预约咨询</button>
+                  <button type="button" class="secondary-cta" @click="scrollToSection('cases')">查看案例</button>
+                </div>
+                <div class="hero-assessment">
+                  <strong>30 分钟业务场景评估</strong>
+                  <span>聚焦目标、数据、系统边界，快速判断可落地方案与优先级。</span>
+                </div>
+              </div>
             </div>
           </div>
         </swiper-slide>
@@ -38,7 +48,24 @@
            </div>
         </div>
         <div class="section-cta">
-          <a class="text-cta" href="#contact">预约30分钟需求评估</a>
+          <button type="button" class="text-cta" @click="scrollToSection('contact')">预约30分钟需求评估</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 交付能力 -->
+    <div class="delivery-capabilities">
+      <div class="container">
+        <h2 class="section-title">交付能力</h2>
+        <p class="section-subtitle">覆盖 App、微信小程序与 Web 平台，支持从产品定义到上线迭代的完整流程。</p>
+        <div class="capability-grid">
+          <div class="capability-card" v-for="item in deliveryCapabilities" :key="item.title">
+            <h3>{{item.title}}</h3>
+            <p>{{item.description}}</p>
+            <ul>
+              <li v-for="point in item.points" :key="point">{{point}}</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -52,7 +79,7 @@
         aria-label="滚动到解决方案"
         @click="scrollToProducts"
       >
-        <img src="../assets/img/svg/ic_caret.svg" alt="" aria-hidden="true">
+        <img src="../assets/img/svg/ic-caret.svg" alt="" aria-hidden="true">
       </button>
     </div>
 
@@ -87,7 +114,7 @@
            </div>
          </div>
          <div class="section-cta">
-           <a class="text-cta" href="#contact">沟通你的业务场景</a>
+          <button type="button" class="text-cta" @click="scrollToSection('contact')">沟通你的业务场景</button>
          </div>
        </div>
      </div>
@@ -96,17 +123,32 @@
     <div class="cases-section" id="cases">
       <div class="container">
         <h2 class="section-title">案例成果</h2>
-        <p class="section-subtitle">以下案例已做脱敏处理，展示交付方式与可量化结果。</p>
+        <p class="section-subtitle">结合本地项目经验整理，以下案例已做脱敏处理，方便快速了解场景、交付内容与结果。</p>
         <div class="cases-grid">
-          <div class="case-card" v-for="item in cases" :key="item.industry">
-            <div class="case-industry">{{item.industry}}</div>
-            <h3>{{item.problem}}</h3>
-            <p>{{item.solution}}</p>
+          <div class="case-card" v-for="item in cases" :key="item.title">
+            <div class="case-image">
+              <img :src="item.image" :alt="item.title">
+            </div>
+            <div class="case-body">
+              <div class="case-topline">
+                <span class="case-industry">{{item.industry}}</span>
+                <router-link class="case-link" :to="item.url" :aria-label="'查看' + item.title + '相关方案'">
+                  查看方案
+                  <span v-html="icons.arrowRight"></span>
+                </router-link>
+              </div>
+              <h3>{{item.title}}</h3>
+              <p class="case-intro">{{item.intro}}</p>
+              <div class="case-meta">
+                <div><strong>项目问题</strong><span>{{item.problem}}</span></div>
+                <div><strong>交付内容</strong><span>{{item.solution}}</span></div>
+              </div>
               <div class="case-result">{{item.result}}</div>
             </div>
           </div>
+        </div>
         <div class="section-cta">
-          <a class="text-cta" href="#contact">获取类似场景评估</a>
+          <button type="button" class="text-cta" @click="scrollToSection('contact')">获取类似场景评估</button>
         </div>
       </div>
     </div>
@@ -126,7 +168,7 @@
     <div class="clients-section">
       <div class="container">
         <h2 class="section-title">合作伙伴</h2>
-        <p class="section-subtitle">我们与众多知名企业建立了长期稳定的合作关系</p>
+        <p class="section-subtitle">展示部分代表性合作客户，覆盖制造、园区、零售等行业场景。</p>
         
         <div class="clients-grid animate-stagger">
           <div class="client-item" v-for="(client, index) in clients" :key="index">
@@ -135,9 +177,6 @@
             </div>
           </div>
         </div>
-        <div class="section-cta">
-          <a class="text-cta" href="#contact">成为合作伙伴</a>
-        </div>
       </div>
     </div>
 
@@ -145,27 +184,20 @@
     <div class="contact-section" id="contact">
       <div class="container">
         <h2 class="section-title">联系我们</h2>
-        <p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。</p>
-        <div class="contact-info animate-stagger">
-          <div class="contact-item">
-            <div class="contact-icon" v-html="icons.location"></div>
-            <div>
-              <h4>注册地址</h4>
-              <p>上海市宝山区高逸路112-118号3幢6422室</p>
-            </div>
-          </div>
+        <p class="section-subtitle">欢迎沟通业务场景，我们将在 1 个工作日内回复。详细地址、电话和邮箱请查看页面底部。</p>
+        <div class="contact-entry-grid animate-stagger">
           <div class="contact-item">
             <div class="contact-icon" v-html="icons.phone"></div>
             <div>
-              <h4>联系电话</h4>
-              <p>13817819452</p>
+              <h4>电话咨询</h4>
+              <p>13817819452（工作日 9:00-18:00）</p>
             </div>
           </div>
           <div class="contact-item">
             <div class="contact-icon" v-html="icons.globe"></div>
             <div>
-              <h4>官方网站</h4>
-              <p>www.bimwe.com</p>
+              <h4>在线沟通</h4>
+              <p>bimwe@bimwe.com（可发送需求文档）</p>
             </div>
           </div>
         </div>
@@ -177,47 +209,29 @@
 </template>
 
 <script>
-import VueAwesomeSwiper from 'vue-awesome-swiper'
 import ResponsiveHelper from '../static/responsive_helper'
 
-let banner_index0 = require('../assets/img/banner_index0.png')
-let banner_index1 = require('../assets/img/banner_index1.png')
-let banner_index2 = require('../assets/img/banner_index2.png')
-let banner_index3 = require('../assets/img/banner_index3.png')
+let banner_index0 = require('../assets/img/banner-index0.png')
+let banner_index1 = require('../assets/img/banner-index1.png')
+let banner_index2 = require('../assets/img/banner-index2.png')
+let banner_index3 = require('../assets/img/banner-index3.png')
 
-let boxbg_cleaning = require('../assets/img/boxbg_cleaning.png')
-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_cleaning = require('../assets/img/boxbg-cleaning.png')
+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 solution_app_delivery = require('../assets/img/solution-app-delivery.svg')
+let solution_mini_program = require('../assets/img/solution-mini-program.svg')
 
-// 客户logo图片
-let client_01 = require('../assets/img/hezuo/client_01.png')
-let client_02 = require('../assets/img/hezuo/client_02.png')
-let client_03 = require('../assets/img/hezuo/client_03.png')
-let client_04 = require('../assets/img/hezuo/client_04.png')
-let client_05 = require('../assets/img/hezuo/client_05.png')
-let client_06 = require('../assets/img/hezuo/client_06.png')
-let client_07 = require('../assets/img/hezuo/client_07.png')
-let client_08 = require('../assets/img/hezuo/client_08.png')
-let client_09 = require('../assets/img/hezuo/client_09.png')
-let client_10 = require('../assets/img/hezuo/client_10.png')
-let client_11 = require('../assets/img/hezuo/client_11.png')
-let client_12 = require('../assets/img/hezuo/client_12.png')
-let client_13 = require('../assets/img/hezuo/client_13.png')
-let client_14 = require('../assets/img/hezuo/client_14.png')
-let client_15 = require('../assets/img/hezuo/client_15.png')
-let client_16 = require('../assets/img/hezuo/client_16.png')
-let client_17 = require('../assets/img/hezuo/client_17.png')
-let client_18 = require('../assets/img/hezuo/client_18.png')
-let client_19 = require('../assets/img/hezuo/client_19.png')
-let client_20 = require('../assets/img/hezuo/client_20.png')
-let client_21 = require('../assets/img/hezuo/client_21.png')
-let client_22 = require('../assets/img/hezuo/client_22.png')
+const partnerLogosContext = require.context('../assets/img/hezuo', false, /\.(png|jpe?g|webp|svg)$/i)
+const partnerLogos = partnerLogosContext
+  .keys()
+  .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
+  .map((key) => ({ logo: partnerLogosContext(key) }))
 
 
 export default {
   components: {
-    VueAwesomeSwiper,
     ResponsiveHelper,
    
   },
@@ -239,10 +253,15 @@ export default {
     return {
       icons,
       swiperOption: {
-        autoplay: 4500,
+        autoplay: {
+          delay: 4500,
+          disableOnInteraction: false
+        },
         speed: 900,
         loop: true,
         effect: 'fade',
+        observer: true,
+        observeParents: true,
         fadeEffect: {
           crossFade: true
         },
@@ -270,12 +289,12 @@ export default {
         {
           img: banner_index2,
           title: '工程化交付体系',
-          subtitle: '从需求评估、系统集成到上线运维，支撑项目持续运行'
+          subtitle: '需求评估到运维上线，全流程稳定落地'
         },
         {
           img: banner_index3,
           title: '行业解决方案专家',
-          subtitle: '金融、制造、零售多行业服务经验'
+          subtitle: '覆盖制造园区零售等多行业场景'
         },
       ],
       advantages: [
@@ -294,6 +313,23 @@ export default {
           title: '结果可量化可复盘',
           description: '以效率、时效、稳定性等核心指标评估效果，支持持续优化迭代。'
         }
+      ],
+      deliveryCapabilities: [
+        {
+          title: 'App 开发能力',
+          description: '面向 iOS / Android 的企业级应用开发与迭代，适配业务移动化场景。',
+          points: ['需求梳理与原型验证', '接口联调与性能优化', '发布与版本管理']
+        },
+        {
+          title: '小程序交付能力',
+          description: '围绕触达与转化场景，提供微信小程序从开发、审核到运营支持的一体化交付。',
+          points: ['信息架构与交互设计', '支付/消息/地图能力接入', '灰度发布与数据复盘']
+        },
+        {
+          title: 'Web 产品能力',
+          description: '构建面向管理端和业务端的 Web 平台，强调稳定性、可维护性与可扩展性。',
+          points: ['模块化前端工程', '权限审计与日志体系', '持续集成与长期迭代']
+        }
       ],
              productData: [
          {
@@ -332,55 +368,78 @@ export default {
            delivery: '工单流程、设备台账、移动端处理与报表。',
            benefit: '响应效率提升30%以上，维护覆盖率提升至90%以上。'
          },
+         {
+           name: 'App交付',
+           img: solution_app_delivery,
+           url: '/ourPlan/appDelivery',
+           isLink: false,
+           scene: '面向企业员工端、客户端和现场作业端的移动化业务场景。',
+           delivery: '产品定义、客户端开发、接口联调、发布与迭代监控。',
+           benefit: '提升业务触达效率与移动端处理闭环速度。'
+         },
+         {
+           name: '小程序方案',
+           img: solution_mini_program,
+           url: '/ourPlan/miniProgram',
+           isLink: false,
+           scene: '轻量触达、服务预约、活动运营与会员管理等高频场景。',
+           delivery: '小程序设计开发、能力接入、审核上线与运营支持。',
+           benefit: '降低触达成本，缩短用户从访问到转化的路径。'
+         },
        ],
        cases: [
          {
+           title: '设备知识库与工单分析平台',
            industry: '制造业',
-           problem: '设备故障处理依赖人工经验，定位慢、复盘难。',
-           solution: '建设设备知识库和工单分析看板，将历史故障、处理方案和备件信息统一沉淀。',
+           image: boxbg_cleaning,
+           url: '/ourPlan/aiSolutions',
+           intro: '面向设备运维团队，沉淀故障经验、处理记录与备件信息，减少重复排查成本。',
+           problem: '故障定位依赖人工经验，跨班组复盘难。',
+           solution: '设备知识库、工单归因看板、相似问题检索。',
            result: '故障定位平均耗时下降38%，重复问题处理时间下降42%。'
          },
          {
+           title: '园区智能建筑运营看板',
            industry: '商业园区',
-           problem: '巡检、报修、供应商协同分散在多个系统，管理层缺少实时视图。',
-           solution: '打通设备台账、巡检计划与工单流转，建立异常告警与运营看板。',
+           image: boxbg_smartbuildings,
+           url: '/ourPlan/estateManagement',
+           intro: '将空间、设备、巡检和报修数据统一呈现，帮助管理方掌握现场运行状态。',
+           problem: '巡检、报修和供应商协同分散，缺少实时视图。',
+           solution: '设备台账、巡检计划、异常告警与运营看板。',
            result: '工单闭环效率提升35%，月度人工汇总工作量减少60%。'
          },
          {
+           title: '门店设备物联网监测',
            industry: '零售连锁',
-           problem: '门店设备状态不可视，能耗和异常处理主要依赖人工反馈。',
-           solution: '接入关键设备数据，配置运行阈值、异常提醒和区域维度统计报表。',
+           image: boxbg_iot,
+           url: '/ourPlan/iot',
+           intro: '接入门店关键设备状态，形成区域维度的运行统计、异常提醒和巡检闭环。',
+           problem: '设备状态不可视，能耗和异常处理依赖人工反馈。',
+           solution: '设备接入、阈值告警、区域统计与移动端巡检。',
            result: '异常发现时间缩短70%，单店巡检记录完整率提升至96%。'
+         },
+         {
+           title: '设施管理工单协同系统',
+           industry: '物业与设施运营',
+           image: boxbg_facilitiesmanagement,
+           url: '/ourPlan/facilityManagement',
+           intro: '围绕报修、保养、派单和验收搭建统一流程，提升设施团队跨角色协作效率。',
+           problem: '报修入口分散，保养计划和执行记录难追踪。',
+           solution: '统一工单入口、保养计划、移动处理与验收报表。',
+           result: '平均响应效率提升32%，计划保养覆盖率提升至91%。'
          }
        ],
-       clients: [
-         { logo: client_01 },
-         { logo: client_02 },
-         { logo: client_03 },
-         { logo: client_04 },
-         { logo: client_05 },
-         { logo: client_06 },
-         { logo: client_07 },
-         { logo: client_08 },
-         { logo: client_09 },
-         { logo: client_10 },
-         { logo: client_11 },
-         { logo: client_12 },
-         { logo: client_13 },
-         { logo: client_14 },
-         { logo: client_15 },
-         { logo: client_16 },
-         { logo: client_17 },
-         { logo: client_18 },
-         { logo: client_19 },
-         { logo: client_20 },
-         { logo: client_21 },
-         { logo: client_22 }
-       ],
+      clients: partnerLogos,
 
     }
   },
   methods: {
+    scrollToSection(sectionId) {
+      const target = document.getElementById(sectionId)
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    },
     scrollToProducts() {
       const products = document.getElementById('pageBoxesContainer')
       if (products) {
@@ -393,6 +452,8 @@ export default {
 
 <style scoped>
 .banner {
+  --hero-safe-top: 176px;
+  --hero-safe-bottom: 52px;
   position: relative;
   height: 78vh;
   min-height: 560px;
@@ -419,8 +480,7 @@ export default {
 .banner-overlay {
   position: absolute;
   inset: 0;
-  display: flex;
-  align-items: center;
+  display: block;
   color: #fff;
   background:
     linear-gradient(90deg, rgba(8, 18, 36, 0.88) 0%, rgba(8, 18, 36, 0.62) 45%, rgba(8, 18, 36, 0.18) 100%),
@@ -429,25 +489,36 @@ export default {
 
 .banner-text {
   width: min(1120px, calc(100% - 48px));
+  height: 100%;
   margin: 0 auto;
-  padding-top: 54px;
+  padding-top: var(--hero-safe-top);
+  padding-bottom: var(--hero-safe-bottom);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.banner-copy {
+  width: min(760px, 100%);
+  margin-bottom: 6px;
 }
 
 .banner-title {
   max-width: 760px;
-  margin: 0 0 22px;
+  margin: 0 0 12px;
   color: #fff;
-  font-size: 56px;
+  font-size: 54px;
   font-weight: 700;
-  line-height: 1.12;
+  letter-spacing: -0.02em;
+  line-height: 1.14;
 }
 
 .banner-subtitle {
   max-width: 640px;
   margin: 0;
   color: rgba(255, 255, 255, 0.82);
-  font-size: 20px;
-  line-height: 1.8;
+  font-size: 18px;
+  line-height: 1.9;
 }
 
 .hero-actions,
@@ -471,9 +542,11 @@ export default {
   justify-content: center;
   min-height: 44px;
   padding: 0 20px;
+  border: 0;
   border-radius: 4px;
   font-size: 15px;
   font-weight: 700;
+  cursor: pointer;
   text-decoration: none;
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 }
@@ -492,15 +565,23 @@ export default {
 }
 
 .secondary-cta {
-  border: 1px solid rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.82);
+  background: rgba(15, 23, 42, 0.42);
   color: #fff;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(2px);
 }
 
 .secondary-cta:hover {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.96);
   color: #1d4ed8;
 }
 
+.secondary-cta:focus-visible {
+  outline: 2px solid #93c5fd;
+  outline-offset: 2px;
+}
+
 .text-cta {
   border: 1px solid #2563eb;
   color: #1d4ed8;
@@ -535,12 +616,13 @@ export default {
 
 .company-intro,
 .core-advantages,
+.delivery-capabilities,
 .business-areas,
 .products-section,
 .cases-section,
 .clients-section,
 .contact-section {
-  padding: 96px 0;
+  padding: 108px 0;
 }
 
 .company-intro,
@@ -551,6 +633,7 @@ export default {
 }
 
 .core-advantages,
+.delivery-capabilities,
 .products-section,
 .contact-section {
   background: #fff;
@@ -565,9 +648,10 @@ export default {
 .section-title {
   margin: 0 0 18px;
   color: #101828;
-  font-size: 36px;
+  font-size: 33px;
   font-weight: 700;
-  line-height: 1.25;
+  letter-spacing: -0.015em;
+  line-height: 1.28;
   text-align: center;
 }
 
@@ -595,10 +679,66 @@ export default {
 .contact-info {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 24px;
+  gap: 28px;
   margin-top: 42px;
 }
 
+.capability-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 28px;
+  margin-top: 42px;
+}
+
+.capability-card {
+  border: 1px solid #e4e7ec;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.06);
+  padding: 30px;
+}
+
+.capability-card h3 {
+  margin: 0 0 12px;
+  color: #101828;
+  font-size: 22px;
+  line-height: 1.35;
+}
+
+.capability-card p {
+  margin: 0;
+  color: #667085;
+  font-size: 15px;
+  line-height: 1.75;
+}
+
+.capability-card ul {
+  display: grid;
+  gap: 8px;
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.capability-card li {
+  position: relative;
+  padding-left: 16px;
+  color: #344054;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.capability-card li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 9px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #2563eb;
+}
+
 .intro-card,
 .area-item,
 .case-card,
@@ -606,7 +746,7 @@ export default {
 .box,
 .client-item {
   border: 1px solid #e4e7ec;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #fff;
   box-shadow: 0 16px 40px rgba(16, 24, 40, 0.06);
   transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
@@ -618,9 +758,9 @@ export default {
 .contact-item:hover,
 .box:hover,
 .client-item:hover {
-  transform: translateY(-4px);
+  transform: translateY(-3px);
   border-color: #b6c2d2;
-  box-shadow: 0 22px 50px rgba(16, 24, 40, 0.1);
+  box-shadow: 0 20px 46px rgba(16, 24, 40, 0.09);
 }
 
 .intro-card {
@@ -746,8 +886,8 @@ export default {
 
 .pageBoxes {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 28px;
   margin-top: 42px;
 }
 
@@ -869,20 +1009,64 @@ export default {
 
 .cases-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 28px;
   margin-top: 42px;
 }
 
 .case-card {
-  padding: 30px;
+  display: grid;
+  grid-template-columns: 42% 1fr;
+  min-height: 360px;
+  overflow: hidden;
+  padding: 0;
+}
+
+.case-image {
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+  background: #101828;
+}
+
+.case-image::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(16, 24, 40, 0.04), rgba(16, 24, 40, 0.18));
+}
+
+.case-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.88) contrast(1.02);
+  transition: transform 0.35s ease;
+}
+
+.case-card:hover .case-image img {
+  transform: scale(1.04);
+}
+
+.case-body {
+  display: flex;
+  flex-direction: column;
+  padding: 28px;
+}
+
+.case-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
 }
 
 .case-industry {
   display: inline-flex;
   align-items: center;
   min-height: 28px;
-  margin-bottom: 18px;
   padding: 4px 10px;
   border-radius: 4px;
   background: #eef4ff;
@@ -891,6 +1075,27 @@ export default {
   font-weight: 700;
 }
 
+.case-link {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 6px;
+  color: #1d4ed8;
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.case-link svg {
+  width: 15px;
+  height: 15px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .case-card h3 {
   margin: 0 0 12px;
   color: #101828;
@@ -898,14 +1103,41 @@ export default {
   line-height: 1.4;
 }
 
-.case-card p {
-  margin: 0 0 20px;
+.case-intro {
+  min-height: 78px;
+  margin: 0 0 18px;
   color: #667085;
   font-size: 15px;
   line-height: 1.75;
 }
 
+.case-meta {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.case-meta div {
+  display: grid;
+  gap: 4px;
+  padding-top: 12px;
+  border-top: 1px solid #eef2f7;
+}
+
+.case-meta strong {
+  color: #1d4ed8;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.case-meta span {
+  color: #667085;
+  font-size: 14px;
+  line-height: 1.65;
+}
+
 .case-result {
+  margin-top: auto;
   padding-top: 18px;
   border-top: 1px solid #eef2f7;
   color: #101828;
@@ -983,6 +1215,13 @@ export default {
   padding: 28px;
 }
 
+.contact-entry-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 28px;
+  margin-top: 42px;
+}
+
 .contact-icon {
   flex: 0 0 42px;
   width: 42px;
@@ -1046,8 +1285,10 @@ export default {
 @media (max-width: 992px) {
   .intro-content,
   .advantages-grid,
+  .capability-grid,
   .areas-grid,
   .cases-grid,
+  .contact-entry-grid,
   .contact-info {
     grid-template-columns: 1fr;
   }
@@ -1059,6 +1300,8 @@ export default {
 
 @media (max-width: 768px) {
   .banner {
+    --hero-safe-top: 128px;
+    --hero-safe-bottom: 34px;
     height: 72vh;
     min-height: 520px;
   }
@@ -1069,6 +1312,12 @@ export default {
 
   .banner-text {
     width: calc(100% - 36px);
+    padding-top: var(--hero-safe-top);
+    padding-bottom: var(--hero-safe-bottom);
+  }
+
+  .banner-copy {
+    margin-bottom: 2px;
   }
 
   .banner-title {
@@ -1087,6 +1336,7 @@ export default {
 
   .company-intro,
   .core-advantages,
+  .delivery-capabilities,
   .business-areas,
   .products-section,
   .cases-section,

src/views/ourPlan/aiSolutions.vue

@@ -1,84 +1,36 @@
 <template>
-  <div class="ai-solutions-page">
+  <div class="solution-page">
     <ihead></ihead>
+    <section class="hero" :style="heroStyle">
+      <div class="container hero-inner">
+        <h1>AI 集成方案</h1>
+        <p>围绕知识检索、流程自动化和运营分析，把 AI 能力稳定接入现有业务系统。</p>
+      </div>
+    </section>
 
-    <!-- 页面横幅 -->
-    <div class="page-banner">
-      <div class="banner-content">
+    <section class="section">
       <div class="container">
-          <h1 class="banner-title">AI解决方案</h1>
-          <p class="banner-subtitle">智能驱动未来，AI赋能产业</p>
-        </div>
+        <h2>应用场景</h2>
+        <div class="scene-grid">
+          <article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.22)), url(${scene.image})` }">
+            <h3>{{ scene.title }}</h3>
+            <p>{{ scene.description }}</p>
+          </article>
         </div>
       </div>
+    </section>
 
-    <!-- 主要内容 -->
-    <div class="main-content">
+    <section class="section muted">
       <div class="container">
-        <div class="content-section">
-          <h3 class="section-title">AI技术优势</h3>
-          <p class="section-text">
-            我们围绕业务流程、数据质量和系统集成条件设计智能应用方案，帮助企业把知识检索、数据分析、自动化处理等能力接入现有业务。
-          </p>
-        </div>
-
-        <div class="content-section">
-          <h3 class="section-title">核心AI服务</h3>
-          <div class="ai-services">
-            <div class="service-item">
-              <div class="service-icon">DA</div>
-              <h4>智能数据分析</h4>
-              <p>利用AI算法分析海量数据，挖掘商业价值，为决策提供数据支撑。</p>
-            </div>
-            <div class="service-item">
-              <div class="service-icon">CS</div>
-              <h4>智能客服系统</h4>
-              <p>基于NLP技术的智能客服，24/7全天候服务，提升客户体验。</p>
-            </div>
-            <div class="service-item">
-              <div class="service-icon">PM</div>
-              <h4>预测性维护</h4>
-              <p>通过AI预测设备故障，实现预防性维护，降低维护成本。</p>
-            </div>
-            <div class="service-item">
-              <div class="service-icon">CV</div>
-              <h4>智能图像识别</h4>
-              <p>计算机视觉技术，实现自动化检测、质量控制和安防监控。</p>
+        <h2>交付重点</h2>
+        <div class="card-grid">
+          <article class="card" v-for="item in items" :key="item.title">
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.description }}</p>
+          </article>
         </div>
       </div>
-        </div>
-
-        <div class="content-section">
-          <h3 class="section-title">应用场景</h3>
-          <p class="section-text">
-            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>
-
+    </section>
     <ifooter></ifooter>
   </div>
 </template>
@@ -86,170 +38,30 @@
 <script>
 import ihead from '@/components/ihead.vue'
 import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
 
+const pageImages = solutionImageMap.aiSolutions
 export default {
   name: 'aiSolutions',
-  components: {
-    ihead,
-    ifooter
+  components: { ihead, ifooter },
+  data() {
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(16,20,26,.56), rgba(16,20,26,.3)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '知识库智能检索', description: '将分散文档沉淀为结构化知识，缩短一线检索和反馈链路。', image: pageImages.scenes[0] },
+        { title: '流程自动化协同', description: '接入工单、审批、客服流程，减少重复操作和跨系统切换。', image: pageImages.scenes[1] },
+        { title: '运营数据分析', description: '结合实时与历史数据输出可执行建议，支撑持续迭代优化。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '场景诊断', description: '结合业务目标和数据现状确认可落地优先级，避免无效建设。' },
+        { title: '系统接入', description: '对接知识库、工单、客服和运营系统，保障权限和日志闭环。' },
+        { title: '运营优化', description: '通过准确率、时效和人工工时指标持续评估并迭代。' }
+      ]
+    }
   }
 }
 </script>
 
 <style scoped>
-.ai-solutions-page {
-  min-height: 100vh;
-  background: #f8f9fa;
-  display: flex;
-  flex-direction: column;
-}
-
-.page-banner {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 80px 0;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.banner-title {
-  font-size: 3rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
-.banner-subtitle {
-  font-size: 1.2rem;
-  opacity: 0.9;
-}
-
-.main-content {
-  flex: 1;
-  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: 1.5rem;
-  text-align: center;
-}
-
-.section-text {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  color: #555;
-  text-align: center;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.ai-services {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 30px;
-  margin-top: 40px;
-}
-
-.service-item {
-  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-item:hover {
-  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 {
-  color: #666;
-  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;
-  }
-  
-  .banner-subtitle {
-    font-size: 1rem;
-  }
-  
-  .ai-services {
-    grid-template-columns: 1fr;
-  }
-  
-  .tech-architecture {
-    grid-template-columns: 1fr;
-  }
-  
-  .main-content {
-    padding: 40px 0;
-  }
-  
-  .content-section {
-    margin-bottom: 40px;
-  }
-}
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
 </style>

src/views/ourPlan/appDelivery.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="solution-page">
+    <ihead></ihead>
+    <section class="hero" :style="heroStyle"><div class="container hero-inner"><h1>App 交付方案</h1><p>面向 iOS / Android 的企业级应用交付，覆盖从需求定义到版本迭代的全流程。</p></div></section>
+    <section class="section"><div class="container"><h2>应用场景</h2><div class="scene-grid"><article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.2)), url(${scene.image})` }"><h3>{{scene.title}}</h3><p>{{scene.description}}</p></article></div></div></section>
+    <section class="section muted"><div class="container"><h2>交付重点</h2><div class="card-grid"><article class="card" v-for="item in items" :key="item.title"><h3>{{item.title}}</h3><p>{{item.description}}</p></article></div></div></section>
+    <ifooter></ifooter>
+  </div>
+</template>
+<script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
+
+const pageImages = solutionImageMap.appDelivery
+export default {
+  name: 'appDelivery',
+  components: { ihead, ifooter },
+  data() {
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(18,22,28,.56), rgba(18,22,28,.24)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '移动业务入口', description: '为客户与员工提供统一移动入口，承载核心服务流程。', image: pageImages.scenes[0] },
+        { title: '现场作业协同', description: '支持离线处理、任务派发与进度回传，提升现场执行效率。', image: pageImages.scenes[1] },
+        { title: '运营数据回流', description: '把端上行为与业务数据回流中台，支撑精细化运营。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '产品定义与原型', description: '结合业务流程与目标用户设计信息结构、关键页面和交互路径。' },
+        { title: '客户端开发与联调', description: '完成 iOS / Android 开发，接入认证、消息、支付、日志与监控。' },
+        { title: '上线与持续迭代', description: '建立版本发布、崩溃监控和数据复盘机制，持续优化体验。' }
+      ]
+    }
+  }
+}
+</script>
+<style scoped>
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
+</style>

src/views/ourPlan/estateManagement.vue

@@ -1,163 +1,38 @@
 <template>
-  <div class="estate-management-page">
+  <div class="solution-page">
     <ihead></ihead>
-    
-    <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>
-          
-          <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>
-    
+    <section class="hero" :style="heroStyle"><div class="container hero-inner"><h1>智能建筑方案</h1><p>整合空间、设备、巡检与能耗数据，打造可视、可控、可优化的建筑运营体系。</p></div></section>
+    <section class="section"><div class="container"><h2>应用场景</h2><div class="scene-grid"><article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.2)), url(${scene.image})` }"><h3>{{scene.title}}</h3><p>{{scene.description}}</p></article></div></div></section>
+    <section class="section muted"><div class="container"><h2>交付重点</h2><div class="card-grid"><article class="card" v-for="item in items" :key="item.title"><h3>{{item.title}}</h3><p>{{item.description}}</p></article></div></div></section>
     <ifooter></ifooter>
   </div>
 </template>
-
 <script>
 import ihead from '@/components/ihead.vue'
 import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
 
+const pageImages = solutionImageMap.estateManagement
 export default {
   name: 'EstateManagement',
-  components: {
-    ihead,
-    ifooter
-  },
+  components: { ihead, ifooter },
   data() {
-    return {};
-  },
-};
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(18,22,28,.5), rgba(18,22,28,.24)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '空间运营看板', description: '统一查看楼宇空间、设备状态和异常事件，提升管理透明度。', image: pageImages.scenes[0] },
+        { title: '巡检与告警联动', description: '按规则触发告警和工单派发，缩短响应链路与处理时长。', image: pageImages.scenes[1] },
+        { title: '能耗优化管理', description: '围绕峰谷策略和设备运行数据优化能耗模型。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '设备全景可视', description: '统一展示设备状态、告警和巡检记录，提升现场透明度。' },
+        { title: '联动规则配置', description: '按业务规则触发告警、派单和处理流程，缩短响应链路。' },
+        { title: '能耗与运维优化', description: '结合运行数据持续优化设备策略，降低能耗和维护成本。' }
+      ]
+    }
+  }
+}
 </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;
-  }
-}
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
 </style>

src/views/ourPlan/facilityManagement.vue

@@ -1,280 +1,38 @@
 <template>
-  <div class="facility-management-page">
+  <div class="solution-page">
     <ihead></ihead>
-    
-    <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">BLD</div>
-            <h3>建筑维护</h3>
-            <p>定期检查、预防性维护、应急响应，确保建筑设施始终处于最佳状态</p>
-          </div>
-          
-          <div class="service-card">
-            <div class="service-icon">
-              <img src="../../assets/img/ic_3.png" alt="设施管理" class="icon-image">
-            </div>
-            <h3>设备管理</h3>
-            <p>设备生命周期管理、性能监控、故障预警，最大化设备使用效率</p>
-          </div>
-          
-          <div class="service-card">
-            <div class="service-icon">DAT</div>
-            <h3>数据分析</h3>
-            <p>运营数据收集、性能分析、优化建议，数据驱动的决策支持</p>
-          </div>
-          
-          <div class="service-card">
-            <div class="service-icon">OPS</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>
-    
+    <section class="hero" :style="heroStyle"><div class="container hero-inner"><h1>设施管理方案</h1><p>围绕工单、保养、备件和验收构建设施运营闭环，提升管理效率与服务质量。</p></div></section>
+    <section class="section"><div class="container"><h2>应用场景</h2><div class="scene-grid"><article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.2)), url(${scene.image})` }"><h3>{{scene.title}}</h3><p>{{scene.description}}</p></article></div></div></section>
+    <section class="section muted"><div class="container"><h2>交付重点</h2><div class="card-grid"><article class="card" v-for="item in items" :key="item.title"><h3>{{item.title}}</h3><p>{{item.description}}</p></article></div></div></section>
     <ifooter></ifooter>
   </div>
 </template>
-
 <script>
 import ihead from '@/components/ihead.vue'
 import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
 
+const pageImages = solutionImageMap.facilityManagement
 export default {
   name: 'FacilityManagement',
-  components: {
-    ihead,
-    ifooter
+  components: { ihead, ifooter },
+  data() {
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(18,22,28,.56), rgba(18,22,28,.26)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '工单闭环管理', description: '统一报修、派单、处理和验收流程，减少跨岗位信息断层。', image: pageImages.scenes[0] },
+        { title: '保养计划执行', description: '根据设备台账和策略生成保养任务，提升计划执行稳定性。', image: pageImages.scenes[1] },
+        { title: '运营指标复盘', description: '从响应时效、故障分布和闭环率持续优化运维策略。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '工单流程标准化', description: '统一报修、派单、处理、验收流程，减少跨团队沟通损耗。' },
+        { title: '设备台账与保养', description: '建设设备全生命周期台账，结合计划性保养保障运行稳定。' },
+        { title: '运营数据看板', description: '实时查看响应时效、闭环率和故障分布，支持持续优化。' }
+      ]
     }
-};
+  }
+}
 </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;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.service-icon .icon-image {
-  width: 60px;
-  height: 60px;
-  object-fit: contain;
-}
-
-.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);
-  }
-}
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
 </style>

src/views/ourPlan/iot.vue

@@ -1,223 +1,38 @@
 <template>
-  <div class="iot-page">
+  <div class="solution-page">
     <ihead></ihead>
-    
-    <div class="page-content">
-      <div class="banner-section">
-        <h1>物联网解决方案</h1>
-        <p>连接万物，智能互联，打造数字化未来</p>
-      </div>
-      
-      <div class="content-section">
-        <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>
-    
+    <section class="hero" :style="heroStyle"><div class="container hero-inner"><h1>物联网方案</h1><p>连接设备、边缘节点与平台系统，构建实时感知、快速响应的运行网络。</p></div></section>
+    <section class="section"><div class="container"><h2>应用场景</h2><div class="scene-grid"><article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.2)), url(${scene.image})` }"><h3>{{scene.title}}</h3><p>{{scene.description}}</p></article></div></div></section>
+    <section class="section muted"><div class="container"><h2>交付重点</h2><div class="card-grid"><article class="card" v-for="item in items" :key="item.title"><h3>{{item.title}}</h3><p>{{item.description}}</p></article></div></div></section>
     <ifooter></ifooter>
   </div>
 </template>
-
 <script>
 import ihead from '@/components/ihead.vue'
 import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
 
+const pageImages = solutionImageMap.iot
 export default {
   name: 'IoT',
-  components: {
-    ihead,
-    ifooter
-  },
-  mounted() {},
-};
+  components: { ihead, ifooter },
+  data() {
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(18,22,28,.52), rgba(18,22,28,.24)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '设备状态监测', description: '实时采集关键设备数据，动态掌握运行状态与波动趋势。', image: pageImages.scenes[0] },
+        { title: '异常告警联动', description: '按规则触发告警和处理动作，快速定位并缩短恢复时间。', image: pageImages.scenes[1] },
+        { title: '区域运行分析', description: '按区域和设备维度输出统计视图，支撑运维与管理决策。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '设备接入标准化', description: '统一设备协议、状态字典与采集规则，减少接入复杂度。' },
+        { title: '实时监测与告警', description: '按阈值和规则触发告警并关联处置流程，缩短故障处理时间。' },
+        { title: '运维数据闭环', description: '沉淀历史运行数据，支持预测性维护和设备利用率优化。' }
+      ]
+    }
+  }
+}
 </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;
-  }
-}
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
 </style>

src/views/ourPlan/miniProgram.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="solution-page">
+    <ihead></ihead>
+    <section class="hero" :style="heroStyle"><div class="container hero-inner"><h1>小程序解决方案</h1><p>围绕业务触达、服务闭环和运营转化，提供小程序从设计到上线的完整交付。</p></div></section>
+    <section class="section"><div class="container"><h2>应用场景</h2><div class="scene-grid"><article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.2)), url(${scene.image})` }"><h3>{{scene.title}}</h3><p>{{scene.description}}</p></article></div></div></section>
+    <section class="section muted"><div class="container"><h2>交付重点</h2><div class="card-grid"><article class="card" v-for="item in items" :key="item.title"><h3>{{item.title}}</h3><p>{{item.description}}</p></article></div></div></section>
+    <ifooter></ifooter>
+  </div>
+</template>
+<script>
+import ihead from '@/components/ihead.vue'
+import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
+
+const pageImages = solutionImageMap.miniProgram
+export default {
+  name: 'miniProgram',
+  components: { ihead, ifooter },
+  data() {
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(18,22,28,.54), rgba(18,22,28,.24)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '服务触达入口', description: '通过轻量入口快速触达用户，覆盖预约、查询、售后等场景。', image: pageImages.scenes[0] },
+        { title: '业务闭环执行', description: '结合支付、消息、地图等能力实现端到端业务闭环。', image: pageImages.scenes[1] },
+        { title: '活动与增长运营', description: '支持活动编排、会员沉淀和转化分析，提升运营效率。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '场景定义与流程设计', description: '围绕用户入口、业务路径和数据留痕设计核心功能链路。' },
+        { title: '能力接入与开发', description: '完成支付、消息、会员、地图、设备接口等能力接入与联调。' },
+        { title: '运营与增长支持', description: '提供数据看板、活动配置和灰度发布策略，支撑持续优化。' }
+      ]
+    }
+  }
+}
+</script>
+<style scoped>
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
+</style>

src/views/ourPlan/ourPlan.vue

@@ -2,88 +2,41 @@
   <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">
+    <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>
 
-    <!-- 主要内容 -->
-    <div class="main-content">
+    <section class="main-content">
       <div class="container">
-        <div class="content-section">
-          <h3 class="section-title">核心服务</h3>
+        <h2 class="section-title">核心服务</h2>
         <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>
+          <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="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>
-        </div>
-
-        <div class="content-section">
-          <h3 class="section-title">为什么选择我们？</h3>
+    <section class="main-content muted">
+      <div class="container">
+        <h2 class="section-title">交付方式</h2>
         <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 class="feature-item" v-for="feature in features" :key="feature.title">
+            <h3>{{ feature.title }}</h3>
+            <p>{{ feature.description }}</p>
           </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;
   }

src/views/ourPlan/solutionImageMap.js

@@ -0,0 +1,65 @@
+import aiWorkflowHero from '@/assets/img/ai-workflow-hero.jpg'
+import aiDashboardCard from '@/assets/img/ai-dashboard-card.png'
+import financeTrading from '@/assets/img/finance-trading-660x370.png'
+import reinventingGraphics from '@/assets/img/reinventing-modern-graphics-fallback.jpg'
+
+import estateHero from '@/assets/img/like-no-place-youve-ever-worked.jpg'
+import estateScene1 from '@/assets/img/boxbg-propertyandrealestate.jpg'
+import estateScene2 from '@/assets/img/banner-page-about-us-mobile.jpg'
+import estateScene3 from '@/assets/img/smart-city-network.png'
+
+import iotHero from '@/assets/img/driving-automotive-growth-fallback.jpg'
+import iotScene1 from '@/assets/img/iot1.jpg'
+import iotScene2 from '@/assets/img/iot2.jpg'
+import iotScene3 from '@/assets/img/boxbg-iot.png'
+
+import facilityHero from '@/assets/img/supercharging-healthcare-fallback.jpg'
+import facilityScene1 from '@/assets/img/boxbg-facilitiesmanagement.png'
+import facilityScene2 from '@/assets/img/boxbg-smartbuildings.png'
+import facilityScene3 from '@/assets/img/chatgpt-image-2026-4-27-15-12-15.png'
+
+import integrationHero from '@/assets/img/integration-platform-hero.jpg'
+import integrationScene1 from '@/assets/img/boxbg-errands.png'
+import integrationScene2 from '@/assets/img/banner-index2.png'
+import integrationScene3 from '@/assets/img/banner-index3.png'
+
+import appHero from '@/assets/img/app-delivery-flow.png'
+import appScene1 from '@/assets/img/chatgpt-image-2026-4-27-15-26-26.png'
+import appScene2 from '@/assets/img/chatgpt-image-2026-4-27-15-26-22.png'
+import appScene3 from '@/assets/img/chatgpt-image-2026-4-27-15-25-58.png'
+
+import miniHero from '@/assets/img/mini-program-growth-hero.jpg'
+import miniScene1 from '@/assets/img/banner-index1-mobile.jpg'
+import miniScene2 from '@/assets/img/chatgpt-image-2026-4-27-15-26-06.png'
+import miniScene3 from '@/assets/img/chatgpt-image-2026-4-27-15-26-14.png'
+
+export const solutionImageMap = {
+  aiSolutions: {
+    hero: aiWorkflowHero,
+    scenes: [aiDashboardCard, financeTrading, reinventingGraphics]
+  },
+  estateManagement: {
+    hero: estateHero,
+    scenes: [estateScene1, estateScene2, estateScene3]
+  },
+  iot: {
+    hero: iotHero,
+    scenes: [iotScene1, iotScene2, iotScene3]
+  },
+  facilityManagement: {
+    hero: facilityHero,
+    scenes: [facilityScene1, facilityScene2, facilityScene3]
+  },
+  technologyIntegration: {
+    hero: integrationHero,
+    scenes: [integrationScene1, integrationScene2, integrationScene3]
+  },
+  appDelivery: {
+    hero: appHero,
+    scenes: [appScene1, appScene2, appScene3]
+  },
+  miniProgram: {
+    hero: miniHero,
+    scenes: [miniScene1, miniScene2, miniScene3]
+  }
+}

src/views/ourPlan/technologyIntegration.vue

@@ -1,313 +1,38 @@
 <template>
-  <div class="technology-integration-page">
+  <div class="solution-page">
     <ihead></ihead>
-    
-    <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>
-           <p>通过标准化的集成接口和强大的数据同步能力，实现业务流程的自动化和数据的实时共享，提升企业运营效率。</p>
-         </div>
-        
-                 <div class="integration-methods">
-           <h2>集成方案</h2>
-          <div class="methods-grid">
-            <div class="method-card">
-              <div class="method-icon">API</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">MID</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">ETL</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">CLD</div>
-               <div class="feature-content">
-                 <h4>云端部署</h4>
-                 <p>基于云原生架构，支持弹性扩展，确保系统高可用性和稳定性</p>
-               </div>
-             </div>
-            
-                         <div class="feature-item">
-               <div class="feature-icon">SEC</div>
-               <div class="feature-content">
-                 <h4>安全可靠</h4>
-                 <p>多层次安全防护，支持企业级权限管理，确保数据安全和系统稳定</p>
-               </div>
-             </div>
-            
-                         <div class="feature-item">
-               <div class="feature-icon">OPS</div>
-               <div class="feature-content">
-                 <h4>统一管理</h4>
-                 <p>提供统一的系统管理界面，简化运维操作，提升管理效率</p>
-               </div>
-             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    
+    <section class="hero" :style="heroStyle"><div class="container hero-inner"><h1>系统集成方案</h1><p>打通业务系统、数据平台和流程引擎，构建稳定、可扩展的企业级技术底座。</p></div></section>
+    <section class="section"><div class="container"><h2>应用场景</h2><div class="scene-grid"><article class="scene-card" v-for="scene in scenes" :key="scene.title" :style="{ backgroundImage: `linear-gradient(130deg, rgba(20,24,31,.62), rgba(20,24,31,.2)), url(${scene.image})` }"><h3>{{scene.title}}</h3><p>{{scene.description}}</p></article></div></div></section>
+    <section class="section muted"><div class="container"><h2>交付重点</h2><div class="card-grid"><article class="card" v-for="item in items" :key="item.title"><h3>{{item.title}}</h3><p>{{item.description}}</p></article></div></div></section>
     <ifooter></ifooter>
   </div>
 </template>
-
 <script>
 import ihead from '@/components/ihead.vue'
 import ifooter from '@/components/ifooter.vue'
+import { solutionImageMap } from './solutionImageMap'
 
+const pageImages = solutionImageMap.technologyIntegration
 export default {
   name: 'TechnologyIntegration',
-  components: {
-    ihead,
-    ifooter
+  components: { ihead, ifooter },
+  data() {
+    return {
+      heroStyle: { backgroundImage: `linear-gradient(135deg, rgba(18,22,28,.56), rgba(18,22,28,.26)), url(${pageImages.hero})` },
+      scenes: [
+        { title: '跨系统接口统一', description: '统一 API 契约与鉴权逻辑，减少系统对接摩擦。', image: pageImages.scenes[0] },
+        { title: '数据同步编排', description: '支持实时与批量同步，建立稳定可追踪的数据流。', image: pageImages.scenes[1] },
+        { title: '平台化运维管理', description: '集中监控日志、链路与告警，提升故障定位效率。', image: pageImages.scenes[2] }
+      ],
+      items: [
+        { title: '接口与协议治理', description: '统一 API 标准、鉴权策略与数据契约，降低跨系统协作成本。' },
+        { title: '数据同步与编排', description: '支持实时与批量同步，建立可靠的数据流和任务编排机制。' },
+        { title: '运维与可观测性', description: '构建日志、监控和告警体系，确保平台稳定运行与快速定位问题。' }
+      ]
     }
-};
+  }
+}
 </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);
-  }
-}
+.solution-page{min-height:100vh;background:#f8fafc}.container{max-width:1180px;margin:0 auto;padding:0 24px}.hero{padding:154px 0 92px;background-size:cover;background-position:center}.hero-inner{color:#fff}.hero h1{margin:0 0 14px;font-size:42px;letter-spacing:-.02em}.hero p{margin:0;max-width:760px;color:rgba(255,255,255,.88);line-height:1.85}.section{padding:82px 0}.section.muted{background:#f1f5f9}h2{margin:0 0 26px;text-align:center;font-size:32px;color:#101828}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{min-height:240px;border-radius:14px;padding:24px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 16px 36px rgba(15,23,42,.16)}.scene-card h3{margin:0 0 8px;font-size:22px}.scene-card p{margin:0;line-height:1.75;color:rgba(255,255,255,.88)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}.card h3{margin:0 0 10px;color:#101828}.card p{margin:0;color:#667085;line-height:1.75}@media(max-width:992px){.scene-grid,.card-grid{grid-template-columns:1fr}}
 </style>