feat(ui): 优化标签样式并添加播放状态高亮效果

- 重构标签HTML结构,添加.tag-text容器
- 为当前播放标签添加旋转渐变边框效果
- 调整标签尺寸和内边距
- 添加控制台日志输出当前播放数据
- 更新VSCode端口配置
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-11 18:54:11 +08:00
parent bccccacad8
commit f1aa3a5d4a
5 changed files with 136 additions and 50 deletions

View File

@@ -47,7 +47,9 @@
<div class="fill-item" v-for="(item, index) in tagsFill" :key="index" :class="[`item${ item.type }`]"></div>
</div>
<div class="list" id="bubbleContainer" ref="container">
<div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">{{ item.tag }}</div>
<div class="tag-item" v-for="(item, index) in tags" :key="index" :class="[`item${ item.type }`, {'red': item.isred},{'show': playData?.tag == item.tag}]" @click="clickSongs(item.tag, item.songs)" @mouseleave="handleMouseleave" @mouseenter="handleMouseenter">
<div class="tag-text">{{ item.tag }}</div>
</div>
</div>
</div>