book_admin/public/assets/css/frontend/card/style.css

@charset "utf-8";
body {
    background: #2CAB78;
}
body {
    -webkit-text-size-adjust: 100% ;
}
a,
img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#wrap {
    background: #2CAB78;
}

img {
    border: none;
    outline: none;
}

.banner {
    position: relative;
    width: 100%;
    margin-bottom: -.1rem;
}

.banner img {
    display: block;
    width: 100%;
}


/*主体*/

.main {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10.9rem;
    background: url('/assets/img/frontend/activity/card/main-bg.png') no-repeat center top;
    background-size: 100%;
}

.main .info {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    margin-left: -4.0694444rem;
    width: 8.13888889rem;
    height: .73611111rem;
    line-height: .73611111rem;
    color: #4EBA86;
    text-align: center;
}

.main .txt_consume {
    display: inline-block;
    font-size: .8333333334rem;
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    -moz-transform: scale(.5);
    -webkit-transform: scale(.5);
    transform: scale(.5);
    transform-origin: center;
}

a.a-main {
    display: block;
    color: #FFF;
    margin: 0px auto;
    width: 8.7rem;
    padding: 0.3rem 0rem;
    text-align: center;
    font-size: 0.5rem;
    border-radius: 0.2rem;
    letter-spacing: 0.1rem
}

a.a1 {
    background-color: #efc84d;
    margin: 0.2rem auto 0.4rem auto;
}

a.a2 {
    background-color: #ee7323
}


/*游戏区域*/

.box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.8rem;
    margin-top: 0.4rem;
}

.box li {
    /* position: absolute; */
    width: 2.6rem;
    height: 3.35rem;
    background: url('/assets/img/frontend/activity/card/kong.png') no-repeat center top;
    background-size: 100%;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
    margin-bottom: 0.8rem;
}


/*图案*/

.box li img {
    width: 2.6rem;
    height: 3.35rem;
    background: #f1f1f1;
}

.box li p {
    height: .7rem;
    line-height: .7rem;
    font-size: .32rem;
    color: #2A2F29;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* .animate1 {
    left: 1.1111111rem;
    top: 0rem;
}

.animate2 {
    left: 3.8888889rem;
    top: 0rem;
}

.animate3 {
    left: 6.6666667rem;
    top: 0rem;
}

.animate4 {
    left: 1.1111111rem;
    top: 4.1666667rem;
}

.animate5 {
    left: 3.8888889rem;
    top: 4.1666667rem;
}

.animate6 {
    left: 6.6666667rem;
    top: 4.1666667rem;
} */


/*卡牌摆动动画*/

.box li.active {
    /* background-image: url("/assets/img/frontend/activity/card/result-bi.png"); */
    -o-animation: shaking 0.5s ease-in-out;
    -ms-animation: shaking 0.5s ease-in-out;
    -moz-animation: shaking 0.5s ease-in-out;
    -webkit-animation: shaking 0.5s ease-in-out;
    animation: shaking 0.5s ease-in-out;
}

