From 96e217948b07931e916725476e79d0fa5f60ec00 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Tue, 4 Nov 2025 01:21:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8Qoder=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=94=B9=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json               |  11 --
 package.json                    |   1 -
 src/components/Footer.vue       |  16 +--
 src/components/Page.vue         |   3 +-
 src/components/less/button.less |  17 ++-
 src/components/less/footer.less |  29 ++++
 src/components/less/header.less |  18 ++-
 src/components/less/page.less   |  88 +++++++++++-
 src/views/HomePage.vue          | 175 +++++++++++++++--------
 src/views/callus.vue            |  65 ++++-----
 src/views/less/home-page.less   |   9 ++
 src/views/resource.vue          | 239 ++++++++++++++++++++++----------
 12 files changed, 476 insertions(+), 195 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index efef918..4a29b6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
         "jsonp": "^0.2.1",
         "vue": "^2.7.15",
         "vue-carousel": "^0.18.0",
-        "vue-droplist": "^1.0.6",
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.7.15",
         "vuex": "^3.3.0"
@@ -13833,11 +13832,6 @@
       "resolved": "http://npm.ezbim.cn:3038/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
       "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
     },
-    "node_modules/vue-droplist": {
-      "version": "1.0.6",
-      "resolved": "http://npm.ezbim.cn:3038/vue-droplist/-/vue-droplist-1.0.6.tgz",
-      "integrity": "sha512-IkGBKHyOepVOe9nyoIZ521Bi94FF1jmSPUtEDsV/3+WaJSPD+xcq+6m4GCndA0Oke2XLlAAzq9uT4KXNHIOvsQ=="
-    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "http://npm.ezbim.cn:3038/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -26312,11 +26306,6 @@
         }
       }
     },
-    "vue-droplist": {
-      "version": "1.0.6",
-      "resolved": "http://npm.ezbim.cn:3038/vue-droplist/-/vue-droplist-1.0.6.tgz",
-      "integrity": "sha512-IkGBKHyOepVOe9nyoIZ521Bi94FF1jmSPUtEDsV/3+WaJSPD+xcq+6m4GCndA0Oke2XLlAAzq9uT4KXNHIOvsQ=="
-    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "http://npm.ezbim.cn:3038/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index f52c613..f8062c0 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "jsonp": "^0.2.1",
     "vue": "^2.7.15",
     "vue-carousel": "^0.18.0",
-    "vue-droplist": "^1.0.6",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.7.15",
     "vuex": "^3.3.0"
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index bf53084..9c56498 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,14 +1,14 @@
 <template>
   <footer class="zui-footer">
-    <div style="display: flex;justify-content: center; align-items: center;">
-      <img src ="../assets/img/qrcode.png" width="270" height="155">
-     </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">&nbsp;<a href="https://beian.mps.gov.cn/#/query/webSearch?code=37021202001661" rel="noreferrer" target="_blank">鲁公网安备37021202001661</a>
+    <div class="footer-content">
+      <div class="footer-qrcode">
+        <img src="../assets/img/qrcode.png" width="270" height="155" alt="客服二维码">
+      </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>
     </div>
-
     <p class="copy-right">
        Copyright 2025 智聪网络科技 .All rights reserved
       <br>
diff --git a/src/components/Page.vue b/src/components/Page.vue
index 2969d3e..3731c52 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -24,8 +24,7 @@
     },
     computed: {
       cls () {
-        const cls = (Util.os.android || Util.os.iPhone || Util.os.wechat || Util.os.wechat|| Util.os.mobile) ? '' : 'min-1200'
-        return 'zui-page ' + cls
+        return 'zui-page'
       },
       toastText () {
         return this.$store.state.toastText
diff --git a/src/components/less/button.less b/src/components/less/button.less
index 7396ffb..ef417f9 100644
--- a/src/components/less/button.less
+++ b/src/components/less/button.less
@@ -4,8 +4,21 @@
   color: #fff;
   font-size: 14px;
   line-height: 50px;
-  border-radius: 6px;
-  background: #F7931E;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #00b8ff, #007bff);
+  border: none;
   min-width: 190px;
+  box-shadow: 0 0 0 rgba(0, 212, 255, 0);
+  transition: all .2s ease;
   .cursor();
 }
+
+.@{prefix}-button:hover{
+  background: linear-gradient(135deg, #00c2ff, #0088ff);
+  box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
+}
+
+.@{prefix}-button:active{
+  background: linear-gradient(135deg, #00a8f0, #006fe6);
+  transform: translateY(1px);
+}
diff --git a/src/components/less/footer.less b/src/components/less/footer.less
index 0a00e65..0a2551b 100644
--- a/src/components/less/footer.less
+++ b/src/components/less/footer.less
@@ -5,6 +5,7 @@
   min-height: 125px;
   background: #646464;
   padding: 40px 0 0 0;
+  border-top: 1px solid rgba(255,255,255,0.25);
   .links {
     color: #fff;
     font-size: 16px;
@@ -36,6 +37,19 @@
     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-qrcode img {
+    display: block;
+    max-width: 270px;
+    height: auto;
+  }
 }
 
 @media (max-width: 420px) {
@@ -52,5 +66,20 @@
         display: block;
       }
     }
+    .footer-content {
+      flex-direction: column;
+      gap: 12px;
+    }
+    .footer-qrcode img {
+      width: 180px !important;
+      height: auto !important;
+      margin-bottom: 8px;
+    }
+    .links a {
+      display: inline-block;
+      padding: 4px 6px;
+      line-height: 1.6;
+      border-radius: 4px;
+    }
   }
 }
