fix: 页面优化样式。

src/components/less/button.less

@@ -1,29 +1,47 @@
 @import "./mixin";
 
 .@{prefix}-button{
+  position: relative;
   color: #fff;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 40px;
   height: 40px;
-  border-radius: 8px;
+  border-radius: 10px;
-  background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border: none;
   min-width: 100px;
-  padding: 0 20px;
+  padding: 0 24px;
-  box-shadow: 0 2px 8px rgba(53, 163, 186, 0.25);
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  transition: all .2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
   .cursor();
+  
+  // 光晕效果
+  &::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::before {
+    left: 100%;
+  }
 }
 
 .@{prefix}-button:hover{
-  background: linear-gradient(135deg, #3db0c8 0%, #12b0c3 100%);
+  background: linear-gradient(135deg, #7689f0 0%, #8558b0 100%);
-  box-shadow: 0 4px 12px rgba(53, 163, 186, 0.35);
+  box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 
 .@{prefix}-button:active{
-  background: linear-gradient(135deg, #2d96aa 0%, #0c98a8 100%);
+  background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%);
-  box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3);
+  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
   transform: translateY(0);
 }

src/components/less/footer.less

@@ -3,9 +3,27 @@
 .@{prefix}-footer {
   width: 100%;
   min-height: 125px;
-  background: #646464;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
   padding: 40px 0 0 0;
-  border-top: 1px solid rgba(255,255,255,0.25);
+  border-top: 1px solid rgba(255,255,255,0.1);
+  position: relative;
+  overflow: hidden;
+  
+  // 动态网格背景
+  &::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;
+  }
   .links {
     color: #fff;
     font-size: 16px;
@@ -44,6 +62,8 @@
     align-items: center;
     gap: 12px;
     padding: 0 16px;
+    position: relative;
+    z-index: 1;
   }
   .footer-qrcode img {
     display: block;
@@ -52,6 +72,11 @@
   }
 }
 
+@keyframes gridMove {
+  0% { transform: translate(0, 0); }
+  100% { transform: translate(40px, 40px); }
+}
+
 @media (max-width: 768px) {
   .@{prefix}-footer {
     padding: 25px 15px 15px 15px;

src/components/less/header.less

@@ -118,18 +118,26 @@
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      gap: 12px;
+      gap: 8px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
       a {
         display: inline-block;
         margin: 0;
-        padding: 6px 12px;
+        padding: 6px 10px;
-        font-size: 12px;
+        font-size: 11px;
         font-weight: 500;
         color: var(--color-text);
         background: rgba(53, 163, 186, 0.08);
         border-radius: 6px;
         transition: all 0.2s ease;
         white-space: nowrap;
+        flex-shrink: 0;
       }
       a:hover, a:active {
         background: rgba(53, 163, 186, 0.15);

src/components/less/page.less

@@ -57,39 +57,59 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
   z-index: 99998;
-  animation: fadeIn 0.2s ease;
+  animation: fadeIn 0.3s ease;
 }
 .zui-drawer {
   position: fixed;
   top: 0;
   right: 0;
   width: 75%;
-  max-width: 280px;
+  max-width: 300px;
   height: 100vh;
-  background: #fff;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
-  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
+  box-shadow: -8px 0 30px rgba(102, 126, 234, 0.15);
   z-index: 99999;
-  padding: 20px;
+  padding: 24px 20px;
-  animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  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;
 }
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 @keyframes slideInRight {
-  from { transform: translateX(100%); }
+  from { 
-  to { transform: translateX(0); }
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to { 
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 .zui-drawer__header {
-  font-size: 18px;
+  font-size: 20px;
-  font-weight: bold;
+  font-weight: 700;
-  margin-bottom: 20px;
+  margin-bottom: 25px;
-  padding-bottom: 12px;
+  padding-bottom: 15px;
-  border-bottom: 2px solid #35A3BA;
+  border-bottom: 3px solid transparent;
+  border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
   color: #1f2a37;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  &::before {
+    content: '☰';
+    font-size: 22px;
+    color: #667eea;
+  }
 }
 .zui-drawer__list {
   list-style: none;
@@ -97,23 +117,43 @@
   padding: 0;
 }
 .zui-drawer__list li {
-  padding: 14px 12px;
+  position: relative;
-  border-bottom: 1px solid #f0f0f0;
+  padding: 15px 16px;
   font-size: 15px;
+  font-weight: 500;
   color: #1f2a37;
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 6px;
+  border-radius: 12px;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  background: rgba(102, 126, 234, 0.03);
+  border: 1px solid transparent;
+  
+  &::before {
+    content: '▸';
+    position: absolute;
+    left: -5px;
+    opacity: 0;
+    color: #667eea;
+    font-size: 12px;
+    transition: all 0.3s ease;
+  }
 }
 .zui-drawer__list li:hover {
-  background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
-  cursor: pointer;
+  transform: translateX(5px);
-  transform: translateX(-2px);
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  border-bottom: 1px solid transparent;
+  border-color: transparent;
+  
+  &::before {
+    left: 8px;
+    opacity: 1;
+  }
 }
 .zui-drawer__list li:active {
-  transform: scale(0.98);
+  transform: translateX(5px) scale(0.98);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
 }
 @media (max-width: 600px) {
   .zui-page {

src/views/HomePage.vue

@@ -8,46 +8,41 @@
       </template>
     </zui-header>
     <div class="banner vivify fadeIn">
-      <h1 class="vivify popIn">
+      <div class="banner-overlay"></div>
-        <span class="br"></span>科学记账&nbsp;&nbsp;量入为出
+      <div class="banner-content">
-      </h1> 
+        <!-- <h1 class="vivify popIn">智聪网络科技</h1> -->
-      <br>
+        <div class="banner-slogans">
-       <h1 class="vivify popIn">
+          <h2 class="vivify popIn delay-100">科学记账&nbsp;&nbsp;量入为出</h2>
-        <span class="br"></span>健康档案&nbsp;&nbsp;守护未来
+          <h2 class="vivify popIn delay-200">健康档案&nbsp;&nbsp;守护未来</h2>
-      </h1>
+          <h2 class="vivify popIn delay-300">茅台预约&nbsp;&nbsp;解放双手</h2>
-      <br>
+          <h2 class="vivify popIn delay-400">智聪物联&nbsp;&nbsp;万物互联</h2>
-      <h1 class="vivify popIn">
+        </div>
-        <span class="br"></span>茅台预约&nbsp;&nbsp;解放双手
+        <p class="banner-subtitle vivify popIn delay-500">技术引领&nbsp;&nbsp;服务为基础&nbsp;&nbsp;用户为核心&nbsp;&nbsp;需求为导向</p>
-      </h1><br>
+      </div>
-       <h1 class="vivify popIn">
-        <span class="br"></span>智聪物联&nbsp;&nbsp;万物互联
-      </h1>
-      <h3 class="vivify popIn">技术引领&nbsp;&nbsp;服务为基础&nbsp;&nbsp;用户为核心&nbsp;&nbsp;需求为导向</h3>
     </div>
     <div class="nav clear">
-       <a class="health vivify popIn delay-200">
+      <a class="zhichou vivify popIn" @click="goToService('accounting')">
-        <div class="watermark green">记账</div>
+        <div class="watermark blue">记账</div>
-        <logo type="hr"></logo>
+        <logo type="zhongtai"></logo>
-        <logo class="mobile" type="mhr"></logo>
+        <logo class="mobile" type="mzhichou"></logo>
         <h3>解决个人记账难题</h3>
         <h4>好用&nbsp;&nbsp;易用&nbsp;&nbsp;免费</h4>
       </a>
-      <a class="zhichou vivify popIn">
+      <a class="health vivify popIn delay-200" @click="goToService('health')">
-        <div class="watermark blue">服务</div>
+        <div class="watermark green">健康</div>
-        <logo type="zhongtai"></logo>
+        <logo type="hr"></logo>
-        <logo class="mobile" type="mzhichou"></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')">
-      <a class="imaotai vivify popIn delay-400">
         <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">
+      <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>
@@ -56,40 +51,43 @@
       </a>
     </div>
     <div class="service">
-      <h1>
+      <div class="service-content">
-        记账专家、健康帮手、预约助手、物联万物
+        <h1>记账专家&nbsp;健康帮手&nbsp;预约助手&nbsp;万物互联</h1>
-      </h1>
+        <h3>满足您的记账需求&nbsp;健康记录&nbsp;茅台预约&nbsp;物联网建设</h3>
-      <h3>
+        <div class="service-highlight">
-        满足您的记账需求、健康记录、茅台预约、物联平台
+          <span class="highlight-icon">✨</span>
-      </h3>
+          <span class="highlight-text">无需下载，永久免费！</span>
-      <h4 style="color: red;">
+        </div>
-        无需下载，永久免费！
+      </div>
-      </h4>
     </div>
     <div class="features">
+      <div class="features-header">
+        <h2>核心功能</h2>
+        <p>专业、高效、易用的服务平台</p>
+      </div>
       <ul class="zui-card-list">
-        <li class="zui-card">
+        <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>
         </li>
-        <li class="zui-card">
+        <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>
         </li>
-        <li class="zui-card">
+        <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>
           </div>
         </li>
-        <li class="zui-card">
+        <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>
@@ -103,12 +101,25 @@
        <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>
-         提供个人资产记账、健康档案管理、i茅台预约服务、物联平台服务
+           提供个人资产记账服务
          </h4>
+          <h4>
+           健康档案管理服务
+         </h4>
+          <h4>
+           i茅台预约服务
+         </h4>
+          <h4>
+           物联网平台建设服务
+         </h4>
+       </div>
      </div>
     <zui-footer/>
   </page>
@@ -154,6 +165,22 @@
         }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')
+        }
+      }
+    },
+    computed: {
+      isMobile() {
+        return Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
       }
     }
 
@@ -161,100 +188,181 @@
 </script>
 <style scoped lang="less">
 .features {
-  background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
+  background: linear-gradient(180deg, #f8fffe 0%, #edf7f7 100%);
-  padding: 50px 0;
+  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(4, minmax(220px, 1fr));
+    grid-template-columns: repeat(4, minmax(200px, 250px));
-    gap: 24px;
+    gap: 25px;
     max-width: 1200px;
   }
+  
   .zui-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: 20px;
+    padding: 28px 18px;
-    border: 1px solid rgba(255,255,255,0.45);
+    border: 2px solid transparent;
     border-radius: 16px;
-    background: rgba(255,255,255,0.75);
+    background: #fff;
-    box-shadow: var(--shadow-1);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
     min-height: 240px;
-    /* override legacy list item rules */
+    cursor: pointer;
-    padding-left: 0 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    /* 移除遮盖 */
+    padding-left: 18px !important;
     position: relative !important;
-    backdrop-filter: saturate(180%) blur(8px);
+    
-    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, #35A3BA, #6AC2B5);
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
     }
-  .zui-card:hover {
+    
-    transform: translateY(-2px);
+    &:hover {
-    box-shadow: var(--shadow-2);
+      transform: translateY(-6px);
+      box-shadow: 0 12px 35px rgba(53, 163, 186, 0.18);
+      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: 96px;
+    width: 120px;
-    height: 96px;
+    height: 120px;
-    margin-bottom: 12px;
+    margin-bottom: 18px;
     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: 18px;
+    padding: 8px;
   }
+  
   .zui-card__media img {
     width: 100%;
     height: 100%;
     display: block;
-    /* override legacy absolute positioning */
     position: static !important;
     top: auto !important;
     left: auto !important;
-    object-fit: cover;
+    object-fit: contain;
-    border-radius: 14px;
+    border-radius: 16px;
-    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
+    transition: all 0.3s ease;
   }
+  
   .zui-card__title {
-    margin: 10px 0 6px 0;
+    margin: 12px 0 8px;
-    font-size: 16px;
+    font-size: 18px;
-    color: var(--color-text);
+    color: #1f2a37;
+    font-weight: 600;
   }
+  
   .zui-card__desc {
     font-size: 13px;
     color: #666;
+    line-height: 1.5;
   }
 }
+
 @media (max-width: 1024px) {
-  .features .zui-card-list { 
+  .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: 30px 15px !important;
+    padding: 40px 15px 50px !important;
+    
+    .features-header {
+      margin-bottom: 30px;
+      
+      h2 {
+        font-size: 28px;
       }
-  .features .zui-card-list { 
+      
+      p {
+        font-size: 14px;
+      }
+    }
+    
+    .zui-card-list { 
       grid-template-columns: 1fr;
-    gap: 16px;
+      gap: 20px;
       padding: 0 10px;
     }
-  .features .zui-card {
+    
-    min-height: 200px;
+    .zui-card {
-    padding: 16px !important;
+      min-height: 240px;
+      padding: 25px 20px !important;
     }
-  .features .zui-card__media {
+    
-    width: 70px;
+    .zui-card__media {
-    height: 70px;
+      width: 130px;
+      height: 130px;
+      margin-bottom: 16px;
     }
-  .features .zui-card__media img { 
+    
-    width: 70px !important;
+    .zui-card__media img {
-    height: 70px !important;
+      width: 100%;
+      height: 100%;
     }
-  .features .zui-card__title {
+    
-    font-size: 15px !important;
+    .zui-card__title {
+      font-size: 18px !important;
+    }
+    
+    .zui-card__desc {
+      font-size: 13px !important;
     }
-  .features .zui-card__desc {
-    font-size: 12px !important;
   }
 }
 </style>

src/views/callus.vue

@@ -7,40 +7,65 @@
         <zui-button @click="onButtonClick('home')">首页</zui-button>
       </template>
     </zui-header>
-    <div class="service">
+    
-      <h1>
+    <div class="contact-banner">
-        联系我们->注册账号->免费使用
+      <div class="banner-overlay"></div>
-      </h1>
+      <div class="banner-content">
-      <h3>
+        <h1 class="vivify popIn">联系我们</h1>
-        满足您的记账需求、健康记录、茅台预约
+        <p class="banner-subtitle vivify popIn delay-100">随时为您提供专业的咨询服务</p>
-      </h3>
       </div>
-    <div class="features">
-     
-      <ul>
-        <li>
-          <img :src="feature1"/>
-          <h4>微信公众号</h4>
-        </br>
-          <p>intc126&nbsp;&nbsp;&nbsp;&nbsp;智聪PL</p>
-        </li>
-        <li>
-          <img :src="feature2"/>
-          <h4>智聪网络科技客服</h4></br>
-          <p>客服电话：17753252359</p>
-          <p>智聪网络科技微信：intcqd</p>
-          <p>智聪记账客服微信：qdintc126</p> 
-          <p>智聪健康客服微信：intchealth</p>
-        </li>
-        <li>
-         
-        </li>
-     </ul>
-     <!-- <div style="display: flex;justify-content: center; align-items: center;margin-top:-210px;margin-left:320px;">
-      <img src ="../assets/img/qrcode.png" width="270" height="155">
-     </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>
+          </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>
+        <div class="card-tip">客服电话：17753252359</div>
+      </div>
+    </div>
+    
     <zui-footer/>
   </page>
 </template>
@@ -55,6 +80,8 @@
   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},
@@ -64,6 +91,8 @@
         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
       }
     },
@@ -82,38 +111,388 @@
   }
 </script>
 <style scoped lang="less">
-@media (max-width: 600px) {
+// 联系我们 Banner
-  .service {
+.contact-banner {
-    padding: 30px 15px !important;
+  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;
   }
-  .service h1 {
+  
-    font-size: 20px !important;
+  .banner-content {
-    line-height: 28px !important;
+    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;
     }
-  .service h3 {
+    
-    font-size: 15px !important;
+    .banner-subtitle {
-    line-height: 22px !important;
+      font-size: 20px;
+      opacity: 0.95;
+      margin: 0;
+      letter-spacing: 2px;
     }
-  .features {
-    padding: 25px 15px !important;
   }
-  .features ul {
-    max-width: 100% !important;
-    padding: 0 10px !important;
 }
-  .features ul li {
+
-    margin-top: 20px !important;
+// 流程区域
-    padding-left: 50px !important;
+.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;
+          }
         }
-  .features ul li img {
-    width: 40px !important;
       }
-  .features ul li h4 {
-    font-size: 16px !important;
     }
-  .features ul li p {
-    font-size: 13px !important;
-    line-height: 1.6 !important;
   }
 }
 </style>

src/views/less/home-page.less

@@ -2,38 +2,82 @@
   overflow-x: hidden;
   .banner {
     text-align: center;
-    padding: 180px 20px;
+    padding: 200px 20px 180px;
     background: url('../img/zhichou-banner.jpg') center no-repeat;
     background-size: cover;
     position: relative;
     overflow: hidden;
-    &:before {
+    min-height: 500px;
-      content: '';
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    // 增强的渐变遮罩
+    .banner-overlay {
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
-      background: linear-gradient(180deg, rgba(13,38,56,0.00) 0%, rgba(13,38,56,0.35) 100%);
+      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;
     }
-    img {
+    
-      top: 0;
+    .banner-content {
-      left: 0;
+      position: relative;
-      right: 0;
+      z-index: 2;
-      width: 100%;
+      max-width: 1200px;
-      height: auto;
       margin: 0 auto;
-      position: absolute;
+      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: 42px;
+        font-size: 56px;
-      margin: 0;
+        font-weight: 700;
-      text-shadow: 0 2px 12px rgba(0,0,0,0.25);
+        margin: 0 0 40px;
+        text-shadow: 0 4px 20px rgba(0,0,0,0.4);
+        letter-spacing: 2px;
       }
-    h3 {
+      
+      .banner-slogans {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: center;
+        gap: 15px;
+        margin: 30px 0;
+        
+        h2 {
           color: #fff;
           font-size: 24px;
-      margin-top: 28px;
+          font-weight: 500;
-      text-shadow: 0 1px 6px rgba(0,0,0,0.2);
+          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 {
@@ -53,8 +97,14 @@
       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;
         }
@@ -147,40 +197,212 @@
     margin: 30px 0 165px 0;
   }
   .service {
-    padding: 72px 0;
+    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: #6AC2B5;
+      color: #35A3BA;
-      font-size: 52px;
+      font-size: 38px;
-      line-height: 70px;
+      line-height: 1.6;
+      margin: 0;
+      font-weight: 600;
     }
+    
     h3 {
-      color: #000;
+      color: #666;
-      font-size: 40px;
+      font-size: 20px;
-      margin-top: 15px;
+      margin-top: 20px;
+      font-weight: 400;
+      letter-spacing: 0.5px;
     }
-    h4 {
+    
-      font-size: 29px;
+    .service-highlight {
-      line-height: 32px;
+      display: inline-flex;
-      font-weight: normal;
+      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; }
   }
 
   .apply-hr {
     color: #fff;
     text-align: center;
-    background: #6AC2B5;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
-    padding: 49px 0 50px 0;
+    padding: 60px 20px;
+    position: relative;
+    overflow: hidden;
+    
+    // 动态网格背景
+    &::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: 50px 50px;
+      animation: gridMove 20s linear infinite;
+      pointer-events: none;
+    }
+    
+    // 发光圆圈装饰
+    &::after {
+      content: '';
+      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%);
+      border-radius: 50%;
+      animation: pulse 4s ease-in-out infinite;
+      pointer-events: none;
+    }
+    
+    .apply-hr-content {
+      position: relative;
+      z-index: 1;
+    }
+    
     h2 {
-      font-size: 39px;
+      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: 29px;
+      font-size: 16px;
-      font-weight: normal;
+      font-weight: 300;
-      margin-top: 20px;
+      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);
     }
   }
+  
+  @keyframes gridMove {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(50px, 50px); }
+  }
+  
+  @keyframes pulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
+    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
+  }
+  
+  @keyframes shimmer {
+    0% { background-position: 0% center; }
+    100% { background-position: 200% center; }
+  }
   .features {
     background: #DEF0EF;
     padding: 50px 0;
@@ -216,18 +438,33 @@
     overflow-x: hidden;
     width: 100%;
     .banner {
-      padding: 60px 15px;
+      padding: 80px 15px 60px;
+      min-height: 400px;
+      
+      .banner-content {
+        padding: 30px 20px;
+        margin: 0 10px;
+        
         h1 {
-        font-size: 20px;
+          font-size: 32px;
-        line-height: 1.4;
+          margin: 0 0 25px;
-        .br {
+          letter-spacing: 1px;
-          display: block;
+        }
+        
+        .banner-slogans {
+          flex-direction: column;
+          gap: 12px;
+          
+          h2 {
+            font-size: 18px;
+            padding: 10px 20px;
           }
         }
-      h3 {
+        
-        font-size: 12px;
+        .banner-subtitle {
-        line-height: 1.5;
+          font-size: 14px;
-        margin-top: 15px;
+          margin-top: 25px;
+        }
       }
     }
     .nav {
@@ -279,19 +516,29 @@
       margin: 0 0 30px 0;
     }
     .service{
-      padding: 30px 15px;
+      padding: 40px 15px;
+      
       h1{
-        font-size: 22px;
+        font-size: 20px;
-        line-height: 32px;
+        line-height: 1.6;
       }
       h3{
-        font-size: 16px;
+        font-size: 15px;
-        line-height: 24px;
+        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;
         }
-      h4{
-        font-size: 14px;
-        line-height: 22px;
-        margin-top: 20px;
       }
     }
     .features{
@@ -316,15 +563,28 @@
     }
 
     .apply-hr{
-      padding: 25px 15px;
+      padding: 45px 15px;
+      
       h2{
-        font-size: 18px;
+        font-size: 24px;
-        line-height: 26px;
+        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: 20px;
+        line-height: 1.8;
-        margin-top: 10px;
+        margin-top: 20px;
       }
     }
     .apply-hr-form{

src/views/resource.vue

@@ -7,47 +7,91 @@
         <zui-button @click="onButtonClick('home')">首页</zui-button>
       </template>
     </zui-header>
-    <div class="service">
+    
-      <h1>
+    <!-- 添加顶部Banner -->
-        安卓APP下载->系统介绍->使用手册
+    <div class="resource-banner">
-      </h1>
+      <div class="banner-overlay"></div>
-      <h3>
+      <div class="banner-content">
-        满足您的记账需求、健康记录、茅台预约
+        <h1>资料下载中心</h1>
-      </h3>
+        <p class="banner-subtitle">提供安卓APP、系统介绍、使用手册等完整资料</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-header">
             <div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="120" height="120"></div>
-          <div class="zui-card__body">
             <h4 class="zui-card__title">记账管理平台</h4>
+            <p class="card-desc">专业的个人记账服务平台</p>
+          </div>
+          <div class="zui-card__body">
             <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">安卓APP下载</a>
+              <a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">
-              <a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">系统介绍</a>
+                <span class="btn-icon">📱</span>
-              <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">使用手册</a>
+                <span>安卓APP下载</span>
-              <!-- <a class="zui-button-link" href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank">H5手册</a> -->
+              </a>
+              <a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">
+                <span class="btn-icon">📄</span>
+                <span>系统介绍</span>
+              </a>
+              <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">
+                <span class="btn-icon">📖</span>
+                <span>使用手册</span>
+              </a>
             </div>
           </div>
         </li>
+        
         <li class="zui-card">
+          <div class="card-header">
             <div class="zui-card__media"><img :src="Health" alt="健康管理平台" loading="lazy" decoding="async" width="120" height="120"></div>
-          <div class="zui-card__body">
             <h4 class="zui-card__title">健康管理平台</h4>
+            <p class="card-desc">健康档案管理专家</p>
+          </div>
+          <div class="zui-card__body">
             <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">安卓APP下载</a>
+              <a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">
-              <a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">系统介绍</a>
+                <span class="btn-icon">📱</span>
-              <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">使用手册</a>
+                <span>安卓APP下载</span>
+              </a>
+              <a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">
+                <span class="btn-icon">📄</span>
+                <span>系统介绍</span>
+              </a>
+              <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">
+                <span class="btn-icon">📖</span>
+                <span>使用手册</span>
+              </a>
             </div>
           </div>
         </li>
+        
         <li class="zui-card">
+          <div class="card-header">
             <div class="zui-card__media"><img :src="imaotai" alt="茅台预约平台" loading="lazy" decoding="async" width="120" height="120"></div>
-          <div class="zui-card__body">
             <h4 class="zui-card__title">茅台预约平台</h4>
+            <p class="card-desc">茅台预约得力助手</p>
+          </div>
+          <div class="zui-card__body">
             <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">安卓APP下载</a>
+              <a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">
-              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">系统介绍</a>
+                <span class="btn-icon">📱</span>
-              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">使用手册</a>
+                <span>安卓APP下载</span>
+              </a>
+              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">
+                <span class="btn-icon">📄</span>
+                <span>系统介绍</span>
+              </a>
+              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">
+                <span class="btn-icon">📖</span>
+                <span>使用手册</span>
+              </a>
             </div>
           </div>
         </li>
@@ -138,154 +182,327 @@ download(type) {
   }
 </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, #def0ef 0%, #f5fbfc 100%);
+  background: linear-gradient(180deg, #f8fffe 0%, #edf7f7 100%);
-  padding: 50px 0;
+  padding: 40px 20px 60px;
+  
   .zui-card-list {
     list-style: none;
     margin: 0 auto;
     padding: 0;
     display: grid;
-    grid-template-columns: repeat(3, minmax(280px, 1fr));
+    grid-template-columns: repeat(3, minmax(300px, 380px));
-    gap: 24px;
+    gap: 30px;
-    max-width: 1200px;
+    max-width: 1300px;
+    justify-content: center;
   }
+  
   .zui-card {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    background: #fff;
+    border-radius: 20px;
+    overflow: hidden;
+    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, #35A3BA, #6AC2B5);
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+    }
+    
+    &:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 15px 45px rgba(53, 163, 186, 0.2);
+      border-color: rgba(53, 163, 186, 0.3);
+      
+      &::before {
+        transform: scaleX(1);
+      }
+      
+      .zui-card__media {
+        transform: scale(1.05);
+      }
+      
+      .zui-button-link--primary {
+        transform: scale(1.05);
+        box-shadow: 0 4px 20px rgba(0, 136, 255, 0.4);
+      }
+    }
+  }
+  
+  .card-header {
+    padding: 35px 25px 25px;
     text-align: center;
-    padding: 20px;
+    background: linear-gradient(180deg, rgba(53, 163, 186, 0.03) 0%, transparent 100%);
-    border: 1px solid rgba(255,255,255,0.45);
-    border-radius: 16px;
-    background: rgba(255,255,255,0.75);
-    box-shadow: var(--shadow-1);
-    backdrop-filter: saturate(180%) blur(8px);
-    min-height: 260px;
-    padding-left: 0 !important;
-    position: relative !important;
-    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
   }
-  .zui-card:hover {
+  
-    transform: translateY(-2px);
+  .zui-card__media {
-    box-shadow: var(--shadow-2);
+    width: 110px;
-  }
+    height: 110px;
-  .zui-card__media img {
+    margin: 0 auto 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(53, 163, 186, 0.08), rgba(106, 194, 181, 0.08));
+    border-radius: 20px;
+    padding: 10px;
+    transition: transform 0.3s ease;
+    
+    img {
       width: 100%;
       height: 100%;
-    display: block;
+      object-fit: contain;
-    position: static !important;
-    top: auto !important;
-    left: auto !important;
-    object-fit: cover;
       border-radius: 16px;
-    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
+      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
     }
-  .zui-card__media {
+  }
-    width: 120px;
+  
-    height: 120px;
+  .zui-card__title {
-    margin-right: 0;
+    margin: 0 0 10px;
-    margin-bottom: 12px;
+    font-size: 20px;
+    color: #1f2a37;
+    font-weight: 600;
+  }
+  
+  .card-desc {
+    font-size: 14px;
+    color: #666;
+    margin: 0;
+    line-height: 1.5;
+  }
+  
+  .zui-card__body {
+    padding: 20px 25px 30px;
+  }
+  
+  .zui-card__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .zui-button-link {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: 0 0 auto;
+    gap: 8px;
-  }
+    padding: 12px 20px;
-  .zui-card__body {
+    font-size: 14px;
-    flex: 1 1 auto;
+    font-weight: 500;
-  }
-  .zui-card__title {
-    margin: 0 0 8px 0;
-    font-size: 16px;
-    color: #333;
-  }
-  .zui-card__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: center;
-    margin-top: 10px;
-  }
-  .zui-button-link {
-    display: inline-block;
-    padding: 6px 12px;
-    font-size: 12px;
     color: #656b79;
     background: #f6f8fa;
-    border: 1px solid #c8c8cd;
+    border: 1px solid #e1e4e8;
-    border-radius: 6px;
+    border-radius: 10px;
     text-decoration: none;
-    min-width: 96px;
+    transition: all 0.3s ease;
-    text-align: center;
+    
-  }
+    .btn-icon {
-  .zui-card__title {
-    margin: 10px 0 6px 0;
       font-size: 18px;
-    color: var(--color-text);
     }
+    
+    &:hover {
+      background: #eef1f4;
+      border-color: #d0d4d9;
+      transform: translateX(3px);
+    }
+  }
+  
   .zui-button-link--primary {
     color: #fff;
     background: linear-gradient(135deg, #00c2ff, #0088ff);
-    border-color: #0088ff;
+    border: none;
-    box-shadow: 0 0 10px rgba(0, 212, 255, .35);
+    box-shadow: 0 4px 15px rgba(0, 136, 255, 0.25);
-  }
+    font-weight: 600;
-  .zui-button-link--primary:hover {
+    
+    &:hover {
       background: linear-gradient(135deg, #00b8ff, #007bff);
-    border-color: #007bff;
+      transform: translateX(3px) scale(1.02);
-  }
+    }
-
+  }
 }
 
+// 响应式设计
 @media (max-width: 1024px) {
   .features .zui-card-list {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(280px, 1fr));
     padding: 0 20px;
+    gap: 25px;
   }
 }
-@media (max-width: 600px) {
+
+@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: 30px 15px !important;
+    padding: 40px 15px 25px;
+    
+    h2 {
+      font-size: 26px;
     }
-  .service h1 {
+    
-    font-size: 20px !important;
+    .service-desc {
-    line-height: 28px !important;
+      font-size: 14px;
     }
-  .service h3 {
-    font-size: 15px !important;
-    line-height: 22px !important;
   }
+}
+
+@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 !important;
+    padding: 30px 15px 40px;
-  }
+    
-  .features .zui-card-list {
+    .zui-card-list {
       grid-template-columns: 1fr;
       gap: 20px;
       padding: 0 10px;
     }
-  .features .zui-card {
+    
-    min-height: auto;
+    .zui-card {
-    padding: 16px !important;
+      border-radius: 16px;
     }
-  .features .zui-card__media {
+    
-    width: 90px !important;
+    .card-header {
-    height: 90px !important;
+      padding: 25px 20px 20px;
     }
-  .features .zui-card__media img {
+    
-    width: 90px !important;
+    .zui-card__media {
-    height: 90px !important;
+      width: 100px;
+      height: 100px;
+      margin-bottom: 15px;
     }
-  .features .zui-card__title {
+    
-    font-size: 16px !important;
+    .zui-card__title {
+      font-size: 18px;
     }
-  .features .zui-card__actions {
+    
-    flex-direction: column;
+    .card-desc {
-    gap: 8px;
-  }
-  .features .zui-button-link {
-    width: 100%;
-    min-width: auto;
-    padding: 8px 12px;
       font-size: 13px;
     }
+    
+    .zui-card__body {
+      padding: 15px 20px 25px;
+    }
+    
+    .zui-card__actions {
+      gap: 10px;
+    }
+    
+    .zui-button-link {
+      padding: 10px 16px;
+      font-size: 13px;
+      
+      .btn-icon {
+        font-size: 16px;
+      }
+    }
+  }
 }
 </style>