style(theme-2): replace gold components and colors with blue-white scheme on desktop

This commit is contained in:
2026-06-30 11:04:13 +08:00
parent b327f65c63
commit 4d8389a716
36 changed files with 168 additions and 169 deletions

View File

@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
@@ -276,8 +276,8 @@ onUnmounted(stopAutoPlay);
filter: none;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.5),
0 0 28px rgba(212, 175, 55, 0.22),
0 0 56px rgba(212, 175, 55, 0.1);
0 0 28px rgba(0, 102, 204, 0.22),
0 0 56px rgba(0, 102, 204, 0.1);
animation: banner-breathe 3s ease-in-out infinite;
}
@@ -292,16 +292,16 @@ onUnmounted(stopAutoPlay);
transform: scale(1);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.5),
0 0 22px rgba(212, 175, 55, 0.16),
0 0 48px rgba(212, 175, 55, 0.08);
0 0 22px rgba(0, 102, 204, 0.16),
0 0 48px rgba(0, 102, 204, 0.08);
}
50% {
transform: scale(1.008);
box-shadow:
0 18px 44px rgba(0, 0, 0, 0.52),
0 0 32px rgba(212, 175, 55, 0.26),
0 0 60px rgba(212, 175, 55, 0.12);
0 0 32px rgba(0, 102, 204, 0.26),
0 0 60px rgba(0, 102, 204, 0.12);
}
}
@@ -320,13 +320,13 @@ onUnmounted(stopAutoPlay);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), #1a1a1a);
background: linear-gradient(135deg, rgba(0, 102, 204, 0.12), #1a1a1a);
}
.fallback-icon {
width: 40px;
height: 40px;
color: rgba(212, 175, 55, 0.35);
color: rgba(0, 102, 204, 0.35);
}
.click-hint {
@@ -348,7 +348,7 @@ onUnmounted(stopAutoPlay);
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.45);
border: 1px solid rgba(0, 102, 204, 0.45);
animation: click-ring-pulse 2.8s ease-out infinite;
}
@@ -356,7 +356,7 @@ onUnmounted(stopAutoPlay);
position: relative;
width: 15px;
height: 15px;
color: rgba(212, 175, 55, 0.88);
color: rgba(0, 102, 204, 0.88);
animation: click-icon-bob 2.8s ease-in-out infinite;
}
@@ -410,7 +410,7 @@ onUnmounted(stopAutoPlay);
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.4);
border: 1px solid rgba(0, 102, 204, 0.4);
background: rgba(10, 10, 10, 0.75);
color: var(--primary-light);
display: flex;
@@ -426,7 +426,7 @@ onUnmounted(stopAutoPlay);
}
.nav-btn:hover {
background: rgba(212, 175, 55, 0.2);
background: rgba(0, 102, 204, 0.2);
border-color: var(--primary);
}
@@ -459,7 +459,7 @@ onUnmounted(stopAutoPlay);
.dot.active {
width: 22px;
border-radius: 4px;
background: var(--gradient-gold);
background: var(--primary);
}
.dot:hover:not(.active) {