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 Show whitespace changes
Inline Side-by-side
Showing with 792 additions and 358 deletions
src/css/index.css
View file @ af9a09f9
body {
margin: 0 20px;
padding: 0;
background: url("../images/bg.png") no-repeat;
background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
}
ul {
list-style: none;
}
ul,
li {
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 130px;
width: 100%;
background: url("../images/header-bg.png") no-repeat;
background: url('../images/header-bg.png') no-repeat;
background-size: cover;
display: -webkit-box;
display: -webkit-flex;
......@@ -24,7 +31,7 @@ ul {
width: 228px;
height: 40px;
margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat;
background: url('../images/logo.png') no-repeat;
background-size: cover;
}
.header-middle {
......@@ -94,7 +101,7 @@ ul {
display: inline-block;
width: 23px;
height: 23px;
background: url("../images/user.png") no-repeat;
background: url('../images/user.png') no-repeat;
background-size: cover;
margin-right: 15px;
}
......@@ -111,7 +118,7 @@ ul {
width: 21px;
height: 23px;
cursor: pointer;
background: url("../images/logout.png") no-repeat;
background: url('../images/logout.png') no-repeat;
background-size: contain;
margin-right: 15px;
}
......@@ -133,7 +140,7 @@ ul {
.content .st-box::before,
.content .st-box::after {
position: absolute;
content: " ";
content: ' ';
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
......@@ -196,8 +203,7 @@ ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 35px;
margin-right: 20px;
margin: 35px 20px 0;
}
.content .st-box .echarts-box .legend li {
display: -webkit-box;
......@@ -218,7 +224,7 @@ ul {
height: 12px;
border-radius: 5px;
display: block;
content: " ";
content: ' ';
}
.content .st-box .echarts-box .legend li:nth-child(1)::before {
background: #4380f0;
......@@ -307,7 +313,7 @@ ul {
align-items: center;
}
.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;
height: 54px;
position: relative;
......@@ -616,4 +622,3 @@ ul {
white-space: nowrap;
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
<html>
<head>
<head>
<title></title>
<script src="js/index.js"></script>
<link href="/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<link href="/css/stat-bar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--顶部标题栏-->
<div class="header">
<div class="header-left">
......@@ -27,12 +29,33 @@
</div>
<!--顶部统计栏-->
<div class="stat-bar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="stat-bar-inner">
<div class="stat-item">
<div class="tit">累计用电量</div>
<div class="scroll-box"></div>
<div class="suffix">万kWh</div>
</div>
<div class="stat-item">
<div class="tit">累计发电量</div>
<div class="scroll-box"></div>
<div class="suffix">万kWh</div>
</div>
<div class="stat-item">
<div class="tit">累计碳排放量</div>
<div class="scroll-box"></div>
<div class="suffix">万t</div>
</div>
<div class="stat-item">
<div class="tit">累计减碳量</div>
<div class="scroll-box"></div>
<div class="suffix">万t</div>
</div>
</div>
<svg width="0" height="0">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" :stdDeviation="0 12" />
</filter>
</svg>
</div>
<!--内容区-->
<div class="content">
......@@ -230,6 +253,8 @@
</div>
</div>
</div>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
</body>
</body>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="/js/index.js"></script>
</html>
\ No newline at end of file
src/js/index.js
View file @ af9a09f9
This diff is collapsed.
src/css/index.less → src/less/index.less
View file @ af9a09f9
body {
margin: 0 20px;
padding: 0;
background: url("../images/bg.png") no-repeat;
background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
}
ul {
list-style: none;
}
ul,
li {
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 130px;
width: 100%;
background: url("../images/header-bg.png") no-repeat;
background: url('../images/header-bg.png') no-repeat;
background-size: cover;
display: flex;
}
......@@ -21,7 +28,7 @@ ul {
width: 228px;
height: 40px;
margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat;
background: url('../images/logo.png') no-repeat;
background-size: cover;
}
.header-middle {
......@@ -80,7 +87,7 @@ ul {
display: inline-block;
width: 23px;
height: 23px;
background: url("../images/user.png") no-repeat;
background: url('../images/user.png') no-repeat;
background-size: cover;
margin-right: 15px;
}
......@@ -97,7 +104,7 @@ ul {
width: 21px;
height: 23px;
cursor: pointer;
background: url("../images/logout.png") no-repeat;
background: url('../images/logout.png') no-repeat;
background-size: contain;
margin-right: 15px;
}
......@@ -116,7 +123,7 @@ ul {
&::before,
&::after {
position: absolute;
content: " ";
content: ' ';
display: block;
top: 50%;
transform: translateY(-50%);
......@@ -162,8 +169,7 @@ ul {
.legend {
user-select: none;
display: flex;
margin-top: 35px;
margin-right: 20px;
margin: 35px 20px 0;
li {
display: flex;
align-items: center;
......@@ -176,7 +182,7 @@ ul {
height: 12px;
border-radius: 5px;
display: block;
content: " ";
content: ' ';
}
&:nth-child(1) {
&::before {
......@@ -227,11 +233,11 @@ ul {
}
}
}
.center-section{
.center-section {
width: 865px;
height: 540px;
position: relative;
.justify-between{
.justify-between {
display: flex;
justify-content: space-between;
}
......@@ -247,7 +253,7 @@ ul {
margin: 15px 0 0 28px;
line-height: 47px;
}
.text-globe{
.text-globe {
position: absolute;
height: 110px;
background: url(../images/globe.png) 100% no-repeat;
......@@ -263,16 +269,16 @@ ul {
text-align: left;
white-space: nowrap;
}
.center-top{
.center-top {
display: flex;
flex-direction: column;
align-items: center;
.center-title{
background: url("../images/center-title-bg.png") no-repeat;
.center-title {
background: url('../images/center-title-bg.png') no-repeat;
width: 411px;
height: 54px;
position: relative;
& > span{
& > span {
width: 89px;
height: 22px;
overflow-wrap: break-word;
......@@ -284,7 +290,7 @@ ul {
line-height: 53px;
margin: 16px 0 0 168px;
}
.center-title-bg{
.center-title-bg {
background: url(../images/center-title-top.png) no-repeat;
width: 549px;
height: 14px;
......@@ -293,7 +299,7 @@ ul {
left: -72px;
}
}
.center-content{
.center-content {
.box_1 {
width: 822px;
height: 78px;
......@@ -355,7 +361,7 @@ ul {
}
}
}
.center-title-bottom{
.center-title-bottom {
position: absolute;
left: 158px;
top: 532px;
......@@ -375,7 +381,7 @@ ul {
}
}
}
.center-bottom{
.center-bottom {
.flex-row {
display: flex;
flex-direction: row;
......
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