前端笔记-day13

文章目录

- 01-体验vw和vh
- 02-vw适配
- - 02-适配.html
  - demo.less
  - demo.css
- 03-vw和vh不能混用
- - 03-vw和vh.html
  - demo.less
  - demo.css
- 04-综合案例-酷我
- - demo.html
  - demo.less
  - base.less
  - demo.css
- 酷我（标准版）
- - index.html
  - index.less
  - index.css

01-体验vw和vh

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* vw和vh是相对视口宽度计算结果，可以直接实现移动端适配效果（rem需要搭配js媒体查询使用） */
        .box{
            /* 
            width: 50vw;
            height: 30vw;
            background-color: pink; 
            */
            width: 50vh;
            height: 30vh;
            background-color: pink;

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

02-vw适配

02-适配.html

像素转vw、vh：px单位尺寸/ 1/100视口的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

demo.less

.box{
    width: (68 / 3.75vw);
    height: (29 / 3.75vw);
    background-color: pink;
}
.box{
    width: (68 / 6.67vh);
    height: (29 / 6.67vh);
    background-color: pink;
}

demo.css

.box {
  width: 18.13333333vw;
  height: 7.73333333vw;
  background-color: pink;
}
.box {
  width: 10.19490255vh;
  height: 4.34782609vh;
  background-color: pink;
}

在这里插入图片描述

03-vw和vh不能混用

比例会改变

03-vw和vh.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

demo.less

.box{
    width: (68 / 3.75vw);
    height: (29 / 6.67vh);
    background-color: pink;
}

demo.css

.box {
  width: 18.13333333vw;
  height: 4.34782609vh;
  background-color: pink;
}

在这里插入图片描述

04-综合案例-酷我

在这里插入图片描述

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <!-- 顶部固定区域 -->
    <div class="top">
        <div class="left">
            <img src="./assets/logo.png" alt="">
            <h3>酷我音乐</h3>
            <p>打开APP收藏下载</p>
        </div>
        <div class="right">
            <a href="#">下载APP</a>
        </div>
    </div>
    <!-- 搜索区域 -->
    <div class="search">
       <div>
            <span class="iconfont icon-sousuo"></span>
            <p>搜索你想听的歌曲</p>
       </div>
    </div>
    <!-- 图片区域 -->
    <div class="pic">
        <ul>
            <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
            <!-- <li><a href="#"><img src="./assets/banner02.jpeg" alt=""></a></li> -->
            <!-- <li><a href="#"><img src="./assets/banner03.jpeg" alt=""></a></li> -->
            <!-- <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li> -->

        </ul>
    </div>
    <!-- 排行榜区域 -->
    <div class="rank">
        <div class="head">
            <h2>酷我排行版</h2>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <div class="body">
            <ul>
                <li>
                    <a href="#"><img src="./assets/icon_rank_hot.png" alt=""></a>
                    <dl>
                        <dt class="dt"><a href="#">酷我热歌榜 <span class="iconfont icon-right"></span></a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                    </dl>
                </li>
                <li>
                    <a href="#"><img src="./assets/icon_rank_new.png" alt=""></a>
                    <dl>
                        <dt class="dt"><a href="#">酷我热歌榜 <span class="iconfont icon-right"></span></a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                    </dl>
                </li>
                <li>
                    <a href="#"><img src="./assets/icon_rank_rise.png" alt=""></a>
                    <dl>
                        <dt class="dt"><a href="#">酷我热歌榜 <span class="iconfont icon-right"></span></a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                        <dt><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a></dt>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 推荐歌单区域 -->
    <div class="recommend">
        <div class="head">
            <h2>推荐歌单</h2>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
        <div class="body">
            <ul>
                <li>
                    <div class="img">
                        <img src="./assets/song01.jpeg" alt="">
                        <div>18.2W</div>
                    </div>
                    <span>合适的变化不大的驾驶舱内的就</span>
                </li>
                <li>
                    <div class="img">
                        <img src="./assets/song01.jpeg" alt="">
                        <div>18.2W</div>
                    </div>
                    <span>合适的变化不大的驾驶舱内的就</span>
                </li>
                <li>
                    <div class="img">
                        <img src="./assets/song01.jpeg" alt="">
                        <div>18.2W</div>
                    </div>
                    <span>合适的变化不大的驾驶舱内的就</span>
                </li>
                <li>
                    <div class="img">
                        <img src="./assets/song01.jpeg" alt="">
                        <div>18.2W</div>
                    </div>
                    <span>合适的变化不大的驾驶舱内的就</span>
                </li>
                <li>
                    <div class="img">
                        <img src="./assets/song01.jpeg" alt="">
                        <div>18.2W</div>
                    </div>
                    <span>合适的变化不大的驾驶舱内的就</span>
                </li>
                <li>
                    <div class="img">
                        <img src="./assets/song01.jpeg" alt="">
                        <div>18.2W</div>
                    </div>
                    <span>合适的变化不大的驾驶舱内的就</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部固定区域 -->
    <div class="bottom">
        <a href="#">
            <img src="./assets/logo.png" alt="">
            <p>安装酷我音乐 发现更多好音乐</p>
            <span class="iconfont icon-right"></span>
        </a>
    </div>
</body>
</html>

demo.less

// out:../css/demo.css
@import "./base.less";
@key:3.75vw;
body{
    background-color: #f9fafb;
}
.top{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    
    width: 100%;
    height: (50 / @key);
    background-color: #fff;

    padding: 0 (15 / @key);
    .left{
        display: flex;
        flex: 1;
        height: (50 / @key);
        justify-content: left;
        align-items: center;
        img{
            margin-left: (15 /@key);
            margin-right: (5 / @key);
            width: (30 / @key);
            height: (30 / @key); 
        }
        p{
            margin-left: (10 / @key);
            color: grey;
            font-size: (12 / @key);
        }
    }
    .right{
        // justify-content: right;
        display: flex;   
        align-items: center;   
        a{
            display: block;
            text-align: center;
            line-height: (30 / @key);
            width: (80 / @key);
            height: (30 / @key);
            background-color: #ffe31b;
            border-radius: 4vw;
            font-size: (14 / @key);
        }
    }
       
}

.search{
    margin-top: (50 / @key);
    width: 100%;
    height: (52 / @key);
    // background-color: pink;
    padding: (10 / @key) (10 / @key);
    
    div{
        display: flex;
        justify-content: center;
        align-items: center;
        width: (100%);
        height: 100%;
        background-color:#f2f4f5;
        border-radius: 4vw;
        color: #a1a4b3;
        font-size: (14 / @key);
        span{
            font-size: (16 / @key);
        }
    }
}

.pic{
    width: 100%;
    ul{
        width: 100%;    
        padding: 0 (15 / @key) 0 (15 / @key);
        display: flex;
        li{
            height: (108 / @key);
            img{
                width: (345 / @key);
                height: 100%;
                border-radius: 1vw;
            }
            margin-right:(15 / @key);
        }
        animation: move  1s steps(3) infinite;
    }
}
@keyframes move {
    from{
        background-position: 0 0;
    }
    to{
        background-position: (-(345 / @key)*3) 0;
    }  
}
.rank{
    width: 100%;
    height: (420 / @key);
    // background-color: pink;
    padding: 0 (15 / @key);
    .head{
        display: flex;
        width: 100%;
        height: (50 / @key);
        align-items: center;
        a{
            margin-left: auto;
            color: #a1a4b3;
        }
    }
    .body{
        li{
            display: flex;
            img{
                width: (105/@key);
                height: (105/@key);
                margin-right: (20 / @key);
                border-radius: 2vw;
            }
            dl{
                display: block;
                text-align: left;
                width: (215 / @key);
                height: (105 / @key);
                .dt{
                    height: (28/@key);
                    font-size: 3.5vw;
                    a{
                        color: black;
                    }
                }
                dt{
                    height: (21/@key);
                    font-size: 3.2vw;
                    a{
                        color: #a1a4b3;
                    }
                }
            }
        }
    }
}

.recommend{
    width: 100%;
    height: (360 / @key);
    // background-color: pink;
    padding: 0 (15 / @key);
    .head{
        display: flex;
        width: 100%;
        height: (50 / @key);
        align-items: center;
        a{
            margin-left: auto;
            color: #a1a4b3;;
        }
    }
    .body{
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
    
            li{
                width: (105/@key);
                height: (145 / @key);
                font-size: 3.7vw;
                margin-bottom: (10 / @key);
                .img{
                    position: relative;
                    width: (105/@key);
                    height: (105/@key);   
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 2vw;
                    }
                    div{
                        width: (70 / @key);
                        height: (28 /@key);
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        color: #fff;
                        
                        background-color: rgba(0,0,0,0.8);
                        border-radius: 2vw;
                        text-align: center;
                        line-height:  (28 /@key);;
                    }
                }
            }
        }
    }
}

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

