移动端：酷我音乐

 

1、头部

<header>
    <div class="left"></div>
    <a href="#">下载APP</a>
  </header>

// 头部
  header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw);
    // 固定定位的盒子，宽度靠内容撑开，希望宽度100%
    width: 100%;
    height: (50 / @vw);
    background-color: #fff;
    // 左边
    .left {
      width: (235 / @vw);
      height: (50 / @vw);
      background-image: url(../assets/head.png);
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    a {
      width: (80 / @vw);
      height: (30 / @vw);
      background-color: #ffe31b;
      border-radius: (15 / @vw);
      text-align: center;
      line-height: (30 / @vw);
      font-size: (14 / @vw);
    }
  }

2、搜索区域

<!-- 搜索 -->
  <div class="search">
    <div class="txt">
      <span class="iconfont icon-sousuo"></span>
      <span>搜索你想听的歌曲</span>
    </div>
  </div>

// 搜索
  .search {
    // 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可
    margin-top: (50 / @vw);
    padding: (10 / @vw) (15 / @vw);
    height: (52 / @vw);
    // background-color: pink;
    .txt {
      height: (32 / @vw);
      background-color: #f2f4f5;
      border-radius: (16 / @vw);
      text-align: center;
      line-height: (32 / @vw);
      color: #a1a4b3;
      font-size: (14 / @vw);
      .iconfont {
        font-size: (16 / @vw);
      }
    }
  }

3、banner区域

 <!-- banner -->
  <div class="banner">
    <ul>
      <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
    </ul>
  </div>

 // banner
  .banner {
    padding: 0 (15 / @vw);
    height: (108 / @vw);
    // background-color: pink;
    ul {
      li {
        width: (345 / @vw);
        height: (108 / @vw);
        img {
          width: 100%;
          height: 100%;
          // cover完全覆盖
          // 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形
          object-fit: cover;
          border-radius: (5 / @vw);
        }
      }
    }
  }

4、标题公共样式

<!-- 排行榜 -->
  <div class="list">
    <!-- 标题 -->
    <div class="title">
      <h4>酷我排行榜</h4>
      <a href="#">更多<span class="iconfont icon-right"></span></a>
    </div>

// 标题 → 公共样式
.title {
display: flex;
justify-content: space-between;
margin-bottom: (16 / @vw);
line-height: (25 / @vw);
h4 {
font-size: (20 / @vw);
}
a{
font-size: (12 / @vw);
color: #a1a4b3;
}
}

 

5、排行榜内容

<!-- 内容 -->
    <div class="content">
      <ul>
        <li>
          <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
          <div class="txt">
            <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
            <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
            <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
            <a href="#">3.缺氧 - 轩姨（相信光）</a>
          </div>
        </li>
      </ul>
    </div>
  </div>

// 排行榜
  .content {
    margin-top: (20 / @vw);
    padding: 0 (15 / @vw);
    li {
      display: flex;
      margin-bottom: (16 / @vw);
      height: (105 / @vw);
      background-color: #fff;
      border-radius: (10 / @vw);
      .pic {
        margin-right: (20 / @vw);
        img {
          width: (105 / @vw);
          height: (105 / @vw);
          border-radius: (10 / @vw);
        }
      }
      .txt {
        a {
          display: block;
          font-size: (12 / @vw);
          color: #a1a4b3;
          line-height: 1.8;
        }
  
        .more {
          font-size: (14 / @vw);
          color: #333;
          .iconfont {
            font-size: (16 / @vw);
          }
        }
      }
    }
  }

6、推荐歌单布局

<!-- 内容 -->
 <div class="content">
    <ul>
      <li>
        <div class="pic">
          <img src="./assets/song01.jpeg" alt="">
          <div class="cover">18.2W</div>
        </div>
        <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
      </li>
    </ul>
  </div>
</div>

// 图片
.pic {
position: relative;
width: (105 / @vw);
height: (105 / @vw);
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: (10 / @vw);
}
.cover {
position: absolute;
left: 0;
bottom: 0;
width: (70 / @vw);
height: (28 / @vw);
background-color: rgba(0,0,0,0.8);
border-radius: 0 (10 / @vw) 0 (10 / @vw);
text-align: center;
line-height: (28 / @vw);
color: #Ɗ f;
font-size: (14 / @vw);
}
}
// 文字
.txt {
font-size: (14 / @vw);
}

7、下载区域

 <!-- 安装，下载 -->
  <div class="download">
    <img src="./assets/logo.png" alt="">
    <p>安装酷我音乐 发现更多好音乐</p>
    <span class="iconfont icon-right"></span>
  </div>

// 下载
  .download {
    position: fixed;
    left: (15 / @vw);
    bottom: (30 / @vw);
  
    display: flex;
    align-items: center;
    padding: 0 (10 / @vw) 0 (15 / @vw);
    width: (345 / @vw);
    height: (45 / @vw);
    background-color: #fff;
    border-radius: (22 / @vw);
    img {
      margin-right: (10 / @vw);
      width: (36 / @vw);
      height: (36 / @vw);
    }
    p {
      flex: 1;
      font-size: (14 / @vw);
    }
    span {
      width: (32 / @vw);
      height: (32 / @vw);
      background-color: #f2f3f5;
      border-radius: 50%;
      text-align: center;
      line-height: (32 / @vw);
      font-size: (16 / @vw);
    }
  }