peko-h5/view/peko/activity/explore/css/index.scss

@function px2rem($px, $rem:75) {
    @return $px / $rem+rem;
}

@font-face {
    font-family: 'pingfang-medium';
    src: url('../../../common/fonts/PingFang-Medium.ttf');
    src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
        url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
        url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
}

@font-face {
    font-family: 'pingfang-bold';
    src: url('../../../common/fonts/PingFang-Bold.ttf');
    src: url('../../../common/fonts/PingFang-Bold.ttf') format('woff'),
        url('../../../common/fonts/PingFang-Bold.ttf') format('truetype'),
        url('../../../common/fonts/PingFang-Bold.ttf') format('svg');
}

@font-face {
    font-family: 'pingfang-regular';
    src: url('../../../common/fonts/PingFang-Regular.ttf');
    src: url('../../../common/fonts/PingFang-Regular.ttf') format('woff'),
        url('../../../common/fonts/PingFang-Regular.ttf') format('truetype'),
        url('../../../common/fonts/PingFang-Regular.ttf') format('svg');
}

body {
    font-family: 'pingfang-medium';
    background: #7956F2;
}

.wrap {
    // display: none;
    background: url('../images/bg.png') no-repeat 0 0/100%;
    // min-height: px2rem(2896);
    overflow: hidden;

    .rule-btn {
        position: relative;

        div {
            position: absolute;
            top: px2rem(46);
            right: 0;
            width: px2rem(138);
            height: px2rem(48);
            line-height: px2rem(48, );
            background: url(../images/introduce.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #FFFFFF;
            font-size: px2rem(26, );
        }
    }

    ul.buy-area {
        margin-top: 4.133333rem;
        margin-bottom: px2rem(240);
        overflow: hidden;

        li {
            position: relative;
            width: px2rem(600);
            height: px2rem(460);
            margin: px2rem(62) auto 0;
            overflow: hidden;

            .headwear-info {
                margin-left: px2rem(290);
                margin-top: px2rem(180);

                .headwear-name {
                    font-family: 'pingfang-bold';
                    font-size: px2rem(30);
                    font-weight: bold;
                    color: #FFF600;
                }

                .headwear-price {
                    line-height: px2rem(40);
                    color: #fff;
                    font-size: px2rem(22);
                }

                .headwear-award {
                    color: #fff;
                    font-size: px2rem(22);
                    margin-top: px2rem(20);
                }

                .buy-btn {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: px2rem(30);
                    width: px2rem(360);
                    height: px2rem(72);
                    line-height: px2rem(72, );
                    background: url('../images/buy-btn.png') no-repeat 0 0/100% 100%;
                    font-size: px2rem(30);
                    cursor: pointer;
                    color: #7944DA;
                    font-size: px2rem(32, );
                    text-align: center;
                    font-weight: bold;

                    .headwear-price-wrap {
                        img.icon {
                            width: px2rem(38);
                            height: px2rem(30);
                            margin-left: px2rem(20);
                        }

                    }

                    .tip {
                        width: px2rem(200);
                        height: px2rem(60);
                        line-height: px2rem(60);
                        background: url('../images/buy-btn.png') no-repeat 0 0/100% 100%;
                        text-align: center;
                        font-weight: bold;
                        color: #3E0D07;
                    }
                }
            }
        }
    }

}

.mine {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: px2rem(120);
    // background-color: #6D49EF;
    background: url(../images/bottom.png) no-repeat;
    // border-top: 2px solid #BFFFFF;
    display: flex;
    align-items: center;

    .avatar {
        width: px2rem(80);
        height: px2rem(80);
        margin-left: px2rem(30);
        margin-right: px2rem(20);

        img {
            width: 100%;
            border-radius: 50%;
        }
    }

    .info-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 68%;
        font-size: px2rem(30);
        color: #fff;

        .nick {
            font-size: px2rem(30);
        }

        div {
            display: flex;
            font-family: 'pingfang-regular';
            font-size: px2rem(22, );

            p {
                margin-right: px2rem(40, );
            }
        }
    }
}

