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';
body, html {
width: 100%;
height: 100%;
body,
html {
width : 100%;
height : 100%;
overflow: hidden;
}
.home-page {
width: 100%;
height: 100%;
background: url("../../images/bg.png") no-repeat center;
width : 100%;
height : 100%;
background : url("../../images/bg.png") no-repeat center;
background-size: cover;
.top {
position: relative;
width: 100%;
height: 2.45rem;
background: url("../../images/top.png") no-repeat center;
position : relative;
width : 100%;
height : 2.45rem;
background : url("../../images/top.png") no-repeat center;
background-size: cover;
.date-text {
position: absolute;
left: 10%;
top: 0.53rem;
left : 10%;
top : 0.53rem;
span {
font-size: 0.38rem;
color: #ffffff;
padding: 0 0.07rem;
color : #ffffff;
padding : 0 0.07rem;
&.number {
color: #5891e7;
......@@ -37,13 +38,13 @@ body, html {
.date-wether {
position: absolute;
right: 10%;
top: 0.53rem;
right : 10%;
top : 0.53rem;
span {
font-size: 0.38rem;
color: #ffffff;
padding: 0 0.07rem;
color : #ffffff;
padding : 0 0.07rem;
&.ml {
margin-left: 0.6rem;
......@@ -56,14 +57,14 @@ body, html {
}
.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;
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;
}
}
......@@ -73,20 +74,20 @@ body, html {
ul {
li {
flex: 0 0 6.48rem;
height: 2.34rem;
background: url("../../images/i1.png") no-repeat center;
flex : 0 0 6.48rem;
height : 2.34rem;
background : url("../../images/i1.png") no-repeat center;
background-size: cover;
.t1 {
font-size: 0.72rem;
color: #e49e07;
font-size : 0.72rem;
color : #e49e07;
margin-bottom: 0.3rem;
}
.t2 {
font-size: 0.38rem;
color: #c0d9ff;
color : #c0d9ff;
}
}
}
......@@ -94,29 +95,29 @@ body, html {
.data-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 2%;
width: 100%;
padding: 0 0.99rem;
z-index: 999;
left : 0;
right : 0;
bottom : 2%;
width : 100%;
padding : 0 0.99rem;
z-index : 999;
ul {
li {
flex: 0 0 24%;
height: 2.11rem;
background: url("../../images/i2.png") no-repeat center;
flex : 0 0 24%;
height : 2.11rem;
background : url("../../images/i2.png") no-repeat center;
background-size: cover;
.t1 {
font-size: 0.62rem;
color: #e49e07;
font-size : 0.62rem;
color : #e49e07;
margin-bottom: 0.26rem;
}
.t2 {
font-size: 0.38rem;
color: #c0d9ff;
color : #c0d9ff;
}
}
}
......@@ -124,83 +125,94 @@ body, html {
.data-left {
position: absolute;
left: 0.99rem;
top: 32%;
z-index: 999;
left : 0.99rem;
top : 32%;
z-index : 999;
.wrap {
position: relative;
width: 6.60rem;
height: 10.20rem;
background: url("../../images/i3.png") no-repeat center;
position : relative;
width : 6.60rem;
height : 10.20rem;
background : url("../../images/i3.png") no-repeat center;
background-size: cover;
.tit {
position: absolute;
left: 0;
right: 0;
top: 0.28rem;
position : absolute;
left : 0;
right : 0;
top : 0.28rem;
text-align: center;
font-size: 0.44rem;
color: #c0d9ff;
font-size : 0.44rem;
color : #c0d9ff;
}
.text {
padding-left: 0.2rem;
padding-top: 1.5rem;
padding-top : 1.5rem;
span {
font-size: 0.34rem;
color: #76a3e7;
color : #76a3e7;
}
.p1 {
width: 0.84rem;
width : 0.84rem;
padding-right: 0.4rem;
text-align: center;
text-align : center;
}
.p2 {
width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.ranking {
padding-top: 0.30rem;
padding-top : 0.30rem;
padding-left: 0.2rem;
dd {
margin-bottom: 0.2rem;
width: 6.08rem;
height: 0.60rem;
width : 6.08rem;
height : 0.60rem;
span {
font-size: 0.34rem;
color: #ffffff;
color : #ffffff;
}
.p1 {
width: 0.84rem;
width : 0.84rem;
padding-right: 0.4rem;
text-align: center;
text-align : center;
}
.p2 {
width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.i1 {
background: url("../../images/a.png") no-repeat center;
background : url("../../images/a.png") no-repeat center;
background-size: cover;
}
&.i2 {
background: url("../../images/b.png") no-repeat center;
background : url("../../images/b.png") no-repeat center;
background-size: cover;
}
&.i3 {
background: url("../../images/c.png") no-repeat center;
background : url("../../images/c.png") no-repeat center;
background-size: cover;
}
}
......@@ -208,30 +220,35 @@ body, html {
.list-wrap {
height: 5.2rem;
height : 5.2rem;
overflow: hidden;
.list {
position: relative;
position : relative;
padding-left: 0.20rem;
li {
height: 0.60rem;
height : 0.60rem;
margin-bottom: 0.20rem;
span {
font-size: 0.34rem;
color: #96bcf6;
color : #96bcf6;
}
.p1 {
width: 0.84rem;
width : 0.84rem;
padding-right: 0.4rem;
text-align: center;
text-align : center;
}
.p2 {
width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
......@@ -241,305 +258,417 @@ body, html {
.data-right {
position: absolute;
right: 0.99rem;
top: 32%;
z-index: 999;
right : 0.99rem;
top : 32%;
z-index : 999;
.wrap {
position: relative;
width: 6.60rem;
height: 10.20rem;
background: url("../../images/i3.png") no-repeat center;
position : relative;
width : 6.60rem;
height : 10.20rem;
background : url("../../images/i3.png") no-repeat center;
background-size: cover;
.tit {
position: absolute;
left: 0;
right: 0;
top: 0.28rem;
position : absolute;
left : 0;
right : 0;
top : 0.28rem;
text-align: center;
font-size: 0.44rem;
color: #c0d9ff;
font-size : 0.44rem;
color : #c0d9ff;
}
.text {
padding-left: 0.2rem;
padding-top: 1.5rem;
padding-top : 1.5rem;
span {
font-size: 0.34rem;
color: #76a3e7;
color : #76a3e7;
}
.p1 {
width: 0.84rem;
width : 0.84rem;
padding-right: 0.4rem;
text-align: center;
text-align : center;
}
.p2 {
width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.ranking {
padding-top: 0.30rem;
padding-top : 0.30rem;
padding-left: 0.2rem;
dd {
margin-bottom: 0.2rem;
width: 6.08rem;
height: 0.60rem;
width : 6.08rem;
height : 0.60rem;
span {
font-size: 0.34rem;
color: #ffffff;
color : #ffffff;
}
.p1 {
width: 0.84rem;
width : 0.84rem;
padding-right: 0.4rem;
text-align: center;
text-align : center;
}
.p2 {
width: 3.73rem;
height:0.6rem;
line-height: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.i1 {
background: url("../../images/a.png") no-repeat center;
background : url("../../images/a.png") no-repeat center;
background-size: cover;
}
&.i2 {
background: url("../../images/b.png") no-repeat center;
background : url("../../images/b.png") no-repeat center;
background-size: cover;
}
&.i3 {
background: url("../../images/c.png") no-repeat center;
background : url("../../images/c.png") no-repeat center;
background-size: cover;
}
}
}
.list {
padding-left: 0.20rem;
.list-wrap {
li {
height: 0.60rem;
margin-bottom: 0.20rem;
height : 5.2rem;
overflow: hidden;
span {
font-size: 0.34rem;
color: #96bcf6;
}
.list {
padding-left: 0.20rem;
position : relative;
.p1 {
width: 0.84rem;
padding-right: 0.4rem;
text-align: center;
}
li {
height : 0.60rem;
margin-bottom: 0.20rem;
.p2 {
width: 3.73rem;
span {
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 {
position: relative;
position : relative;
padding-top: 0.60rem;
margin: 0 auto;
z-index: 9;
width: 25.40rem;
margin : 0 auto;
z-index : 9;
width : 25.40rem;
img {
width: 25.40rem;
height: 12rem;
margin: 0 auto;
width : 25.40rem;
height : 12rem;
margin : 0 auto;
display: block;
}
.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;
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;
}
.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;
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;
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 {
position: absolute;
left: 4rem;
top: 5rem;
width: 0.4rem;
height: 0.41rem;
position : absolute;
left : 4.1rem;
top : 5.1rem;
width : 0.3rem;
height : 0.3rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star2 {
position: absolute;
left: 4.3rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 4.35rem;
top : 5.05rem;
width : 0.4rem;
height : 0.4rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star3 {
position: absolute;
left: 4.8rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 4.95rem;
top : 5.15rem;
width : 0.2rem;
height : 0.2rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star4 {
position: absolute;
left: 4.5rem;
top: 5.5rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 4.7rem;
top : 5.7rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star5 {
position: absolute;
left: 4.3rem;
top: 6rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 4.5rem;
top : 6.2rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star6 {
position: absolute;
left: 3.3rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 3.4rem;
top : 5.1rem;
width : 0.15rem;
height : 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star7 {
position: absolute;
left: 5.3rem;
top: 5rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 5.5rem;
top : 5.2rem;
width : 0.15rem;
height : 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star8 {
position: absolute;
left: 3.5rem;
top: 5.5rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 3.7rem;
top : 5.7rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star9 {
position: absolute;
left: 5.3rem;
top: 5.6rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 5.5rem;
top : 5.8rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star10 {
position: absolute;
right: 3.7rem;
top: 5.6rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
right : 3.9rem;
top : 5.8rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star11 {
position: absolute;
left: 2.7rem;
top: 1.9rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 2.85rem;
top : 2.05rem;
width : 0.15rem;
height : 0.15rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star12 {
position: absolute;
left: 3.7rem;
top: 1.6rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 3.9rem;
top : 1.8rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star13 {
position: absolute;
left: 3.7rem;
top: 2.1rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
left : 3.9rem;
top : 2.3rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star14 {
position: absolute;
right: 4.3rem;
top: 5.4rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
right : 4.5rem;
top : 5.7rem;
width : 0.3rem;
height : 0.3rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
.star15 {
position: absolute;
right: 5.9rem;
top: 8rem;
width: 0.5rem;
height: 0.5rem;
position : absolute;
right : 6.1rem;
top : 8.2rem;
width : 0.1rem;
height : 0.1rem;
background-color: #c0d9ff;
border-radius: 50%;
border-radius : 50%;
}
}
}
......
css/home/index.min.css
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 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
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)}}
\ 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 @@
<head>
<title></title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<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="keywords" content="" />
<meta name="description" content="" />
<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 http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link type="favicon" rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="./css/home/index.min.css"/>
<link type="favicon" rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="./css/home/index.min.css" />
<script>
window.onload = function () {
getRem(3840, 100)
};
window.onresize = function () {
getRem(3840, 100)
};
window.onload = function () {
getRem(3840, 100)
};
window.onresize = function () {
getRem(3840, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</head>
<body>
<div class="home-page">
<div class="top">
<p class="date-text row verCenter">
<span class="number" id="year"></span>
<span>年</span>
<span class="number" id="month"></span>
<span>月</span>
<span class="number" id="day"></span>
<span>日</span>
<span>星期</span>
<span class="number" id="week"></span>
</p>
<p class="date-wether row verCenter">
<span>北京时间</span>
<span class="number" id="time">00:00:00</span>
<span class="ml">深圳</span>
<span class="number" id="wendu"></span>
</p>
<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 class="home-page">
<div class="top">
<p class="date-text row verCenter">
<span class="number" id="year"></span>
<span>年</span>
<span class="number" id="month"></span>
<span>月</span>
<span class="number" id="day"></span>
<span>日</span>
<span>星期</span>
<span class="number" id="week"></span>
</p>
<p class="date-wether row verCenter">
<span>北京时间</span>
<span class="number" id="time">00:00:00</span>
<span class="ml">深圳</span>
<span class="number" id="wendu"></span>
</p>
<i class="i1"></i>
</div>
<!--瑞士-->
<div class="star13">
<span class="twinkle"></span>
<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="star14">
<span class="twinkle"></span>
<div class="map-box">
<img src="./images/map.png" alt="">
<!--中国深圳-->
<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 class="star15">
<span class="twinkle"></span>
<div class="data-left">
<div class="wrap boxsiz">
<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>
<span class="view row rowCenter verCenter">全球供应商分布</span>
</div>
<div class="data-left">
<div class="wrap boxsiz">
<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 class="data-right">
<div class="wrap">
<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_txt2">
<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>
</ul>
</div>
</div>
</div>
</div>
<div class="data-right">
<div class="wrap">
<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">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>
<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="row verCenter">
<span class="p1">8</span>
<span class="p2">C945</span>
<span>62</span>
<li class="column rowCenter verCenter">
<p class="t1" id="plat_supply_sum">0</p>
<p class="t2">平台供应商总数</p>
</li>
<li class="row verCenter">
<span class="p1">9</span>
<span class="p2">C945</span>
<span>62</span>
<li class="column rowCenter verCenter">
<p class="t1" id="supply_brand_num">0</p>
<p class="t2">供应品牌数</p>
</li>
<li class="row verCenter">
<span class="p1">10</span>
<span class="p2">C945</span>
<span>62</span>
<li class="column rowCenter verCenter">
<p class="t1" id="supply_class_num">0</p>
<p class="t2">供应品类总数</p>
</li>
</ul>
</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({
number: 112556544,
numberStep: comma_separator_number_step
});
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/number.js"></script>
$('#supply_brand_num').animateNumber({
number: 112556544,
numberStep: comma_separator_number_step
});
<script type="text/javascript">
var charts = {
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() {
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]);
$("#year").text(year);
$("#month").text(month);
$("#day").text(day);
$("#week").text(week[weekDay]);
$.ajax({
url: "http://wthrcdn.etouch.cn/weather_mini?city=深圳",
dataType: 'json',
type: "get",
success: function (res) {
$("#wendu").text(res.data.wendu + "℃");
}
$("#year").text(year);
$("#month").text(month);
$("#day").text(day);
$("#week").text(week[weekDay]);
})
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)
},
scrollRank: function (ele) {
//滚动数据展示模块
var $notesTxt = $(ele);
if ($notesTxt.find("li").length < 7) {
return
}
if ($notesTxt.length > 0) {
var z = 0;
$.ajax({
url: "http://wthrcdn.etouch.cn/weather_mini?city=深圳",
dataType: 'json',
type: "get",
success: function (res) {
$("#wendu").text(res.data.wendu + "℃");
}
})
}
function scrollInfo() {
//滚动数据展示模块
var $notesTxt = $("#notes_txt");
if ($notesTxt.length > 0) {
var z = 0;
function up() {
$notesTxt.animate({
'top': (z - 0.6 * 4) + 'rem'
}, 3500, 'linear', function () {
$notesTxt.css({
'top': '0px'
}).find(".li:first").appendTo($notesTxt);
up();
});
}
function up() {
$notesTxt.animate({
'top': (z - 0.6 * 4) + 'rem'
}, 3500, 'linear', function () {
$notesTxt.css({
'top': '0px'
}).find(".li:first").appendTo($notesTxt);
up();
});
up();
//鼠标滑入停止动画
$notesTxt.hover(function () {
$notesTxt.stop(false, false);
}, function () {
up();
})
}
}
}
up();
//鼠标滑入停止动画
$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>
charts.init()
</script>
</body>
</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