nickname-music
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小名播放器</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="player">
        <header>
            <span><i>小名音乐</i></span>
            <div class="search-bar">
                <input type="text" placeholder="音乐搜索" v-model="music" @keyup.enter="searchMusic">
                <img src="images/player_search.png" alt="">
            </div>
        </header>
        <div class="player-content">
            <!-- 左侧的音乐列表内容 -->
            <div class="content-left">
                <ul class="music-list">
                    <li v-for="data in musicList">
                        <a href="javascript:;"><img src="images/player_music_play.png" class="player-icon"
                                @click="playMusic(data.id)"></a>
                        <span> {{data.name}} </span>
                        <img src="images/player_mv_icon.png" alt="" class="music-mv" v-show="data.mvid!=0"
                            @click="showMv(data.mvid)">
                    </li>

                </ul>
            </div>
            <!-- 中间音乐背景图区域 -->
            <div class="content-middle">
                <div class="music-cover">
                    <img :src="playMusicCover" alt="" :class="{'music-rotation':isPlaying}">
                </div>
                <img src="images/player_music_cover.png" alt="" class="music-bg">
                <!-- 展示mv的背景view -->
                <div class="mv" v-if="isShowMv" @click="hideMv">
                    <video :src="mvSrc" controls="controls"></video>
                </div>
            </div>
            <!-- 右侧的热门评论内容 -->
            <div class="content-right">
                <h4>热门留言</h4>
                <ul>
                    <li v-for="data in comments">
                        <img :src="data.user.avatarUrl" alt="">
                        <div>
                            <p class="user-nickname"> {{ data.user.nickname }} </p>
                            <span>{{ data.content }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="player-audio">
            <audio :src="playMusicSrc" controls="controls" autoplay @play="play" @pause="pause"></audio>
        </div>


    </div>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/index.js"></script>


</body>

</html>