1312 lines
29 KiB
CSS
1312 lines
29 KiB
CSS
body{
|
|
background: #413f40;
|
|
padding: 0px;
|
|
padding-bottom: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.iframe-box{position: fixed; top: 0; left: 0; width: 80%; height: 88%; padding:6% 10% 0; background: rgba(0,0,0,0.5); z-index: 999;}
|
|
.iframe-box .title{text-align: center; font-size: 14px; position: relative; background:#fff; font-weight: normal; padding: 5px; border-bottom: 1px solid #ccc;}
|
|
.iframe-box iframe{width: 100%; min-height: 720px;}
|
|
.off-btn{position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 100px; background: #fff; -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.45); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.45);}
|
|
|
|
|
|
.top-sec{ height: 63vh;}
|
|
|
|
.video-sec{
|
|
width: 54vw;
|
|
height:63vh;
|
|
position: relative;
|
|
background:url(../img/video_bg.jpg) #322616;
|
|
-webkit-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
.table-info { width: 46vw;height: 63vh; background: url(../img/info-bg.jpg) no-repeat; background-size: 100% 100%; position: relative;}
|
|
.video-iframe {
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
pointer-events: none;
|
|
object-fit: fill;
|
|
}
|
|
#t-logo-img{
|
|
|
|
/*//现场电脑宽度*!*/
|
|
height: 14.4vh;
|
|
left: 2vh;
|
|
background-size: 100%;
|
|
position: absolute}
|
|
.table-info .t-logo{
|
|
position: relative;
|
|
font-size: 2.0vh;
|
|
color: #fff;
|
|
padding: 0.8vh 0 0.5vh 0;
|
|
margin-bottom: 1.5vh;
|
|
|
|
|
|
|
|
}
|
|
.table-info .t-logo:after{
|
|
content: ""; /*内容设置为空！！！*/
|
|
display: block; /*显示为块级元素！！！*/
|
|
height: 0;
|
|
visibility: hidden;
|
|
clear: both; /*清除浮动！！！*/
|
|
}
|
|
|
|
.t-logo .t-logo-tit{
|
|
margin-top: 1.3vh;
|
|
line-height: 12.5vh;
|
|
height: 12.5vh;
|
|
width: 69vh;
|
|
float: left;
|
|
display: inline-block;
|
|
padding: 0rem 0 0rem 0;
|
|
background:url("../img/l-bg.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-left: 6vw;
|
|
font-size: 5vh;
|
|
|
|
}
|
|
|
|
.t-logo .t-logo-tit span{
|
|
background-image: -webkit-linear-gradient(bottom,#775d2b,#b4a67d,#fff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
padding-left: 8vh;
|
|
}
|
|
.zx.text {
|
|
width: 90%;
|
|
line-height: normal;
|
|
opacity: 0.9;
|
|
padding: 0px 2px;
|
|
color: #5b4d31;
|
|
font-size: 2.0rem;
|
|
border-radius: 5px 0 0 5px;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(to right, #51462b, #2e2a27);
|
|
|
|
}
|
|
.zx.text span{
|
|
display: inline-block;
|
|
background-image:-webkit-linear-gradient(bottom,#775d2b,#b4a67d,#fff);
|
|
-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;
|
|
|
|
}
|
|
.nobegin-tip{ padding: 2rem 0; text-align: center;font-size: 6.5vw;
|
|
background-image: -webkit-linear-gradient(bottom,#775d2b,#b4a67d,#fff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
position: absolute;
|
|
top: 35%;
|
|
width: 100%;
|
|
}
|
|
#show-status-span{ position: absolute; right: 5%;
|
|
color: #b4a67d;
|
|
top: 43%;
|
|
font-size: 2.2vh;
|
|
}
|
|
|
|
.begincard .card-box .win .card.begin{
|
|
background-color: rgba(255, 255, 255, 1);
|
|
-webkit-animation-timing-function:ease-in-out;
|
|
-webkit-animation-name:breathe;
|
|
-webkit-animation-duration:500ms;
|
|
-webkit-animation-iteration-count:infinite;
|
|
-webkit-animation-direction:alternate;
|
|
/*transform: scale(1.5,1.5);*/
|
|
/*position: absolute;*/
|
|
/*z-index: 10;*/
|
|
|
|
}
|
|
.begincard .list.win .draw .card.begin{
|
|
background-color: rgba(255, 255, 255, 1);
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-webkit-animation-name: breathe;
|
|
-webkit-animation-duration: 500ms;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-direction: alternate;
|
|
|
|
}
|
|
|
|
|
|
.spinner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
z-index: 999;
|
|
margin-left: -25px;
|
|
margin-top: -25px;
|
|
}
|
|
|
|
.spinner > div {
|
|
background-color: #67CF22;
|
|
height: 100%;
|
|
width: 3px;
|
|
display: inline-block;
|
|
|
|
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
|
|
animation: stretchdelay 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.spinner .rect2 {
|
|
-webkit-animation-delay: -1.1s;
|
|
animation-delay: -1.1s;
|
|
}
|
|
|
|
.spinner .rect3 {
|
|
-webkit-animation-delay: -1.0s;
|
|
animation-delay: -1.0s;
|
|
}
|
|
|
|
.spinner .rect4 {
|
|
-webkit-animation-delay: -0.9s;
|
|
animation-delay: -0.9s;
|
|
}
|
|
|
|
.spinner .rect5 {
|
|
-webkit-animation-delay: -0.8s;
|
|
animation-delay: -0.8s;
|
|
}
|
|
|
|
@-webkit-keyframes stretchdelay {
|
|
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
|
|
20% { -webkit-transform: scaleY(1.0) }
|
|
}
|
|
|
|
@keyframes stretchdelay {
|
|
0%, 40%, 100% {
|
|
transform: scaleY(0.4);
|
|
-webkit-transform: scaleY(0.4);
|
|
} 20% {
|
|
transform: scaleY(1.0);
|
|
-webkit-transform: scaleY(1.0);
|
|
}
|
|
}
|
|
|
|
.section{
|
|
min-height: 630px;
|
|
}
|
|
|
|
.section .head .box{
|
|
height: 100%;
|
|
}
|
|
|
|
.section .head .box .date{
|
|
float: right;
|
|
color: #fff;
|
|
margin-top: 10px;
|
|
padding: 5px 5px;
|
|
background-color: #100e01;
|
|
font-size: 1rem;
|
|
|
|
}
|
|
|
|
.section .head .box .list{
|
|
text-align: center;
|
|
padding: 5px 5px;
|
|
background-color: #100e01;
|
|
margin-top: 5px;
|
|
width: 50%;
|
|
float: right;
|
|
}
|
|
|
|
.section .head .box .list .item{
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
float: left;
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
.section .head .input-box{
|
|
|
|
}
|
|
|
|
/*.section .head .input-box:first-child{
|
|
width: 35%;
|
|
margin-left: 0;
|
|
}*/
|
|
|
|
|
|
|
|
.section .head .input-box.m0{
|
|
margin-right: 0;
|
|
}
|
|
|
|
.section .head .input-box input{
|
|
|
|
}
|
|
.section .head .input-box label{
|
|
|
|
}
|
|
|
|
.section .head .box .list .date{
|
|
width: 34%;
|
|
text-align: right;
|
|
line-height: 4.8vh;
|
|
}
|
|
.section .head .box .list .date p{
|
|
display: inline-block;
|
|
width: 225px;
|
|
text-align: left;
|
|
}
|
|
.section .head .box .list .date span{
|
|
background: #ab7963;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.section .head .box .list .notice{
|
|
height:4.2vh;
|
|
line-height: 4.2vh;
|
|
background: #606463;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
.notice .scroll{
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.notice .scroll ul{
|
|
width: 200000px;
|
|
}
|
|
|
|
.notice .scroll ul li{
|
|
float: left;
|
|
color:#ddd;
|
|
font-size: 15px;
|
|
padding: 0 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
|
|
.canvas-box{
|
|
border: 2px solid #87756c;
|
|
background: #4a3d3a;
|
|
border-radius: 5px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
padding: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.canvas-box.small{
|
|
height: 27.9vh;
|
|
margin-bottom: 0.5vh;
|
|
min-height: 150px;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.canvas-box .active-box{
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
width: 225px;
|
|
background: url(../img/active_bg.jpg) repeat-x;
|
|
border-radius: 5px;
|
|
-webkit-background-size: auto 100%;
|
|
background-size: auto 100%;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 1.5vh;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
}
|
|
.canvas-box .active-box .item{
|
|
width: 100px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.canvas-box .active-box .item:first-child{
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
|
|
.canvas-box .item:last-child{
|
|
margin-top: 5px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
position: absolute;
|
|
left: 110px;
|
|
top: 50%;
|
|
margin-top: -22px;
|
|
}
|
|
|
|
.canvas-box .active-box strong{
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.footer{
|
|
display:flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer .canvas-box{
|
|
flex:3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.canvas-box canvas{
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.table-data{
|
|
position: absolute;
|
|
right: 0%;
|
|
top:3%;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.table-data .hd{
|
|
height: 16vh;
|
|
background-color: pink
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table-data .title{
|
|
width: 100%;
|
|
display: table;
|
|
text-align: center;
|
|
|
|
}
|
|
.table-data .title li{
|
|
display: table-cell;
|
|
color: #3c180a;
|
|
width: 20%;
|
|
position: relative;
|
|
}
|
|
.table-data .title li:after{
|
|
content: "";
|
|
border-left: 1px solid #e8ccbf;
|
|
height: 30px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -15px;
|
|
}
|
|
.table-data .title li:last-child:after{
|
|
border: none;
|
|
}
|
|
|
|
.table-data .title li>*{
|
|
display: block;
|
|
}
|
|
.table-data .title li strong{
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
text-shadow: 0px 1px 0px #fff;
|
|
}
|
|
.table-data .title li small{
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table-data .top{
|
|
background: #fff;
|
|
width: 95%;
|
|
display: table;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
border-radius: 2px;
|
|
margin-top: 0.8vh;
|
|
line-height: 3vh;
|
|
font-weight: 500;
|
|
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
|
|
|
|
}
|
|
.table-data .top span{
|
|
display: table-cell;
|
|
color: #3c180a;
|
|
width: 20%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
|
|
.table-data .limit-box{
|
|
width: 95%;
|
|
padding: 0 2.5%;
|
|
}
|
|
|
|
|
|
.table-data .lan-box{
|
|
padding-top: 1vh;
|
|
text-align: center;
|
|
line-height: 3vh;
|
|
}
|
|
.table-data .lan-box .item{
|
|
width: 50%;
|
|
font-weight: 600;
|
|
}
|
|
.table-data .lan-box .item span {
|
|
font-weight: 600;
|
|
}
|
|
.limit-box .list{
|
|
padding: 0.6vh 0;
|
|
padding-left: 50px;
|
|
position: relative;
|
|
font-size: 14px;
|
|
color: #3c180a;
|
|
line-height: 3vh;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.limit-box .list .lab{
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 0;
|
|
text-align: center;
|
|
margin:0.6vh 0;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
width: 70px;
|
|
color: #FFFFFF;
|
|
background-color: #2a1606;
|
|
}
|
|
|
|
|
|
.limit-box .list .item{
|
|
background: #fff;
|
|
width: 48%;
|
|
border-radius: 2px;
|
|
padding: 0 10px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
font-weight: 800;
|
|
}
|
|
.limit-box .list .item small{
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
font-weight: 800;
|
|
}
|
|
.limit-box .list .item span{
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
|
|
.control-box{
|
|
position: fixed;
|
|
right: -410px;
|
|
top: 19vh;
|
|
background: rgba(21, 34, 34, 0.71);
|
|
width: 410px;
|
|
height: 46.5vh;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
}
|
|
.control-box .slide-btn{
|
|
opacity: 0;
|
|
background: rgba(21, 34, 34, 0.71);
|
|
position: absolute;
|
|
height: 65px;
|
|
border-radius: 100px 0 0 100px;
|
|
width: 30px;
|
|
left: -35px;
|
|
top: 50%;
|
|
margin-top: -32.5px;
|
|
cursor: pointer;
|
|
color: #ddd;
|
|
line-height: 65px;
|
|
font-size: 20px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
|
|
.control-box .btn-box1{
|
|
padding: 7vh 0;
|
|
}
|
|
.control-box .btn-box1 span{
|
|
cursor: pointer;
|
|
width: 110px;
|
|
height: 35px;
|
|
display: inline-block;
|
|
margin:0 10px ;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
|
|
.control-box .btn-box2 span{
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
background: #c0bbbb;
|
|
font-weight: 500;
|
|
margin: 0 4px;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
-webkit-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.control-box .btn-box2 span.on{
|
|
background: #0b6140;
|
|
-webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset, 0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset, 0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.control-box .btn-box3{
|
|
padding: 5vh 0;
|
|
}
|
|
.control-box .btn-box3 span{
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 160px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
margin: 0 4px;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
-webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.control-box .btn-box4 span{
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
background: #a07667;
|
|
font-weight: 500;
|
|
margin: 0 4px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
-webkit-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
cursor: pointer;
|
|
}
|
|
.control-box .btn-box1 span:active,
|
|
.control-box .btn-box3 span:active,
|
|
.control-box .btn-box4 span:active{
|
|
opacity: 0.7;
|
|
}
|
|
.control-box .green_bg{
|
|
background: #0b6140;
|
|
}
|
|
.control-box .red_bg{
|
|
background: #7a1e1e;
|
|
}
|
|
|
|
|
|
|
|
/*.play-grab-sec .play-grab .grab-count {*/
|
|
/*background: url(../../common/image/grab.png) no-repeat;*/
|
|
/*background-size: 100% auto;*/
|
|
/*width: 3.68rem;*/
|
|
/*height: 3.54rem;*/
|
|
/*max-width: 3.68rem;*/
|
|
/*max-height: 3.54rem;*/
|
|
/*}*/
|
|
/*.play-grab-sec .play-grab .count-active{animation: myMove1 6s 0s linear infinite;}*/
|
|
|
|
/*.round-txt-item { position: absolute;width: 100%; top:0; }*/
|
|
|
|
/*@keyframes myMove1 {*/
|
|
/*from {transform: rotate(0deg);}*/
|
|
/*50% {transform: rotate(180deg);}*/
|
|
/*100% {transform: rotate(360deg);}*/
|
|
/*50% {transform: rotate(180deg);}*/
|
|
/*to {transform: rotate(360deg);}*/
|
|
/*}*/
|
|
|
|
|
|
/*.countdown{*/
|
|
/*display: none;*/
|
|
/*position: absolute;*/
|
|
/**/
|
|
/*width: 210px;*/
|
|
/*height: 210px;*/
|
|
/*!*background: rgba(21, 34, 34, 0.71);*!*/
|
|
/*bottom: 5px;*/
|
|
/*right: 5px;*/
|
|
|
|
/*}*/
|
|
|
|
.countdown{ z-index: 999;
|
|
|
|
position:absolute;
|
|
display: none;
|
|
top: 28%;
|
|
left: 37%;
|
|
}
|
|
.countdown .grab-count{
|
|
background: url(../img/count.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 27vw;
|
|
height: 27vw;
|
|
}
|
|
.round-txt-item { position: absolute;width: 100%; top:0; }
|
|
.top-sec .count-active{animation: myMove1 6s 0s linear infinite;}
|
|
@keyframes myMove1 {
|
|
from {transform: rotate(0deg);}
|
|
50% {transform: rotate(180deg);}
|
|
100% {transform: rotate(360deg);}
|
|
50% {transform: rotate(180deg);}
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
.countdown .roll{
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 180px;
|
|
top:50%;
|
|
left: 50%;
|
|
margin-left: -90px;
|
|
margin-top: -90px;
|
|
|
|
-webkit-animation: rotate 1s linear 1s 5 alternate;
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
|
|
|
|
|
|
.countdown .num{
|
|
font-size: 13vw;
|
|
position: absolute;
|
|
font-weight: 500;
|
|
z-index: 999;
|
|
text-align: center;
|
|
text-shadow: 0px 1px 0px #555;
|
|
line-height: 27vw;
|
|
color: #eee;
|
|
border-radius: 50%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
|
|
.countdown .inner, .inner2 {
|
|
position: absolute;
|
|
width: 170px;
|
|
height: 170px;
|
|
border-radius: 170px;
|
|
overflow: hidden;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-top: -85px;
|
|
margin-left: -85px;
|
|
}
|
|
.countdown .inner {
|
|
opacity: 1;
|
|
background-color: #d4b0a3;
|
|
animation: second-half-hide 2s steps(1, end) infinite;
|
|
}
|
|
.countdown .inner2 {
|
|
opacity: 0;
|
|
background-color: #a9735f;
|
|
animation: second-half-show 2s steps(1, end) infinite;
|
|
}
|
|
.countdown .spiner, .filler, .masker {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
.countdown .spiner {
|
|
border-radius: 40px 0 0 40px;
|
|
background-color: #a9735f;
|
|
transform-origin: right center;
|
|
animation: spin 1s infinite linear;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.countdown .filler {
|
|
border-radius: 0 40px 40px 0;
|
|
background-color: #a9735f;
|
|
animation: second-half-hide 1s steps(1, end) infinite;
|
|
left: 50%;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
.countdown .masker {
|
|
border-radius: 40px 0 0 40px;
|
|
background-color: #d4b0a3;
|
|
animation: second-half-show 1s steps(1, end) infinite;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
.countdown .inner2 .spiner, .inner2 .filler {
|
|
background-color: #d4b0a3;
|
|
}
|
|
.countdown .inner2 .masker {
|
|
background-color: #a9735f;
|
|
}
|
|
|
|
|
|
/*结果弹窗*/
|
|
.result-box{
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 40%;
|
|
left: 40%;
|
|
width: 320px;
|
|
|
|
/* -webkit-animation: bounceIn .5s 0s ease both;
|
|
-moz-animation: bounceIn .5s 0s ease both;*/
|
|
}
|
|
|
|
.result-box.blink{
|
|
-webkit-animation: bounceIn 1s 0s ease both infinite;
|
|
-moz-animation: bounceIn 1s 0s ease both infinite;
|
|
}
|
|
|
|
.canvas-main{
|
|
position: relative;
|
|
}
|
|
|
|
.canvas-box .active-box p{
|
|
max-width: 300px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
|
|
|
|
/*自动翻牌*/
|
|
.begincard{
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
.begincard .box{
|
|
position: absolute;
|
|
/*width: 732px;*/
|
|
width: 100%;
|
|
top:0%;
|
|
/*background:url(../img/border.png);*/
|
|
background-size: 100% 100%;
|
|
/*background-color: rgba(0,0,0,0.5);*/
|
|
opacity: 0;
|
|
}
|
|
|
|
.begincard .list{
|
|
display: inline-block;
|
|
margin:0px 0rem 0 1.5vw;
|
|
vertical-align: middle;
|
|
width: 45%;
|
|
position: relative;
|
|
}
|
|
|
|
.begincard .list .card{
|
|
width: 8.5vw;
|
|
height: 21.5vh;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
/*background-color: #fff;*/
|
|
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
|
|
box-shadow: 0 1px 1px rgba(0,0,0,.15);
|
|
position: relative;
|
|
font-size: 18px;
|
|
color: #000;
|
|
overflow: hidden;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
.begincard .list .draw .rotate{
|
|
/*width: 18vw;*/
|
|
/*height: 22vh;*/
|
|
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
display: none;
|
|
}
|
|
|
|
.begincard .list .draw .card{
|
|
width: 16vh;
|
|
height: 12.6vw;
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.begincard .list .draw {
|
|
text-align: center;
|
|
width: 16vw;
|
|
height: 18vh;
|
|
position: absolute;
|
|
top: 24.7vh;
|
|
left: 0.8vw;
|
|
}
|
|
.begincard .list .draw .text{
|
|
font-size: 30px;
|
|
display: inline-block;
|
|
color: #fff;
|
|
vertical-align: top;
|
|
width:130px;
|
|
height:135px;
|
|
line-height: 135px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
.begincard .card .topleft, .begincard .card .bottomright {
|
|
font-size: 1.2vw;
|
|
position: absolute;
|
|
text-align: center;
|
|
line-height: 1;
|
|
letter-spacing:-3px;
|
|
font-family: ubuntu condensed,sans-serif;
|
|
white-space: pre;
|
|
-webkit-transform: translate(-50%,0);
|
|
-moz-transform: translate(-50%,0);
|
|
-o-transform: translate(-50%,0);
|
|
-ms-transform: translate(-50%,0);
|
|
transform: translate(-50%,0);
|
|
}
|
|
|
|
.begincard .card .topleft {
|
|
top:1vh;
|
|
left:0.7vw;
|
|
}
|
|
.begincard .card .bottomright {
|
|
bottom: 1vh;
|
|
right: 0.6vw;
|
|
-webkit-transform: rotate(180deg) translate(-50%,0);
|
|
-moz-transform: rotate(180deg) translate(-50%,0);
|
|
-o-transform: rotate(180deg) translate(-50%,0);
|
|
-ms-transform: rotate(180deg) translate(-50%,0);
|
|
transform: rotate(180deg) translate(-50%,0);
|
|
}
|
|
|
|
.begincard .list .draw .card .topleft {
|
|
top: 14px;
|
|
left: 9px;
|
|
}
|
|
.begincard .list .draw .card .bottomright {
|
|
bottom: 17px;
|
|
right:9px;
|
|
}
|
|
.begincard .list .draw .card .face{
|
|
background-image: url('../../handle/img/faces1.png');
|
|
}
|
|
.begincard .list .card .face{
|
|
background-image: url('../../handle/img/faces.png');
|
|
height: 100%;
|
|
background-position: 50% 50%;
|
|
-webkit-background-size: 100% 100%;
|
|
-moz-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
.begincard .list .card.begin{
|
|
-webkit-backface-visibility: visible!important;
|
|
backface-visibility: visible!important;
|
|
-webkit-animation-name: flipInY;
|
|
animation-name: flipInY;
|
|
-webkit-animation-iteration-count: 1;
|
|
animation-iteration-count: 1;
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
background: #fff;
|
|
}
|
|
.begincard .list .draw .card {
|
|
-webkit-animation-timing-function:ease-in-out;
|
|
-webkit-animation-name:breathe1;
|
|
-webkit-animation-duration:500ms;
|
|
-webkit-animation-iteration-count:infinite;
|
|
-webkit-animation-direction:alternate;
|
|
border-radius: 1vw;;
|
|
}
|
|
.begincard .list .draw .card.begin{
|
|
border-radius: 0;
|
|
backface-visibility: visible!important;
|
|
-webkit-animation-name: flipInY;
|
|
animation-name: flipInY;
|
|
animation-iteration-count: 1;
|
|
animation-duration: 2s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
background: #fff;
|
|
}
|
|
|
|
.result_img{
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 200px;
|
|
height: 128px;
|
|
margin-left: -100px;
|
|
margin-top:-128px;
|
|
-webkit-animation: bounceIn .5s 0s ease both;
|
|
-moz-animation: bounceIn .5s 0s ease both;
|
|
display: none;
|
|
|
|
}
|
|
/*问路*/
|
|
.canvas-box .active-box .item{
|
|
width:155px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
left:166px;
|
|
}
|
|
.canvas-box .active-box .tip{
|
|
display:inline-block;
|
|
width:18px;
|
|
height:18px;
|
|
vertical-align: top;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
position: relative;
|
|
margin:2px 0;
|
|
opacity:0;
|
|
}
|
|
|
|
.canvas-box .active-box .circle{
|
|
border-radius: 100%;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
|
|
|
|
.canvas-box .active-box .round{
|
|
background: #000;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.canvas-box .active-box .bar:after{
|
|
top: -1px;
|
|
left: 8px;
|
|
content:"";
|
|
position: absolute;
|
|
width:3px;
|
|
height:20px;
|
|
background: #000;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
|
|
}
|
|
|
|
.canvas-box .active-box .bar.red:after{
|
|
background:#b20a00;
|
|
}
|
|
|
|
.canvas-box .active-box .bar.blue:after{
|
|
background:#0543bc;
|
|
}
|
|
|
|
|
|
|
|
/*自动翻牌*/
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0
|
|
}
|
|
0%,40% {
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-20deg);
|
|
transform: perspective(400px) rotateY(-20deg)
|
|
}
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
transform: perspective(400px) rotateY(10deg);
|
|
opacity: 1
|
|
}
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotateY(-5deg);
|
|
transform: perspective(400px) rotateY(-5deg)
|
|
}
|
|
to {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px)
|
|
}
|
|
}
|
|
|
|
@keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0
|
|
}
|
|
0%,40% {
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-20deg);
|
|
transform: perspective(400px) rotateY(-20deg)
|
|
}
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
transform: perspective(400px) rotateY(10deg);
|
|
opacity: 1
|
|
}
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotateY(-5deg);
|
|
transform: perspective(400px) rotateY(-5deg)
|
|
}
|
|
to {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(360deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
@keyframes second-half-hide {
|
|
0% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
@keyframes second-half-show {
|
|
0% { opacity: 0; }
|
|
50%, 100% { opacity: 1; }
|
|
}
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity: .8;
|
|
-webkit-transform: scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
@-moz-keyframes bounceIn {
|
|
0% {
|
|
opacity: .8;
|
|
-moz-transform: scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/*win*/
|
|
@keyframes breathe {
|
|
0% {
|
|
opacity:.7;
|
|
-moz-box-shadow: 0px 1px 10px #030c03;
|
|
box-shadow: 0px 1px 10px #030c03;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
box-shadow:0 1px 20px rgba(59,255,255,1);
|
|
-moz-box-shadow:0 1px 20px rgba(59,255,255,1);
|
|
}
|
|
}
|
|
@media screen and (max-width: 1366px){
|
|
.section .head .box .list .item{
|
|
font-size: 1rem;
|
|
}
|
|
.section .head .box .list .date span{
|
|
padding-right: 0;
|
|
padding-left: 0
|
|
}
|
|
|
|
}
|
|
.update-ludan{z-index: 1; left: 38%; top: 30%; background:#fff; min-width:400px; min-height:142px; position: fixed; box-shadow: 1px 1px 50px rgba(0,0,0,.3); border-radius: 2px; display:none;}
|
|
.update-ludan-title{padding: 0 80px 0 20px; height: 42px; line-height: 42px; border-bottom: 1px solid #eee; font-size: 14px; color: #333; overflow: hidden; background-color: #F8F8F8; border-radius: 2px 2px 0 0;}
|
|
.update-ludan-content{padding-left:20px; padding-top:40px; padding-bottom:20px;}
|
|
.update-ludan-content select{border:1px solid #eee; padding:5px; min-width:260px;}
|
|
.update-ludan-win6{padding-left:20px; padding-top:0px; padding-bottom:20px;}
|
|
.update-ludan-footer{text-align:center; padding-bottom:30px;}
|
|
.update-ludan-footer a{display:inline-block; padding:7px 20px; cursor:pointer; border-radius: 2px;}
|
|
.update-ludan-footer #confirm_update_ludan{background:#33A3F6; color:#fff; border-color: #1E9FFF; background-color: #1E9FFF; margin-right:20px;}
|
|
.update-ludan-footer #cancel_update_ludan{border: 1px solid #dedede;}
|
|
|
|
|
|
|
|
|
|
/*胜派新样式*/
|
|
|
|
|
|
|
|
.section .head .logo{
|
|
width: 8.5vw;
|
|
background-size: 7.5vw;
|
|
}
|
|
|
|
.canvas-box.big{
|
|
height: 37vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-data .top span{
|
|
font-size: 18px;
|
|
}
|
|
.table-data .lan-box{
|
|
padding-top: 1vh;
|
|
padding-bottom: 0.8vh;
|
|
}
|
|
.table-data .lan-box .item{
|
|
width:33.33%;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.table-data .title li strong{
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
text-shadow: 0px 0px 2px #fff;
|
|
margin-top: 0.8vh;
|
|
}
|
|
|
|
.limit-box .list .item span{
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.limit-box .list{
|
|
padding-left: 80px;
|
|
}
|
|
.limit-box .list .lab{
|
|
font-size: 20px;
|
|
width: 100px;
|
|
left: -3%;
|
|
}
|
|
|
|
|
|
|
|
.canvas-box .active-box{
|
|
font-size: 20px;
|
|
}
|
|
|
|
.canvas-box .active-box .item{
|
|
width: 200px;
|
|
}
|
|
|
|
.canvas-box .active-box strong{
|
|
font-size: 20px;
|
|
}
|
|
.canvas-box .active-box .tip{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
left: 206px;
|
|
margin-top: -27px;
|
|
}
|
|
.canvas-box .active-box .item:first-child{
|
|
margin-bottom: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
|
|
|
|
.section .head .box .list .date span{
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#language{
|
|
width:120px;
|
|
height:35px;
|
|
border-radius:5px;
|
|
color:#fff;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.section .head .box .date span{
|
|
padding-right: 5px;
|
|
|
|
|
|
}
|
|
|
|
.table-data .top {
|
|
margin-top: 0.7vh;
|
|
}
|
|
.table-data .lan-box .item small {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
.table-data .lan-box {
|
|
padding-bottom: 0;
|
|
padding-top: 0.5vh;
|
|
}
|
|
.limit-box .list .item span {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
.canvas-box .active-box {
|
|
border: 1px solid #fff;
|
|
bottom: -1px;
|
|
right: -1px;
|
|
}
|
|
.canvas-box .active-box p {
|
|
right: 0;
|
|
left: auto;
|
|
color: #DCD6D4;
|
|
} |