react实现液态液体流动数值统计仪表盘效果代码
代码语言:html
所属分类:其他
代码描述:react实现液态液体流动数值统计仪表盘效果代码
代码标签: react 液态 液体 流动 数值 统计 仪表盘
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'; body { background: #02C39A; font-family: "Open Sans", sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; } #container { margin: 50px; background: #FEFFF7; height: 500px; width: calc(100vw - 100px); overflow: hidden; position: relative; padding: 50px; box-sizing: border-box; box-shadow: 0 -10px 10px -10px rgba(18, 18, 18, 0.25); } @media screen and (max-width: 780px) { #container { height: 90vh; } } @media screen and (max-width: 480px) { #container { margin: 20px; width: calc(100vw - 40px); height: 96vh; padding: 20px; } } .title { color: #05668D; font-size: 60px; font-weight: 100; } @media screen and (max-width: 780px) { .title { font-size: 48px; } } @media screen and (max-width: 480px) { .title { font-size: 30px; } } .graphs { position: absolute; bottom: 212px; -webkit-animation: graph 30s infinite linear; animation: graph 30s infinite linear; opacity: 1; } @media screen and (max-width: 480px) { .graphs { opacity: 0.2; } } @-webkit-keyframes graph { 0% { left: -1px; } 100% { left: -2601px; } } @keyframes graph { 0% { left: -1px; } 100% { left: -2601px; } } .graph { position: relative; } .graph svg { position: absolute; } .graph svg:first-child { left: 0; top: 0; } .graph svg:last-child { left: 2598px; top: 0; } .graphSVG { fill: #02C39A; } .lines { position: absolute; top: 0%; left: 0; height: 50%; width: 100%; opacity: 0.125; } @media screen and (max-width: 780px) { .lines { top: 50%; } } .lines .line { height: 1px; background: #05668D; margin-bottom: 2vh; } .lines .line:nth-child(1) { opacity: 0.05; } .lines .line:nth-child(2) { opacity: 0.1; } .lines .line:nth-child(3) { opacity: 0.15; } .lines .line:nth-child(4) { opacity: 0.2; } .lines .line:nth-child(5) { opacity: 0.25; } .lines .line:nth-child(6) { opacity: 0.3; } .lines .line:nth-child(7) { opacity: 0.35; } .lines .line:nth-child(8) { opacity: 0.4; } .lines .line:nth-child(9) { opacity: 0.45; } .lines .line:nth-child(10) { opacity: 0.5; } .lines .line:nth-child(11) { opacity: 0.55; } .lines .line:nth-child(12) { opacity: 0.6; } .lines .line:nth-child(13) { opacity: 0.65; } .lines .line:nth-child(14) { opacity: 0.7; } .lines .line:nth-child(15) { opacity: 0.75; } .lines .line:nth-child(16) { opacity: 0.8; } .lines .line:nth-child(17) { opacity: 0.85; } .lines .line:nth-child(18) { opacity: 0.9; } .lines .line:nth-child(19) { opacity: 0.95; } .lines .line:nth-child(20) { opacity: 1; } .content { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 5vh; } @media screen and (max-width: 780px) { .content { flex-direction: column; align-items: space-between; justify-content: center; height: 80%; } } .content .group { width: 33.33%; text-align: center; } @media screen and (max-width: 780px) { .content .group { width: 100%; flex: 1 0 auto; } } .content .group .numbers { font-size: 96px; font-weight: 100; margin-bottom: 10px; } .content .group .label { text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script > let App = React.createClass({ displayName: "App", getInitialState: function () { return { data: [ { name: "Mentions today", value: 622 }, { name: "Social mentions", value: 122 }, { name: "Positive mentions", value: 612 }] }; }, render: function () { let numbers = this.state.data.map(function (number, i) { return /*#__PURE__*/React.createElement(Group, { name: number.name, value: number.value }); }); return /*#__PURE__*/( React.createElement("div", { id: "container" }, /*#__PURE__*/ Re.........完整代码请登录后点击上方下载按钮下载查看
网友评论0