Astrian Zheng
2ee428500d
- 在 `Home.vue` 中调整了网格布局并添加了专辑链接 - 在 `Playing.vue` 中增加了底部播放栏的高度 - 新增 `SearchBar.vue` 组件，用于搜索功能 - 在 `App.vue` 中重构了顶部导航栏并集成了搜索栏
20 lines
581 B
Vue
20 lines
581 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const inputFocused = ref(false)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-4 py-2 rounded-full backdrop-blur-3xl border"
|
|
:class="inputFocused ? 'bg-white/50 border-[#c9c9c9]' : 'border-[#383838] bg-neutral-900/50'"
|
|
>
|
|
<input
|
|
placeholder="搜索歌曲、专辑或音乐人..."
|
|
class="placeholder:italic w-96 text-base font-[MiSans] text-black"
|
|
:class="inputFocused? 'placeholder:text-neutral-900/50' : 'placeholder:text-white/50'"
|
|
@focus="inputFocused = true"
|
|
@blur="inputFocused = false"
|
|
/>
|
|
</div>
|
|
</template> |