歌单详情内容-顶部（音乐app项目-第6步）-CSDN博客

本文介绍了音乐应用程序中歌单详情页面的进一步优化，包括顶部添加滤镜效果，以及内容区域的图标列表设计。上一节详细讲解了如何实现模糊背景和统计播放次数的样式调整，而这一部分着重于视觉呈现的完善。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节：歌单详情内容-顶部-滤镜处理（音乐app项目-第5步）_Zhichao_97的博客-CSDN博客

本节要实现的效果如下图所示：

流程：

继续修改listViewTop.vue的代码如下：

<template>
    <div class="listViewTop">
        <img class="bg" :src="playlist.coverImgUrl">
        <div class="listViewTopNav">
            <div class="back">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="title">歌单</div>
            </div>
            <div class="right">
                <svg class="icon search" aria-hidden="true">
                    <use xlink:href="#icon-31sousuo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gengduo-shuxiang"></use>
                </svg>
            </div>
        </div>
        <div class="content">
            <div class="contentLeft">
                <img :src="playlist.coverImgUrl">
                <div class="count">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofangsanjiaoxing"></use>
                    </svg>
                    <span>{{changeValue(playlist.playCount)}}</span>
                </div>
            </div>
            <div class="contentRight">
                <h3>{{playlist.name}}</h3>
                <div class="author">
                    <img class="header" :src="playlist.creator.avatarUrl">
                    <span>{{playlist.creator.nickname}}</span>
                </div>
                <div class="description" style="font-size: 0.24rem;color: #cccccc;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">{{playlist.description}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "listViewTop",

        // 接收父组件的playlist
        props:[
            'playlist',
        ],

        methods:{
            changeValue:function (num) {
                let res = 0;
                if (num>=100000000){
                    res = num/100000000;
                    res = res.toFixed(2) + '亿'
                }
                else if (num>10000){
                    res = num/10000;
                    res = res.toFixed(2) + 'w'
                }
                return res
            }
        },
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .listViewTop{
        width: 7.5rem;
        padding: 0 0.4rem;
        height: 6rem;
    }
    .listViewTopNav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.2rem;
        font-size: 0.35rem;
    }
    .back,.right{
        display: flex;
        color: white;
    }
    .icon{
        width: 0.5rem;
        height: 0.5rem;
        fill: #ffffff;
    }
    .bg{
        position: fixed;
        left: 0;
        top: 0;
        width: 7.5rem;
        height: auto;
        z-index: -1;
        filter: blur(40px);  /*设置模糊度*/
    }
    .title{
       margin-left: 0.4rem;
    }
    .search{
        margin-right: 0.5rem;
        fill: white;
    }
    .content{
        padding: 0.4rem 0;
       display: flex;
        justify-content: space-between;
    }
    .contentLeft{
        position: relative;
    }
    .contentLeft>img{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.1rem;
    }
    .contentLeft>span{
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
    }
    .contentLeft>.count{
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
        font-size: 0.24rem;
        color:#ffffff;
        display: flex;
        align-items: center;
        font-weight: 900;
    }
    .contentLeft>.count>.icon{
        fill: white;
        width: 0.2rem;
        height: 0.2rem;
    }
    .contentRight{
        width: 3.8rem;
    }
    .contentRight>h3{
        color: white;
    }
    .contentRight>.author{
        display: flex;
        align-items: center;
        margin: 0.2rem 0;
    }
    .contentRight>.author>span{
        color: white;
        font-size: 0.26rem;
    }
    .contentRight>.author>.header{
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.3rem;
        margin-right: 0.2rem;
    }
</style>

2.修改ListView.vue的代码如下：

<template>
    <div class="listView">
        <listView-top :playlist="playlist"></listView-top>
    </div>
</template>

<script>
    import listViewTop from "../components/listViewTop.vue";
    import {getMusicList, getPlaylistDetail} from "../api";
    import {onMounted,reactive} from 'vue';
    import {useRoute} from 'vue-router';

    export default {
        name: "ListView",

        data:function(){
            return{
                list:[],
                playlist:{
                    creator:{},
                },
            }
        },

        async mounted() {
            const route = useRoute();
            let id = route.query.id;
            let result = await getPlaylistDetail(id);
            this.playlist = result.data.playlist;
            console.log(this.playlist)
        },

        components:{
            listViewTop,
        },
    }
</script>

<style scoped>

</style>