feat: 增加尊享token包产品

Yi.Ai.Vue3/src/components/ProductPackage/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { GoodsItem } from '@/api/pay';
 import { CircleCheck, Loading } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { createOrder, getOrderStatus } from '@/api';
-import { GoodsCategoryType, getGoodsList, type GoodsItem } from '@/api/pay';
+import { getGoodsList, GoodsCategoryType } from '@/api/pay';
 import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
 import ProductPage from '@/pages/products/index.vue';
 import { useUserStore } from '@/stores';
@@ -16,12 +17,13 @@ interface PackageItem {
   id: number;
   name: string;
   desc: string;
-  price: number;
+  price: number; // 用户实际支付价格
-  originalPrice?: number;
+  originalPrice?: number; // 原价（官方价格）
-  perMonth?: number;
+  perMonth?: number; // 会员：月均价；Token：我们的标准价格
   tag: string;
-  discount: string;
+  discount: string; // 累计优惠描述，如"根据累加充值已优惠 ¥47.00"
   goodsName: string; // 用于创建订单
+  discountAmount?: number; // 优惠金额（从discount字段解析）
 }
 
 // 商品数据（从接口获取）
@@ -75,17 +77,33 @@ async function fetchGoodsList() {
     }));
 
     // 转换Token商品数据
