修复：电子书VIP套餐页“白块”问题

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;
 }
 

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);

types/vip.d.ts

@@ -25,3 +25,15 @@ export interface IVipItemProduct {
   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
+}