You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.6 KiB
113 lines
2.6 KiB
<template>
|
|
<section class="singer-page">
|
|
<!-- 分类部分 -->
|
|
<div class="singer-categories">
|
|
<span
|
|
v-for="category in categories"
|
|
:key="category"
|
|
@click="filterByCategory(category)"
|
|
:class="{ active: selectedCategory === category }"
|
|
>
|
|
{{ category }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 歌手展示 -->
|
|
<div class="singer">
|
|
<div class="singer-item" v-for="singer in filteredSingers" :key="singer.id">
|
|
<img :src="singer.avatar" :alt="singer.name" />
|
|
<p>{{ singer.name }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "SingerPage",
|
|
data() {
|
|
return {
|
|
// 歌手数据
|
|
singers: [
|
|
{ id: 1, avatar: "https://via.placeholder.com/100", name: "歌手1", gender: "男歌手" },
|
|
{ id: 2, avatar: "https://via.placeholder.com/100", name: "歌手2", gender: "女歌手" },
|
|
{ id: 3, avatar: "https://via.placeholder.com/100", name: "歌手3", gender: "男歌手" },
|
|
{ id: 4, avatar: "https://via.placeholder.com/100", name: "歌手4", gender: "组合歌手" },
|
|
],
|
|
// 分类列表
|
|
categories: ["全部歌手", "男歌手", "女歌手", "组合歌手"],
|
|
// 当前选择的分类
|
|
selectedCategory: "全部歌手",
|
|
};
|
|
},
|
|
computed: {
|
|
// 根据分类筛选后的歌手
|
|
filteredSingers() {
|
|
if (this.selectedCategory === "全部歌手") {
|
|
return this.singers;
|
|
}
|
|
return this.singers.filter((singer) => singer.gender === this.selectedCategory);
|
|
},
|
|
},
|
|
methods: {
|
|
// 切换分类并通知父组件
|
|
filterByCategory(category) {
|
|
this.selectedCategory = category;
|
|
this.$emit('changePage', 'SingerProfile'); // 触发事件修改父组件的 currentPage
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 页面样式 */
|
|
.singer-page {
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* 分类样式 */
|
|
.singer-categories {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.singer-categories span {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
padding: 5px 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.singer-categories span.active {
|
|
font-weight: bold;
|
|
color: #007bff; /* 选中时加深颜色 */
|
|
}
|
|
|
|
/* 歌手展示样式 */
|
|
.singer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.singer-item {
|
|
flex: 1 1 calc(25% - 20px);
|
|
max-width: calc(25% - 20px);
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.singer-item img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|