_qrcode.css 1.75 KB
.qrcode {
    padding: 0 30px;

    .qrcode-title {
        margin: 30px 0;
    }

    .qrcode-tip {
        font-size: 20px;
        color: #c6c6c6;

        &:before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("/channel/tip.png");
            background-repeat: no-repeat;
            background-size: contain;
            vertical-align: -2px;
            margin-right: 8px;
        }
    }

    .qrcode-say {
        color: #c6c6c6;
        margin-top: 80px;
    }

    .qrcode-wrap {
        position: relative;

        .chan {
            background-image: url("/channel/up-icon.png");
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 31px;
            height: 31px;
        }

        .prev {
            left: 0;
            transform: rotate(-90deg);
        }

        .next {
            right: 0;
            transform: rotate(90deg);
        }
    }

    .qrcode-pages {
        text-align: center;
        padding: 30px 0;
        letter-spacing: 4px;
        font-size: 28px;
    }

    .swiper-container {
        width: 412px;

        .qrcode-img {
            width: 412px;
            height: 412px;
            display: block;
            margin-bottom: 40px;

            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        p {
            line-height: 35px;
            height: 35px;
        }

        label {
            display: inline-block;
            width: 148px;
            text-align: right;
            margin-right: 40px;
        }
    }
}