html：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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><a href="#" class="back"><span class="iconfont icon-left"></span></a><h3>极速问诊</h3><a href="#" class="note">问诊记录</a></header><!-- banner --><div class="banner"><img src="./assets/entry.png" alt=""><p><span>20s</span> 快速匹配专业医生</p></div><!-- 问诊类型 --><div class="type"><ul><li><a href="#"><div class="pic"><img src="./assets/type01.png" alt=""></div><div class="txt"><h4>三甲图文问诊</h4><p>三甲主治及以上级别医生</p></div><span class="iconfont icon-right"></span></a></li><li><a href="#"><div class="pic"><img src="./assets/type02.png" alt=""></div><div class="txt"><h4>普通图文问诊</h4><p>二甲主治及以上级别医生</p></div><span class="iconfont icon-right"></span></a></li></ul></div><script src="./js/flexible.js"></script>
</body>
</html>
less:
// out: ../css/@import "./base.less";//定义变量
@rootSize:37.5rem;//头部
header{display: flex;justify-content: space-between;padding: 0 (15 / @rootSize);height: (44 / @rootSize);// background-color: pink;line-height: (44/@rootSize);.icon-left{font-size: (22 / @rootSize);}h3{font-size: (17 / @rootSize);}.note{font-size: (15 / @rootSize);color: #2cb5a5;}
}// banner
.banner{margin-top: (30 / @rootSize);margin-bottom: (34 / @rootSize);text-align: center;img{margin-bottom: (18 / @rootSize);width: (240 / @rootSize);height: (206 / @rootSize);}p{font-size: (16 / @rootSize);span{color: #16c2a3;}}
}// 问诊类型
.type{padding: 0 (15 / @rootSize);li{margin-bottom: (15 / @rootSize);padding: 0 (0 / @rootSize);height: (78 / @rootSize);border: 1px solid #ededed;border-radius: (4 / @rootSize);a{display: flex;align-items: center;height: (78 / @rootSize);img{margin-right: (14 / @rootSize);width: (40 / @rootSize);height: (40 / @rootSize);}.txt{flex: 1;h4{font-size: (16 / @rootSize);color: #3c3e42;line-height: (24 / @rootSize);}p{font-size: (13 / @rootSize);color: #848484;}}}}
}
