main

分支 (1)

管理

管理

main

javascript-music
/
home.html

<!-- home.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>Document</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/home.css" />
  <script src="./assets/iconfont.js"></script>
</head>

<body>
  <!-- home.html -->
  <div class="wrapper d-flex flex-column">
    <header class="header" id="header-title">推荐页</header>
    <section id="app" class="content">
      <!-- 中间页面html结构 -->
      <div class="w">
        <div class="carousel-wrapper">
          <!-- 轮播图结构 -->
          <div class="carousel-container ">
            <!-- 切换箭头 -->
            <button class="carousel-control carousel-control-left carousel-control-hover">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-arrow-left"></use>
              </svg>
            </button>
            <button class="carousel-control carousel-control-right carousel-control-hover">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-arrow-right"></use>
              </svg>
            </button>
            <!-- 轮播图图片需要动态生成 -->
            <div class="carousel-item">
              <img src="https://tse2-mm.cn.bing.net/th/id/OIP.tXLPDc_5P-E7ca-KtD_UVAHaEK?pid=ImgDet&rs=1" alt="" />
            </div>
          </div>
          <!-- 指示器 -->
          <ul class="carousel-indicators d-flex">
            <li data-slide-to="0" class="active"></li>
            <li data-slide-to="1"></li>
            <li data-slide-to="2"></li>
          </ul>
        </div>
        <div class="recommend-playlist">
          <!-- 推荐歌单结构 -->
          <h3 class="recommend-playlist-header">
            推荐歌单<svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-right"></use>
            </svg>
          </h3>
          <div class="recommend-playlist-container d-flex justify-content-between">
            <!-- 推荐歌单需要动态生成，静态页面先手动复制4份 -->
            <div class="recommend-playlist-item d-flex flex-column hover">
              <div class="recommend-playlist-cover">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />
                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
              </div>
              <div class="recommend-playlist-title multi-text-omitted">
                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
              </div>
            </div>
            <div class="recommend-playlist-item d-flex flex-column hover">
              <div class="recommend-playlist-cover">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />
                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
              </div>
              <div class="recommend-playlist-title multi-text-omitted">
                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
              </div>
            </div>
            <div class="recommend-playlist-item d-flex flex-column hover">
              <div class="recommend-playlist-cover">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />
                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
              </div>
              <div class="recommend-playlist-title multi-text-omitted">
                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
              </div>
            </div>
            <div class="recommend-playlist-item d-flex flex-column hover">
              <div class="recommend-playlist-cover">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />
                <svg class="recommend-playlist-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
              </div>
              <div class="recommend-playlist-title multi-text-omitted">
                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
              </div>
            </div>
          </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>
        <section class="player-list">
          <!-- <section class="player-list display-none"> -->
          <h3 class="player-list-title">播放列表</h3>
          <ul class="player-list-ul">
            <li class="player-list-li d-flex justify-content-start pointer">
              <div class="song-name">sd</div>
              <div class="singer">da</div>
              <div class="song-time">ad</div>
            </li>
            <li class="player-list-li d-flex justify-content-start pointer">
              <div class="song-name">sd</div>
              <div class="singer">da</div>
              <div class="song-time">ad</div>
            </li>
          </ul>
        </section>
      </div>
    </section>
  </div>
</body>

</html>