Skip to content

libai / footseen-large-website

Go to a project
Commit 8535da97 by libai
Options

测试

parent 514eb255
Expand all
Inline Side-by-side
Showing with 462 additions and 11 deletions
index.html
......@@ -418,7 +418,11 @@ $(function(){
if(sessionStorage.jump==2) liveList(1,2)
else liveList(1,1)
getTags()
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
if(typeNum==2){
var imgNum=Math.floor(Math.random()*11)
getTopics(imgNum,typeNum,tagNum,timeNum,sortNum,dayNum)
}else getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
if(sessionStorage.go=="footseen"){
$.ajax({
url:$ip+'activeLog/webActive',
......@@ -605,9 +609,9 @@ $(function(){
}
else if(_self.attr("data-type")==5){
var imgNum=Math.floor(Math.random()*11)
scrollOk=true;
pageNumber=1
pageNumber=imgNum-1
typeNum=2
$(".side-nav").hide()
$(".tag-big-box").show()
......@@ -617,7 +621,7 @@ $(function(){
$(".like-box").hide()
$(".images-list-box").show()
if(oneImg){
getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
getTopics(imgNum,typeNum,tagNum,timeNum,sortNum,dayNum)
oneImg=false
}else{
scrollTo('.m-box',350)
......@@ -901,11 +905,12 @@ $(function(){
}
if(sessionStorage.jump==5){
scrollNav=false
var imgNum=Math.floor(Math.random()*11)
$(".neck-nav-ul li").removeClass("neck-nav-li-click")
$(".neck-nav-ul li").eq(sessionStorage.jump-1).addClass("neck-nav-li-click")
$(".side-nav").hide()
scrollOk=true;
pageNumber=1
pageNumber=imgNum-1
typeNum=2
$(".tag-big-box").show()
$(".side-tag-ul li").removeClass("tag-click")
......@@ -913,7 +918,7 @@ $(function(){
$(".video-list-box").hide()
$(".like-box").hide()
$(".images-list-box").show()
// getTopics(1,typeNum,tagNum,timeNum,sortNum,dayNum)
// getTopics(imgNum,typeNum,tagNum,timeNum,sortNum,dayNum)
}
if(sessionStorage.jump==6){
scrollNav=false
......
room/imagesRoom.html
......@@ -205,7 +205,7 @@ $(function(){
if(data.selfUp==1) var html='<div><img src="images/icon1.png" alt=""><span>'+data.comment+'</span></div><div class="good-box"><img class="good-btn" data-type="1" src="images/icon2-click.png" alt=""><span>'+data.up+'</span></div>';
else var html='<div><img src="images/icon1.png" alt=""><span>'+data.comment+'</span></div><div class="good-box"><img class="good-btn" data-type="0" src="images/icon2.png" alt=""><span>'+data.up+'</span></div>';
$(".video-btn-box").html(html)
$(".video-time-box").html('<span>'+data.visit+'次观看</span><span>'+timeGet(data.updateTime)[0]+'年'+timeGet(data.updateTime)[1]+'月'+timeGet(data.updateTime)[2]+'日</span>')
$(".video-time-box").html('<span>'+data.visit+'次观看</span>')
var html=[];
html+='<img class="video-face-box-face" src="https://zhibocdn.yabolive.net/comm'+data.face+'?x-oss-process=image/resize,w_40" alt="">';
html+='<p class="video-face-box-name">'+data.nickname+'</p>';
......
vip/css/index.css
......@@ -46,12 +46,70 @@
top: 45px;
left: 50px;
}
.vip-tip-bg {
width: 1200px;
height: 1624px;
background: url(../images/vip-tip-bg.png) no-repeat;
margin-top: 32px;
position: relative;
}
.vip-bottom {
width: 160px;
position: absolute;
bottom: 10px;
margin-left: -80px;
left: 50%;
}
.vip-tips-content {
width: 1042px;
height: 931px;
left: 79px;
background: url(../images/vip-tips-content.png) no-repeat;
position: absolute;
bottom: 80px;
}
.vip-tip-text1 {
color: #53402B;
text-align: center;
font-size: 16px;
padding-top: 220px;
line-height: 28px;
}
.vip-tip-text1 span {
color: #FFF3E4;
}
.vip-back {
text-decoration: underline;
cursor: pointer;
}
.vip-tip-text2 h2 {
text-align: center;
font-size: 18px;
font-weight: 700;
color: #53402B;
margin-top: 65px;
}
.vip-tip-text2 > div {
font-size: 14px;
text-align: center;
color: #53402B;
line-height: 32px;
padding-top: 20px;
}
.vip-tip-text2 > div span {
color: #19D6FF;
}
.feather {
position: absolute;
right: 0;
top: 175px;
pointer-events: none;
}
.vip-icon {
position: absolute;
right: 0;
top: 43px;
}
.vip-bottom-bg {
width: 976px;
height: 481px;
......@@ -60,6 +118,53 @@
z-index: 2;
bottom: 0;
}
.stealth-box {
display: none;
transition: 0.2s all;
width: 54px;
height: 20px;
border-radius: 50px;
background: linear-gradient(to right, #DDAA72, #B1793A);
position: absolute;
line-height: 20px;
color: #fff;
font-size: 12px;
text-indent: 12px;
top: 82px;
left: 69px;
cursor: pointer;
}
.stealth-box > div {
transition: 0.2s all;
height: 18px;
width: 18px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 1px;
left: 1px;
}
.stealth-box2 {
background: #AAAAAA;
text-indent: -12px;
}
.stealth-box2 div {
left: 35px;
}
.vip-question {
color: #666666;
font-size: 14px;
position: absolute;
line-height: 22px;
right: 0;
top: -30px;
cursor: pointer;
}
.vip-question > img {
vertical-align: middle;
margin-top: -2px;
margin-left: 4px;
}
.left-vip-ul {
height: 522px;
width: 211px;
......@@ -97,13 +202,13 @@
color: #333333;
font-size: 18px;
font-weight: 700;
text-indent: 135px;
text-indent: 140px;
padding-top: 24px;
}
.vip-top-card-p2 {
color: #666666;
font-size: 14px;
text-indent: 135px;
text-indent: 140px;
margin-top: 4px;
}
.vip-top-card-p3 {
......@@ -114,7 +219,7 @@
height: 20px;
text-align: center;
border-radius: 20px;
margin-left: 134px;
margin-left: 140px;
margin-top: 4px;
}
.vip-content-card {
......@@ -144,7 +249,7 @@
overflow: hidden;
}
.vip-content-box1 .vip-bar-box > div {
width: 50%;
width: 0%;
height: 6px;
background: linear-gradient(to right, #E7B884, #B1793B);
border-radius: 4px;
......@@ -182,6 +287,30 @@
color: #999999;
font-size: 14px;
}
.vip-bottom-ul li:nth-child(1):hover .vip-tips1 {
display: block;
}
.vip-bottom-ul li:nth-child(2):hover .vip-tips2 {
display: block;
}
.vip-bottom-ul li:nth-child(3):hover .vip-tips3 {
display: block;
}
.vip-bottom-ul li:nth-child(4):hover .vip-tips4 {
display: block;
}
.vip-bottom-ul li:nth-child(5):hover .vip-tips5 {
display: block;
}
.vip-bottom-ul li:nth-child(6):hover .vip-tips6 {
display: block;
}
.vip-bottom-ul li:nth-child(7):hover .vip-tips7 {
display: block;
}
.vip-bottom-ul li:nth-child(8):hover .vip-tips8 {
display: block;
}
.vip-bottom-btn-box {
width: 220px;
height: 120px;
......@@ -760,3 +889,320 @@
margin-left: 18px;
padding-top: 10px;
}
.vip-layer {
width: 430px;
height: 500px;
background: #FFFFFF;
border-radius: 8px;
position: relative;
display: none;
}
.vip-layer .vip-layer-top {
text-align: center;
font-size: 20px;
color: #333333;
height: 70px;
line-height: 70px;
font-weight: 700;
}
.vip-layer .vip-layer-box1 {
height: 60px;
width: 320px;
background: #F4F5F8;
border-radius: 8px;
margin: 0 auto;
position: relative;
cursor: pointer;
}
.vip-layer .vip-layer-box2 {
height: 60px;
width: 320px;
background: #F4F5F8;
border-radius: 8px;
margin: 0 auto;
margin-top: 15px;
position: relative;
cursor: pointer;
}
.vip-layer .vip-layer-box3 {
height: 60px;
width: 320px;
background: #F4F5F8;
border-radius: 8px;
margin: 0 auto;
margin-top: 15px;
position: relative;
cursor: pointer;
}
.vip-layer .vip-layer-box4 {
height: 60px;
width: 320px;
background: #F4F5F8;
border-radius: 8px;
margin: 0 auto;
margin-top: 15px;
position: relative;
cursor: pointer;
}
.vip-layer .vip-layer-box-click {
height: 58px;
width: 318px;
background: #FFEDF4;
border: 1px solid #E62E74;
}
.vip-layer .vip-layer-box-click .vip-layer-box-span1 {
height: 58px;
line-height: 58px;
text-indent: 29px;
}
.vip-layer .vip-layer-box-click .vip-layer-box-span2 {
height: 58px;
line-height: 58px;
right: -1px;
}
.vip-layer .vip-layer-box-span1 {
height: 60px;
display: inline-block;
width: 200px;
line-height: 60px;
text-indent: 30px;
}
.vip-layer .vip-layer-box-span2 {
height: 60px;
display: inline-block;
width: 80px;
line-height: 60px;
position: absolute;
right: 0;
color: #E53985;
}
.vip-layer .vip-layer-box-span2 > img {
vertical-align: middle;
margin-top: -4px;
margin-right: 8px;
}
.vip-layer .vip-layer-tips {
font-size: 12px;
color: #AAAAAA;
text-align: center;
margin-top: 34px;
}
.vip-layer .vip-layer-btn {
width: 220px;
height: 50px;
background: #E62E74;
border-radius: 50px;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 50px;
cursor: pointer;
margin: 0 auto;
margin-top: 15px;
}
.vip-frame {
position: absolute;
width: 110px;
height: 110px;
z-index: 1;
top: -8px;
left: 35px;
font-size: 0;
}
.vip-frame1 {
background: url(../images/v1.png) no-repeat;
background-size: 100% 100%;
}
.vip-frame1 > span {
color: #014F27;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 70px;
}
.vip-frame2 {
background: url(../images/v2.png) no-repeat;
background-size: auto 100%;
animation: swiper2 4.8s steps(16, start) 0ms infinite normal backwards;
background-position: 0 0;
}
.vip-frame2 > span {
color: #003A55;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 70px;
}
@keyframes swiper2 {
0% {
background-position: 0 0;
}
28% {
background-position: -1760px 0;
}
100% {
background-position: -1760px 0;
}
}
.vip-frame3 {
background: url(../images/v3.png) no-repeat;
background-size: auto 100%;
animation: swiper3 5.6s steps(19, start) 0ms infinite normal backwards;
background-position: 0 0;
}
.vip-frame3 > span {
color: #9B0B30;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 70px;
}
@keyframes swiper3 {
0% {
background-position: 0 0;
}
31% {
background-position: -2090px 0;
}
100% {
background-position: -2090px 0;
}
}
.vip-frame4 {
background: url(../images/v4.png) no-repeat;
background-size: auto 100%;
animation: swiper4 5s steps(17, start) 0ms infinite normal backwards;
background-position: 0 0;
}
.vip-frame4 > span {
color: #9B0B30;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 68px;
}
@keyframes swiper4 {
0% {
background-position: 0 0;
}
29% {
background-position: -1870px 0;
}
100% {
background-position: -1870px 0;
}
}
.vip-frame5 {
background: url(../images/v5.png) no-repeat;
background-size: auto 100%;
animation: swiper5 4.6s steps(20, start) 0ms infinite;
background-position: 0 0;
}
.vip-frame5 > span {
color: #fff;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 66px;
}
@keyframes swiper5 {
0% {
background-position: 0 0;
}
34% {
background-position: -2200px 0;
}
100% {
background-position: -2200px 0;
}
}
.vip-frame6 {
background: url(../images/v6.png) no-repeat;
background-size: auto 100%;
animation: swiper6 4.8s steps(22, start) 0ms infinite;
background-position: 0 0;
}
.vip-frame6 > span {
color: #fff;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 74px;
}
@keyframes swiper6 {
0% {
background-position: 0 0;
}
37% {
background-position: -2420px 0;
}
100% {
background-position: -2420px 0;
}
}
.vip-frame7 {
background: url(../images/v7.png) no-repeat;
background-size: auto 100%;
animation: swiper7 4.8s steps(22, start) 0ms infinite;
background-position: 0 0;
}
.vip-frame7 > span {
color: #fff;
font-size: 12px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
/* background: pink; */
left: 50%;
margin-left: -15px;
top: 72px;
}
@keyframes swiper7 {
0% {
background-position: 0 0;
}
37% {
background-position: -2420px 0;
}
100% {
background-position: -2420px 0;
}
}
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