不如听音乐
ps:环境打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app{
width: 960px;
height: 660px;
margin: 60px auto;
}
.shang{
width: 100%;
height: 60px;
line-height: 60px;
background: greenyellow;
display: flex;
justify-content: space-between;
}
.buru{
margin-left: 30px;
}
#inp{
width: 240px;
height: 40px;
border-radius: 180px;
border: 1px solid pink;
outline: none;
padding: 0px 20px;
margin-right: 20px;
}
.xia{
width: 100%;
height: 540px;
background:pink;
display: flex;
justify-content: space-between;
}
.xia>div:nth-child(1),.xia>div:nth-child(3){
width: 25%;
height: 100%;
}
.xia>div:nth-child(2){
width: 48%;
height: 100%;
}
.xiaa{
line-height: 40px;
text-align: center;
}
.gelist{
width: 100%;
height:500px;
overflow-x: hidden;
overflow-y: scroll;
}
.gelist>li{
width: 100%;
line-height: 64px;
height: 64px;
font-size: 14px;
color: aqua;
display: flex;
}
.gelist::-webkit-scrollbar {
display: none;
}
.gelist>li>img{
width: 20px;
height: 20px;
display: block;
margin: 22px 10px;
}
.gelist>li>span{
display: block;
width: 160px;
height: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.di{
width: 100%;
height: 60px;
background-color: #F1F3F4;
}
.di>audio{
width: 100%;
}
.zja{
line-height: 40px;
text-align: center;
color: plum;
}
.zj{
width: 300px;
height: 300px;
background: greenyellow;
margin:70px auto;
border-radius: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.zj>img{
display: block;
width: 180px;
height: 180px;
border-radius: 180px;
}
.gequ{
width: 100%;
height: 60px;
overflow-x: hidden;
overflow-y: scroll;
}
.gequ::-webkit-scrollbar {
display: none;
}
.gequ>div{
width: 100%;
line-height: 20px;
color: red;
font-size: 14px;
margin: 4px auto;
text-align: center;
}
.xia_ping{
width: 100%;
height:500px;
overflow-x: hidden;
overflow-y: scroll;
}
.xia_ping::-webkit-scrollbar {
display: none;
}
.xia_lun{
width: 100%;
height: auto;
display: flex;
}
.xia_lun img{
width: 40px;
height: 40px;
display: block;
margin: 10px ;
border-radius: 180px;
}
.xia_lun h4{
color: #ADFF2F;
overflow: hidden;
}
.xia_lun span{
line-height: 24px;
font-size: 14px;
color: #00FFFF;
}
@-webkit-keyframes rotation{
from {
-webkit-transform: rotate(0deg);}
to {
-webkit-transform: rotate(360deg);}
}
.an{
-webkit-transform: rotate(360deg);
animation: rotation 5s linear infinite;
-moz-animation: rotation 5s linear infinite;
-webkit-animation: rotation 5s linear infinite;
-o-animation: rotation 5s linear infinite;
}
.shipin{
position: absolute;
width: 100%;
height: 100%;
background: pink;
left: 0px;
top: 0px;
}
.shipin>div{
width: 600px;
height: 460px;
margin: 20px auto;
}
.shipin video{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="shang">
<div><span class="buru">不如听音乐</span></div>
<div><input type="text" v-model="music" @keyup.enter="soumusic(music)" name="" id="inp" placeholder=" 回车搜索" value="" /></div>
</div>
<div class="xia">
<div>
<div class="xiaa" v-if="ss!=''"><strong>{
{
ss +'~~相关歌曲'}}</strong></div>
<ul class="gelist">
<li v-for="(item,index) in musiclist"><img :src="imgsrc[0]" @click="clickaudio(item.id)"><span :title="item.name">{
{
index+1}}~ {
{
item.name}}</span><img :src="imgsrc[1]" @click="dianji(item.mvid)" v-if="item.mvid!==0" ></li>
</ul>
</div>
<div>
<h4 class="zja">{
{
musicming }}</h4>
<div class="zj" v-show="yin"><img :class="{an:kai}" :src="zjSrc" ></div>
<div class="gequ" v-show="musicqu!==''">
<div v-for="item in musicqu">{
{
item}}</div>
</div>
</div>
<div>
<div class="xiaa" v-if="ss!=''"><strong>评论</strong></div>
<div class="xia_ping">
<div class="xia_lun" v-for="(item,index) in pinglist">
<img :src='item.user.avatarUrl' >
<div><h4 :title="item.user.nickname">{
{
item.user.nickname}}</h4><span>{
{
item.content}}</span></div>
</div>
</div>
</div>
</div>
<div class="di">
<audio @play="play" @pause="pause" :src="audioSrc" controls="controls" autoplay="autoplay" loop="loop">
当前浏览器不支持audio
</audio>
</div>
<div class="shipin" v-show="videyin" @click="bei">
<div><video :src="videSrc" controls="controls" autoplay="autoplay" loop="loop"></video></div>
</div>
</div>
</body>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
imgsrc:["kai.png",'vid.png'],
music:'',
musiclist:[],
pinglist:[],
audioSrc:'',
videSrc:'',
zjSrc:'',
musicming:'',
yin:false,
kai:false,
videyin:false,
a:'',
musicqu:'',
ss:'',
},
methods:{
soumusic:function(dz){
if(dz==''){
return;}
axios.get('https://autumnfish.cn/search?keywords='+dz).then((response)=>{
this.musiclist=response.data.result.songs;
this.ss=this.music;
this.music='';
},(err)=>{
console.log('错误信息');
})
},
clickaudio:function(dz){
this.yin=true;
var tha = this;
axios.get('https://autumnfish.cn/song/url?id='+dz).then((response)=>{
this.audioSrc=response.data.data[0].url;
},(err)=>{
console.log('错误信息');
})
axios.get('https://autumnfish.cn/song/detail?ids='+dz).then((response)=>{
this.zjSrc=response.data.songs[0].al.picUrl;
this.musicming=response.data.songs[0].name+'~'+response.data.songs[0].ar[0].name;
},(err)=>{
console.log('错误信息');
})
axios.get('https://autumnfish.cn/comment/hot?type=0&id='+dz).then((response)=>{
this.pinglist=response.data.hotComments;
},(err)=>{
console.log('错误信息');
})
axios.get('https://autumnfish.cn/lyric?id='+dz).then((response)=>{
this.musicqu=response.data.lrc.lyric.split("\n");
},(err)=>{
console.log('错误信息');
})
},
play:function(){
this.kai=true;
},
pause:function(){
this.kai=false;
},
bei:function(){
this.videyin=false;
this.videSrc='';
this.audioSrc=this.a;
this.a='';
},
dianji:function(mvid){
axios.get('https://autumnfish.cn/mv/url?id='+mvid).then((response)=>{
this.videyin=true;
this.videSrc=response.data.data.url;
this.a = this.audioSrc;
this.audioSrc='';
},(err)=>{
console.log('错误信息');
})
}
}
})
</script>
</html>