Просмотр исходного кода

优化视频播放器按钮样式,新增闪烁和发光动画效果,提升用户交互体验

wuyi 3 месяцев назад
Родитель
Сommit
499d5905e3
1 измененных файлов с 38 добавлено и 4 удалено
  1. 38 4
      src/views/VideoPlayer.vue

+ 38 - 4
src/views/VideoPlayer.vue

@@ -78,7 +78,7 @@
         </button>
         <button
           @click="showSinglePurchaseModal = true"
-          class="px-2 py-1 rounded-md bg-blue-500 text-white text-xs font-medium hover:bg-blue-600 transition"
+          class="px-4 py-2 rounded-lg bg-blue-500 text-white text-sm font-semibold hover:bg-blue-600 transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none"
         >
           单片购买
         </button>
@@ -138,7 +138,7 @@
               </button>
               <button
                 @click="purchaseVideo"
-                class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-medium transition"
+                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"
               >
                 单独购买本片
               </button>
@@ -175,7 +175,7 @@
         <div class="space-y-3">
           <button
             @click="purchaseVideo"
-            class="w-full bg-brand hover:bg-brand/90 text-slate-900 py-3 px-4 rounded-lg font-medium transition"
+            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"
           >
             确认购买
           </button>
@@ -1174,7 +1174,6 @@ watch(
 );
 
 onMounted(async () => {
-  // 路由监听器已经在处理所有情况,这里不需要额外逻辑
   // 加载价格配置
   if (!priceStore.isPriceConfigLoaded) {
     await priceStore.fetchPriceConfig();
@@ -1192,6 +1191,41 @@ onUnmounted(() => {
   position: relative;
 }
 
+/* 自定义闪烁动画 */
+@keyframes flash {
+  0%,
+  50%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  25%,
+  75% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glow {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5),
+      0 0 10px rgba(59, 130, 246, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8),
+      0 0 30px rgba(59, 130, 246, 0.6);
+  }
+}
+
+.flash-animation {
+  animation: flash 2s ease-in-out infinite;
+}
+
+.glow-animation {
+  animation: glow 2s ease-in-out infinite;
+}
+
 /* 移动端全屏样式 */
 @media screen and (max-width: 768px) {
   video {