|
|
@@ -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 {
|