fix(mobile): replace title with voting status in header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
2026-02-03 22:40:30 +08:00
parent 6ccc571be2
commit eee34916b0

View File

@@ -68,8 +68,11 @@ onMounted(() => {
<span class="user-name">{{ connectionStore.userName || '访客' }}</span> <span class="user-name">{{ connectionStore.userName || '访客' }}</span>
<span class="logout-btn" @click="handleLogout">退出</span> <span class="logout-btn" @click="handleLogout">退出</span>
</div> </div>
<!-- 中间标题 --> <!-- 中间投票状态 -->
<h1 class="page-title">节目投票</h1> <span class="voting-status" :class="{ active: votingStore.votingOpen }">
<span class="status-dot" :class="{ pulsing: votingStore.votingOpen }"></span>
{{ votingStatusMessage }}
</span>
<!-- 右侧进度环 --> <!-- 右侧进度环 -->
<div class="progress-ring"> <div class="progress-ring">
<svg viewBox="0 0 36 36" class="circular-progress"> <svg viewBox="0 0 36 36" class="circular-progress">
@@ -136,12 +139,30 @@ onMounted(() => {
min-width: 60px; min-width: 60px;
} }
.page-title { .voting-status {
font-size: $font-size-lg; display: flex;
font-weight: bold; align-items: center;
color: $color-text-inverse; justify-content: center;
text-align: center; gap: 6px;
flex: 1; flex: 1;
font-size: $font-size-sm;
color: rgba(255, 255, 255, 0.6);
&.active {
color: #22c55e;
}
}
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
&.pulsing {
background: #22c55e;
animation: pulse-dot 1.5s ease-in-out infinite;
}
} }
.user-name { .user-name {
@@ -201,5 +222,10 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
gap: $spacing-lg; gap: $spacing-lg;
} }
@keyframes pulse-dot {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}
</style> </style>