UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

222 lines 5.99 kB
// 落地活动页样式 .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); } }