文件
mashangyoujiu/Public/vip/css/turntable/turntable.css

398 行
6.7 KiB
CSS
可执行文件

/* .wrap{
width: 100vw;
height: 100vh;
background-size: 100% 100%;
box-sizing: border-box;
padding-top: 140px;
} */
.turn_a{
position: relative;
width: 90vw;
height:90vw;
margin: auto;
}
.turn_a1{
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.turn_a2{
width: 30vw;
height: 40.28vw;
/*10.422*/
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 30px;
margin: auto;
z-index: 1;
}
.turn_a01{
width: 22vw;
text-align: center;
position: absolute;
left: 45vw;
top: 13vw;
transform: rotateZ(23.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a01 img{
width: 12vw;
}
.turn_a02{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left: 62vw;
top: 30vw;
transform: rotateZ(68.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a02 img{
width: 12vw;
}
.turn_a03{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left: 62vw;
top: 54vw;
transform: rotateZ(113.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a03 img{
width: 12vw;
}
.turn_a04{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left: 46vw;
top: 71vw;
transform: rotateZ(156.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a04 img{
width: 12vw;
}
.turn_a05{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left: 22vw;
top: 71vw;
transform: rotateZ(201.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a05 img{
width: 12vw;
}
.turn_a06{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left: 4vw;
top: 54vw;
transform: rotateZ(246.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a06 img{
width: 12vw;
}
.turn_a07{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left: 6vw;
top: 31vw;
transform: rotateZ(291.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a07 img{
width: 12vw;
}
.turn_a08{
width: 22vw;
height: 5vw;
text-align: center;
position: absolute;
left:22vw;
top: 14vw;
transform: rotateZ(336.5deg);
color: #d41819;
font-size: 3vw;
}
.turn_a08 img{
width: 12vw;
}
.turn_b{
width: 100vw;
display: flex;
position: absolute;
bottom: 0;
left: 0;
}
.turn_b img{
width: 33.333vw;
height: 18vw;
}
.mask{
display: none;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.mask_close{
display: block;
width: 26px;
position: absolute;
right: 3px;
top: 3px;
}
.mask_inner{
display: none;
width: 80vw;
height: auto;
background: white;
position: relative;
border-radius: 5px;
z-index: 99;
box-sizing: border-box;
padding-bottom: 30px;
}
.mask_inner01{
text-align: center;
font-size: 20px;
box-sizing: border-box;
padding-top: 20px;
}
.mask_inner02{
display: flex;
justify-content: center;
box-sizing: border-box;
padding-top: 20px;
}
.mask_inner03{
text-align: center;
font-size: 16px;
box-sizing: border-box;
padding-top: 10px;
}
.mask_inner04{
margin: auto;
margin-top: 20px;
width: 80%;
height: 35px;
background: wheat;
display: flex;
font-size: 14px;
border-radius: 2px;
}
.mask_inner04_a{
width: 60%;
height: 100%;
box-sizing: border-box;
border: 1px solid gainsboro;
}
.mask_inner04_a input{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 10px;
font-size: 14px;
}
.mask_inner04_b{
width: 40%;
height: 100%;
text-align: center;
line-height: 35px;
background: #ff9f00;
color: white;
border-radius: 0 2px 2px 0;
}
.mask_hdgl{
display: none;
width: 80vw;
height: auto;
background: white;
position: fixed;
left: 0;
right: 0;
top: 30vh;
margin: auto;
border-radius: 5px;
z-index: 99;
border-radius: 5px;
}
.mask_hdgl00{
display: block;
width: 23px;
position: absolute;
right: 3px;
top: 3px;
}
.mask_hdgl01{
width: 100%;
height: 30px;
background: #FF9F00;
border-radius: 5px 5px 0 0;
color: white;
font-size: 14px;
box-sizing: border-box;
padding: 0 5px;
line-height: 30px;
}
.mask_hdgl02{
box-sizing: border-box;
padding: 20px;
font-size: 14px;
}
.mask_hdgl02 p{
margin-bottom: 10px;
}
.mask_hdsm{
display: none;
width: 80vw;
height: auto;
background: white;
position: fixed;
left: 0;
right: 0;
top: 30vh;
margin: auto;
border-radius: 5px;
z-index: 99;
}
.mask_hdsm00{
display: block;
width: 23px;
position: absolute;
right: 3px;
top: 3px;
}
.mask_hdsm01{
width: 100%;
height: 30px;
background: #FF9F00;
border-radius: 5px 5px 0 0;
color: white;
font-size: 14px;
box-sizing: border-box;
padding-left: 10px;
line-height: 30px;
}
.mask_hdsm02{
box-sizing: border-box;
padding: 30px 20px 0px 20px;
font-size: 14px;
}
.mask_hdsm02 p{
margin-bottom: 10px;
}
.p_time{
text-align: right;
margin-top: 30px;
font-size: 12px;
}
.mask_ckjp{
display: none;
width: 80vw;
height: auto;
background: white;
position: fixed;
left: 0;
right: 0;
top: 30vh;
margin: auto;
border-radius: 5px;
z-index: 99;
box-sizing: border-box;
padding: 20px;
}
.mask_ckjp01{
text-align: center;
font-size: 14px;
}
.mask_ckjp02{
display: flex;
justify-content: center;
box-sizing: border-box;
padding-top: 20px;
}
.mask_ckjp03{
text-align: center;
font-size: 16px;
box-sizing: border-box;
padding-top: 10px;
}
.mask_ckjp00{
display: block;
width: 23px;
position: absolute;
right: 3px;
top: 3px;
}
.turn_a2{
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* Internet Explorer */
-moz-transform: rotate(0deg);
/* Firefox */
-webkit-transform: rotate(0deg);
/* Safari 和 Chrome */
-o-transform: rotate(0deg);
}
.mask_inner05{
width: 80%;
margin: 20px auto 0;
background-color: #ff9f00;
border-radius: 5px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
}
.text{
position: fixed;
width: 100%;
text-align: center;
color: white;
font-size: 12px;
line-height: 24px;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
}
.img{
height: auto;
max-height: 30vw;
max-width: 80%;
}
.marsk_box{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}