文章目录
- 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;
}
