Skip to content

梁建民 / activity

Go to a project
Commit f59d39f0 by liangjianmin
Options

css

parent 6ffb62c9
Inline Side-by-side
Showing with 263 additions and 609 deletions
css/vis/index.less
...@@ -76,324 +76,75 @@ body, html { ...@@ -76,324 +76,75 @@ body, html {
width: 25.40rem; width: 25.40rem;
img { img {
width: 25.40rem; width: 19.41rem;
height: 12rem; height: 16.28rem;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
.view { .show-btn {
position: absolute;
bottom: 0.5rem;
left: 0;
right: 0;
margin: 0 auto;
width: 5.97rem; width: 5.97rem;
height: 1.22rem; height: 1.22rem;
background: url("../../images/vis/i2.png") no-repeat center;
background-size: cover;
font-size: 0.52rem; font-size: 0.52rem;
color: #c0d9ff; color: #c0d9ff;
background: url("../../images/i4.png") no-repeat center; margin: 0.14rem auto 0;
background-size: cover;
}
.twinkle {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(49, 156, 216, 0.7);
border-radius: 50%;
-webkit-animation: scale-three 1s ease infinite;
animation: scale-three 1s ease infinite;
animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-fill-mode: both;
}
div {
position: absolute;
background-color: #c0d9ff;
border-radius: 50%;
}
/**中国深圳**/
.star16 {
right: 5.2rem;
top: 6.5rem;
width: 0.5rem;
height: 0.5rem;
.twinkle {
animation-delay: 1s
}
}
/**中国北京**/
.star17 {
right: 5rem;
top: 5.2rem;
width: .3rem;
height: .3rem;
.twinkle {
animation-delay: 2s
}
}
/**中国上海**/
.star18 {
right: 5rem;
top: 5.9rem;
width: .2rem;
height: .2rem;
.twinkle {
animation-delay: 3s
}
}
/**中国武汉**/
.star19 {
right: 5.5rem;
top: 6rem;
width: .1rem;
height: .1rem;
.twinkle {
animation-delay: 4s
}
}
/**中国江苏**/
.star20 {
right: 5.1rem;
top: 5.8rem;
width: .15rem;
height: .15rem;
}
/**中国成都**/
.star21 {
right: 6.9rem;
top: 5.8rem;
width: .15rem;
height: .15rem;
}
/**中国香港**/
.star22 {
right: 5.3rem;
top: 6.9rem;
width: .2rem;
height: .2rem;
}
/**中国台湾**/
.star23 {
right: 5.1rem;
top: 6.9rem;
width: .25rem;
height: .25rem;
}
/**英国**/
.star24 {
right: 5.2rem;
top: 6.5rem;
width: 0.15rem;
height: 0.15rem;
}
.star1 {
position: absolute;
left: 4.1rem;
top: 5.1rem;
width: 0.3rem;
height: 0.3rem;
background-color: #c0d9ff;
border-radius: 50%;
.twinkle {
animation-delay: 2s
}
}
.star2 {
position: absolute;
left: 4.35rem;
top: 5.05rem;
width: 0.4rem;
height: 0.4rem;
background-color: #c0d9ff;
border-radius: 50%;
.twinkle {
animation-delay: 1s
}
}
.star3 {
position: absolute;
left: 4.95rem;
top: 5.15rem;
width: 0.2rem;
height: 0.2rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star4 {
position: absolute;
left: 4.7rem;
top: 5.7rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star5 {
position: absolute;
left: 4.5rem;
top: 6.2rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star6 {
position: absolute;
left: 3.4rem;
top: 5.1rem;
width: 0.15rem;
height: 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star7 {
position: absolute;
left: 5.5rem;
top: 5.2rem;
width: 0.15rem;
height: 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star8 {
position: absolute;
left: 3.7rem;
top: 5.7rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star9 {
position: absolute;
left: 5.5rem;
top: 5.8rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
} }
}
.star10 { .data-left {
position: absolute; position: absolute;
right: 3.9rem; left: 0.99rem;
top: 5.8rem; top: 3.75rem;
width: 0.1rem; width: 8.21rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.star11 { .tit {
position: absolute; position: absolute;
left: 2.85rem; top: -0.5rem;
top: 2.05rem; left: 0;
width: 0.15rem; right: 0;
height: 0.15rem; margin: 0 auto;
background-color: #c0d9ff; width: 7.17rem;
border-radius: 50%; height: 1.13rem;
background: url("../../images/vis/tit.png") no-repeat center;
background-size: cover;
font-size: 0.44rem;
color: #c0d9ff;
} }
.star12 { .box1 {
position: absolute; position: relative;
left: 3.9rem; width: 8.32rem;
top: 1.8rem; height: 4.38rem;
width: 0.1rem; background: url("../../images/vis/i1.png") no-repeat center;
height: 0.1rem; background-size: cover;
background-color: #c0d9ff;
border-radius: 50%;
.twinkle {
animation-delay: 6s
}
} }
.star13 { .box2 {
position: absolute; position: relative;
left: 3.9rem; width: 8.32rem;
top: 2.3rem; height: 4.38rem;
width: 0.1rem; background: url("../../images/vis/i1.png") no-repeat center;
height: 0.1rem; background-size: cover;
background-color: #c0d9ff;
border-radius: 50%;
} }
.star14 { .box3 {
position: absolute; position: relative;
right: 4.5rem; width: 8.32rem;
top: 5.7rem; height: 7.08rem;
width: 0.3rem; background: url("../../images/vis/i3.png") no-repeat center;
height: 0.3rem; background-size: cover;
background-color: #c0d9ff;
border-radius: 50%;
.twinkle {
animation-delay: 3s
}
} }
.star15 { .mb {
position: absolute; margin-bottom: 0.94rem;
right: 6.1rem;
top: 8.2rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
} }
} }
.data-left { .data-right {
position: absolute; position: absolute;
left: 0.99rem; right: 0.99rem;
top: 3.75rem; top: 3.75rem;
width: 8.21rem; width: 8.21rem;
...@@ -405,7 +156,7 @@ body, html { ...@@ -405,7 +156,7 @@ body, html {
margin: 0 auto; margin: 0 auto;
width: 7.17rem; width: 7.17rem;
height: 1.13rem; height: 1.13rem;
background: url("../../images/vis/i2.png") no-repeat center; background: url("../../images/vis/tit.png") no-repeat center;
background-size: cover; background-size: cover;
font-size: 0.44rem; font-size: 0.44rem;
color: #c0d9ff; color: #c0d9ff;
...@@ -413,13 +164,74 @@ body, html { ...@@ -413,13 +164,74 @@ body, html {
.box1 { .box1 {
position: relative; position: relative;
width: 8.21rem; width: 8.32rem;
height: 4.26rem; height: 4.38rem;
background: url("../../images/vis/i1.png") no-repeat center; background: url("../../images/vis/i1.png") no-repeat center;
background-size: cover; background-size: cover;
} }
.mb{ .box2 {
position: relative;
width: 8.32rem;
height: 4.38rem;
background: url("../../images/vis/i1.png") no-repeat center;
background-size: cover;
margin-bottom: 0.39rem;
}
.box3 {
position: relative;
width: 8.32rem;
height: 7.28rem;
background: url("../../images/vis/i4.png") no-repeat center;
background-size: cover;
.t1 {
padding-top: 0.63rem;
padding-left: 0.4rem;
font-size: 0.34rem;
color: #96bcf6;
line-height: 0.528rem;
}
.t2 {
font-size: 0.56rem;
color: #96bcf6;
text-align: center;
margin-top: 0.57rem;
line-height: 0.528rem;
em {
color: #e49e07;
}
}
.text {
padding-left: 0.4rem;
margin-top: 0.88rem;
flex-wrap: wrap;
li {
flex: 0 0 50%;
.t3 {
font-size: 0.34rem;
color: #96bcf6;
margin-bottom: 0.32rem;
line-height: 0.528rem;
}
.t4 {
font-size: 0.56rem;
color: #e49e07;
margin-bottom: 0.67rem;
line-height: 0.528rem;
}
}
}
}
.mb {
margin-bottom: 0.94rem; margin-bottom: 0.94rem;
} }
} }
......
css/vis/index.min.css
...@@ -248,274 +248,72 @@ html { ...@@ -248,274 +248,72 @@ html {
margin: 0 auto; margin: 0 auto;
z-index: 9; z-index: 9;
width: 25.4rem; width: 25.4rem;
/**中国深圳**/
/**中国北京**/
/**中国上海**/
/**中国武汉**/
/**中国江苏**/
/**中国成都**/
/**中国香港**/
/**中国台湾**/
/**英国**/
} }
.home-page .map-box img { .home-page .map-box img {
width: 25.4rem; width: 19.41rem;
height: 12rem; height: 16.28rem;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
.home-page .map-box .view { .home-page .map-box .show-btn {
position: absolute;
bottom: 0.5rem;
left: 0;
right: 0;
margin: 0 auto;
width: 5.97rem; width: 5.97rem;
height: 1.22rem; height: 1.22rem;
background: url("../../images/vis/i2.png") no-repeat center;
background-size: cover;
font-size: 0.52rem; font-size: 0.52rem;
color: #c0d9ff; color: #c0d9ff;
background: url("../../images/i4.png") no-repeat center; margin: 0.14rem auto 0;
background-size: cover;
} }
.home-page .map-box .twinkle { .home-page .data-left {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(49, 156, 216, 0.7);
border-radius: 50%;
-webkit-animation: scale-three 1s ease infinite;
animation: scale-three 1s ease infinite;
animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-fill-mode: both;
}
.home-page .map-box div {
position: absolute;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star16 {
right: 5.2rem;
top: 6.5rem;
width: 0.5rem;
height: 0.5rem;
}
.home-page .map-box .star16 .twinkle {
animation-delay: 1s;
}
.home-page .map-box .star17 {
right: 5rem;
top: 5.2rem;
width: 0.3rem;
height: 0.3rem;
}
.home-page .map-box .star17 .twinkle {
animation-delay: 2s;
}
.home-page .map-box .star18 {
right: 5rem;
top: 5.9rem;
width: 0.2rem;
height: 0.2rem;
}
.home-page .map-box .star18 .twinkle {
animation-delay: 3s;
}
.home-page .map-box .star19 {
right: 5.5rem;
top: 6rem;
width: 0.1rem;
height: 0.1rem;
}
.home-page .map-box .star19 .twinkle {
animation-delay: 4s;
}
.home-page .map-box .star20 {
right: 5.1rem;
top: 5.8rem;
width: 0.15rem;
height: 0.15rem;
}
.home-page .map-box .star21 {
right: 6.9rem;
top: 5.8rem;
width: 0.15rem;
height: 0.15rem;
}
.home-page .map-box .star22 {
right: 5.3rem;
top: 6.9rem;
width: 0.2rem;
height: 0.2rem;
}
.home-page .map-box .star23 {
right: 5.1rem;
top: 6.9rem;
width: 0.25rem;
height: 0.25rem;
}
.home-page .map-box .star24 {
right: 5.2rem;
top: 6.5rem;
width: 0.15rem;
height: 0.15rem;
}
.home-page .map-box .star1 {
position: absolute;
left: 4.1rem;
top: 5.1rem;
width: 0.3rem;
height: 0.3rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star1 .twinkle {
animation-delay: 2s;
}
.home-page .map-box .star2 {
position: absolute; position: absolute;
left: 4.35rem; left: 0.99rem;
top: 5.05rem; top: 3.75rem;
width: 0.4rem; width: 8.21rem;
height: 0.4rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star2 .twinkle {
animation-delay: 1s;
} }
.home-page .map-box .star3 { .home-page .data-left .tit {
position: absolute;
left: 4.95rem;
top: 5.15rem;
width: 0.2rem;
height: 0.2rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star4 {
position: absolute;
left: 4.7rem;
top: 5.7rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star5 {
position: absolute;
left: 4.5rem;
top: 6.2rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star6 {
position: absolute;
left: 3.4rem;
top: 5.1rem;
width: 0.15rem;
height: 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star7 {
position: absolute;
left: 5.5rem;
top: 5.2rem;
width: 0.15rem;
height: 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star8 {
position: absolute;
left: 3.7rem;
top: 5.7rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star9 {
position: absolute;
left: 5.5rem;
top: 5.8rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star10 {
position: absolute;
right: 3.9rem;
top: 5.8rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star11 {
position: absolute;
left: 2.85rem;
top: 2.05rem;
width: 0.15rem;
height: 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star12 {
position: absolute; position: absolute;
left: 3.9rem; top: -0.5rem;
top: 1.8rem; left: 0;
width: 0.1rem; right: 0;
height: 0.1rem; margin: 0 auto;
background-color: #c0d9ff; width: 7.17rem;
border-radius: 50%; height: 1.13rem;
background: url("../../images/vis/tit.png") no-repeat center;
background-size: cover;
font-size: 0.44rem;
color: #c0d9ff;
} }
.home-page .map-box .star12 .twinkle { .home-page .data-left .box1 {
animation-delay: 6s; position: relative;
width: 8.32rem;
height: 4.38rem;
background: url("../../images/vis/i1.png") no-repeat center;
background-size: cover;
} }
.home-page .map-box .star13 { .home-page .data-left .box2 {
position: absolute; position: relative;
left: 3.9rem; width: 8.32rem;
top: 2.3rem; height: 4.38rem;
width: 0.1rem; background: url("../../images/vis/i1.png") no-repeat center;
height: 0.1rem; background-size: cover;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star14 {
position: absolute;
right: 4.5rem;
top: 5.7rem;
width: 0.3rem;
height: 0.3rem;
background-color: #c0d9ff;
border-radius: 50%;
} }
.home-page .map-box .star14 .twinkle { .home-page .data-left .box3 {
animation-delay: 3s; position: relative;
width: 8.32rem;
height: 7.08rem;
background: url("../../images/vis/i3.png") no-repeat center;
background-size: cover;
} }
.home-page .map-box .star15 { .home-page .data-left .mb {
position: absolute; margin-bottom: 0.94rem;
right: 6.1rem;
top: 8.2rem;
width: 0.1rem;
height: 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
} }
.home-page .data-left { .home-page .data-right {
position: absolute; position: absolute;
left: 0.99rem; right: 0.99rem;
top: 3.75rem; top: 3.75rem;
width: 8.21rem; width: 8.21rem;
} }
.home-page .data-left .tit { .home-page .data-right .tit {
position: absolute; position: absolute;
top: -0.5rem; top: -0.5rem;
left: 0; left: 0;
...@@ -523,19 +321,71 @@ html { ...@@ -523,19 +321,71 @@ html {
margin: 0 auto; margin: 0 auto;
width: 7.17rem; width: 7.17rem;
height: 1.13rem; height: 1.13rem;
background: url("../../images/vis/i2.png") no-repeat center; background: url("../../images/vis/tit.png") no-repeat center;
background-size: cover; background-size: cover;
font-size: 0.44rem; font-size: 0.44rem;
color: #c0d9ff; color: #c0d9ff;
} }
.home-page .data-left .box1 { .home-page .data-right .box1 {
position: relative; position: relative;
width: 8.21rem; width: 8.32rem;
height: 4.26rem; height: 4.38rem;
background: url("../../images/vis/i1.png") no-repeat center; background: url("../../images/vis/i1.png") no-repeat center;
background-size: cover; background-size: cover;
} }
.home-page .data-left .mb { .home-page .data-right .box2 {
position: relative;
width: 8.32rem;
height: 4.38rem;
background: url("../../images/vis/i1.png") no-repeat center;
background-size: cover;
margin-bottom: 0.39rem;
}
.home-page .data-right .box3 {
position: relative;
width: 8.32rem;
height: 7.28rem;
background: url("../../images/vis/i4.png") no-repeat center;
background-size: cover;
}
.home-page .data-right .box3 .t1 {
padding-top: 0.63rem;
padding-left: 0.4rem;
font-size: 0.34rem;
color: #96bcf6;
line-height: 0.528rem;
}
.home-page .data-right .box3 .t2 {
font-size: 0.56rem;
color: #96bcf6;
text-align: center;
margin-top: 0.57rem;
line-height: 0.528rem;
}
.home-page .data-right .box3 .t2 em {
color: #e49e07;
}
.home-page .data-right .box3 .text {
padding-left: 0.4rem;
margin-top: 0.88rem;
flex-wrap: wrap;
}
.home-page .data-right .box3 .text li {
flex: 0 0 50%;
}
.home-page .data-right .box3 .text li .t3 {
font-size: 0.34rem;
color: #96bcf6;
margin-bottom: 0.32rem;
line-height: 0.528rem;
}
.home-page .data-right .box3 .text li .t4 {
font-size: 0.56rem;
color: #e49e07;
margin-bottom: 0.67rem;
line-height: 0.528rem;
}
.home-page .data-right .mb {
margin-bottom: 0.94rem; margin-bottom: 0.94rem;
} }
@keyframes scale-three { @keyframes scale-three {
......
css/vis/index.min.css.map
{"version":3,"sources":["E:/activity/css/common/base.less","index.less"],"names":[],"mappings":"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","file":"index.min.css"} {"version":3,"sources":["E:/activity/css/common/base.less","index.less"],"names":[],"mappings":"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","file":"index.min.css"}
\ No newline at end of file \ No newline at end of file
images/vis/i2.png
images/vis/i2.png

1.78 KB | W: | H:

images/vis/i2.png

38.9 KB | W: | H:

images/vis/i2.png
images/vis/i2.png
images/vis/i2.png
images/vis/i2.png
  • 2-up
  • Swipe
  • Onion skin
js/echarts.min.js 0 → 100644
This diff could not be displayed because it is too large.
vis.html
...@@ -48,21 +48,58 @@ ...@@ -48,21 +48,58 @@
<i class="i1"></i> <i class="i1"></i>
</div> </div>
<div class="data-left"> <div class="data-left">
<div class="box1 mb"> <div class="box1 boxsiz mb">
<p class="tit row rowCenter verCenter">日均访问量PV (2016-2021)</p> <p class="tit row rowCenter verCenter">日均访问量PV (2016-2021)</p>
</div> </div>
<div class="box1"> <div class="box2 boxsiz mb">
<p class="tit row rowCenter verCenter">日均活跃用户 (2016-2021)</p> <p class="tit row rowCenter verCenter">日均活跃用户 (2016-2021)</p>
</div> </div>
<div class="box3 boxsiz">
<p class="tit row rowCenter verCenter">客户分布应用领域</p>
</div>
</div>
<div class="data-right">
<div class="box1 boxsiz mb">
<p class="tit row rowCenter verCenter">日均下单用户 (2016-2021)</p>
</div>
<div class="box2 boxsiz">
<p class="tit row rowCenter verCenter">日均订单数 (2016-2021)</p>
</div>
<div class="box3 boxsiz">
<p class="t1">运营中公众号：</p>
<p class="t2" id="yunyin_pubilc">公众号</p>
<ul class="text row boxsiz">
<li>
<p class="t3">公众号粉丝总数：</p>
<p class="t4" id="public_fans_num">0000</p>
</li>
<li>
<p class="t3">社群覆盖用户数：</p>
<p class="t4" id="group_num">0000</p>
</li>
<li>
<p class="t3">Banner年度曝光次数：</p>
<p class="t4" id="banner_sun_num">0000</p>
</li>
<li>
<p class="t3">月度阅读量：</p>
<p class="t4" id="year_read_num">0000</p>
</li>
</ul>
</div>
</div>
<div class="map-box">
<img src="./images/map2.png" alt="">
<a href="javascript:;" class="show-btn row rowCenter verCenter">客户分布</a>
</div> </div>
<div class="map-box"></div>
</div> </div>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var charts = { var charts = {
date: "", date: "",
api: window.location.host == "btv.ichunt.com" ? "https://api.ichunt.com" : "http://api.liexin.com", api: window.location.host == "btv.ichunt.com" ? "https://api.ichunt.com" : "https://api.ichunt.com",
init: function () { init: function () {
charts.date() charts.date()
charts.getData(); charts.getData();
...@@ -78,64 +115,19 @@ ...@@ -78,64 +115,19 @@
getData: function () { getData: function () {
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: charts.api + "/bigtv/api/bigTv", url: charts.api + "/bigtv/api/bigtvtwo",
data: {date: charts.date}, data: {date: charts.date},
dataType: 'json', dataType: 'json',
success: function (data) { success: function (res) {
console.log(data) console.log(res)
charts.numberScroll(data); $("#group_num").html(res.group_num);
var daily_order_list = data.daily_order || []; $("#public_fans_num").html(res.public_fans_num);
var daily_search_list = data.daily_search || []; $("#year_read_num").html(res.year_read_num);
charts.rankData(daily_search_list, daily_order_list); $("#banner_sun_num").html(res.banner_sun_num);
$("#plat_sku_sum").text(data.plat_sku_sum); $("#yunyin_pubilc").html(res.yunyin_pubilc);
$("#plat_supply_sum").text(data.plat_supply_sum);
$("#supply_brand_num").text(data.supply_brand_num);
$("#supply_class_num").text(data.supply_class_num);
}
});
},
randomAnimate() {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',');
var radm_num = Math.floor(Math.random() * ($(".data-top .row li .t1").length - 0)) + 0;
var num_ = Number($($(".row li .t1")[radm_num]).attr("numbers"))
if (num_ > 0) {
$($(".data-top .row li .t1")[radm_num]).prop('number', Math.ceil(num_ / 2)).animateNumber({
number: num_,
numberStep: comma_separator_number_step
}, 500);
}
},
rankData: function (daily_search_list, daily_order_list) {
var html1 = "", html2 = "";
for (var i = 0; i < daily_search_list.length; i++) {
var key_ = Object.keys(daily_search_list[i])[0]
var value_ = Object.values(daily_search_list[i])[0]
if (i <= 2) {
$('.data-left .ranking .i' + (i + 1) + '').html('<span class="p1">' + (i + 1) + '</span><span class="p2">' + key_ + '</span><span>' + value_ + '</span>')
} else {
html1 += '<li class="row verCenter">'
html1 += ' <span class="p1">' + (i + 1) + '</span>'
html1 += '<span class="p2">' + key_ + '</span>'
html1 += '<span>' + value_ + '</span></li>'
} }
} });
$(".data-left .list").html(html1)
for (var i = 0; i < daily_order_list.length; i++) {
var key_ = Object.keys(daily_order_list[i])[0]
var value_ = Object.values(daily_order_list[i])[0]
if (i <= 2) {
$('.data-right .ranking .i' + (i + 1) + '').html('<span class="p1">' + (i + 1) + '</span><span class="p2">' + key_ + '</span><span>' + value_ + '</span>')
} else {
html2 += '<li class="row verCenter">'
html2 += ' <span class="p1">' + (i + 1) + '</span>'
html2 += '<span class="p2">' + key_ + '</span>'
html2 += '<span>' + value_ + '</span></li>'
}
}
$(".data-right .list").html(html2)
}, },
date: function () { date: function () {
var day1 = new Date(); var day1 = new Date();
......
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