// 玩法介绍
.rule-mask {
    width: px2rem(560);
    height: px2rem(600);
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: px2rem(-280);
    margin-top: px2rem(-300);
    z-index: 1001;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    display: none;

    .title {
        width: 100%;
        text-align: center;
        font-size: px2rem(32);
        color: #5B1DC2;
        margin-top: px2rem(30);
        font-weight: bold;
    }

    .content {
        width: 100%;
        height: px2rem(450);
        margin: 0 auto;
        margin-top: px2rem(30);
        overflow: auto;
        padding: 0 px2rem(40) 0 px2rem(70);
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
            display: none;
        }

        p {
            margin-bottom: px2rem(20);
            font-size: px2rem(30);
            line-height: px2rem(38);
            width: 100%;
            text-indent: px2rem(-34);
            color: #666;
        }
    }

    .cancel {
        width: px2rem(24);
        height: px2rem(24);
        position: absolute;
        right: 10px;
        top: 10px;

        img {
            width: 100%;
        }
    }
}

.shade {
    width: 100%;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    height: 100%;
    background: black;
    opacity: .7;
    display: none;
}

// 购买弹窗
.shade-mask-buy {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.4);

    .shade-content-buy {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(600);
        height: px2rem(600);
        border-radius: px2rem(24);
        background-color: white;

        .title {
            font-family: 'pingfang-bold';
            font-size: px2rem(36);
            font-weight: bold;
            color: #333333;
            text-align: center;
            margin: px2rem(36) 0 px2rem(44);

            span {
                font-weight: bold;
            }
        }

        .buy-num,
        .buy-day,
        .buy-price {
            font-size: px2rem(30);
            color: #333333;
            margin-bottom: px2rem(64);
            margin-left: px2rem(48);

            p {
                font-weight: 550;
            }
        }

        .buy-num {
            display: flex;
            align-items: center;
            height: px2rem(60);

            .decrease,
            .increase {
                width: px2rem(60);
                height: px2rem(60);
                margin-right: px2rem(20);

                img {
                    width: 100%;
                }
            }

            input {
                width: px2rem(160);
                height: px2rem(60);
                border-radius: px2rem(30);
                background-color: #EAE5FC;
                color: #7154EE;
                text-align: center;
                margin-right: px2rem(20);
                outline: none;
                caret-color: #7154EE;
            }
        }

        .buy-day,
        .buy-price {
            display: flex;
            align-items: center;
        }

        .buy-confirm-btn {
            display: flex;
            justify-content: space-between;
            width: px2rem(512);
            height: px2rem(76);
            margin: px2rem(90) auto 0;

            .cancel,
            .confirm {
                width: px2rem(240);
                height: px2rem(76);
                line-height: px2rem(76);
                background-color: #EAE5FC;
                font-size: px2rem(28);
                color: #7154EE;
                text-align: center;
                border-radius: px2rem(38);
            }

            .confirm {
                background-image: linear-gradient(#735FFE, #8776FF);
                color: white;
            }
        }
    }
}

// 购买成功弹窗
.shade-mask-success,
.shade-mask-no-money {
    display: none;
    width: px2rem(560);
    height: px2rem(460);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    border-radius: px2rem(16);
    background-color: white;

    .title {
        font-size: px2rem(34);
        color: #333;
        text-align: center;
        margin-top: px2rem(40);
    }

    .pic-icon {
        width: px2rem(122);
        height: px2rem(122);
        margin: 0 auto;
        margin-top: px2rem(26);

        img {
            width: 100%;
        }
    }

    .tip {
        text-align: center;
        font-size: 13px;
        color: #999;
        margin-top: px2rem(26);
    }

    .in-btn,
    .recharge {
        width: px2rem(210);
        height: px2rem(76);
        border-radius: px2rem(50);
        background-color: #7154EE;
        color: #fff;
        font-size: px2rem(30);
        text-align: center;
        line-height: px2rem(76);
        margin: 0 auto;
        margin-top: px2rem(40);
    }
}