From 38378670793931b4d43034eb28eb225f8b592a70 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Sun, 28 Dec 2025 23:20:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=8B=E8=BD=BD=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/resource.vue | 188 +++++++++++++++++++++++++----------------
 1 file changed, 117 insertions(+), 71 deletions(-)

diff --git a/src/views/resource.vue b/src/views/resource.vue
index 4605869..75fc117 100644
--- a/src/views/resource.vue
+++ b/src/views/resource.vue
@@ -25,22 +25,23 @@
     <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="card-icon-wrapper">
+            <div class="zui-card__media"><img :src="Invest" alt="记账管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
+          </div>
+          <div class="card-content">
             <h4 class="zui-card__title">记账管理平台</h4>
             <p class="card-desc">专业的个人记账服务平台</p>
-          </div>
-          <div class="zui-card__body">
+            <div class="card-divider"></div>
             <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" target="_blank">
+              <a class="zui-button-link zui-button-link--primary" href="/static/download/invest/intcInvest-V1.0.apk" download>
                 <span class="btn-icon">📱</span>
                 <span>安卓APP下载</span>
               </a>
-              <a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" target="_blank">
+              <a class="zui-button-link" href="/static/download/invest/intcInvest-Introduction.pdf" download>
                 <span class="btn-icon">📄</span>
                 <span>系统介绍</span>
               </a>
-              <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" target="_blank">
+              <a class="zui-button-link" href="/static/download/invest/intcInvest-Manual.pdf" download>
                 <span class="btn-icon">📖</span>
                 <span>使用手册</span>
               </a>
@@ -49,22 +50,23 @@
         </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="card-icon-wrapper">
+            <div class="zui-card__media"><img :src="Health" alt="健康管理平台" loading="lazy" decoding="async" width="110" height="110"></div>
+          </div>
+          <div class="card-content">
             <h4 class="zui-card__title">健康管理平台</h4>
             <p class="card-desc">健康档案管理专家</p>
-          </div>
-          <div class="zui-card__body">
+            <div class="card-divider"></div>
             <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" target="_blank">
+              <a class="zui-button-link zui-button-link--primary" href="/static/download/health/intcHealth-V1.0.apk" download>
                 <span class="btn-icon">📱</span>
                 <span>安卓APP下载</span>
               </a>
-              <a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" target="_blank">
+              <a class="zui-button-link" href="/static/download/health/intcHealth-Introduction.pdf" download>
                 <span class="btn-icon">📄</span>
                 <span>系统介绍</span>
               </a>
-              <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" target="_blank">
+              <a class="zui-button-link" href="/static/download/health/intcHealth-Manual.pdf" download>
                 <span class="btn-icon">📖</span>
                 <span>使用手册</span>
               </a>
@@ -73,22 +75,23 @@
         </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="card-icon-wrapper">
+            <div class="zui-card__media"><img :src="imaotai" alt="茅台预约平台" loading="lazy" decoding="async" width="110" height="110"></div>
+          </div>
+          <div class="card-content">
             <h4 class="zui-card__title">茅台预约平台</h4>
             <p class="card-desc">茅台预约得力助手</p>
-          </div>
-          <div class="zui-card__body">
+            <div class="card-divider"></div>
             <div class="zui-card__actions">
-              <a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" target="_blank">
+              <a class="zui-button-link zui-button-link--primary" href="/static/download/imaotai/intcImaotai-V1.0.apk" download>
                 <span class="btn-icon">📱</span>
                 <span>安卓APP下载</span>
               </a>
-              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" target="_blank">
+              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Introduction.pdf" download>
                 <span class="btn-icon">📄</span>
                 <span>系统介绍</span>
               </a>
-              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" target="_blank">
+              <a class="zui-button-link" href="/static/download/imaotai/intcImaotai-Manual.pdf" download>
                 <span class="btn-icon">📖</span>
                 <span>使用手册</span>
               </a>
@@ -260,16 +263,16 @@ download(type) {
     list-style: none;
     margin: 0 auto;
     padding: 0;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(300px, 380px));
