diff --git a/src/assets/img/invest - 副本.png b/src/assets/img/invest - 副本.png
new file mode 100644
index 0000000..14d3099
Binary files /dev/null and b/src/assets/img/invest - 副本.png differ
diff --git a/src/assets/img/invest.png b/src/assets/img/invest.png
index 14d3099..88b1e35 100644
Binary files a/src/assets/img/invest.png and b/src/assets/img/invest.png differ
diff --git a/src/components/CaseLogo.vue b/src/components/CaseLogo.vue
index 2bb4524..3ef4317 100644
--- a/src/components/CaseLogo.vue
+++ b/src/components/CaseLogo.vue
@@ -1,41 +1,10 @@
 <template>
-  <!-- <img alt="zhichou" class="zui-logo" :src="src" @click="onClick"/> -->
-   <img alt="zhichou" class="zui-logo" :src="src" />
+  <span class="zui-case-logo" @click="onClick">
+    <i>{{ serial }}</i>
+    <b>{{ label }}</b>
+  </span>
 </template>
 <script>
-  import './less/logo.less'
-  import case1 from './img/case1.png'
-  import case2 from './img/case2.png'
-  import case3 from './img/case3.png'
-  import case4 from './img/case4.png'
-  import case5 from './img/case5.png'
-  import case6 from './img/case6.png'
-  import case7 from './img/case7.png'
-  import case8 from './img/case8.png'
-  import case9 from './img/case9.png'
-  import case10 from './img/case10.png'
-  import case11 from './img/case11.png'
-  import case12 from './img/case12.png'
-  import case13 from './img/case13.png'
-  import case14 from './img/case14.png'
-  import case15 from './img/case15.png'
-
-  import mcase1 from './img/mcase1.png'
-  import mcase2 from './img/mcase2.png'
-  import mcase3 from './img/mcase3.png'
-  import mcase4 from './img/mcase4.png'
-  import mcase5 from './img/mcase5.png'
-  import mcase6 from './img/mcase6.png'
-  import mcase7 from './img/mcase7.png'
-  import mcase8 from './img/mcase8.png'
-  import mcase9 from './img/mcase9.png'
-  import mcase10 from './img/mcase10.png'
-  import mcase11 from './img/mcase11.png'
-  import mcase12 from './img/mcase12.png'
-  import mcase13 from './img/mcase13.png'
-  import mcase14 from './img/mcase14.png'
-  import mcase15 from './img/mcase15.png'
-
   export default {
     name: 'CaseLogo',
     props: {
@@ -47,99 +16,12 @@
       }
     },
     computed: {
-      src: function () {
-        if (this.type === 'case1') {
-          return case1
-        }
-        if (this.type === 'case2') {
-          return case2
-        }
-        if (this.type === 'case3') {
-          return case3
-        }
-        if (this.type === 'case4') {
-          return case4
-        }
-        if (this.type === 'case5') {
-          return case5
-        }
-        if (this.type === 'case6') {
-          return case6
-        }
-        if (this.type === 'case7') {
-          return case7
-        }
-        if (this.type === 'case8') {
-          return case8
-        }
-        if (this.type === 'case9') {
-          return case9
-        }
-        if (this.type === 'case10') {
-          return case10
-        }
-        if (this.type === 'case11') {
-          return case11
-        }
-        if (this.type === 'case12') {
-          return case12
-        }
-        if (this.type === 'case13') {
-          return case13
-        }
-        if (this.type === 'case14') {
-          return case14
-        }
-        if (this.type === 'case15') {
-          return case15
-        }
-
-
-       if (this.type === 'mcase1') {
-         return mcase1
-       }
-       if (this.type === 'mcase2') {
-         return mcase2
-       }
-       if (this.type === 'mcase3') {
-         return mcase3
-       }
-       if (this.type === 'mcase4') {
-         return mcase4
-       }
-       if (this.type === 'mcase5') {
-         return mcase5
-       }
-       if (this.type === 'mcase6') {
-         return mcase6
-       }
-       if (this.type === 'mcase7') {
-         return mcase7
-       }
-       if (this.type === 'mcase8') {
-         return mcase8
-       }
-       if (this.type === 'mcase9') {
-         return mcase9
-       }
-       if (this.type === 'mcase10') {
-         return mcase10
-       }
-       if (this.type === 'mcase11') {
-         return mcase11
-       }
-       if (this.type === 'mcase12') {
-         return mcase12
-       }
-       if (this.type === 'mcase13') {
-         return mcase13
-       }
-       if (this.type === 'mcase14') {
-         return mcase14
-       }
-       if (this.type === 'mcase15') {
-         return mcase15
-       }
+      serial: function () {
+        const matched = String(this.type).match(/\d+/)
+        return matched ? matched[0].padStart(2, '0') : '01'
+      },
+      label: function () {
+        return '智聪案例'
       }
     },
     methods: {
@@ -149,3 +31,62 @@
     }
   }
 </script>
+
+<style scoped lang="less">
+.zui-case-logo {
+  width: 132px;
+  height: 48px;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+  overflow: hidden;
+  color: #eaffff;
+  border: 1px solid rgba(107, 232, 255, .28);
+  border-radius: 8px;
+  background:
+    linear-gradient(rgba(107, 232, 255, .08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .08) 1px, transparent 1px),
+    rgba(4, 18, 34, .92);
+  background-size: 14px 14px;
+  cursor: pointer;
+  box-shadow: inset 0 0 22px rgba(107, 232, 255, .08);
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: -28px;
+    top: 0;
+    width: 44px;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(107, 232, 255, .24), transparent);
+    transform: skewX(-18deg);
+  }
+
+  i,
+  b {
+    position: relative;
+    z-index: 1;
+    font-style: normal;
+  }
+
+  i {
+    width: 30px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #03111e;
+    border-radius: 6px;
+    background: linear-gradient(135deg, #6be8ff, #8effcf);
+    font-size: 12px;
+    font-weight: 900;
+  }
+
+  b {
+    font-size: 13px;
+    letter-spacing: 1px;
+  }
+}
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 405b486..dd56926 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,23 +1,64 @@
 <template>
   <footer class="zui-footer">
-    <div class="footer-content">
-      <div class="footer-qrcode">
-        <img src="../assets/img/qrcode.png" width="270" height="155" alt="客服二维码">
+    <div class="footer-shell">
+      <div class="footer-brand">
+        <img class="footer-logo" src="./img/logo.png" alt="智聪网络科技">
+        <p>专注资产管理、健康档案与物联网平台建设，用稳定易用的多端产品连接真实业务场景。</p>
+        <div class="footer-tags">
+          <span>数字资产</span>
+          <span>健康档案</span>
+          <span>智聪物联</span>
+        </div>
       </div>
-      <div class="links">
-        <a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备2024118666号-1</a>
-        <img src="./img/gongan.png" width="18" height="20" alt="公安图标">&nbsp;<a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" rel="noreferrer" target="_blank">鲁公网安备37021202001661</a>
+
+      <div class="footer-column">
+        <h3>产品矩阵</h3>
+        <a href="http://invest.qdintc.com" target="_blank" rel="noreferrer">记账平台</a>
+        <a href="http://health.qdintc.com" target="_blank" rel="noreferrer">健康档案</a>
+        <a href="http://iot.qdintc.com" target="_blank" rel="noreferrer">智聪物联</a>
+      </div>
+
+      <div class="footer-column">
+        <h3>服务支持</h3>
+        <router-link to="/resource">资料下载</router-link>
+        <router-link to="/callus">联系我们</router-link>
+        <span class="footer-phone">17753252359</span>
+      </div>
+
+      <div class="footer-qr-panel">
+        <h3>扫码连接</h3>
+        <div class="qr-list">
+          <div class="qr-item">
+            <img src="../assets/img/wxgzh.jpg" alt="微信公众号二维码">
+            <span>微信公众号</span>
+          </div>
+          <div class="qr-item">
+            <img src="../assets/img/zckj.jpg" alt="客服微信二维码">
+            <span>智聪客服</span>
+          </div>
+        </div>
       </div>
     </div>
-    <p class="copy-right">
-       Copyright 2026 智聪网络科技 .All rights reserved
-      <br>
-     
-    </p>
 
+    <div class="footer-bottom">
+      <span>Copyright {{ currentYear }} 智聪网络科技 .All rights reserved</span>
+      <div class="record-links">
+        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">鲁ICP备2024118666号-1</a>
+        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" target="_blank" rel="noreferrer">
+          <img class="gongan-icon" src="./img/gongan.png" alt="公安备案图标">
+          鲁公网安备37021202001661
+        </a>
+      </div>
+    </div>
   </footer>
 </template>
 <script>
   import './less/footer.less'
-  export default {}
+  export default {
+    data() {
+      return {
+        currentYear: new Date().getFullYear()
+      }
+    }
+  }
 </script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9c78c11..6377ff1 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,36 +1,52 @@
 <template>
   <div>
     <header class="zui-header">
-      <logo type="xiaoyanyun" href="/"></logo>
-      <h4 class="zui-logo-text">
-        <a class="zui-nav-link" :href="currentLinks.accounting" target="_blank">&nbsp;&nbsp;记账平台</a>
-        <a class="zui-nav-link" :href="currentLinks.health" target="_blank">&nbsp;&nbsp;健康档案</a>
-        <!-- <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a> -->
-         <a class="zui-nav-link" :href="currentLinks.iot" target="_blank">&nbsp;&nbsp;智聪物联</a>
-      </h4>
-      <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
-      <div v-show="webShow">
-        <slot name="buttons"></slot>
+      <div class="zui-header__inner">
+        <div class="zui-brand-mark">
+          <logo type="xiaoyanyun" href="/"></logo>
+        </div>
+
+        <nav class="zui-logo-text" aria-label="产品导航">
+          <a class="zui-nav-link" :href="currentLinks.accounting" target="_blank" rel="noreferrer">记账平台</a>
+          <a class="zui-nav-link" :href="currentLinks.health" target="_blank" rel="noreferrer">健康档案</a>
+          <a class="zui-nav-link" :href="currentLinks.iot" target="_blank" rel="noreferrer">智聪物联</a>
+        </nav>
+
+        <button v-show="mobileShow" class="zui-rightcol" type="button" @click="openMenu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+
+        <div v-show="webShow" class="zui-header__actions">
+          <slot name="buttons"></slot>
+        </div>
       </div>
     </header>
-    
-    <!-- 移动端抽屉菜单（移到header外面） -->
+
     <div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
-    <div v-show="drawerVisible" class="zui-drawer">
-      <div class="zui-drawer__header">菜单</div>
+    <aside v-show="drawerVisible" class="zui-drawer">
+      <div class="zui-drawer__header">智聪科技</div>
       <ul class="zui-drawer__list">
         <li @click="navigateTo('/')">首页</li>
         <li @click="navigateTo('/resource')">资料下载</li>
         <li @click="navigateTo('/callus')">联系我们</li>
       </ul>
-    </div>
+      <div class="zui-drawer__group">产品入口</div>
+      <ul class="zui-drawer__list">
+        <li @click="openService('accounting')">记账平台</li>
+        <li @click="openService('health')">健康档案</li>
+        <li @click="openService('iot')">智聪物联</li>
+      </ul>
+    </aside>
   </div>
 </template>
+
 <script>
   import './less/header.less'
   import Logo from './Logo'
   import Util from '../Util'
