优化账户和视频播放器的支付页面样式，调整按钮和文本大小，提升用户体验。

src/views/Account.vue

@@ -451,16 +451,16 @@ onMounted(async () => {
       @click.self="showMembershipDialog = false"
     >
       <div
-        class="bg-surface border border-white/10 rounded-2xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto"
+        class="bg-surface border border-white/10 rounded-2xl p-4 w-full max-w-sm mx-4"
       >
-        <h3 class="text-xl font-semibold text-white/90 mb-6 text-center">
+        <h3 class="text-lg font-semibold text-white/90 mb-4 text-center">
           开通会员
         </h3>
 
         <!-- 会员套餐选择 -->
-        <div class="space-y-2 mb-4">
+        <div class="space-y-2 mb-3">
           <h4 class="text-sm font-medium text-white/70 mb-2">选择套餐</h4>
-          <div class="grid grid-cols-1 gap-2">
+          <div class="space-y-2">
             <label
               v-for="plan in membershipPlans"
               :key="plan.key"
@@ -482,16 +482,13 @@ onMounted(async () => {
                 "
               >
                 <div class="flex justify-between items-center">
-                  <div>
-                    <div class="font-medium text-white/90 text-sm">
-                      {{ plan.label }}
-                    </div>
-                    <div class="text-xs text-white/60">{{ plan.duration }}</div>
+                  <div
+                    class="font-medium text-white/90 text-sm whitespace-nowrap"
+                  >
+                    {{ plan.label }} - {{ plan.duration }}
                   </div>
-                  <div class="text-right">
-                    <div class="font-semibold text-white/90 text-sm">
-                      {{ plan.price }}
-                    </div>
+                  <div class="font-semibold text-white/90 text-sm">
+                    {{ plan.price }}
                   </div>
                 </div>
               </div>
@@ -500,44 +497,42 @@ onMounted(async () => {
         </div>
 
         <!-- 支付方式选择 -->
-        <div class="space-y-2 mb-4">
+        <div class="mb-3">
           <h4 class="text-sm font-medium text-white/70 mb-2">支付方式</h4>
-          <div class="space-y-2">
-            <label
-              class="flex items-center p-2 border border-white/20 rounded-lg cursor-pointer hover:bg-white/5"
-            >
-              <input
-                v-model="selectedPayment"
-                value="alipay"
-                type="radio"
-                name="payment-method"
-                class="sr-only"
-              />
-              <div class="flex items-center">
-                <div
-                  class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center mr-3"
-                >
-                  <span class="text-white text-sm font-bold">支</span>
-                </div>
-                <span class="text-white/90">支付宝</span>
+          <label
+            class="flex items-center p-2 border border-white/20 rounded-lg cursor-pointer hover:bg-white/5"
+          >
+            <input
+              v-model="selectedPayment"
+              value="alipay"
+              type="radio"
+              name="payment-method"
+              class="sr-only"
+            />
+            <div class="flex items-center">
+              <div
+                class="w-6 h-6 bg-blue-500 rounded flex items-center justify-center mr-3"
+              >
+                <span class="text-white text-sm font-bold">支</span>
               </div>
-            </label>
-          </div>
+              <span class="text-white/90 text-sm">支付宝</span>
+            </div>
+          </label>
         </div>
 
         <!-- 操作按钮 -->
-        <div class="flex gap-3 pt-3 border-t border-white/10">
+        <div class="flex gap-2 pt-3 border-t border-white/10">
           <button
             type="button"
             @click="showMembershipDialog = false"
-            class="flex-1 px-4 py-2 border border-white/20 text-white/70 rounded-lg hover:bg-white/5 transition"
+            class="flex-1 px-3 py-2 border border-white/20 text-white/70 rounded-lg hover:bg-white/5 transition text-sm"
           >
             取消
           </button>
           <button
             @click="handleMembershipPurchase"
             :disabled="!selectedPlan || isPaymentLoading"
-            class="flex-1 px-4 py-2 bg-brand text-slate-900 rounded-lg hover:bg-brand/90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            class="flex-1 px-3 py-2 bg-brand text-slate-900 rounded-lg hover:bg-brand/90 transition disabled:opacity-50 disabled:cursor-not-allowed text-sm"
           >
             {{ isPaymentLoading ? "处理中..." : "立即购买" }}
           </button>

src/views/VideoPlayer.vue

@@ -201,16 +201,16 @@
       @click.self="showMembershipPurchaseModal = false"
     >
       <div
-        class="bg-surface border border-white/10 rounded-2xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto"
+        class="bg-surface border border-white/10 rounded-2xl p-4 w-full max-w-sm mx-4"
       >
-        <h3 class="text-xl font-semibold text-white/90 mb-6 text-center">
+        <h3 class="text-lg font-semibold text-white/90 mb-4 text-center">
           开通会员
         </h3>
 
         <!-- 会员套餐选择 -->
-        <div class="space-y-2 mb-4">
+        <div class="space-y-2 mb-3">
           <h4 class="text-sm font-medium text-white/70 mb-2">选择套餐</h4>
-          <div class="grid grid-cols-1 gap-2">
+          <div class="space-y-2">
             <label
               v-for="plan in membershipPlans"
               :key="plan.key"
@@ -232,16 +232,13 @@
                 "
               >
                 <div class="flex justify-between items-center">
-                  <div>
-                    <div class="font-medium text-white/90 text-sm">
-                      {{ plan.label }}
-                    </div>
-                    <div class="text-xs text-white/60">{{ plan.duration }}</div>
+                  <div
+                    class="font-medium text-white/90 text-sm whitespace-nowrap"
+                  >
+                    {{ plan.label }} - {{ plan.duration }}
                   </div>
-                  <div class="text-right">
-                    <div class="font-semibold text-white/90 text-sm">
-                      {{ plan.price }}
-                    </div>
+                  <div class="font-semibold text-white/90 text-sm">
+                    {{ plan.price }}
                   </div>
                 </div>
               </div>
@@ -250,44 +247,42 @@
         </div>
 
         <!-- 支付方式选择 -->
-        <div class="space-y-2 mb-4">
+        <div class="mb-3">
           <h4 class="text-sm font-medium text-white/70 mb-2">支付方式</h4>
-          <div class="space-y-2">
-            <label
-              class="flex items-center p-2 border border-white/20 rounded-lg cursor-pointer hover:bg-white/5"
-            >
-              <input
-                v-model="selectedPayment"
-                value="alipay"
-                type="radio"
-                name="payment-method"
-                class="sr-only"
-              />
-              <div class="flex items-center">
-                <div
-                  class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center mr-3"
-                >
-                  <span class="text-white text-sm font-bold">支</span>
-                </div>
-                <span class="text-white/90">支付宝</span>
+          <label
+            class="flex items-center p-2 border border-white/20 rounded-lg cursor-pointer hover:bg-white/5"
+          >
+            <input
+              v-model="selectedPayment"
+              value="alipay"
+              type="radio"
+              name="payment-method"
+              class="sr-only"
+            />
+            <div class="flex items-center">
+              <div
+                class="w-6 h-6 bg-blue-500 rounded flex items-center justify-center mr-3"
+              >
+                <span class="text-white text-sm font-bold">支</span>
               </div>
-            </label>
-          </div>
+              <span class="text-white/90 text-sm">支付宝</span>
+            </div>
+          </label>
         </div>
 
         <!-- 操作按钮 -->
-        <div class="flex gap-3 pt-3 border-t border-white/10">
+        <div class="flex gap-2 pt-3 border-t border-white/10">
           <button
             type="button"
             @click="showMembershipPurchaseModal = false"
-            class="flex-1 px-4 py-2 border border-white/20 text-white/70 rounded-lg hover:bg-white/5 transition"
+            class="flex-1 px-3 py-2 border border-white/20 text-white/70 rounded-lg hover:bg-white/5 transition text-sm"
           >
             取消
           </button>
           <button
             @click="handleMembershipPurchase"
             :disabled="!selectedPlan || isPaymentLoading"
-            class="flex-1 px-4 py-2 bg-brand text-slate-900 rounded-lg hover:bg-brand/90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            class="flex-1 px-3 py-2 bg-brand text-slate-900 rounded-lg hover:bg-brand/90 transition disabled:opacity-50 disabled:cursor-not-allowed text-sm"
           >
             {{ isPaymentLoading ? "处理中..." : "立即购买" }}
           </button>