@keyframes shaking {
    0%,
    100% {
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    33% {
        -o-transform: rotateY(-20deg);
        -ms-transform: rotateY(-20deg);
        -moz-transform: rotateY(-20deg);
        -webkit-transform: rotateY(-20deg);
        transform: rotateY(-20deg);
    }
    66% {
        -o-transform: rotateY(20deg);
        -ms-transform: rotateY(20deg);
        -moz-transform: rotateY(20deg);
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
    }
}


/*卡牌翻开动画*/

.box li.open-card {
    left: 3.64rem !important;
    top: 0 !important;
    z-index: 10;
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -o-animation: openCard .5s .5s linear forwards;
    -ms-animation: openCard .5s .5s linear forwards;
    -moz-animation: openCard .5s .5s linear forwards;
    -webkit-animation: openCard .5s .5s linear forwards;
    animation: openCard .5s .5s linear forwards;
}

@keyframes openCard {
    10%,
    30%,
    50% {
        -o-transform: scale(1.5) translateX(-10px);
        -ms-transform: scale(1.5) translateX(-10px);
        -moz-transform: scale(1.5) translateX(-10px);
        -webkit-transform: scale(1.5) translateX-(10px);
        transform: scale(1.5) translateX(-10px);
    }
    20%,
    40%,
    60% {
        -o-transform: scale(1.5) translateX(10px);
        -ms-transform: scale(1.5) translateX(10px);
        -moz-transform: scale(1.5) translateX(10px);
        -webkit-transform: scale(1.5) translateX(10px);
        transform: scale(1.5) translateX(10px);
    }
    100% {
        -o-transform: scale(1.5) translateX(90deg);
        -ms-transform: scale(1.5) translateX(90deg);
        -moz-transform: scale(1.5) translateX(90deg);
        -webkit-transform: scale(1.5) translateX(90deg);
        transform: scale(1.5) rotateY(90deg);
    }
}


/*最佳成绩榜*/

.tab img {
    width: 100%;
    height: 100%;
}

.tab .content-box {
    margin-top: -0.8rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.2rem;
    background-color: #E6FFE2;
    overflow: hidden;
}

.tab .list-grade {
    height: 8.2rem;
}

.tab_nav {
    margin-top: 0.9rem;
    display: flex;
    justify-content: space-evenly;
}

.tab_nav li {
    font-size: .40rem;
    color: #006934;
}

.tab_nav span {
    cursor: pointer;
}

.tab_nav li.cur span {
    display: inline-block;
    padding: 0 0 .1rem 0;
    border-bottom: #6BCF5F solid .05rem
}

.list-grade .name-list {
    margin: 0.1rem 0.3rem 0.4rem 0.3rem;
    height: 6rem;
    overflow-y: auto;
}
.list-grade .empty {
    margin: 0.1rem 0.3rem 0.4rem 0.3rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.4rem;
}

.list-grade .name-list li {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.32rem;
    display: flex;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
.list-grade .name-list li .pl1 {
    margin-left:.23rem;
}
.list-grade .name-list .prize {
    justify-content: space-between;
}

.list-grade .name-list li:nth-child(even) {
    background-color: #D3F5D2;
}

.list-grade .name-list li:nth-child(odd) {
    background-color: #F8FFF7;
}

.name-list .left {
    width: 4.4rem;
}

.name-list .right {
    flex: 1;
}

.prize .left,
.prize .right {
    flex: initial;
}
.prize .right{
    position: absolute;
    top: 50%;
    right: 2%;
    display: block;
    width: 2.222222rem;
    text-align: center;
    transform: translate(0%, -50%);
}

.prize .right .jiang-btn {
    padding: 0.15rem 0.3rem;
    border-radius: 0.5rem;
    color: #fff;
    background: #2CAB78;
}

.prize .right .txt {
    padding: 0.15rem 0.3rem;
    border-radius: 0.5rem;
    color: #2CAB78;
}


/* 规则 */

.tab-reg {
    margin-top: 0.3rem;
}

.tab-reg .text-box {
    margin: 0.3rem;
    background-color: #D3F5D2;
    font-size: 0.35rem;
    color: #2B262A;
    padding: 0.5rem;
    text-align: justify;
    line-height: 0.65rem;
}


/*需要结合js*/

.box li.hide-card {
    z-index: 10;
    -o-animation: hideCard 1s linear forwards;
    -ms-animation: hideCard 1s linear forwards;
    -moz-animation: hideCard 1s linear forwards;
    -webkit-animation: hideCard 1s linear forwards;
    animation: hideCard 1s linear forwards;
}

@keyframes hideCard {
    50% {
        -o-transform: scale(1) translateX(90deg);
        -ms-transform: scale(1) translateX(90deg);
        -moz-transform: scale(1) translateX(90deg);
        -webkit-transform: scale(1) translateX(90deg);
        transform: scale(1) rotateY(90deg);
    }
    100% {
        -o-transform: scale(1) translateX(0deg);
        -ms-transform: scale(1) translateX(0deg);
        -moz-transform: scale(1) translateX(0deg);
        -webkit-transform: scale(1) translateX(0deg);
        transform: scale(1) translateX(0deg);
    }
}

.footer {
    height: 1.3rem;
    line-height: 1.3rem;
    font-size: 0.32rem;
    text-align: center;
    color: #67D0A5;
}


/*翻牌遮罩*/

#mask-card {
    display: none;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
}


/*规则弹窗背景色*/

.activity,
.activity2 {
    background-color: #ed392b;
    padding: 0.3rem 0rem;
}

.activity2 {
    padding: 0.6rem 0rem;
}

.activity-amin {
    width: 85%;
    margin: 0rem auto;
}

.activity-amin h2 {
    margin: 0rem auto 0.4rem auto;
    width: 4.4rem;
    height: 0.8rem;
    background-color: #ffe771;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.4rem;
    color: #bc5700;
    border-radius: 0.34666667rem;
    letter-spacing: 0.2rem
}

.activity-amin p {
    width: 100%;
    line-height: 0.6rem;
    font-size: 0.2rem;
    color: #fff;
    letter-spacing: 0.1rem;
    margin-bottom: 0.6rem;
}

.wt1 {
    width: 94%;
    display: block;
    border: none;
    background-color: #FFF;
    padding: 5% 3%;
    border-radius: 0.34666667rem;
    font-size: 0.4rem;
    margin-bottom: 6%
}

.wt2 {
    width: 50%;
    float: left
}

.wt3 {
    width: 40%;
    float: right;
    background-color: #efc84d;
    color: #FFF
}

.wt4 {
    width: 100%;
    background-color: #efc84d;
    color: #FFF;
    font-size: 0.6rem;
}

.prompt1 {
    clear: both;
    width: 100%;
    text-align: center;
    font-size: 0.4rem;
    margin-bottom: 6%;
    color: #ffe66f;
    display: none
}

.tb0 {
    width: 100%;
    margin-bottom: 6%;
}

.tb0 tr th {
    width: 20%;
    line-height: 0.8rem;
    text-align: center;
    color: #efc84d
}

.tb0 tr th:nth-child(1) {
    width: 42%;
}

.tb0 tr th:nth-child(2) {
    width: 38%;
}

.tb0 tr td {
    width: 20%;
    line-height: 0.6rem;
    text-align: center;
    color: #FFF
}
.recordList {position:relative;}
.recordList .link_btn {
    width: 1.74rem;
    height: .56rem;
    line-height: .56rem;
    text-align: center;
    border-radius: .28rem;
    border: .015rem solid forestgreen;
    position: absolute;
    top: 50%;
    right: 5%;
    display: block;
    color: forestgreen;
    font-size: 0.32rem !important;
    transform: translate(0%, -50%);
}

.recordList span.link_btn {
    opacity: .5;
}

.rule_box h2 {
    padding: .7rem 0 .6rem 0;
    text-align: center;
    color: #fff;
    opacity: .7;
    font-size: .5rem;
}

.rule_box p {
    padding: .2rem .5rem;
    color: #444;
    opacity: .7;
    font-size: .3333333rem;
    line-height: 1.5;
}

.rule_box .goback {
    display: block;
    z-index: 2;
    margin: .7rem auto;
    width: 4.44444rem;
    height: 1rem;
    line-height: 1rem;
    background: -moz-linear-gradient(top, rgba(255, 249, 92, 1) 0%, rgba(255, 237, 41, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 249, 92, 1) 0%, rgba(255, 237, 41, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 249, 92, 1) 0%, rgba(255, 237, 41, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: 0rem .111rem .014rem 0rem rgba(244, 211, 33, 0.2);
    border-radius: 36px;
    font-size: .5rem;
    color: #E04E21;
    text-align: center;
    font-weight: bold;
}

.rule_box .rule_main {
    padding-bottom: .35rem;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

#toast {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    line-height: 1.7;
    padding: 10px;
    border-radius: 3px;
    position: fixed;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 9999;
}

.hide {
    display: none;
}

.fadeOut {
    animation: fadeOut .5s;
}

.fadeIn {
    animation: fadeIn .5s;
}


/*tip_box 弹层*/

.tip_box {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(0, 0, 0, .7);
}

.text_but_error {
    position: absolute;
    left: .5rem;
    right: .5rem;
    top: 50%;
    margin-top: -1rem;
    padding: .1rem;
    text-align: center;
    border: .1rem #f6e04e solid;
    background: #fef5f7;
    background-size: auto 100%;
    -moz-border-radius: .1rem;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
}

.text_but_error strong {
    padding: .4rem .1rem;
    display: block;
    background-color: #fef5f7;
    font-size: .5rem;
    color: #fff;
    line-height: 1.5;
    border-radius: .04rem;
}

.text_but_error span {
    display: block;
    text-align: center;
    color: #333;
    font-size: .4444rem;
    line-height: 1.5;
}

.tip_box_dialog {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(0, 0, 0, .7);
}

.tip_box_dialog .text_but_error {
    top: 43%;
}

.tip_box_dialog .text_but_error strong {
    padding-top: 1rem;
}

.text_but_error .tip_btn {
    display: inline-block;
    z-index: 2;
    margin: .7rem .3rem;
    width: 3.24444rem;
    height: 1rem;
    line-height: 1rem;
    background: -moz-linear-gradient(top, rgba(255, 249, 92, 1) 0%, rgba(255, 237, 41, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 249, 92, 1) 0%, rgba(255, 237, 41, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 249, 92, 1) 0%, rgba(255, 237, 41, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: 0rem .111rem .014rem 0rem rgba(244, 211, 33, 0.2);
    border-radius: 36px;
    font-size: .5rem;
    color: #E04E21;
    text-align: center;
    font-weight: bold;

}