-    packagesData.value.token = (tokenRes.data || []).map((item: GoodsItem, index: number) => ({
+    // 字段含义：
+    // referencePrice - 模型官方价格（最贵）
+    // originalPrice - 意心平台优惠价（推荐）
+    // goodsPrice - 用户专属价格（基于累计充值的额外优惠）
+    packagesData.value.token = (tokenRes.data || []).map((item: GoodsItem, index: number) => {
+      // 解析优惠金额：从"根据累加充值已优惠 ¥47.00"中提取数字
+      let discountAmount = 0;
+      if (item.discountDescription) {
+        const match = item.discountDescription.match(/¥([\d.]+)/);
+        if (match) {
+          discountAmount = Number.parseFloat(match[1]);
+        }
+      }
+
+      return {
         id: index + 100, // 避免ID冲突
         name: item.goodsName,
         desc: '',
-      price: item.goodsPrice,
+        price: item.goodsPrice, // 用户专属价格（最终支付价格）
-      originalPrice: item.originalPrice !== item.goodsPrice ? item.originalPrice : undefined,
+        originalPrice: item.originalPrice !== item.goodsPrice ? item.originalPrice : undefined, // 意心平台优惠价
-      perMonth: item.referencePrice,
+        perMonth: item.referencePrice, // 模型官方价格
         tag: item.remark || '',
         discount: item.discountDescription || '',
         goodsName: item.goodsName,
-    }));
+        discountAmount, // 额外优惠金额
+      };
+    });
 
     // 设置默认选中第一个会员套餐
     if (packagesData.value.member.length > 0) {
@@ -140,7 +158,7 @@ function cleanupPayment() {
 
 const tabs = [
   { key: 'member', label: '会员套餐' },
-  { key: 'token', label: '尊享服务' },
+  { key: 'token', label: '尊享Token包' },
 ];
 
 const benefitsData = {
@@ -157,9 +175,11 @@ const benefitsData = {
   ],
 
   token: [
+    { name: '超值优惠', value: '相比官方价格，我们的价格更实惠' },
+    { name: '灵活计费', value: '按调用量扣费，用多少付多少' },
+    { name: '支持多模型', value: '适配多种主流AI模型' },
     { name: 'Token用途', value: '用于调用API或模型生成内容' },
-    { name: '灵活计费', value: '按调用量扣费，更加自由' },
+    { name: '永久有效', value: 'Token永不过期，随时使用' },
-    { name: '支持多模型', value: '适配多种模型调用需求' },
   ],
 };
 
@@ -188,6 +208,17 @@ function selectPackage(pkg: any) {
   selectPackageObject.value = pkg;
 }
 
+// 监听tab切换，自动选中当前tab的第一个产品
+watch(activeTab, () => {
+  const packages = packagesData.value[activeTab.value as 'member' | 'token'];
+  if (packages.length > 0) {
+    const firstPackage = packages[0];
+    selectedId.value = firstPackage.id;
+    selectedPrice.value = firstPackage.price;
+    selectPackageObject.value = firstPackage;
+  }
+});
+
 function handleClickLogin() {
   userStore.openLoginDialog();
 }
@@ -418,36 +449,101 @@ function onClose() {
 
             <!-- 价格 -->
             <div class="package-price">
-              <!-- 官方参考价（仅Token套餐显示） -->
+              <!-- Token套餐：四层价格展示 -->
-              <div v-if="activeTab === 'token' && pkg.perMonth" class="reference-price-section">
+              <template v-if="activeTab === 'token'">
-                <div class="reference-label">官方参考价</div>
+                <!-- 第一层：Claude官方参考价 -->
-                <div class="reference-value">¥{{ pkg.perMonth }}</div>
+                <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>
+                  </div>
+                  <div class="official-price">
+                    ¥{{ pkg.perMonth.toFixed(2) }}
+                  </div>
                 </div>
 
-              <!-- 当前价格 -->
+                <!-- 第二层：意心平台优惠价 -->
+                <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>
+                  </div>
+                  <div class="platform-price">
+                    ¥{{ pkg.originalPrice.toFixed(2) }}
+                  </div>
+                </div>
+
+                <!-- 第三层：个人尊享优惠券 -->
+                <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
+                  <div class="coupon-header">
+                    <span class="coupon-icon">🎁</span>
+                    <span class="coupon-title">您的个人尊享优惠券</span>
+                  </div>
+                  <div class="coupon-amount">
+                    -¥{{ pkg.discountAmount.toFixed(2) }}
+                  </div>
+                </div>
+
+                <!-- 第四层：您的最终专属价格 -->
+                <div class="final-price-section">
+                  <div class="price-label-row">
+                    <span class="label-text special">👑 您的最终专属价格</span>
+                  </div>
+                  <div class="final-price-value">
+                    <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>
+              </template>
+
+              <!-- 会员套餐：原有展示逻辑 -->
+              <template v-else>
                 <div class="current-price-section">
-                <span class="price-label">{{ activeTab === 'member' ? '会员价' : '我们的价格' }}</span>
+                  <span class="price-label">会员价</span>
                   <div class="price-row">
                     <span class="price">¥{{ pkg.price }}</span>
-                  <span v-if="activeTab === 'member' && pkg.perMonth" class="per-month">
+                    <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 /></el-icon>
+                  <el-icon class="discount-icon">
+                    <CircleCheck />
+                  </el-icon>
                   <span class="discount-text">{{ pkg.discount }}</span>
                 </div>
+              </template>
+            </div>
+          </div>
+        </div>
 
-              <!-- 节省金额（如果有官方参考价） -->
+        <!-- Token套餐的累计充值优惠提示 -->
-              <div v-if="activeTab === 'token' && pkg.perMonth && pkg.perMonth > pkg.price" class="save-amount">
+        <div v-if="activeTab === 'token'" class="recharge-tip-card">
-                立省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}
+          <div class="tip-icon">
-              </div>
+            💝
+          </div>
+          <div class="tip-content">
+            <div class="tip-title">
+              累计充值优惠
+            </div>
+            <div class="tip-desc">
+              充值越多，优惠越多，长期使用更划算
             </div>
           </div>
         </div>
+
         <div style="display: flex;justify-content: space-between;margin-top: 15px;">
           <div>
             <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
@@ -536,9 +632,9 @@ function onClose() {
               :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
             >
               <!-- 标签 -->
-              <div v-if="pkg.discount" class="discount-tag">
+              <!--              <div v-if="pkg.discount" class="discount-tag"> -->
-                {{ pkg.discount }}
+              <!--                {{ pkg.discount }} -->
-              </div>
+              <!--              </div> -->
               <div v-if="pkg.tag" class="tag">
                 {{ pkg.tag }}
               </div>
@@ -555,36 +651,100 @@ function onClose() {
 
               <!-- 价格 -->
               <div class="package-price">
-                <!-- 官方参考价（仅Token套餐显示） -->
+                <!-- Token套餐：四层价格展示 -->
-                <div v-if="activeTab === 'token' && pkg.perMonth" class="reference-price-section">
+                <template v-if="activeTab === 'token'">
-                  <div class="reference-label">官方参考价</div>
+                  <!-- 第一层：Claude官方参考价 -->
-                  <div class="reference-value">¥{{ pkg.perMonth }}</div>
+                  <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) }}
+                    </div>
                   </div>
 
-                <!-- 当前价格 -->
+                  <!-- 第二层：意心平台优惠价 -->
+                  <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>
+                    </div>
+                    <div class="platform-price">
+                      ¥{{ pkg.originalPrice.toFixed(2) }}
+                    </div>
+                  </div>
+
+                  <!-- 第三层：个人尊享优惠券 -->
+                  <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
+                    <div class="coupon-header">
+                      <span class="coupon-icon">🎁</span>
+                      <span class="coupon-title">您的个人尊享优惠券</span>
+                    </div>
+                    <div class="coupon-amount">
+                      -¥{{ pkg.discountAmount.toFixed(2) }}
+                    </div>
+                  </div>
+
+                  <!-- 第四层：您的最终专属价格 -->
+                  <div class="final-price-section">
+                    <div class="price-label-row">
+                      <span class="label-text special">👑 您的最终专属价格</span>
+                    </div>
+                    <div class="final-price-value">
+                      <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>
+                </template>
+                <!-- 会员套餐：原有展示逻辑 -->
+                <template v-else>
                   <div class="current-price-section">
-                  <span class="price-label">{{ activeTab === 'member' ? '会员价' : '我们的价格' }}</span>
+                    <span class="price-label">会员价</span>
                     <div class="price-row">
                       <span class="price">¥{{ pkg.price }}</span>
-                    <span v-if="activeTab === 'member' && pkg.perMonth" class="per-month">
+                      <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 /></el-icon>
+                    <el-icon class="discount-icon">
+                      <CircleCheck />
+                    </el-icon>
                     <span class="discount-text">{{ pkg.discount }}</span>
                   </div>
+                </template>
+              </div>
+            </div>
+          </div>
 
-                <!-- 节省金额（如果有官方参考价） -->
+          <!-- Token套餐的累计充值优惠提示 -->
-                <div v-if="activeTab === 'token' && pkg.perMonth && pkg.perMonth > pkg.price" class="save-amount">
+          <div v-if="activeTab === 'token'" class="recharge-tip-card">
-                  立省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}
+            <div class="tip-icon">
-                </div>
+              💝
+            </div>
+            <div class="tip-content">
+              <div class="tip-title">
+                累计充值优惠
+              </div>
+              <div class="tip-desc">
+                充值越多，优惠越多，长期使用更划算
               </div>
             </div>
           </div>
+
           <div style="display: flex;justify-content: space-between;margin-top: 15px;">
             <div>
               <p>充值后，加客服微信回复账号名，可专享vip售后服务</p>
@@ -890,6 +1050,239 @@ function onClose() {
           text-align: center;
           box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
         }
+
+        // Token套餐四层价格展示样式 - 移动端
+        .official-price-section {
+          padding: 6px 10px;
+          background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
+          border-radius: 6px;
+          border: 1px solid #fecdd3;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 3px;
+
+            .label-text {
+              font-size: 11px;
+              color: #9f1239;
+              font-weight: 600;
+            }
+          }
+
+          .official-price {
+            font-size: 16px;
+            font-weight: 700;
+            color: #be123c;
+            text-decoration: line-through;
+            text-decoration-thickness: 2px;
+          }
+        }
+
+        .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;
+            justify-content: space-between;
+            margin-bottom: 3px;
+
+            .label-text {
+              font-size: 11px;
+              color: #78350f;
+              font-weight: 600;
+            }
+
+            .save-tag {
+              background: #dc2626;
+              color: white;
+              font-size: 9px;
+              padding: 2px 6px;
+              border-radius: 4px;
+              font-weight: 600;
+            }
+          }
+
+          .platform-price {
+            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-header {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            .coupon-icon {
+              font-size: 14px;
+            }
+
+            .coupon-title {
+              font-size: 10px;
+              color: #78350f;
+              font-weight: 600;
+            }
+          }
+
+          .coupon-amount {
+            font-size: 16px;
+            font-weight: 700;
+            color: #ea580c;
+          }
+        }
+
+        .our-price-section {
+          padding: 10px 12px;
+          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+          border-radius: 8px;
+          border: 1px solid #fbbf24;
+
+          .price-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 6px;
+
+            .price-tag-small {
+              font-size: 12px;
+              color: #78350f;
+              font-weight: 600;
+            }
+
+            .save-badge {
+              background: #dc2626;
+              color: white;
+              font-size: 10px;
+              padding: 2px 6px;
+              border-radius: 4px;
+              font-weight: 600;
+            }
+          }
+
+          .our-price {
+            font-size: 24px;
+            font-weight: 700;
+            color: #b45309;
+          }
+        }
+
+        .final-price-section {
+          padding: 10px;
+          background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+          border-radius: 8px;
+          border: 2px solid #60a5fa;
+          box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 6px;
+
+            .label-text.special {
+              font-size: 12px;
+              color: #1e40af;
+              font-weight: 700;
+            }
+          }
+
+          .final-price-value {
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 4px;
+
+            .price-symbol {
+              font-size: 16px;
+              font-weight: 700;
+              color: #1e40af;
+              margin-right: 2px;
+            }
+
+            .price-number {
+              font-size: 26px;
+              font-weight: 700;
+              color: #1e40af;
+            }
+          }
+
+          .discount-desc {
+            font-size: 10px;
+            color: #1e3a8a;
+            font-weight: 500;
+            line-height: 1.3;
+          }
+        }
+
+        .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;
+          }
+
+          .bar-text {
+            font-size: 11px;
+            font-weight: 700;
+            color: #065f46;
+          }
+        }
+      }
+    }
+
+    // 累计充值优惠提示卡片样式
+    .recharge-tip-card {
+      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;
+
+      .tip-icon {
+        font-size: 24px;
+      }
+
+      .tip-content {
+        flex: 1;
+
+        .tip-title {
+          font-size: 14px;
+          font-weight: 700;
+          color: #78350f;
+          margin-bottom: 4px;
+        }
+
+        .tip-desc {
+          font-size: 12px;
+          color: #92400e;
+          line-height: 1.4;
+        }
       }
     }
 
