master

分支 (1)

管理

管理

master

7music
/
my music.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的音乐</title>
    <link rel="stylesheet" href="css/my music.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/my music.js"></script>

</head>

<body>
    <div id="app">
        <!-- 顶部 -->
        <div class="top">
            <div class="top-tp">
                <div id="topa">
                    <img id="logo" src="img/logo.png" alt="">
                    <ul>
                        <li><a href="index.html" target="_blank"> 发现音乐</a></li>
                        <li><a href="#"> 我的音乐</a></li>
                        <li><a href="friend.html" target="_blank"> 朋友</a></li>
                        <li><a href="mall.html" target="_blank"> 商城</a></li>
                        <li><a href="Musician.html" target="_blank"> 音乐人</a></li>
                        <li><a href="download apps.html" target="_blank"> 下载客户端</a></li>
                    </ul>
                    <input type="text" placeholder="音乐视频/电台/用户" class="sous">
                    <input type="button" value="创作者中心" id="button">
                    <a href="Signin.html" target="_blank" class="denglu">登陆</a>
                </div>
            </div>
        </div>
        <!-- 内容区 -->
        <div id="main">
            <div class="main-left">
                <ul>
                    <li>
                        <p>我的歌手(1)</p>
                    </li>
                    <li>
                        <p @click="App">创建的歌单(1)</p> <button>+ 新建</button>
                    </li>
                    <li v-show="isshow"><img src="img/rmtp (4).jpg" alt="">
                        <p>我喜欢的音乐</p>
                        <p>11首</p>
                    </li>

                </ul>
            </div>
            <div class="main-right">
                <div class="main-right-top">
                    <img src="img/MY.png" alt="">
                    <ul>
                        <li> <img src="img/gedan .png" alt="">我喜欢的音乐</li>
                        <li>2020-12-17创建</li>
                        <li><input type="button" value="播放" onClick="play1()">
                            <input type="button" value="分享">
                            <input type="button" value="下载">
                            <input type="button" value="评论"></li>
                    </ul>
                </div>
                <div class="main-right-footer">
                    <p>歌曲列表</p>
                    <audio id="music1" src="i/01.mp3"></audio>
                    <audio id="music2" src="i/02.mp3"></audio>
                    <audio id="music3" src="i/03.mp3"></audio>
                    <audio id="music4" src="i/04.mp3"></audio>
                    <audio id="music5" src="i/05.mp3"></audio>
                    <audio id="music6" src="i/06.mp3"></audio>
                    <audio id="music7" src="i/07.mp3"></audio>
                    <audio id="music8" src="i/08.mp3"></audio>
                    <audio id="music9" src="i/09.mp3"></audio>
                    <audio id="music10" src="i/10.mp3"></audio>
                    <audio id="music11" src="i/01.mp3"></audio>
                    <audio id="music12" src="i/02.mp3"></audio>
                    <audio id="music13" src="i/03.mp3"></audio>
                    <table>
                        <tr class="ab">
                            <td>歌曲标题</td>
                            <td>时长</td>
                            <td>歌手</td>
                            <td>专辑</td>
                        </tr>
                        <tr class="as">
                            <td onClick="play3()">1. 浮生</td>
                            <td>06.29</td>
                            <td>刘莱斯</td>
                            <td>浮生</td>
                        </tr>
                        <tr onClick="play9()">
                            <td>2.会有的</td>
                            <td>03.58</td>
                            <td>一盛</td>
                            <td>会有的</td>
                        </tr>
                        <tr class="as" onClick="play5()">
                            <td>3. 消愁</td>
                            <td>04.24</td>
                            <td>毛不易</td>
                            <td>平凡的一天</td>
                        </tr>
                        <tr>
                            <td onClick="play7()">4. 爸爸妈妈</td>
                            <td>04.22</td>
                            <td>李荣浩</td>
                            <td>有理想</td>
                        </tr>

                        <tr class="as" onClick="play2()">
                            <td>5. 杀死那个石家庄人</td>
                            <td>05.44</td>
                            <td>万能青年旅店</td>
                            <td>万能青年旅店同名专辑</td>
                        </tr>

                        <tr onClick="play3()">
                            <td>6. 消愁</td>
                            <td>04.24</td>
                            <td>毛不易</td>
                            <td>平凡的一天</td>
                        </tr>
                        <tr class="as" onClick="play9()">
                            <td>7. 爸爸妈妈</td>
                            <td>04.22</td>
                            <td>李荣浩</td>
                            <td>有理想</td>
                        </tr>

                        <tr onClick="play2()">
                            <td>8. 杀死那个石家庄人</td>
                            <td>05.44</td>
                            <td>万能青年旅店</td>
                            <td>万能青年旅店同名专辑</td>
                        </tr>
                        <tr class="as" onClick="play1()">
                            <td>9. 消愁</td>
                            <td>04.24</td>
                            <td>毛不易</td>
                            <td>平凡的一天</td>
                        </tr>
                        <tr onClick="play7()">
                            <td>10. 杀死那个石家庄人</td>
                            <td>05.44</td>
                            <td>万能青年旅店</td>
                            <td>万能青年旅店同名专辑</td>
                        </tr>
                        <tr class="as" onClick="play7()">
                            <td>11. 消愁</td>
                            <td>04.24</td>
                            <td>毛不易</td>
                            <td>平凡的一天</td>
                        </tr>
                    </table>
                    <p>评论</p>
                </div>
                <div class="pinl">
                    <img src="img/sytpd (4).jpg" alt="">
                    <textarea placeholder="评论" name="" id="" cols="70" rows="5"></textarea>
                    <input type="button" value="评论">
                </div>
            </div>

        </div>
    </div>
    <!-- Vue实现歌单的现实和隐藏 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isshow: true
            },
            methods: {
                App: function() {
                    this.isshow = !this.isshow;
                }
            }
        })
    </script>
</body>

</html>