This commit is contained in:
huangjinming 2022-11-24 19:19:22 +08:00
parent 8dd2d3048c
commit ab8d718477
9 changed files with 89 additions and 5 deletions

BIN
dist.rar

Binary file not shown.

View File

@ -16,6 +16,29 @@ img,video{ width: 100%; display: block;}
.videobg{ width: 100%; position: absolute; top: 0; left: 0;}
.section2{ background: linear-gradient(#0d0d0d,#141414, #141414); background-size: 100% auto;}
.timeblock{ background: rgba(12,12,12,0.6); width: 10.26rem; height: 5.6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.timer{
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.time-title{
margin-top: 0.5rem;
text-align: center;
/* margin-bottom: 0.4rem; */
}
.title-img{
width: 8.12rem !important;
display: inline-block !important;
}
.time-out{
width: 10.26rem; height: 5.6rem;background: rgba(89, 89, 89, 0.6); position: absolute; top:0; left: 0; text-align: center;
}
.time-out-img{
width: 5.12rem !important;
display: inline-block !important;
}
.cit1{ width: 9.07rem; margin: 0 auto 0.7rem; padding-top: 0.85rem;}
.cit2{ width: 2.06rem; margin: 0 auto 0.54rem;}
.timeattack{ width: 100%; display: flex; justify-content: center;}

View File

@ -15,6 +15,32 @@ img{ width: 100%; display: block;}
.section2{ background: linear-gradient(#0d0d0d,#141414, #141414); background-size: 100% auto; height: 11.6rem;}
.timeblock{ background: rgba(12,12,12,0.6); width: 9.12rem; height: 6.55rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.timer{
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.time-title{
margin-top: 0.8rem;
text-align: center;
margin-bottom: 0.5rem;
}
.title-img{
width: 7.12rem !important;
display: inline-block !important;
}
.time-out{
width: 9.12rem; height: 6.55rem;background: rgba(58, 56, 56, 0.8); position: absolute; top:0; left: 50; text-align: center;
}
.time-out-img{
width: 5.12rem !important;
display: inline-block !important;
}
/* .time-out-img>img{
width: 0.3rem;
} */
.cit1{ width: 6.06rem; margin: 0 auto 0.88rem; padding-top: 0.96rem;}
.cit2{ width: 2.06rem; margin: 0 auto 0.54rem;}
.timeattack{ width: 100%; display: flex; justify-content: center;}

View File

@ -111,7 +111,7 @@
<div class="videobg">
<video src="images/video3.mp4" muted autoplay loop></video>
</div>
<div class="timeblock">
<div class="timeblock timer">
<div class="cit1 anmode fadeUp" data-dura="0.6s" data-delay="0s">
<img class="preload" data-src="images/ctit1.png" />
</div>
@ -157,6 +157,14 @@
><img class="preload" data-src="images/quest_btn.png"
/></a>
</div>
<div class="time-out">
<div class="time-title">
<img class="title-img" src="./images/time-title.png" alt="" />
</div>
<div class="time-out-img">
<img src="./images/time-out.png" alt="" />
</div>
</div>
</div>
</div>
<div class="section section3">

BIN
public/images/time-out.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -126,7 +126,7 @@
<div class="ctimebg">
<div class="percotmodel model3"></div>
</div>
<div class="timeblock">
<div class="timeblock timer">
<div class="cit1 anmode fadeUp" data-dura="0.6s" data-delay="0.5s">
<img class="preload" data-src="images/ctit1m.png" />
</div>
@ -175,6 +175,14 @@
><img class="preload" data-src="images/quest_btn.png"
/></a>
</div>
<div class="time-out">
<div class="time-title">
<img class="title-img" src="./images/time-title.png" alt="" />
</div>
<div class="time-out-img">
<img src="./images/time-out.png" alt="" />
</div>
</div>
</div>
</div>
<div class="section section3">

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -86,6 +86,9 @@
<div class="time-text">SECOND</div>
</div>
</div>
<div class="time-out">
<img src="../../assets/mobile/time-out.png" alt="" />
</div>
</div>
<div class="points-list">
<div class="list-header">
@ -160,7 +163,7 @@
</div>
</div>
<div class="tips">
Get your own CODE and SEND link to others for 10000U reward!<br/>
Get your own CODE and SEND link to others for 10000U reward!<br />
*A-code invite B, +200; B-code invite C; A +40, B+200
<!-- Get your own code for 10000U reward<br/>*A-code invite B, +200; B-code invite C, +200; A-code +40 from C -->
</div>
@ -361,7 +364,7 @@ export default {
margin: 0 auto;
font-size: 0.66rem;
margin-bottom: 3vh;
white-space:nowrap;
white-space: nowrap;
line-height: 2.4vh;
color: #d7a972;
}
@ -474,6 +477,22 @@ export default {
padding-bottom: 2.2vh;
background: rgba(12, 12, 12, 1);
margin: 0 auto;
position: relative;
}
.time-out {
background: rgba(58, 56, 56, 0.8);
position: absolute;
height: 17.8vh;
top: 0;
left: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
img{
width:45% ;
}
}
.time-text {
text-align: center;
@ -696,4 +715,4 @@ export default {
font-size: 40px;
}
}
</style>
</style>