Astrian Zheng
c88b29702d
- 在 `input` 元素中添加 `focus:outline-none` 样式，去除聚焦时的默认轮廓 - 在 `App.vue` 中为 `Sidebar` 添加外层 `div`，以便更好地控制布局 - 在 `Home.vue` 中调整 `gap` 间距，使页面元素更加整齐 - 在 `Sidebar.vue` 中添加搜索框，并调整布局和样式，提升用户交互体验
22 lines
560 B
Vue
22 lines
560 B
Vue
<script setup lang="ts">
|
|
import apis from '../apis'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const albums = ref([] as AlbumList)
|
|
|
|
onMounted(async () => {
|
|
const res = await apis.getAlbums()
|
|
albums.value = res
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-white flex flex-col gap-8 mb-16">
|
|
<h1 class="text-4xl font-semibold pt-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">浏览</h1>
|
|
<div class="grid grid-cols-5">
|
|
<div v-for="album in albums" :key="album.cid">
|
|
<img :src="album.coverUrl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |