优化视频播放器组件，新增非付费用户提示弹窗，允许用户选择购买会员或单独购买视频，提升用户体验和交互性。同时，调整弹窗样式和关闭逻辑，确保更好的视觉效果和可用性。

src/views/VideoPlayer.vue

@@ -68,39 +68,66 @@
           @timeupdate="onVideoTimeUpdate"
           @canplay="onVideoCanPlay"
         />
+      </div>
+    </div>
 
-        <!-- 非付费用户提示 -->
-        <div
-          v-if="!isSinglePurchased && !isVip"
-          class="absolute inset-0 bg-black/80 flex items-center justify-center z-50"
+    <!-- 非付费用户提示弹窗 - 页面级别显示 -->
+    <div
+      v-if="!isSinglePurchased && !isVip && showPurchasePrompt"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      @click.self="closePurchasePrompt"
+    >
+      <div
+        class="bg-surface border border-white/10 rounded-2xl p-6 max-w-sm mx-4 text-center relative"
+      >
+        <!-- 关闭按钮 -->
+        <button
+          @click="closePurchasePrompt"
+          class="absolute top-4 right-4 text-white/60 hover:text-white/80 transition-colors"
         >
-          <div
-            class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 max-w-sm mx-4 text-center"
+          <svg
+            class="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
           >
-            <div class="text-white text-lg font-semibold mb-4">
-              需要购买才能观看
-            </div>
-            <div class="text-white/70 text-sm mb-6">
-              <span v-if="!isGuest">购买会员或单独购买本片观看</span>
-              <span v-else>单独购买本片观看</span>
-            </div>
-            <div class="space-y-3">
-              <!-- 只有非游客用户才显示购买会员按钮 -->
-              <button
-                v-if="!isGuest"
-                @click="purchaseMembership"
-                class="w-full bg-brand hover:bg-brand/90 text-slate-900 py-3 px-4 rounded-lg font-medium transition whitespace-nowrap"
-              >
-                开通会员
-              </button>
-              <button
-                @click="purchaseVideo"
-                class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none whitespace-nowrap"
-              >
-                单独购买本片
-              </button>
-            </div>
-          </div>
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+
+        <div class="text-white text-lg font-semibold mb-4">
+          需要购买才能观看
+        </div>
+        <div class="text-white/70 text-sm mb-6">
+          <span v-if="!isGuest">购买会员或单独购买本片观看</span>
+          <span v-else>单独购买本片观看</span>
+        </div>
+        <div class="space-y-3">
+          <!-- 只有非游客用户才显示购买会员按钮 -->
+          <button
+            v-if="!isGuest"
+            @click="purchaseMembership"
+            class="w-full bg-brand hover:bg-brand/90 text-slate-900 py-3 px-4 rounded-lg font-medium transition whitespace-nowrap"
+          >
+            开通会员
+          </button>
+          <button
+            @click="purchaseVideo"
+            class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none whitespace-nowrap"
+          >
+            单独购买本片
+          </button>
+          <button
+            @click="closePurchasePrompt"
+            class="w-full text-white/60 hover:text-white/80 py-2 text-sm transition"
+          >
+            稍后购买
+          </button>
         </div>
       </div>
     </div>
@@ -607,6 +634,7 @@ const relatedVideos = ref<any[]>([]);
 const showMembershipPurchaseModal = ref(false);
 const showSinglePurchaseModal = ref(false);
 const showLoginDialog = ref(false);
+const showPurchasePrompt = ref(true); // 控制非付费用户提示弹窗显示
 
 // 单片购买状态
 const isSinglePurchased = ref(false);
@@ -792,6 +820,11 @@ const formatNumber = (num: string | number): string => {
   return n.toString();
 };
 
+// 关闭购买提示弹窗
+const closePurchasePrompt = () => {
+  showPurchasePrompt.value = false;
+};
+
 // 返回主页
 const goBack = () => {
   // 停止视频播放并清除缓存