master

分支 (1)

管理

管理

master

music
/
recommendList.html

<!-- recommendList.html -->
<!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>音乐播放器</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/home.css" />
  <!-- 引入recommendList.css-->
  <link rel="stylesheet" href="./css/recommendList.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">
      <div class="w">
        <!-- 此处为推荐页，内容主要包括两个部分：歌单介绍和歌单列表 -->
        <div class="recommend-header">
          <a href="#home">首页</a>/
          <span>推荐歌单页</span>
        </div>
        <div class="recommend-wrapper">
          <div class="recommend-describe d-flex justify-content-start">
            <!-- 歌单介绍 -->
            <div class="recommend-describe-left">
              <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="recommend-describe-right d-flex flex-column align-items-start">
              <h4 class="recommend-describe-right-title single-text-omitted">
                一旦热爱生活，生活就会教你治愈一切的魔法
              </h4>
              <div class="recommend-describe-right-creator d-flex">
                <img class="avatar"
                  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="" />
                <span class="creator">歌单创造者</span>
                <span class="create-time">创建时间</span>
              </div>
              <div class="recommend-describe-right-add d-flex">
                <span class="btn">播放全部</span><span class="add">+</span>
              </div>
              <div class="recommend-describe-right-info single-text-omitted">
                <div class="info">
                  <span class="label">标签：</span>
                  <span class="tag">华语</span> / <span class="tag">流行</span> /
                  <span class="tag">治愈</span>
                </div>
                <div class="info">
                  <span class="label">歌曲：</span>
                  <span class="label-info">30</span>
                  <span class="label">播放：</span>
                  <span class="label-info">275万</span>
                </div>
                <div class="info">
                  <span class="label">简介：</span>
                  <span class="label-info">你本身也漂亮温柔可爱</span>
                </div>
              </div>
            </div>
          </div>
          <div class="recommend-list">
            <!-- 歌单列表  -->
            <h4 class="recommend-list-title">歌曲列表</h4>
            <!-- 表格头部 -->
            <ul class="recommend-list-songlist-header d-flex justify-content-start">
              <li class="songlist-header-name">歌曲</li>
              <li class="songlist-header-author">歌手</li>
              <li class="songlist-header-album">专辑</li>
              <li class="songlist-header-time">时长</li>
            </ul>
            <!-- 表格内容 -->
            <ul class="recommend-list-songlist-body">
              <li class="songlist-item odd d-flex justify-content-start">
                <div class="songlist-number font-color">
                  <span class="index">01</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
                  </svg>
                </div>
                <div class="songlist-songname">清明雨上</div>
                <div class="songlist-artist font-color">许嵩</div>
                <div class="songlist-album font-color">清明雨上</div>
                <div class="songlist-time font-color">3：13</div>
              </li>
              <li class="songlist-item even d-flex justify-content-start">
                <div class="songlist-number font-color">
                  <span class="index">02</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
                  </svg>
                </div>
                <div class="songlist-songname">清明雨上</div>
                <div class="songlist-artist font-color">许嵩</div>
                <div class="songlist-album font-color">清明雨上</div>
                <div class="songlist-time font-color">3：13</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="player-control d-flex justify-content-start ">
      <!-- 页面底部html结构 -->
      <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="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 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">
          <!-- 歌曲循环和列表 -->
        </div>
      </div>
    </section>
  </div>
</body>

</html>