From 4090046946adb828e19243d12c39a6a40e2bdb39 Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Sun, 11 Jan 2026 19:21:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A8=A1=E5=9E=8B=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ModelSelect/index.vue      |   2 +-
 .../components/ProductPackage/PackageTab.vue  | 236 +++++++++++++-----
 2 files changed, 178 insertions(+), 60 deletions(-)

diff --git a/Yi.Ai.Vue3/src/components/ModelSelect/index.vue b/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
index 54f4c54a..e5137632 100644
--- a/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
+++ b/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
@@ -234,7 +234,7 @@ function getWrapperClass(item: GetSessionListVO) {
     >
       <div class="model-list-container relative">
         <!-- 右上角前往模型库按钮 -->
-        <div class="absolute right-0 top-0 z-10">
+        <div class="absolute right-0 top-1 z-10">
           <el-button type="primary" link size="small" @click="goToModelLibrary">
             前往模型库
             <el-icon class="ml-1">
diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue b/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
index 3815eb7d..2bf3b79a 100644
--- a/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
+++ b/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CircleCheck, Loading } from '@element-plus/icons-vue';
+import { ArrowRight, Box, CircleCheck, Loading, Right, Service } from '@element-plus/icons-vue';
 import { computed } from 'vue';
 import { promotionConfig } from '@/config/constants.ts';
 import { useUserStore } from '@/stores';