-  
+
   export default {
     props: {
       logoType: {
@@ -38,22 +54,20 @@
       }
     },
     components: {Logo},
-    data() {
+    data () {
       return {
-        // 统一管理的导航链接
         navLinks: {
-          // Web端链接
           web: {
             accounting: 'http://invest.qdintc.com',
             health: 'http://health.qdintc.com',
             imaotai: 'http://imaotai.qdintc.com',
             iot: 'http://iot.qdintc.com'
           },
-          // 移动端H5链接
           mobile: {
             accounting: 'http://investh5.qdintc.com',
             health: 'http://healthh5.qdintc.com',
-            imaotai: 'http://imaotaih5.qdintc.com'
+            imaotai: 'http://imaotaih5.qdintc.com',
+            iot: 'http://iot.qdintc.com'
           }
         },
         mobileShow: false,
@@ -62,45 +76,42 @@
         isMobile: false
       }
     },
-    created() {
+    created () {
       this.init()
     },
     computed: {
-      // 根据设备类型返回对应的链接
-      currentLinks() {
+      currentLinks () {
         return this.isMobile ? this.navLinks.mobile : this.navLinks.web
       }
     },
     methods: {
-      init() {
-        // 检测是否为移动端
+      init () {
         this.isMobile = Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
-        
-        if (this.isMobile) {
-          this.webShow = false
-          this.mobileShow = true
-        } else {
-          this.webShow = true
-          this.mobileShow = false
-        }
+        this.webShow = !this.isMobile
+        this.mobileShow = this.isMobile
       },
-      openMenu() {
+      openMenu () {
         this.drawerVisible = true
         this.$emit('menu-open')
       },
-      closeMenu() {
+      closeMenu () {
         this.drawerVisible = false
         this.$emit('menu-close')
       },
-      navigateTo(path) {
-        // 使用 Vue Router 的全局路由实例
+      navigateTo (path) {
         if (this.$router) {
           this.$router.push({path})
         } else {
-          // 如果路由不可用，使用原生跳转
           window.location.href = path
         }
         this.closeMenu()
+      },
+      openService (type) {
+        const link = this.currentLinks[type]
+        if (link) {
+          window.open(link, '_blank')
+        }
+        this.closeMenu()
       }
     }
   }
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index b02a452..7320de0 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -4,14 +4,6 @@
 <script>
   import './less/logo.less'
   import logo from './img/logo.png'
-  import zlogo from './img/zlogo.png'
-  import hrLogo from './img/hr-logo.png'
-  import plusLogo from './img/plus-logo.png'
-  import iotLogo from './img/iot-logo.png'
-  import mlogo from './img/m-logo.png'
-  import mhrLogo from './img/m-hr-logo.png'
-  import mplusLogo from './img/m-plus-logo.png'
-  import miotLogo from './img/m-iot-logo.png'
   export default {
     name: 'Logo',
     props: {
@@ -24,33 +16,7 @@
     },
     computed: {
       src: function () {
-        if (this.type === 'xiaoyanyun') {
-          return logo
-        }
-        if (this.type === 'zhongtai') {
-          return zlogo
-        }
-        if (this.type === 'mzhichou') {
-          return mlogo
-        }
-        if (this.type === 'hr') {
-          return hrLogo
-        }
-        if (this.type === 'mhr') {
-          return mhrLogo
-        }
-        if (this.type === 'plus') {
-          return plusLogo
-        }
-        if (this.type === 'mplus') {
-          return mplusLogo
-        }
-        if (this.type === 'iot') {
-          return iotLogo
-        }
-        if (this.type === 'miot') {
-          return miotLogo
-        }
+        return logo
       }
     },
     methods: {
diff --git a/src/components/less/button.less b/src/components/less/button.less
index 52166a9..fcf3977 100644
--- a/src/components/less/button.less
+++ b/src/components/less/button.less
@@ -1,47 +1,72 @@
 @import "./mixin";
 
-.@{prefix}-button{
+.@{prefix}-button {
   position: relative;
-  color: #fff;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 40px;
+  min-width: 96px;
   height: 40px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: none;
-  min-width: 100px;
-  padding: 0 24px;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0 20px;
   overflow: hidden;
+  color: #dffbff;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 38px;
+  letter-spacing: .4px;
+  border: 1px solid rgba(86, 226, 255, .34);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(12, 43, 66, .78), rgba(6, 18, 36, .9)),
+    linear-gradient(90deg, rgba(72, 225, 255, .18), rgba(130, 255, 209, .12));
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, .04) inset,
+    0 12px 28px rgba(0, 0, 0, .24),
+    0 0 22px rgba(55, 213, 255, .12);
+  transition: color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease, background .24s ease;
   .cursor();
-  
-  // 光晕效果
-  &::before {
+
+  &:before {
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
-    width: 100%;
+    left: -70%;
+    width: 58%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s ease;
+    background: linear-gradient(90deg, transparent, rgba(143, 242, 255, .32), transparent);
+    transform: skewX(-18deg);
+    transition: left .45s ease;
   }
-  
-  &:hover::before {
-    left: 100%;
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: 5px;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(120, 240, 255, .72), transparent);
+    opacity: .78;
+  }
+
+  &:hover {
+    color: #ffffff;
+    border-color: rgba(125, 242, 255, .72);
+    background:
+      linear-gradient(135deg, rgba(18, 74, 100, .86), rgba(7, 28, 52, .95)),
+      linear-gradient(90deg, rgba(72, 225, 255, .22), rgba(130, 255, 209, .18));
+    box-shadow:
+      0 0 0 1px rgba(119, 238, 255, .1) inset,
+      0 16px 34px rgba(0, 0, 0, .28),
+      0 0 28px rgba(55, 213, 255, .24);
+    transform: translateY(-2px);
+  }
+
+  &:hover:before {
+    left: 115%;
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow:
+      0 0 0 1px rgba(119, 238, 255, .08) inset,
+      0 8px 18px rgba(0, 0, 0, .24);
   }
 }
-
-.@{prefix}-button:hover{
-  background: linear-gradient(135deg, #7689f0 0%, #8558b0 100%);
-  box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
-  transform: translateY(-2px);
-}
-
-.@{prefix}-button:active{
-  background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%);
-  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
-  transform: translateY(0);
-}
diff --git a/src/components/less/footer.less b/src/components/less/footer.less
index e033649..8d5d4f1 100644
--- a/src/components/less/footer.less
+++ b/src/components/less/footer.less
@@ -2,126 +2,261 @@
 
 .@{prefix}-footer {
   width: 100%;
-  min-height: 125px;
-  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
-  padding: 40px 0 0 0;
-  border-top: 1px solid rgba(255,255,255,0.1);
   position: relative;
   overflow: hidden;
-  
-  // 动态网格背景
-  &::before {
+  color: #b9d7e4;
+  background:
+    radial-gradient(circle at 18% 0%, rgba(70, 219, 255, .12), transparent 28%),
+    linear-gradient(180deg, #061321 0%, #020812 100%);
+  border-top: 1px solid rgba(91, 226, 255, .18);
+
+  &:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: 
-      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-    background-size: 40px 40px;
-    animation: gridMove 20s linear infinite;
-    pointer-events: none;
+    background-image:
+      linear-gradient(rgba(91, 226, 255, .028) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(91, 226, 255, .028) 1px, transparent 1px);
+    background-size: 44px 44px;
+    opacity: .75;
   }
-  .links {
-    color: #fff;
-    font-size: 16px;
-    text-align: center;
-    a {
-      color: #fff;
-      &:after {
-        content: '|';
-        margin: 0 10px;
-      }
-      &:last-child:after {
-        content: '';
-      }
-      &:hover {
-        color: #35A3BA;
-        &:after {
-          color: #fff;
-        }
-      }
-    }
-    br {
-      display: none;
-    }
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(117, 240, 255, .78), transparent);
   }
-  .copy-right {
-    color: #fff;
-    font-size: 12px;
-    text-align: center;
-    margin: 8px 0 0 0;
-    padding-bottom: 10px;
-  }
-  .footer-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 12px;
-    padding: 0 16px;
+
+  .footer-shell {
+    width: calc(100% - 56px);
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 58px 0 38px;
     position: relative;
     z-index: 1;
+    display: grid;
+    grid-template-columns: minmax(280px, 1.45fr) minmax(120px, .55fr) minmax(130px, .55fr) 300px;
+    gap: 34px;
+    align-items: start;
   }
-  .footer-qrcode img {
-    display: block;
-    max-width: 270px;
+
+  .footer-brand {
+    max-width: 430px;
+  }
+
+  .footer-logo {
+    width: 250px;
     height: auto;
+    display: block;
+    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(113, 239, 255, .38));
+  }
+
+  .footer-brand p {
+    margin: 22px 0 0;
+    color: #93acbc;
+    font-size: 14px;
+    line-height: 1.9;
+  }
+
+  .footer-tags {
+    margin-top: 22px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    span {
+      height: 30px;
+      padding: 0 12px;
+      display: inline-flex;
+      align-items: center;
+      border: 1px solid rgba(91, 226, 255, .18);
+      border-radius: 8px;
+      color: #bff5ff;
+      background: rgba(255, 255, 255, .04);
+      font-size: 12px;
+    }
+  }
+
+  .footer-column {
+    padding-top: 10px;
+
+    h3 {
+      margin: 0 0 18px;
+      color: #f4feff;
+      font-size: 16px;
+      letter-spacing: .5px;
+    }
+
+    a,
+    .footer-phone {
+      display: block;
+      margin-top: 12px;
+      color: #93acbc;
+      font-size: 14px;
+      text-decoration: none;
+      transition: color .2s ease, transform .2s ease;
+    }
+
+    a:hover {
+      color: #72eeff;
+      transform: translateX(3px);
+    }
+
+    .footer-phone {
+      color: #d7f7ff;
+      font-weight: 700;
+    }
+  }
+
+  .footer-qr-panel {
+    padding: 20px;
+    border: 1px solid rgba(91, 226, 255, .16);
+    border-radius: 8px;
+    background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
+    box-shadow: 0 18px 54px rgba(0, 0, 0, .22);
+
+    h3 {
+      margin: 0 0 16px;
+      color: #f4feff;
+      font-size: 16px;
+    }
+  }
+
+  .qr-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+  }
+
+  .qr-item {
+    padding: 10px;
+    border-radius: 8px;
+    background: rgba(4, 13, 28, .7);
+    border: 1px solid rgba(91, 226, 255, .12);
+    text-align: center;
+
+    img {
+      width: 100%;
+      aspect-ratio: 1;
+      display: block;
+      object-fit: cover;
+      border-radius: 6px;
+      background: #fff;
+    }
+
+    span {
+      display: block;
+      margin-top: 9px;
+      color: #c8edf6;
+      font-size: 12px;
+      font-weight: 700;
+    }
+  }
+
+  .footer-bottom {
+    width: calc(100% - 56px);
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 18px 0 24px;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    border-top: 1px solid rgba(91, 226, 255, .12);
+    color: #7897a8;
+    font-size: 12px;
+  }
+
+  .record-links {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: #a8c8d6;
+      text-decoration: none;
+      transition: color .2s ease;
+
+      &:hover {
+        color: #72eeff;
+      }
+    }
+
+    .gongan-icon {
+      width: 18px;
+      height: 20px;
+      display: inline-block;
+      flex: 0 0 auto;
+      object-fit: contain;
+      filter: drop-shadow(0 0 8px rgba(114, 238, 255, .22));
+    }
   }
 }
 
-@keyframes gridMove {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(40px, 40px); }
+@media (max-width: 1024px) {
+  .@{prefix}-footer {
+    .footer-shell {
+      grid-template-columns: 1.2fr .8fr;
+    }
+
+    .footer-qr-panel {
+      grid-column: span 2;
+      max-width: 360px;
+    }
+  }
 }
 
 @media (max-width: 768px) {
   .@{prefix}-footer {
-    padding: 25px 15px 15px 15px;
-    .footer-content {
-      flex-direction: column;
-      gap: 15px;
-      padding: 0;
+    .footer-shell {
+      width: calc(100% - 32px);
+      padding: 44px 0 28px;
+      grid-template-columns: 1fr;
+      gap: 28px;
     }
-    .footer-qrcode {
+
+    .footer-brand {
+      max-width: none;
+    }
+
+    .footer-logo {
+      width: 220px;
+    }
+
+    .footer-column {
+      padding-top: 0;
+    }
+
+    .footer-qr-panel {
+      grid-column: auto;
+      max-width: none;
+    }
+
+    .footer-bottom {
+      width: calc(100% - 32px);
+      flex-direction: column-reverse;
+      align-items: flex-start;
+      padding: 18px 0 22px;
+    }
+
+    .record-links {
       width: 100%;
-      text-align: center;
-    }
-    .footer-qrcode img {
-      width: 200px !important;
-      max-width: 200px;
-      height: auto !important;
-      margin: 0 auto 10px;
-    }
-    .links {
-      width: 100%;
-      padding: 0 5px;
-      a {
-        display: inline-block;
-        margin: 0 3px;
-        padding: 4px 6px;
-        font-size: 11px;
-        line-height: 1.6;
-        border-radius: 4px;
-        &:after {
-          content: none;
-        }
-      }
-      br {
-        display: block;
-      }
-      img {
-        width: 14px !important;
-        height: 16px !important;
-        vertical-align: middle;
-      }
-    }
-    .copy-right {
-      font-size: 11px;
-      padding: 10px 5px;
-      line-height: 1.5;
+      justify-content: flex-start;
+      gap: 10px 16px;
     }
   }
 }
diff --git a/src/components/less/header.less b/src/components/less/header.less
index 1f8781f..825a72e 100644
--- a/src/components/less/header.less
+++ b/src/components/less/header.less
@@ -2,208 +2,226 @@
 
 .@{prefix}-header {
   width: 100%;
-  height: 70px;
-  background: rgba(255,255,255,0.95);
-  backdrop-filter: saturate(180%) blur(12px);
-  box-shadow: 0 4px 14px rgba(16,24,40,0.08);
+  height: 76px;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
-  .float-clear;
-  .@{prefix}-logo{
-    width: 300px;
-    height: 70px;
-    margin: 0 0 0 10px;
-    float: left;
+  color: #e8fbff;
+  background:
+    radial-gradient(circle at 18% 0%, rgba(70, 219, 255, .12), transparent 30%),
+    linear-gradient(180deg, #061321 0%, #020812 100%);
+  border-bottom: 1px solid rgba(91, 226, 255, .14);
+  box-shadow: 0 16px 46px rgba(0, 0, 0, .28);
+  backdrop-filter: blur(12px);
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(85, 228, 255, .82), transparent);
+    opacity: .36;
   }
-  .@{prefix}-logo-text{
-    float: left;
-    height: 70px;
-    color: #36A4BB;
-    font-size: 16px;
-    line-height: 70px;
-    text-align: center;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(rgba(91, 226, 255, .024) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(91, 226, 255, .024) 1px, transparent 1px);
+    background-size: 44px 44px;
+    opacity: .36;
+  }
+
+  .@{prefix}-header__inner {
+    width: calc(100% - 44px);
+    max-width: 1240px;
+    height: 76px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 28px;
+  }
+
+  .@{prefix}-brand-mark {
+    width: 232px;
+    height: 62px;
+    margin: 0;
+    flex: 0 0 auto;
+    padding: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    transition: transform .24s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+    }
+  }
+
+  .@{prefix}-logo {
+    width: 232px;
+    height: auto;
+    margin: 0;
+    display: block;
+    object-fit: contain;
+    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(113, 239, 255, .38));
+    opacity: 1;
+    transition: filter .24s ease, opacity .24s ease, transform .24s ease;
+
+    &:hover {
+      filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(113, 239, 255, .52));
+      transform: translateY(-1px);
+    }
+  }
+
+  .@{prefix}-logo-text {
+    height: 44px;
     margin: 0;
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
   }
-  .@{prefix}-logo-text a{
-    color: var(--color-text);
+
+  .@{prefix}-logo-text a {
+    position: relative;
+    height: 38px;
+    padding: 0 16px;
+    display: inline-flex;
+    align-items: center;
+    color: #c7eef6;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 38px;
     text-decoration: none;
-    margin: 0;
-    padding: 12px 22px;
-    font-size: 15px;
-    font-weight: 600;
-    background: rgba(102, 126, 234, 0.08);
-    border-radius: 10px;
-    transition: all 0.3s ease;
-    display: inline-block;
-    line-height: 1.4;
-    border: 1px solid transparent;
+    white-space: nowrap;
+    border: 1px solid rgba(105, 226, 255, .26);
+    border-radius: 8px;
+    background: linear-gradient(180deg, rgba(15, 49, 74, .64), rgba(5, 21, 39, .72));
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, .08),
+      0 10px 24px rgba(0, 0, 0, .12);
+    transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
+
+    &:before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      margin-right: 8px;
+      border-radius: 50%;
+      background: #48e1ff;
+      box-shadow: 0 0 12px rgba(72, 225, 255, .9);
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 12px;
+      right: 12px;
+      bottom: 4px;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(122, 243, 255, .65), transparent);
+      opacity: 0;
+      transition: opacity .22s ease;
+    }
   }
-  .@{prefix}-logo-text a:hover{
-    color: #667eea;
-    background: rgba(102, 126, 234, 0.15);
-    border-color: rgba(102, 126, 234, 0.2);
+
+  .@{prefix}-logo-text a:hover {
+    color: #fff;
+    border-color: rgba(122, 243, 255, .7);
+    background: linear-gradient(180deg, rgba(20, 75, 105, .78), rgba(7, 33, 57, .88));
     text-decoration: none;
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+    box-shadow: 0 12px 30px rgba(25, 187, 226, .14);
+
+    &:after {
+      opacity: 1;
+    }
   }
-  .@{prefix}-button{
-    float: right;
-    line-height: 40px;
+
+  .@{prefix}-header__actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 0 0 auto;
+  }
+
+  .@{prefix}-button {
+    margin: 0;
+    flex: 0 0 auto;
+  }
+
+  .@{prefix}-rightcol {
+    width: 46px;
     height: 40px;
-    margin: 15px 8px 0 0;
-    min-width: 90px;
-  }
-  .@{prefix}-rightcol{
+    margin-left: auto;
     display: none;
-  }
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 5px;
+    border: 1px solid rgba(105, 226, 255, .36);
+    border-radius: 8px;
+    background: rgba(10, 36, 58, .78);
+    box-shadow: 0 0 24px rgba(72, 225, 255, .16);
+    cursor: pointer;
 
-
-  .@{prefix}-logo-line {
-    width: 1px;
-    height: 35px;
-    top: 18px;
-    left: 10px;
-    float: left;
-    position: relative;
-    background: #32adc6;
-  }
-}
-
-@media (max-width: 1024px) and (min-width: 769px) {
-  .@{prefix}-header{
-    .@{prefix}-logo-text{
-      display: none !important;
-    }
-    .@{prefix}-rightcol{
-      display: flex !important;
+    span {
+      width: 20px;
+      height: 2px;
+      display: block;
+      background: #dffbff;
+      box-shadow: 0 0 10px rgba(72, 225, 255, .7);
     }
   }
 }
 
-@media (min-width: 1025px) {
-  .@{prefix}-header{
-    .@{prefix}-rightcol{
-      display: none !important;
+@media (max-width: 1120px) {
+  .@{prefix}-header {
+    .@{prefix}-logo-text {
+      display: none;
+    }
+
+    .@{prefix}-rightcol {
+      display: flex;
     }
   }
 }
 
 @media (max-width: 768px) {
-  .@{prefix}-header{
-    height: 100px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    padding: 10px 0;
-    background: rgba(255,255,255,0.98);
-    box-shadow: 0 2px 12px rgba(16,24,40,0.1);
-    .zui-logo{
-      height: 45px;
-      width: 200px;
-      max-width: calc(100% - 100px);
-      margin: 0 0 0 12px;
-      order: 1;
+  .@{prefix}-header {
+    height: 88px;
+
+    .@{prefix}-header__inner {
+      width: calc(100% - 28px);
+      height: 88px;
+      gap: 12px;
     }
-    .@{prefix}-logo-text{
-      display: block !important;
-      width: 100%;
-      height: 40px;
-      line-height: 20px;
-      font-size: 12px;
-      margin: 0;
-      padding: 0 12px;
-      order: 3;
-      text-align: left;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 10px;
-      overflow-x: auto;
-      overflow-y: hidden;
-      -webkit-overflow-scrolling: touch;
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      a {
-        display: inline-block;
-        margin: 0;
-        padding: 7px 14px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--color-text);
-        background: rgba(102, 126, 234, 0.1);
-        border-radius: 8px;
-        transition: all 0.2s ease;
-        white-space: nowrap;
-        flex-shrink: 0;
-        border: 1px solid rgba(102, 126, 234, 0.15);
-      }
-      a:hover, a:active {
-        background: rgba(102, 126, 234, 0.2);
-        color: #667eea;
-        border-color: rgba(102, 126, 234, 0.3);
-        text-decoration: none;
-        transform: translateY(-1px);
-      }
+
+    .@{prefix}-brand-mark {
+      width: 202px;
+      height: 58px;
     }
-    .@{prefix}-button{
-      display: none !important;
+
+    .@{prefix}-logo {
+      width: 202px;
+      height: auto;
     }
-    .@{prefix}-rightcol{
-      display: flex !important;
-      align-items: center;
-      justify-content: center;
-      font-size: 13px;
-      height: 38px;
-      line-height: 38px;
-      margin: 5px 12px 0 auto;
-      min-width: 70px;
-      padding: 0 16px;
-      font-weight: 600;
-      color: #fff;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border: none;
-      border-radius: 10px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      order: 2;
-      box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
-      position: relative;
-      overflow: hidden;
-      
-      &::before {
-        content: '\2630';  // 汉堡菜单图标
-        margin-right: 6px;
-        font-size: 16px;
-      }
-      
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-        transition: left 0.5s ease;
-      }
-      
-      &:hover::after {
-        left: 100%;
-      }
-    }
-    .@{prefix}-rightcol:active {
-      background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%);
-      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
-      transform: scale(0.96);
-    }
-    .@{prefix}-logo-line {
+
+    .@{prefix}-header__actions {
       display: none;
     }
   }
diff --git a/src/components/less/logo.less b/src/components/less/logo.less
index b9a54ad..b9320ec 100644
--- a/src/components/less/logo.less
+++ b/src/components/less/logo.less
@@ -1,5 +1,6 @@
 .zui-logo {
-  width: 100px;
-  height: 40px;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
+  object-fit: contain;
 }
diff --git a/src/components/less/page.less b/src/components/less/page.less
index 65b481d..d093b3e 100644
--- a/src/components/less/page.less
+++ b/src/components/less/page.less
@@ -1,8 +1,8 @@
 @import './reset.less';
 
 :root {
-  --color-bg: #edf7f7;
-  --color-text: #1f2a37;
+  --color-bg: #030914;
+  --color-text: #e8fbff;
   --color-accent: #35A3BA;
   --color-accent-strong: #0ea5b7;
   --space-1: 4px;
@@ -20,7 +20,7 @@
   width: 100%;
   min-height: 100%;
   margin: 0 auto;
-  padding-top: 70px;
+  padding-top: 76px;
   font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background: var(--color-bg);
   color: var(--color-text);
@@ -57,7 +57,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.72);
   backdrop-filter: blur(4px);
   z-index: 99998;
   animation: fadeIn 0.3s ease;
@@ -66,17 +66,16 @@
   position: fixed;
   top: 0;
   right: 0;
-  width: 75%;
+  width: 78%;
   max-width: 300px;
   height: 100vh;
-  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
-  box-shadow: -8px 0 30px rgba(102, 126, 234, 0.15);
+  background: linear-gradient(180deg, #071827 0%, #020812 100%);
+  box-shadow: -12px 0 42px rgba(0, 0, 0, .38);
   z-index: 99999;
   padding: 24px 20px;
   animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
-  border-left: 3px solid transparent;
-  border-image: linear-gradient(180deg, #667eea, #764ba2) 1;
+  border-left: 1px solid rgba(91, 226, 255, .28);
 }
 @keyframes fadeIn {
   from { opacity: 0; }
@@ -97,20 +96,29 @@
   font-weight: 700;
   margin-bottom: 25px;
   padding-bottom: 15px;
-  border-bottom: 3px solid transparent;
-  border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
-  color: #1f2a37;
+  border-bottom: 1px solid rgba(91, 226, 255, .22);
+  color: #e8fbff;
   letter-spacing: 0.5px;
   display: flex;
   align-items: center;
   gap: 8px;
   
   &::before {
-    content: '☰';
-    font-size: 22px;
-    color: #667eea;
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #48e1ff;
+    box-shadow: 0 0 14px rgba(72, 225, 255, .8);
   }
 }
+.zui-drawer__group {
+  margin: 22px 0 10px;
+  color: #6bdff2;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 2px;
+}
 .zui-drawer__list {
   list-style: none;
   margin: 0;
@@ -121,30 +129,32 @@
   padding: 15px 16px;
   font-size: 15px;
   font-weight: 500;
-  color: #1f2a37;
+  color: #cdebf3;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 12px;
   margin-bottom: 8px;
   cursor: pointer;
-  background: rgba(102, 126, 234, 0.03);
-  border: 1px solid transparent;
+  background: rgba(255, 255, 255, .04);
+  border: 1px solid rgba(91, 226, 255, .12);
   
   &::before {
-    content: '▸';
+    content: '';
     position: absolute;
     left: -5px;
     opacity: 0;
-    color: #667eea;
-    font-size: 12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #48e1ff;
     transition: all 0.3s ease;
   }
 }
 .zui-drawer__list li:hover {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, rgba(11, 79, 105, .88), rgba(5, 45, 72, .96));
   color: #fff;
   transform: translateX(5px);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  border-color: transparent;
+  box-shadow: 0 8px 22px rgba(31, 194, 231, .18);
+  border-color: rgba(91, 226, 255, .36);
   
   &::before {
     left: 8px;
@@ -158,7 +168,7 @@
 @media (max-width: 600px) {
   .zui-page {
     overflow-x: hidden;
-    padding-top: 100px;
+    padding-top: 88px;
   }
 }
 @media (min-width: 1200px) {
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 82f8f98..311c612 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,369 +1,278 @@
 <template>
-  <page class="home-page">
+  <page class="site-page home-page">
     <zui-header>
       <template #buttons>
-        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
-        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
         <zui-button @click="onButtonClick('home')">首页</zui-button>
+        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
+        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
       </template>
     </zui-header>
-    <div class="banner vivify fadeIn">
-      <div class="banner-overlay"></div>
-      <div class="banner-content">
-        <!-- <h1 class="vivify popIn">智聪网络科技</h1> -->
-        <div class="banner-slogans">
-          <h2 class="vivify popIn delay-100">科学记账&nbsp;&nbsp;量入为出</h2>
-          <h2 class="vivify popIn delay-200">健康档案&nbsp;&nbsp;守护未来</h2>
-          <!-- <h2 class="vivify popIn delay-300">茅台预约&nbsp;&nbsp;解放双手</h2> -->
-          <h2 class="vivify popIn delay-400">智聪物联&nbsp;&nbsp;万物互联</h2>
+
+    <section class="hero-section">
+      <div class="tech-grid"></div>
+      <div class="scan-line"></div>
+      <div class="hero-shell">
+        <div class="hero-copy">
+          <div class="eyebrow">INTC DIGITAL INTELLIGENCE</div>
+          <h1>智聪网络科技</h1>
+          <p class="hero-lead">以资产数据、健康档案、物联网运营为核心，构建从个人生活到城市设备的数字化能力矩阵。</p>
+          <div class="hero-actions">
+            <button class="action-primary" type="button" @click="goToService('iot')">探索智聪物联</button>
+            <button class="action-secondary" type="button" @click="onButtonClick('resource')">查看资料中心</button>
+          </div>
+          <div class="metric-strip">
+            <div v-for="item in metrics" :key="item.label">
+              <strong>{{ item.value }}</strong>
+              <span>{{ item.label }}</span>
+            </div>
+          </div>
         </div>
-        <p class="banner-subtitle vivify popIn delay-500">技术引领&nbsp;&nbsp;服务一流&nbsp;&nbsp;用户核心&nbsp;&nbsp;需求导向</p>
-      </div>
-    </div>
-    <div class="nav clear">
-      <a class="zhichou vivify popIn" @click="goToService('accounting')">
-        <div class="watermark blue">记账</div>
-        <logo type="zhongtai"></logo>
-        <logo class="mobile" type="mzhichou"></logo>
-        <h3>解决个人记账难题</h3>
-        <h4>好用&nbsp;&nbsp;易用&nbsp;&nbsp;免费</h4>
-      </a>
-      <a class="health vivify popIn delay-200" @click="goToService('health')">
-        <div class="watermark green">健康</div>
-        <logo type="hr"></logo>
-        <logo class="mobile" type="mhr"></logo>
-        <h3>健康档案管理专家</h3>
-        <h4>专业&nbsp;&nbsp;准确&nbsp;&nbsp;高效</h4>
-      </a>
-      <a class="imaotai vivify popIn delay-400" @click="goToService('imaotai')">
-        <div class="watermark purple">物联</div>
-        <logo type="plus"></logo>
-        <logo class="mobile" type="mplus"></logo>
-        <h3>智聪物联万物互联</h3>
-        <h4>互联万物&nbsp;&nbsp;智慧生活</h4>
-      </a>
-      <!-- <a class="iot vivify popIn delay-600" @click="goToService('iot')">
-        <div class="watermark orange">物联</div>
-        <logo type="iot"></logo>
-        <logo class="mobile" type="miot"></logo>
-        <h3>智聪物联万物互联</h3>
-        <h4>互联万物&nbsp;&nbsp;智慧生活</h4>
-      </a> -->
-    </div>
-    <div class="service">
-      <div class="service-content">
-        <h1>记账专家&nbsp;健康帮手&nbsp;万物互联</h1>
-        <h3>满足您的记账需求&nbsp;健康记录&nbsp;物联网建设</h3>
-        <div class="service-highlight">
-          <span class="highlight-icon">✨</span>
-          <span class="highlight-text">无需下载，永久免费！</span>
+
+        <div class="hero-console">
+          <div class="console-frame">
+            <div class="console-head">
+              <span></span><span></span><span></span>
+              <b>INTC OPS CENTER</b>
+            </div>
+            <div class="command-layout">
+              <div class="ops-map">
+                <div class="ops-ring ring-one"></div>
+                <div class="ops-ring ring-two"></div>
+                <div class="ops-line line-one"></div>
+                <div class="ops-line line-two"></div>
+                <div class="ops-line line-three"></div>
+                <div class="ops-core">
+                  <b>IoT</b>
+                  <span>智能物联中枢</span>
+                </div>
+                <div v-for="node in iotNodes" :key="node.label" class="ops-node" :class="node.className">
+                  <span>{{ node.label }}</span>
+                  <strong>{{ node.value }}</strong>
+                </div>
+              </div>
+
+              <div class="status-rail">
+                <div v-for="item in consoleStatus" :key="item.label" class="status-tile">
+                  <span>{{ item.label }}</span>
+                  <strong>{{ item.value }}</strong>
+                  <i></i>
+                </div>
+              </div>
+            </div>
+
+            <div class="telemetry-panel">
+              <div class="telemetry-title">
+                <span>实时数据流</span>
+                <strong>DATA STREAM</strong>
+              </div>
+              <div class="signal-board">
+                <div v-for="item in signalBars" :key="item" :style="{ height: item + '%' }"></div>
+              </div>
+            </div>
+
+            <div class="module-dock">
+              <div v-for="item in moduleDock" :key="item.title">
+                <span>{{ item.code }}</span>
+                <strong>{{ item.title }}</strong>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="features">
-      <div class="features-header">
-        <h2>核心功能</h2>
-        <p>专业、高效、易用的服务平台</p>
+    </section>
+
+    <section class="section-block service-block">
+      <div class="section-title">
+        <span>CORE MATRIX</span>
+        <h2>三大业务引擎，统一智聪生态</h2>
+        <p>让资产、健康与设备运营数据在同一品牌体验下持续沉淀、联动、增长。</p>
       </div>
-      <ul class="zui-card-list">
-        <li class="zui-card" @click="goToService('accounting')">
-          <div class="zui-card__media"><img :src="Invest" alt="记账管理" loading="lazy" decoding="async" width="96" height="96"></div>
-          <div class="zui-card__body">
-            <h4 class="zui-card__title">记账管理</h4>
-            <p class="zui-card__desc">最专业的个人记账服务</p>
+      <div class="service-grid">
+        <article v-for="item in capabilities" :key="item.type" class="tech-card" @click="goToService(item.type)">
+          <div class="tech-card__media">
+            <div class="service-orbit" :class="'service-orbit--' + item.type">
+              <span class="orbit-halo orbit-halo--outer"></span>
+              <span class="orbit-halo orbit-halo--inner"></span>
+              <div class="service-glyph">
+                <span class="glyph-mark">{{ item.glyph }}</span>
+                <span class="glyph-line glyph-line--one"></span>
+                <span class="glyph-line glyph-line--two"></span>
+                <span class="glyph-line glyph-line--three"></span>
+                <span class="glyph-node glyph-node--one"></span>
+                <span class="glyph-node glyph-node--two"></span>
+                <span class="glyph-node glyph-node--three"></span>
+              </div>
+              <span class="orbit-caption">{{ item.iconCode }}</span>
+            </div>
           </div>
-        </li>
-        <li class="zui-card" @click="goToService('health')">
-          <div class="zui-card__media"><img :src="Health" alt="健康档案" loading="lazy" decoding="async" width="96" height="96"></div>
-          <div class="zui-card__body">
-            <h4 class="zui-card__title">健康档案</h4>
-            <p class="zui-card__desc">满足健康档案记录需求</p>
+          <div class="tech-card__body">
+            <span>{{ item.code }}</span>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.desc }}</p>
+            <ul>
+              <li v-for="point in item.points" :key="point">{{ point }}</li>
+            </ul>
           </div>
-        </li>
-        <!-- <li class="zui-card" @click="goToService('imaotai')">
-          <div class="zui-card__media"><img :src="imaotai" alt="茅台预约" loading="lazy" decoding="async" width="96" height="96"></div>
-          <div class="zui-card__body">
-            <h4 class="zui-card__title">茅台预约</h4>
-            <p class="zui-card__desc">提供安全高效自动预约</p>
+          <button type="button">{{ item.action }}</button>
+        </article>
+      </div>
+    </section>
+
+    <section class="architecture-section">
+      <div class="architecture-shell">
+        <div class="architecture-copy">
+          <span>ARCHITECTURE</span>
+          <h2>云、端、屏一体化的数字底座</h2>
+          <p>官网、管理后台、H5、小程序、物联 Web 与可视化大屏组成完整产品矩阵，前端体验统一，后端能力解耦。</p>
+          <div class="architecture-list">
+            <div v-for="item in platformHighlights" :key="item.title">
+              <strong>{{ item.title }}</strong>
+              <span>{{ item.desc }}</span>
+            </div>
           </div>
-        </li> -->
-        <li class="zui-card" @click="goToService('iot')">
-          <div class="zui-card__media"><img :src="intcIot" alt="产品服务" loading="lazy" decoding="async" width="96" height="96"></div>
-          <div class="zui-card__body">
-            <h4 class="zui-card__title">智聪物联</h4>
-            <p class="zui-card__desc">打造万物互联的统一平台</p>
+        </div>
+        <div class="node-map">
+          <div class="node-core">
+            <b>INTC</b>
+            <span>Smart Cloud</span>
           </div>
-        </li>
-     </ul>
-    </div>
-    <!-- <div class="customer-case-logo">
-       <img :src="companyLogo"/>
-       <img class="mobile" :src="mcompanyLogo"/>
-     </div> -->
-     <div class="apply-hr">
-       <div class="apply-hr-content">
-         <h2>
-           <!-- <span class="apply-title">智聪网络科技</span> -->
-           <span class="apply-tag">技术领先</span>
-           <span class="apply-tag">想您所想</span>
-         </h2>
-         <h4>
-           提供个人资产记账服务
-         </h4>
-          <h4>
-           健康档案管理服务
-         </h4>
-          <!-- <h4>
-           i茅台预约服务
-         </h4> -->
-          <h4>
-           物联网平台建设服务
-         </h4>
-       </div>
-     </div>
+          <div v-for="node in architectureNodes" :key="node" class="node-item">{{ node }}</div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section-block scene-block">
+      <div class="section-title">
+        <span>VALUE SCENARIOS</span>
+        <h2>把复杂业务转化为可运营的数字现场</h2>
+      </div>
+      <div class="scene-grid">
+        <div v-for="item in scenarios" :key="item.title" class="scene-card">
+          <span>{{ item.no }}</span>
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="site-cta">
+      <div>
+        <span>READY FOR DIGITAL UPGRADE</span>
+        <h2>让技术真正进入业务现场</h2>
+        <p>智聪科技持续打磨稳定、易用、有扩展力的多端数字产品，服务资产管理、健康档案和物联网建设。</p>
+      </div>
+      <button type="button" @click="onButtonClick('callus')">联系智聪科技</button>
+    </section>
+
     <zui-footer/>
   </page>
 </template>
+
 <script>
   import './less/home-page.less'
-  import Logo from '../components/Logo'
   import Page from '../components/Page'
   import ZuiHeader from '../components/Header'
   import ZuiFooter from '../components/Footer'
   import ZuiButton from '../components/Button'
-  import feature1 from '../assets/img/feature1.svg'
-  import feature2 from '../assets/img/feature2.svg'
-  import feature3 from '../assets/img/feature3.svg'
-  import feature4 from '../assets/img/feature4.svg'
-    import Invest from '../assets/img/invest.png'
-  import Health from '../assets/img/health.png'
-  import imaotai from '../assets/img/imaotai.png'
-    import intcIot from '../assets/img/intcIot.jpg'
- 
   import Util from '../Util'
-  export default{
-    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
+
+  export default {
+    components: {Page, ZuiHeader, ZuiFooter, ZuiButton},
     data () {
       return {
-        feature1: feature1,
-        feature2: feature2,
-        feature3: feature3,
-        feature4: feature4,
-        imaotai: imaotai,
-        Health: Health,
-        Invest: Invest,
-        intcIot: intcIot,
-        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
-      }
-    },
-   methods: {
-      onButtonClick: function (e) {
-        if(e=="callus"){
-            this.$router.push({path:'/callus'})
-        }else if(e=="resource"){
-            this.$router.push({path:'/resource'})
-        }else{
-            this.$router.push({path:'/'})
-        }
-      },
-      goToService: function(type) {
-        const links = {
-          accounting: this.isMobile ? 'http://investh5.qdintc.com' : 'http://invest.qdintc.com',
-          health: this.isMobile ? 'http://healthh5.qdintc.com' : 'http://health.qdintc.com',
-          imaotai: this.isMobile ? 'http://imaotaih5.qdintc.com' : 'http://imaotai.qdintc.com',
-          iot: '#' // 物联平台链接，暂时未开放
-        }
-        if(links[type] && links[type] !== '#') {
-          window.open(links[type], '_blank')
-        }
+        signalBars: [38, 64, 51, 82, 46, 90, 72, 58, 76, 43, 67, 84],
+        consoleStatus: [
+          { label: '设备在线', value: '98.7%' },
+          { label: '数据链路', value: '稳定' },
+          { label: '告警闭环', value: '实时' }
+        ],
+        iotNodes: [
+          { label: '照明', value: '12.8k', className: 'node-light' },
+          { label: '巡检', value: '286', className: 'node-inspect' },
+          { label: '能耗', value: '-18%', className: 'node-energy' },
+          { label: '告警', value: '32', className: 'node-alert' }
+        ],
+        moduleDock: [
+          { code: 'A01', title: '设备接入' },
+          { code: 'B02', title: '工单联动' },
+          { code: 'C03', title: '大屏态势' }
+        ],
+        metrics: [
+          { value: '3+', label: '核心业务域' },
+          { value: '6', label: '多端产品矩阵' },
+          { value: '24h', label: '持续服务响应' }
+        ],
+        capabilities: [
+          {
+            type: 'accounting',
+            code: 'ASSET ENGINE',
+            glyph: '¥',
+            iconCode: 'ASSET',
+            title: '科学记账平台',
+            desc: '覆盖账户、账单、投资、收益与净资产统计，让个人资产状态清晰可见。',
+            points: ['多账户资产归集', '账单与收益统计', 'Web / H5 双端入口'],
+            action: '进入记账'
+          },
+          {
+            type: 'health',
+            code: 'HEALTH ENGINE',
+            glyph: '+',
+            iconCode: 'HEALTH',
+            title: '健康档案系统',
+            desc: '沉淀体征、慢病、用药与就诊数据，形成长期连续的家庭健康档案。',
+            points: ['慢病与体征记录', '用药计划追踪', '健康趋势分析'],
+            action: '查看健康'
+          },
+          {
+            type: 'iot',
+            code: 'AIOT ENGINE',
+            glyph: 'IoT',
+            iconCode: 'AIOT',
+            title: '智聪物联网平台',
+            desc: '面向照明、设备、巡检、告警和能耗场景，打造统一物联运营底座。',
+            points: ['设备统一接入', '告警工单闭环', '可视化大屏联动'],
+            action: '了解物联'
+          }
+        ],
+        platformHighlights: [
+          { title: '多端一致', desc: '官网、后台、H5、小程序与大屏围绕同一业务域协同。' },
+          { title: '服务解耦', desc: '后端微服务承载资产、健康、物联、文件与系统能力。' },
+          { title: '数据可视', desc: '将运营、告警、资产与健康趋势转化为可读的决策视图。' }
+        ],
+        architectureNodes: ['Website', 'Admin', 'H5', 'IoT Web', 'Big Screen', 'API Gateway'],
+        scenarios: [
+          { no: '01', title: '个人资产管理', desc: '把账户、交易、账单、投资收益统一到一个长期可追踪的数据视图。' },
+          { no: '02', title: '家庭健康记录', desc: '面向日常健康、慢病、用药和就诊场景，形成连续健康档案。' },
+          { no: '03', title: '城市设备运营', desc: '对照明、楼宇、巡检、报修、告警和备件进行线上化闭环管理。' },
+          { no: '04', title: '企业数字入口', desc: '官网、工作台和管理端共同构成统一入口，降低业务触达成本。' }
+        ]
       }
     },
     computed: {
-      isMobile() {
+      isMobile () {
         return Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
       }
+    },
+    methods: {
+      onButtonClick: function (e) {
+        if (e === 'callus') {
+          this.$router.push({path: '/callus'})
+        } else if (e === 'resource') {
+          this.$router.push({path: '/resource'})
+        } else {
+          this.$router.push({path: '/'})
+        }
+      },
+      goToService: function (type) {
+        const links = {
+          accounting: this.isMobile ? 'http://investh5.qdintc.com' : 'http://invest.qdintc.com',
+          health: this.isMobile ? 'http://healthh5.qdintc.com' : 'http://health.qdintc.com',
+          iot: 'http://iot.qdintc.com'
+        }
+        if (links[type]) {
+          window.open(links[type], '_blank')
+        }
+      }
     }
-
-  };
+  }
 </script>
-<style scoped lang="less">
-.features {
-  background: linear-gradient(180deg, #f8fffe 0%, #edf7f7 100%);
-  padding: 50px 20px 60px;
-  
-  .features-header {
-    text-align: center;
-    margin-bottom: 40px;
-    
-    h2 {
-      font-size: 42px;
-      color: #35A3BA;
-      margin: 0 0 15px;
-      font-weight: 600;
-    }
-    
-    p {
-      font-size: 18px;
-      color: #666;
-      margin: 0;
-    }
-  }
-  
-  .zui-card-list {
-    list-style: none;
-    margin: 0 auto;
-    padding: 0;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(240px, 300px));
-    gap: 30px;
-    max-width: 1100px;
-    justify-content: center;
-  }
-  
-  .zui-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 35px 25px;
-    border: 2px solid transparent;
-    border-radius: 18px;
-    background: #fff;
-    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
-    min-height: 280px;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    
-    /* 移除遮盖 */
-    padding-left: 25px !important;
-    position: relative !important;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      background: linear-gradient(90deg, #35A3BA, #6AC2B5);
-      transform: scaleX(0);
-      transition: transform 0.3s ease;
-    }
-    
-    &:hover {
-      transform: translateY(-8px);
-      box-shadow: 0 15px 40px rgba(53, 163, 186, 0.2);
-      border-color: rgba(53, 163, 186, 0.3);
-      
-      &::before {
-        transform: scaleX(1);
-      }
-      
-      .zui-card__media img {
-        transform: scale(1.08) rotate(3deg);
-      }
-    }
-  }
-  
-  .zui-card__media {
-    width: 140px;
-    height: 140px;
-    margin-bottom: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, rgba(53, 163, 186, 0.05), rgba(106, 194, 181, 0.05));
-    border-radius: 20px;
-    padding: 10px;
-  }
-  
-  .zui-card__media img {
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: static !important;
-    top: auto !important;
-    left: auto !important;
-    object-fit: contain;
-    border-radius: 18px;
-    transition: all 0.3s ease;
-  }
-  
-  .zui-card__title {
-    margin: 12px 0 10px;
-    font-size: 20px;
-    color: #1f2a37;
-    font-weight: 700;
-  }
-  
-  .zui-card__desc {
-    font-size: 14px;
-    color: #666;
-    line-height: 1.6;
-  }
-}
-
-@media (max-width: 1024px) {
-  .features {
-    .features-header h2 {
-      font-size: 32px;
-    }
-    
-    .zui-card-list { 
-      grid-template-columns: repeat(2, 1fr);
-      padding: 0 20px;
-      gap: 20px;
-    }
-  }
-}
-
-@media (max-width: 600px) {
-  .features {
-    padding: 40px 15px 50px !important;
-    
-    .features-header {
-      margin-bottom: 30px;
-      
-      h2 {
-        font-size: 28px;
-      }
-      
-      p {
-        font-size: 14px;
-      }
-    }
-    
-    .zui-card-list { 
-      grid-template-columns: 1fr;
-      gap: 20px;
-      padding: 0 10px;
-    }
-    
-    .zui-card {
-      min-height: 240px;
-      padding: 25px 20px !important;
-    }
-    
-    .zui-card__media {
-      width: 130px;
-      height: 130px;
-      margin-bottom: 16px;
-    }
-    
-    .zui-card__media img {
-      width: 100%;
-      height: 100%;
-    }
-    
-    .zui-card__title {
-      font-size: 18px !important;
-    }
-    
-    .zui-card__desc {
-      font-size: 13px !important;
-    }
-  }
-}
-</style>
diff --git a/src/views/callus.vue b/src/views/callus.vue
index 31c154f..837b37a 100644
--- a/src/views/callus.vue
+++ b/src/views/callus.vue
@@ -1,498 +1,110 @@
 <template>
-  <page class="home-page">
+  <page class="site-page contact-page">
     <zui-header>
       <template #buttons>
-        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
-        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
         <zui-button @click="onButtonClick('home')">首页</zui-button>
+        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
+        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
       </template>
     </zui-header>
-    
-    <div class="contact-banner">
-      <div class="banner-overlay"></div>
-      <div class="banner-content">
-        <h1 class="vivify popIn">联系我们</h1>
-        <p class="banner-subtitle vivify popIn delay-100">随时为您提供专业的咨询服务</p>
+
+    <section class="sub-hero contact-hero">
+      <div class="tech-grid"></div>
+      <div class="sub-hero__content">
+        <span>CONTACT CENTER</span>
+        <h1>联系我们</h1>
+        <p>面向资产记账、健康档案、物联网平台建设，提供产品咨询、平台演示与服务支持。</p>
       </div>
-    </div>
-    
-    <div class="contact-flow">
-      <div class="flow-content">
-        <div class="flow-item vivify popIn">
-          <div class="flow-number">1</div>
-          <h3>联系我们</h3>
-        </div>
-        <div class="flow-arrow">→</div>
-        <div class="flow-item vivify popIn delay-100">
-          <div class="flow-number">2</div>
-          <h3>注册账号</h3>
-        </div>
-        <div class="flow-arrow">→</div>
-        <div class="flow-item vivify popIn delay-200">
-          <div class="flow-number">3</div>
-          <h3>免费使用</h3>
-        </div>
-      </div>
-      <p class="flow-desc">满足您的记账需求、健康记录、物联网建设</p>
-    </div>
-    
-    <div class="contact-cards">
-      <div class="contact-card vivify popIn">
-        <h3>微信公众号</h3>
-        <div class="card-divider"></div>
-        <div class="qrcode-section single">
-          <div class="qrcode-item">
-            <div class="qrcode-image">
-              <img :src="wxgzh" alt="公众号二维码"/>
-            </div>
-            <p>智聪PL</p>
+    </section>
+
+    <section class="contact-console">
+      <div class="contact-flow-panel">
+        <span class="panel-tag">SERVICE FLOW</span>
+        <h2>三步接入智聪服务</h2>
+        <div class="flow-grid">
+          <div v-for="item in flowSteps" :key="item.no" class="flow-node">
+            <b>{{ item.no }}</b>
+            <strong>{{ item.title }}</strong>
+            <span>{{ item.desc }}</span>
           </div>
         </div>
-        <div class="card-tip">扫码关注，获取更多资讯</div>
       </div>
-      
-      <div class="contact-card vivify popIn delay-100">
-        <h3>联系方式</h3>
-        <div class="card-divider"></div>
-        <div class="qrcode-section single">
-          <div class="qrcode-item">
-            <div class="qrcode-image">
-              <img :src="zckj" alt="客服微信二维码"/>
-            </div>
-            <p>客服微信</p>
-          </div>
+
+      <div class="contact-info-panel">
+        <span class="panel-tag">ONLINE SUPPORT</span>
+        <h2>服务连接通道</h2>
+        <div class="contact-line">
+          <span>电话</span>
+          <strong>17753252359</strong>
         </div>
-        <div class="card-tip">客服电话：17753252359</div>
+        <div class="contact-line">
+          <span>服务方向</span>
+          <strong>记账 / 健康 / 物联</strong>
+        </div>
+        <button type="button" @click="copyPhone">复制电话</button>
       </div>
-    </div>
-    
+    </section>
+
+    <section class="qr-section">
+      <article class="qr-card">
+        <div class="qr-image"><img :src="wxgzh" alt="公众号二维码"></div>
+        <div>
+          <span>WECHAT ACCOUNT</span>
+          <h3>微信公众号</h3>
+          <p>关注智聪PL，获取产品动态与服务信息。</p>
+        </div>
+      </article>
+      <article class="qr-card">
+        <div class="qr-image"><img :src="zckj" alt="客服微信二维码"></div>
+        <div>
+          <span>SERVICE WECHAT</span>
+          <h3>客服微信</h3>
+          <p>扫码添加客服，沟通平台试用、资料获取与项目咨询。</p>
+        </div>
+      </article>
+    </section>
+
     <zui-footer/>
   </page>
 </template>
+
 <script>
   import './less/home-page.less'
-  import Logo from '../components/Logo'
   import Page from '../components/Page'
   import ZuiHeader from '../components/Header'
   import ZuiFooter from '../components/Footer'
   import ZuiButton from '../components/Button'
-  import feature1 from '../assets/img/feature1.png'
-  import feature2 from '../assets/img/feature2.png'
-  import feature3 from '../assets/img/feature3.png'
-  import feature4 from '../assets/img/feature4.png'
   import wxgzh from '../assets/img/wxgzh.jpg'
-   import zckj from '../assets/img/zckj.jpg'
-  import Util from '../Util'
-  export default{
-    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
+  import zckj from '../assets/img/zckj.jpg'
+
+  export default {
+    components: {Page, ZuiHeader, ZuiFooter, ZuiButton},
     data () {
       return {
-        feature1: feature1,
-        feature2: feature2,
-        feature3: feature3,
-        feature4: feature4,
         wxgzh: wxgzh,
         zckj: zckj,
-        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
+        flowSteps: [
+          { no: '01', title: '建立联系', desc: '确认服务方向与使用场景。' },
+          { no: '02', title: '开通体验', desc: '提供入口资料与账号指引。' },
+          { no: '03', title: '持续使用', desc: '围绕业务反馈持续优化。' }
+        ]
       }
     },
     methods: {
       onButtonClick: function (e) {
-        if(e=="callus"){
-            this.$router.push({path:'/callus'})
-        }else if(e=="resource"){
-            this.$router.push({path:'/resource'})
-        }else{
-            this.$router.push({path:'/'})
+        if (e === 'callus') {
+          this.$router.push({path: '/callus'})
+        } else if (e === 'resource') {
+          this.$router.push({path: '/resource'})
+        } else {
+          this.$router.push({path: '/'})
+        }
+      },
+      copyPhone: function () {
+        if (navigator.clipboard) {
+          navigator.clipboard.writeText('17753252359')
         }
       }
     }
-
   }
 </script>
-<style scoped lang="less">
-// 联系我们 Banner
-.contact-banner {
-  position: relative;
-  min-height: 300px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  
-  .banner-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: 
-      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
-    background-size: 40px 40px;
-    animation: gridMove 15s linear infinite;
-  }
-  
-  .banner-content {
-    position: relative;
-    z-index: 1;
-    text-align: center;
-    color: #fff;
-    
-    h1 {
-      font-size: 48px;
-      font-weight: 700;
-      margin: 0 0 20px;
-      text-shadow: 0 4px 20px rgba(0,0,0,0.3);
-      letter-spacing: 4px;
-    }
-    
-    .banner-subtitle {
-      font-size: 20px;
-      opacity: 0.95;
-      margin: 0;
-      letter-spacing: 2px;
-    }
-  }
-}
-
-// 流程区域
-.contact-flow {
-  padding: 60px 20px;
-  background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
-  
-  .flow-content {
-    max-width: 900px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 30px;
-    flex-wrap: wrap;
-  }
-  
-  .flow-item {
-    text-align: center;
-    
-    .flow-number {
-      width: 70px;
-      height: 70px;
-      margin: 0 auto 15px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-      font-weight: 700;
-      color: #fff;
-      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
-      transition: all 0.3s ease;
-      
-      &:hover {
-        transform: scale(1.1);
-        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
-      }
-    }
-    
-    h3 {
-      font-size: 20px;
-      color: #333;
-      margin: 0;
-      font-weight: 600;
-    }
-  }
-  
-  .flow-arrow {
-    font-size: 30px;
-    color: #667eea;
-    font-weight: 700;
-  }
-  
-  .flow-desc {
-    text-align: center;
-    margin-top: 40px;
-    font-size: 18px;
-    color: #666;
-    letter-spacing: 1px;
-  }
-}
-
-// 联系卡片
-.contact-cards {
-  padding: 60px 20px 80px;
-  background: #f8f9fa;
-  display: flex;
-  justify-content: center;
-  gap: 40px;
-  flex-wrap: wrap;
-  
-  .contact-card {
-    width: 100%;
-    max-width: 450px;
-    background: #fff;
-    border-radius: 20px;
-    padding: 40px 30px;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
-    transition: all 0.3s ease;
-    border: 2px solid transparent;
-    
-    &:hover {
-      transform: translateY(-8px);
-      box-shadow: 0 15px 50px rgba(102, 126, 234, 0.15);
-      border-color: rgba(102, 126, 234, 0.2);
-    }
-    
-    .card-icon {
-      width: 100px;
-      height: 100px;
-      margin: 0 auto 25px;
-      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
-      border-radius: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
-      img {
-        width: 70px;
-        height: 70px;
-        object-fit: contain;
-      }
-    }
-    
-    h3 {
-      text-align: center;
-      font-size: 24px;
-      color: #333;
-      margin: 0 0 20px;
-      font-weight: 600;
-    }
-    
-    .card-divider {
-      width: 60px;
-      height: 3px;
-      background: linear-gradient(90deg, #667eea, #764ba2);
-      margin: 0 auto 25px;
-      border-radius: 2px;
-    }
-    
-    .card-info {
-      p {
-        font-size: 16px;
-        line-height: 2;
-        margin: 10px 0;
-        color: #555;
-        display: flex;
-        align-items: baseline;
-        
-        .label {
-          color: #667eea;
-          font-weight: 600;
-          min-width: 100px;
-          flex-shrink: 0;
-        }
-      }
-    }
-    
-    .qrcode-section {
-      display: flex;
-      justify-content: center;
-      gap: 25px;
-      margin: 25px 0;
-      padding: 20px 0;
-      border-top: 1px dashed rgba(102, 126, 234, 0.2);
-      
-      // 单个二维码样式
-      &.single .qrcode-item .qrcode-placeholder {
-        width: 160px;
-        height: 160px;
-      }
-      
-      &.single .qrcode-item .qrcode-image {
-        width: 180px;
-        height: 180px;
-      }
-      
-      .qrcode-item {
-        flex: 0 0 auto;
-        text-align: center;
-        
-        .qrcode-placeholder {
-          width: 130px;
-          height: 130px;
-          margin: 0 auto 10px;
-          background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
-          border: 2px dashed rgba(102, 126, 234, 0.3);
-          border-radius: 12px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.3s ease;
-          
-          span {
-            color: #667eea;
-            font-size: 12px;
-            font-weight: 500;
-            text-align: center;
-            padding: 8px;
-            line-height: 1.3;
-          }
-          
-          &:hover {
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
-            border-color: rgba(102, 126, 234, 0.5);
-            transform: scale(1.05);
-          }
-        }
-        
-        .qrcode-image {
-          width: 130px;
-          height: 130px;
-          margin: 0 auto 10px;
-          padding: 8px;
-          background: #fff;
-          border: 2px solid rgba(102, 126, 234, 0.2);
-          border-radius: 12px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.3s ease;
-          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-          
-          img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            border-radius: 8px;
-          }
-          
-          &:hover {
-            border-color: rgba(102, 126, 234, 0.5);
-            transform: scale(1.05);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
-          }
-        }
-        
-        p {
-          margin: 0;
-          color: #667eea;
-          font-size: 13px;
-          font-weight: 600;
-        }
-      }
-    }
-    
-    .card-tip {
-      margin-top: 25px;
-      padding: 12px 20px;
-      background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
-      border-radius: 10px;
-      text-align: center;
-      color: #667eea;
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: 0.5px;
-    }
-  }
-}
-
-@keyframes gridMove {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(40px, 40px); }
-}
-
-// 响应式优化
-@media (max-width: 768px) {
-  .contact-banner {
-    min-height: 250px;
-    
-    .banner-content h1 {
-      font-size: 36px;
-      letter-spacing: 2px;
-    }
-    
-    .banner-content .banner-subtitle {
-      font-size: 16px;
-    }
-  }
-  
-  .contact-flow {
-    padding: 40px 15px;
-    
-    .flow-content {
-      gap: 20px;
-      flex-direction: column;
-    }
-    
-    .flow-item .flow-number {
-      width: 60px;
-      height: 60px;
-      font-size: 28px;
-    }
-    
-    .flow-item h3 {
-      font-size: 16px;
-    }
-    
-    .flow-arrow {
-      font-size: 28px;
-      transform: rotate(90deg);
-    }
-    
-    .flow-desc {
-      font-size: 15px;
-      margin-top: 30px;
-    }
-  }
-  
-  .contact-cards {
-    padding: 40px 15px 60px;
-    gap: 25px;
-    
-    .contact-card {
-      max-width: 100%;
-      padding: 30px 20px;
-      
-      .card-icon {
-        width: 80px;
-        height: 80px;
-        
-        img {
-          width: 60px;
-          height: 60px;
-        }
-      }
-      
-      h3 {
-        font-size: 20px;
-      }
-      
-      .card-info p {
-        font-size: 14px;
-        flex-direction: column;
-        align-items: flex-start;
-        
-        .label {
-          min-width: auto;
-          margin-bottom: 5px;
-        }
-      }
-      
-      .qrcode-section {
-        flex-direction: column;
-        gap: 20px;
-        
-        .qrcode-item .qrcode-placeholder {
-          width: 120px;
-          height: 120px;
-          
-          span {
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/less/home-page.less b/src/views/less/home-page.less
index 5d77e73..5bcbf24 100644
--- a/src/views/less/home-page.less
+++ b/src/views/less/home-page.less
@@ -1,594 +1,1853 @@
-.home-page {
+.site-page {
   overflow-x: hidden;
-  .banner {
-    text-align: center;
-    padding: 200px 20px 180px;
-    background: url('../img/zhichou-banner.jpg') center no-repeat;
-    background-size: cover;
-    position: relative;
-    overflow: hidden;
-    min-height: 500px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    // 增强的渐变遮罩
-    .banner-overlay {
-      position: absolute;
-      top: 0; left: 0; right: 0; bottom: 0;
-      background: linear-gradient(135deg, 
-        rgba(13,38,56,0.75) 0%, 
-        rgba(53,163,186,0.6) 50%,
-        rgba(13,38,56,0.75) 100%);
-      pointer-events: none;
-      z-index: 1;
-    }
-    
-    .banner-content {
-      position: relative;
-      z-index: 2;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 40px 30px;
-      background: rgba(13, 38, 56, 0.4);
-      border-radius: 20px;
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      
-      h1 {
-        color: #fff;
-        font-size: 56px;
-        font-weight: 700;
-        margin: 0 0 40px;
-        text-shadow: 0 4px 20px rgba(0,0,0,0.4);
-        letter-spacing: 2px;
-      }
-      
-      .banner-slogans {
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: center;
-        gap: 15px;
-        margin: 30px 0;
-        
-        h2 {
-          color: #fff;
-          font-size: 24px;
-          font-weight: 500;
-          margin: 0;
-          padding: 12px 20px;
-          background: rgba(255,255,255,0.15);
-          border-radius: 8px;
-          backdrop-filter: blur(10px);
-          text-shadow: 0 2px 8px rgba(0,0,0,0.3);
-          transition: all 0.3s ease;
-          white-space: nowrap;
-          
-          &:hover {
-            background: rgba(255,255,255,0.25);
-            transform: translateY(-2px);
-          }
-        }
-      }
-      
-      .banner-subtitle {
-        color: rgba(255,255,255,0.95);
-        font-size: 18px;
-        margin-top: 40px;
-        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
-        letter-spacing: 1px;
-      }
-    }
-  }
-  .nav {
-    padding-left: 0;
-    list-style: none;
-    max-width: 1400px;
-    margin: 20px auto 0 auto;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    a {
-      margin: 17px;
-      width: 280px;
-      color: #32ADC6;
-      text-align: center;
-      display: block;
-      padding: 60px 0 40px 0;
-      border: 1px solid #32ADC6;
-      position: relative;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border-radius: 12px;
-      
-      &:hover {
-        text-decoration: none;
-        transform: translateY(-5px);
-        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
-        .watermark {
-          color: #fff !important;
-        }
-        .zui-logo {
-          display: none;
-        }
-        .zui-logo.mobile {
-          display: block;
-        }
-      }
-      &.zhichou {
-        color: #35A3BA;
-        border-color: #35A3BA;
-      }
-      &.zhichou:hover {
-        color: #fff;
-        background: linear-gradient(135deg, #35A3BA 0%, #2891A6 100%);
-        border-color: #35A3BA;
-      }
-      &.health {
-        color: #6AC2B5;
-        border-color: #6AC2B5;
-      }
-      &.health:hover {
-        color: #fff;
-        background: linear-gradient(135deg, #6AC2B5 0%, #4FAD9E 100%);
-        border-color: #6AC2B5;
-      }
-      &.imaotai {
-        color: #9B59B6;
-        border-color: #9B59B6;
-      }
-      &.imaotai:hover {
-        color: #fff;
-        background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
-        border-color: #9B59B6;
-      }
-      &.iot {
-        color: #FF6B35;
-        border-color: #FF6B35;
-      }
-      &.iot:hover {
-        color: #fff;
-        background: linear-gradient(135deg, #FF6B35 0%, #E85A2A 100%);
-        border-color: #FF6B35;
-      }
-      .watermark {
-        top: 0;
-        left: 0;
-        opacity: .1;
-        font-size: 70px;
-        line-height: 70px;
-        position: absolute;
-        &.blue {
-          color: #35A3BA;
-        }
-        &.green {
-          color: #6AC2B5;
-        }
-        &.purple {
-          color: #9B59B6;
-        }
-        &.orange {
-          color: #FF6B35;
-        }
-      }
-      .zui-logo {
-        display: block;
-        margin: 0 auto;
-      }
-      .zui-logo.mobile {
-        display: none;
-      }
-      h3 {
-        font-size: 24px;
-        margin-top: 15px;
-      }
-      p {
-        font-size: 18px;
-        margin-top: 14px;
-      }
-    }
-  }
-  .join-zhichou {
-    color: #32ADC6;
-    font-size: 16px;
-    text-align: center;
-    width: 100%;
-    display: block;
-    margin: 30px 0 165px 0;
-  }
-  .service {
-    padding: 50px 20px 40px;
-    text-align: center;
-    background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
-    position: relative;
-    overflow: hidden;
-    
-    // 背景装饰
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 800px;
-      height: 800px;
-      background: radial-gradient(circle, rgba(53, 163, 186, 0.03) 0%, transparent 70%);
-      pointer-events: none;
-    }
-    
-    .service-content {
-      position: relative;
-      z-index: 1;
-    }
-    
-    h1 {
-      color: #35A3BA;
-      font-size: 38px;
-      line-height: 1.6;
-      margin: 0;
-      font-weight: 600;
-    }
-    
-    h3 {
-      color: #666;
-      font-size: 20px;
-      margin-top: 20px;
-      font-weight: 400;
-      letter-spacing: 0.5px;
-    }
-    
-    .service-highlight {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      margin-top: 40px;
-      padding: 16px 32px;
-      background: linear-gradient(135deg, #FF6B35 0%, #FF8C61 100%);
-      border-radius: 50px;
-      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
-      transition: all 0.3s ease;
-      
-      .highlight-icon {
-        font-size: 24px;
-        animation: sparkle 2s infinite;
-      }
-      
-      .highlight-text {
-        color: #fff;
-        font-size: 20px;
-        font-weight: 600;
-        letter-spacing: 1px;
-      }
-      
-      &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
-      }
-    }
-  }
-  
-  @keyframes sparkle {
-    0%, 100% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(1.2); opacity: 0.8; }
+  color: #e8fbff;
+  background:
+    radial-gradient(circle at 20% 8%, rgba(50, 214, 255, .14), transparent 28%),
+    radial-gradient(circle at 82% 18%, rgba(89, 255, 198, .1), transparent 24%),
+    linear-gradient(180deg, #030914 0%, #06111f 48%, #020812 100%);
+
+  button {
+    font-family: inherit;
   }
 
-  .apply-hr {
+  a {
+    text-decoration: none;
+  }
+}
+
+.tech-grid {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image:
+    linear-gradient(rgba(94, 224, 255, .085) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(94, 224, 255, .085) 1px, transparent 1px);
+  background-size: 54px 54px;
+  opacity: .86;
+  animation: gridMove 24s linear infinite;
+}
+
+.scan-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 18%;
+  height: 180px;
+  pointer-events: none;
+  background: linear-gradient(180deg, transparent, rgba(107, 238, 255, .08), transparent);
+  animation: scanMove 7s ease-in-out infinite;
+}
+
+.eyebrow,
+.section-title > span,
+.architecture-copy > span,
+.site-cta span,
+.sub-hero__content > span,
+.panel-tag,
+.qr-card span,
+.download-card__content > span,
+.resource-contact span {
+  display: inline-block;
+  color: #6be8ff;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+}
+
+.hero-section {
+  min-height: calc(100vh - 76px);
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 28%, rgba(82, 228, 255, .16), transparent 30%),
+    radial-gradient(circle at 68% 38%, rgba(142, 255, 207, .09), transparent 24%),
+    linear-gradient(105deg, rgba(2, 8, 18, .98) 0%, rgba(3, 22, 40, .9) 52%, rgba(1, 7, 18, .98) 100%);
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 170px;
+    background: linear-gradient(180deg, transparent, #030914);
+  }
+}
+
+.hero-shell {
+  width: calc(100% - 48px);
+  max-width: 1240px;
+  min-height: calc(100vh - 76px);
+  margin: 0 auto;
+  padding: 58px 0 82px;
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 540px;
+  gap: 64px;
+  align-items: center;
+}
+
+.hero-copy h1 {
+  margin: 18px 0 22px;
+  color: #ffffff;
+  font-size: 78px;
+  line-height: 1.02;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-shadow: 0 0 42px rgba(72, 225, 255, .28);
+}
+
+.hero-lead {
+  max-width: 680px;
+  margin: 0;
+  color: #c7ddeb;
+  font-size: 20px;
+  line-height: 1.9;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+  margin-top: 36px;
+  flex-wrap: wrap;
+}
+
+.action-primary,
+.action-secondary,
+.site-cta button,
+.resource-contact button,
+.contact-info-panel button {
+  height: 50px;
+  padding: 0 28px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid rgba(107, 232, 255, .48);
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: .5px;
+  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
+}
+
+.action-primary,
+.site-cta button,
+.resource-contact button,
+.contact-info-panel button {
+  color: #02111f;
+  background: linear-gradient(135deg, #6be8ff 0%, #8effcf 100%);
+  box-shadow: 0 20px 42px rgba(54, 218, 255, .28);
+}
+
+.action-secondary {
+  color: #eaffff;
+  background: rgba(255, 255, 255, .06);
+  backdrop-filter: blur(14px);
+}
+
+.action-primary:hover,
+.action-secondary:hover,
+.site-cta button:hover,
+.resource-contact button:hover,
+.contact-info-panel button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 24px 56px rgba(54, 218, 255, .28);
+}
+
+.metric-strip {
+  max-width: 610px;
+  margin-top: 48px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+
+  div {
+    min-height: 94px;
+    padding: 20px 18px;
+    border: 1px solid rgba(107, 232, 255, .2);
+    border-radius: 8px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
+    box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
+  }
+
+  strong {
+    display: block;
     color: #fff;
-    text-align: center;
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
-    padding: 60px 20px;
-    position: relative;
-    overflow: hidden;
-    
-    // 动态网格背景
-    &::before {
+    font-size: 32px;
+    line-height: 1;
+    text-shadow: 0 0 22px rgba(107, 232, 255, .35);
+  }
+
+  span {
+    display: block;
+    margin-top: 10px;
+    color: #95b6c6;
+    font-size: 13px;
+  }
+}
+
+.hero-console {
+  height: 590px;
+  position: relative;
+}
+
+.console-frame {
+  width: 530px;
+  position: absolute;
+  right: 0;
+  top: 44px;
+  padding: 18px;
+  border: 1px solid rgba(107, 232, 255, .28);
+  border-radius: 8px;
+  background:
+    linear-gradient(145deg, rgba(6, 26, 46, .92), rgba(2, 10, 24, .96));
+  box-shadow:
+    0 34px 110px rgba(0, 0, 0, .48),
+    0 0 60px rgba(42, 211, 255, .12),
+    inset 0 1px 0 rgba(255, 255, 255, .1);
+  backdrop-filter: blur(18px);
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    width: 68px;
+    height: 68px;
+    border-color: rgba(109, 232, 255, .6);
+    border-style: solid;
+    pointer-events: none;
+  }
+
+  &:before {
+    top: -1px;
+    left: -1px;
+    border-width: 1px 0 0 1px;
+  }
+
+  &:after {
+    right: -1px;
+    bottom: -1px;
+    border-width: 0 1px 1px 0;
+  }
+}
+
+.console-head {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+
+  span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6be8ff;
+    box-shadow: 0 0 14px rgba(107, 232, 255, .8);
+  }
+
+  b {
+    margin-left: auto;
+    color: #7eefff;
+    font-size: 11px;
+    letter-spacing: 2px;
+  }
+}
+
+.command-layout {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 156px;
+  gap: 14px;
+}
+
+.ops-map {
+  height: 310px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(107, 232, 255, .16);
+  border-radius: 8px;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(81, 228, 255, .16), transparent 34%),
+    linear-gradient(rgba(107, 232, 255, .06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .06) 1px, transparent 1px),
+    rgba(1, 9, 22, .82);
+  background-size: auto, 28px 28px, 28px 28px, auto;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 1px;
+    height: 122%;
+    background: linear-gradient(180deg, transparent, rgba(107, 232, 255, .36), transparent);
+    transform: translate(-50%, -50%) rotate(42deg);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 1px;
+    height: 122%;
+    background: linear-gradient(180deg, transparent, rgba(142, 255, 207, .26), transparent);
+    transform: translate(-50%, -50%) rotate(-42deg);
+  }
+}
+
+.ops-ring {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border: 1px solid rgba(107, 232, 255, .2);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 42px rgba(38, 201, 255, .08);
+}
+
+.ring-one {
+  width: 230px;
+  height: 230px;
+}
+
+.ring-two {
+  width: 142px;
+  height: 142px;
+  border-color: rgba(142, 255, 207, .24);
+}
+
+.ops-line {
+  position: absolute;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(107, 232, 255, .4), transparent);
+  transform-origin: center;
+}
+
+.line-one {
+  width: 252px;
+  left: 0;
+  top: 94px;
+  transform: rotate(15deg);
+}
+
+.line-two {
+  width: 260px;
+  right: 0;
+  bottom: 92px;
+  transform: rotate(-18deg);
+}
+
+.line-three {
+  width: 300px;
+  left: 24px;
+  top: 206px;
+  transform: rotate(0deg);
+}
+
+.ops-core {
+  width: 126px;
+  height: 126px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(128, 246, 255, .56);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 38%, rgba(111, 237, 255, .36), transparent 38%),
+    radial-gradient(circle, #103c57 0%, #071827 72%);
+  box-shadow: 0 0 62px rgba(54, 218, 255, .25), inset 0 0 24px rgba(107, 232, 255, .12);
+  transform: translate(-50%, -50%);
+
+  b {
+    color: #fff;
+    font-size: 34px;
+    letter-spacing: 2px;
+  }
+
+  span {
+    margin-top: 8px;
+    color: #8ff4ff;
+    font-size: 12px;
+    font-weight: 700;
+  }
+}
+
+.ops-node {
+  min-width: 86px;
+  min-height: 52px;
+  padding: 10px 12px;
+  position: absolute;
+  z-index: 3;
+  border: 1px solid rgba(107, 232, 255, .24);
+  border-radius: 8px;
+  background: rgba(8, 28, 48, .92);
+  box-shadow: 0 16px 34px rgba(0, 0, 0, .24), 0 0 22px rgba(54, 218, 255, .08);
+
+  span {
+    display: block;
+    color: #87deee;
+    font-size: 12px;
+  }
+
+  strong {
+    display: block;
+    margin-top: 6px;
+    color: #fff;
+    font-size: 18px;
+  }
+}
+
+.node-light { left: 22px; top: 34px; }
+.node-inspect { right: 22px; top: 42px; }
+.node-energy { left: 28px; bottom: 36px; }
+.node-alert { right: 28px; bottom: 34px; }
+
+.status-rail {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.status-tile {
+  min-height: 96px;
+  padding: 14px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(107, 232, 255, .16);
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028));
+
+  span {
+    display: block;
+    color: #86dff0;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  strong {
+    display: block;
+    margin-top: 10px;
+    color: #fff;
+    font-size: 20px;
+    letter-spacing: .4px;
+  }
+
+  i {
+    position: absolute;
+    left: 14px;
+    right: 14px;
+    bottom: 12px;
+    height: 3px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #6be8ff, #8effcf);
+    box-shadow: 0 0 18px rgba(107, 232, 255, .38);
+  }
+}
+
+.telemetry-panel {
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid rgba(107, 232, 255, .14);
+  border-radius: 8px;
+  background: rgba(1, 8, 20, .72);
+}
+
+.telemetry-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  span {
+    color: #d9f8ff;
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  strong {
+    color: #6be8ff;
+    font-size: 11px;
+    letter-spacing: 2px;
+  }
+}
+
+.signal-board {
+  height: 74px;
+  display: flex;
+  align-items: end;
+  gap: 9px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(107, 232, 255, .05), rgba(255, 255, 255, .02));
+
+  div {
+    flex: 1;
+    min-width: 7px;
+    border-radius: 4px 4px 0 0;
+    background: linear-gradient(180deg, #8effcf, #34d7ff);
+    box-shadow: 0 0 18px rgba(52, 215, 255, .3);
+  }
+}
+
+.module-dock {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+
+  div {
+    min-height: 66px;
+    padding: 12px 14px;
+    border: 1px solid rgba(107, 232, 255, .14);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .05);
+  }
+
+  span {
+    display: block;
+    color: #6be8ff;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 1px;
+  }
+
+  strong {
+    display: block;
+    margin-top: 8px;
+    color: #fff;
+    font-size: 14px;
+  }
+}
+
+.section-block {
+  padding: 100px 24px;
+  position: relative;
+}
+
+.service-block,
+.scene-block,
+.resource-console {
+  background:
+    radial-gradient(circle at 8% 10%, rgba(71, 225, 255, .08), transparent 24%),
+    linear-gradient(180deg, #06111f, #030914);
+}
+
+.section-title {
+  max-width: 780px;
+  margin: 0 auto 52px;
+  text-align: center;
+
+  h2 {
+    margin: 14px 0 14px;
+    color: #ffffff;
+    font-size: 42px;
+    line-height: 1.25;
+    text-shadow: 0 0 28px rgba(72, 225, 255, .14);
+  }
+
+  p {
+    margin: 0;
+    color: #9ab8c8;
+    font-size: 17px;
+    line-height: 1.8;
+  }
+}
+
+.service-grid {
+  max-width: 1240px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.tech-card {
+  min-height: 500px;
+  padding: 22px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(107, 232, 255, .16);
+  border-radius: 8px;
+  background:
+    linear-gradient(145deg, rgba(12, 35, 55, .86), rgba(4, 13, 28, .95));
+  box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
+  cursor: pointer;
+  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -120px;
+    right: -120px;
+    width: 260px;
+    height: 260px;
+    background: radial-gradient(circle, rgba(73, 226, 255, .18), transparent 68%);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #69e8ff, transparent);
+    opacity: .58;
+  }
+
+  &:hover {
+    transform: translateY(-8px);
+    border-color: rgba(107, 232, 255, .42);
+    box-shadow: 0 34px 92px rgba(0, 0, 0, .34), 0 0 40px rgba(52, 215, 255, .12);
+  }
+
+  button {
+    height: 42px;
+    margin-top: 22px;
+    padding: 0 20px;
+    color: #e8feff;
+    border: 1px solid rgba(107, 232, 255, .28);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .06);
+    cursor: pointer;
+    font-weight: 800;
+  }
+}
+
+.tech-card__media {
+  height: 190px;
+  padding: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  border: 1px solid rgba(107, 232, 255, .12);
+  overflow: hidden;
+  position: relative;
+  background:
+    radial-gradient(circle at 50% 42%, rgba(107, 232, 255, .13), transparent 44%),
+    linear-gradient(rgba(107, 232, 255, .055) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .055) 1px, transparent 1px),
+    rgba(255, 255, 255, .04);
+  background-size: auto, 22px 22px, 22px 22px, auto;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    top: 50%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(107, 232, 255, .36), transparent);
+  }
+}
+
+.service-orbit {
+  width: 148px;
+  height: 148px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(107, 232, 255, .42);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 45%, rgba(107, 232, 255, .34), transparent 46%),
+    radial-gradient(circle, rgba(7, 42, 64, .98), rgba(3, 13, 28, .96));
+  box-shadow: 0 0 48px rgba(52, 215, 255, .16), inset 0 0 22px rgba(107, 232, 255, .12);
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  &:before {
+    inset: -16px;
+    border: 1px solid rgba(107, 232, 255, .18);
+    border-left-color: rgba(142, 255, 207, .52);
+    border-bottom-color: transparent;
+    transform: rotate(-24deg);
+  }
+
+  &:after {
+    inset: 18px;
+    border: 1px dashed rgba(142, 255, 207, .26);
+  }
+}
+
+.orbit-halo {
+  position: absolute;
+  pointer-events: none;
+  border-radius: 50%;
+}
+
+.orbit-halo--outer {
+  inset: -30px;
+  border: 1px solid rgba(107, 232, 255, .12);
+}
+
+.orbit-halo--inner {
+  inset: 34px;
+  border: 1px solid rgba(255, 255, 255, .08);
+}
+
+.service-glyph,
+.download-glyph {
+  width: 94px;
+  height: 94px;
+  position: relative;
+  z-index: 2;
+  border: 1px solid rgba(107, 232, 255, .25);
+  border-radius: 8px;
+  background:
+    linear-gradient(rgba(107, 232, 255, .08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .08) 1px, transparent 1px),
+    rgba(1, 10, 24, .66);
+  background-size: 16px 16px;
+  box-shadow: inset 0 0 24px rgba(107, 232, 255, .08);
+}
+
+.glyph-mark {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 3;
+  color: #fff;
+  font-size: 34px;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: 0;
+  text-shadow: 0 0 22px rgba(107, 232, 255, .44);
+  transform: translate(-50%, -50%);
+}
+
+.glyph-line {
+  position: absolute;
+  z-index: 2;
+  height: 2px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(107, 232, 255, .15), #6be8ff, rgba(142, 255, 207, .7));
+  box-shadow: 0 0 14px rgba(107, 232, 255, .36);
+}
+
+.glyph-line--one {
+  width: 58px;
+  left: 18px;
+  top: 64px;
+  transform: rotate(-24deg);
+}
+
+.glyph-line--two {
+  width: 42px;
+  left: 14px;
+  top: 40px;
+  opacity: .65;
+}
+
+.glyph-line--three {
+  width: 36px;
+  right: 13px;
+  bottom: 22px;
+  opacity: .55;
+}
+
+.glyph-node {
+  width: 9px;
+  height: 9px;
+  position: absolute;
+  z-index: 4;
+  border-radius: 50%;
+  background: #8effcf;
+  box-shadow: 0 0 16px rgba(142, 255, 207, .82);
+}
+
+.glyph-node--one { left: 15px; bottom: 22px; }
+.glyph-node--two { left: 42px; top: 29px; }
+.glyph-node--three { right: 16px; top: 51px; }
+
+.orbit-caption {
+  min-width: 64px;
+  height: 24px;
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  border: 1px solid rgba(107, 232, 255, .26);
+  border-radius: 6px;
+  color: #9cf4ff;
+  background: rgba(3, 13, 28, .94);
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 1.5px;
+  transform: translateX(-50%);
+}
+
+.service-orbit--health {
+  background:
+    radial-gradient(circle at 50% 45%, rgba(142, 255, 207, .3), transparent 46%),
+    radial-gradient(circle, rgba(8, 54, 56, .98), rgba(3, 13, 28, .96));
+
+  .glyph-mark {
+    top: 38%;
+    font-size: 30px;
+  }
+
+  .service-glyph {
+    border-radius: 50%;
+  }
+
+  .glyph-line--one {
+    width: 66px;
+    left: 14px;
+    top: 50px;
+    clip-path: polygon(0 42%, 18% 42%, 26% 8%, 36% 82%, 48% 28%, 58% 42%, 100% 42%, 100% 58%, 56% 58%, 48% 45%, 36% 100%, 26% 25%, 20% 58%, 0 58%);
+    height: 22px;
+    background: #8effcf;
+    transform: none;
+  }
+
+  .glyph-line--two,
+  .glyph-line--three {
+    display: none;
+  }
+
+  .glyph-node--one { left: 24px; top: 24px; }
+  .glyph-node--two { right: 23px; top: 24px; left: auto; }
+  .glyph-node--three { right: 42px; bottom: 18px; top: auto; }
+}
+
+.service-orbit--accounting,
+.download-symbol--asset {
+  .service-glyph,
+  .download-glyph {
+    &:before {
       content: '';
+      width: 10px;
+      height: 20px;
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-image: 
-        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-      background-size: 50px 50px;
-      animation: gridMove 20s linear infinite;
-      pointer-events: none;
+      left: 22px;
+      bottom: 23px;
+      z-index: 2;
+      border-radius: 4px 4px 1px 1px;
+      background: linear-gradient(180deg, #8effcf, #42ddff);
+      box-shadow:
+        18px -10px 0 rgba(107, 232, 255, .86),
+        36px -22px 0 rgba(142, 255, 207, .72);
+      opacity: .82;
     }
-    
-    // 发光圆圈装饰
-    &::after {
+
+    &:after {
       content: '';
+      height: 1px;
+      position: absolute;
+      left: 16px;
+      right: 16px;
+      bottom: 22px;
+      z-index: 2;
+      background: linear-gradient(90deg, transparent, rgba(107, 232, 255, .62), transparent);
+    }
+  }
+
+  .glyph-mark {
+    top: 27px;
+    font-size: 21px;
+    opacity: .9;
+  }
+
+  .glyph-line--one {
+    width: 66px;
+    left: 14px;
+    top: 68px;
+    height: 2px;
+    transform: rotate(-23deg);
+  }
+
+  .glyph-line--two {
+    width: 54px;
+    left: 20px;
+    top: 76px;
+    opacity: .36;
+  }
+
+  .glyph-line--three {
+    width: 42px;
+    right: 18px;
+    bottom: 52px;
+    opacity: .28;
+  }
+
+  .glyph-node--one { left: 17px; bottom: 27px; }
+  .glyph-node--two { left: 47px; top: 50px; }
+  .glyph-node--three { right: 14px; top: 42px; }
+}
+
+.service-orbit--iot {
+  .service-glyph {
+    border-radius: 50%;
+
+    &:before {
+      content: '';
+      width: 36px;
+      height: 36px;
       position: absolute;
-      top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%);
-      width: 600px;
-      height: 600px;
-      background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
+      top: 50%;
+      z-index: 2;
+      border: 1px solid rgba(142, 255, 207, .48);
       border-radius: 50%;
-      animation: pulse 4s ease-in-out infinite;
-      pointer-events: none;
+      background: radial-gradient(circle, rgba(142, 255, 207, .2), rgba(4, 24, 40, .85));
+      box-shadow: 0 0 24px rgba(142, 255, 207, .22);
+      transform: translate(-50%, -50%);
     }
-    
-    .apply-hr-content {
-      position: relative;
+
+    &:after {
+      content: '';
+      width: 72px;
+      height: 72px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
       z-index: 1;
-    }
-    
-    h2 {
-      font-size: 42px;
-      margin: 0;
-      line-height: 1.6;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-wrap: wrap;
-      gap: 20px;
-      
-      .apply-title {
-        font-weight: 700;
-        letter-spacing: 3px;
-        text-shadow: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
-        background: linear-gradient(90deg, #fff 0%, #e0e7ff 50%, #fff 100%);
-        background-size: 200% auto;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        animation: shimmer 3s linear infinite;
-      }
-      
-      .apply-tag {
-        display: inline-block;
-        padding: 8px 24px;
-        background: rgba(255, 255, 255, 0.08);
-        border-radius: 25px;
-        font-size: 18px;
-        font-weight: 500;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(139, 92, 246, 0.4);
-        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        transition: all 0.3s ease;
-        position: relative;
-        overflow: hidden;
-        
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: -100%;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-          transition: left 0.5s ease;
-        }
-        
-        &:hover {
-          background: rgba(139, 92, 246, 0.25);
-          border-color: rgba(139, 92, 246, 0.6);
-          transform: translateY(-3px);
-          box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4),
-                      inset 0 1px 0 rgba(255, 255, 255, 0.2);
-          
-          &::before {
-            left: 100%;
-          }
-        }
-      }
-    }
-    
-    h4 {
-      font-size: 16px;
-      font-weight: 300;
-      margin-top: 25px;
-      opacity: 0.9;
-      letter-spacing: 1.5px;
-      line-height: 1.8;
-      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+      border: 1px dashed rgba(107, 232, 255, .24);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
     }
   }
-  
-  @keyframes gridMove {
-    0% { transform: translate(0, 0); }
-    100% { transform: translate(50px, 50px); }
+
+  .glyph-mark {
+    font-size: 18px;
+    letter-spacing: 1px;
   }
-  
-  @keyframes pulse {
-    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
-    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
+
+  .glyph-line--one {
+    width: 58px;
+    left: 18px;
+    top: 46px;
+    transform: none;
   }
-  
-  @keyframes shimmer {
-    0% { background-position: 0% center; }
-    100% { background-position: 200% center; }
+
+  .glyph-line--two {
+    width: 42px;
+    left: 26px;
+    top: 55px;
+    transform: rotate(38deg);
   }
-  .features {
-    background: #DEF0EF;
-    padding: 50px 0;
-    ul{
-      max-width: 500px;
-      margin: 0 auto;
-      li {
-        margin-top: 20px;
-        padding: 10px 0 10px 100px;
-        position: relative;
-        img {
-          width: 80px;
-          top: 5px;
-          left: 0;
-          right: 10px;
-          position: absolute;
-        }
-        h4 {
-          font-size: 25px;
-          font-weight: bold;
-        }
-        p {
-          font-size: 25px;
-          font-weight: normal;
-        }
-      }
+
+  .glyph-line--three {
+    width: 42px;
+    right: 24px;
+    bottom: 41px;
+    transform: rotate(-38deg);
+  }
+
+  .glyph-node--one { left: 13px; top: 42px; }
+  .glyph-node--two { right: 13px; top: 42px; left: auto; }
+  .glyph-node--three { left: 42px; bottom: 13px; top: auto; }
+}
+
+.tech-card__body {
+  position: relative;
+  z-index: 1;
+
+  span {
+    display: block;
+    margin-top: 24px;
+    color: #6be8ff;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 2px;
+  }
+
+  h3 {
+    margin: 12px 0;
+    color: #fff;
+    font-size: 24px;
+  }
+
+  p {
+    min-height: 82px;
+    margin: 0;
+    color: #abc6d4;
+    font-size: 15px;
+    line-height: 1.75;
+  }
+
+  ul {
+    margin: 24px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    position: relative;
+    margin-top: 11px;
+    padding-left: 18px;
+    color: #d4edf5;
+    font-size: 14px;
+  }
+
+  li:before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    left: 0;
+    top: 8px;
+    border-radius: 50%;
+    background: #6be8ff;
+    box-shadow: 0 0 12px rgba(107, 232, 255, .8);
+  }
+}
+
+.architecture-section {
+  padding: 104px 24px;
+  background:
+    radial-gradient(circle at 88% 32%, rgba(82, 228, 255, .13), transparent 28%),
+    radial-gradient(circle at 12% 72%, rgba(142, 255, 207, .08), transparent 24%),
+    linear-gradient(135deg, rgba(3, 9, 20, .98), rgba(6, 32, 52, .92));
+}
+
+.architecture-shell {
+  max-width: 1240px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 500px;
+  gap: 72px;
+  align-items: center;
+}
+
+.architecture-copy {
+  h2 {
+    margin: 16px 0;
+    color: #fff;
+    font-size: 42px;
+    line-height: 1.3;
+  }
+
+  p {
+    margin: 0;
+    color: #adc6d3;
+    font-size: 17px;
+    line-height: 1.85;
+  }
+}
+
+.architecture-list {
+  margin-top: 34px;
+  display: grid;
+  gap: 14px;
+
+  div {
+    padding: 18px 20px;
+    border: 1px solid rgba(107, 232, 255, .16);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .055);
+  }
+
+  strong {
+    display: block;
+    color: #fff;
+    font-size: 17px;
+  }
+
+  span {
+    display: block;
+    margin-top: 8px;
+    color: #9eb8c8;
+    line-height: 1.7;
+  }
+}
+
+.node-map {
+  min-height: 470px;
+  position: relative;
+  border: 1px solid rgba(107, 232, 255, .22);
+  border-radius: 8px;
+  background:
+    linear-gradient(rgba(107, 232, 255, .06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .06) 1px, transparent 1px),
+    rgba(0, 8, 20, .58);
+  background-size: 44px 44px;
+  box-shadow: inset 0 0 70px rgba(52, 215, 255, .08);
+}
+
+.node-core {
+  width: 156px;
+  height: 156px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(107, 232, 255, .5);
+  border-radius: 50%;
+  background: radial-gradient(circle, #123f58 0%, #071827 72%);
+  box-shadow: 0 0 66px rgba(52, 215, 255, .25);
+
+  b {
+    color: #fff;
+    font-size: 34px;
+    letter-spacing: 2px;
+  }
+
+  span {
+    margin-top: 6px;
+    color: #7ff1ff;
+    font-size: 12px;
+  }
+}
+
+.node-item {
+  position: absolute;
+  min-width: 110px;
+  height: 44px;
+  padding: 0 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #eaffff;
+  border: 1px solid rgba(107, 232, 255, .28);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .08);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
+}
+
+.node-item:nth-child(2) { left: 36px; top: 62px; }
+.node-item:nth-child(3) { right: 34px; top: 70px; }
+.node-item:nth-child(4) { left: 26px; top: 208px; }
+.node-item:nth-child(5) { right: 26px; top: 214px; }
+.node-item:nth-child(6) { left: 70px; bottom: 58px; }
+.node-item:nth-child(7) { right: 62px; bottom: 54px; }
+
+.scene-grid {
+  max-width: 1240px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.scene-card {
+  min-height: 250px;
+  padding: 28px 22px;
+  border: 1px solid rgba(107, 232, 255, .14);
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
+
+  > span {
+    color: #6be8ff;
+    font-weight: 900;
+    letter-spacing: 2px;
+  }
+
+  h3 {
+    margin: 24px 0 12px;
+    color: #fff;
+    font-size: 22px;
+  }
+
+  p {
+    margin: 0;
+    color: #9eb8c8;
+    line-height: 1.76;
+  }
+}
+
+.site-cta,
+.resource-contact {
+  width: calc(100% - 48px);
+  max-width: 1240px;
+  margin: 0 auto 96px;
+  padding: 52px 56px;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 34px;
+  border: 1px solid rgba(107, 232, 255, .24);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(9, 45, 67, .94), rgba(4, 18, 34, .96));
+  box-shadow: 0 28px 82px rgba(0, 0, 0, .3);
+
+  h2 {
+    margin: 12px 0;
+    color: #fff;
+    font-size: 34px;
+  }
+
+  p {
+    max-width: 740px;
+    margin: 0;
+    color: #b8d2df;
+    line-height: 1.78;
+  }
+
+  button {
+    flex: 0 0 auto;
+  }
+}
+
+.sub-hero {
+  min-height: 360px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  background:
+    radial-gradient(circle at 18% 26%, rgba(82, 228, 255, .14), transparent 30%),
+    radial-gradient(circle at 82% 22%, rgba(142, 255, 207, .08), transparent 24%),
+    linear-gradient(105deg, rgba(2, 8, 18, .97), rgba(4, 31, 52, .88));
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 120px;
+    background: linear-gradient(180deg, transparent, #030914);
+  }
+}
+
+.resource-hero {
+  background:
+    radial-gradient(circle at 16% 28%, rgba(82, 228, 255, .14), transparent 30%),
+    radial-gradient(circle at 74% 20%, rgba(107, 232, 255, .08), transparent 28%),
+    linear-gradient(105deg, rgba(2, 8, 18, .97), rgba(4, 31, 52, .88));
+}
+
+.sub-hero__content {
+  width: calc(100% - 48px);
+  max-width: 1180px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+
+  h1 {
+    margin: 16px 0 16px;
+    color: #fff;
+    font-size: 56px;
+    line-height: 1.15;
+    text-shadow: 0 0 34px rgba(72, 225, 255, .24);
+  }
+
+  p {
+    max-width: 760px;
+    margin: 0;
+    color: #bfd7e4;
+    font-size: 18px;
+    line-height: 1.86;
+  }
+}
+
+.contact-console {
+  padding: 92px 24px 34px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
+  gap: 24px;
+  max-width: 1240px;
+  margin: 0 auto;
+}
+
+.contact-flow-panel,
+.contact-info-panel,
+.qr-card,
+.download-card {
+  border: 1px solid rgba(107, 232, 255, .16);
+  border-radius: 8px;
+  background: linear-gradient(145deg, rgba(9, 32, 52, .88), rgba(3, 12, 27, .96));
+  box-shadow: 0 24px 68px rgba(0, 0, 0, .28);
+}
+
+.contact-flow-panel,
+.contact-info-panel {
+  padding: 34px;
+
+  h2 {
+    margin: 14px 0 28px;
+    color: #fff;
+    font-size: 30px;
+  }
+}
+
+.flow-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.flow-node {
+  min-height: 188px;
+  padding: 24px 20px;
+  border: 1px solid rgba(107, 232, 255, .14);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .045);
+
+  b {
+    display: inline-flex;
+    width: 42px;
+    height: 42px;
+    align-items: center;
+    justify-content: center;
+    color: #03111e;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #6be8ff, #8effcf);
+  }
+
+  strong {
+    display: block;
+    margin-top: 22px;
+    color: #fff;
+    font-size: 20px;
+  }
+
+  span {
+    display: block;
+    margin-top: 10px;
+    color: #9eb8c8;
+    line-height: 1.7;
+  }
+}
+
+.contact-info-panel {
+  align-self: stretch;
+
+  .contact-line {
+    padding: 18px 0;
+    border-top: 1px solid rgba(107, 232, 255, .12);
+
+    span {
+      display: block;
+      color: #7edff1;
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: 2px;
     }
+
+    strong {
+      display: block;
+      margin-top: 8px;
+      color: #fff;
+      font-size: 22px;
+    }
+  }
+
+  button {
+    width: 100%;
+    margin-top: 22px;
+  }
+}
+
+.qr-section {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 30px 24px 102px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.qr-card {
+  padding: 28px;
+  display: grid;
+  grid-template-columns: 190px minmax(0, 1fr);
+  gap: 28px;
+  align-items: center;
+
+  h3 {
+    margin: 12px 0;
+    color: #fff;
+    font-size: 26px;
+  }
+
+  p {
+    margin: 0;
+    color: #9eb8c8;
+    line-height: 1.75;
+  }
+}
+
+.qr-image {
+  padding: 12px;
+  border: 1px solid rgba(107, 232, 255, .22);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .92);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
+
+  img {
+    width: 100%;
+    display: block;
+    border-radius: 6px;
+  }
+}
+
+.resource-console {
+  padding: 96px 24px 42px;
+}
+
+.download-grid {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+.download-card {
+  min-height: 270px;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+}
+
+.download-card__media {
+  padding: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid rgba(107, 232, 255, .12);
+  overflow: hidden;
+  position: relative;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(107, 232, 255, .12), transparent 42%),
+    linear-gradient(rgba(107, 232, 255, .055) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .055) 1px, transparent 1px),
+    rgba(255, 255, 255, .04);
+  background-size: auto, 22px 22px, 22px 22px, auto;
+
+}
+
+.download-symbol {
+  width: 166px;
+  height: 166px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(107, 232, 255, .42);
+  border-radius: 8px;
+  background:
+    linear-gradient(rgba(107, 232, 255, .08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 232, 255, .08) 1px, transparent 1px),
+    radial-gradient(circle at 50% 45%, rgba(107, 232, 255, .26), transparent 44%),
+    rgba(3, 13, 28, .92);
+  background-size: 18px 18px, 18px 18px, auto, auto;
+  box-shadow: 0 0 42px rgba(52, 215, 255, .14), inset 0 0 24px rgba(107, 232, 255, .1);
+  transition: transform .24s ease, border-color .24s ease;
+
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 18px;
+    border: 1px dashed rgba(142, 255, 207, .22);
+    border-radius: 50%;
+  }
+
+  &:after {
+    content: '';
+    width: 94px;
+    height: 94px;
+    position: absolute;
+    border: 1px solid rgba(107, 232, 255, .18);
+    border-radius: 50%;
+  }
+}
+
+.download-symbol__corner {
+  width: 34px;
+  height: 34px;
+  position: absolute;
+  z-index: 3;
+  border-color: rgba(107, 232, 255, .58);
+  border-style: solid;
+}
+
+.download-symbol__corner--one {
+  left: -1px;
+  top: -1px;
+  border-width: 1px 0 0 1px;
+}
+
+.download-symbol__corner--two {
+  right: -1px;
+  bottom: -1px;
+  border-width: 0 1px 1px 0;
+}
+
+.download-glyph {
+  width: 104px;
+  height: 104px;
+}
+
+.download-symbol__label {
+  min-width: 74px;
+  height: 24px;
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  border: 1px solid rgba(107, 232, 255, .24);
+  border-radius: 6px;
+  color: #9cf4ff;
+  background: rgba(3, 13, 28, .92);
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 1.5px;
+  transform: translateX(-50%);
+}
+
+.download-symbol--health {
+  background:
+    linear-gradient(rgba(142, 255, 207, .08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(142, 255, 207, .08) 1px, transparent 1px),
+    radial-gradient(circle at 50% 45%, rgba(142, 255, 207, .22), transparent 44%),
+    rgba(3, 13, 28, .92);
+
+  .download-glyph {
+    border-radius: 50%;
+  }
+
+  .glyph-line--one {
+    width: 72px;
+    left: 16px;
+    top: 52px;
+    clip-path: polygon(0 42%, 18% 42%, 26% 8%, 36% 82%, 48% 28%, 58% 42%, 100% 42%, 100% 58%, 56% 58%, 48% 45%, 36% 100%, 26% 25%, 20% 58%, 0 58%);
+    height: 24px;
+    background: #8effcf;
+    transform: none;
+  }
+
+  .glyph-line--two,
+  .glyph-line--three {
+    display: none;
+  }
+
+  .glyph-node--one { left: 28px; top: 27px; }
+  .glyph-node--two { right: 28px; top: 27px; left: auto; }
+  .glyph-node--three { left: 48px; bottom: 19px; top: auto; }
+}
+
+.download-card:hover .download-symbol {
+  transform: translateY(-4px) scale(1.02);
+  border-color: rgba(107, 232, 255, .62);
+}
+
+.download-card__content {
+  padding: 36px;
+
+  h3 {
+    margin: 12px 0 10px;
+    color: #fff;
+    font-size: 28px;
+  }
+
+  p {
+    margin: 0;
+    color: #9eb8c8;
+    line-height: 1.75;
+  }
+}
+
+.download-actions {
+  margin-top: 28px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.download-link {
+  min-height: 44px;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: #dffbff;
+  border: 1px solid rgba(107, 232, 255, .18);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .055);
+  transition: transform .22s ease, border-color .22s ease, background .22s ease;
+
+  i {
+    min-width: 38px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #03111e;
+    border-radius: 6px;
+    background: linear-gradient(135deg, #6be8ff, #8effcf);
+    font-style: normal;
+    font-size: 11px;
+    font-weight: 900;
+  }
+
+  &:hover {
+    color: #fff;
+    border-color: rgba(107, 232, 255, .5);
+    background: rgba(24, 94, 124, .42);
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes gridMove {
+  0% { transform: translate(0, 0); }
+  100% { transform: translate(54px, 54px); }
+}
+
+@keyframes scanMove {
+  0%, 100% { transform: translateY(-80px); opacity: .2; }
+  50% { transform: translateY(210px); opacity: .75; }
+}
+
+@media (max-width: 1120px) {
+  .hero-shell,
+  .architecture-shell,
+  .contact-console {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-console {
+    width: 100%;
+    max-width: 560px;
+    height: 580px;
+    margin: 0 auto;
+  }
+
+  .console-frame {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  .service-grid,
+  .scene-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .qr-section {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 768px) {
-  .home-page {
-    overflow-x: hidden;
-    width: 100%;
-    .banner {
-      padding: 80px 15px 60px;
-      min-height: 400px;
-      
-      .banner-content {
-        padding: 30px 20px;
-        margin: 0 10px;
-        
-        h1 {
-          font-size: 32px;
-          margin: 0 0 25px;
-          letter-spacing: 1px;
-        }
-        
-        .banner-slogans {
-          flex-direction: column;
-          gap: 12px;
-          
-          h2 {
-            font-size: 18px;
-            padding: 10px 20px;
-          }
-        }
-        
-        .banner-subtitle {
-          font-size: 14px;
-          margin-top: 25px;
-        }
-      }
-    }
-    .nav {
-      margin: 20px auto 0 auto;
-      padding: 0 15px;
-      a {
-        float: none;
-        width: 100%;
-        max-width: 300px;
-        margin: 15px auto;
-        padding: 25px 15px;
-        &.zhichou {
-          color: #fff;
-          background: linear-gradient(135deg, #35A3BA 0%, #2891A6 100%);
-        }
-        &.health {
-          color: #fff;
-          background: linear-gradient(135deg, #6AC2B5 0%, #4FAD9E 100%);
-        }
-        &.imaotai {
-          color: #fff;
-          background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
-        }
-        &.iot {
-          color: #fff;
-          background: linear-gradient(135deg, #FF6B35 0%, #E85A2A 100%);
-        }
-        .watermark {
-          color: #fff !important;
-          font-size: 50px;
-        }
-        .zui-logo {
-          width: 100px;
-          display: none;
-        }
-        .zui-logo.mobile {
-          display: block;
-        }
-        h3 {
-          font-size: 16px;
-          margin-top: 10px;
-        }
-        h4 {
-          font-size: 12px;
-        }
-      }
-    }
-    .join-zhichou {
-      margin: 0 0 30px 0;
-    }
-    .service{
-      padding: 40px 15px;
-      
-      h1{
-        font-size: 20px;
-        line-height: 1.6;
-      }
-      h3{
-        font-size: 15px;
-        line-height: 1.5;
-        margin-top: 15px;
-      }
-      
-      .service-highlight {
-        margin-top: 30px;
-        padding: 12px 24px;
-        
-        .highlight-icon {
-          font-size: 20px;
-        }
-        
-        .highlight-text {
-          font-size: 16px;
-        }
-      }
-    }
-    .features{
-      padding: 25px 15px;
-      ul{
-        max-width: 100%;
-        padding: 0 10px;
-        li{
-          margin-top: 15px;
-          padding-left: 50px;
-          img{
-            width: 40px;
-          }
-          h4{
-            font-size: 16px;
-          }
-          p{
-            font-size: 13px;
-          }
-        }
-      }
-    }
+  .hero-section {
+    min-height: auto;
+  }
 
-    .apply-hr{
-      padding: 45px 15px;
-      
-      h2{
-        font-size: 24px;
-        line-height: 1.6;
-        flex-direction: column;
-        gap: 12px;
-        
-        .apply-title {
-          letter-spacing: 2px;
-          font-size: 26px;
-        }
-        
-        .apply-tag {
-          font-size: 16px;
-          padding: 6px 20px;
-        }
-      }
-      h4{
-        font-size: 14px;
-        line-height: 1.8;
-        margin-top: 20px;
-      }
-    }
-    .apply-hr-form{
-      padding: 20px 15px;
+  .hero-shell {
+    width: calc(100% - 32px);
+    min-height: auto;
+    padding: 52px 0 64px;
+    gap: 38px;
+  }
+
+  .hero-copy h1 {
+    font-size: 44px;
+  }
+
+  .hero-lead,
+  .sub-hero__content p {
+    font-size: 16px;
+    line-height: 1.75;
+  }
+
+  .hero-actions,
+  .download-actions {
+    flex-direction: column;
+  }
+
+  .action-primary,
+  .action-secondary,
+  .site-cta button,
+  .resource-contact button {
+    width: 100%;
+  }
+
+  .metric-strip,
+  .service-grid,
+  .scene-grid,
+  .flow-grid,
+  .qr-section {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-console {
+    height: auto;
+    max-width: 100%;
+  }
+
+  .console-frame {
+    position: relative;
+    left: auto;
+    top: auto;
+    width: auto;
+    transform: none;
+  }
+
+  .command-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .ops-map {
+    height: 300px;
+  }
+
+  .status-rail,
+  .module-dock {
+    grid-template-columns: 1fr;
+  }
+
+  .status-tile {
+    min-height: 76px;
+  }
+
+  .section-block,
+  .architecture-section,
+  .resource-console {
+    padding: 68px 16px;
+  }
+
+  .section-title h2,
+  .architecture-copy h2 {
+    font-size: 30px;
+  }
+
+  .tech-card {
+    min-height: auto;
+  }
+
+  .tech-card__body p {
+    min-height: auto;
+  }
+
+  .node-map {
+    min-height: auto;
+    padding: 22px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .node-core,
+  .node-item {
+    position: static;
+    width: auto;
+    height: auto;
+    min-height: 50px;
+    transform: none;
+    border-radius: 8px;
+  }
+
+  .node-core {
+    padding: 24px;
+  }
+
+  .site-cta,
+  .resource-contact {
+    width: auto;
+    margin: 0 16px 72px;
+    padding: 34px 24px;
+    flex-direction: column;
+    align-items: flex-start;
+
+    h2 {
+      font-size: 28px;
     }
   }
+
+  .sub-hero {
+    min-height: 300px;
+  }
+
+  .sub-hero__content {
+    width: calc(100% - 32px);
+
+    h1 {
+      font-size: 38px;
+    }
+  }
+
+  .contact-console {
+    padding: 64px 16px 24px;
+  }
+
+  .contact-flow-panel,
+  .contact-info-panel,
+  .qr-card {
+    padding: 24px;
+  }
+
+  .qr-card {
+    grid-template-columns: 1fr;
+  }
+
+  .qr-image {
+    max-width: 210px;
+  }
+
+  .download-card {
+    grid-template-columns: 1fr;
+  }
+
+  .download-card__media {
+    border-right: 0;
+    border-bottom: 1px solid rgba(107, 232, 255, .12);
+  }
+
+  .download-card__content {
+    padding: 26px;
+  }
+
+  .download-link {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-copy h1 {
+    font-size: 38px;
+  }
+
+  .section-title h2,
+  .architecture-copy h2,
+  .contact-flow-panel h2,
+  .contact-info-panel h2 {
+    font-size: 26px;
+  }
+
+  .metric-strip div,
+  .tech-card,
+  .flow-node,
+  .download-card__content {
+    padding: 22px;
+  }
+
+  .download-card__media {
+    padding: 28px;
+  }
 }
diff --git a/src/views/resource.vue b/src/views/resource.vue
index b4c615d..b43fbe2 100644
--- a/src/views/resource.vue
+++ b/src/views/resource.vue
@@ -1,544 +1,134 @@
 <template>
-  <page class="home-page">
+  <page class="site-page resource-page">
     <zui-header>
       <template #buttons>
-        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
-        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
         <zui-button @click="onButtonClick('home')">首页</zui-button>
+        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
+        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
       </template>
     </zui-header>
-    
-    <!-- 添加顶部Banner -->
-    <div class="resource-banner">
-      <div class="banner-overlay"></div>
-      <div class="banner-content">
+
+    <section class="sub-hero resource-hero">
+      <div class="tech-grid"></div>
+      <div class="sub-hero__content">
+        <span>RESOURCE TERMINAL</span>
         <h1>资料下载中心</h1>
-        <p class="banner-subtitle">提供安卓APP、系统介绍、使用手册等完整资料</p>
+        <p>聚合应用安装包、系统介绍与用户手册，快速了解智聪产品能力。</p>
       </div>
-    </div>
-    
-    <div class="service">
-      <h2>下载专区</h2>
-      <p class="service-desc">满足您的记账需求、健康记录</p>
-    </div>
-    
-    <div class="features">
-      <ul class="zui-card-list">
-        <li class="zui-card">
-          <div class="card-icon-wrapper">
-            <div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
+    </section>
+
+    <section class="resource-console">
+      <div class="section-title">
+        <span>DOWNLOAD CENTER</span>
+        <h2>产品资料矩阵</h2>
+        <p>选择对应产品，下载应用安装包、介绍文档或使用手册。</p>
+      </div>
+
+      <div class="download-grid">
+        <article v-for="product in products" :key="product.name" class="download-card">
+          <div class="download-card__media">
+            <div class="download-symbol" :class="'download-symbol--' + product.type">
+              <span class="download-symbol__corner download-symbol__corner--one"></span>
+              <span class="download-symbol__corner download-symbol__corner--two"></span>
+              <div class="download-glyph">
+                <span class="glyph-mark">{{ product.glyph }}</span>
+                <span class="glyph-line glyph-line--one"></span>
+                <span class="glyph-line glyph-line--two"></span>
+                <span class="glyph-line glyph-line--three"></span>
+                <span class="glyph-node glyph-node--one"></span>
+                <span class="glyph-node glyph-node--two"></span>
+                <span class="glyph-node glyph-node--three"></span>
+              </div>
+              <span class="download-symbol__label">{{ product.iconCode }}</span>
+            </div>
           </div>
-          <div class="card-content">
-            <h4 class="zui-card__title">记账管理平台</h4>
-            <p class="card-desc">专业的个人记账服务平台</p>
-            <div class="card-divider"></div>
-            <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" download>
-                <span class="btn-icon">📱</span>
-                <span>安卓APP下载</span>
-              </a>
-              <a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" download>
-                <span class="btn-icon">📄</span>
-                <span>系统介绍</span>
-              </a>
-              <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" download>
-                <span class="btn-icon">📖</span>
-                <span>使用手册</span>
+          <div class="download-card__content">
+            <span>{{ product.code }}</span>
+            <h3>{{ product.name }}</h3>
+            <p>{{ product.desc }}</p>
+            <div class="download-actions">
+              <a
+                v-for="item in product.files"
+                :key="item.label"
+                class="download-link"
+                :class="'download-link--' + item.type"
+                :href="item.href"
+                download
+              >
+                <i>{{ item.badge }}</i>
+                <span>{{ item.label }}</span>
               </a>
             </div>
           </div>
-        </li>
-        
-        <li class="zui-card">
-          <div class="card-icon-wrapper">
-            <div class="zui-card__media"><img :src="Health" alt="健康管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
-          </div>
-          <div class="card-content">
-            <h4 class="zui-card__title">健康管理平台</h4>
-            <p class="card-desc">健康档案管理专家</p>
-            <div class="card-divider"></div>
-            <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" download>
-                <span class="btn-icon">📱</span>
-                <span>安卓APP下载</span>
-              </a>
-              <a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" download>
-                <span class="btn-icon">📄</span>
-                <span>系统介绍</span>
-              </a>
-              <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" download>
-                <span class="btn-icon">📖</span>
-                <span>使用手册</span>
-              </a>
-            </div>
-          </div>
-        </li>
-     </ul>
-    </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="resource-contact">
+      <div>
+        <span>NEED MORE MATERIALS</span>
+        <h2>需要物联方案或定制资料？</h2>
+        <p>可以直接联系智聪科技获取项目咨询、平台演示和更多产品资料。</p>
+      </div>
+      <button type="button" @click="onButtonClick('callus')">联系获取资料</button>
+    </section>
+
     <zui-footer/>
   </page>
 </template>
+
 <script>
-  import Logo from '../components/Logo'
+  import './less/home-page.less'
   import Page from '../components/Page'
   import ZuiHeader from '../components/Header'
   import ZuiFooter from '../components/Footer'
   import ZuiButton from '../components/Button'
-  import feature1 from '../assets/img/feature1.png'
-  import feature2 from '../assets/img/feature2.png'
-  import feature3 from '../assets/img/feature3.png'
-  import feature4 from '../assets/img/feature4.png'
-  import Invest from '../assets/img/invest.png'
-  import Health from '../assets/img/health.png'
-  import imaotai from '../assets/img/imaotai.png'
-  import Util from '../Util'
-  export default{
-    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
+
+  export default {
+    components: {Page, ZuiHeader, ZuiFooter, ZuiButton},
     data () {
       return {
-        feature1: feature1,
-        feature2: feature2,
-        feature3: feature3,
-        feature4: feature4,
-        imaotai: imaotai,
-        Health: Health,
-        Invest: Invest,
-        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
+        products: [
+          {
+            code: 'ASSET ENGINE',
+            type: 'asset',
+            glyph: '¥',
+            iconCode: 'ASSET',
+            name: '记账管理平台',
+            desc: '个人资产、账单、交易与收益统计的一体化管理平台。',
+            files: [
+              { label: '安卓APP下载', badge: 'APK', type: 'app', href: '/static/download/invest/intcInvest-V1.0.apk' },
+              { label: '系统介绍', badge: 'PDF', type: 'pdf', href: '/static/download/invest/intcInvest-Introduction.pdf' },
+              { label: '使用手册', badge: 'DOC', type: 'doc', href: '/static/download/invest/intcInvest-Manual.pdf' },
+              { label: 'H5使用手册', badge: 'H5', type: 'h5', href: '/static/download/invest/intcInvestH5-Manual.pdf' }
+            ]
+          },
+          {
+            code: 'HEALTH ENGINE',
+            type: 'health',
+            glyph: '+',
+            iconCode: 'HEALTH',
+            name: '健康管理平台',
+            desc: '面向健康档案、慢病记录、用药计划与健康趋势分析。',
+            files: [
+              { label: '安卓APP下载', badge: 'APK', type: 'app', href: '/static/download/health/intcHealth-V1.0.apk' },
+              { label: '系统介绍', badge: 'PDF', type: 'pdf', href: '/static/download/health/intcHealth-Introduction.pdf' },
+              { label: '使用手册', badge: 'DOC', type: 'doc', href: '/static/download/health/intcHealth-Manual.pdf' }
+            ]
+          }
+        ]
       }
     },
     methods: {
       onButtonClick: function (e) {
-        if(e=="callus"){
-            this.$router.push({path:'/callus'})
-        }else if(e=="resource"){
-            this.$router.push({path:'/resource'})
-        }else{
-            this.$router.push({path:'/'})
+        if (e === 'callus') {
+          this.$router.push({path: '/callus'})
+        } else if (e === 'resource') {
+          this.$router.push({path: '/resource'})
+        } else {
+          this.$router.push({path: '/'})
         }
-      },
-      // 授权书下载
-download(type) {
-
-   // 通过a标签来实现下载
-   var a = document.createElement("a") //创建一个<a></a>标签
-   if(type===1){
-    a.href = "/static/download/invest/intcInvest-Introduction.pdf" 
-    a.download = "智聪记账平台系统介绍.pdf" 
-   }
-   if(type===2){
-    a.href = "/static/download/invest/intcInvest-Manual.pdf" 
-    a.download = "智聪记账平台PC用户使用手册V1.0.pdf" 
-   }
-   if(type===3){
-    a.href = "/static/download/invest/intcInvestH5-Manual.pdf" 
-    a.download = "智聪记账平台H5用户使用手册V1.0.pdf" 
-   }
-   if(type===4){
-    a.href = "/static/download/health/intcHealth-Introduction.pdf" 
-    a.download = "智聪健康平台系统介绍.pdf" 
-   }
-   if(type===5){
-    a.href = "/static/download/health/intcHealth-Manual.pdf" 
-    a.download = "智聪健康平台用户使用手册V1.0.pdf" 
-   }
-   if(type===6){
-    a.href = "/static/download/imaotai/intcImaotai-Introduction.pdf" 
-    a.download = "智聪茅台预约平台系统介绍.pdf" 
-   }
-   if(type===7){
-    a.href = "/static/download/imaotai/intcImaotai-Manual.pdf" 
-    a.download = "智聪茅台预约平台用户使用手册V1.0.pdf" 
-   }
-   a.style.display = "none" //隐藏a标签
-    document.body.append("a") //将a标签追加到document.body中
-    a.click() //模拟点击a标签，会触发a标签的href的读取，浏览器就会自动下载了
-    a.remove() // 删除a标签（一次性的）
-
-}
+      }
     }
-
   }
 </script>
-<style scoped lang="less">
-// Banner区域
-.resource-banner {
-  position: relative;
-  min-height: 280px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  
-  .banner-overlay {
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background-image: 
-      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
-    background-size: 40px 40px;
-    animation: gridMove 15s linear infinite;
-  }
-  
-  .banner-content {
-    position: relative;
-    z-index: 1;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    
-    h1 {
-      font-size: 42px;
-      font-weight: 700;
-      margin: 0 0 15px;
-      text-shadow: 0 4px 20px rgba(0,0,0,0.3);
-      letter-spacing: 3px;
-    }
-    
-    .banner-subtitle {
-      font-size: 18px;
-      opacity: 0.95;
-      margin: 0;
-      letter-spacing: 1px;
-    }
-  }
-}
-
-@keyframes gridMove {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(40px, 40px); }
-}
-
-// Service区域
-.service {
-  padding: 50px 20px 30px;
-  text-align: center;
-  background: linear-gradient(180deg, #f8fffe 0%, #fff 100%);
-  
-  h2 {
-    font-size: 36px;
-    color: #35A3BA;
-    margin: 0 0 15px;
-    font-weight: 600;
-  }
-  
-  .service-desc {
-    font-size: 16px;
-    color: #666;
-    margin: 0;
-  }
-}
-
-// Features区域
-.features {
-  background: linear-gradient(180deg, #f8fffe 0%, #edf7f7 100%);
-  padding: 40px 20px 60px;
-  
-  .zui-card-list {
-    list-style: none;
-    margin: 0 auto;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-    max-width: 900px;
-  }
-  
-  .zui-card {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    background: #fff;
-    border-radius: 20px;
-    overflow: visible;
-    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border: 2px solid transparent;
-    position: relative;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0; left: 0; right: 0;
-      height: 4px;
-      background: linear-gradient(90deg, #667eea, #764ba2);
-      transform: scaleX(0);
-      transition: transform 0.3s ease;
-      border-radius: 20px 20px 0 0;
-    }
-    
-    &:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 15px 45px rgba(102, 126, 234, 0.2);
-      border-color: rgba(102, 126, 234, 0.3);
-      
-      &::before {
-        transform: scaleX(1);
-      }
-      
-      .zui-card__media img {
-        transform: scale(1.1) rotate(3deg);
-      }
-      
-      .zui-button-link--primary {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 25px rgba(0, 136, 255, 0.45);
-      }
-    }
-  }
-  
-  .card-icon-wrapper {
-    flex: 0 0 180px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
-    padding: 30px;
-    border-radius: 20px 0 0 20px;
-    overflow: hidden;
-  }
-  
-  .zui-card__media {
-    width: 110px;
-    height: 110px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
-    border-radius: 20px;
-    padding: 12px;
-    transition: transform 0.3s ease;
-    position: relative;
-    z-index: 1;
-    
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      border-radius: 16px;
-      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
-      transition: all 0.3s ease;
-    }
-  }
-  
-  .card-content {
-    flex: 1;
-    padding: 30px 35px;
-    display: flex;
-    flex-direction: column;
-    border-radius: 0 20px 20px 0;
-    overflow: hidden;
-  }
-  
-  .zui-card__title {
-    margin: 0 0 8px;
-    font-size: 22px;
-    color: #1f2a37;
-    font-weight: 700;
-  }
-  
-  .card-desc {
-    font-size: 14px;
-    color: #666;
-    margin: 0 0 20px;
-    line-height: 1.6;
-  }
-  
-  .card-divider {
-    height: 1px;
-    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), transparent);
-    margin-bottom: 20px;
-  }
-  
-  .zui-card__actions {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-  }
-  
-  .zui-button-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 10px 18px;
-    font-size: 13px;
-    font-weight: 500;
-    color: #656b79;
-    background: #f6f8fa;
-    border: 1px solid #e1e4e8;
-    border-radius: 10px;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    flex: 0 0 auto;
-    
-    .btn-icon {
-      font-size: 16px;
-    }
-    
-    &:hover {
-      background: #eef1f4;
-      border-color: #d0d4d9;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-    }
-  }
-  
-  .zui-button-link--primary {
-    color: #fff;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    border: none;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-    font-weight: 600;
-    
-    &:hover {
-      background: linear-gradient(135deg, #7689f0, #8558b0);
-      transform: translateY(-2px);
-      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.45);
-    }
-  }
-}
-
-// 响应式设计
-@media (max-width: 1024px) {
-  .features .zui-card-list {
-    max-width: 800px;
-  }
-}
-
-@media (max-width: 768px) {
-  .resource-banner {
-    min-height: 220px;
-    
-    .banner-content {
-      padding: 30px 15px;
-      
-      h1 {
-        font-size: 28px;
-        letter-spacing: 2px;
-      }
-      
-      .banner-subtitle {
-        font-size: 14px;
-      }
-    }
-  }
-  
-  .service {
-    padding: 40px 15px 25px;
-    
-    h2 {
-      font-size: 26px;
-    }
-    
-    .service-desc {
-      font-size: 14px;
-    }
-  }
-  
-  .features {
-    .zui-card {
-      flex-direction: column;
-    }
-    
-    .card-icon-wrapper {
-      flex: 0 0 auto;
-      width: 100%;
-      padding: 25px;
-      border-radius: 20px 20px 0 0;
-    }
-    
-    .card-content {
-      padding: 25px 20px;
-      border-radius: 0 0 20px 20px;
-    }
-    
-    .zui-card__title {
-      font-size: 20px;
-    }
-    
-    .zui-card__actions {
-      flex-direction: column;
-      
-      .zui-button-link {
-        width: 100%;
-        justify-content: center;
-      }
-    }
-  }
-}
-
-@media (max-width: 600px) {
-  .resource-banner {
-    min-height: 200px;
-    
-    .banner-content h1 {
-      font-size: 24px;
-    }
-  }
-  
-  .service {
-    padding: 30px 15px 20px;
-    
-    h2 {
-      font-size: 22px;
-    }
-  }
-  
-  .features {
-    padding: 30px 15px 40px;
-    
-    .zui-card-list {
-      padding: 0 10px;
-    }
-    
-    .zui-card {
-      border-radius: 16px;
-    }
-    
-    .card-icon-wrapper {
-      width: 100%;
-      padding: 20px;
-      border-radius: 16px 16px 0 0;
-      text-align: center;
-    }
-    
-    .zui-card__media {
-      width: 90px;
-      height: 90px;
-      margin: 0 auto;
-    }
-    
-    .card-content {
-      padding: 20px 15px;
-      border-radius: 0 0 16px 16px;
-    }
-    
-    .zui-card__title {
-      font-size: 18px;
-    }
-    
-    .card-desc {
-      font-size: 13px;
-      margin-bottom: 15px;
-    }
-    
-    .card-divider {
-      margin-bottom: 15px;
-    }
-    
-    .zui-card__actions {
-      gap: 10px;
-    }
-    
-    .zui-button-link {
-      padding: 10px 16px;
-      font-size: 13px;
-      
-      .btn-icon {
-        font-size: 16px;
-      }
-    }
-  }
-}
-</style>