|
- @charset "utf-8";
- body,
- div,
- p,
- ul,
- ol,
- li,
- dl,
- dt,
- dd,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- pre,
- form,
- input,
- select,
- button,
- textarea,
- table,
- th,
- td,
- a,
- span,
- canvas {
- margin: 0;
- padding: 0;
- background: no-repeat center / contain;
- cursor: default;
- }
- *{
- -webkit-overflow-scrolling: touch;
- }
- body {
- display: block;
- position: relative;
- margin: auto;
- max-width: 10rem;
- min-width: 4.26666667rem;
- font-size: 0.16rem;
- font-family: "Microsoft Yahei", "Arial", sans-serif;
- }
- ul,
- ol {
- list-style: none;
- }
- img {
- border: none;
- }
- a {
- outline: none;
- text-decoration: none;
- color: inherit;
- }
- a:hover {
- text-decoration: none;
- }
- input {
- outline: none;
- }
- .block {
- display: block;
- }
- .none {
- display: none;
- }
- .r {
- position: relative;
- }
- .a {
- position: absolute;
- }
- .fl {
- float: left;
- }
- .fr {
- float: right;
- }
- .clearfix:after {
- content: "";
- clear: both;
- display: block;
- visibility: hidden;
- height: 0;
- }
- /*H5游戏共用类*/
- #wrap {
- overflow: hidden;
- position: relative;
- width: 100%;
- height: 16.01333333rem;
- }
- /*奖品展示*/
- .awards {
- overflow: hidden;
- position: absolute;
- left: 50%;
- }
- .awards .swiper-slide {
- margin: 0.06666667rem 0.26666667rem;
- padding: 0.4rem;
- width: 1rem;
- height: 1rem;
- background-image: url("../image/icon/drag/drag_box.png");
- }
- .awards .swiper-slide img {
- width: inherit;
- height: inherit;
- }
- /*规则弹窗*/
- #mask-rule,
- #mask {
- display: none;
- position: fixed;
- left: 0;
- top: 0;
- z-index: 10;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.85);
- }
- #mask-rule .box-rule {
- position: relative;
- margin: 20% auto;
- padding-top: 0.53333333rem;
- width: 90%;
- height: 70%;
- border-radius: 0.26666667rem;
- }
- #mask-rule .box-rule .star {
- position: absolute;
- left: 50%;
- top: -1.33333333rem;
- margin-left: -1.73333333rem;
- width: 3.45333333rem;
- height: 1.16rem;
- }
- #mask-rule .box-rule h2 {
- width: 100%;
- text-align: center;
- line-height: 0.45333333rem;
- font-size: 0.45333333rem;
- font-weight: normal;
- color: #fff;
- }
- #mask-rule .box-rule h2::before,
- #mask-rule .box-rule h2::after {
- display: inline-block;
- content: "";
- width: 0.24rem;
- height: 0.24rem;
- background-color: #fff;
- border-radius: 50%;
- }
- #mask-rule .box-rule h2::before {
- margin-right: 0.32rem;
- }
- #mask-rule .box-rule h2::after {
- margin-left: 0.32rem;
- }
- #mask-rule #close-rule {
- position: absolute;
- right: 0.45333333rem;
- top: 0.50666667rem;
- width: 0.53333333rem;
- height: 0.53333333rem;
- background-image: url("../image/rule/close.png");
- }
- /*内容盒子*/
- #mask-rule .con {
- overflow: auto;
- position: relative;
- margin: 0.53333333rem auto;
- padding-right: 0.2rem;
- width: 7.73333333rem;
- height: 82%;
- line-height: 0.64rem;
- font-size: 0.34666667rem;
- color: #fff;
- }
- #mask-rule .con .text {
- position: absolute;
- top: 0;
- left: 0;
- width: inherit;
- height: auto;
- }
- /*中奖提示*/
- #mask {
- display: none;
- position: fixed;
- left: 0;
- top: 0;
- z-index: 10;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.85);
- }
- #mask .blin {
- width: 100%;
- height: 100%;
- background-image: url("../image/redPack/gold.png");
- -o-animation: circle 10s linear infinite;
- -ms-animation: circle 10s linear infinite;
- -moz-animation: circle 10s linear infinite;
- -webkit-animation: circle 10s linear infinite;
- animation: circle 10s linear infinite;
- }
- @keyframes circle {
- 0% {
- -o-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- #mask .caidai {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 1;
- width: 100%;
- height: 100%;
- background-image: url("../image/redPack/dianzhui.png");
- -o-transform: scale(1.2);
- -ms-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -webkit-transform: scale(1.2);
- transform: scale(1.2);
- }
- #mask .winning {
- position: absolute;
- left: 50%;
- top: 50%;
- z-index: 1;
- width: 8rem;
- height: 6.8rem;
- margin: -3.46666667rem 0 0 -4rem;
- -o-transform: scale(0.1);
- -ms-transform: scale(0.1);
- -moz-transform: scale(0.1);
- -webkit-transform: scale(0.1);
- transform: scale(0.1);
- }
- #mask .reback {
- -o-animation: reback .5s linear forwards;
- -ms-animation: reback .5s linear forwards;
- -moz-animation: reback .5s linear forwards;
- -webkit-animation: reback .5s linear forwards;
- animation: reback .5s linear forwards;
- }
- @keyframes reback {
- 100% {
- -o-transform: scale(1);
- -ms-transform: scale(1);
- -moz-transform: scale(1);
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- .winning .red-head {
- position: relative;
- top: -0.33333333rem;
- width: 100%;
- height: 4.46666667rem;
- background-image: url("../image/redPack/top.png");
- }
- .winning .red-body {
- position: relative;
- top: -2.33333333rem;
- z-index: 2;
- width: 100%;
- height: 4.8rem;
- background-image: url("../image/redPack/bottom.png");
- }
- .winning .red-body p{
- width: 60%;
- margin: 0 auto;
- text-align: center;
- padding-top: 2rem;
- font-size: 0.34rem;
- color: #ffee37;
- }
- .winning #card {
- position: absolute;
- left: 50%;
- top: 50%;
- z-index: 1;
- margin-left: -3.2rem;
- margin-top: -1.06666667rem;
- width: 80%;
- height: 4.26666667rem;
- background-image: url("../image/redPack/middle.png");
- -o-transition: top .5s;
- -ms-transition: top .5s;
- -moz-transition: top .5s;
- -webkit-transition: top .5s;
- transition: top .5s;
- }
- #card .win {
- display: block;
- margin: 0.13333333rem auto;
- width: 92%;
- height: 3.86666667rem;
- background-image: url("../image/prize/prize2.png");
- }
- .winning .pull {
- -o-animation: card .5s linear forwards;
- -ms-animation: card .5s linear forwards;
- -moz-animation: card .5s linear forwards;
- -webkit-animation: card .5s linear forwards;
- animation: card .5s linear forwards;
- }
- @keyframes card {
- 100% {
- margin-top: -3.2rem;
- }
- }
- .winning .btn {
- position: absolute;
- left: 50%;
- bottom: 10%;
- z-index: 2;
- width: 4.85333333rem;
- height: 0.94666667rem;
- margin-left: -2.42666667rem;
- width: 4.85333333rem;
- font-size: 0.4rem;
- line-height: 0.94666667rem;
- color: #fd4859;
- text-align: center;
- background-image: url("../image/redPack/button.png");
- -o-animation: shake .5s 2 linear alternate;
- -ms-animation: shake .5s 2 linear alternate;
- -moz-animation: shake .5s 2 linear alternate;
- -webkit-animation: shake .5s 2 linear alternate;
- animation: shake .5s 2 linear alternate;
- }
- @keyframes shake {
- 50% {
- -o-transform: rotate(-5deg);
- -ms-transform: rotate(-5deg);
- -moz-transform: rotate(-5deg);
- -webkit-transform: rotate(-5deg);
- transform: rotate(-5deg);
- }
- 100% {
- -o-transform: rotate(5deg);
- -ms-transform: rotate(5deg);
- -moz-transform: rotate(5deg);
- -webkit-transform: rotate(5deg);
- transform: rotate(5deg);
- }
- }
- #close {
- opacity: 0;
- position: absolute;
- right: 0rem;
- top: -1.06666667rem;
- z-index: 10;
- width: 0.85333333rem;
- height: 0.85333333rem;
- background-image: url("../image/redPack/close.png");
- -o-animation: fadein .5s .5s linear forwards;
- -ms-animation: fadein .5s .5s linear forwards;
- -moz-animation: fadein .5s .5s linear forwards;
- -webkit-animation: fadein .5s .5s linear forwards;
- animation: fadein .5s .5s linear forwards;
- }
- @keyframes fadein {
- 100% {
- opacity: 1;
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
-
- /* 点击分享弹出的弹框样式 */
- .b1{
- position:fixed;
- width:100%;
- height:100%;
- top:0px;
- background:rgba(0,0,0,0.9);
- overflow: hidden;
- z-index: 100;
- display: none;
- }
- .t_w{
- display: none;
- position: fixed;
- height: 100%;
- left: 0%;
- top: 0%;
- width: 100%;
- background: url(../image/mengceng.png) no-repeat;
- background-size: 100%;
- z-index: 1000;
- padding: 0.8rem 0.4rem;
- box-sizing: border-box;
- }
- .span-text{
- font-size: 0.4rem;
- line-height: 0.8rem,
- }
- .span-blue{
- font-size: 0.4rem;
- color: mediumorchid;
- margin: 0 0.2rem;
- line-height: 0.8rem;
- }
- .s-close{
- display: block;
- position: absolute;
- bottom: -1.3rem;
- z-index: 500;
- width: 1rem;
- left: 50%;
- margin-left: -0.6rem;
- overflow: hidden;
- }
- #gotoindex{
- position: absolute;
- top: 2.4rem;
- right: 0;
- background-color: #7184E2;
- border-top-left-radius: 0.13333333rem;
- border-bottom-left-radius: 0.13333333rem;
- margin-top: 0.48rem;
- width: 1.09333333rem;
- height: 0.74666667rem;
- text-align: center;
- line-height: 0.74666667rem;
- font-size: 0.32rem;
- color: #fff;
- }
- #warnning-box-bg{
- height: 100vh;
- width: 100%;
- position: fixed;
- z-index: 100;
- opacity: 0.7;
- background: #000;
- top: 0;
- left: 0;
- display: none;
- }
- #warnning-box{
- width: 70%;
- background: #fff;
- z-index: 200;
- position: fixed;
- top: 50%;
- margin-top: -2rem;
- left: 50%;
- margin-left: -35%;
- border-radius: 0.15rem;
- padding: 0 0.3rem;
- padding-top: 0.6rem;
- box-sizing: border-box;
- display: none;
- }
- #w-title{
- font-size: 0.26rem;
- line-height: 0.32rem;
- color: #000;
- }
- #w-button{
- font-size: 0.26rem;
- line-height: 0.6rem;
- color: #000;
- width: 1.2rem;
- height: 0.6rem;
- margin: 0.4rem 0 0.2rem;
- background: #50009f;
- border-radius: 0.15rem;
- text-align: center;
- float: right;
- color: #fff;
- }
-
- #w-cancel{
- font-size: 0.26rem;
- line-height: 0.6rem;
- color: #000;
- width: 1.2rem;
- height: 0.6rem;
- margin: 0.4rem 0 0.3rem 0.3rem;
- background: #50009f;
- border-radius: 0.15rem;
- text-align: center;
- float: right;
- color: #fff;
- }
|