base.less

// out: false
*,
::after,
::before {
  box-sizing: border-box;
}

body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    PingFangSC-Regular,
    "PingFang SC",
    "Microsoft YaHei",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  color: #333;
}

img {
  vertical-align: bottom;
}

ul {
  list-style-type: none;
}

a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

demo.css

*,
::after,
::before {
  box-sizing: border-box;
}
body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
img {
  vertical-align: bottom;
}
ul {
  list-style-type: none;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  background-color: #f9fafb;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 13.33333333vw;
  background-color: #fff;
  padding: 0 4vw;
}
.top .left {
  display: flex;
  flex: 1;
  height: 13.33333333vw;
  justify-content: left;
  align-items: center;
}
.top .left img {
  margin-left: 4vw;
  margin-right: 1.33333333vw;
  width: 8vw;
  height: 8vw;
}
.top .left p {
  margin-left: 2.66666667vw;
  color: grey;
  font-size: 3.2vw;
}
.top .right {
  display: flex;
  align-items: center;
}
.top .right a {
  display: block;
  text-align: center;
  line-height: 8vw;
  width: 21.33333333vw;
  height: 8vw;
  background-color: #ffe31b;
  border-radius: 4vw;
  font-size: 3.73333333vw;
}
.search {
  margin-top: 13.33333333vw;
  width: 100%;
  height: 13.86666667vw;
  padding: 2.66666667vw 2.66666667vw;
}
.search div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f2f4f5;
  border-radius: 4vw;
  color: #a1a4b3;
  font-size: 3.73333333vw;
}
.search div span {
  font-size: 4.26666667vw;
}
.pic {
  width: 100%;
}
.pic ul {
  width: 100%;
  padding: 0 4vw 0 4vw;
  display: flex;
  animation: move 1s steps(3) infinite;
}
.pic ul li {
  height: 28.8vw;
  margin-right: 4vw;
}
.pic ul li img {
  width: 92vw;
  height: 100%;
  border-radius: 1vw;
}
@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -276vw 0;
  }
}
.rank {
  width: 100%;
  height: 112vw;
  padding: 0 4vw;
}
.rank .head {
  display: flex;
  width: 100%;
  height: 13.33333333vw;
  align-items: center;
}
.rank .head a {
  margin-left: auto;
  color: #a1a4b3;
}
.rank .body li {
  display: flex;
}
.rank .body li img {
  width: 28vw;
  height: 28vw;
  margin-right: 5.33333333vw;
  border-radius: 2vw;
}
.rank .body li dl {
  display: block;
  text-align: left;
  width: 57.33333333vw;
  height: 28vw;
}
.rank .body li dl .dt {
  height: 7.46666667vw;
  font-size: 3.5vw;
}
.rank .body li dl .dt a {
  color: black;
}
.rank .body li dl dt {
  height: 5.6vw;
  font-size: 3.2vw;
}
.rank .body li dl dt a {
  color: #a1a4b3;
}
.recommend {
  width: 100%;
  height: 96vw;
  padding: 0 4vw;
}
.recommend .head {
  display: flex;
  width: 100%;
  height: 13.33333333vw;
  align-items: center;
}
.recommend .head a {
  margin-left: auto;
  color: #a1a4b3;
}
.recommend .body ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recommend .body ul li {
  width: 28vw;
  height: 38.66666667vw;
  font-size: 3.7vw;
  margin-bottom: 2.66666667vw;
}
.recommend .body ul li .img {
  position: relative;
  width: 28vw;
  height: 28vw;
}
.recommend .body ul li .img img {
  width: 100%;
  height: 100%;
  border-radius: 2vw;
}
.recommend .body ul li .img div {
  width: 18.66666667vw;
  height: 7.46666667vw;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 2vw;
  text-align: center;
  line-height: 7.46666667vw;
}
.bottom {
  position: fixed;
  bottom: 12vw;
  left: 4vw;
}
.bottom a {
  width: 92vw;
  height: 12vw;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-radius: 10vw;
  padding: 5.33333333vw;
}
.bottom a img {
  width: 9.6vw;
  height: 9.6vw;
  margin-right: 2.66666667vw;
}
.bottom a p {
  flex: 1;
  font-size: 3.73333333vw;
}
.bottom a span {
  width: 8.53333333vw;
  height: 8.53333333vw;
  text-align: center;
  line-height: 8.53333333vw;
  background-color: #f2f3f5;
  border-radius: 50%;
}

