master

分支 (1)

管理

管理

master

music
/
player.html

<!-- player.html -->
<!DOCTYPE html>
<html lang="zh-CN">

<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>音乐播放器</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./css/recommendList.css">
  <link rel="stylesheet" href="./css/player.css">
  <script src="./assets/iconfont.js"></script>
</head>

<body>
  <div class="wrapper d-flex  flex-column">
    <header class="header">
      <a href="#home"> 推荐页</a>
    </header>
    <section id="app" class="content">
      <!-- 此处为中间内容，通过 js 动态生成 -->
      <div class="player-background-image">
        <div class="player-content d-flex w ">
          <div class="player-album-cover d-flex">
            <!-- 歌曲封面 -->
            <div class="ablum">
              <div class="cover running">
                <img
                  src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
                  alt="">
              </div>
            </div>
          </div>
          <div class="player-lyric d-flex align-items-start">
            <!-- 歌曲和歌词信息 -->
            <h3 class="song-name">老街</h3>
            <div class="song-info">
              <span class="song-album">专辑：小黄</span>
              <span class="singer">歌手：李荣浩</span>
              <span class="song-sour">来源：小黄</span>
            </div>
            <div class="lyric-wrap">
              <p class="song-lyric-item"></p>
              <p class="song-lyric-item">一张褪色的照片</p>
              <p class="song-lyric-item">好像带给我一点点怀念</p>
              <p class="song-lyric-item">巷尾老爷爷卖的热汤面</p>
              <!-- 省略多行歌词可以自行复制上述格式 -->
            </div>
          </div>

        </div>
    </section>
    <section class="player-control d-flex justify-content-start ">
      <div class="player-control-songinfo d-flex justify-content-start">
        <div class="img ">
          <img
            src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
            alt="">
        </div>
        <div class="songinfo d-flex flex-column align-items-start">
          <span class="songname multi-text-omitted">歌曲一</span>
          <span class="single-text-omitted singer">歌手2323232323232</span>
        </div>
      </div>
      <div class="player-control-unit d-flex justify-content-between">
        <div class="control">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shangyiqu"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zanting"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiayiqu"></use>
          </svg>
        </div>
        <div class="d-flex justify-content-between">
          <div class="song-progress d-flex justify-content-between">
            <span class="current-time">00:00</span>
            <div class="progress" id='progress-bar'>
              <div class="progress-bar"></div>
              <div class="progress-dot"></div>
            </div>
            <span class="total-time">00:00</span>
          </div>
          <div class="volume d-flex">
            <svg class="icon volume-icon" aria-hidden="true">
              <use xlink:href="#icon-yinliang"></use>
            </svg>
            <div class="progress" id='volume-bar'>
              <div class="progress-bar"></div>
              <div class="progress-dot"></div>
            </div>
          </div>
        </div>
        <div class="list">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liebiaoxunhuan"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofangliebiao"></use>
          </svg>
        </div>
      </div>
    </section>
    <!-- <canvas id="canvas"></canvas> -->
    <script src="./js/util/util.js" type="module"></script>
  </div>
</body>

</html>