用Vue实现Player

最新推荐文章于 2024-08-23 08:28:43 发布

HcwDavid12

最新推荐文章于 2024-08-23 08:28:43 发布

阅读量1.2k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/hcwdavid12/article/details/109850031

版权

这里主要是想学习一下vue+axios网络请求，跟着B站的大佬做了一个音乐播放器，图片资源上传sm.ms图床。代码在元素审查都能看到，这里贴一下完整的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>云播放器</title>
  <!-- 样式 -->
<!--  <link rel="stylesheet" href="./css/index.css">-->
  <style type="text/css">
    body,
    ul,
    dl,
    dd {
    
      margin: 0px;
      padding: 0px;
    }

    .wrap {
    
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url("https://i.loli.net/2020/03/23/gz9abCBAcphv6jF.jpg") no-repeat;
      background-size: 100% 100%;
    }

    .play_wrap {
    
      width: 800px;
      height: 544px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -400px;
      margin-top: -272px;
      /* background-color: #f9f9f9; */
    }

    .search_bar {
    
      height: 60px;
      background-color: #1eacda;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 11;
    }

    .search_bar img {
    
      margin-left: 23px;
    }

    .search_bar input {
    
      margin-right: 23px;
      width: 296px;
      height: 34px;
      border-radius: 17px;
      border: 0px;
      background: url("https://i.loli.net/2020/03/23/9FeKnVlohsY3krO.png") 265px center no-repeat
      rgba(255, 255, 255, 0.45);
      text-indent: 15px;
      outline: none;
    }

    .center_con {
    
      height: 435px;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
      position: relative;
    }

    .song_wrapper {
    
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 1;
    }

    .song_stretch {
    
      width: 600px;
    }

    .song_list {
    
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }
    .song_list::-webkit-scrollbar {
    
      display: none;
    }

    .song_list li {
    
      font-size: 12px;
      color: #333;
      height: 40px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 580px;
      padding-left: 10px;
    }

    .song_list li:nth-child(odd) {
    
      background-color: rgba(240, 240, 240, 0.3);
    }

    .song_list li a {
    
      display: block;
      width: 17px;
      height: 17px;
      background-image: url("https://i.loli.net/2020/03/23/chJ89uNpofneFrS.png");
      background-size: 100%;
      margin-right: 5px;
      box-sizing: border-box;
    }

    .song_list li b {
    
      font-weight: normal;
      width: 122px;
      overflow: hidden;
      text-overflow<