在这里插入图片描述

酷我（标准版）

index.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="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 头部 -->
  <header>
    <div class="left"></div>
    <a href="#">下载APP</a>
  </header>

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

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

  <!-- 排行榜 -->
  <div class="list">
    <!-- 标题 -->
    <div class="title">
      <h4>酷我排行榜</h4>
      <a href="#">更多<span class="iconfont icon-right"></span></a>
    </div>
    <!-- 内容 -->
    <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>
        <li>
          <div class="pic"><img src="./assets/icon_rank_new.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>
        <li>
          <div class="pic"><img src="./assets/icon_rank_rise.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>

  <!-- 推荐歌单 -->
  <div class="recommend">
    <!-- 标题 -->
    <div class="title">
      <h4>推荐歌单</h4>
      <a href="#">更多<span class="iconfont icon-right"></span></a>
    </div>
    <!-- 内容 -->
    <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>
        <li>
          <div class="pic">
            <img src="./assets/song02.jpeg" alt="">
            <div class="cover">18.2W</div>
          </div>
          <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
        </li>
        <li>
          <div class="pic">
            <img src="./assets/song03.jpeg" alt="">
            <div class="cover">18.2W</div>
          </div>
          <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
        </li>
        <li>
          <div class="pic">
            <img src="./assets/song02.jpeg" alt="">
            <div class="cover">18.2W</div>
          </div>
          <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
        </li>
        <li>
          <div class="pic">
            <img src="./assets/song03.jpeg" alt="">
            <div class="cover">18.2W</div>
          </div>
          <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
        </li>
        <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>

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