-    gap: 30px;
-    max-width: 1300px;
-    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    max-width: 900px;
   }
   
   .zui-card {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: stretch;
     background: #fff;
     border-radius: 20px;
     overflow: hidden;
@@ -283,47 +286,49 @@ download(type) {
       position: absolute;
       top: 0; left: 0; right: 0;
       height: 4px;
-      background: linear-gradient(90deg, #35A3BA, #6AC2B5);
+      background: linear-gradient(90deg, #667eea, #764ba2);
       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);
+      transform: translateY(-5px);
+      box-shadow: 0 15px 45px rgba(102, 126, 234, 0.2);
+      border-color: rgba(102, 126, 234, 0.3);
       
       &::before {
         transform: scaleX(1);
       }
       
-      .zui-card__media {
-        transform: scale(1.05);
+      .zui-card__media img {
+        transform: scale(1.1) rotate(3deg);
       }
       
       .zui-button-link--primary {
-        transform: scale(1.05);
-        box-shadow: 0 4px 20px rgba(0, 136, 255, 0.4);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 25px rgba(0, 136, 255, 0.45);
       }
     }
   }
   
-  .card-header {
-    padding: 35px 25px 25px;
-    text-align: center;
-    background: linear-gradient(180deg, rgba(53, 163, 186, 0.03) 0%, transparent 100%);
+  .card-icon-wrapper {
+    flex: 0 0 180px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
+    padding: 30px;
   }
   
   .zui-card__media {
     width: 110px;
     height: 110px;
-    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));
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
     border-radius: 20px;
-    padding: 10px;
+    padding: 12px;
     transition: transform 0.3s ease;
     
     img {
@@ -332,40 +337,50 @@ download(type) {
       object-fit: contain;
       border-radius: 16px;
       filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
+      transition: all 0.3s ease;
     }
   }
   
+  .card-content {
+    flex: 1;
+    padding: 30px 35px;
+    display: flex;
+    flex-direction: column;
+  }
+  
   .zui-card__title {
-    margin: 0 0 10px;
-    font-size: 20px;
+    margin: 0 0 8px;
+    font-size: 22px;
     color: #1f2a37;
-    font-weight: 600;
+    font-weight: 700;
   }
   
   .card-desc {
     font-size: 14px;
     color: #666;
-    margin: 0;
-    line-height: 1.5;
+    margin: 0 0 20px;
+    line-height: 1.6;
   }
   
-  .zui-card__body {
-    padding: 20px 25px 30px;
+  .card-divider {
+    height: 1px;
+    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), transparent);
+    margin-bottom: 20px;
   }
   
   .zui-card__actions {
     display: flex;
-    flex-direction: column;
     gap: 12px;
+    flex-wrap: wrap;
   }
   
   .zui-button-link {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    padding: 12px 20px;
-    font-size: 14px;
+    gap: 6px;
+    padding: 10px 18px;
+    font-size: 13px;
     font-weight: 500;
     color: #656b79;
     background: #f6f8fa;
@@ -373,28 +388,31 @@ download(type) {
     border-radius: 10px;
     text-decoration: none;
     transition: all 0.3s ease;
+    flex: 0 0 auto;
     
     .btn-icon {
-      font-size: 18px;
+      font-size: 16px;
     }
     
     &:hover {
       background: #eef1f4;
       border-color: #d0d4d9;
-      transform: translateX(3px);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     }
   }
   
   .zui-button-link--primary {
     color: #fff;
-    background: linear-gradient(135deg, #00c2ff, #0088ff);
+    background: linear-gradient(135deg, #667eea, #764ba2);
     border: none;
-    box-shadow: 0 4px 15px rgba(0, 136, 255, 0.25);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
     font-weight: 600;
     
     &:hover {
-      background: linear-gradient(135deg, #00b8ff, #007bff);
-      transform: translateX(3px) scale(1.02);
+      background: linear-gradient(135deg, #7689f0, #8558b0);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.45);
     }
   }
 }
@@ -402,9 +420,7 @@ download(type) {
 // 响应式设计
 @media (max-width: 1024px) {
   .features .zui-card-list {
-    grid-template-columns: repeat(2, minmax(280px, 1fr));
-    padding: 0 20px;
-    gap: 25px;
+    max-width: 800px;
   }
 }
 
@@ -437,6 +453,34 @@ download(type) {
       font-size: 14px;
     }
   }
+  
+  .features {
+    .zui-card {
+      flex-direction: column;
+    }
+    
+    .card-icon-wrapper {
+      flex: 0 0 auto;
+      padding: 25px;
+    }
+    
+    .card-content {
+      padding: 25px 20px;
+    }
+    
+    .zui-card__title {
+      font-size: 20px;
+    }
+    
+    .zui-card__actions {
+      flex-direction: column;
+      
+      .zui-button-link {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
 }
 
 @media (max-width: 600px) {
@@ -460,8 +504,6 @@ download(type) {
     padding: 30px 15px 40px;
     
     .zui-card-list {
-      grid-template-columns: 1fr;
-      gap: 20px;
       padding: 0 10px;
     }
     
@@ -469,14 +511,17 @@ download(type) {
       border-radius: 16px;
     }
     
-    .card-header {
-      padding: 25px 20px 20px;
+    .card-icon-wrapper {
+      padding: 20px;
     }
     
     .zui-card__media {
-      width: 100px;
-      height: 100px;
-      margin-bottom: 15px;
+      width: 90px;
+      height: 90px;
+    }
+    
+    .card-content {
+      padding: 20px 15px;
     }
     
     .zui-card__title {
@@ -485,10 +530,11 @@ download(type) {
     
     .card-desc {
       font-size: 13px;
+      margin-bottom: 15px;
     }
     
-    .zui-card__body {
-      padding: 15px 20px 25px;
+    .card-divider {
+      margin-bottom: 15px;
     }
     
     .zui-card__actions {