<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: Scroll; overflow-y: hidden } li { list-style: none; } #mask { display: flex; flex-direction: column; width: 800px; height: 500px; margin: 20px auto; } .bj { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -99; } .bj img { width: 100%; height: 100%; background-size: cover; filter: blur(100px); } .nav { width: 100%; height: 50px; background: -webkit-linear-gradient(left, #11a2de, #10a2de); } .nav_l { float: left; width: 44px; height: 22px; margin: 15px 0 0 20px; } .nav_r { float: right; width: 300px; height: 35px; background-color: #7ccbed; margin: 8px 20px 0 0; border-radius: 18px; } .nav_r input { width: 250px; height: 30px; margin: 2px 0 0 15px; outline: none; border: 0; background-color: #7ccbed; } .nav_r img { position: relative; top: 7px; right: 0; } .content { flex: 1; } footer { width: 100%; height: 40px; background-color: #f1f3f4; } .content { background: rgba(255, 255, 255, .3); font-size: 0; /* 父盒子里面的三个子盒子都设为 行内块 会有盒子掉下去 不在一行i显示 解决方法:父元素设置font-size: 0px; ,自身也设置font-size属性,否则font-size会被继承 */ } .content .left { float: left; width: 25%; height: 100%; font-size: 14px; } .Scroll_box { overflow: hidden; height: 400px; } .scroll { height: 100%; overflow-y: auto; width: calc(100% + 20px); margin: 5px; } .scroll .song { display: inline-block; width: 100px; height: 100%; } .left li:nth-child(2n) { background: transparent; } .scroll .mv { display: block; width: 23px; height: 17px; background-color: #fff; } .left li { display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 40px; background-color: rgba(255, 255, 255, .5); line-height: 40px; font-size: 14px; } .left li .bofang { width: 17px; margin: 0 5px; } .left li .song { font-size: 12px; display: inline-block; width: 122px; overflow: hidden; } .left li .mv i { display: block; width: 23px; height: 17px; cursor: pointer; background: url(image/table.png) left -48px no-repeat; } .content .right { float: right; width: 25%; height: 100%; font-size: 14px; padding-left: 5px; } .right h4 { font-size: 14px; margin: 10px 0; } .r_box { height: 400px; overflow: hidden; } .r_box ul { height: 100%; overflow-y: auto; width: calc(100% + 20px); } .r_box ul li { margin-top: 10px; } .right p { display: inline-block; width: 120px; margin: -14px 0 0 47px; font-size: 12px; } .right .user { vertical-align: top; width: 40px; height: 40px; border-radius: 20px; } h6 { display: inline-block; font-size: 12px; margin-left: 2px; } .content .center { display: inline-block; width: 50%; height: 100%; font-size: 14px; overflow: hidden; } .bjdie { position: relative; width: 100%; height: 300px; } .bjdie .bjy { position: relative; top: 60px; left: 66px; width: 267px; height: 260px; } .cover { position: absolute; top: 55px; left: 55px; width: 55%; } .disc { position: absolute; } .player_bar { position: absolute; top: -10px; left: 50%; transform: rotate(-25deg); transform-origin: 12px 12px; transition: 1s; } /* 播放音乐 添加playing这个类 播放杆放到碟片上面 */ .playing .player_bar { transform: rotate(0); } .biank_l { position: absolute; top: 0; left: 0; } .biank_r { position: absolute; top: 0; right: 0; } .audio { width: 100%; height: 100%; outline: none; } /* 光碟动画 */ @keyframes xuanz { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } /* 旋转碟片动画的类名 */ .autoRotate { animation-name: xuanz; animation-timing-function: linear; animation-duration: 5s; animation-play-state: paused; animation-iteration-count: infinite; } /* 播放音乐 添加playing这个类 碟片旋转 */ .playing .bjy { animation-play-state: running; } /* mv播放界面 */ .video_con video { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; outline: none; border: 0; z-index: 990; } .zhezhaoc { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 980; } </style>
<body> <div id="mask"> <nav class="nav"> <div class="nav_l"> <img src="image/player_title.png" alt=""> </div> <div class="nav_r"> <input type="text" v-model="query" @keyup.enter="searchMusic"> <img src="image/zoom.png" alt="" @click="xuanRan(query)"> </div> </nav> <div class="content"> <div class="left"> <div class="Scroll_box"> <ul class="scroll"> <li v-for="i in musicList"> <img src="image/play.png" alt="" @click="musicSrc(i.id)" class="bofang"> <span class="song"> {{ i.name }} </span> <span class="mv" v-if="i.mvid!=0" @click="musicMv(i.mvid)"><i></i></span> <!-- v-if="i.mvid!=0" 如果这个数组里面的mvid不等于0 就显示图标 --> </li> </ul> </div> </div> <div class="center"> <div class="bjdie" :class="{playing:isplaying}"> <!-- :class="{playing:isplaying}" 通过对象的方式设置类名 类名是否生效 取决于后面值的真假 --> <div class="bjy autoRotate "> <img :src="coverUrl" alt="" class="cover"> <img src="image/disc.png" alt="" class="disc"> </div> <img src="image/player_bar.png" alt="" class="player_bar"> <img src="image/line02.png" alt="" class="biank_l"> <img src="image/line01.png" alt="" class="biank_r"> </div> </div> <div class="right"> <div class="r_box"> <h4>热门留言</h4> <ul> <li v-for="i in hotComments"> <img :src="i.user.avatarUrl" alt="" class="user"> <h6 class="user_name"> {{ i.user.nickname}} </h6> <p> {{ i.content }} </p> </li> </ul> </div> </div> </div> <footer> <audio @play='play' @pause="pause" :src="musicUrl" autoplay controls loop class="audio"></audio> </footer> <div class="video_con" v-show="isShow"> <video :src="musicMvUrl" controls="controls" autoplay></video> <div class="zhezhaoc" @click="hide"></div> </div> </div> <div class="bj"> <img src="image/wyt.jfif" alt=""> </div> <script src="http://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script src="19.main.js"></script> </body>
var mask = new Vue({ el: "#mask", data: { query: '', musicList: [], musicUrl: "", coverUrl: "", hotComments: [], isplaying: false, // 播放状态 musicMvUrl: "", isShow: false }, methods: { searchMusic: function() { var that = this; axios.get("https://autumnfish.cn/search?keywords=" + that.query) .then(function(response) { console.log(response.data.result.songs); // 拿到搜索的歌曲信息 var list = response.data.result.songs; that.musicList = list; }, function(error) { console.log(error); }) }, xuanRan: function(query) { this.query = query; this.searchMusic(); }, musicSrc: function(musicId) { var that = this; axios.get("https://autumnfish.cn/song/url?id=" + musicId). then(function(response) { // console.log(response.data.data[0].url); //拿到音乐的scr that.musicUrl = response.data.data[0].url; }, function(err) { console.log(err); }) axios.get('https://autumnfish.cn/song/detail?ids=' + musicId). then(function(response) { // console.log(response.data.songs[0].al.picUrl); //拿到封面的scr that.coverUrl = response.data.songs[0].al.picUrl; }, function(err) { console.log(err); }) axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId) .then(function(response) { // console.log(response.data.hotComments); // 拿到留言 that.hotComments = response.data.hotComments; }, function(err) { console.log(err); }) }, play: function() { this.isplaying = true }, pause: function() { this.isplaying = false }, musicMv: function(mvid) { var that = this; axios.get("https://autumnfish.cn/mv/url?id=" + mvid) .then(function(response) { // console.log(response.data.data.url); that.isShow = true; that.musicMvUrl = response.data.data.url; }, function(err) { console.log(err); }) }, hide: function() { this.isShow = false; } } })