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.
162 lines
3.1 KiB
162 lines
3.1 KiB
<style type="text/css">
|
|
.beginIndex{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.beginIndex p.bgmImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.beginIndex p.bgmImg img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.beginIndex .bgmImg{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.beginIndex .beginBtn img.btn {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 10%;
|
|
width: 3.44rem;
|
|
height: .83rem;
|
|
}
|
|
.guiz p.title{
|
|
position: absolute;
|
|
top: 15%;
|
|
right: 5%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.guiz p.title img{
|
|
width: .41rem;
|
|
height: .23rem;
|
|
}
|
|
.guiz p.title span{
|
|
color: #fff;
|
|
font-size: .26rem;
|
|
padding-left: .1rem;
|
|
}
|
|
/*遮罩*/
|
|
.mask{
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background:url(img/begin.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
filter: blur(.2rem);
|
|
}
|
|
/*活动规则*/
|
|
.guizBox{
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
z-index: 9999;
|
|
}
|
|
p.close{
|
|
float: right;
|
|
width: .546rem;
|
|
height: .546rem;
|
|
}
|
|
p.close img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.box_cont{
|
|
margin-top: .65rem;
|
|
background: url(img/guizeBgm.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 10.13rem;
|
|
height: 5.78rem;
|
|
overflow: hidden;
|
|
}
|
|
.box_cont ul{
|
|
width: 8.7rem;
|
|
margin: 1.5rem auto 0;
|
|
}
|
|
.box_cont li{
|
|
display: flex;
|
|
}
|
|
.box_cont li div.contText{
|
|
font-size: .28rem;
|
|
color: #1F444B;
|
|
width: 7.28rem;
|
|
line-height: .46rem;
|
|
}
|
|
.box_cont li p.tips{
|
|
color: #30584D;
|
|
font-size: .28rem;
|
|
font-weight: bold;
|
|
}
|
|
.box_cont li:nth-child(2){
|
|
margin-top: .35rem;
|
|
}
|
|
.box_cont li:nth-child(3){
|
|
margin-top: .4rem;
|
|
}
|
|
</style>
|
|
<div class="beginIndex">
|
|
<!--<p class="bgmImg"><img src="img/begin.png" /></p>-->
|
|
<!--游戏规则-->
|
|
<div class="guiz">
|
|
<p class="title">
|
|
<img src="img/icon.png"/> <span>查看游戏规则</span>
|
|
</p>
|
|
<div class="guizBox">
|
|
<p class="close"><img src="img/close.png"/></p>
|
|
<div class="box_cont">
|
|
<ul>
|
|
<li>
|
|
<p class="tips">活动时间：</p>
|
|
<div class="contText">
|
|
2021年7月1日 — 2021年7月15日
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<p class="tips">活动规则：</p>
|
|
<div class="contText">
|
|
每一关均取自于长征中的经典故事，画面中隐藏着该故事中所包含的线索道具，集齐道具即可通关。每一关所需搜集的线索道具数量会在当前闯关界面进行提示。举例：《飞夺泸定桥》需要找到线索道具为“木板”。
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<p class="tips">参与方式：</p>
|
|
<div class="contText">
|
|
用户可通过微信参与活动。
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--开始-->
|
|
<div class="beginBtn">
|
|
|
|
<img class="btn" src="img/beginBtn.png" />
|
|
</div>
|
|
<div class="mask"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$('.close').click(function(){
|
|
$('.mask').fadeOut();
|
|
$('.guizBox').fadeOut()
|
|
})
|
|
$('.title').click(function(){
|
|
$('.mask').fadeIn();
|
|
$('.guizBox').fadeIn()
|
|
})
|
|
$('.beginBtn').click(function(){
|
|
$('.begin').fadeOut(100)
|
|
$('.loading').fadeOut(100)
|
|
$('#game1').fadeIn(500)
|
|
})
|
|
</script>
|