diff --git a/packages/client-screen/src/views/LiveVotingView.vue b/packages/client-screen/src/views/LiveVotingView.vue index 756c435..5a7654f 100644 --- a/packages/client-screen/src/views/LiveVotingView.vue +++ b/packages/client-screen/src/views/LiveVotingView.vue @@ -81,19 +81,19 @@ onUnmounted(() => {
- -

实时投票

-
+
总票数 {{ formattedVotes }}
+
+

{{ displayStore.eventTitle }}

+
{{ votingOpen ? '投票进行中' : '投票未开始' }} {{ displayStore.onlineUsers }} 人在线 -
@@ -139,47 +139,22 @@ onUnmounted(() => { display: flex; justify-content: space-between; align-items: center; - padding: 20px 60px; - position: relative; - z-index: 100; - background: rgba(0, 0, 0, 0.2); - backdrop-filter: blur(10px); - border-bottom: 1px solid rgba($color-gold, 0.2); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); - flex-wrap: wrap; - gap: 20px; - - .back-btn { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba($color-gold, 0.5); - color: $color-gold; - padding: 10px 24px; - border-radius: 30px; - cursor: pointer; - font-size: 14px; - transition: all $transition-fast; - - &:hover { - background: rgba($color-gold, 0.2); - transform: translateX(-4px); - } - } + padding: 30px 60px; + flex-shrink: 0; + z-index: 10; .title { font-size: 48px; - font-family: 'SimSun', 'Songti SC', serif; font-weight: 800; - color: #fff; - letter-spacing: 12px; - margin: 0; - text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + letter-spacing: 4px; + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } + .header-left, .header-right { display: flex; align-items: center; - gap: 32px; - flex-wrap: wrap; + gap: 16px; } .vote-counter { @@ -235,18 +210,6 @@ onUnmounted(() => { font-size: 14px; color: rgba(255, 255, 255, 0.7); } - - .connection-dot { - width: 10px; - height: 10px; - border-radius: 50%; - background: #475569; - - &.connected { - background: #4ade80; - box-shadow: 0 0 10px #4ade80; - } - } } } diff --git a/packages/client-screen/src/views/LotteryResultsView.vue b/packages/client-screen/src/views/LotteryResultsView.vue index f876434..3ec0158 100644 --- a/packages/client-screen/src/views/LotteryResultsView.vue +++ b/packages/client-screen/src/views/LotteryResultsView.vue @@ -2,9 +2,11 @@ import { computed, onMounted, ref } from 'vue'; import { useRouter } from 'vue-router'; import { useAdminStore } from '../stores/admin'; +import { useDisplayStore } from '../stores/display'; const router = useRouter(); const admin = useAdminStore(); +const displayStore = useDisplayStore(); // Lottery results from API const lotteryResults = ref {
- -

抽奖结果

-
- - {{ admin.isConnected ? '已连接' : '连接中...' }} -
+
+

{{ displayStore.eventTitle }}

+
@@ -200,30 +197,8 @@ onMounted(() => { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } - .status-indicator { - display: flex; - align-items: center; - gap: 10px; - font-size: 14px; - color: rgba(255, 255, 255, 0.8); - background: rgba(0, 0, 0, 0.2); - padding: 8px 16px; - border-radius: 20px; - - .dot { - width: 10px; - height: 10px; - border-radius: 50%; - - &.online { - background: #4ade80; - box-shadow: 0 0 12px #4ade80; - } - - &.offline { - background: #94a3b8; - } - } + .header-placeholder { + width: 80px; // Balance the back button } } diff --git a/packages/client-screen/src/views/LuckyDrawView.vue b/packages/client-screen/src/views/LuckyDrawView.vue index eecb4d1..c3d132d 100644 --- a/packages/client-screen/src/views/LuckyDrawView.vue +++ b/packages/client-screen/src/views/LuckyDrawView.vue @@ -2,12 +2,14 @@ import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'; import { useRouter } from 'vue-router'; import { useSocketClient } from '../composables/useSocketClient'; +import { useDisplayStore } from '../stores/display'; import { LotteryMachine, type Participant, type LotteryPhase } from '../pixi/LotteryMachine'; import type { AdminState } from '@gala/shared/types'; import { SOCKET_EVENTS } from '@gala/shared/constants'; const router = useRouter(); const { isConnected, onlineUsers, adminState, onAdminStateChange } = useSocketClient(); +const displayStore = useDisplayStore(); // Pixi canvas ref const canvasRef = ref(null); @@ -287,21 +289,19 @@ onUnmounted(() => {
-
第 {{ currentRound }} 轮 🐴 马年限定
+

{{ displayStore.eventTitle }}

{{ onlineUsers }} 人在线 -
- {{ currentPrize.level }} {{ currentPrize.name }}
@@ -376,23 +376,14 @@ onUnmounted(() => { display: flex; justify-content: space-between; align-items: center; - padding: 30px 50px; + padding: 30px 60px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%); - .back-btn { - background: rgba(0, 0, 0, 0.3); - border: 1px solid $color-gold; - color: $color-gold; - padding: 10px 20px; - border-radius: 8px; - cursor: pointer; - font-size: 16px; - transition: all $transition-fast; - backdrop-filter: blur(10px); - - &:hover { - background: rgba($color-gold, 0.2); - } + .title { + font-size: 48px; + font-weight: 800; + letter-spacing: 4px; + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .round-indicator { @@ -401,13 +392,15 @@ onUnmounted(() => { gap: 12px; .round-label { - font-size: 24px; + font-size: 36px; color: $color-gold; font-weight: bold; + text-shadow: $glow-gold; + letter-spacing: 2px; } .filter-badge { - padding: 6px 12px; + padding: 4px 10px; background: rgba($color-gold, 0.2); border: 1px solid $color-gold; border-radius: 20px; @@ -425,19 +418,6 @@ onUnmounted(() => { color: $color-text-muted; font-size: 18px; } - - .connection-dot { - width: 12px; - height: 12px; - border-radius: 50%; - background: #666; - transition: background 0.3s; - - &.connected { - background: #4ade80; - box-shadow: 0 0 10px rgba(74, 222, 128, 0.5); - } - } } } @@ -462,17 +442,11 @@ onUnmounted(() => { border-radius: 16px; backdrop-filter: blur(10px); - .prize-level { - font-size: 24px; - color: $color-gold; - margin-bottom: 8px; - text-shadow: $glow-gold; - } - .prize-name { - font-size: 36px; - color: $color-text-light; + font-size: 40px; + color: $color-gold; font-weight: bold; + text-shadow: $glow-gold; } } } diff --git a/packages/client-screen/src/views/VoteResultsView.vue b/packages/client-screen/src/views/VoteResultsView.vue index 8fb9278..c8e3672 100644 --- a/packages/client-screen/src/views/VoteResultsView.vue +++ b/packages/client-screen/src/views/VoteResultsView.vue @@ -2,10 +2,12 @@ import { computed, onMounted } from 'vue'; import { useRouter } from 'vue-router'; import { useAdminStore } from '../stores/admin'; +import { useDisplayStore } from '../stores/display'; import { TICKET_TYPES } from '@gala/shared/constants'; const router = useRouter(); const admin = useAdminStore(); +const displayStore = useDisplayStore(); function goBack() { router.push('/'); @@ -80,12 +82,9 @@ onMounted(() => {
- -

结果展示

-
- - {{ admin.isConnected ? '已连接' : '连接中...' }} -
+
+

{{ displayStore.eventTitle }}

+
@@ -180,30 +179,8 @@ onMounted(() => { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } - .status-indicator { - display: flex; - align-items: center; - gap: 10px; - font-size: 14px; - color: rgba(255, 255, 255, 0.8); - background: rgba(0, 0, 0, 0.2); - padding: 8px 16px; - border-radius: 20px; - - .dot { - width: 10px; - height: 10px; - border-radius: 50%; - - &.online { - background: #4ade80; - box-shadow: 0 0 12px #4ade80; - } - - &.offline { - background: #94a3b8; - } - } + .header-placeholder { + width: 80px; // Balance the back button } }