Skip to content

Z
zh_zcb-ems
Commit af9a09f9 authored by wu.hui's avatar wu.hui
Browse files
Options

feat: 添加数字滚动

parent 77d10f2b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 792 additions and 358 deletions
src/css/index.css
View file @ af9a09f9
body { body {
margin: 0 20px; margin: 0 20px;
padding: 0; padding: 0;
background: url("../images/bg.png") no-repeat; background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
} }
ul { ul {
list-style: none; list-style: none;
} }
ul,
li {
margin: 0;
padding: 0;
}
.header { .header {
position: relative; position: relative;
height: 130px; height: 130px;
width: 100%; width: 100%;
background: url("../images/header-bg.png") no-repeat; background: url('../images/header-bg.png') no-repeat;
background-size: cover; background-size: cover;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -24,7 +31,7 @@ ul { ...@@ -24,7 +31,7 @@ ul {
width: 228px; width: 228px;
height: 40px; height: 40px;
margin: 80px 0 0 20px; margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat; background: url('../images/logo.png') no-repeat;
background-size: cover; background-size: cover;
} }
.header-middle { .header-middle {
...@@ -94,7 +101,7 @@ ul { ...@@ -94,7 +101,7 @@ ul {
display: inline-block; display: inline-block;
width: 23px; width: 23px;
height: 23px; height: 23px;
background: url("../images/user.png") no-repeat; background: url('../images/user.png') no-repeat;
background-size: cover; background-size: cover;
margin-right: 15px; margin-right: 15px;
} }
...@@ -111,7 +118,7 @@ ul { ...@@ -111,7 +118,7 @@ ul {
width: 21px; width: 21px;
height: 23px; height: 23px;
cursor: pointer; cursor: pointer;
background: url("../images/logout.png") no-repeat; background: url('../images/logout.png') no-repeat;
background-size: contain; background-size: contain;
margin-right: 15px; margin-right: 15px;
} }
...@@ -133,7 +140,7 @@ ul { ...@@ -133,7 +140,7 @@ ul {
.content .st-box::before, .content .st-box::before,
.content .st-box::after { .content .st-box::after {
position: absolute; position: absolute;
content: " "; content: ' ';
display: block; display: block;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
...@@ -196,8 +203,7 @@ ul { ...@@ -196,8 +203,7 @@ ul {
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
margin-top: 35px; margin: 35px 20px 0;
margin-right: 20px;
} }
.content .st-box .echarts-box .legend li { .content .st-box .echarts-box .legend li {
display: -webkit-box; display: -webkit-box;
...@@ -218,7 +224,7 @@ ul { ...@@ -218,7 +224,7 @@ ul {
height: 12px; height: 12px;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
content: " "; content: ' ';
} }
.content .st-box .echarts-box .legend li:nth-child(1)::before { .content .st-box .echarts-box .legend li:nth-child(1)::before {
background: #4380f0; background: #4380f0;
...@@ -307,7 +313,7 @@ ul { ...@@ -307,7 +313,7 @@ ul {
align-items: center; align-items: center;
} }
.content .center-section .center-top .center-title { .content .center-section .center-top .center-title {
background: url("../images/center-title-bg.png") no-repeat; background: url('../images/center-title-bg.png') no-repeat;
width: 411px; width: 411px;
height: 54px; height: 54px;
position: relative; position: relative;
...@@ -616,4 +622,3 @@ ul { ...@@ -616,4 +622,3 @@ ul {
white-space: nowrap; white-space: nowrap;
line-height: 24px; line-height: 24px;
} }
/*# sourceMappingURL=index.css.map */
\ No newline at end of file
src/css/stat-bar.css 0 → 100644
View file @ af9a09f9
@font-face {
font-family: 'DigifaceWide';
src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype');
/* Safari, Android, iOS */
}
.stat-bar {
z-index: 2;
width: 98%;
margin: 0 auto;
height: 64px;
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 79, 253, 0.2)), color-stop(70%, rgba(12, 80, 252, 0)), to(rgba(12, 80, 252, 0)));
background-image: -o-linear-gradient(bottom, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
background-image: linear-gradient(0deg, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
overflow: hidden;
}
.stat-bar .stat-bar-inner {
width: 1700px;
margin: 8px auto 0 auto;
height: 48px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.stat-bar .stat-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.stat-bar .stat-item .tit {
font-size: 20px;
color: #52ccff;
font-family: 'Source Han Sans CN';
}
.stat-bar .stat-item .scroll-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-left: 10px;
}
.stat-bar .stat-item .scroll-num {
width: var(--width, 36px);
height: var(--height, 48px);
line-height: var(--height, 48px);
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: 'DigifaceWide';
border-radius: 3px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#07256a), to(rgba(7, 37, 105, 0)));
background-image: -o-linear-gradient(bottom, #07256a 0%, rgba(7, 37, 105, 0) 100%);
background-image: linear-gradient(0deg, #07256a 0%, rgba(7, 37, 105, 0) 100%);
border: 1px solid #01fff6;
overflow: hidden;
margin-right: 4px;
}
.stat-bar .stat-item .suffix {
font-size: 16px;
color: #758094;
font-family: 'Source Han Sans CN';
}
.stat-bar .border-animate {
-webkit-animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
.stat-bar .animate {
-webkit-animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
@-webkit-keyframes move {
from {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
to {
-webkit-transform: translateY(1%);
transform: translateY(1%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
}
@keyframes move {
from {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
to {
-webkit-transform: translateY(1%);
transform: translateY(1%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
}
@-webkit-keyframes bounce-in-down {
from {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 7%));
transform: translateY(calc(var(--i) * -9.09% - 7%));
-webkit-filter: none;
filter: none;
}
25% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 3%));
transform: translateY(calc(var(--i) * -9.09% + 3%));
}
50% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
-webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%));
}
}
@keyframes bounce-in-down {
from {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 7%));
transform: translateY(calc(var(--i) * -9.09% - 7%));
-webkit-filter: none;
filter: none;
}
25% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 3%));
transform: translateY(calc(var(--i) * -9.09% + 3%));
}
50% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
-webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%));
}
}
@-webkit-keyframes enhance-bounce-in-down {
25% {
-webkit-transform: translateY(8%);
transform: translateY(8%);
}
50% {
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
}
70% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
}
85% {
-webkit-transform: translateY(-1%);
transform: translateY(-1%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes enhance-bounce-in-down {
25% {
-webkit-transform: translateY(8%);
transform: translateY(8%);
}
50% {
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
}
70% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
}
85% {
-webkit-transform: translateY(-1%);
transform: translateY(-1%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
src/index.html
View file @ af9a09f9
This diff is collapsed.
src/js/index.js
View file @ af9a09f9
This diff is collapsed.
src/css/index.less → src/less/index.less
View file @ af9a09f9
body { body {
margin: 0 20px; margin: 0 20px;
padding: 0; padding: 0;
background: url("../images/bg.png") no-repeat; background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
} }
ul { ul {
list-style: none; list-style: none;
} }
ul,
li {
margin: 0;
padding: 0;
}
.header { .header {
position: relative; position: relative;
height: 130px; height: 130px;
width: 100%; width: 100%;
background: url("../images/header-bg.png") no-repeat; background: url('../images/header-bg.png') no-repeat;
background-size: cover; background-size: cover;
display: flex; display: flex;
} }
...@@ -21,7 +28,7 @@ ul { ...@@ -21,7 +28,7 @@ ul {
width: 228px; width: 228px;
height: 40px; height: 40px;
margin: 80px 0 0 20px; margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat; background: url('../images/logo.png') no-repeat;
background-size: cover; background-size: cover;
} }
.header-middle { .header-middle {
...@@ -80,7 +87,7 @@ ul { ...@@ -80,7 +87,7 @@ ul {
display: inline-block; display: inline-block;
width: 23px; width: 23px;
height: 23px; height: 23px;
background: url("../images/user.png") no-repeat; background: url('../images/user.png') no-repeat;
background-size: cover; background-size: cover;
margin-right: 15px; margin-right: 15px;
} }
...@@ -97,7 +104,7 @@ ul { ...@@ -97,7 +104,7 @@ ul {
width: 21px; width: 21px;
height: 23px; height: 23px;
cursor: pointer; cursor: pointer;
background: url("../images/logout.png") no-repeat; background: url('../images/logout.png') no-repeat;
background-size: contain; background-size: contain;
margin-right: 15px; margin-right: 15px;
} }
...@@ -116,7 +123,7 @@ ul { ...@@ -116,7 +123,7 @@ ul {
&::before, &::before,
&::after { &::after {
position: absolute; position: absolute;
content: " "; content: ' ';
display: block; display: block;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -162,8 +169,7 @@ ul { ...@@ -162,8 +169,7 @@ ul {
.legend { .legend {
user-select: none; user-select: none;
display: flex; display: flex;
margin-top: 35px; margin: 35px 20px 0;
margin-right: 20px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -176,7 +182,7 @@ ul { ...@@ -176,7 +182,7 @@ ul {
height: 12px; height: 12px;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
content: " "; content: ' ';
} }
&:nth-child(1) { &:nth-child(1) {
&::before { &::before {
...@@ -227,11 +233,11 @@ ul { ...@@ -227,11 +233,11 @@ ul {
} }
} }
} }
.center-section{ .center-section {
width: 865px; width: 865px;
height: 540px; height: 540px;
position: relative; position: relative;
.justify-between{ .justify-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
...@@ -247,7 +253,7 @@ ul { ...@@ -247,7 +253,7 @@ ul {
margin: 15px 0 0 28px; margin: 15px 0 0 28px;
line-height: 47px; line-height: 47px;
} }
.text-globe{ .text-globe {
position: absolute; position: absolute;
height: 110px; height: 110px;
background: url(../images/globe.png) 100% no-repeat; background: url(../images/globe.png) 100% no-repeat;
...@@ -263,16 +269,16 @@ ul { ...@@ -263,16 +269,16 @@ ul {
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
} }
.center-top{ .center-top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.center-title{ .center-title {
background: url("../images/center-title-bg.png") no-repeat; background: url('../images/center-title-bg.png') no-repeat;
width: 411px; width: 411px;
height: 54px; height: 54px;
position: relative; position: relative;
& > span{ & > span {
width: 89px; width: 89px;
height: 22px; height: 22px;
overflow-wrap: break-word; overflow-wrap: break-word;
...@@ -284,7 +290,7 @@ ul { ...@@ -284,7 +290,7 @@ ul {
line-height: 53px; line-height: 53px;
margin: 16px 0 0 168px; margin: 16px 0 0 168px;
} }
.center-title-bg{ .center-title-bg {
background: url(../images/center-title-top.png) no-repeat; background: url(../images/center-title-top.png) no-repeat;
width: 549px; width: 549px;
height: 14px; height: 14px;
...@@ -293,7 +299,7 @@ ul { ...@@ -293,7 +299,7 @@ ul {
left: -72px; left: -72px;
} }
} }
.center-content{ .center-content {
.box_1 { .box_1 {
width: 822px; width: 822px;
height: 78px; height: 78px;
...@@ -355,7 +361,7 @@ ul { ...@@ -355,7 +361,7 @@ ul {
} }
} }
} }
.center-title-bottom{ .center-title-bottom {
position: absolute; position: absolute;
left: 158px; left: 158px;
top: 532px; top: 532px;
...@@ -375,7 +381,7 @@ ul { ...@@ -375,7 +381,7 @@ ul {
} }
} }
} }
.center-bottom{ .center-bottom {
.flex-row { .flex-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -474,8 +480,8 @@ ul { ...@@ -474,8 +480,8 @@ ul {
margin-left: 10px; margin-left: 10px;
} }
.text-wrapper_57 { .text-wrapper_57 {
width: 83px; width: 83px;
} }
} }
} }
} }
...@@ -531,7 +537,7 @@ ul { ...@@ -531,7 +537,7 @@ ul {
} }
} }
} }
} }
} }
} }
} }
src/less/stat-bar.less 0 → 100644
View file @ af9a09f9
@font-face {
font-family: 'DigifaceWide';
src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype'); /* Safari, Android, iOS */
}
.stat-bar {
z-index: 2;
width: 98%;
margin: 0 auto;
height: 64px;
background-image: linear-gradient(
0deg,
rgba(11, 79, 253, 0.2) 0%,
rgba(12, 80, 252, 0) 70%,
rgba(12, 80, 252, 0) 100%
);
overflow: hidden;
.stat-bar-inner {
width: 1700px;
margin: 8px auto 0 auto;
height: 48px;
display: flex;
justify-content: space-between;
}
.stat-item {
display: flex;
align-items: center;
.tit {
font-size: 20px;
color: #52ccff;
font-family: 'Source Han Sans CN';
}
.scroll-box {
display: flex;
margin-left: 10px;
}
.scroll-num {
width: var(--width, 36px);
height: var(--height, 48px);
line-height: var(--height, 48px);
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: 'DigifaceWide';
border-radius: 3px;
background-image: linear-gradient(
0deg,
#07256a 0%,
rgba(7, 37, 105, 0) 100%
);
border: 1px solid #01fff6;
overflow: hidden;
margin-right: 4px;
}
.suffix {
font-size: 16px;
color: #758094;
font-family: 'Source Han Sans CN';
}
}
.border-animate {
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
.animate {
animation: move 1.6s linear infinite,
bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
}
@keyframes move {
from {
transform: translateY(-90%);
filter: url(#blur);
}
to {
transform: translateY(1%);
filter: url(#blur);
}
}
@keyframes bounce-in-down {
from {
transform: translateY(calc(var(--i) * -9.09% - 7%));
filter: none;
}
25% {
transform: translateY(calc(var(--i) * -9.09% + 3%));
}
50% {
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
transform: translateY(calc(var(--i) * -9.09%));
}
}
@keyframes enhance-bounce-in-down {
25% {
transform: translateY(8%);
}
50% {
transform: translateY(-4%);
}
70% {
transform: translateY(2%);
}
85% {
transform: translateY(-1%);
}
to {
transform: translateY(0);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment