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.
278 lines
4.0 KiB
278 lines
4.0 KiB
.game1Index {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.game1Index p.bgm img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.game1Index p.bgm img:nth-child(1) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.game1Index p.bgm img:nth-child(2) {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.game1Index .imgList li {
|
|
width: 1.21rem;
|
|
height: 1.2rem;
|
|
background: url(../img/game1/kuang.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.game1Index .imgList li img {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.game1Index .imgList li:nth-child(1) {
|
|
left: 1%;
|
|
}
|
|
|
|
.game1Index .imgList li:nth-child(2) {
|
|
left: 11%;
|
|
}
|
|
|
|
.game1Index .imgList li:nth-child(3) {
|
|
left: 21%;
|
|
}
|
|
|
|
.game1Index .clickIcon li {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
position: absolute;
|
|
/*left: 0;
|
|
top: 0;*/
|
|
/*background: #000000;
|
|
opacity: .5;*/
|
|
}
|
|
|
|
.game1Index .clickIcon li.click1 {
|
|
top: 40%;
|
|
left: 60%;
|
|
}
|
|
|
|
.game1Index .clickIcon li.click2 {
|
|
bottom: 23%;
|
|
left: 40%;
|
|
width: 1.5rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.game1Index .clickIcon img {
|
|
width: .92rem;
|
|
display: none;
|
|
}
|
|
|
|
.game1Index .clickIcon li.click3 {
|
|
top: 43%;
|
|
left: 15%;
|
|
width: 3rem;
|
|
height: 1.3rem;
|
|
transform: rotate(33deg);
|
|
}
|
|
|
|
|
|
/*书*/
|
|
|
|
.game1Index .maskBgm {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../img/game1/successBgm.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.game1Index .maskBgm:after {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: inherit;
|
|
filter: blur(10px);
|
|
z-index: 2;
|
|
}
|
|
|
|
.game1Index .book_box {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.game1Index div.line {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(61, 117, 122, .5);
|
|
width: 100%;
|
|
height: 1.66rem;
|
|
z-index: -1;
|
|
}
|
|
|
|
.game1Index div.line div {
|
|
margin: 0 auto;
|
|
width: 11rem;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.game1Index div.line p {
|
|
box-sizing: border-box;
|
|
font-size: .44rem;
|
|
font-weight: 400;
|
|
color: #C9C6BA;
|
|
}
|
|
|
|
div.line p {
|
|
width: .42rem;
|
|
height: .4rem;
|
|
font-size: 0;
|
|
}
|
|
|
|
div.line p img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.game1Index div.closeIcon {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-right: 1.2rem;
|
|
margin-top: .55rem;
|
|
}
|
|
|
|
.game1Index div.closeIcon img {
|
|
width: .546rem;
|
|
height: .546rem;
|
|
}
|
|
|
|
.game1Index .bookCont {
|
|
width: 9.93rem;
|
|
height: 5.89rem;
|
|
background: url(../img/bookBgm.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
z-index: 999;
|
|
display: flex;
|
|
}
|
|
|
|
.game1Index .leftImg {
|
|
width: 3.58rem;
|
|
margin-left: .9rem;
|
|
}
|
|
|
|
.game1Index .leftImg .titleTip {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: .42rem;
|
|
}
|
|
|
|
.game1Index .leftImg .titleTip p {
|
|
color: #1F444B;
|
|
font-size: .22rem;
|
|
}
|
|
|
|
.game1Index .leftImg .img {
|
|
width: 1.18rem;
|
|
height: .91rem;
|
|
}
|
|
|
|
.game1Index .leftImg .imgList {
|
|
width: 3.58rem;
|
|
height: 4.14rem;
|
|
margin-top: .1rem;
|
|
}
|
|
|
|
.game1Index .leftImg img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.game1Index .rightCont {
|
|
width: 3.8rem;
|
|
margin-left: 1.05rem;
|
|
position: relative;
|
|
}
|
|
|
|
.game1Index .rightCont .titleTip {
|
|
display: flex;
|
|
margin-top: .7rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.game1Index .rightCont .titleTip h2,
|
|
.game1Index .rightCont .titleTip h5 {
|
|
color: #1F444B;
|
|
font-size: .3rem;
|
|
}
|
|
|
|
.game1Index .rightCont .titleTip h5 {
|
|
font-weight: normal;
|
|
font-size: .22rem;
|
|
}
|
|
|
|
.game1Index .rightCont ul {
|
|
margin-top: .12rem;
|
|
}
|
|
|
|
.game1Index .rightCont li {
|
|
font-size: .2rem;
|
|
color: #1F444B;
|
|
line-height: .36rem;
|
|
}
|
|
|
|
.game1Index .rightCont .pageNum {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
left: 40%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
font-size: .2rem;
|
|
color: #1F444B;
|
|
}
|
|
|
|
|
|
/*手势*/
|
|
|
|
.game1Index .shoushi {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, .5);
|
|
z-index: 99999;
|
|
}
|
|
|
|
.game1Index .shoushi img {
|
|
position: absolute;
|
|
right: 28%;
|
|
top: 11%;
|
|
width: 2.5rem;
|
|
}
|