style(floating-list): 更新静音状态下的文字样式

- 为全员静音和老师静音菜单项添加动态文字颜色类
- 添加CSS过渡效果使颜色变化更平滑
- 设置静音状态下文字为红色并加重字体粗细
- 实现静音状态的文字视觉反馈效果
This commit is contained in:
2026-03-15 16:34:02 +08:00
parent 95eccdb4c3
commit cddb2d65a4

View File

@ -10,14 +10,14 @@
<icon-mdi-volume-high v-if="!isMuted" class="menu-icon"></icon-mdi-volume-high>
<icon-mdi-volume-off v-else class="menu-icon muted"></icon-mdi-volume-off>
</div>
<span class="menu-text">全员静音</span>
<span class="menu-text" :class="{ 'text-muted': isMuted }">全员静音</span>
</div>
<div class="menu-item" @click="muteTeacher()">
<div class="icon-wrapper">
<icon-mdi-microphone v-if="!isTeacherMuted" class="menu-icon"></icon-mdi-microphone>
<icon-mdi-microphone-off v-else class="menu-icon muted"></icon-mdi-microphone-off>
</div>
<span class="menu-text">老师静音</span>
<span class="menu-text" :class="{ 'text-muted': isTeacherMuted }">老师静音</span>
</div>
<div class="menu-item" @click="endClass()">
<div class="icon-wrapper">
@ -220,6 +220,12 @@
font-weight: 500;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: color 0.3s;
&.text-muted {
color: #ff6b6b;
font-weight: 600;
}
}
.status-indicator {