<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
*服务器返回的数据比较复杂时，获取的时候需要注意层级结构
*通过审查元素快速定位到需要操纵的元素
*歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注
*在vue中通过v-bind操纵属性
*本地无法获取的数据，基本都会有对应的接口
*audio标签的play事件会在音频播放的时候触发
*audio标签的pause事件会在音频暂停时触发
*通过对象的方法设置类名，类名生效与否取决于后面值的真假
*不同的接口需要的数据是不同的，文档的阅读需要仔细
*页面结构复杂之后，通过审查元素的方式去快速定位相关元素
*响应式的数据都要在data中定义
-->
<!--官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/music_main.js"></script>
<link rel="stylesheet" href="../exercise/fa/css/all.css">
<style>
body {
background-color: rgba(182, 177, 177, 0.6);
}
ul {
list-style: none;
padding: 0;
}
.clearfix::before,
.clearfix::after {
/*最后一行内容为空*/
content: '';
clear: both;
display: block;
}
* {
margin: 0px;
padding: 0px;
}
.play_wrap {
width: 1000px;
height: 600px;
/* background-color: rgb(213, 247, 247); */
margin: 50px auto;
box-shadow: 0 0 5px rgb(156, 154, 154);
}
.play_wrap .top_bar {
width: 100%;
height: 60px;
background-color: rgb(50, 9, 95);
position: relative;
}
.play_wrap .top_bar img {
position: absolute;
top: 10px;
left: 20px;
}
.play_wrap .top_bar .input_txt {
position: absolute;
right: 20px;
top: 10px;
width: 400px;
height: 60%;
border-radius: 50px;
font-style: italic;
border: none;
outline: none;
}
.play_wrap .top_bar a {
color: rgb(184, 184, 184);
font-size: 24px;
position: absolute;
right: 30px;
top: 13px;
font-weight: lighter;
}
.play_wrap .main {
width: 100%;
height: 82.7%;
/* background-color: rgb(238, 223, 232); */
/* background-color: rgb(233, 235, 248); */
list-style: none;
padding: 0;
margin-bottom: 0px;
margin-top: 0;
}
.play_wrap .main .box {
float: left;
}
.play_wrap .main .musci_list {
margin-left: 10px;
padding-top: 10px;
width: 21%;
height: 100%;
border-right: 1px solid black;
/* background-color: greenyellow; */
}
.play_wrap .main .musci_list .song_list {
width: 100%;
height: 100%;
overflow: auto;
}
/*去除代码滚动条*/
.play_wrap .main .musci_list .song_list::-webkit-scrollbar {
display: none;
}
.play_wrap .main .musci_list li {
position: relative;
width: 95%;
margin-left: 5px;
height: 40px;
background-color: rgba(182, 177, 177, 0.6);
margin-bottom: 3px;
}
.play_wrap .main .musci_list li .pre {
color: rgb(126, 7, 7);
position: absolute;
left: 5px;
top: 10px;
}
.play_wrap .main .musci_list li .last {
/* display: inline-block; */
color: rgb(173, 12, 12);
position: absolute;
right: 5px;
top: 10px;
}
.play_wrap .main .musci_list li span {
position: absolute;
top: 12px;
left: 20px;
font-size: 14px;
}
.play_wrap .main .music_palyer {
width: 56%;
height: 100%;
border-right: 1px solid black;
/* background-color: rgb(241, 234, 224); */
background-color: rgb(233, 235, 248);
position: relative;
}
.play_wrap .main .music_palyer .cd {
width: 168px;
height: 66px;
background: url('../img/cd.png');
position: absolute;
top: 25px;
left: 200px;
transform: rotateZ(20deg);
z-index: 9999;
/* background-color: rgb(122, 118, 118); */
}
.play_wrap .main .music_palyer .cd1 {
width: 388px;
height: 388px;
background: url('../img/cd1.png');
position: absolute;
top: 70px;
left: 100px;
z-index: 999;
}
/* .play_wrap .main .music_palyer .cd1{
background: url('../img/cd1.png');
/* background-color: rgb(173, 12, 12);
} */
.play_wrap .main .music_palyer .cover {
left: 161px;
top: 130px;
position: absolute;
width: 267px;
height: 267px;
border-radius: 50%;
z-index: 1;
}
.playing {
animation: rotate 24s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.play_wrap .main .hot_comment {
position: relative;
padding-top: 10px;
width: 21%;
height: 100%;
/* background-color: green; */
}
.play_wrap .main .hot_comment span {
margin-left: 10px;
font-weight: 800;
font-size: 16px;
color: rgb(92, 91, 91);
}
.play_wrap .main .hot_comment ul li {
position: absolute;
width: 95%;
/* height: 200px; */
height: auto;
background-color: rgb(204, 204, 204);
left: 10px;
color: rgb(122, 118, 118);
position: relative;
/* display: flex; */
margin-bottom: 3px;
/* background-color: rgb(50, 9, 95); */
}
.play_wrap .main .hot_comment .comment {
width: 100%;
height: 100%;
overflow: auto;
/* background-color: rgb(173, 12, 12); */
}
/*去除滚动条*/
.play_wrap .main .hot_comment .comment::-webkit-scrollbar {
display: none;
}
.play_wrap .main .hot_comment ul li .name {
/* position: absolute; */
display: inline-block;
width: 80px;
height: auto;
/* background-color: rgb(250, 235, 235); */
/* left:55px;
top: 50px; */
margin-top: 0px;
/* padding-bottom: 20px; */
font
vue.js+axios制作的音乐播放器
需积分: 10 197 浏览量
2022-03-23
16:46:52
上传
评论
收藏 1.47MB ZIP 举报
音乐播放器.zip （34个子文件） 
音乐播放器 img 
cd1.png 88KB cd.png 6KB exercise js 
music_main.js 4KB fa css brands.min.css 675B all.css 72KB regular.css 734B svg-with-js.css 8KB svg-with-js.min.css 6KB brands.css 732B v4-shims.css 40KB solid.css 727B v4-shims.min.css 26KB all.min.css 58KB fontawesome.css 70KB regular.min.css 677B solid.min.css 669B fontawesome.min.css 57KB webfonts fa-solid-900.woff2 78KB fa-brands-400.woff2 77KB fa-brands-400.woff 90KB fa-brands-400.eot 134KB fa-regular-400.woff2 13KB fa-solid-900.eot 200KB fa-regular-400.ttf 33KB
fa-solid-900.svg 896KB fa-regular-400.eot 34KB fa-solid-900.ttf 200KB fa-brands-400.ttf 133KB fa-regular-400.woff 16KB fa-solid-900.woff 102KB fa-brands-400.svg 730KB fa-regular-400.svg 141KB
5.音乐播放器.html 13KB music.css 6KB
评论0