diff --git a/src/components/less/header.less b/src/components/less/header.less
index 9c26eb8..9c19bae 100644
--- a/src/components/less/header.less
+++ b/src/components/less/header.less
@@ -3,6 +3,12 @@
 .@{prefix}-header {
   width: 100%;
   height: 100px;
+  background: rgba(255,255,255,0.75);
+  backdrop-filter: saturate(180%) blur(8px);
+  box-shadow: 0 4px 14px rgba(16,24,40,0.08);
+  position: sticky;
+  top: 0;
+  z-index: 100;
   .float-clear;
   .@{prefix}-logo{
     width: 135px;
@@ -20,13 +26,21 @@
     text-align: center;
     margin: 0 0 0 0px;
   }
+  .@{prefix}-logo-text a{
+    color: var(--color-text);
+    text-decoration: none;
+    margin: 0 8px;
+    font-weight: 600;
+  }
+  .@{prefix}-logo-text a:hover{
+    color: var(--color-accent);
+    text-decoration: underline;
+  }
   .@{prefix}-button{
     float: right;
     line-height: 40px;
-    background: #236579;
     margin: 30px 30px 0 0;
     min-width: 100px;
-    border-radius: 10px;
   }
   .@{prefix}-rightcol{
     display: none;
diff --git a/src/components/less/page.less b/src/components/less/page.less
index f2a1de4..b476e80 100644
--- a/src/components/less/page.less
+++ b/src/components/less/page.less
@@ -1,20 +1,104 @@
 @import './reset.less';
 
+:root {
+  --color-bg: #edf7f7;
+  --color-text: #1f2a37;
+  --color-accent: #35A3BA;
+  --color-accent-strong: #0ea5b7;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --radius-1: 10px;
+  --radius-2: 16px;
+  --shadow-1: 0 2px 8px rgba(16,24,40,.06);
+  --shadow-2: 0 8px 24px rgba(16,24,40,.08);
+  --transition-fast: 180ms;
+}
+
 .zui-page {
   width: 100%;
   min-height: 100%;
   margin: 0 auto;
   font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  &.min-1200 {
-    min-width: 1200px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  a {
+    text-decoration: none;
   }
   a:hover {
     color: #35A3BA;
     text-decoration: underline;
   }
+  .zui-nav-link {
+    text-decoration: none;
+    color: inherit;
+    margin-left: 12px;
+  }
+  .zui-nav-link:hover {
+    text-decoration: underline;
+    color: #35A3BA;
+  }
+  .zui-nav-link--mobile {
+    font-size: 12px;
+  }
   .clear:after {
     content: '';
     display: table;
     clear: both;
   }
 }
+
+/* Drawer menu */
+.zui-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 999;
+}
+.zui-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 70%;
+  max-width: 300px;
+  height: 100%;
+  background: #fff;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  padding: 16px;
+}
+.zui-drawer__header {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: #333;
+}
+.zui-drawer__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.zui-drawer__list li {
+  padding: 12px 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.zui-drawer__list li:hover {
+  background: #f6f8fa;
+  cursor: pointer;
+}
+@media (min-width: 1200px) {
+  .zui-drawer,
+  .zui-drawer-overlay {
+    display: none;
+  }
+}
+
+@media (min-width: 1200px) {
+  .zui-page {
+    min-width: 1200px;
+  }
+}
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 0134a4b..a9dce58 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -3,17 +3,16 @@
     <zui-header>
       <logo type="xiaoyanyun" href="/"></logo>
       <h4 v-show="webShow" class="zui-logo-text">
-         <a style="text-decoration: none;" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
-         <a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
-         <a style="text-decoration: none;" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
         </h4>
-        <div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div>
-        <div  v-show="mobileShow" class="rightcol"> 
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
+        <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
+        <div  v-show="mobileShow" class="zui-rightcol"> 
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
         </div>
-         <drop-list :config="configData" ref="droplist"></drop-list>
          <div v-show="webShow">
          <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
          <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -23,6 +22,15 @@
          <zui-button @click="onButtonClick('home')">首页</zui-button>
       </div>
     </zui-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>
+      <ul class="zui-drawer__list">
+        <li @click="gohome">首页</li>
+        <li @click="goresource">资料下载</li>
+        <li @click="gocallus">联系我们</li>
+      </ul>
+    </div>
     <div class="banner vivify fadeIn">
       <h1 class="vivify popIn">
         <span class="br"></span>科学记账&nbsp;&nbsp;量入为出
@@ -72,26 +80,34 @@
       </h4>
     </div>
     <div class="features">
-      <ul>
-        <li>
-          <img :src="feature1"/>
-          <h4>记账管理</h4>
-          <p>最专业的个人记账服务。</p>
+      <ul class="zui-card-list">
+        <li class="zui-card">
+          <div class="zui-card__media"><img :src="feature1" 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>
-          <img :src="feature2"/>
-          <h4>健康档案</h4>
-          <p>满足健康档案记录需求。</p>
+        <li class="zui-card">
+          <div class="zui-card__media"><img :src="feature2" 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>
-          <img :src="feature3"/>
-          <h4>茅台预约</h4>
-          <p>提供安全高效自动预约。</p>
+        <li class="zui-card">
+          <div class="zui-card__media"><img :src="feature3" 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>
-          <img :src="feature4"/>
-          <h4>产品服务</h4>
-          <p>全天尽享服务贴心之旅‌‌。</p>
+        <li class="zui-card">
+          <div class="zui-card__media"><img :src="feature4" 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>
      </ul>
     </div>
@@ -122,9 +138,8 @@
   import feature3 from '../assets/img/feature3.png'
   import feature4 from '../assets/img/feature4.png'
   import Util from '../Util'
-  import DropList from 'vue-droplist'
   export default{
-    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList},
+    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
     data () {
       return {
         feature1: feature1,
@@ -133,24 +148,8 @@
         feature4: feature4,
         mobileShow: false,
         webShow: true,
-        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2,
-        configData : {
-            position: {  // 设置显示位置，position
-              top: '60px',
-              right: '15px',
-              bottom: '',
-              left: ''
-            },
-            width: '40%', // 设置宽度
-            list: [ // 设置下拉列表数据和对应的点击事件
-            {text: '首页', action: this.gohome},
-              // {text: '记账平台', action: this.goinvest},
-              // {text: '健康档案', action: this.gohealth},
-              // {text: '茅台预约', action: this.goimaotai},
-              {text: '资料下载', action: this.goresource},
-              {text: '联系我们', action: this.gocallus}
-            ]
-        }
+        drawerVisible: false,
+        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
       }
     },
     created() {
@@ -174,7 +173,7 @@
         }
       },
       openMenu: function () {
-       this.$refs.droplist.show()
+       this.drawerVisible = true
       },
       gohome: function () {
        this.$router.push({path:'/'})
@@ -194,6 +193,9 @@
       gohealth: function () {
         window.open("http://152.136.151.187:89/#/", '_blank');
       },
+      closeMenu: function () {
+        this.drawerVisible = false
+      },
       init: function () {
         if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
           this.webShow=false
@@ -206,16 +208,77 @@
       },
     }
 
-  }
+  };
 </script>
 <style scoped lang="less">