@@ -173,44 +173,47 @@ const selectedPackage = computed(() => {
 
     <!-- 权益预览 -->
     <div class="benefits-preview">
-      <!-- Token包累计充值优惠提示 -->
-      <div v-if="packageType === 'token'" class="recharge-tip-card">
-        <div class="tip-icon">
-          💝
-        </div>
-        <div class="tip-content">
-          <div class="tip-title">
-            累计充值优惠
+      <div class="cards-stack">
+        <!-- Token包累计充值优惠提示 -->
+        <div v-if="packageType === 'token'" class="recharge-tip-card">
+          <div class="tip-icon">
+            💝
           </div>
-          <div class="tip-desc">
-            充值越多，优惠越多，长期使用更划算
+          <div class="tip-content">
+            <div class="tip-title">
+              累计充值优惠
+            </div>
+            <div class="tip-desc">
+              充值越多，优惠越多，长期使用更划算
+            </div>
           </div>
         </div>
-      </div>
-      <br>
 
-      <!-- 联系客服卡片 -->
-      <div class="contact-service-card">
-        <div style="flex: 1;">
-          <p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
-            {{ promotionConfig.rechargeDiscount }}
-          </p>
-          <p style="margin: 0 0 10px 0;color: #78350f;">
-            {{ promotionConfig.vipServiceTip }}
-          </p>
+        <!-- 联系客服卡片 -->
+        <div class="contact-service-card">
+          <div class="service-info">
+            <p class="discount-text">
+              {{ promotionConfig.rechargeDiscount }}
+            </p>
+            <p class="tip-text">
+              {{ promotionConfig.vipServiceTip }}
+            </p>
+          </div>
           <el-button
             type="success"
             size="small"
+            class="contact-btn"
             @click="contactService"
           >
-            <el-icon><i-ep-service /></el-icon>
+            <el-icon class="mr-1">
+              <Service />
+            </el-icon>
             联系客服
           </el-button>
         </div>
       </div>
-      <br>
 
-      <div class="section-title">
+      <div class="section-title mt-4">
         专属权益
       </div>
       <ul class="benefits-list">
@@ -224,12 +227,12 @@ const selectedPackage = computed(() => {
       </ul>
 
       <!-- 会员套餐显示模型库入口 -->
-      <div class="model-library-section">
+      <div v-if="packageType === 'member'" class="model-library-section">
         <el-divider />
         <div class="model-library-card">
           <div class="card-icon">
             <el-icon :size="32">
-              <i-ep-box />
+              <Box />
             </el-icon>
           </div>
           <div class="card-content">
@@ -247,7 +250,7 @@ const selectedPackage = computed(() => {
           >
             前往模型库
             <el-icon class="ml-1">
-              <i-ep-arrow-right />
+              <Right />
             </el-icon>
           </el-button>
         </div>
@@ -388,19 +391,23 @@ const selectedPackage = computed(() => {
 
       <!-- 联系客服卡片 -->
       <div class="contact-service-card">
-        <p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
-          {{ promotionConfig.rechargeDiscount }}
-        </p>
-        <p style="margin: 0 0 10px 0;color: #78350f;">
-          {{ promotionConfig.vipServiceTip }}
-        </p>
+        <div class="service-info">
+          <p class="discount-text">
+            {{ promotionConfig.rechargeDiscount }}
+          </p>
+          <p class="tip-text">
+            {{ promotionConfig.vipServiceTip }}
+          </p>
+        </div>
         <el-button
           type="success"
           size="small"
-          block
+          class="contact-btn"
           @click="contactService"
         >
-          <el-icon><i-ep-service /></el-icon>
+          <el-icon class="mr-1">
+            <Service />
+          </el-icon>
           联系客服
         </el-button>
       </div>
@@ -490,7 +497,7 @@ const selectedPackage = computed(() => {
             <div class="model-library-card-mobile">
               <div class="card-header-mobile">
                 <el-icon :size="24">
-                  <i-ep-box />
+                  <Box />
                 </el-icon>
                 <h4 class="card-title-mobile">
                   查看支持的模型
@@ -507,7 +514,7 @@ const selectedPackage = computed(() => {
               >
                 前往模型库
                 <el-icon class="ml-1">
-                  <i-ep-arrow-right />
+                  <ArrowRight />
                 </el-icon>
               </el-button>
             </div>
@@ -815,39 +822,98 @@ const selectedPackage = computed(() => {
     }
   }
 
+  /* 移动端卡片堆叠容器 */
+  .cards-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
   // 累计充值优惠提示卡片样式
   .recharge-tip-card {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
-    border-radius: 8px;
-    border: 1px solid #fbbf24;
-    margin-top: 0;
+    gap: 12px;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    border-radius: 12px;
+    border: 1px solid #fcd34d;
+    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
+    }
 
     .tip-icon {
-      font-size: 22px;
+      font-size: 24px;
+      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
     }
 
     .tip-content {
       flex: 1;
 
       .tip-title {
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 700;
-        color: #78350f;
-        margin-bottom: 3px;
+        color: #92400e;
+        margin-bottom: 4px;
       }
 
       .tip-desc {
-        font-size: 11px;
-        color: #92400e;
+        font-size: 12px;
+        color: #b45309;
         line-height: 1.4;
       }
     }
   }
 
+  /* 联系客服卡片优化 */
+  .contact-service-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+    border-radius: 12px;
+    border: 1px solid #6ee7b7;
+    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
+    margin-top: 0; /* 由父容器控制间距 */
+
+    .service-info {
+      flex: 1;
+      margin-right: 12px;
+
+      .discount-text {
+        color: #047857;
+        font-weight: 800;
+        font-size: 14px;
+        margin: 0 0 4px 0;
+      }
+
+      .tip-text {
+        margin: 0;
+        color: #065f46;
+        font-size: 12px;
+        line-height: 1.4;
+      }
+    }
+
+    .contact-btn {
+      flex-shrink: 0;
+      background-color: #10b981;
+      border-color: #10b981;
+      font-weight: 600;
+      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
+
+      &:hover {
+        background-color: #059669;
+        border-color: #059669;
+      }
+    }
+  }
+
   .benefits-preview {
     background-color: #f9fafb;
     border-radius: 8px;
@@ -1275,29 +1341,81 @@ const selectedPackage = computed(() => {
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
-    background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
-    border-radius: 8px;
-    border: 1px solid #fbbf24;
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    border-radius: 12px;
+    border: 1px solid #fcd34d;
+    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.1);
     margin-top: 16px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
+    }
 
     .tip-icon {
-      font-size: 28px;
+      font-size: 24px;
+      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
     }
 
     .tip-content {
       flex: 1;
 
       .tip-title {
-        font-size: 15px;
+        font-size: 14px;
         font-weight: 700;
-        color: #78350f;
+        color: #92400e;
         margin-bottom: 4px;
       }
 
       .tip-desc {
-        font-size: 13px;
-        color: #92400e;
-        line-height: 1.5;
+        font-size: 12px;
+        color: #b45309;
+        line-height: 1.4;
+      }
+    }
+  }
+
+  .contact-service-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+    border-radius: 12px;
+    border: 1px solid #6ee7b7;
+    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
+    margin-top: 12px;
+
+    .service-info {
+      flex: 1;
+      margin-right: 12px;
+
+      .discount-text {
+        color: #047857;
+        font-weight: 800;
+        font-size: 14px;
+        margin: 0 0 4px 0;
+      }
+
+      .tip-text {
+        margin: 0;
+        color: #065f46;
+        font-size: 12px;
+        line-height: 1.4;
+      }
+    }
+
+    .contact-btn {
+      flex-shrink: 0;
+      background-color: #10b981;
+      border-color: #10b981;
+      font-weight: 600;
+      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
+
+      &:hover {
+        background-color: #059669;
+        border-color: #059669;
       }
     }
   }