index.less

// out: ../css/

@import "./base";

body {
  background-color: #f9fafb;
}

@vw:3.75vw;

// 头部
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);
  }
}

// 搜索
.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);
    }
  }
}

// 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);
      }
    }
  }
}

// 排行榜
.list {
  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);
        }
      }
    }
  }
}

// 标题 → 公共样式
.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;
  }
}

// 推荐歌单
.recommend {
  padding: 0 (15 / @vw);
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      margin-bottom: (16 / @vw);
      width: (105 / @vw);
      height: (143 / @vw);
      // background-color: pink;
  // 图片
  .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: #fff;
      font-size: (14 / @vw);
    }
      }
      // 文字
      .txt {
        font-size: (14 / @vw);
      }
    }
  }
}

// 下载
.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);
  }
}

index.css

*,
::after,
::before {
  box-sizing: border-box;
}
body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
img {
  vertical-align: bottom;
}
ul {
  list-style-type: none;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  background-color: #f9fafb;
}
header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
  width: 100%;
  height: 13.33333333vw;
  background-color: #fff;
}
header .left {
  width: 62.66666667vw;
  height: 13.33333333vw;
  background-image: url(../assets/head.png);
  background-size: contain;
  background-repeat: no-repeat;
}
header a {
  width: 21.33333333vw;
  height: 8vw;
  background-color: #ffe31b;
  border-radius: 4vw;
  text-align: center;
  line-height: 8vw;
  font-size: 3.73333333vw;
}
.search {
  margin-top: 13.33333333vw;
  padding: 2.66666667vw 4vw;
  height: 13.86666667vw;
}
.search .txt {
  height: 8.53333333vw;
  background-color: #f2f4f5;
  border-radius: 4.26666667vw;
  text-align: center;
  line-height: 8.53333333vw;
  color: #a1a4b3;
  font-size: 3.73333333vw;
}
.search .txt .iconfont {
  font-size: 4.26666667vw;
}
.banner {
  padding: 0 4vw;
  height: 28.8vw;
}
.banner ul li {
  width: 92vw;
  height: 28.8vw;
}
.banner ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.33333333vw;
}
.list {
  margin-top: 5.33333333vw;
  padding: 0 4vw;
}
.list li {
  display: flex;
  margin-bottom: 4.26666667vw;
  height: 28vw;
  background-color: #fff;
  border-radius: 2.66666667vw;
}
.list li .pic {
  margin-right: 5.33333333vw;
}
.list li .pic img {
  width: 28vw;
  height: 28vw;
  border-radius: 2.66666667vw;
}
.list li .txt a {
  display: block;
  font-size: 3.2vw;
  color: #a1a4b3;
  line-height: 1.8;
}
.list li .txt .more {
  font-size: 3.73333333vw;
  color: #333;
}
.list li .txt .more .iconfont {
  font-size: 4.26666667vw;
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4.26666667vw;
  line-height: 6.66666667vw;
}
.title h4 {
  font-size: 5.33333333vw;
}
.title a {
  font-size: 3.2vw;
  color: #a1a4b3;
}
.recommend {
  padding: 0 4vw;
}
.recommend ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recommend ul li {
  margin-bottom: 4.26666667vw;
  width: 28vw;
  height: 38.13333333vw;
}
.recommend ul li .pic {
  position: relative;
  width: 28vw;
  height: 28vw;
}
.recommend ul li .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2.66666667vw;
}
.recommend ul li .pic .cover {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18.66666667vw;
  height: 7.46666667vw;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 2.66666667vw 0 2.66666667vw;
  text-align: center;
  line-height: 7.46666667vw;
  color: #fff;
  font-size: 3.73333333vw;
}
.recommend ul li .txt {
  font-size: 3.73333333vw;
}
.download {
  position: fixed;
  left: 4vw;
  bottom: 8vw;
  display: flex;
  align-items: center;
  padding: 0 2.66666667vw 0 4vw;
  width: 92vw;
  height: 12vw;
  background-color: #fff;
  border-radius: 5.86666667vw;
}
.download img {
  margin-right: 2.66666667vw;
  width: 9.6vw;
  height: 9.6vw;
}
.download p {
  flex: 1;
  font-size: 3.73333333vw;
}
.download span {
  width: 8.53333333vw;
  height: 8.53333333vw;
  background-color: #f2f3f5;
  border-radius: 50%;
  text-align: center;
  line-height: 8.53333333vw;
  font-size: 4.26666667vw;
}