-.rightcol{
-  display: flex;
-  float: right;
-  line-height: 30px;
-  margin: 15px 10px 0 0;
-  min-width: 50px;
-  font-weight: bold;
-  color: #32adc6;
+.features {
+  background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
+  padding: 50px 0;
+  .zui-card-list {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(220px, 1fr));
+    gap: 24px;
+    max-width: 1200px;
+  }
+  .zui-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    border: 1px solid rgba(255,255,255,0.45);
+    border-radius: 16px;
+    background: rgba(255,255,255,0.75);
+    box-shadow: var(--shadow-1);
+    min-height: 240px;
+    /* override legacy list item rules */
+    padding-left: 0 !important;
+    position: relative !important;
+    backdrop-filter: saturate(180%) blur(8px);
+    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
+  }
+  .zui-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-2);
+  }
+  .zui-card__media {
+    width: 96px;
+    height: 96px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .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;
+    border-radius: 14px;
+    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
+  }
+  .zui-card__title {
+    margin: 10px 0 6px 0;
+    font-size: 16px;
+    color: var(--color-text);
+  }
+  .zui-card__desc {
+    font-size: 13px;
+    color: #666;
+  }
+}
+@media (max-width: 1024px) {
+  .features .zui-card-list { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 600px) {
+  .features .zui-card-list { grid-template-columns: 1fr; }
+  .features .zui-card__media img { width: 80px; }
 }
 </style>
diff --git a/src/views/callus.vue b/src/views/callus.vue
index 7f33dc0..4f6c347 100644
--- a/src/views/callus.vue
+++ b/src/views/callus.vue
@@ -3,17 +3,16 @@
     <zui-header>
       <logo type="xiaoyanyun" href="/"></logo>
       <h4 v-show="webShow" class="zui-logo-text">
-         <a style="text-decoration: none;" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
-         <a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
-         <a style="text-decoration: none;" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
         </h4>
-        <div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div>
-        <div  v-show="mobileShow" class="rightcol"> 
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
+        <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
+        <div  v-show="mobileShow" class="zui-rightcol"> 
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
         </div>
-         <drop-list :config="configData" ref="droplist"></drop-list>
          <div v-show="webShow">
          <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
          <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -23,6 +22,15 @@
          <zui-button @click="onButtonClick('home')">首页</zui-button>
       </div>
     </zui-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>
+      <ul class="zui-drawer__list">
+        <li @click="gohome">首页</li>
+        <li @click="goresource">资料下载</li>
+        <li @click="gocallus">联系我们</li>
+      </ul>
+    </div>
     <div class="service">
       <h1>
         联系我们->注册账号->免费使用
@@ -72,9 +80,8 @@
   import feature3 from '../assets/img/feature3.png'
   import feature4 from '../assets/img/feature4.png'
   import Util from '../Util'
-  import DropList from 'vue-droplist'
   export default{
-    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList},
+    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
     data () {
       return {
         feature1: feature1,
@@ -83,24 +90,8 @@
         feature4: feature4,
         mobileShow: false,
         webShow: true,
-        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2,
-        configData : {
-            position: {  // 设置显示位置，position
-              top: '60px',
-              right: '15px',
-              bottom: '',
-              left: ''
-            },
-            width: '40%', // 设置宽度
-            list: [ // 设置下拉列表数据和对应的点击事件
-            {text: '首页', action: this.gohome},
-              // {text: '记账平台', action: this.goinvest},
-              // {text: '健康档案', action: this.gohealth},
-              // {text: '茅台预约', action: this.goimaotai},
-              {text: '资料下载', action: this.goresource},
-              {text: '联系我们', action: this.gocallus}
-            ]
-        }
+        drawerVisible: false,
+        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
       }
     },
     created() {
@@ -124,7 +115,7 @@
         }
       },
       openMenu: function () {
-       this.$refs.droplist.show()
+       this.drawerVisible = true
       },
       gohome: function () {
        this.$router.push({path:'/'})
@@ -144,6 +135,9 @@
       gohealth: function () {
         window.open("http://152.136.151.187:89/#/", '_blank');
       },
+      closeMenu: function () {
+        this.drawerVisible = false
+      },
       init: function () {
         if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
           this.webShow=false
@@ -158,14 +152,3 @@
 
   }
 </script>
-<style scoped lang="less">
-.rightcol{
-  display: flex;
-  float: right;
-  line-height: 30px;
-  margin: 15px 10px 0 0;
-  min-width: 50px;
-  font-weight: bold;
-  color: #32adc6;
-}
-</style>
diff --git a/src/views/less/home-page.less b/src/views/less/home-page.less
index 04fd212..3a1a177 100644
--- a/src/views/less/home-page.less
+++ b/src/views/less/home-page.less
@@ -6,6 +6,13 @@
     background-size: cover;
     position: relative;
     overflow: hidden;
+    &:before {
+      content: '';
+      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%);
+      pointer-events: none;
+    }
     img {
       top: 0;
       left: 0;
@@ -19,11 +26,13 @@
       color: #fff;
       font-size: 42px;
       margin: 0;
+      text-shadow: 0 2px 12px rgba(0,0,0,0.25);
     }
     h3 {
       color: #fff;
       font-size: 24px;
       margin-top: 28px;
+      text-shadow: 0 1px 6px rgba(0,0,0,0.2);
     }
   }
   .nav {
diff --git a/src/views/resource.vue b/src/views/resource.vue
index 821b4ea..a3b1cc3 100644
--- a/src/views/resource.vue
+++ b/src/views/resource.vue
@@ -3,17 +3,16 @@
     <zui-header>
       <logo type="xiaoyanyun" href="/"></logo>
       <h4 v-show="webShow" class="zui-logo-text">
-         <a style="text-decoration: none;" href="http://152.136.151.187:88/login">&nbsp;&nbsp;记账平台</a>
-         <a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
-         <a style="text-decoration: none;" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:88/login">&nbsp;&nbsp;记账平台</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
+         <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
         </h4>
-        <div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div>
-        <div  v-show="mobileShow" class="rightcol"> 
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
-          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
+        <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
+        <div  v-show="mobileShow" class="zui-rightcol"> 
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
+          <a class="zui-nav-link zui-nav-link--mobile" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
         </div>
-         <drop-list :config="configData" ref="droplist"></drop-list>
          <div v-show="webShow">
          <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
          <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
@@ -23,6 +22,15 @@
          <zui-button @click="onButtonClick('home')">首页</zui-button>
       </div>
     </zui-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>
+      <ul class="zui-drawer__list">
+        <li @click="gohome">首页</li>
+        <li @click="goresource">资料下载</li>
+        <li @click="gocallus">联系我们</li>
+      </ul>
+    </div>
     <div class="service">
       <h1>
         安卓APP下载->系统介绍->使用手册
@@ -32,39 +40,40 @@
       </h3>
     </div>
     <div class="features">
-      <ul>
-        <li>
-          <img :src="Invest"/>
-          <h4>记账管理平台&nbsp;&nbsp; <a href="/static/download/invest/intcInvest-V1.0.apk"  target="_blank">安卓APP下载</a></h4>
-          
-          <p> 
-             <a href="/static/download/invest/intcInvest-Introduction.pdf"  target="_blank">系统介绍</a>&nbsp;&nbsp; 
-             <a href="/static/download/invest/intcInvest-Manual.pdf"   target="_blank" >PC手册</a>&nbsp;&nbsp; 
-             <a href="/static/download/invest/intcInvestH5-Manual.pdf"  target="_blank" >H5手册</a>&nbsp;&nbsp; 
-             <!-- <a href="" @click="download(1);return false;">系统介绍</a>&nbsp;&nbsp; 
-             <a href=""  @click="download(2);return false;">PC手册</a>&nbsp;&nbsp; 
-             <a href="" @click="download(3);return false;" >H5手册</a>&nbsp;&nbsp;  -->
-          </p>
+      <ul class="zui-card-list">
+        <li class="zui-card">
+          <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>
+            <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" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">系统介绍</a>
+              <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">PC手册</a>
+              <a class="zui-button-link" href="/static/download/invest/intcInvestH5-Manual.pdf" target="_blank">H5手册</a>
+            </div>
+          </div>
         </li>
-        <li>
-          <img :src="Health"/>
-          <h4>健康管理平台&nbsp;&nbsp; <a href="/static/download/health/intcHealth-V1.0.apk"  target="_blank">安卓APP下载</a></h4>
-          <p> 
-            <a href="/static/download/health/intcHealth-Introduction.pdf"  target="_blank">系统介绍</a>&nbsp;&nbsp; 
-            <a href="/static/download/health/intcHealth-Manual.pdf"   target="_blank">使用手册</a>&nbsp;&nbsp;
-            <!-- <a href="" @click="download(4);return false;">系统介绍</a>&nbsp;&nbsp; 
-            <a href=""  @click="download(5);return false;">使用手册</a>&nbsp;&nbsp;    -->
-        </p>
+        <li class="zui-card">
+          <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>
+            <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" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">系统介绍</a>
+              <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">使用手册</a>
+            </div>
+          </div>
         </li>
-        <li>
-          <img :src="imaotai"/>
-          <h4>茅台预约平台&nbsp;&nbsp; <a href="/static/download/imaotai/intcImaotai-V1.0.apk"  target="_blank">安卓APP下载</a></h4>
-          <p> 
-            <a href="/static/download/imaotai/intcImaotai-Introduction.pdf"   target="_blank">系统介绍</a>&nbsp;&nbsp; 
-            <a href="/static/download/imaotai/intcImaotai-Manual.pdf"   target="_blank">使用手册</a>&nbsp;&nbsp; 
-            <!-- <a href="" @click="download(6);return false;">系统介绍</a>&nbsp;&nbsp; 
-            <a href=""  @click="download(7);return false;">使用手册</a>&nbsp;&nbsp;   -->
-        </p>
+        <li class="zui-card">
+          <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>
+            <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" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">系统介绍</a>
+              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">使用手册</a>
+            </div>
+          </div>
         </li>
      </ul>
     </div>
@@ -72,7 +81,6 @@
   </page>
 </template>
 <script>
-  import './less/home-page.less'
   import Logo from '../components/Logo'
   import Page from '../components/Page'
   import ZuiHeader from '../components/Header'
@@ -86,9 +94,8 @@
   import Health from '../assets/img/health.png'
   import imaotai from '../assets/img/imaotai.png'
   import Util from '../Util'
-  import DropList from 'vue-droplist'
   export default{
-    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList},
+    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton},
     data () {
       return {
         feature1: feature1,
@@ -100,24 +107,8 @@
         Invest: Invest,
         mobileShow: false,
         webShow: true,
-        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2,
-        configData : {
-            position: {  // 设置显示位置，position
-              top: '60px',
-              right: '15px',
-              bottom: '',
-              left: ''
-            },
-            width: '40%', // 设置宽度
-            list: [ // 设置下拉列表数据和对应的点击事件
-            {text: '首页', action: this.gohome},
-              // {text: '记账平台', action: this.goinvest},
-              // {text: '健康档案', action: this.gohealth},
-              // {text: '茅台预约', action: this.goimaotai},
-              {text: '资料下载', action: this.goresource},
-              {text: '联系我们', action: this.gocallus}
-            ]
-        }
+        drawerVisible: false,
+        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
       }
     },
     created() {
@@ -141,7 +132,7 @@
         }
       },
       openMenu: function () {
-       this.$refs.droplist.show()
+       this.drawerVisible = true
       },
       gohome: function () {
        this.$router.push({path:'/'})
@@ -161,6 +152,9 @@
       gohealth: function () {
         window.open("http://152.136.151.187:89/#/", '_blank');
       },
+      closeMenu: function () {
+        this.drawerVisible = false
+      },
       // 授权书下载
 download(type) {
 
@@ -215,13 +209,118 @@ download(type) {
   }
 </script>
 <style scoped lang="less">
-.rightcol{
-  display: flex;
-  float: right;
-  line-height: 30px;
-  margin: 15px 10px 0 0;
-  min-width: 50px;
-  font-weight: bold;
-  color: #32adc6;
+.features {
+  background: linear-gradient(180deg, #def0ef 0%, #f5fbfc 100%);
+  padding: 50px 0;
+  .zui-card-list {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(280px, 1fr));
+    gap: 24px;
+    max-width: 1200px;
+  }
+  .zui-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    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);
+    box-shadow: var(--shadow-2);
+  }
+  .zui-card__media img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    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));
+  }
+  .zui-card__media {
+    width: 120px;
+    height: 120px;
+    margin-right: 0;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+  }
+  .zui-card__body {
+    flex: 1 1 auto;
+  }
+  .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-radius: 6px;
+    text-decoration: none;
+    min-width: 96px;
+    text-align: center;
+  }
+  .zui-card__title {
+    margin: 10px 0 6px 0;
+    font-size: 18px;
+    color: var(--color-text);
+  }
+  .zui-button-link--primary {
+    color: #fff;
+    background: linear-gradient(135deg, #00c2ff, #0088ff);
+    border-color: #0088ff;
+    box-shadow: 0 0 10px rgba(0, 212, 255, .35);
+  }
+  .zui-button-link--primary:hover {
+    background: linear-gradient(135deg, #00b8ff, #007bff);
+    border-color: #007bff;
+  }
+
+}
+
+@media (max-width: 1024px) {
+  .features .zui-card-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .features .zui-card-list {
+    grid-template-columns: 1fr;
+  }
+  .features .zui-card {
+    align-items: flex-start;
+  }
+  .features .zui-card__media img {
+    width: 80px;
+  }
 }
 </style>