You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
3.0 KiB
195 lines
3.0 KiB
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
/*遮罩*/
|
|
|
|
.mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
background: rgba(245, 224, 182, 0.4);
|
|
display: none;
|
|
}
|
|
|
|
.imgs {
|
|
/*background: url(../img/5.jpg) no-repeat;*/
|
|
/*background-size: 100% 100%;*/
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.imgs img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
#container {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
/*z-index: 999;*/
|
|
width: 55%;
|
|
height: 90%;
|
|
}
|
|
|
|
#container canvas {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
/*.xuanwo{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
.xuanwo img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}*/
|
|
|
|
|
|
/*翻书结束后的文字*/
|
|
|
|
.bookImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99999;
|
|
/*display: none;*/
|
|
opacity: 0;
|
|
}
|
|
|
|
.bookImg img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.word {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 20%;
|
|
display: none;
|
|
/*display: flex;*/
|
|
width: 65%;
|
|
-webkit-transform: rotateX(30deg);
|
|
-ms-transform: rotateX(30deg);
|
|
-o-transform: rotateX(30deg);
|
|
transform: rotateX(30deg);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.word p {
|
|
font-size: .25rem;
|
|
}
|
|
|
|
.word p.title {
|
|
flex: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: .45rem;
|
|
margin-right: 2rem;
|
|
margin-top: -.5rem;
|
|
height: 4.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.word p.contWord {
|
|
width: 44%;
|
|
height: 4.5rem;
|
|
overflow-y: auto;
|
|
display: none;
|
|
}
|
|
|
|
.word p.contWord::-webkit-scrollbar-track-piece {
|
|
background-color: #999;
|
|
border-left: 1px solid #999;
|
|
}
|
|
|
|
.word p.contWord::-webkit-scrollbar {
|
|
width: 1px;
|
|
height:.13rem;
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.word p.contWord::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
background-clip: padding-box;
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
min-height: pxTorem(28px);
|
|
}
|
|
|
|
.word p.contWord::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.bookImg .btn1 {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 3%;
|
|
z-index: 99999;
|
|
display: none;
|
|
transform: translateX(-50%);
|
|
/*background: url(../img/game2/titleIcon.png) no-repeat;*/
|
|
}
|
|
|
|
.bookImg .btn1 span {
|
|
font-size: .36rem;
|
|
color: #fff;
|
|
display: flex;
|
|
/* margin: 0 auto; */
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
width: 3.83rem;
|
|
height: .72rem;
|
|
line-height: .72rem;
|
|
position: absolute;
|
|
border-radius: 12px;
|
|
left: 50%;
|
|
bottom: 0%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.bookImg .btn1 p {
|
|
width: 3.83rem;
|
|
height: .72rem;
|
|
background: #999;
|
|
border-radius: 12px;
|
|
margin: 0.5rem auto 0;
|
|
color: #fff;
|
|
font-size: .36rem;
|
|
text-align: center;
|
|
line-height: .82rem;
|
|
}
|
|
|
|
.bookImg .btn1 p.active {
|
|
background: #E40006;
|
|
}
|