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

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

.lottery {
    background-image: url("../../public/images/lottery/bg.png");
    background-repeat:  no-repeat;
    background-size: 100% 100%;
    width: 100%;
    min-height: 2080px;
    padding-top: 386px;
    box-sizing: border-box;
    position: relative;
    max-width: 750px;
    margin: 0 auto;
    img{
        pointer-events: none;
    }
    .rule {
        position: absolute;
        top: 0;
        right: 40px;
        width: 104px;
        height: 94px;
        cursor: pointer;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .plateWrapper {
        width: 600px;
        height: 600px;
        box-sizing: content-box;
        margin: 0 auto;
        position: relative;

        .awards_8,.awards_6  {
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
            width: 164px;
            height: 140px;
            div {
                width: 164px;
                height: 140px;
                text-align: center;
                font-size:20px;
                font-weight:400;
                color:rgba(194,92,24,1);
                box-sizing: border-box;
                position: absolute;
                z-index: 99;
                p{
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow:hidden;
                }
                img {
                    margin-top: 20px;
                    width: 80px;
                    height: 80px;
                }
            }
        }

        .awards_6 {

            div:nth-child(1) {
                transform: translate(0, -190px) rotateZ(0);
            }

            div:nth-child(2) {
                transform: translate(-160px, -96px) rotateZ(-60deg);
            }

            div:nth-child(3) {
                transform: translate(-156px, 90px) rotateZ(-120deg);
            }

            div:nth-child(4) {
                transform: translate(0, 190px) rotateZ(-180deg);
            }

            div:nth-child(5) {
                transform: translate(160px, 96px) rotateZ(-240deg);
            }

            div:nth-child(6) {
                transform: translate(156px, -90px) rotateZ(-300deg);
            }
        }

        .awards_8 {
            div:nth-child(1) {
                transform: translate(0, -190px);
            }

            div:nth-child(2) {
                transform: translate(-136px,-136px) rotateZ(-45deg);
            }

            div:nth-child(3) {
                transform: translate(-188px,0px) rotateZ(-90deg);
            }

            div:nth-child(4) {
                transform: translate(-134px,134px) rotateZ(-135deg);
            }

            div:nth-child(5) {
                transform: translate(0, 190px) rotateZ(-180deg);
            }

            div:nth-child(6) {
                transform: translate(136px,136px) rotateZ(-225deg);
            }

            div:nth-child(7) {
                transform: translate(188px, 0) rotateZ(-270deg);
            }

            div:nth-child(8) {
                transform: translate(134px,-134px) rotateZ(-315deg);
            }

        }

    }

    .plate {
        width: 100%;
        height: 100%;
        transform-origin: center;
        //transition-duration: 5s;
        transition-timing-function: cubic-bezier(0.39, 0.2, 0.04, 0.95);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .pointer {
        width: 212px;
        height: 290px;
        margin: 0 auto;
        position: absolute;
        top:128px;
        left:50%;
        transition: .1s all linear;
        transform: translate(-50%);
        z-index:10;
        > div {
            width: 100%;
            height: 100%;
            background: url("../../public/images/lottery/start.png") no-repeat center;
            background-size: contain;
            &:active{
                transform: scale(.9,.9)
            }
        }
    }
    .tips {
        padding-top:96px;
        text-align: center;
        .last {
            box-sizing: content-box;
            height:28px;
            font-size:28px;
            font-weight:600;
            color:rgba(255,255,255,1);
            line-height:28px;
            letter-spacing:2px;
            text-shadow:0px 4px 2px rgba(0,0,0,0.06);
            margin-bottom: 14px;
            span {
                color: #FFD34C;
                padding: 0 15px;
            }
        }
        .message {
            width:550px;
            margin: 0 auto;
            letter-spacing: normal;
            height:20px;
            font-size:20px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:18px;
            text-shadow:0px 4px 2px rgba(0,0,0,0.1);
        }
    }

    .modalRule {
        width: 100%;
        max-height: 580px;
        overflow-y: auto;
        img {
            width: 100%;
            display: block;
            max-width: 640px;
            margin: 0 auto;
            height: auto;
        }
    }
    .actions {
        width: 650px;
        padding-top: 70px;
        box-sizing: content-box;
        margin: 0 auto;
        height:105px;
    }
    .waiter {
        width: 224px;
        height: 100%;
        display: inline-block;
        background: url("../../public/images/lottery/waiter.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 84px;
        float: left;
    }
    .view {
        display: inline-block;
        width:312px;
        height: 100%;
        background: url("../../public/images/lottery/view-result.png") no-repeat;
        background-size: 100% 100%;
    }

    .not_begin {
        .desc {
            color: #000;
            text-align: center;
            font-weight:500;
            font-size: 28px;
            margin-bottom: 60px;
        }
    }
    .modalWaiter {
        img {
            width: 230px;
            height: 230px;
            height: auto;
            margin: 0 auto;
            display: block;
            pointer-events: auto !important;
        }
        p {
            padding: 30px 0;
            text-align: center;
            font-size:24px;
        }
        article {
            height:28px;
            text-align: center;
            font-size:28px;
            font-weight:600;
            color:rgba(255,65,65,1);
            line-height:28px;
        }
    }
    .modalEnd {
        text-align: center;
        font-size:28px;
        p {
            color: red;
            margin-bottom: 20px;
            font-size:28px;
            font-weight:600;
            color:rgba(255,65,65,1);
            line-height:28px;
        }

        img {
            width: 230px;
            height: 230px;
            height: auto;
            margin: 0 auto;
            display: block;
            padding: 20px 0;
            pointer-events: auto !important;
        }
        article{
            padding: 20px 0;
        }
    }
    .modalBeginOffline {
        text-align: center;
        p {
            height:28px;
            font-size:28px;
            font-weight:600;
            color:rgba(255,65,65,1);
            line-height:28px;
        }

        img {
            width: 230px;
            height: 230px;
            height: auto;
            margin: 0 auto;
            display: block;
            padding: 20px 0;
            pointer-events: auto !important;
        }

        article {
            height:24px;
            font-size:24px;
            font-weight:400;
            color:rgba(85,85,85,1);
            line-height:24px;
            white-space: nowrap;
        }
    }
    .modalNotBegin {
        text-align:center;
        > p {
            height:28px;
            font-size:28px;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height:28px;
            letter-spacing:2px;
        }
        .time {
            padding: 60px 0;
            height:120px;
            box-sizing: content-box;
            display: inline-block;
            margin: 0 auto;
            transform: translate(10px);
            > * {
                display: inline-block;
            }
            .wrapper {
                height: inherit;
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    height: 1px; /*no*/
                    top: 50%;
                    left:0;
                    transform: translateY(-50%);
                    width: 100%;
                    background: #fff;
                    z-index:10;
                }
                span {
                    width:88px;
                    height: inherit;
                    text-align: center;
                    font-size: 72px;
                    line-height: 120px;
                    margin-right: 8px;
                    color: #fff;
                    display: inline-block;
                    background:rgba(255,65,65,1);
                    border-radius:14px;
                }
            }
            .desc {
                vertical-align: bottom;
                font-size:28px;
                font-weight:600;
                color:rgba(255,109,109,1);
            }
        }
        article {
            height:24px;
            text-align: center;
            font-size:24px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:24px;
        }
    }
    .shakeTrailCourse {
        text-align: center;
        img {
            margin-bottom: 30px;
            width: 300px;
            height: auto;
        }
        p {
            font-size:32px;
            font-weight:600;
            color:rgba(51,51,51,1);
            line-height:42px;
            letter-spacing:2px;
        }
    }
    .share_num_none {
        text-align: center;
        img {
            width: 248px;
            height: 248px;
            margin-bottom: 40px;
        }
        p {
            margin-bottom: 24px;
            font-size:28px;
            font-weight:500;
            color:rgba(85,85,85,1);
            line-height:28px;
            letter-spacing:2px;
        }
    }

    .num_none {
        text-align: center;
        font-size:32px;
        img {
            width: 300px;
            height: auto;
            margin-bottom: 40px;
        }
    }
    .no_prize {
        text-align: center;
        img {
            width: 300px;
            height: auto;
            margin-bottom: 40px;
        }
        p {
            font-size:32px;
            font-weight:600;
            color:rgba(51,51,51,1);
            line-height:42px;
            letter-spacing:2px;
        }
    }

    .prize {
        text-align: center;
        img {
            width: 300px;
            height: auto;
            margin-bottom: 40px;
        }
        p {
            font-size:32px;
            font-weight:600;
            color:rgba(51,51,51,1);
            line-height:42px;
            letter-spacing:2px;
        }
    }

    .afterFooter {
        padding: 16px 0;
        width:500px;
        margin: 0 auto;
        font-size:24px;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:24px;
        text-align: center;
    }
}
.modalFooter{
    margin-top: 30px;
    text-align: center;
    > * {
        width: 240px;
        height: 88px;
        display: inline-block;
        border-radius: 43px;
        line-height: 88px;
        font-size: 28px;
        text-align: center;
        border: 2px solid #FF6633 !important; /* no */
    }
    .cancelBtn{
        background: #fff;
        color: #FF6633;
    }
    .confirmBtn{
      color: #fff;
      background: #FF6633;
    }

    > *:nth-child(2) {
      margin-left: 50px;
    }
  }