@@ -1124,6 +1517,204 @@ function onClose() {
           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;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            .label-text {
+              font-size: 12px;
+              color: #9f1239;
+              font-weight: 700;
+            }
+          }
+
+          .official-price {
+            font-size: 20px;
+            font-weight: 700;
+            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;
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            .label-text {
+              font-size: 12px;
+              color: #78350f;
+              font-weight: 700;
+            }
+
+            .save-tag {
+              background: #dc2626;
+              color: white;
+              font-size: 10px;
+              padding: 2px 8px;
+              border-radius: 4px;
+              font-weight: 600;
+            }
+          }
+
+          .platform-price {
+            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-amount {
+            font-size: 20px;
+            font-weight: 700;
+            color: #ea580c;
+          }
+        }
+
+        .final-price-section {
+          padding: 12px;
+          background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+          border-radius: 10px;
+          border: 2px solid #60a5fa;
+          box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
+
+          .price-label-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+
+            .label-text.special {
+              font-size: 14px;
+              color: #1e40af;
+              font-weight: 700;
+            }
+          }
+
+          .final-price-value {
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 6px;
+
+            .price-symbol {
+              font-size: 18px;
+              font-weight: 700;
+              color: #1e40af;
+              margin-right: 2px;
+            }
+
+            .price-number {
+              font-size: 30px;
+              font-weight: 700;
+              color: #1e40af;
+            }
+          }
+
+          .discount-desc {
+            font-size: 11px;
+            color: #1e3a8a;
+            font-weight: 500;
+            line-height: 1.4;
+          }
+        }
+
+        .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;
+          }
+
+          .bar-text {
+            font-size: 13px;
+            font-weight: 700;
+            color: #065f46;
+          }
+        }
+      }
+    }
+
+    // 累计充值优惠提示卡片样式 - 桌面端
+    .recharge-tip-card {
+      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;
+
+      .tip-icon {
+        font-size: 28px;
+      }
+
+      .tip-content {
+        flex: 1;
+
+        .tip-title {
+          font-size: 15px;
+          font-weight: 700;
+          color: #78350f;
+          margin-bottom: 4px;
+        }
+
+        .tip-desc {
+          font-size: 13px;
+          color: #92400e;
+          line-height: 1.5;
+        }
       }
     }