Skip to content

梁建民 / activity

Go to a project
Commit 11e7d75a by 肖康
Options

x

parent e8b14fdf
Inline Side-by-side
Showing with 831 additions and 1295 deletions
css/home/index.less
@import '../common/base.less'; @import '../common/base.less';
body, html { body,
width: 100%; html {
height: 100%; width : 100%;
height : 100%;
overflow: hidden; overflow: hidden;
} }
.home-page { .home-page {
width: 100%; width : 100%;
height: 100%; height : 100%;
background: url("../../images/bg.png") no-repeat center; background : url("../../images/bg.png") no-repeat center;
background-size: cover; background-size: cover;
.top { .top {
position: relative; position : relative;
width: 100%; width : 100%;
height: 2.45rem; height : 2.45rem;
background: url("../../images/top.png") no-repeat center; background : url("../../images/top.png") no-repeat center;
background-size: cover; background-size: cover;
.date-text { .date-text {
position: absolute; position: absolute;
left: 10%; left : 10%;
top: 0.53rem; top : 0.53rem;
span { span {
font-size: 0.38rem; font-size: 0.38rem;
color: #ffffff; color : #ffffff;
padding: 0 0.07rem; padding : 0 0.07rem;
&.number { &.number {
color: #5891e7; color: #5891e7;
...@@ -37,13 +38,13 @@ body, html { ...@@ -37,13 +38,13 @@ body, html {
.date-wether { .date-wether {
position: absolute; position: absolute;
right: 10%; right : 10%;
top: 0.53rem; top : 0.53rem;
span { span {
font-size: 0.38rem; font-size: 0.38rem;
color: #ffffff; color : #ffffff;
padding: 0 0.07rem; padding : 0 0.07rem;
&.ml { &.ml {
margin-left: 0.6rem; margin-left: 0.6rem;
...@@ -56,14 +57,14 @@ body, html { ...@@ -56,14 +57,14 @@ body, html {
} }
.i1 { .i1 {
position: absolute; position : absolute;
bottom: 0.84rem; bottom : 0.84rem;
left: 0; left : 0;
right: 0; right : 0;
width: 16.06rem; width : 16.06rem;
height: 0.8rem; height : 0.8rem;
margin: 0 auto; margin : 0 auto;
background: url("../../images/t1.png") no-repeat center; background : url("../../images/t1.png") no-repeat center;
background-size: cover; background-size: cover;
} }
} }
...@@ -73,20 +74,20 @@ body, html { ...@@ -73,20 +74,20 @@ body, html {
ul { ul {
li { li {
flex: 0 0 6.48rem; flex : 0 0 6.48rem;
height: 2.34rem; height : 2.34rem;
background: url("../../images/i1.png") no-repeat center; background : url("../../images/i1.png") no-repeat center;
background-size: cover; background-size: cover;
.t1 { .t1 {
font-size: 0.72rem; font-size : 0.72rem;
color: #e49e07; color : #e49e07;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.t2 { .t2 {
font-size: 0.38rem; font-size: 0.38rem;
color: #c0d9ff; color : #c0d9ff;
} }
} }
} }
...@@ -94,29 +95,29 @@ body, html { ...@@ -94,29 +95,29 @@ body, html {
.data-bottom { .data-bottom {
position: absolute; position: absolute;
left: 0; left : 0;
right: 0; right : 0;
bottom: 2%; bottom : 2%;
width: 100%; width : 100%;
padding: 0 0.99rem; padding : 0 0.99rem;
z-index: 999; z-index : 999;
ul { ul {
li { li {
flex: 0 0 24%; flex : 0 0 24%;
height: 2.11rem; height : 2.11rem;
background: url("../../images/i2.png") no-repeat center; background : url("../../images/i2.png") no-repeat center;
background-size: cover; background-size: cover;
.t1 { .t1 {
font-size: 0.62rem; font-size : 0.62rem;
color: #e49e07; color : #e49e07;
margin-bottom: 0.26rem; margin-bottom: 0.26rem;
} }
.t2 { .t2 {
font-size: 0.38rem; font-size: 0.38rem;
color: #c0d9ff; color : #c0d9ff;
} }
} }
} }
...@@ -124,83 +125,94 @@ body, html { ...@@ -124,83 +125,94 @@ body, html {
.data-left { .data-left {
position: absolute; position: absolute;
left: 0.99rem; left : 0.99rem;
top: 32%; top : 32%;
z-index: 999; z-index : 999;
.wrap { .wrap {
position: relative; position : relative;
width: 6.60rem; width : 6.60rem;
height: 10.20rem; height : 10.20rem;
background: url("../../images/i3.png") no-repeat center; background : url("../../images/i3.png") no-repeat center;
background-size: cover; background-size: cover;
.tit { .tit {
position: absolute; position : absolute;
left: 0; left : 0;
right: 0; right : 0;
top: 0.28rem; top : 0.28rem;
text-align: center; text-align: center;
font-size: 0.44rem; font-size : 0.44rem;
color: #c0d9ff; color : #c0d9ff;
} }
.text { .text {
padding-left: 0.2rem; padding-left: 0.2rem;
padding-top: 1.5rem; padding-top : 1.5rem;
span { span {
font-size: 0.34rem; font-size: 0.34rem;
color: #76a3e7; color : #76a3e7;
} }
.p1 { .p1 {
width: 0.84rem; width : 0.84rem;
padding-right: 0.4rem; padding-right: 0.4rem;
text-align: center; text-align : center;
} }
.p2 { .p2 {
width: 3.73rem; width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.ranking { .ranking {
padding-top: 0.30rem; padding-top : 0.30rem;
padding-left: 0.2rem; padding-left: 0.2rem;
dd { dd {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
width: 6.08rem; width : 6.08rem;
height: 0.60rem; height : 0.60rem;
span { span {
font-size: 0.34rem; font-size: 0.34rem;
color: #ffffff; color : #ffffff;
} }
.p1 { .p1 {
width: 0.84rem; width : 0.84rem;
padding-right: 0.4rem; padding-right: 0.4rem;
text-align: center; text-align : center;
} }
.p2 { .p2 {
width: 3.73rem; width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
&.i1 { &.i1 {
background: url("../../images/a.png") no-repeat center; background : url("../../images/a.png") no-repeat center;
background-size: cover; background-size: cover;
} }
&.i2 { &.i2 {
background: url("../../images/b.png") no-repeat center; background : url("../../images/b.png") no-repeat center;
background-size: cover; background-size: cover;
} }
&.i3 { &.i3 {
background: url("../../images/c.png") no-repeat center; background : url("../../images/c.png") no-repeat center;
background-size: cover; background-size: cover;
} }
} }
...@@ -208,30 +220,35 @@ body, html { ...@@ -208,30 +220,35 @@ body, html {
.list-wrap { .list-wrap {
height: 5.2rem; height : 5.2rem;
overflow: hidden; overflow: hidden;
.list { .list {
position: relative; position : relative;
padding-left: 0.20rem; padding-left: 0.20rem;
li { li {
height: 0.60rem; height : 0.60rem;
margin-bottom: 0.20rem; margin-bottom: 0.20rem;
span { span {
font-size: 0.34rem; font-size: 0.34rem;
color: #96bcf6; color : #96bcf6;
} }
.p1 { .p1 {
width: 0.84rem; width : 0.84rem;
padding-right: 0.4rem; padding-right: 0.4rem;
text-align: center; text-align : center;
} }
.p2 { .p2 {
width: 3.73rem; width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
} }
...@@ -241,305 +258,417 @@ body, html { ...@@ -241,305 +258,417 @@ body, html {
.data-right { .data-right {
position: absolute; position: absolute;
right: 0.99rem; right : 0.99rem;
top: 32%; top : 32%;
z-index: 999; z-index : 999;
.wrap { .wrap {
position: relative; position : relative;
width: 6.60rem; width : 6.60rem;
height: 10.20rem; height : 10.20rem;
background: url("../../images/i3.png") no-repeat center; background : url("../../images/i3.png") no-repeat center;
background-size: cover; background-size: cover;
.tit { .tit {
position: absolute; position : absolute;
left: 0; left : 0;
right: 0; right : 0;
top: 0.28rem; top : 0.28rem;
text-align: center; text-align: center;
font-size: 0.44rem; font-size : 0.44rem;
color: #c0d9ff; color : #c0d9ff;
} }
.text { .text {
padding-left: 0.2rem; padding-left: 0.2rem;
padding-top: 1.5rem; padding-top : 1.5rem;
span { span {
font-size: 0.34rem; font-size: 0.34rem;
color: #76a3e7; color : #76a3e7;
} }
.p1 { .p1 {
width: 0.84rem; width : 0.84rem;
padding-right: 0.4rem; padding-right: 0.4rem;
text-align: center; text-align : center;
} }
.p2 { .p2 {
width: 3.73rem; width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.ranking { .ranking {
padding-top: 0.30rem; padding-top : 0.30rem;
padding-left: 0.2rem; padding-left: 0.2rem;
dd { dd {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
width: 6.08rem; width : 6.08rem;
height: 0.60rem; height : 0.60rem;
span { span {
font-size: 0.34rem; font-size: 0.34rem;
color: #ffffff; color : #ffffff;
} }
.p1 { .p1 {
width: 0.84rem; width : 0.84rem;
padding-right: 0.4rem; padding-right: 0.4rem;
text-align: center; text-align : center;
} }
.p2 { .p2 {
width: 3.73rem; width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
&.i1 { &.i1 {
background: url("../../images/a.png") no-repeat center; background : url("../../images/a.png") no-repeat center;
background-size: cover; background-size: cover;
} }
&.i2 { &.i2 {
background: url("../../images/b.png") no-repeat center; background : url("../../images/b.png") no-repeat center;
background-size: cover; background-size: cover;
} }
&.i3 { &.i3 {
background: url("../../images/c.png") no-repeat center; background : url("../../images/c.png") no-repeat center;
background-size: cover; background-size: cover;
} }
} }
} }
.list { .list-wrap {
padding-left: 0.20rem;
li { height : 5.2rem;
height: 0.60rem; overflow: hidden;
margin-bottom: 0.20rem;
span { .list {
font-size: 0.34rem; padding-left: 0.20rem;
color: #96bcf6; position : relative;
}
.p1 { li {
width: 0.84rem; height : 0.60rem;
padding-right: 0.4rem; margin-bottom: 0.20rem;
text-align: center;
}
.p2 { span {
width: 3.73rem; font-size: 0.34rem;
color : #96bcf6;
}
.p1 {
width : 0.84rem;
padding-right: 0.4rem;
text-align : center;
}
.p2 {
width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
} }
} }
.map-box { .map-box {
position: relative; position : relative;
padding-top: 0.60rem; padding-top: 0.60rem;
margin: 0 auto; margin : 0 auto;
z-index: 9; z-index : 9;
width: 25.40rem; width : 25.40rem;
img { img {
width: 25.40rem; width : 25.40rem;
height: 12rem; height : 12rem;
margin: 0 auto; margin : 0 auto;
display: block; display: block;
} }
.view { .view {
position: absolute; position : absolute;
bottom: 1.8rem; bottom : 1.8rem;
left: 0; left : 0;
right: 0; right : 0;
margin: 0 auto; margin : 0 auto;
width: 5.97rem; width : 5.97rem;
height: 1.22rem; height : 1.22rem;
font-size: 0.52rem; font-size : 0.52rem;
color: #c0d9ff; color : #c0d9ff;
background: url("../../images/i4.png") no-repeat center; background : url("../../images/i4.png") no-repeat center;
background-size: cover; background-size: cover;
} }
.twinkle { .twinkle {
position: absolute; position : absolute;
left: 0; left : 0;
top: 0; top : 0;
width: 100%; width : 100%;
height: 100%; height : 100%;
background: rgba(49, 156, 216, 0.5); background : rgba(49, 156, 216, 0.5);
border-radius: 50%; border-radius : 50%;
-webkit-animation: scale-three 1s ease infinite; -webkit-animation : scale-three 1s ease infinite;
animation: scale-three 1s ease infinite; animation : scale-three 1s ease infinite;
animation-direction: alternate; animation-direction : alternate;
-webkit-animation-direction: alternate; -webkit-animation-direction: alternate;
animation-fill-mode: both; 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;
}
/**中国北京**/
.star17 {
right : 5rem;
top : 5.2rem;
width : .3rem;
height: .3rem;
}
/**中国上海**/
.star18 {
right : 5rem;
top : 5.9rem;
width : .2rem;
height: .2rem;
}
/**中国武汉**/
.star19 {
right : 5.5rem;
top : 6rem;
width : .1rem;
height: .1rem;
}
/**中国江苏**/
.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 { .star1 {
position: absolute; position : absolute;
left: 4rem; left : 4.1rem;
top: 5rem; top : 5.1rem;
width: 0.4rem; width : 0.3rem;
height: 0.41rem; height : 0.3rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star2 { .star2 {
position: absolute; position : absolute;
left: 4.3rem; left : 4.35rem;
top: 5rem; top : 5.05rem;
width: 0.5rem; width : 0.4rem;
height: 0.5rem; height : 0.4rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star3 { .star3 {
position: absolute; position : absolute;
left: 4.8rem; left : 4.95rem;
top: 5rem; top : 5.15rem;
width: 0.5rem; width : 0.2rem;
height: 0.5rem; height : 0.2rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star4 { .star4 {
position: absolute; position : absolute;
left: 4.5rem; left : 4.7rem;
top: 5.5rem; top : 5.7rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star5 { .star5 {
position: absolute; position : absolute;
left: 4.3rem; left : 4.5rem;
top: 6rem; top : 6.2rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star6 { .star6 {
position: absolute; position : absolute;
left: 3.3rem; left : 3.4rem;
top: 5rem; top : 5.1rem;
width: 0.5rem; width : 0.15rem;
height: 0.5rem; height : 0.15rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star7 { .star7 {
position: absolute; position : absolute;
left: 5.3rem; left : 5.5rem;
top: 5rem; top : 5.2rem;
width: 0.5rem; width : 0.15rem;
height: 0.5rem; height : 0.15rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star8 { .star8 {
position: absolute; position : absolute;
left: 3.5rem; left : 3.7rem;
top: 5.5rem; top : 5.7rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star9 { .star9 {
position: absolute; position : absolute;
left: 5.3rem; left : 5.5rem;
top: 5.6rem; top : 5.8rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star10 { .star10 {
position: absolute; position : absolute;
right: 3.7rem; right : 3.9rem;
top: 5.6rem; top : 5.8rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star11 { .star11 {
position: absolute; position : absolute;
left: 2.7rem; left : 2.85rem;
top: 1.9rem; top : 2.05rem;
width: 0.5rem; width : 0.15rem;
height: 0.5rem; height : 0.15rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star12 { .star12 {
position: absolute; position : absolute;
left: 3.7rem; left : 3.9rem;
top: 1.6rem; top : 1.8rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star13 { .star13 {
position: absolute; position : absolute;
left: 3.7rem; left : 3.9rem;
top: 2.1rem; top : 2.3rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star14 { .star14 {
position: absolute; position : absolute;
right: 4.3rem; right : 4.5rem;
top: 5.4rem; top : 5.7rem;
width: 0.5rem; width : 0.3rem;
height: 0.5rem; height : 0.3rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
.star15 { .star15 {
position: absolute; position : absolute;
right: 5.9rem; right : 6.1rem;
top: 8rem; top : 8.2rem;
width: 0.5rem; width : 0.1rem;
height: 0.5rem; height : 0.1rem;
background-color: #c0d9ff; background-color: #c0d9ff;
border-radius: 50%; border-radius : 50%;
} }
} }
} }
......
css/home/index.min.css
html { html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section{margin:0;padding:0}button,input,select,textarea{font-size:100%;border:none}input[type=button],input[type=submit],input[type=file],button{cursor:pointer;-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}ol,ul,dl{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}a{text-decoration:none;transition:color .2s ease}img{border:none}em{font-style:normal}.clr{zoom:1}.clr:after{content:".";clear:both;height:0;visibility:hidden;display:block}a:hover,a:focus{text-decoration:none}.fl{float:left;_display:inline}.fr{float:right;_display:inline}.va-t{vertical-align:top}.va-m{vertical-align:middle}.va-b{vertical-align:bottom}.lineBlock{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal}.lbBox{font-size:0 !important;*word-spacing:-1px !important}.emptys{margin-left:-1px;width:1px;height:100%;font-size:0;vertical-align:middle}label,dd,dd,dt{font-weight:normal}.boxsiz{-webkit-box-sizing:border-box;box-sizing:border-box}.column{display:flex;flex-direction:column}.row{display:flex;flex-direction:row}.bothSide{justify-content:space-between}.avarage{justify-content:space-around}.rowCenter{justify-content:center}.verCenter{align-items:center}.boxFlex{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}body,html{width:100%;height:100%;overflow:hidden}.home-page{width:100%;height:100%;background:url("../../images/bg.png") no-repeat center;background-size:cover}.home-page .top{position:relative;width:100%;height:2.45rem;background:url("../../images/top.png") no-repeat center;background-size:cover}.home-page .top .date-text{position:absolute;left:10%;top:.53rem}.home-page .top .date-text span{font-size:.38rem;color:#ffffff;padding:0 .07rem}.home-page .top .date-text span.number{color:#5891e7}.home-page .top .date-wether{position:absolute;right:10%;top:.53rem}.home-page .top .date-wether span{font-size:.38rem;color:#ffffff;padding:0 .07rem}.home-page .top .date-wether span.ml{margin-left:.6rem}.home-page .top .date-wether span.number{color:#5891e7}.home-page .top .i1{position:absolute;bottom:.84rem;left:0;right:0;width:16.06rem;height:.8rem;margin:0 auto;background:url("../../images/t1.png") no-repeat center;background-size:cover}.home-page .data-top{padding:.8rem .99rem 0 .99rem}.home-page .data-top ul li{flex:0 0 6.48rem;height:2.34rem;background:url("../../images/i1.png") no-repeat center;background-size:cover}.home-page .data-top ul li .t1{font-size:.72rem;color:#e49e07;margin-bottom:.3rem}.home-page .data-top ul li .t2{font-size:.38rem;color:#c0d9ff}.home-page .data-bottom{position:absolute;left:0;right:0;bottom:2%;width:100%;padding:0 .99rem;z-index:999}.home-page .data-bottom ul li{flex:0 0 24%;height:2.11rem;background:url("../../images/i2.png") no-repeat center;background-size:cover}.home-page .data-bottom ul li .t1{font-size:.62rem;color:#e49e07;margin-bottom:.26rem}.home-page .data-bottom ul li .t2{font-size:.38rem;color:#c0d9ff}.home-page .data-left{position:absolute;left:.99rem;top:32%;z-index:999}.home-page .data-left .wrap{position:relative;width:6.6rem;height:10.2rem;background:url("../../images/i3.png") no-repeat center;background-size:cover}.home-page .data-left .wrap .tit{position:absolute;left:0;right:0;top:.28rem;text-align:center;font-size:.44rem;color:#c0d9ff}.home-page .data-left .wrap .text{padding-left:.2rem;padding-top:1.5rem}.home-page .data-left .wrap .text span{font-size:.34rem;color:#76a3e7}.home-page .data-left .wrap .text .p1{width:.84rem;padding-right:.4rem;text-align:center}.home-page .data-left .wrap .text .p2{width:3.73rem;height:.6rem;line-height:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-page .data-left .wrap .ranking{padding-top:.3rem;padding-left:.2rem}.home-page .data-left .wrap .ranking dd{margin-bottom:.2rem;width:6.08rem;height:.6rem}.home-page .data-left .wrap .ranking dd span{font-size:.34rem;color:#ffffff}.home-page .data-left .wrap .ranking dd .p1{width:.84rem;padding-right:.4rem;text-align:center}.home-page .data-left .wrap .ranking dd .p2{width:3.73rem;height:.6rem;line-height:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-page .data-left .wrap .ranking dd.i1{background:url("../../images/a.png") no-repeat center;background-size:cover}.home-page .data-left .wrap .ranking dd.i2{background:url("../../images/b.png") no-repeat center;background-size:cover}.home-page .data-left .wrap .ranking dd.i3{background:url("../../images/c.png") no-repeat center;background-size:cover}.home-page .data-left .wrap .list-wrap{height:5.2rem;overflow:hidden}.home-page .data-left .wrap .list-wrap .list{position:relative;padding-left:.2rem}.home-page .data-left .wrap .list-wrap .list li{height:.6rem;margin-bottom:.2rem}.home-page .data-left .wrap .list-wrap .list li span{font-size:.34rem;color:#96bcf6}.home-page .data-left .wrap .list-wrap .list li .p1{width:.84rem;padding-right:.4rem;text-align:center}.home-page .data-left .wrap .list-wrap .list li .p2{width:3.73rem;height:.6rem;line-height:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-page .data-right{position:absolute;right:.99rem;top:32%;z-index:999}.home-page .data-right .wrap{position:relative;width:6.6rem;height:10.2rem;background:url("../../images/i3.png") no-repeat center;background-size:cover}.home-page .data-right .wrap .tit{position:absolute;left:0;right:0;top:.28rem;text-align:center;font-size:.44rem;color:#c0d9ff}.home-page .data-right .wrap .text{padding-left:.2rem;padding-top:1.5rem}.home-page .data-right .wrap .text span{font-size:.34rem;color:#76a3e7}.home-page .data-right .wrap .text .p1{width:.84rem;padding-right:.4rem;text-align:center}.home-page .data-right .wrap .text .p2{width:3.73rem;height:.6rem;line-height:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-page .data-right .wrap .ranking{padding-top:.3rem;padding-left:.2rem}.home-page .data-right .wrap .ranking dd{margin-bottom:.2rem;width:6.08rem;height:.6rem}.home-page .data-right .wrap .ranking dd span{font-size:.34rem;color:#ffffff}.home-page .data-right .wrap .ranking dd .p1{width:.84rem;padding-right:.4rem;text-align:center}.home-page .data-right .wrap .ranking dd .p2{width:3.73rem;height:.6rem;line-height:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-page .data-right .wrap .ranking dd.i1{background:url("../../images/a.png") no-repeat center;background-size:cover}.home-page .data-right .wrap .ranking dd.i2{background:url("../../images/b.png") no-repeat center;background-size:cover}.home-page .data-right .wrap .ranking dd.i3{background:url("../../images/c.png") no-repeat center;background-size:cover}.home-page .data-right .wrap .list-wrap{height:5.2rem;overflow:hidden}.home-page .data-right .wrap .list-wrap .list{padding-left:.2rem;position:relative}.home-page .data-right .wrap .list-wrap .list li{height:.6rem;margin-bottom:.2rem}.home-page .data-right .wrap .list-wrap .list li span{font-size:.34rem;color:#96bcf6}.home-page .data-right .wrap .list-wrap .list li .p1{width:.84rem;padding-right:.4rem;text-align:center}.home-page .data-right .wrap .list-wrap .list li .p2{width:3.73rem;height:.6rem;line-height:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-page .map-box{position:relative;padding-top:.6rem;margin:0 auto;z-index:9;width:25.4rem}.home-page .map-box img{width:25.4rem;height:12rem;margin:0 auto;display:block}.home-page .map-box .view{position:absolute;bottom:1.8rem;left:0;right:0;margin:0 auto;width:5.97rem;height:1.22rem;font-size:.52rem;color:#c0d9ff;background:url("../../images/i4.png") no-repeat center;background-size:cover}.home-page .map-box .twinkle{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(49,156,216,0.5);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:.5rem;height:.5rem}.home-page .map-box .star17{right:5rem;top:5.2rem;width:.3rem;height:.3rem}.home-page .map-box .star18{right:5rem;top:5.9rem;width:.2rem;height:.2rem}.home-page .map-box .star19{right:5.5rem;top:6rem;width:.1rem;height:.1rem}.home-page .map-box .star20{right:5.1rem;top:5.8rem;width:.15rem;height:.15rem}.home-page .map-box .star21{right:6.9rem;top:5.8rem;width:.15rem;height:.15rem}.home-page .map-box .star22{right:5.3rem;top:6.9rem;width:.2rem;height:.2rem}.home-page .map-box .star23{right:5.1rem;top:6.9rem;width:.25rem;height:.25rem}.home-page .map-box .star24{right:5.2rem;top:6.5rem;width:.15rem;height:.15rem}.home-page .map-box .star1{position:absolute;left:4.1rem;top:5.1rem;width:.3rem;height:.3rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star2{position:absolute;left:4.35rem;top:5.05rem;width:.4rem;height:.4rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star3{position:absolute;left:4.95rem;top:5.15rem;width:.2rem;height:.2rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star4{position:absolute;left:4.7rem;top:5.7rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star5{position:absolute;left:4.5rem;top:6.2rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star6{position:absolute;left:3.4rem;top:5.1rem;width:.15rem;height:.15rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star7{position:absolute;left:5.5rem;top:5.2rem;width:.15rem;height:.15rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star8{position:absolute;left:3.7rem;top:5.7rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star9{position:absolute;left:5.5rem;top:5.8rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star10{position:absolute;right:3.9rem;top:5.8rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star11{position:absolute;left:2.85rem;top:2.05rem;width:.15rem;height:.15rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star12{position:absolute;left:3.9rem;top:1.8rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star13{position:absolute;left:3.9rem;top:2.3rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star14{position:absolute;right:4.5rem;top:5.7rem;width:.3rem;height:.3rem;background-color:#c0d9ff;border-radius:50%}.home-page .map-box .star15{position:absolute;right:6.1rem;top:8.2rem;width:.1rem;height:.1rem;background-color:#c0d9ff;border-radius:50%}@keyframes scale-three{0%{transform:scale(1)}100%{transform:scale(1.3)}}
-webkit-text-size-adjust: 100%; \ No newline at end of file
-ms-text-size-adjust: 100%;
}
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
font-family: sans-serif;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
margin: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
border: none;
}
input[type=button],
input[type=submit],
input[type=file],
button {
cursor: pointer;
-webkit-appearance: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol,
ul,
dl {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: 500;
}
a {
text-decoration: none;
transition: color 0.2s ease;
}
img {
border: none;
}
em {
font-style: normal;
}
.clr {
zoom: 1;
}
.clr:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a:hover,
a:focus {
text-decoration: none;
}
.fl {
float: left;
_display: inline;
}
.fr {
float: right;
_display: inline;
}
.va-t {
vertical-align: top;
}
.va-m {
vertical-align: middle;
}
.va-b {
vertical-align: bottom;
}
.lineBlock {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
}
.lbBox {
font-size: 0 !important;
*word-spacing: -1px !important;
}
.emptys {
margin-left: -1px;
width: 1px;
height: 100%;
font-size: 0;
vertical-align: middle;
}
label,
dd,
dd,
dt {
font-weight: normal;
}
.boxsiz {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
/* 两侧对齐 */
.bothSide {
justify-content: space-between;
}
/* 平均分布 */
.avarage {
justify-content: space-around;
}
/* 水平居中 */
.rowCenter {
justify-content: center;
}
/* 垂直居中 */
.verCenter {
align-items: center;
}
.boxFlex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
.home-page {
width: 100%;
height: 100%;
background: url("../../images/bg.png") no-repeat center;
background-size: cover;
}
.home-page .top {
position: relative;
width: 100%;
height: 2.45rem;
background: url("../../images/top.png") no-repeat center;
background-size: cover;
}
.home-page .top .date-text {
position: absolute;
left: 10%;
top: 0.53rem;
}
.home-page .top .date-text span {
font-size: 0.38rem;
color: #ffffff;
padding: 0 0.07rem;
}
.home-page .top .date-text span.number {
color: #5891e7;
}
.home-page .top .date-wether {
position: absolute;
right: 10%;
top: 0.53rem;
}
.home-page .top .date-wether span {
font-size: 0.38rem;
color: #ffffff;
padding: 0 0.07rem;
}
.home-page .top .date-wether span.ml {
margin-left: 0.6rem;
}
.home-page .top .date-wether span.number {
color: #5891e7;
}
.home-page .top .i1 {
position: absolute;
bottom: 0.84rem;
left: 0;
right: 0;
width: 16.06rem;
height: 0.8rem;
margin: 0 auto;
background: url("../../images/t1.png") no-repeat center;
background-size: cover;
}
.home-page .data-top {
padding: 0.8rem 0.99rem 0 0.99rem;
}
.home-page .data-top ul li {
flex: 0 0 6.48rem;
height: 2.34rem;
background: url("../../images/i1.png") no-repeat center;
background-size: cover;
}
.home-page .data-top ul li .t1 {
font-size: 0.72rem;
color: #e49e07;
margin-bottom: 0.3rem;
}
.home-page .data-top ul li .t2 {
font-size: 0.38rem;
color: #c0d9ff;
}
.home-page .data-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 2%;
width: 100%;
padding: 0 0.99rem;
z-index: 999;
}
.home-page .data-bottom ul li {
flex: 0 0 24%;
height: 2.11rem;
background: url("../../images/i2.png") no-repeat center;
background-size: cover;
}
.home-page .data-bottom ul li .t1 {
font-size: 0.62rem;
color: #e49e07;
margin-bottom: 0.26rem;
}
.home-page .data-bottom ul li .t2 {
font-size: 0.38rem;
color: #c0d9ff;
}
.home-page .data-left {
position: absolute;
left: 0.99rem;
top: 32%;
z-index: 999;
}
.home-page .data-left .wrap {
position: relative;
width: 6.6rem;
height: 10.2rem;
background: url("../../images/i3.png") no-repeat center;
background-size: cover;
}
.home-page .data-left .wrap .tit {
position: absolute;
left: 0;
right: 0;
top: 0.28rem;
text-align: center;
font-size: 0.44rem;
color: #c0d9ff;
}
.home-page .data-left .wrap .text {
padding-left: 0.2rem;
padding-top: 1.5rem;
}
.home-page .data-left .wrap .text span {
font-size: 0.34rem;
color: #76a3e7;
}
.home-page .data-left .wrap .text .p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
.home-page .data-left .wrap .text .p2 {
width: 3.73rem;
}
.home-page .data-left .wrap .ranking {
padding-top: 0.3rem;
padding-left: 0.2rem;
}
.home-page .data-left .wrap .ranking dd {
margin-bottom: 0.2rem;
width: 6.08rem;
height: 0.6rem;
}
.home-page .data-left .wrap .ranking dd span {
font-size: 0.34rem;
color: #ffffff;
}
.home-page .data-left .wrap .ranking dd .p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
.home-page .data-left .wrap .ranking dd .p2 {
width: 3.73rem;
}
.home-page .data-left .wrap .ranking dd.i1 {
background: url("../../images/a.png") no-repeat center;
background-size: cover;
}
.home-page .data-left .wrap .ranking dd.i2 {
background: url("../../images/b.png") no-repeat center;
background-size: cover;
}
.home-page .data-left .wrap .ranking dd.i3 {
background: url("../../images/c.png") no-repeat center;
background-size: cover;
}
.home-page .data-left .wrap .list-wrap {
height: 5.2rem;
overflow: hidden;
}
.home-page .data-left .wrap .list-wrap .list {
position: relative;
padding-left: 0.2rem;
}
.home-page .data-left .wrap .list-wrap .list li {
height: 0.6rem;
margin-bottom: 0.2rem;
}
.home-page .data-left .wrap .list-wrap .list li span {
font-size: 0.34rem;
color: #96bcf6;
}
.home-page .data-left .wrap .list-wrap .list li .p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
.home-page .data-left .wrap .list-wrap .list li .p2 {
width: 3.73rem;
}
.home-page .data-right {
position: absolute;
right: 0.99rem;
top: 32%;
z-index: 999;
}
.home-page .data-right .wrap {
position: relative;
width: 6.6rem;
height: 10.2rem;
background: url("../../images/i3.png") no-repeat center;
background-size: cover;
}
.home-page .data-right .wrap .tit {
position: absolute;
left: 0;
right: 0;
top: 0.28rem;
text-align: center;
font-size: 0.44rem;
color: #c0d9ff;
}
.home-page .data-right .wrap .text {
padding-left: 0.2rem;
padding-top: 1.5rem;
}
.home-page .data-right .wrap .text span {
font-size: 0.34rem;
color: #76a3e7;
}
.home-page .data-right .wrap .text .p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
.home-page .data-right .wrap .text .p2 {
width: 3.73rem;
}
.home-page .data-right .wrap .ranking {
padding-top: 0.3rem;
padding-left: 0.2rem;
}
.home-page .data-right .wrap .ranking dd {
margin-bottom: 0.2rem;
width: 6.08rem;
height: 0.6rem;
}
.home-page .data-right .wrap .ranking dd span {
font-size: 0.34rem;
color: #ffffff;
}
.home-page .data-right .wrap .ranking dd .p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
.home-page .data-right .wrap .ranking dd .p2 {
width: 3.73rem;
}
.home-page .data-right .wrap .ranking dd.i1 {
background: url("../../images/a.png") no-repeat center;
background-size: cover;
}
.home-page .data-right .wrap .ranking dd.i2 {
background: url("../../images/b.png") no-repeat center;
background-size: cover;
}
.home-page .data-right .wrap .ranking dd.i3 {
background: url("../../images/c.png") no-repeat center;
background-size: cover;
}
.home-page .data-right .wrap .list {
padding-left: 0.2rem;
}
.home-page .data-right .wrap .list li {
height: 0.6rem;
margin-bottom: 0.2rem;
}
.home-page .data-right .wrap .list li span {
font-size: 0.34rem;
color: #96bcf6;
}
.home-page .data-right .wrap .list li .p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
.home-page .data-right .wrap .list li .p2 {
width: 3.73rem;
}
.home-page .map-box {
position: relative;
padding-top: 0.6rem;
margin: 0 auto;
z-index: 9;
width: 25.4rem;
}
.home-page .map-box img {
width: 25.4rem;
height: 12rem;
margin: 0 auto;
display: block;
}
.home-page .map-box .view {
position: absolute;
bottom: 1.8rem;
left: 0;
right: 0;
margin: 0 auto;
width: 5.97rem;
height: 1.22rem;
font-size: 0.52rem;
color: #c0d9ff;
background: url("../../images/i4.png") no-repeat center;
background-size: cover;
}
.home-page .map-box .twinkle {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(49, 156, 216, 0.5);
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 .star1 {
position: absolute;
left: 4rem;
top: 5rem;
width: 0.4rem;
height: 0.41rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star2 {
position: absolute;
left: 4.3rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star3 {
position: absolute;
left: 4.8rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star4 {
position: absolute;
left: 4.5rem;
top: 5.5rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star5 {
position: absolute;
left: 4.3rem;
top: 6rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star6 {
position: absolute;
left: 3.3rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star7 {
position: absolute;
left: 5.3rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star8 {
position: absolute;
left: 3.5rem;
top: 5.5rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star9 {
position: absolute;
left: 5.3rem;
top: 5.6rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star10 {
position: absolute;
right: 3.7rem;
top: 5.6rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star11 {
position: absolute;
left: 2.7rem;
top: 1.9rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star12 {
position: absolute;
left: 3.7rem;
top: 1.6rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star13 {
position: absolute;
left: 3.7rem;
top: 2.1rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star14 {
position: absolute;
right: 4.3rem;
top: 5.4rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
.home-page .map-box .star15 {
position: absolute;
right: 5.9rem;
top: 8rem;
width: 0.5rem;
height: 0.5rem;
background-color: #c0d9ff;
border-radius: 50%;
}
@keyframes scale-three {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
/*# sourceMappingURL=index.min.css.map */
\ No newline at end of file
images/i4.png
images/i4.png

4.21 KB | W: | H:

images/i4.png

39.1 KB | W: | H:

images/i4.png
images/i4.png
images/i4.png
images/i4.png
  • 2-up
  • Swipe
  • Onion skin
index.html
...@@ -3,438 +3,498 @@ ...@@ -3,438 +3,498 @@
<head> <head>
<title></title> <title></title>
<meta name="keywords" content=""/> <meta name="keywords" content="" />
<meta name="description" content=""/> <meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link type="favicon" rel="shortcut icon" href="favicon.ico"/> <link type="favicon" rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="./css/home/index.min.css"/> <link rel="stylesheet" type="text/css" href="./css/home/index.min.css" />
<script> <script>
window.onload = function () { window.onload = function () {
getRem(3840, 100) getRem(3840, 100)
}; };
window.onresize = function () { window.onresize = function () {
getRem(3840, 100) getRem(3840, 100)
}; };
function getRem(pwidth, prem) { function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0]; var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth; var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px"; html.style.fontSize = oWidth / pwidth * prem + "px";
} }
</script> </script>
</head> </head>
<body> <body>
<div class="home-page"> <div class="home-page">
<div class="top"> <div class="top">
<p class="date-text row verCenter"> <p class="date-text row verCenter">
<span class="number" id="year"></span> <span class="number" id="year"></span>
<span>年</span> <span>年</span>
<span class="number" id="month"></span> <span class="number" id="month"></span>
<span>月</span> <span>月</span>
<span class="number" id="day"></span> <span class="number" id="day"></span>
<span>日</span> <span>日</span>
<span>星期</span> <span>星期</span>
<span class="number" id="week"></span> <span class="number" id="week"></span>
</p> </p>
<p class="date-wether row verCenter"> <p class="date-wether row verCenter">
<span>北京时间</span> <span>北京时间</span>
<span class="number" id="time">00:00:00</span> <span class="number" id="time">00:00:00</span>
<span class="ml">深圳</span> <span class="ml">深圳</span>
<span class="number" id="wendu"></span> <span class="number" id="wendu"></span>
</p> </p>
<i class="i1"></i> <i class="i1"></i>
</div>
<div class="data-top boxsiz">
<ul class="row avarage">
<li class="column rowCenter verCenter">
<p class="t1" id="daily_ic_num">0</p>
<p class="t2">日交易元器件数量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="daily_ic_sn_num">0</p>
<p class="t2">日交易元器件型号数量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="daily_ic_search_num">0</p>
<p class="t2">日元器件型号搜索量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="history_ic_search_xinum">0</p>
<p class="t2">历史累积交易元器件数量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="current_sku_sum">0</p>
<p class="t2">当前上架SKU总量</p>
</li>
</ul>
</div>
<div class="map-box">
<img src="./images/map.png" alt="">
<!--德克萨斯州-->
<div class="star1">
<span class="twinkle"></span>
</div>
<!--明尼苏达州-->
<div class="star2">
<span class="twinkle"></span>
</div>
<!--马塞诸萨州纽伯里波特-->
<div class="star3">
<span class="twinkle"></span>
</div>
<!--加州-->
<div class="star4">
<span class="twinkle"></span>
</div>
<!--蒙大拿州-->
<div class="star5">
<span class="twinkle"></span>
</div>
<!--亚利桑那州-->
<div class="star6">
<span class="twinkle"></span>
</div>
<!--纽约-->
<div class="star7">
<span class="twinkle"></span>
</div>
<!--新泽西-->
<div class="star8">
<span class="twinkle"></span>
</div>
<!--费城-->
<div class="star9">
<span class="twinkle"></span>
</div>
<!--日本-->
<div class="star10">
<span class="twinkle"></span>
</div>
<!--英国-->
<div class="star11">
<span class="twinkle"></span>
</div>
<!--德国-->
<div class="star12">
<span class="twinkle"></span>
</div> </div>
<!--瑞士--> <div class="data-top boxsiz">
<div class="star13"> <ul class="row avarage">
<span class="twinkle"></span> <li class="column rowCenter verCenter">
<p class="t1" id="daily_ic_num">0</p>
<p class="t2">日交易元器件数量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="daily_ic_sn_num">0</p>
<p class="t2">日交易元器件型号数量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="daily_ic_search_num">0</p>
<p class="t2">日元器件型号搜索量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="history_ic_search_xinum">0</p>
<p class="t2">历史累积交易元器件数量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="current_sku_sum">0</p>
<p class="t2">当前上架SKU总量</p>
</li>
</ul>
</div> </div>
<!--韩国--> <div class="map-box">
<div class="star14"> <img src="./images/map.png" alt="">
<span class="twinkle"></span> <!--中国深圳-->
<div class="star16">
<span class="twinkle"></span>
</div>
<!--中国北京-->
<div class="star17">
<span class="twinkle"></span>
</div>
<!--中国上海-->
<div class="star18">
<span class="twinkle"></span>
</div>
<!--中国武汉-->
<div class="star19">
<span class="twinkle"></span>
</div>
<!--中国江苏-->
<div class="star20">
<span class="twinkle"></span>
</div>
<!--中国成都-->
<div class="star21">
<span class="twinkle"></span>
</div>
<!--中国香港-->
<div class="star22">
<span class="twinkle"></span>
</div>
<!--中国台湾-->
<div class="star23">
<span class="twinkle"></span>
</div>
<!--英国-->
<div class="star23">
<span class="twinkle"></span>
</div>
<!--德克萨斯州-->
<div class="star1">
<span class="twinkle"></span>
</div>
<!--明尼苏达州-->
<div class="star2">
<span class="twinkle"></span>
</div>
<!--马塞诸萨州纽伯里波特-->
<div class="star3">
<span class="twinkle"></span>
</div>
<!--加州-->
<div class="star4">
<span class="twinkle"></span>
</div>
<!--蒙大拿州-->
<div class="star5">
<span class="twinkle"></span>
</div>
<!--亚利桑那州-->
<div class="star6">
<span class="twinkle"></span>
</div>
<!--纽约-->
<div class="star7">
<span class="twinkle"></span>
</div>
<!--新泽西-->
<div class="star8">
<span class="twinkle"></span>
</div>
<!--费城-->
<div class="star9">
<span class="twinkle"></span>
</div>
<!--日本-->
<div class="star10">
<span class="twinkle"></span>
</div>
<!--英国-->
<div class="star11">
<span class="twinkle"></span>
</div>
<!--德国-->
<div class="star12">
<span class="twinkle"></span>
</div>
<!--瑞士-->
<div class="star13">
<span class="twinkle"></span>
</div>
<!--韩国-->
<div class="star14">
<span class="twinkle"></span>
</div>
<!--新加坡-->
<div class="star15">
<span class="twinkle"></span>
</div>
<span class="view row rowCenter verCenter">全球供应商分布</span>
</div> </div>
<!--新加坡--> <div class="data-left">
<div class="star15"> <div class="wrap boxsiz">
<span class="twinkle"></span> <p class="tit">日搜索排行榜</p>
<p class="text row boxsiz">
<span class="p1">排行</span>
<span class="p2">型号</span>
<span>搜索数</span>
</p>
<dl class="ranking boxsiz">
<dd class="i1 row verCenter">
<span class="p1">1</span>
<span class="p2">SKHHCWA010</span>
<span>77</span>
</dd>
<dd class="i2 row verCenter">
<span class="p1">2</span>
<span class="p2">SKHHCWA010</span>
<span>77</span>
</dd>
<dd class="i3 row verCenter">
<span class="p1">3</span>
<span class="p2">SKHHCWA010</span>
<span>77</span>
</dd>
</dl>
<div class="list-wrap">
<ul class="list boxsiz" id="notes_txt">
<li class="row verCenter">
<span class="p1">4</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">5</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">6</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">7</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">8</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">9</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">10</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">11</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">12</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">13</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">13</span>
<span class="p2">C945</span>
<span>62</span>
</li>
</ul>
</div>
</div>
</div> </div>
<span class="view row rowCenter verCenter">全球供应商分布</span> <div class="data-right">
</div> <div class="wrap">
<div class="data-left"> <p class="tit">日下单排行榜</p>
<div class="wrap boxsiz"> <p class="text row boxsiz">
<p class="tit">日搜索排行榜</p> <span class="p1">排行</span>
<p class="text row boxsiz"> <span class="p2">型号</span>
<span class="p1">排行</span> <span>下单数</span>
<span class="p2">型号</span> </p>
<span>搜索数</span> <dl class="ranking boxsiz">
</p> <dd class="i1 row verCenter">
<dl class="ranking boxsiz"> <span class="p1">1</span>
<dd class="i1 row verCenter"> <span class="p2">SKHHCWA010</span>
<span class="p1">1</span> <span>77</span>
<span class="p2">SKHHCWA010</span> </dd>
<span>77</span> <dd class="i2 row verCenter">
</dd> <span class="p1">2</span>
<dd class="i2 row verCenter"> <span class="p2">SKHHCWA010</span>
<span class="p1">2</span> <span>77</span>
<span class="p2">SKHHCWA010</span> </dd>
<span>77</span> <dd class="i3 row verCenter">
</dd> <span class="p1">3</span>
<dd class="i3 row verCenter"> <span class="p2">SKHHCWA010</span>
<span class="p1">3</span> <span>77</span>
<span class="p2">SKHHCWA010</span> </dd>
<span>77</span> </dl>
</dd> <div class="list-wrap">
</dl> <ul class="list boxsiz" id="notes_txt2">
<div class="list-wrap"> <li class="row verCenter">
<ul class="list boxsiz" id="notes_txt"> <span class="p1">4</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">4</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> <li class="row verCenter">
</li> <span class="p1">5</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">5</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> <li class="row verCenter">
</li> <span class="p1">6</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">6</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> <li class="row verCenter">
</li> <span class="p1">7</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">7</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> <li class="row verCenter">
</li> <span class="p1">8</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">8</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> <li class="row verCenter">
</li> <span class="p1">9</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">9</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> <li class="row verCenter">
</li> <span class="p1">10</span>
<li class="row verCenter"> <span class="p2">C945</span>
<span class="p1">10</span> <span>62</span>
<span class="p2">C945</span> </li>
<span>62</span> </ul>
</li> </div>
<li class="row verCenter">
<span class="p1">11</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">12</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">13</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">13</span>
<span class="p2">C945</span>
<span>62</span>
</li>
</ul>
</div> </div>
</div> </div>
</div> <div class="data-bottom boxsiz">
<div class="data-right"> <ul class="row bothSide">
<div class="wrap"> <li class="column rowCenter verCenter">
<p class="tit">日下单排行榜</p> <p class="t1" id="plat_sku_sum">0</p>
<p class="text row boxsiz"> <p class="t2">平台SKU总量</p>
<span class="p1">排行</span>
<span class="p2">型号</span>
<span>下单数</span>
</p>
<dl class="ranking boxsiz">
<dd class="i1 row verCenter">
<span class="p1">1</span>
<span class="p2">SKHHCWA010</span>
<span>77</span>
</dd>
<dd class="i2 row verCenter">
<span class="p1">1</span>
<span class="p2">SKHHCWA010</span>
<span>77</span>
</dd>
<dd class="i3 row verCenter">
<span class="p1">1</span>
<span class="p2">SKHHCWA010</span>
<span>77</span>
</dd>
</dl>
<ul class="list boxsiz">
<li class="row verCenter">
<span class="p1">4</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">5</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">6</span>
<span class="p2">C945</span>
<span>62</span>
</li>
<li class="row verCenter">
<span class="p1">7</span>
<span class="p2">C945</span>
<span>62</span>
</li> </li>
<li class="row verCenter"> <li class="column rowCenter verCenter">
<span class="p1">8</span> <p class="t1" id="plat_supply_sum">0</p>
<span class="p2">C945</span> <p class="t2">平台供应商总数</p>
<span>62</span>
</li> </li>
<li class="row verCenter"> <li class="column rowCenter verCenter">
<span class="p1">9</span> <p class="t1" id="supply_brand_num">0</p>
<span class="p2">C945</span> <p class="t2">供应品牌数</p>
<span>62</span>
</li> </li>
<li class="row verCenter"> <li class="column rowCenter verCenter">
<span class="p1">10</span> <p class="t1" id="supply_class_num">0</p>
<span class="p2">C945</span> <p class="t2">供应品类总数</p>
<span>62</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="data-bottom boxsiz">
<ul class="row bothSide">
<li class="column rowCenter verCenter">
<p class="t1" id="plat_sku_sum">0</p>
<p class="t2">平台SKU总量</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="plat_supply_sum">0</p>
<p class="t2">平台供应商总数</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="supply_brand_num">0</p>
<p class="t2">供应品牌数</p>
</li>
<li class="column rowCenter verCenter">
<p class="t1" id="supply_class_num">0</p>
<p class="t2">供应品类总数</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/number.js"></script>
<script type="text/javascript">
$(function () {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',');
$('#daily_ic_num').animateNumber({
number: 1125564,
numberStep: comma_separator_number_step
});
$('#daily_ic_sn_num').animateNumber({
number: 556544,
numberStep: comma_separator_number_step
});
$('#daily_ic_search_num').animateNumber({
number: 1544,
numberStep: comma_separator_number_step
});
$('#history_ic_search_xinum').animateNumber({
number: 1125564,
numberStep: comma_separator_number_step
});
$('#current_sku_sum').animateNumber({
number: 112556544,
numberStep: comma_separator_number_step
});
$('#plat_sku_sum').animateNumber({
number: 112556544,
numberStep: comma_separator_number_step
});
$('#plat_supply_sum').animateNumber({ <script type="text/javascript" src="js/jquery.min.js"></script>
number: 112556544, <script type="text/javascript" src="js/number.js"></script>
numberStep: comma_separator_number_step
});
$('#supply_brand_num').animateNumber({ <script type="text/javascript">
number: 112556544, var charts = {
numberStep: comma_separator_number_step date: "",
}); init: function () {
charts.date()
charts.scrollRank("#notes_txt");
charts.scrollRank("#notes_txt2");
charts.getData();
//一天更新数据一次
setInterval(function(){
charts.getData();
},86400000)
},
getData: function () {
$.ajax({
type: "GET",
url: "http://api.liexin.com/bigtv/api/bigTv",
data: { date: charts.date },
dataType: 'json',
success: function (data) {
console.log(data)
charts.numberScroll(data);
var daily_order_list = data.daily_order || []
var daily_search_list = data.daily_search || []
charts.rankData(daily_search_list,daily_order_list)
$('#supply_class_num').animateNumber({ }
number: 112556544, });
numberStep: comma_separator_number_step },
}); 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+4)+'</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 {
html1 += '<li class="row verCenter">'
html1 += ' <span class="p1">'+(i+4)+'</span>'
html1 += '<span class="p2">'+key_+'</span>'
html1 += '<span>'+value_+'</span></li>'
}
}
$(".data-right .list").html(html1)
},
numberScroll: function (data) {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',');
$(".row li .t1").each(function () {
var id_name = $(this).attr("id");
if ($(this).text() != data[id_name]) {
$(this).prop('number', $(this).text()).animateNumber({
number: data[id_name],
numberStep: comma_separator_number_step
}, 1000);
}
})
scrollInfo(); },
init(); date: function () {
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
charts.date = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
var week = new Array("日", "一", "二", "三", "四", "五", "六");
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var weekDay = now.getDay();
$("#indexDate").html("今天是：" + year + "年" + month + "月" + day + "日" + "&nbsp;" + week[weekDay]);
function init() { $("#year").text(year);
var week = new Array("日", "一", "二", "三", "四", "五", "六"); $("#month").text(month);
var now = new Date(); $("#day").text(day);
var year = now.getFullYear(); $("#week").text(week[weekDay]);
var month = now.getMonth() + 1; $.ajax({
var day = now.getDate(); url: "http://wthrcdn.etouch.cn/weather_mini?city=深圳",
var weekDay = now.getDay(); dataType: 'json',
$("#indexDate").html("今天是：" + year + "年" + month + "月" + day + "日" + "&nbsp;" + week[weekDay]); type: "get",
success: function (res) {
$("#wendu").text(res.data.wendu + "℃");
}
$("#year").text(year); })
$("#month").text(month); setInterval(function () {
$("#day").text(day); var myDate = new Date;
$("#week").text(week[weekDay]); var h = myDate.getHours();
if (h < 10) {
h = "0" + h
}
var m = myDate.getMinutes();
if (m < 10) {
m = "0" + m
}
var s = myDate.getSeconds();
if (s < 10) {
s = "0" + s
}
$("#time").html(h + ":" + m + ":" + s);
}, 1000)
},
scrollRank: function (ele) {
//滚动数据展示模块
var $notesTxt = $(ele);
if ($notesTxt.find("li").length < 7) {
return
}
if ($notesTxt.length > 0) {
var z = 0;
$.ajax({ function up() {
url: "http://wthrcdn.etouch.cn/weather_mini?city=深圳", $notesTxt.animate({
dataType: 'json', 'top': (z - 0.6 * 4) + 'rem'
type: "get", }, 3500, 'linear', function () {
success: function (res) { $notesTxt.css({
$("#wendu").text(res.data.wendu + "℃"); 'top': '0px'
} }).find(".li:first").appendTo($notesTxt);
up();
}) });
}
}
function scrollInfo() {
//滚动数据展示模块
var $notesTxt = $("#notes_txt");
if ($notesTxt.length > 0) {
var z = 0;
function up() { up();
$notesTxt.animate({ //鼠标滑入停止动画
'top': (z - 0.6 * 4) + 'rem' $notesTxt.hover(function () {
}, 3500, 'linear', function () { $notesTxt.stop(false, false);
$notesTxt.css({ }, function () {
'top': '0px' up();
}).find(".li:first").appendTo($notesTxt); })
up(); }
}); }
} }
charts.init()
up(); </script>
//鼠标滑入停止动画
$notesTxt.hover(function () {
$notesTxt.stop(false, false);
}, function () {
up();
})
}
};
setInterval(function () {
var myDate = new Date;
var h = myDate.getHours();
if (h < 10) {
h = "0" + h
}
var m = myDate.getMinutes();
if (m < 10) {
m = "0" + m
}
var s = myDate.getSeconds();
if (s < 10) {
s = "0" + s
}
$("#time").html(h + ":" + m + ":" + s);
}, 1000)
})
</script>
</body> </body>
</html> </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