[JavaScript知识库]歌单详情内容-图标列表 （音乐app项目-第7步）

? 在上一节歌单详情内容-顶部 （音乐app项目-第6步）_Zhichao_97的博客-CSDN博客的基础上，继续实现详情页的图标列表，效果如下图标注区域所示：

?流程：

1.在iconfont官网添加所需图标至项目

?2.点击复制上图中更新后的链接，替换在index.html中链接

?

3.修改listViewTop.vue，代码如下：

<template>
    <div class="listViewTop">
        <img class="bg" :src="playlist.coverImgUrl">
        <div class="listViewTopNav">
            <!-- 返回上一页 -->
            <div class="back" @click="$router.go(-1)">
                <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 class="iconList">
            <div class="iconItem">
                <svg class="icon search" aria-hidden="true">
                    <use xlink:href="#icon-liaotian"></use>
                </svg>
                <span>{{playlist.commentCount}}</span>
            </div>
            <div class="iconItem">
                <svg class="icon search" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <span>{{playlist.shareCount}}</span>
            </div>
            <div class="iconItem">
                <svg class="icon search" aria-hidden="true">
                    <use xlink:href="#icon-yunduanxiazai"></use>
                </svg>
                <span>下载</span>
            </div>
            <div class="iconItem">
                <svg class="icon search" aria-hidden="true">
                    <use xlink:href="#icon-show_duoxuan"></use>
                </svg>
                <span>多选</span>
            </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;
    }
    .iconList{
        display: flex;
        justify-content: space-around;  /*平均分布*/
        text-align: center
    }
    .iconList>.iconItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .iconList>.iconItem>.icon{
        position: relative;
        left: 0.3rem;
        width: 0.6rem;
        height: 0.6rem;
        fill: white;
    }
    .iconList>.iconItem>span{
        font-size: 0.28rem;
        color: white;
        padding-top: 0.2rem;
    }
</style>

音乐app项目下一节：

歌单详情内容-播放列表 （音乐app项目-第8步）_Zhichao_97的博客-CSDN博客