Skip to content

libai / guodong

Go to a project
Commit dca3091b by libai
Options

测试

parent de2b0b0d
Inline Side-by-side
Showing with 697 additions and 0 deletions
css/tv.css 0 → 100644
body {
background: #3A87A5;
}
.bg {
width: 100vw;
height: 50.625vw;
background: url(../images/tvbg.jpg) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
margin-top: -0.3vw;
}
.tv-top {
width: 100vw;
height: 7.3vw;
position: relative;
}
.tv-top img {
width: 20vw;
left: 2.8vw;
position: absolute;
top: 1.3vw;
}
.tv-top p {
color: #84FFFE;
font-size: 1.9vw;
position: absolute;
right: 3.5vw;
top: 3vw;
}
.tv-content {
height: 39vw;
width: 95vw;
margin: 0 auto;
margin-top: 1.8vw;
position: relative;
}
.tv-left-box1 {
width: 28.5vw;
height: 12.5vw;
position: absolute;
}
.tv-left-box2 {
width: 28.5vw;
height: 12.5vw;
position: absolute;
top: 13.15vw;
}
.tv-left-box3 {
width: 28.5vw;
height: 12.5vw;
position: absolute;
top: 26.3vw;
}
.tv-left-p1 {
color: #47FEFC;
font-size: 1.6vw;
position: absolute;
left: 2.3vw;
top: 1.2vw;
}
.tv-left-p2 {
font-size: 4.5vw;
font-weight: 700;
color: #fff;
position: absolute;
left: 2.1vw;
top: 3.7vw;
}
.tv-left-p3 {
position: absolute;
color: #3EFFF9;
left: 19.5vw;
line-height: 2.1vw;
font-size: 1.1vw;
top: 2.3vw;
}
.tv-left-p3 span {
color: #E0413B;
}
.tv-left-p3 img {
vertical-align: middle;
width: 0.85vw;
margin-top: -0.2vw;
margin-left: 0.4vw;
margin-right: 0.2vw;
}
.tv-left-p4 {
position: absolute;
color: #3EFFF9;
left: 19.5vw;
line-height: 2.1vw;
font-size: 1.1vw;
top: 5.1vw;
}
.tv-left-p4 span {
color: #E0413B;
}
.tv-left-p4 img {
vertical-align: middle;
width: 0.85vw;
margin-top: -0.2vw;
margin-left: 0.4vw;
margin-right: 0.25vw;
}
.tv-left-p5 {
position: absolute;
color: #3EFFF9;
left: 19.5vw;
line-height: 2.1vw;
font-size: 1.1vw;
top: 7.9vw;
}
.tv-left-p5 span {
color: #E0413B;
}
.tv-left-p5 img {
vertical-align: middle;
width: 0.85vw;
margin-top: -0.2vw;
margin-left: 0.4vw;
margin-right: 0.2vw;
}
.tv-right-box1 {
width: 65.5vw;
left: 29.3vw;
height: 19vw;
top: 0;
position: absolute;
}
.tv-right-box2 {
width: 65.5vw;
left: 29.3vw;
height: 19vw;
top: 19.8vw;
position: absolute;
}
.tv-right-title {
color: #46FEFE;
font-size: 2vw;
text-align: center;
line-height: 5.5vw;
}
.tv-right-content1 {
width: 50%;
height: 7.5vw;
float: left;
text-align: center;
font-size: 2.2vw;
color: #46FEFE;
line-height: 7.5vw;
}
.tv-right-content1 span {
color: #FEFEFF;
font-size: 4.4vw;
}
.tv-right-ul1 {
width: 28vw;
height: 4vw;
position: absolute;
left: 3vw;
top: 13.2vw;
}
.tv-right-ul1 li {
width: 9.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
}
.tv-right-ul1 li img {
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
.tv-right-ul1 li span {
color: #E03C3A;
}
.tv-right-ul3 {
width: 55vw;
height: 4vw;
position: absolute;
left: 5vw;
top: 13.2vw;
}
.tv-right-ul3 li {
width: 18.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
}
.tv-right-ul3 li img {
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
.tv-right-ul3 li span {
color: #E03C3A;
}
.tv-right-ul2 {
width: 28vw;
height: 4vw;
position: absolute;
right: 2vw;
top: 13.2vw;
}
.tv-right-ul2 li {
width: 9.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
}
.tv-right-ul2 li img {
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
.tv-right-ul2 li span {
color: #E03C3A;
}
.tv-right-content2 {
width: 50%;
height: 7.5vw;
float: left;
text-align: center;
font-size: 2.2vw;
color: #46FEFE;
line-height: 7.5vw;
}
.tv-right-content2 span {
color: #FEFEFF;
font-size: 4.4vw;
}
.tv-right-content {
width: 40vw;
height: 7vw;
line-height: 5vw;
font-size: 4.4vw;
color: #fff;
text-align: center;
margin: 0 auto;
}
.day-bar {
width: 22vw;
height: 0.35vw;
background: #1D7384;
border-radius: 5vw;
margin: 0 auto;
margin-top: 0.9vw;
overflow: hidden;
}
.day-bar div {
transition: 0.35s all;
width: 0%;
height: 0.35vw;
background: #1AF5D5;
border-radius: 5vw;
}
css/tv.less 0 → 100644
body{
background: #3A87A5;
}
.bg{
width: 100vw;
height: 50.625vw;
background:url(../images/tvbg.jpg)no-repeat;
background-size: 100% 100%;
margin: 0 auto;
margin-top: -0.3vw;
}
.tv-top{
width: 100vw;
height: 7.3vw;
position: relative;
img{
width: 20vw;
left: 2.8vw;
position: absolute;
top: 1.3vw;
}
p{
color: #84FFFE;
font-size: 1.9vw;
position: absolute;
right: 3.5vw;
top: 3vw;
}
// background:pink;
}
.tv-content{
height: 39vw;
width: 95vw;
margin: 0 auto;
margin-top: 1.8vw;
position: relative;
}
.tv-left-box1{
width: 28.5vw;
height: 12.5vw;
// background: pink;
position: absolute;
}
.tv-left-box2{
width: 28.5vw;
height: 12.5vw;
// background: pink;
position: absolute;
top: 13.15vw;
}
.tv-left-box3{
width: 28.5vw;
height: 12.5vw;
// background: pink;
position: absolute;
top: 26.3vw;
}
.tv-left-p1{
color: #47FEFC;
font-size: 1.6vw;
position: absolute;
left: 2.3vw;
top: 1.2vw;
}
.tv-left-p2{
font-size: 4.5vw;
font-weight: 700;
color: #fff;
position: absolute;
left: 2.1vw;
top: 3.7vw;
}
.tv-left-p3{
position: absolute;
color: #3EFFF9;
left: 19.5vw;
line-height: 2.1vw;
font-size: 1.1vw;
top: 2.3vw;
span{
color: #E0413B;
}
img{
vertical-align: middle;
width: 0.85vw;
margin-top: -0.2vw;
margin-left: 0.4vw;
margin-right: 0.2vw;
}
}
.tv-left-p4{
position: absolute;
color: #3EFFF9;
left: 19.5vw;
line-height: 2.1vw;
font-size: 1.1vw;
top: 5.1vw;
span{
color: #E0413B;
}
img{
vertical-align: middle;
width: 0.85vw;
margin-top: -0.2vw;
margin-left: 0.4vw;
margin-right: 0.25vw;
}
}
.tv-left-p5{
position: absolute;
color: #3EFFF9;
left: 19.5vw;
line-height: 2.1vw;
font-size: 1.1vw;
top: 7.9vw;
span{
color: #E0413B;
}
img{
vertical-align: middle;
width: 0.85vw;
margin-top: -0.2vw;
margin-left: 0.4vw;
margin-right: 0.2vw;
}
}
.tv-right-box1{
width: 65.5vw;
left: 29.3vw;
height: 19vw;
top: 0;
// background: pink;
position: absolute;
}
.tv-right-box2{
width: 65.5vw;
left: 29.3vw;
height: 19vw;
top: 19.8vw;
// background: pink;
position: absolute;
}
.tv-right-title{
color: #46FEFE;
font-size: 2vw;
text-align: center;
line-height: 5.5vw;
}
.tv-right-content1{
width: 50%;
height: 7.5vw;
// background:pink;
float: left;
text-align: center;
font-size: 2.2vw;
color: #46FEFE;
line-height: 7.5vw;
span{
color: #FEFEFF;
font-size: 4.4vw;
}
}
.tv-right-ul1{
width: 28vw;
height: 4vw;
position: absolute;
left: 3vw;
top: 13.2vw;
li{
width: 9.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
img{
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
span{
color: #E03C3A;
}
}
}
.tv-right-ul3{
width: 55vw;
height: 4vw;
position: absolute;
left: 5vw;
top: 13.2vw;
li{
width: 18.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
img{
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
span{
color: #E03C3A;
}
}
}
.tv-right-ul2{
width: 28vw;
height: 4vw;
position: absolute;
right: 2vw;
top: 13.2vw;
li{
width: 9.33vw;
float: left;
height: 4vw;
line-height: 4vw;
text-align: center;
font-size: 1.2vw;
color: #4CFFFA;
img{
vertical-align: middle;
width: 0.9vw;
margin-top: -0.3vw;
margin-left: 0.2vw;
}
span{
color: #E03C3A;
}
}
}
.tv-right-content2{
width: 50%;
height: 7.5vw;
// background:pink;
float: left;
text-align: center;
font-size: 2.2vw;
color: #46FEFE;
line-height: 7.5vw;
span{
color: #FEFEFF;
font-size: 4.4vw;
}
}
.tv-right-content{
width: 40vw;
height: 7vw;
line-height: 5vw;
font-size: 4.4vw;
color: #fff;
text-align: center;
margin: 0 auto;
}
.day-bar{
width: 22vw;
height: 0.35vw;
background: #1D7384;
border-radius: 5vw;
margin: 0 auto;
margin-top: 0.9vw;
overflow: hidden;
div{
transition: 0.35s all;
width: 0%;
height: 0.35vw;
background: #1AF5D5;
border-radius: 5vw;
}
}
\ No newline at end of file
tvShow.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script> -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Pragma" content="no-cache">
<meta charset="UTF-8">
<title>果冻直播</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="layer-v3.1.0/layer.css">
<link rel="stylesheet" href="css/tv.css">
</head>
<body>
<div class="bg">
<div class="tv-top">
<img src="images/tv-icon.png" alt="">
<p class="my-time"></p>
</div>
<div class="tv-content">
<div class="tv-left-box1">
<p class="tv-left-p1">新增用户</p>
<p class="tv-left-p2"></p>
<p class="tv-left-p3">日<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p4">周<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p5">月<img src="images/top1.png" alt=""><span></span></p>
</div>
<div class="tv-left-box2">
<p class="tv-left-p1">DAU</p>
<p class="tv-left-p2"></p>
<p class="tv-left-p3">日<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p4">周<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p5">月<img src="images/top1.png" alt=""><span></span></p>
</div>
<div class="tv-left-box3">
<p class="tv-left-p1">付费用户</p>
<p class="tv-left-p2"></p>
<p class="tv-left-p3">日<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p4">周<img src="images/top1.png" alt=""><span></span></p>
<p class="tv-left-p5">月<img src="images/top1.png" alt=""><span></span></p>
</div>
<div class="tv-right-box1">
<p class="tv-right-title">·&nbsp; 在线人数 &nbsp;·</p>
<div class="tv-right-content1">用户 <span></span></div>
<div class="tv-right-content2">主播 <span></span></div>
<ul class="tv-right-ul1">
<li>日 <img src="images/top1.png" alt=""> <span></span></li>
<li>周 <img src="images/top1.png" alt=""> <span></span></li>
<li>月 <img src="images/top1.png" alt=""> <span></span></li>
</ul>
<ul class="tv-right-ul2">
<li>日 <img src="images/top1.png" alt=""> <span></span></li>
<li>周 <img src="images/top1.png" alt=""> <span></span></li>
<li>月 <img src="images/top1.png" alt=""> <span></span></li>
</ul>
</div>
<div class="tv-right-box2">
<p class="tv-right-title">·&nbsp; 充值金 &nbsp;·</p>
<div class="tv-right-content"><span>--</span> <div class="day-bar"><div></div></div></div>
<ul class="tv-right-ul3">
<li>日 <img src="images/top1.png" alt=""> <span></span></li>
<li>周 <img src="images/top1.png" alt=""> <span></span></li>
<li>月 <img src="images/top1.png" alt=""> <span></span></li>
</ul>
</div>
</div>
</div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script>
$.ajax({
url:'http://httest.comm.yazhai.co/statshow/getviewdata.html',
dataType:'JSON',
success:function(data){
console.log('电视屏幕大数据',data)
//新增
$(".tv-left-box1 .tv-left-p2").text(data.result[0].num)
if(data.result[0].day>=0)$(".tv-left-box1 .tv-left-p3").html('日<img src="images/top1.png" alt=""><span>'+data.result[0].day+'%</span>')
else $(".tv-left-box1 .tv-left-p3").html('日<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[0].day+'%</span>')
if(data.result[0].week>=0)$(".tv-left-box1 .tv-left-p4").html('周<img src="images/top1.png" alt=""><span>'+data.result[0].week+'%</span>')
else $(".tv-left-box1 .tv-left-p4").html('周<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[0].week+'%</span>')
if(data.result[0].month>=0)$(".tv-left-box1 .tv-left-p5").html('月<img src="images/top1.png" alt=""><span>'+data.result[0].month+'%</span>')
else $(".tv-left-box1 .tv-left-p5").html('月<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[0].month+'%</span>')
//DAU
$(".tv-left-box2 .tv-left-p2").text(data.result[1].num)
if(data.result[1].day>=0)$(".tv-left-box1 .tv-left-p3").html('日<img src="images/top1.png" alt=""><span>'+data.result[1].day+'%</span>')
else $(".tv-left-box2 .tv-left-p3").html('日<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[1].day+'%</span>')
if(data.result[1].week>=0)$(".tv-left-box1 .tv-left-p4").html('周<img src="images/top1.png" alt=""><span>'+data.result[1].week+'%</span>')
else $(".tv-left-box2 .tv-left-p4").html('周<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[1].week+'%</span>')
if(data.result[1].month>=0)$(".tv-left-box1 .tv-left-p5").html('月<img src="images/top1.png" alt=""><span>'+data.result[1].month+'%</span>')
else $(".tv-left-box2 .tv-left-p5").html('月<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[1].month+'%</span>')
//付费用户
$(".tv-left-box3 .tv-left-p2").text(data.result[2].num)
if(data.result[2].day>=0)$(".tv-left-box1 .tv-left-p3").html('日<img src="images/top1.png" alt=""><span>'+data.result[2].day+'%</span>')
else $(".tv-left-box3 .tv-left-p3").html('日<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[2].day+'%</span>')
if(data.result[2].week>=0)$(".tv-left-box1 .tv-left-p4").html('周<img src="images/top1.png" alt=""><span>'+data.result[2].week+'%</span>')
else $(".tv-left-box3 .tv-left-p4").html('周<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[2].week+'%</span>')
if(data.result[2].month>=0)$(".tv-left-box1 .tv-left-p5").html('月<img src="images/top1.png" alt=""><span>'+data.result[2].month+'%</span>')
else $(".tv-left-box3 .tv-left-p5").html('月<img src="images/top2.png" alt=""><span style="color:#3FF4A7">'+data.result[2].month+'%</span>')
//在线人数
$(".tv-right-content1").html('用户 <span>'+data.result[4].num+'</span>')
if(data.result[4].day>=0)$(".tv-right-ul1 li").eq(0).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[4].day+'%</span>')
else $(".tv-right-ul1 li").eq(0).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[4].day+'%</span>')
if(data.result[4].week>=0)$(".tv-right-ul1 li").eq(1).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[4].week+'%</span>')
else $(".tv-right-ul1 li").eq(1).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[4].week+'%</span>')
if(data.result[4].month>=0)$(".tv-right-ul1 li").eq(2).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[4].month+'%</span>')
else $(".tv-right-ul1 li").eq(2).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[4].month+'%</span>')
//主播人数
$(".tv-right-content2").html('主播 <span>'+data.result[5].num+'</span>')
if(data.result[5].day>=0)$(".tv-right-ul2 li").eq(0).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[5].day+'%</span>')
else $(".tv-right-ul2 li").eq(0).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[5].day+'%</span>')
if(data.result[5].week>=0)$(".tv-right-ul2 li").eq(1).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[5].week+'%</span>')
else $(".tv-right-ul2 li").eq(1).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[5].week+'%</span>')
if(data.result[5].month>=0)$(".tv-right-ul2 li").eq(2).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[5].month+'%</span>')
else $(".tv-right-ul2 li").eq(2).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[5].month+'%</span>')
//付费金额
$(".tv-right-content span").text(data.result[3].num)
if(data.result[3].day>=0)$(".tv-right-ul3 li").eq(0).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[3].day+'%</span>')
else $(".tv-right-ul3 li").eq(0).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[3].day+'%</span>')
if(data.result[3].week>=0)$(".tv-right-ul3 li").eq(1).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[3].week+'%</span>')
else $(".tv-right-ul3 li").eq(1).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[3].week+'%</span>')
if(data.result[3].month>=0)$(".tv-right-ul3 li").eq(2).html('日 <img src="images/top1.png" alt=""> <span>'+data.result[3].month+'%</span>')
else $(".tv-right-ul3 li").eq(2).html('日 <img src="images/top2.png" alt=""> <span style="color:#3FF4A7">'+data.result[3].month+'%</span>')
}
})
$(".my-time").html(''+timeGet()[0]+'年'+timeGet()[1]+'月'+timeGet()[2]+'日 &nbsp;&nbsp;&nbsp;'+timeGet()[3]+':'+timeGet()[4]+'')
var betEnd = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 00, 00, 00).getTime();
var barNum=Math.floor(((new Date()-betEnd)/'86400000')*100)
$(".day-bar div").css("width",""+barNum+"%")
setInterval(function() {
$(".my-time").html(''+timeGet()[0]+'年'+timeGet()[1]+'月'+timeGet()[2]+'日 &nbsp;&nbsp;&nbsp;'+timeGet()[3]+':'+timeGet()[4]+'')
$(".day-bar div").css("width",""+barNum+"%")
}, 1000);
function timeGet(){
var time = new Date();
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
var timeArr=[y,m,d,add0(h),add0(mm),add0(s)]
return timeArr
}
function add0(m) {
return m < 10 ? '0' + m : m
}
</script>
</html>
\ No newline at end of file
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