react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
222 lines • 5.99 kB
text/less
// 落地活动页样式
.landing{
max-width: 750px;
margin: 0 auto;
// banner图
.clgImg{
width: 100%;
height: 720px;
float: left;
}
// 价格、失效、倒计时
.userContent{
float: left;
width: 100%;
height: 144px;
background: rgba(255,70,40,1);
.money{
float: left;
height: 144px;
line-height: 144px;
padding-left: 24px;
color:rgba(255,255,255,1);
>span:nth-of-type(1){
font-size:40px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(255,255,255,1);
}
>span:nth-of-type(2){
font-size:80px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(255,255,255,1);
}
}
.validity{
float: left;
height: 144px;
padding: 38px 0 38px 6px;
>span{
display: block;
font-size: 24px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
}
>span:nth-of-type(1){
opacity: .8;
text-decoration:line-through;
}
>span:nth-of-type(2){
padding-top: 16px;
}
}
.clgTime{
height: 144px;
float: right;
padding: 32px 24px 32px 0;
.title{
text-align: right;
font-size:24px;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
}
.clgTimeBlock{
display: block;
margin-top: 8px;
overflow: hidden;
.clgBlockBig{
float: left;
width:48px;
height:48px;
line-height: 48px;
text-align: center;
background:rgba(255,255,255,1);
border-radius:8px;
font-size:28px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(255,60,13,1);
}
.clgBlockSmall{
color: rgba(255,255,255,1);
float: left;
height:48px;
line-height: 48px;
text-align: center;
padding: 0 8px;
font-size:24px;
font-family:PingFangSC-Medium;
}
}
.notStart{
color: rgba(255,255,255,1);
font-size:24px;
font-family:PingFangSC-Medium;
text-align: right;
margin-top: 23px;
}
.clgNone{
display: none
}
}
}
// 主页图片
.contentImg{
width: 100%;
float: left;
>img {
width: 100%;
height: 100%;
display: block;
}
}
// 主页按钮
.pageBtn{
position: fixed;
margin:auto;
left:0;
right:0;
bottom:20px;
width: 660px;
height: 96px;
line-height: 96px;
border-radius: 160px;
color: #ffffff;
font-size:38px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(255,255,255,1);
text-align: center;
z-index: 5;
}
.pageBtnAni{
animation: free_download .5s linear alternate infinite;
}
.pageBtnGray{
background: #dddddd;
}
// 配置不存在/羊毛妈妈/付费用户 弹窗样式
.info-notes{
line-height: 1.5;
color: #333;
width: 440px;
margin: 20px auto;
text-align: center;
}
}
// 落地约课页样式
.class{
width: 100%;
height: calc(100% + env(safe-area-inset-bottom)); // 兼容iphoneXS MAX底部留白
overflow: hidden;
background:rgba(249,250,252,1);
.content{
height: 820px;
margin: 32px;
border-radius:40px;
background:rgba(255,255,255,1);
overflow: hidden;
.img{
width: 360px;
height: 240px;
margin: 80px auto 0;
display: block;
}
.title{
text-align: center;
margin-top: 48px;
margin-bottom: 32px;
font-size:28px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
}
.tips{
height: 180px;
margin: 0 32px;
background: url(../../public/images/landing/class-bg.png) no-repeat center;
background-size: 100%;
padding-top: 48px;
font-size:28px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(205,116,50,1);
>p{
float: left;
padding-left: 36px;
}
>.section{
float: left;
>p:nth-of-type(2){
margin-top: 2px;
}
}
}
.classBtn{
display: block;
background:rgba(254,204,73,1);
border-radius:50px;
margin: 48px 32px 0;
height: 100px;
line-height: 100px;
text-align: center;
font-size:32px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
letter-spacing:1px;
}
}
}
// 限时秒杀按钮动画
@keyframes free_download{
0%{
transform:scale(0.9);
}
100%{
transform:scale(1);
}
}