Skip to content

libai / footsen

Go to a project
Commit 998fa78f by agan
Options

添加新版主頁

parent e95f84be
Inline Side-by-side
Showing with 224 additions and 14 deletions
css/new/index.css
/*页面公共区域*/
body {
background: #bb2677;
}
#pro {
position: absolute;
position: fixed;
width: 10rem;
height: 100%;
overflow: hidden;
left: 0;
left: 50%;
top: 0;
background: #bb2677;
transform: translateX(-50%);
}
.page {
width: 10rem;
height: 100%;
......@@ -22,32 +29,36 @@
position: relative;
overflow: hidden;
}
.page0{
.page0 {
background: url(../../img/new3/bg1.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.page1{
.page1 {
background: url(../../img/new3/bg2.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.page2{
.page2 {
background: url(../../img/new3/bg3.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.mPhone{
.mPhone {
width: 5.347rem;
height: 10.68rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
z-index: 10;
}
.phoneBorder{
.phoneBorder {
width: 100%;
height: 100%;
background: url(../../img/new3/phone.png) no-repeat;
......@@ -56,12 +67,127 @@
top: 0;
left: 0;
}
#video{
width: 100%;
height: 100%;
.videoCon {
border-radius: 1rem;
overflow: hidden;
height: 100%;
margin: 0rem 0.2rem;
}
#video {
height: 100%;
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 {
width: 1.227rem;
height: 1.173rem;
......@@ -79,6 +205,7 @@
from {
bottom: 0.6rem;
}
to {
bottom: 0.2rem;
}
......
newIndex.html
......@@ -21,8 +21,8 @@
</script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<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">
<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="css/new/common.css">
<link rel="stylesheet" href="css/new/index.css">
......@@ -47,6 +47,11 @@
<div class="only18"></div>
</div>
<div class="page1 p">
<div class="mTitle mTitle1">
<i class="mIcon"></i>
<span>我們的主播</span>
<i class="mIcon"></i>
</div>
<div class="mPhone">
<div class="phoneBorder"></div>
<div class="videoCon">
......@@ -55,10 +60,78 @@
</video>
</div>
</div>
<div class="bubbles">
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
</div>
</div>
<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>
......@@ -82,6 +155,11 @@
return;
}
curp++;
if(curp == 2){
$('.wipeUp').hide();
}else{
$('.wipeUp').show();
}
$('.curpage').animate({ top: -(scrollH * curp) + 'px'});
return;
}
......@@ -91,6 +169,11 @@
return;
}
curp--;
if(curp == 2){
$('.wipeUp').hide();
}else{
$('.wipeUp').show();
}
$('.curpage').animate({ top: -(scrollH * curp) + 'px'});
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