From 1c9a6f108e07e746f907813334848383552ea570 Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Wed, 15 Oct 2025 00:04:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A7=E5=93=81=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ModelSelect/index.vue      |  11 +-
 .../src/components/ProductPackage/index.vue   | 727 ++++++------------
 2 files changed, 259 insertions(+), 479 deletions(-)

diff --git a/Yi.Ai.Vue3/src/components/ModelSelect/index.vue b/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
index 5e9af5a7..5aae417c 100644
--- a/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
+++ b/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
@@ -141,14 +141,14 @@ function getWrapperClass(item: GetSessionListVO) {
     >
       <template #trigger>
         <div
-          class="flex items-center gap-1 p-2 rounded-md border border-blue-500 text-blue-600 cursor-pointer select-none"
+          class="flex items-center gap-1 p-2 rounded-md border border-blue-500 text-blue-600 cursor-pointer select-none model-select-box   "
         >
           <SvgIcon name="models" size="12" />
           <span class="text-sm font-medium">{{ currentModelName }}</span>
         </div>
       </template>
 
-      <div class="flex flex-col gap-1 max-h-52 overflow-y-auto p-1">
+      <div class="flex flex-col gap-1 max-h-100 overflow-y-auto p-1">
         <div
           v-for="item in popoverList"
           :key="item.id"
@@ -172,6 +172,13 @@ function getWrapperClass(item: GetSessionListVO) {
 </template>
 
 <style scoped>
+.model-select-box {
+  color: var(--el-color-primary, #409eff);
+  background: var(--el-color-primary-light-9, rgb(235.9 245.3 255));
+  border: 1px solid var(--el-color-primary, #409eff);
+  border-radius: 10px;
+}
+
 /* 彩色流光动画 */
 @keyframes gradientFlow {
   0%, 100% { background-position: 0 50%; }
diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue b/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
index b3e77eff..21ad1ddf 100644
--- a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
+++ b/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
@@ -17,9 +17,9 @@ interface PackageItem {
   id: number;
   name: string;
   desc: string;
-  price: number; // 用户实际支付价格
+  price: number; // 用户实际支付价格（最终专属价）
   originalPrice?: number; // 原价（官方价格）
-  perMonth?: number; // 会员：月均价；Token：我们的标准价格
+  perMonth?: number; // 会员：月均价；Token：模型官方价格
   tag: string;
   discount: string; // 累计优惠描述，如"根据累加充值已优惠 ¥47.00"
   goodsName: string; // 用于创建订单
@@ -53,11 +53,10 @@ function checkMobile() {
   isMobile.value = window.innerWidth < 768;
 }
 
-// 获取商品列表
+// 获取商品列表（逻辑不变，仅保留字段映射正确性）
 async function fetchGoodsList() {
   isLoadingGoods.value = true;
   try {
-    // 并行获取会员和Token商品列表
     const [vipRes, tokenRes] = await Promise.all([
       getGoodsList(GoodsCategoryType.Vip),
       getGoodsList(GoodsCategoryType.PremiumPackage),
@@ -73,16 +72,11 @@ async function fetchGoodsList() {
       perMonth: item.referencePrice,
       tag: item.remark || '',
       discount: item.discountDescription || '',
-      goodsName: item.goodsName, // 保存原始商品名称用于创建订单
+      goodsName: item.goodsName,
     }));
 
-    // 转换Token商品数据
-    // 字段含义：
-    // referencePrice - 模型官方价格（最贵）
-    // originalPrice - 意心平台优惠价（推荐）
-    // goodsPrice - 用户专属价格（基于累计充值的额外优惠）
+    // 转换Token商品数据（字段含义保持原定义）
     packagesData.value.token = (tokenRes.data || []).map((item: GoodsItem, index: number) => {
-      // 解析优惠金额：从"根据累加充值已优惠 ¥47.00"中提取数字
       let discountAmount = 0;
       if (item.discountDescription) {
         const match = item.discountDescription.match(/¥([\d.]+)/);
@@ -96,12 +90,12 @@ async function fetchGoodsList() {
         name: item.goodsName,
         desc: '',
         price: item.goodsPrice, // 用户专属价格（最终支付价格）
-        originalPrice: item.originalPrice, // 意心平台优惠价
+        originalPrice: item.originalPrice, // 意心平台优惠价（主价格）
         perMonth: item.referencePrice, // 模型官方价格
         tag: item.remark || '',
         discount: item.discountDescription || '',
         goodsName: item.goodsName,
-        discountAmount, // 额外优惠金额
+        discountAmount,
       };
     });
 
@@ -125,7 +119,7 @@ async function fetchGoodsList() {
 onMounted(() => {
   checkMobile();
   window.addEventListener('resize', checkMobile);
-  fetchGoodsList(); // 获取商品列表
+  fetchGoodsList();
 });
 
 onBeforeUnmount(() => {
@@ -133,27 +127,13 @@ onBeforeUnmount(() => {
   cleanupPayment();
 });
 
+// 支付相关逻辑（无修改）
 function cleanupPayment() {
   if (pollInterval.value) {
     clearInterval(pollInterval.value);
     pollInterval.value = null;
   }
-  // if (paymentWindow.value && !paymentWindow.value.closed) {
-  //   paymentWindow.value.close();
-  // }
-  // 清除轮询定时器
-  if (pollInterval.value) {
-    clearInterval(pollInterval.value);
-    pollInterval.value = null;
-  }
-
-  // 关闭支付窗口（如果还在）
-  // if (paymentWindow.value && !paymentWindow.value.closed) {
-  //   paymentWindow.value.close();
-  //   paymentWindow.value = null;
-  // }
-
-  retryCount = 0; // 重置重试计数器
+  retryCount = 0;
 }
 
 const tabs = [
@@ -173,7 +153,6 @@ const benefitsData = {
     { name: '支持安卓/ios/web/客户端使用', value: '' },
     { name: '支持售后群服务，一起畅玩前沿Ai', value: '' },
   ],
-
   token: [
     { name: '超值优惠', value: '相比官方价格，我们的价格更实惠' },
     { name: '灵活计费', value: '按调用量扣费，用多少付多少' },
@@ -182,6 +161,23 @@ const benefitsData = {
     { name: '永久有效', value: 'Token永不过期，随时使用' },
   ],
 };
+const benefitsData2 = {
+  qy: [
+    { name: '需先成为意心会员后方可购买使用', value: '' },
+    { name: '意心会员过期后，尊享Token包会临时冻结', value: '' },
+    { name: '可重复购买，将自动累积Token，在个人中心查看', value: '' },
+    { name: 'Token长期有效，无限流限制', value: '' },
+    { name: '几乎是全网最低价，让人人用的起Agent', value: '' },
+    { name: '一手直连！非跑路！非套壳！非黑产！（行业普遍现象）', value: '' },
+    { name: '橙子老哥担保，拒绝套路、拒绝跑路，可进行售后群', value: '' },
+  ],
+  yt: [
+    { name: '可全站解锁claude4.5地表编程最强模型', value: '' },
+    { name: '可直接接入claude code地表编程最强模Agent工具', value: '' },
+    { name: '可暴力使用claude4.5，无黑名单限流机制', value: '' },
+    { name: '可使用用claude接口/openai接口格式，接入claude4.5', value: '' },
+  ],
+};
 
 const fullBenefitsData = {
   member: [
@@ -208,7 +204,6 @@ function selectPackage(pkg: any) {
   selectPackageObject.value = pkg;
 }
 
-// 监听tab切换，自动选中当前tab的第一个产品
 watch(activeTab, () => {
   const packages = packagesData.value[activeTab.value as 'member' | 'token'];
   if (packages.length > 0) {
@@ -232,15 +227,12 @@ async function pay() {
   isLoading.value = true;
   try {
     const returnUrl = `${window.location.origin}/pay-result`;
-
     const params = {
-      goodsName: selectPackageObject.value.goodsName, // 使用商品名称
+      goodsName: selectPackageObject.value.goodsName,
       ReturnUrl: returnUrl,
     };
 
     const response = await createOrder(params);
-    console.log('订单创建成功:', response);
-
     if (response.data.paymentPageHtml) {
       handlePaymentPage(response.data.paymentPageHtml, response.data.orderId, response.data.outTradeNo);
     }
@@ -256,67 +248,46 @@ async function pay() {
     isLoading.value = false;
   }
 }
-function handlePaymentPage(html: string, orderId: string, outTradeNo: string) {
-  // 关闭当前弹窗（如果有）
-  close();
 
-  // 创建支付窗口
+function handlePaymentPage(html: string, orderId: string, outTradeNo: string) {
+  close();
   paymentWindow.value = window.open('', '_blank');
   if (!paymentWindow.value) {
     ElMessage.error('无法打开支付窗口，请检查浏览器弹窗设置或允许弹窗');
     return;
   }
 
-  // 写入支付页面HTML并自动提交
   paymentWindow.value.document.open();
   paymentWindow.value.document.write(html);
-  // paymentWindow.value.document.close();
-
-  // 3秒后开始轮询支付状态（给支付页面加载时间）
   setTimeout(() => {
     startPolling(outTradeNo);
   }, 3000);
 }
 
 function startPolling(outTradeNo: string) {
-  // 先清理之前的轮询任务
   cleanupPayment();
-
-  // 立即检查一次状态（避免等待第一个间隔）
   checkPaymentStatus(outTradeNo);
-
-  // 设置轮询任务（每3秒检查一次）
   pollInterval.value = setInterval(() => {
     checkPaymentStatus(outTradeNo);
   }, 3000);
 }
 
-let retryCount = 0; // 错误重试计数器
+let retryCount = 0;
 async function checkPaymentStatus(outTradeNo: string) {
   try {
     const result = await getOrderStatus(outTradeNo);
-    console.log('订单状态检查结果:', result);
-
     if (result.data.tradeStatus === 'TRADE_SUCCESS') {
-      // 支付成功处理
       cleanupPayment();
       ElMessage.success('支付成功！');
-      close(); // 关闭弹窗
-
-      // 可以在这里添加跳转到成功页面的逻辑
-      // window.location.href = '/pay/success?order=' + outTradeNo;
+      close();
     }
-    else if (result.data.tradeStatus === 'TRADE_CLOSED'
-      || result.data.tradeStatus === 'TRADE_FAILED') {
-      // 支付失败处理
+    else if (result.data.tradeStatus === 'TRADE_CLOSED' || result.data.tradeStatus === 'TRADE_FAILED') {
       cleanupPayment();
       ElMessage.warning(`支付失败: ${result.data.tradeStatusDesc || '未知原因'}`);
     }
-    // 其他状态（如待支付）不做处理，继续轮询
   }
   catch (error) {
     console.error('检查订单状态失败:', error);
-    // 网络错误等情况，可以重试几次后停止
     if (retryCount > 3) {
       cleanupPayment();
       ElMessage.error('检查支付状态失败，请手动刷新页面确认');
@@ -324,6 +295,7 @@ async function checkPaymentStatus(outTradeNo: string) {
     retryCount++;
   }
 }
+
 const router = useRouter();
 
 function toggleDetails() {
@@ -342,12 +314,11 @@ function onClose() {
 
 <template>
   <el-dialog
-    v-model="visible" :width="isMobile ? '90%' : '980px'" :fullscreen="isMobile && showDetails"
+    v-model="visible" :width="isMobile ? '90%' : '1000px'" :fullscreen="isMobile && showDetails"
     :show-close="false" destroy-on-close class="product-package-dialog" @close="onClose"
   >
-    <!-- 详情页 -->
+    <!-- 详情页（无修改） -->
     <div v-if="showDetails" class="details-view">
-      <!-- 顶部标题和返回按钮 -->
       <div class="flex items-center mb-6 sticky top-0 bg-white z-10 pt-2 pb-4">
         <el-button text circle size="small" class="mr-2" @click="toggleDetails">
           ←
@@ -356,9 +327,7 @@ function onClose() {
           YiXinAI会员详细权益
         </div>
       </div>
-
       <ProductPage />
-      <!-- 权益详情表格 -->
       <div v-if="false" class="benefits-table">
         <div class="table-header">
           <div class="table-cell">
@@ -371,7 +340,6 @@ function onClose() {
             AI大会员
           </div>
         </div>
-
         <div v-for="(item, index) in fullBenefitsData.member" :key="index" class="table-row">
           <div class="table-cell font-medium">
             {{ item.category }}
@@ -391,7 +359,7 @@ function onClose() {
 
     <!-- 主页面 -->
     <div v-else>
-      <!-- 顶部标题和关闭按钮 -->
+      <!-- 顶部标题和关闭按钮（无修改） -->
       <div class="flex justify-between items-center mb-4">
         <div class="text-xl font-bold">
           购买套餐
@@ -401,13 +369,13 @@ function onClose() {
         </el-button>
       </div>
 
-      <!-- Tab 切换 -->
+      <!-- Tab 切换（无修改） -->
       <div class="flex border-b mb-6 overflow-x-auto">
         <div
           v-for="tab in tabs" :key="tab.key"
-          class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap" :class="activeTab === tab.key
-            ? 'border-orange-500 text-orange-500 font-semibold'
-            : 'border-transparent text-gray-500 hover:text-orange-500'" @click="activeTab = tab.key"
+          class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap"
+          :class="activeTab === tab.key ? 'border-orange-500 text-orange-500 font-semibold' : 'border-transparent text-gray-500 hover:text-orange-500'"
+          @click="activeTab = tab.key"
         >
           {{ tab.label }}
         </div>
@@ -415,7 +383,7 @@ function onClose() {
 
       <!-- 移动端布局 -->
       <div v-if="isMobile" class="mobile-layout">
-        <!-- 商品加载状态 -->
+        <!-- 商品加载状态（无修改） -->
         <div v-if="isLoadingGoods" class="loading-container">
           <el-icon class="is-loading" :size="40">
             <Loading />
@@ -423,13 +391,13 @@ function onClose() {
           <p>加载商品中...</p>
         </div>
 
-        <!-- 套餐卡片列表 -->
+        <!-- 套餐卡片列表（核心修改：Token套餐价格展示） -->
         <div v-else-if="currentPackages.length > 0" class="package-list">
           <div
             v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
             :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
           >
-            <!-- 标签 -->
+            <!-- 标签（无修改） -->
             <div v-if="pkg.discount" class="discount-tag">
               {{ pkg.discount }}
             </div>
@@ -437,7 +405,7 @@ function onClose() {
               {{ pkg.tag }}
             </div>
 
-            <!-- 套餐信息 -->
+            <!-- 套餐信息（无修改） -->
             <div class="package-info">
               <div class="package-name">
                 {{ pkg.name }}
@@ -447,34 +415,31 @@ function onClose() {
               </div>
             </div>
 
-            <!-- 价格 -->
+            <!-- 价格区域（核心调整：Token套餐突出平台优惠价） -->
             <div class="package-price">
-              <!-- Token套餐：四层价格展示 -->
+              <!-- Token套餐：尊享包价格展示优化 -->
               <template v-if="activeTab === 'token'">
-                <!-- 第一层：Claude官方参考价 -->
+                <!-- 1. 官方参考价（弱化展示） -->
                 <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
                   <div class="price-label-row">
-                    <span class="label-text">❌ Claude官方参考价</span>
+                    <span class="label-text">❌ 官方参考价</span>
                   </div>
                   <div class="official-price">
                     ¥{{ pkg.perMonth.toFixed(2) }}
                   </div>
                 </div>
 
-                <!-- 第二层：意心平台优惠价 -->
+                <!-- 2. 平台优惠价（主价格：放大字号+加重颜色） -->
                 <div v-if="pkg.originalPrice" class="platform-price-section">
                   <div class="price-label-row">
-                    <span class="label-text">⭐ 意心平台优惠价</span>
-                    <span v-if="pkg.perMonth && pkg.perMonth > pkg.originalPrice" class="save-tag">
-                      省¥{{ (pkg.perMonth - pkg.originalPrice).toFixed(2) }}
-                    </span>
+                    <span class="label-text main-label">⭐ 意心平台优惠价</span>
                   </div>
-                  <div class="platform-price">
+                  <div class="platform-price main-price">
                     ¥{{ pkg.originalPrice.toFixed(2) }}
                   </div>
                 </div>
 
-                <!-- 第三层：个人尊享优惠券 -->
+                <!-- 3. 个人优惠券（辅助信息） -->
                 <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
                   <div class="coupon-header">
                     <span class="coupon-icon">🎁</span>
@@ -485,39 +450,33 @@ function onClose() {
                   </div>
                 </div>
 
-                <!-- 第四层：您的最终专属价格 -->
-                <div class="final-price-section">
+                <!-- 4. 最终专属价格（弱化：缩小字号+浅色调，非核心视觉） -->
+                <div v-if="false" class="final-price-section">
                   <div class="price-label-row">
-                    <span class="label-text special">👑 您的最终专属价格</span>
+                    <span class="label-text light-label">👑 您的最终专属价（支付价）</span>
                   </div>
-                  <div class="final-price-value">
+                  <div class="final-price-value light-price">
                     <span class="price-symbol">¥</span>
                     <span class="price-number">{{ pkg.price.toFixed(2) }}</span>
                   </div>
-                  <div v-if="pkg.discount" class="discount-desc">
-                    {{ pkg.discount }}
-                  </div>
                 </div>
 
-                <!-- 总优惠展示 -->
+                <!-- 5. 总优惠提示（无修改） -->
                 <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
                   <span class="bar-icon">🎉</span>
                   <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
                 </div>
               </template>
 
-              <!-- 会员套餐：原有展示逻辑 -->
+              <!-- 会员套餐：保持原有逻辑（无修改） -->
               <template v-else>
                 <div class="current-price-section">
                   <span class="price-label">会员价</span>
                   <div class="price-row">
                     <span class="price">¥{{ pkg.price }}</span>
-                    <span v-if="pkg.perMonth" class="per-month">
-                      仅¥{{ pkg.perMonth }}/月
-                    </span>
+                    <span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
                   </div>
                 </div>
-
                 <div v-if="pkg.discount" class="discount-info">
                   <el-icon class="discount-icon">
                     <CircleCheck />
@@ -529,7 +488,7 @@ function onClose() {
           </div>
         </div>
 
-        <!-- Token套餐的累计充值优惠提示 -->
+        <!-- 其他辅助信息（无修改） -->
         <div v-if="activeTab === 'token'" class="recharge-tip-card">
           <div class="tip-icon">
             💝
@@ -551,23 +510,17 @@ function onClose() {
               客服微信号：chengzilaoge520 或扫描右侧二维码
             </p>
           </div>
-          <div>
-            <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
-          </div>
+          <div><img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt=""></div>
         </div>
-        <!-- 权益预览 -->
+
+        <!-- 权益预览（无修改） -->
         <div class="benefits-preview max-h-200px overflow-y-auto">
           <div class="section-title">
             专属权益
           </div>
           <ul class="benefits-list">
             <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item">
-              <span class="dot">
-                <el-icon>
-                  <CircleCheck />
-                </el-icon>
-              </span>
-
+              <span class="dot"><el-icon><CircleCheck /></el-icon></span>
               <span>
                 <span class="benefit-name">{{ b.name }}</span>
                 <span v-if="b.value">：{{ b.value }}</span>
@@ -577,7 +530,7 @@ function onClose() {
           <SupportModelList />
         </div>
 
-        <!-- 支付区域 -->
+        <!-- 支付区域（无修改） -->
         <div class="payment-area">
           <div v-if="false" class="agreement-text">
             登录和注册都代表同意YiXinAI的会员协议
@@ -605,7 +558,6 @@ function onClose() {
               立即登录/注册
             </el-button>
           </div>
-
           <div class="note-text">
             可叠加购买次数，过期时间以最后订单为准。<br>
             最终解释权归YiXinAI所有。
@@ -613,9 +565,9 @@ function onClose() {
         </div>
       </div>
 
-      <!-- 桌面端布局 -->
+      <!-- 桌面端布局（与移动端逻辑一致，仅适配样式） -->
       <div v-else class="flex gap-6 desktop-layout">
-        <!-- 商品加载状态 -->
+        <!-- 商品加载状态（无修改） -->
         <div v-if="isLoadingGoods" class="loading-container-desktop">
           <el-icon class="is-loading" :size="50">
             <Loading />
@@ -623,23 +575,19 @@ function onClose() {
           <p>加载商品中...</p>
         </div>
 
-        <!-- 左栏 套餐卡片 + 支付 -->
+        <!-- 左栏 套餐卡片 + 支付（核心修改：Token套餐价格展示） -->
         <div v-else class="w-[60%] flex flex-col justify-between">
-          <!-- 套餐卡片列表 -->
           <div class="flex flex-wrap gap-4">
             <div
               v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
               :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
             >
-              <!-- 标签 -->
-              <!--              <div v-if="pkg.discount" class="discount-tag"> -->
-              <!--                {{ pkg.discount }} -->
-              <!--              </div> -->
+              <!-- 标签（无修改） -->
               <div v-if="pkg.tag" class="tag">
                 {{ pkg.tag }}
               </div>
 
-              <!-- 套餐信息 -->
+              <!-- 套餐信息（无修改） -->
               <div class="package-info">
                 <div class="package-name">
                   {{ pkg.name }}
@@ -649,33 +597,31 @@ function onClose() {
                 </div>
               </div>
 
-              <!-- 价格 -->
+              <!-- 价格区域（桌面端同移动端逻辑：突出平台优惠价） -->
               <div class="package-price">
-                <!-- Token套餐：四层价格展示 -->
                 <template v-if="activeTab === 'token'">
-                  <!-- 第一层：Claude官方参考价 -->
+                  <!-- 1. 官方参考价（弱化） -->
                   <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
                     <div class="price-label-row">
-                      <span class="label-text">❌ 官方参考价</span>
-                    </div>
-                    <div class="official-price">
-                      ¥{{ pkg.perMonth.toFixed(2) }}
+                      <span class="label-text">❌ 官方参考价：</span>
+                      <span class="label-text-number">¥{{ pkg.perMonth.toFixed(2) }} </span>
                     </div>
+                    <!--                    <div class="official-price"> -->
+                    <!--                      ¥{{ pkg.perMonth.toFixed(2) }} -->
+                    <!--                    </div> -->
                   </div>
-                  <!-- 第二层：意心平台优惠价 -->
+
+                  <!-- 2. 平台优惠价（主价格：放大+加重） -->
                   <div v-if="pkg.originalPrice" class="platform-price-section">
                     <div class="price-label-row">
-                      <span class="label-text">⭐ 意心平台优惠价</span>
-                      <span v-if="pkg.perMonth && pkg.perMonth > pkg.originalPrice" class="save-tag">
-                        省¥{{ (pkg.perMonth - pkg.originalPrice).toFixed(2) }}
-                      </span>
+                      <span class="label-text main-label">⭐ 意心平台优惠价</span>
                     </div>
-                    <div class="platform-price">
+                    <div class="platform-price main-price">
                       ¥{{ pkg.originalPrice.toFixed(2) }}
                     </div>
                   </div>
 
-                  <!-- 第三层：个人尊享优惠券 -->
+                  <!-- 3. 个人优惠券（辅助） -->
                   <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
                     <div class="coupon-header">
                       <span class="coupon-icon">🎁</span>
@@ -686,38 +632,33 @@ function onClose() {
                     </div>
                   </div>
 
-                  <!-- 第四层：您的最终专属价格 -->
-                  <div class="final-price-section">
+                  <!-- 4. 最终专属价（弱化） -->
+                  <div v-if="false" class="final-price-section">
                     <div class="price-label-row">
-                      <span class="label-text special">👑 您的最终专属价格</span>
+                      <span class="label-text light-label">👑 您的最终专属价（支付价）</span>
                     </div>
-                    <div class="final-price-value">
+                    <div class="final-price-value light-price">
                       <span class="price-symbol">¥</span>
                       <span class="price-number">{{ pkg.price.toFixed(2) }}</span>
                     </div>
-                    <div v-if="pkg.discount" class="discount-desc">
-                      {{ pkg.discount }}
-                    </div>
                   </div>
 
-                  <!-- 总优惠展示 -->
-                  <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
-                    <span class="bar-icon">🎉</span>
-                    <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
-                  </div>
+                  <!-- 5. 总优惠提示 -->
+                  <!--                  <div  v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar"> -->
+                  <!--                    <span class="bar-icon">🎉</span> -->
+                  <!--                    <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span> -->
+                  <!--                  </div> -->
                 </template>
-                <!-- 会员套餐：原有展示逻辑 -->
+
+                <!-- 会员套餐（无修改） -->
                 <template v-else>
                   <div class="current-price-section">
                     <span class="price-label">会员价</span>
                     <div class="price-row">
                       <span class="price">¥{{ pkg.price }}</span>
-                      <span v-if="pkg.perMonth" class="per-month">
-                        仅¥{{ pkg.perMonth }}/月
-                      </span>
+                      <span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
                     </div>
                   </div>
-
                   <div v-if="pkg.discount" class="discount-info">
                     <el-icon class="discount-icon">
                       <CircleCheck />
@@ -729,7 +670,7 @@ function onClose() {
             </div>
           </div>
 
-          <!-- Token套餐的累计充值优惠提示 -->
+          <!-- 其他辅助信息（无修改） -->
           <div v-if="activeTab === 'token'" class="recharge-tip-card">
             <div class="tip-icon">
               💝
@@ -739,7 +680,7 @@ function onClose() {
                 累计充值优惠
               </div>
               <div class="tip-desc">
-                充值越多，优惠越多，长期使用更划算
+                {{ selectPackageObject?.discount }}
               </div>
             </div>
           </div>
@@ -751,11 +692,10 @@ function onClose() {
                 客服微信号：chengzilaoge520 或扫描右侧二维码
               </p>
             </div>
-            <div>
-              <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
-            </div>
+            <div><img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt=""></div>
           </div>
-          <!-- 支付按钮 -->
+
+          <!-- 支付按钮（无修改） -->
           <div class="payment-section">
             <div v-if="false" class="agreement-text">
               登录和注册都代表同意YiXinAI的会员协议
@@ -785,7 +725,6 @@ function onClose() {
                 </el-button>
               </div>
             </div>
-
             <div class="note-text">
               可叠加购买次数，过期时间以最后订单为准。<br>
               最终解释权归YiXinAI所有。
@@ -793,62 +732,55 @@ function onClose() {
           </div>
         </div>
 
-        <!-- 右栏 套餐权益 + 详情 -->
+        <!-- 右栏 套餐权益（无修改） -->
         <div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
           <div>
-            <div class="section-title">
-              会员权益
+            <div v-if="activeTab === 'member'">
+              <div class="section-title">
+                会员权益
+              </div>
+              <ul class="benefits-list ">
+                <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
+                  <span class="dot"><el-icon><CircleCheck /></el-icon></span>
+                  <span>
+                    <span class="benefit-name">{{ b.name }}</span>
+                    <span v-if="b.value">：{{ b.value }}</span>
+                  </span>
+                </li>
+              </ul>
+            </div>
+            <div v-if="activeTab === 'token'">
+              <div class="section-title">
+                尊享Token包权益
+              </div>
+              <ul class="benefits-list ">
+                <li v-for="(b, index) in benefitsData2.qy" :key="index" class="benefit-item ">
+                  <span class="dot"><el-icon><CircleCheck /></el-icon></span>
+                  <span>
+                    <span class="benefit-name">{{ b.name }}</span>
+                    <span v-if="b.value">：{{ b.value }}</span>
+                  </span>
+                </li>
+              </ul>
+              <br>
+              <div class="section-title">
+                尊享Token包用途
+              </div>
+              <ul class="benefits-list ">
+                <li v-for="(b, index) in benefitsData2.yt" :key="index" class="benefit-item ">
+                  <span class="dot"><el-icon><CircleCheck /></el-icon></span>
+                  <span>
+                    <span class="benefit-name">{{ b.name }}</span>
+                    <span v-if="b.value">：{{ b.value }}</span>
+                  </span>
+                </li>
+              </ul>
             </div>
-            <ul class="benefits-list ">
-              <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
-                <span class="dot">
-                  <el-icon>
-                    <CircleCheck />
-                  </el-icon>
-                </span>
-                <span>
-                  <span class="benefit-name">{{ b.name }}</span>
-                  <span v-if="b.value">：{{ b.value }}</span>
-                </span>
-              </li>
-            </ul>
-
-            <!-- 额外描述 -->
             <div v-if="activeTab === 'member'" class="extra-description ">
               <SupportModelList />
-
-              <!--              <div class="description-card"> -->
-              <!--                <div class="title"> -->
-              <!--                  前沿模型AI对话 -->
-              <!--                </div> -->
-              <!--                <div class="subtext"> -->
-              <!--                  DP-RI深度思考、精准解答 -->
-              <!--                </div> -->
-              <!--                <div class="subtext"> -->
-              <!--                  AI写作、文档对话、AI思维导图等赋能职场 -->
-              <!--                </div> -->
-              <!--              </div> -->
-
-              <!--              <div class="description-card"> -->
-              <!--                <div class="title"> -->
-              <!--                  AI绘图与设计能力 -->
-              <!--                </div> -->
-              <!--                <div class="subtext"> -->
-              <!--                  视觉吸睛赋能 -->
-              <!--                </div> -->
-              <!--                <div class="subtext"> -->
-              <!--                  "AI+办公!"解锁300+工具箱会员权益 -->
-              <!--                </div> -->
-              <!--              </div> -->
             </div>
           </div>
-
-          <!-- 查看详情 -->
-          <div class="view-details">
-            <!--            <el-button text type="primary" @click="toggleDetails"> -->
-            <!--              查看详情 -->
-            <!--            </el-button> -->
-          </div>
+          <div class="view-details" />
         </div>
       </div>
     </div>
@@ -857,62 +789,32 @@ function onClose() {
 
 <style scoped lang="scss">
 .product-package-dialog {
-  .el-dialog__header {
-    display: none;
-  }
+  .el-dialog__header { display: none; }
 
+  /* 详情页样式（无修改） */
   .details-view {
-    height: 600px;
-    overflow-y: auto;
-    padding-right: 8px;
-
+    height: 600px; overflow-y: auto; padding-right: 8px;
     .benefits-table {
-      display: table;
-      width: 100%;
-      border-collapse: collapse;
-
-      .table-header,
-      .table-row {
-        display: table-row;
-      }
-
+      display: table; width: 100%; border-collapse: collapse;
+      .table-header, .table-row { display: table-row; }
       .table-cell {
-        display: table-cell;
-        padding: 12px 16px;
-        border-bottom: 1px solid #eee;
-        vertical-align: middle;
+        display: table-cell; padding: 12px 16px;
+        border-bottom: 1px solid #eee; vertical-align: middle;
       }
-
       .table-header {
-        font-weight: bold;
-        background-color: #f8f8f8;
-
-        .table-cell {
-          border-bottom: 2px solid #ddd;
-        }
+        font-weight: bold; background-color: #f8f8f8;
+        .table-cell { border-bottom: 2px solid #ddd; }
       }
     }
   }
 
-  /* 移动端样式 */
+  /* 移动端样式（核心新增：主价格/弱化价格样式） */
   .mobile-layout {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .package-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 12px;
-    }
-
+    display: flex; flex-direction: column; gap: 24px;
+    .package-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
     .package-card {
-      position: relative;
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      padding: 16px;
-      transition: all 0.3s;
-      cursor: pointer;
+      position: relative; border: 1px solid #e5e7eb; border-radius: 8px;
+      padding: 16px; transition: all 0.3s; cursor: pointer;
       &.selected {
         border: 3px solid #fde19d;
         background-image: url('@/assets/images/product_background.svg');
@@ -925,44 +827,32 @@ function onClose() {
 
         box-shadow: 0 4px 6px -1px #fff4e3;
       }
-
       .discount-tag {
-        position: absolute;
-        top: -6px;
-        left: 8px;
-        background-color: #ef4444;
-        color: white;
-        font-size: 12px;
-        padding: 2px 8px;
-        border-radius: 4px;
+        position: absolute; top: -6px; left: 8px;
+        background-color: #ef4444; color: white; font-size: 12px;
+        padding: 2px 8px; border-radius: 4px;
       }
-
       .tag {
-        position: absolute;
-        top: -6px;
-        right: 8px;
-        background-color: #f97316;
-        color: white;
-        font-size: 12px;
-        padding: 2px 8px;
-        border-radius: 4px;
+        position: absolute; top: -6px; right: 8px;
+        background-color: #f97316; color: white; font-size: 12px;
+        padding: 2px 8px; border-radius: 4px;
       }
-
       .package-info {
         margin-bottom: 12px;
 
         .package-name {
           font-size: 16px;
           font-weight: 600;
-        }
+      }
 
         .package-desc {
           font-size: 12px;
           color: #6b7280;
         }
-      }
+    }
 
-      .package-price {
+    /* Token套餐价格样式优化 */
+    .package-price {
         display: flex;
         flex-direction: column;
         gap: 8px;
@@ -1031,7 +921,7 @@ function onClose() {
             color: #3b82f6;
             flex-shrink: 0;
             font-size: 14px;
-          }
+      }
 
           .discount-text {
             flex: 1;
@@ -1048,10 +938,10 @@ function onClose() {
           color: #15803d;
           text-align: center;
           box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
-        }
+      }
 
         // Token套餐四层价格展示样式 - 移动端
-        .official-price-section {
+      .official-price-section {
           padding: 6px 10px;
           background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
           border-radius: 6px;
@@ -1068,7 +958,7 @@ function onClose() {
               color: #9f1239;
               font-weight: 600;
             }
-          }
+      }
 
           .official-price {
             font-size: 16px;
@@ -1079,12 +969,9 @@ function onClose() {
           }
         }
 
-        .platform-price-section {
-          padding: 8px 10px;
-          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-          border-radius: 6px;
-          border: 1px solid #fbbf24;
-
+      .platform-price-section {
+        padding: 8px 10px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border-radius: 6px; border: 1px solid #fbbf24;
           .price-label-row {
             display: flex;
             align-items: center;
@@ -1111,18 +998,12 @@ function onClose() {
             font-size: 18px;
             font-weight: 700;
             color: #b45309;
-          }
+      }
         }
 
-        .coupon-card {
-          padding: 8px 10px;
-          background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
-          border-radius: 6px;
-          border: 1px dashed #fb923c;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
+      .coupon-card {
+        padding: 8px 10px; background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+        border-radius: 6px; border: 1px dashed #fb923c; display: flex; align-items: center; justify-content: space-between;
           .coupon-header {
             display: flex;
             align-items: center;
@@ -1136,7 +1017,7 @@ function onClose() {
               font-size: 10px;
               color: #78350f;
               font-weight: 600;
-            }
+      }
           }
 
           .coupon-amount {
@@ -1181,7 +1062,7 @@ function onClose() {
           }
         }
 
-        .final-price-section {
+      .final-price-section {
           padding: 10px;
           background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
           border-radius: 8px;
@@ -1218,7 +1099,7 @@ function onClose() {
               font-weight: 700;
               color: #1e40af;
             }
-          }
+      }
 
           .discount-desc {
             font-size: 10px;
@@ -1228,17 +1109,10 @@ function onClose() {
           }
         }
 
-        .total-discount-bar {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 6px;
-          padding: 8px 10px;
-          background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-          border-radius: 8px;
-          border: 1px solid #34d399;
-          box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
-
+      .total-discount-bar {
+        display: flex; align-items: center; justify-content: center; gap: 6px;
+        padding: 8px 10px; background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+        border-radius: 8px; border: 1px solid #34d399; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
           .bar-icon {
             font-size: 14px;
           }
@@ -1254,15 +1128,9 @@ function onClose() {
 
     // 累计充值优惠提示卡片样式
     .recharge-tip-card {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
+      display: flex; align-items: center; gap: 12px; padding: 12px 16px;
       background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
-      border-radius: 8px;
-      border: 1px solid #fbbf24;
-      margin-top: 16px;
-
+      border-radius: 8px; border: 1px solid #fbbf24; margin-top: 16px;
       .tip-icon {
         font-size: 24px;
       }
@@ -1282,19 +1150,12 @@ function onClose() {
           color: #92400e;
           line-height: 1.4;
         }
-      }
+    }
     }
 
     .benefits-preview {
-      background-color: #f9fafb;
-      border-radius: 8px;
-      padding: 16px;
-
-      .section-title {
-        font-weight: 600;
-        margin-bottom: 12px;
-      }
-
+      background-color: #f9fafb; border-radius: 8px; padding: 16px;
+      .section-title { font-weight: 600; margin-bottom: 12px; }
       .benefits-list {
         list-style: none;
         padding: 0;
@@ -1306,6 +1167,7 @@ function onClose() {
           margin-bottom: 8px;
           font-size: 14px;
           color: #4b5563;
+          white-space: normal;
 
           .dot {
             color: #f97316;
@@ -1316,7 +1178,7 @@ function onClose() {
             font-weight: 500;
           }
         }
-      }
+    }
 
       .view-details-btn {
         width: 100%;
@@ -1326,15 +1188,8 @@ function onClose() {
     }
 
     .payment-area {
-      border-top: 1px solid #e5e7eb;
-      padding-top: 16px;
-
-      .agreement-text {
-        font-size: 12px;
-        color: #6b7280;
-        margin-bottom: 12px;
-      }
-
+      border-top: 1px solid #e5e7eb; padding-top: 16px;
+      .agreement-text { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
       .payment-info {
         display: flex;
         justify-content: space-between;
@@ -1346,8 +1201,8 @@ function onClose() {
             font-size: 18px;
             font-weight: 700;
             color: #f97316;
-          }
-        }
+    }
+  }
 
         .pay-button {
           width: 120px;
@@ -1364,19 +1219,10 @@ function onClose() {
   /* 桌面端样式 */
   .desktop-layout {
     .package-card {
-      cursor: pointer;
-      position: relative;
-      width: calc(50% - 0.5rem);
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      padding: 16px;
-      transition: all 0.3s;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      //background-color: rgba(255, 245, 238, 0.38);
+      cursor: pointer; position: relative; width: calc(50% - 0.5rem);
+      border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;
+      transition: all 0.3s; display: flex; flex-direction: column; justify-content: space-between;
       background: linear-gradient(90deg, #f1f2ebb5, white);
-
       &.selected {
         border: 3px solid #fde19d;
         background-image: url('@/assets/images/product_background.svg');
@@ -1402,31 +1248,26 @@ function onClose() {
       }
 
       .tag {
-        position: absolute;
-        top: -6px;
-        right: 8px;
-        background-color: #f97316;
-        color: white;
-        font-size: 12px;
-        padding: 2px 8px;
-        border-radius: 4px;
+        position: absolute; top: -6px; right: 8px;
+        background-color: #f97316; color: white; font-size: 12px;
+        padding: 2px 8px; border-radius: 4px;
       }
-
       .package-info {
         margin-bottom: 12px;
 
         .package-name {
           font-size: 16px;
           font-weight: 600;
-        }
+      }
 
         .package-desc {
           font-size: 12px;
           color: #6b7280;
         }
-      }
+    }
 
-      .package-price {
+    /* 桌面端Token套餐价格样式优化 */
+    .package-price {
         display: flex;
         flex-direction: column;
         gap: 10px;
@@ -1498,7 +1339,7 @@ function onClose() {
             color: #3b82f6;
             flex-shrink: 0;
             font-size: 16px;
-          }
+      }
 
           .discount-text {
             flex: 1;
@@ -1515,16 +1356,15 @@ function onClose() {
           color: #15803d;
           text-align: center;
           box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
-        }
+      }
 
         // Token套餐四层价格展示样式 - 桌面端
-        .official-price-section {
-          padding: 8px 12px;
-          background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
-          border-radius: 8px;
-          border: 1px solid #fecdd3;
+      .official-price-section {
+        padding: 4px 6px;
+        background: linear-gradient(15deg, rgb(155, 155, 155) 0%, #999a9d 100%);
+        border-radius: 8px; border: 1px solid rgba(156, 163, 175, 0.67);
 
-          .price-label-row {
+        .price-label-row {
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -1532,9 +1372,10 @@ function onClose() {
 
             .label-text {
               font-size: 12px;
-              color: #9f1239;
+              color: #ffffff;
               font-weight: 700;
-            }
+        }
+          .label-text-number { font-size: 14px; color: #ffffff; font-weight: 700;text-decoration: line-through; }
           }
 
           .official-price {
@@ -1543,15 +1384,12 @@ function onClose() {
             color: #be123c;
             text-decoration: line-through;
             text-decoration-thickness: 2px;
-          }
+      }
         }
 
-        .platform-price-section {
-          padding: 10px 12px;
-          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-          border-radius: 8px;
-          border: 1px solid #fbbf24;
-
+      .platform-price-section {
+        padding: 10px 12px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border-radius: 8px; border: 1px solid #fbbf24;
           .price-label-row {
             display: flex;
             align-items: center;
@@ -1578,42 +1416,21 @@ function onClose() {
             font-size: 22px;
             font-weight: 700;
             color: #b45309;
-          }
+      }
         }
 
-        .coupon-card {
-          padding: 10px 12px;
-          background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
-          border-radius: 8px;
-          border: 1px dashed #fb923c;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          .coupon-header {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-
-            .coupon-icon {
-              font-size: 16px;
-            }
-
-            .coupon-title {
-              font-size: 11px;
-              color: #78350f;
-              font-weight: 700;
-            }
-          }
-
+      .coupon-card {
+        padding: 10px 12px; background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+        border-radius: 8px; border: 1px dashed #fb923c; display: flex; align-items: center; justify-content: space-between;
+        .coupon-header { display: flex; align-items: center; gap: 6px; .coupon-icon { font-size: 16px; } .coupon-title { font-size: 11px; color: #78350f; font-weight: 700; } }
           .coupon-amount {
             font-size: 20px;
             font-weight: 700;
             color: #ea580c;
-          }
+      }
         }
 
-        .final-price-section {
+      .final-price-section {
           padding: 12px;
           background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
           border-radius: 10px;
@@ -1650,7 +1467,7 @@ function onClose() {
               font-weight: 700;
               color: #1e40af;
             }
-          }
+      }
 
           .discount-desc {
             font-size: 11px;
@@ -1660,17 +1477,10 @@ function onClose() {
           }
         }
 
-        .total-discount-bar {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          padding: 10px 12px;
-          background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-          border-radius: 10px;
-          border: 1px solid #34d399;
-          box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
-
+      .total-discount-bar {
+        display: flex; align-items: center; justify-content: center; gap: 8px;
+        padding: 10px 12px; background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+        border-radius: 10px; border: 1px solid #34d399; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
           .bar-icon {
             font-size: 16px;
           }
@@ -1686,15 +1496,9 @@ function onClose() {
 
     // 累计充值优惠提示卡片样式 - 桌面端
     .recharge-tip-card {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
+      display: flex; align-items: center; gap: 12px; padding: 12px 16px;
       background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
-      border-radius: 8px;
-      border: 1px solid #fbbf24;
-      margin-top: 16px;
-
+      border-radius: 8px; border: 1px solid #fbbf24; margin-top: 16px;
       .tip-icon {
         font-size: 28px;
       }
@@ -1714,20 +1518,12 @@ function onClose() {
           color: #92400e;
           line-height: 1.5;
         }
-      }
+    }
     }
 
     .payment-section {
-      border-top: 1px solid #e5e7eb;
-      padding-top: 16px;
-      margin-top: 16px;
-
-      .agreement-text {
-        font-size: 12px;
-        color: #6b7280;
-        margin-bottom: 12px;
-      }
-
+      border-top: 1px solid #e5e7eb; padding-top: 16px; margin-top: 16px;
+      .agreement-text { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
       .payment-action {
         display: flex;
         justify-content: space-between;
@@ -1739,7 +1535,7 @@ function onClose() {
             font-size: 18px;
             font-weight: 700;
             color: #f97316;
-          }
+    }
         }
       }
 
@@ -1750,11 +1546,7 @@ function onClose() {
     }
 
     .right-panel {
-      .section-title {
-        font-weight: 600;
-        margin-bottom: 12px;
-      }
-
+      .section-title { font-weight: 600; margin-bottom: 12px; }
       .benefits-list {
         list-style: none;
         padding: 0;
@@ -1766,6 +1558,7 @@ function onClose() {
           margin-bottom: 8px;
           font-size: 14px;
           color: #4b5563;
+          white-space: normal;
 
           .dot {
             color: #f97316;
@@ -1775,8 +1568,8 @@ function onClose() {
           .benefit-name {
             font-weight: 500;
           }
-        }
-      }
+    }
+  }
 
       .extra-description {
         margin-top: 24px;
@@ -1810,15 +1603,9 @@ function onClose() {
 
   /* 响应式调整 */
   @media (max-width: 768px) {
-    .el-dialog {
-      margin-top: 20px !important;
-      margin-bottom: 20px !important;
-    }
-
+    .el-dialog { margin-top: 20px !important; margin-bottom: 20px !important; }
     .details-view {
-      height: auto;
-      max-height: 80vh;
-
+      height: auto; max-height: 80vh;
       .benefits-table {
         display: block;
         overflow-x: auto;
@@ -1832,7 +1619,7 @@ function onClose() {
         }
       }
     }
-  }
+    }
 
   ::-webkit-scrollbar {
     width: 6px;
@@ -1845,32 +1632,18 @@ function onClose() {
 
   /* 加载状态样式 */
   .loading-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-    color: #909399;
-
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    padding: 60px 20px; color: #909399;
     p {
       margin-top: 16px;
       font-size: 14px;
-    }
+  }
   }
 
   .loading-container-desktop {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 400px;
-    color: #909399;
-
-    p {
-      margin-top: 20px;
-      font-size: 16px;
-    }
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    width: 100%; min-height: 400px; color: #909399;
+    p { margin-top: 20px; font-size: 16px; }
   }
 }
 </style>