diff --git a/css/new/index.css b/css/new/index.css
index 2aac6c0..38544ea 100644
--- a/css/new/index.css
+++ b/css/new/index.css
@@ -1,13 +1,20 @@
/*页面公共区域*/
+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,16 +67,131 @@
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;
- background: url("../../img/new3/imageSprites.png") no-repeat;
+ background: url("../../img/new3/imageSprites.png") no-repeat;
background-size: 100% 100%;
position: fixed;
bottom: 0.6rem;
@@ -79,6 +205,7 @@
from {
bottom: 0.6rem;
}
+
to {
bottom: 0.2rem;
}
diff --git "a/img/new3/\346\260\224\346\263\241-live.png" b/img/new3/bubble1.png
similarity index 100%
rename from "img/new3/\346\260\224\346\263\241-live.png"
rename to img/new3/bubble1.png
diff --git "a/img/new3/\346\260\224\346\263\241-video.png" b/img/new3/bubble2.png
similarity index 100%
rename from "img/new3/\346\260\224\346\263\241-video.png"
rename to img/new3/bubble2.png
diff --git "a/img/new3/\346\260\224\346\263\241-video2.png" b/img/new3/bubble3.png
similarity index 100%
rename from "img/new3/\346\260\224\346\263\241-video2.png"
rename to img/new3/bubble3.png
diff --git "a/img/new3/\346\260\224\346\263\241-chat.png" b/img/new3/bubble4.png
similarity index 100%
rename from "img/new3/\346\260\224\346\263\241-chat.png"
rename to img/new3/bubble4.png
diff --git "a/img/new3/\346\240\207\351\242\230\345\205\203\347\264\240.png" b/img/new3/mIcon.png
similarity index 100%
rename from "img/new3/\346\240\207\351\242\230\345\205\203\347\264\240.png"
rename to img/new3/mIcon.png
diff --git a/newIndex.html b/newIndex.html
index d0af9b5..1c9ff4a 100644
--- a/newIndex.html
+++ b/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;
}