diff --git a/packages/client-mobile/src/views/VoteView.vue b/packages/client-mobile/src/views/VoteView.vue index d4bd972..84de9d8 100644 --- a/packages/client-mobile/src/views/VoteView.vue +++ b/packages/client-mobile/src/views/VoteView.vue @@ -61,28 +61,23 @@ onMounted(() => {
@@ -127,48 +122,26 @@ onMounted(() => { background: $color-surface-glass; backdrop-filter: $backdrop-blur; -webkit-backdrop-filter: $backdrop-blur; - padding: $spacing-md $spacing-lg; - padding-top: calc(env(safe-area-inset-top) + #{$spacing-md}); - display: flex; - flex-direction: column; - gap: 8px; -} - -.header-row { + padding: $spacing-sm $spacing-md; + padding-top: calc(env(safe-area-inset-top) + #{$spacing-sm}); display: flex; align-items: center; justify-content: space-between; } -.header-row-top { - .user-name { - flex: 1; - text-align: left; - } - .page-title { - flex: 1; - text-align: center; - } - .status-indicator { - flex: 1; - justify-content: flex-end; - } -} - -.header-row-bottom { - .logout-btn { - flex: 1; - text-align: left; - } - .progress-ring { - // 保持右侧 - } +.header-left { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 60px; } .page-title { font-size: $font-size-lg; font-weight: bold; color: $color-text-inverse; + text-align: center; + flex: 1; } .user-name { @@ -176,47 +149,20 @@ onMounted(() => { color: $color-gold; } -.status-indicator { - display: flex; - align-items: center; - gap: 4px; - color: $color-text-secondary; - font-size: $font-size-xs; - - &.active { - color: #22c55e; - } -} - .logout-btn { - color: #999; + color: rgba(255, 255, 255, 0.6); + font-size: $font-size-xs; cursor: pointer; - padding: 2px 6px; - border-radius: 4px; - transition: all 0.2s; &:active { - background: rgba(255, 255, 255, 0.1); color: #fff; } } -.status-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background: #666; - - &.pulsing { - background: #22c55e; - animation: pulse-dot 1.5s ease-in-out infinite; - } -} - .progress-ring { position: relative; - width: 48px; - height: 48px; + width: 56px; + height: 56px; } .circular-progress { @@ -255,10 +201,5 @@ onMounted(() => { flex-direction: column; 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); } -}