fix(mobile): replace title with voting status in header
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user