Skip to content

libai / footsen

Go to a project
Commit 998fa78f by agan
Options

添加新版主頁

parent e95f84be
Inline Side-by-side
Showing with 225 additions and 15 deletions
css/new/index.css
/*页面公共区域*/ /*页面公共区域*/
body {
background: #bb2677;
}
#pro { #pro {
position: absolute; position: fixed;
width: 10rem; width: 10rem;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
left: 0; left: 50%;
top: 0; top: 0;
background: #bb2677; background: #bb2677;
transform: translateX(-50%);
} }
.page { .page {
width: 10rem; width: 10rem;
height: 100%; height: 100%;
...@@ -22,32 +29,36 @@ ...@@ -22,32 +29,36 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.page0{
.page0 {
background: url(../../img/new3/bg1.jpg) no-repeat; background: url(../../img/new3/bg1.jpg) no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.page1{
.page1 {
background: url(../../img/new3/bg2.jpg) no-repeat; background: url(../../img/new3/bg2.jpg) no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.page2{
.page2 {
background: url(../../img/new3/bg3.jpg) no-repeat; background: url(../../img/new3/bg3.jpg) no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.mPhone{ .mPhone {
width: 5.347rem; width: 5.347rem;
height: 10.68rem; height: 10.68rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
z-index: 10;
} }
.phoneBorder{ .phoneBorder {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(../../img/new3/phone.png) no-repeat; background: url(../../img/new3/phone.png) no-repeat;
...@@ -56,16 +67,131 @@ ...@@ -56,16 +67,131 @@
top: 0; top: 0;
left: 0; left: 0;
} }
#video{
width: 100%; .videoCon {
height: 100%;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden;
height: 100%;
margin: 0rem 0.2rem;
}
#video {
height: 100%;
padding-top: 0.35rem; padding-top: 0.35rem;
margin-right: 0.1rem;
}
.mTitle {
position: absolute;
top: 4rem;
left: 50%;
transform: translateX(-50%);
}
.mTitle>span {
font-size: 0.6rem;
padding: 0 0.2rem;
color: #fff;
}
.mIcon {
display: inline-block;
vertical-align: middle;
width: 0.28rem;
height: 0.28rem;
background: url(../../img/new3/mIcon.png) no-repeat;
background-size: 100% 100%;
}
.bubble1 {
width: 2.293rem;
height: 2.24rem;
background: url(../../img/new3/bubble1.png) no-repeat;
background-size: contain;
position: absolute;
top: 2rem;
left: -0.4rem;
}
.bubble2 {
width: 1.64rem;
height: 1.667rem;
background: url(../../img/new3/bubble2.png) no-repeat;
background-size: contain;
position: absolute;
top: 1.6rem;
left: 7rem;
}
.bubble3 {
width: 2.293rem;
height: 2.24rem;
background: url(../../img/new3/bubble3.png) no-repeat;
background-size: contain;
position: absolute;
top: 8rem;
right: -0.4rem;
}
.bubble4 {
width: 2.96rem;
height: 3.053rem;
background: url(../../img/new3/bubble4.png) no-repeat;
background-size: contain;
position: absolute;
top: 14rem;
left: -0.2rem;
}
.recommendBox {
width: 8rem;
height: 15rem;
position: absolute;
top: 5rem;
left: 1rem;
overflow-y: scroll;
} }
.rVideos {
width: 100%;
}
.rRow {
width: 100%;
}
.youtubeVideos {
width: 8rem;
height: 4rem;
margin: 0 auto;
position: relative;
border-radius: 0.267rem;
overflow: hidden;
}
.elementor-video-iframe {
max-width: 100%;
width: 100%;
border: none;
position: absolute;
height: 100%;
}
.rInfo{
line-height: 1rem;
color: #fff;
font-size: 0.347rem;
}
.rName{
margin-left: 0.8rem;
}
.wipeUp { .wipeUp {
width: 1.227rem; width: 1.227rem;
height: 1.173rem; height: 1.173rem;
background: url("../../img/new3/imageSprites.png") no-repeat; background: url("../../img/new3/imageSprites.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: fixed; position: fixed;
bottom: 0.6rem; bottom: 0.6rem;
...@@ -79,6 +205,7 @@ ...@@ -79,6 +205,7 @@
from { from {
bottom: 0.6rem; bottom: 0.6rem;
} }
to { to {
bottom: 0.2rem; bottom: 0.2rem;
} }
......
newIndex.html
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
</script> </script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<script src="https://www.footseen.com/js/fsize.js"></script>
<link rel="stylesheet" href="https://www.footseen.com/css/base2.css"> <link rel="stylesheet" href="https://www.footseen.com/css/base2.css">
<script src="https://www.footseen.com/js/fsize.js"></script>
<link rel="stylesheet" href="https://www.footseen.com/css/newIndex.css?v=202104061611111111111111"> <link rel="stylesheet" href="https://www.footseen.com/css/newIndex.css?v=202104061611111111111111">
<link rel="stylesheet" href="css/new/common.css"> <link rel="stylesheet" href="css/new/common.css">
<link rel="stylesheet" href="css/new/index.css"> <link rel="stylesheet" href="css/new/index.css">
...@@ -47,6 +47,11 @@ ...@@ -47,6 +47,11 @@
<div class="only18"></div> <div class="only18"></div>
</div> </div>
<div class="page1 p"> <div class="page1 p">
<div class="mTitle mTitle1">
<i class="mIcon"></i>
<span>我們的主播</span>
<i class="mIcon"></i>
</div>
<div class="mPhone"> <div class="mPhone">
<div class="phoneBorder"></div> <div class="phoneBorder"></div>
<div class="videoCon"> <div class="videoCon">
...@@ -55,10 +60,78 @@ ...@@ -55,10 +60,78 @@
</video> </video>
</div> </div>
</div> </div>
<div class="bubbles">
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
</div>
</div> </div>
<div class="page2 p"> <div class="page2 p">
<h1>第三页</h1> <div class="mTitle mTitle2">
<i class="mIcon"></i>
<span>網紅門的推薦</span>
<i class="mIcon"></i>
</div>
<div class="recommendBox">
<div class="rVideos">
<div class="rRow">
<div class="youtubeVideos">
<iframe class="elementor-video-iframe" src="https://www.youtube.com/embed/PxRti9Bknrs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="rInfo">
<span class="rTime">2021/08/22</span>
<span class="rName">美麗妄娜</span>
</div>
</div>
<div class="rRow">
<div class="youtubeVideos">
<iframe class="elementor-video-iframe" src="https://www.youtube.com/embed/ygtef2thdgw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="rInfo">
<span class="rTime">2021/07/16</span>
<span class="rName">超直白Chaozhibai</span>
</div>
</div>
<!-- <div class="rRow">
<div class="youtubeVideos">
<iframe class="elementor-video-iframe" src="https://www.youtube.com/embed/HyLJ5gg6HLg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="rInfo">
<span class="rTime">2021/07/08</span>
<span class="rName">1G老濕</span>
</div>
</div> -->
<div class="rRow">
<div class="youtubeVideos">
<iframe class="elementor-video-iframe" src="https://www.youtube.com/embed/n9QRNjZNJQ4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="rInfo">
<span class="rTime">2021/06/06</span>
<span class="rName">Dashen大神</span>
</div>
</div>
<div class="rRow">
<div class="youtubeVideos">
<iframe class="elementor-video-iframe" src="https://www.youtube.com/embed/Lt3fZZqNulg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="rInfo">
<span class="rTime">2021/05/29</span>
<span class="rName">耀耀</span>
</div>
</div>
<div class="rRow">
<div class="youtubeVideos">
<iframe class="elementor-video-iframe" src="https://www.youtube.com/embed/UNtQytZtGkM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="rInfo">
<span class="rTime">2021/05/09</span>
<span class="rName">秀煜 Show YoU</span>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -82,6 +155,11 @@ ...@@ -82,6 +155,11 @@
return; return;
} }
curp++; curp++;
if(curp == 2){
$('.wipeUp').hide();
}else{
$('.wipeUp').show();
}
$('.curpage').animate({ top: -(scrollH * curp) + 'px'}); $('.curpage').animate({ top: -(scrollH * curp) + 'px'});
return; return;
} }
...@@ -91,6 +169,11 @@ ...@@ -91,6 +169,11 @@
return; return;
} }
curp--; curp--;
if(curp == 2){
$('.wipeUp').hide();
}else{
$('.wipeUp').show();
}
$('.curpage').animate({ top: -(scrollH * curp) + 'px'}); $('.curpage').animate({ top: -(scrollH * curp) + 'px'});
return; return;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment