react-app-shell/activity/src/views/landing/landing.less

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

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