From a04d40a6d00fac872f10828eaef57a4996a42797 Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Fri, 19 Dec 2025 14:38:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E7=94=B5=E5=AD=90?=
 =?UTF-8?q?=E4=B9=A6VIP=E5=A5=97=E9=A4=90=E9=A1=B5=E2=80=9C=E7=99=BD?=
 =?UTF-8?q?=E5=9D=97=E2=80=9D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/vip/book.vue | 12 ++++++++----
 style/tailwind.css | 36 ++++++++++++++++++++++++++++++++++++
 types/vip.d.ts     | 12 ++++++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/pages/vip/book.vue b/pages/vip/book.vue
index ec94826..7273a05 100644
--- a/pages/vip/book.vue
+++ b/pages/vip/book.vue
@@ -4,7 +4,7 @@
     <nav-bar :title="$t('vip.bookVip')" />
 
     <!-- VIP介绍卡片 -->
-    <view class="vip-intro-card">
+    <view class="vip-intro-card mt-2!">
       <view class="vip-intro-header">
         <text class="vip-intro-title">📚 读书VIP特权</text>
         <!-- <text class="vip-intro-subtitle">畅享海量电子图书</text> -->
@@ -58,14 +58,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { useUserStore } from '@/stores/user'
 import { vipApi } from '@/api/modules/vip'
+import type { IVipBook } from '@/types/vip'
 
 const userStore = useUserStore()
 
-const vipList = ref([])
+const vipList = ref<IVipBook[]>([])
 const getVipList = async () => {
   const res = await vipApi.getBookVipList()
   // 模拟推荐标识，实际项目中应该从后端获取
@@ -100,7 +101,10 @@ onShow(() => {
 <style lang="scss" scoped>
 .page-wrapper {
   padding: 20rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  // background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-color: #6E63C4;
+  background-size: cover;
+  background-position: center;
   min-height: 100vh;
 }
 
diff --git a/style/tailwind.css b/style/tailwind.css
index dee32e3..abc06cc 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -212,12 +212,30 @@
       max-width: 96rem;
     }
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-2\! {
+    margin-top: calc(var(--spacing) * 2) !important;
+  }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-5\! {
     margin-top: calc(var(--spacing) * 5) !important;
   }
+  .mt-20 {
+    margin-top: calc(var(--spacing) * 20);
+  }
+  .mt-20\! {
+    margin-top: calc(var(--spacing) * 20) !important;
+  }
   .mt-\[20rpx\]\! {
     margin-top: 20rpx !important;
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-2\! {
     margin-bottom: calc(var(--spacing) * 2) !important;
   }
@@ -227,9 +245,15 @@
   .mb-\[20rpx\]\! {
     margin-bottom: 20rpx !important;
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-1\! {
     margin-left: calc(var(--spacing) * 1) !important;
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-2\.5\! {
     margin-left: calc(var(--spacing) * 2.5) !important;
   }
@@ -269,6 +293,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -288,6 +315,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -312,6 +342,9 @@
   .pt-\[10rpx\] {
     padding-top: 10rpx;
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -362,6 +395,9 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow-\[0_4rpx_12rpx_rgba\(0\,0\,0\,0\.05\)\] {
     --tw-shadow: 0 4rpx 12rpx var(--tw-shadow-color, rgba(0,0,0,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
diff --git a/types/vip.d.ts b/types/vip.d.ts
index b1153ae..2f76ef3 100644
--- a/types/vip.d.ts
+++ b/types/vip.d.ts
@@ -24,4 +24,16 @@ export interface IVipItemProduct {
   fee: number | null, // 课程价格
   lastFee?: number | null, // 未使用字段
   [key: string]: any
+}
+
+/**
+ * 电子书VIP套餐
+ */
+export interface IVipBook {
+  id: number
+  type: number
+  title: string
+  money: number // vip金额
+  days: number // vip天数
+  [key: string]: any
 }
\ No newline at end of file