SOURCE

//http://autumnfish.cn/search?keywords=


var div1=new Vue({
    el:'#app',
    data:{
        mdata:'c',
        mlist:[],
        murl:'',
        mpic:'https://p2.music.126.net/MLQl_7poLz2PTON6_JZZRQ==/109951163938219545.jpg',
        comment:[],
        showImg:false,
    },
    
    methods:{
        sh:function(){
            var that=this;
            axios.get('https://autumnfish.cn/search?keywords='+this.mdata)
            .then(function(response){
                that.mlist=response.data.result.songs;
                //console.log(response.data.result.songs[1])
                
            },function(err){
                alert(err)
            });
            
        },

        mplay:function(mid){
            var that=this;
            this.showImg=true;
            //获取地址
            axios.get('https://autumnfish.cn/song/url?id='+mid).then(function(response){
                that.murl=response.data.data[0].url;
                //console.log(response.data.data[0])
            },function(err){
                alert(err);
            });
            //播放图片
            axios.get('https://autumnfish.cn/song/detail?ids='+mid).then(function(response){
                that.mpic=response.data.songs[0].al.picUrl;
               //console.log(response.data.songs[0]);
            },function(err){
                alert(err);
            })

            axios.get('https://autumnfish.cn/comment/hot?type=0&id='+mid).then(function(response){
                //console.log(response.data.hotComments);
                that.comment=response.data.hotComments;
            },function(err){
                alert(err);
            })
        }
    },

    created(){
        this.sh();
    }
});


/*获取歌词
说明 : 调用此接口 , 传入音乐 id 可获得对应音乐的歌词 ( 不需要登录 )

必选参数 : id: 音乐 id

接口地址 : /lyric

调用例子 : /lyric?id=33894312

返回数据如下图 : 获取歌词 */

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<meta http-equiv="Content-Typecontent="text/html; charset=UTF-8" />
<div id="app">
    <div class="head">
        <input  v-model="mdata"  @keyup.enter="sh"/><input type="button" value="搜索" @click="sh" />
    </div>
    <div class="mlist_l">
        <ul>播放列表
            <li v-for="item in mlist" @click="mplay(item.id)" >{{item.name}}</li>
        </ul>
    </div>
    
    <div class="main" >
        <img :src="mpic"  width="100%" height="100%" >
    </div>    
    

    <div class="right">
        <ol><h4>评论:</h4>
            <li v-for="item in comment">
                <img :src="item.user.avatarUrl" alt="" width="30px" height="30px">
                <span>{{item.user.nickname}}</span>
                <p>{{item.content}}</p>
            </li>
        </ol>
    </div>

    <div class="mplay">
        
        <img :src="mpic" id="mimg" v-show="showImg" >
        
        <audio controls="controls" autoplay="loop" :src="murl" ></audio>
    </div>

</div>

*{margin: 0; padding: 0}
#app{
    border:1px solid;
    width:1000px;
    height:660px;
    margin:0 auto;
    position: relative;
}
.head{
    height:100px;
    line-height:100px;
    text-align: center;
    background-color:antiquewhite;
}
.head input{
    margin:10px 10px;
}

.mlist_l{
    background: burlywood;
    font-size: 12px;
    width:196px;
    height:500px;
    border-left:2px solid skyblue;
    overflow:hidden;
    overflow-y:scroll;
    float:left;
    
}
.mlist_l::-webkit-scrollbar{
    width:2px;
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}

.mlist_l ul{
   
    width:200px;
    text-align: center;
}
.mlist_l li{
    list-style: none;
    border-bottom:1px solid red;
    margin:0 15px;
    padding:0 15px;
}
.mlist_l li:hover{
    color:red;
}

.main{
    float:left;
    width:450px;

    height:500px;
    
    overflow: hidden;
}


.right{
    background:silver;
    width:350px;
    height:500px;
    float:right;
}

#mimg{
    width:50px;
    height:50px;
    margin-right:15px;
}

.mplay{
    width:100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.right{
    border-left:2px solid skyblue;
    height:500px;
    overflow: hidden;
    overflow-y:scroll;
}
.right ol{  
    height: 500px;
    margin-right: 0;
    
}

.right::-webkit-scrollbar{
    
    width:2px;
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}

.right ol li{
    border-bottom:1px solid;
    list-style: none;
    padding: 5px;
}

.right ol li span{
    padding-left: 15px;
    vertical-align:top;
}