Compare commits
2 Commits
0fa45ac931
...
ce3228ae03
| Author | SHA1 | Date |
|---|---|---|
 pkbxg3m62
|
ce3228ae03 | 7 months ago |
|
lyy
|
104a161ff0 | 7 months ago |
@ -0,0 +1,132 @@
|
||||
<style>
|
||||
.loader {
|
||||
background: #ffffff;
|
||||
background: radial-gradient(#ffffff, #ffffff);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.loader-inner {
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loader-line-wrap {
|
||||
animation:
|
||||
spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
|
||||
;
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: 50% 100%;
|
||||
width: 100px;
|
||||
}
|
||||
.loader-line {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
|
||||
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
|
||||
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
|
||||
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
|
||||
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
|
||||
|
||||
.loader-line-wrap:nth-child(1) .loader-line {
|
||||
border-color: hsl(0, 80%, 60%);
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
top: 7px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(2) .loader-line {
|
||||
border-color: hsl(60, 80%, 60%);
|
||||
height: 76px;
|
||||
width: 76px;
|
||||
top: 14px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(3) .loader-line {
|
||||
border-color: hsl(120, 80%, 60%);
|
||||
height: 62px;
|
||||
width: 62px;
|
||||
top: 21px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(4) .loader-line {
|
||||
border-color: hsl(180, 80%, 60%);
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
top: 28px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(5) .loader-line {
|
||||
border-color: hsl(240, 80%, 60%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%, 15% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loader">
|
||||
<div class="loader-inner">
|
||||
<div class="loader-line-wrap">
|
||||
<div class="loader-line"></div>
|
||||
</div>
|
||||
<div class="loader-line-wrap">
|
||||
<div class="loader-line"></div>
|
||||
</div>
|
||||
<div class="loader-line-wrap">
|
||||
<div class="loader-line"></div>
|
||||
</div>
|
||||
<div class="loader-line-wrap">
|
||||
<div class="loader-line"></div>
|
||||
</div>
|
||||
<div class="loader-line-wrap">
|
||||
<div class="loader-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.login {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
margin: -150px 0 0 -150px;
|
||||
width:300px;
|
||||
height:300px;
|
||||
}
|
||||
</style>
|
||||
<html>
|
||||
<body>
|
||||
<h1>welcome</h1>
|
||||
</body>
|
||||
<script>
|
||||
setTimeout(()=>location.href="LoginUI.html",5000);
|
||||
</script>
|
||||
</html>
|
||||
@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>注册页面</title>
|
||||
<!-- 引入格式文件-->
|
||||
<link rel="stylesheet" href="html&css.css">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
*{
|
||||
margin: 0px;/*所有的外边距为0*/
|
||||
padding: 0px;/*所有的内边距为0*/
|
||||
box-sizing: border-box;/*规定两个并排的带边框的框*/
|
||||
}
|
||||
table{
|
||||
text-align: center;
|
||||
}
|
||||
body{
|
||||
background: url("image/register_bg.png")no-repeat center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.rg_layout{
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
border: 8px solid #EEEEEE;/*solid 定义实线*/
|
||||
background-color: white;
|
||||
margin: auto;
|
||||
}
|
||||
.rg_left{
|
||||
float: none;
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
}
|
||||
.rg_left>p:first-child{
|
||||
color: #FFD026;
|
||||
font-size: 20px;
|
||||
}
|
||||
.rg_left>p:last-child{
|
||||
color: #A6A6A6;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rg_center{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rg_right{
|
||||
float: none;
|
||||
margin: 250px;
|
||||
padding-left: 10px;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.rg_right p{
|
||||
font-size: 15px;
|
||||
}
|
||||
.rg_right p a{
|
||||
color: coral;
|
||||
}
|
||||
.td_left{
|
||||
padding-left: 250px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
height: 45px;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.td_right{
|
||||
padding-left: 40px;
|
||||
text-align: center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.bt_center{
|
||||
padding-left: 310px;
|
||||
}
|
||||
#username,#password,#email,#name,#tel,#birthday,#checkcode{
|
||||
width: 251px;
|
||||
height: 32px;
|
||||
border: 1px solid #A6A6A6;
|
||||
/*设置边框圆角*/
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#checkcode{
|
||||
width: 110px;
|
||||
}
|
||||
#img_check{
|
||||
height: 32px;
|
||||
vertical-align: middle;/*设置图片的位置垂直居中*/
|
||||
}
|
||||
#btn_sub{
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #FFD026;
|
||||
border: 1px solid #FFD026;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="rg_layout">
|
||||
<div class="rg_left">
|
||||
<p>新用户注册</p>
|
||||
<p>USER REGISTER</p>
|
||||
</div>
|
||||
<div class="rg_center">
|
||||
<div class="rg_form">
|
||||
<form action="#" method="post">
|
||||
<table>
|
||||
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
|
||||
<!--for属性与ID属性对应规定 label 绑定到哪个表单元素。-->
|
||||
<td class="td_left"><label for="username">用户名</label> </td>
|
||||
<td class="td_right"><input type="text" name="username" id="username"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td_left"><label for="password">姓名</label> </td>
|
||||
<td class="td_right"><input type="password" name="password" id="password"> </td>
|
||||
</tr>
|
||||
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
|
||||
<td class="td_left"><label for="email">身份证号</label> </td>
|
||||
<td class="td_right"><input type="email" name="email" id="email"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td_left"><label for="name">密码</label> </td>
|
||||
<td class="td_right"><input type="text" name="name" id="name"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td_left"><label for="tel">再次输入密码</label> </td>
|
||||
<td class="td_right"><input type="text" name="tel" id="tel"> </td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
<tr>
|
||||
<td colspan="2" align="center" class="bt_center">
|
||||
<input type="submit" value="注册" id="btn_sub">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rg_right">
|
||||
<p><a href="LoginUI.html">返回登录界面</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,288 @@
|
||||
/*-----------------------------------*\
|
||||
#style.css
|
||||
\*-----------------------------------*/
|
||||
|
||||
/**
|
||||
* copyright 2022 codewithsadee
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#CUSTOM PROPERTY
|
||||
\*-----------------------------------*/
|
||||
|
||||
:root {
|
||||
|
||||
/**
|
||||
* colors
|
||||
*/
|
||||
|
||||
--medium-slate-blue: hsl(240, 73%, 65%);
|
||||
--space-cadet_10: hsl(226, 54%, 26%, 0.1);
|
||||
--space-cadet: hsl(226, 54%, 26%);
|
||||
--ghost-white: hsl(227, 69%, 97%);
|
||||
--cool-gray: hsl(226, 19%, 63%);
|
||||
--cultured: hsl(0, 0%, 95%);
|
||||
--white: hsl(0, 0%, 100%);
|
||||
|
||||
/**
|
||||
* typography
|
||||
*/
|
||||
|
||||
--ff-dm-sans: 'Roboto', sans-serif;
|
||||
--ff-helvetica: 'Helvetica', sans-serif;
|
||||
|
||||
--fs-1: 3rem;
|
||||
--fs-2: 2.4rem;
|
||||
--fs-3: 1.5rem;
|
||||
--fs-4: 1.2rem;
|
||||
|
||||
--fw-500: 500;
|
||||
--fw-600: 600;
|
||||
--fw-700: 700;
|
||||
|
||||
/**
|
||||
* shadow
|
||||
*/
|
||||
|
||||
--shadow: 1px 1px 3px hsla(0, 0%, 0%, 0.15);
|
||||
|
||||
/**
|
||||
* radius
|
||||
*/
|
||||
|
||||
--radius-5: 5px;
|
||||
--radius-15: 15px;
|
||||
|
||||
/**
|
||||
* transition
|
||||
*/
|
||||
|
||||
--transition-1: 0.25s ease;
|
||||
--transition-2: 1s ease;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#RESET
|
||||
\*-----------------------------------*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span,
|
||||
data { display: block; }
|
||||
|
||||
img { height: auto; }
|
||||
|
||||
table,
|
||||
tbody,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--ff-dm-sans);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--ghost-white);
|
||||
color: var(--cool-gray);
|
||||
font-size: 1.6rem;
|
||||
padding-inline: 15px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#REUSED STYLE
|
||||
\*-----------------------------------*/
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.balance-card,
|
||||
.chart-card {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
border-radius: var(--radius-10);
|
||||
}
|
||||
|
||||
.text { font-size: var(--fs-3); }
|
||||
|
||||
.h2 { font-size: var(--fs-2); }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#BALANCE CARD
|
||||
\*-----------------------------------*/
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
max-width: 540px;
|
||||
margin-inline: 100px;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
background-color: var(--medium-slate-blue);
|
||||
color: var(--white);
|
||||
justify-content: space-between;
|
||||
margin-block-end: 15px;
|
||||
}
|
||||
|
||||
.balance-card .text {
|
||||
font-weight: unset;
|
||||
margin-block-end: 5px;
|
||||
}
|
||||
|
||||
.balance-card .h2 { font-weight: var(--fw-700); }
|
||||
|
||||
.balance-card .logo { width: 60px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#CHART CARD
|
||||
\*-----------------------------------*/
|
||||
|
||||
.chart-card {
|
||||
position: relative;
|
||||
margin-right: 30px;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.chart-card .h2 {
|
||||
color: var(--space-cadet);
|
||||
font-weight: var(--fw-500);
|
||||
margin-block-end: 50px;
|
||||
}
|
||||
|
||||
.chart-card .card-table {
|
||||
display: block;
|
||||
padding-block-end: 24px;
|
||||
border-block-end: 1px solid var(--space-cadet_10);
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
|
||||
.chart-card .table-body {
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chart-card .table-row {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
min-height: calc(150px + 31px);
|
||||
}
|
||||
|
||||
.chart-card .table-heading {
|
||||
color: var(--space-cadet);
|
||||
font-family: var(--ff-helvetica);
|
||||
font-size: var(--fs-4);
|
||||
}
|
||||
|
||||
.chart-card .table-data {
|
||||
min-width: 20px;
|
||||
height: 100%;
|
||||
background-color: var(--cultured);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chart-card .chart-bar {
|
||||
background-color: var(--medium-slate-blue);
|
||||
height: 100%;
|
||||
transform-origin: bottom;
|
||||
transition: transform var(--transition-2);
|
||||
}
|
||||
|
||||
.chart-card .chart-bar:hover { opacity: 0.75; }
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--white);
|
||||
color: var(--space-cadet);
|
||||
font-family: var(--ff-helvetica);
|
||||
font-weight: var(--fw-600);
|
||||
padding: 8px;
|
||||
border: 1px solid var(--cultured);
|
||||
border-radius: var(--radius-5);
|
||||
box-shadow: var(--shadow);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: var(--transition-1);
|
||||
}
|
||||
|
||||
.tooltip.active { opacity: 1; }
|
||||
|
||||
.chart-card .wrapper {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-card .meta-value {
|
||||
color: var(--space-cadet);
|
||||
font-weight: var(--fw-500);
|
||||
margin-block-start: 5px;
|
||||
}
|
||||
|
||||
.chart-card .meta-value:not(.small) { font-size: var(--fs-1); }
|
||||
|
||||
.chart-card .card-meta:last-child {
|
||||
align-self: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.piechart{
|
||||
margin-top: -180px;
|
||||
left: 600px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: fixed;
|
||||
padding: 5px;
|
||||
border-radius: var(--radius-10);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#MEDIA QUERIES
|
||||
\*-----------------------------------*/
|
||||
|
||||
/**
|
||||
* responsive for large than 768px screen
|
||||
*/
|
||||
|
||||
|
After Width: | Height: | Size: 710 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 313 KiB |
|
After Width: | Height: | Size: 148 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 533 KiB |
|
After Width: | Height: | Size: 740 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 409 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 516 B |
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,20 @@
|
||||
[
|
||||
{
|
||||
"server": "shanghai",
|
||||
"stat": "busy",
|
||||
"amount": 70,
|
||||
"recentTime":70
|
||||
},
|
||||
{
|
||||
"server": "changsha",
|
||||
"stat": "busy",
|
||||
"amount": 50,
|
||||
"recentTime": 1300
|
||||
},
|
||||
{
|
||||
"server": "beijing",
|
||||
"stat": "busy",
|
||||
"amount": 56,
|
||||
"recentTime": 70
|
||||
}
|
||||
]
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,149 @@
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* import json data
|
||||
*/
|
||||
|
||||
import data from './data.json' assert { type: 'json' };
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> select all DOM elements
|
||||
*/
|
||||
|
||||
const tooltip = document.querySelector("[data-tooltip]");
|
||||
const chartBars = document.querySelectorAll("[data-chart-bar]");
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* add event on element
|
||||
*/
|
||||
|
||||
const addEventOnElem = function (elem, type, callback) {
|
||||
if (elem.length > 1) {
|
||||
for (let i = 0; i < elem.length; i++) {
|
||||
elem[i].addEventListener(type, callback);
|
||||
}
|
||||
} else {
|
||||
elem.addEventListener(type, callback);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> get the max day amount from data
|
||||
*/
|
||||
|
||||
let maxDayAmount = 0;
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].amount > maxDayAmount) {
|
||||
maxDayAmount = data[i].amount;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> get chart bars height as array
|
||||
* -> set the height of all bars in chart
|
||||
*/
|
||||
|
||||
const setChartBarsHeight = function (height) {
|
||||
for (let i = 0; i < height.length; i++) {
|
||||
chartBars[i].style.transform = `scaleY(${height[i] / 100})`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> get the day amount from data
|
||||
* -> find the percentage of every number
|
||||
* -> push all number in chartBarsHeight
|
||||
*/
|
||||
|
||||
const charBarsHeight = [];
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const dayAmount = data[i].amount;
|
||||
const percentOfNum = dayAmount / maxDayAmount * 100;
|
||||
charBarsHeight.push(percentOfNum);
|
||||
}
|
||||
|
||||
setChartBarsHeight(charBarsHeight);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> get top, left, and chart bar width
|
||||
* -> get tooltip height
|
||||
* -> set the gap between chart bar and tooltip
|
||||
* -> set the tooltip position
|
||||
*/
|
||||
|
||||
const setTooltipPos = function (top, left, chartBarWidth) {
|
||||
const tooltipHeight = tooltip.offsetHeight;
|
||||
const gap = 8;
|
||||
|
||||
tooltip.style.top = `${top - tooltipHeight - gap}px`;
|
||||
tooltip.style.left = `${left + chartBarWidth / 2}px`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* when chart bar is hover
|
||||
* -> add active class in tooltip
|
||||
* -> get chart bar top position from window
|
||||
* -> get chart bar left position from window
|
||||
* -> get chart bar width
|
||||
* -> call setTooltipPos and pass the chart bar top,
|
||||
* left position and width
|
||||
*/
|
||||
|
||||
const chartBarOnHover = function () {
|
||||
tooltip.classList.add("active");
|
||||
|
||||
const barTopPos = this.getBoundingClientRect().top;
|
||||
const barLeftPos = this.getBoundingClientRect().left;
|
||||
const barWidth = this.offsetWidth;
|
||||
|
||||
setTooltipPos(barTopPos, barLeftPos, barWidth);
|
||||
}
|
||||
|
||||
addEventOnElem(chartBars, "mouseover", chartBarOnHover);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> hide tooltip when leave cursor from chart bar
|
||||
*/
|
||||
|
||||
const hideTooltip = function () {
|
||||
tooltip.classList.remove("active");
|
||||
}
|
||||
|
||||
addEventOnElem(chartBars, "mouseleave", hideTooltip);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* -> add tooltip value when hover on any bar chart
|
||||
*/
|
||||
|
||||
const addTooltipValue = function () {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].server === this.dataset.chartBar) {
|
||||
tooltip.innerHTML = data[i].amount.toString();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addEventOnElem(chartBars, "mouseover", addTooltipValue);
|
||||
@ -0,0 +1,138 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* 公共区域版心宽度一样，左右居中 */
|
||||
|
||||
|
||||
/* .header-wrap {
|
||||
width: 1100px;
|
||||
height: 62px;
|
||||
margin: 0 auto;
|
||||
} */
|
||||
|
||||
.header_con {
|
||||
width: 1002px;
|
||||
height: 100px;
|
||||
/* background: pink; */
|
||||
/* 左右居中 */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header_con h1 {
|
||||
width: 604px;
|
||||
height: 66px;
|
||||
/* background: orange; */
|
||||
float: left;
|
||||
padding: 34px 0 0 20px;
|
||||
}
|
||||
|
||||
.header_con form {
|
||||
width: 227px;
|
||||
height: 61px;
|
||||
/* background: orangered; */
|
||||
float: left;
|
||||
padding-top: 39px;
|
||||
padding-right: 21px;
|
||||
}
|
||||
|
||||
.header_con .search {
|
||||
width: 195px;
|
||||
height: 26px;
|
||||
background: #f1f1f1;
|
||||
border: 1px solid #e5e5e5;
|
||||
/* 清除右侧边框 */
|
||||
border-right: none;
|
||||
float: left;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.header_con .btn {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: #f1f1f1 url("../images/search_03.jpg") no-repeat center;
|
||||
}
|
||||
|
||||
.header_con form div {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-left: none;
|
||||
float: left;
|
||||
/* 给btn套盒子的时候也要加浮动 */
|
||||
}
|
||||
|
||||
#nav {
|
||||
height: 58px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#nav .nav_con {
|
||||
width: 1002px;
|
||||
height: 58px;
|
||||
background: black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* 导航横向排列 */
|
||||
|
||||
#nav .nav_con li {
|
||||
width: 498px;
|
||||
height: 58px;
|
||||
float: left;
|
||||
background: black;
|
||||
/* 左右居中 */
|
||||
text-align: center;
|
||||
/* 上下居中 */
|
||||
line-height: 58px;
|
||||
border-left: 1px solid #4a4a4a;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav_con li a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.margin-left {
|
||||
margin-left: 25px;
|
||||
border-left: none!important;
|
||||
}
|
||||
|
||||
|
||||
/* 公共样式的footer */
|
||||
|
||||
.footer_con {
|
||||
height: 82px;
|
||||
/* background: #cccccc; */
|
||||
}
|
||||
|
||||
.footer_con .footer_l {
|
||||
height: 58px;
|
||||
float: left;
|
||||
/* background: red; */
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.footer_con .footer_l a {
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
color: #868686;
|
||||
border-right: 1px solid #868686;
|
||||
/* padding:字体和边框的距离哈 */
|
||||
padding: 0 7px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.footer_con .footer_l .footer-right {
|
||||
border-right: none!important;
|
||||
}
|
||||
|
||||
.footer_con .footer_r {
|
||||
height: 57px;
|
||||
color: #8a8a8a;
|
||||
font-size: 12px;
|
||||
padding-top: 25px;
|
||||
/* background: pink; */
|
||||
padding-right: 21px;
|
||||
float: right;
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
.loader {
|
||||
background: #000;
|
||||
background: radial-gradient(#222, #000);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.loader-inner {
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loader-line-wrap {
|
||||
animation:
|
||||
spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
|
||||
;
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: 50% 100%;
|
||||
width: 100px;
|
||||
}
|
||||
.loader-line {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
|
||||
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
|
||||
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
|
||||
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
|
||||
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
|
||||
|
||||
.loader-line-wrap:nth-child(1) .loader-line {
|
||||
border-color: hsl(0, 80%, 60%);
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
top: 7px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(2) .loader-line {
|
||||
border-color: hsl(60, 80%, 60%);
|
||||
height: 76px;
|
||||
width: 76px;
|
||||
top: 14px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(3) .loader-line {
|
||||
border-color: hsl(120, 80%, 60%);
|
||||
height: 62px;
|
||||
width: 62px;
|
||||
top: 21px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(4) .loader-line {
|
||||
border-color: hsl(180, 80%, 60%);
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
top: 28px;
|
||||
}
|
||||
.loader-line-wrap:nth-child(5) .loader-line {
|
||||
border-color: hsl(240, 80%, 60%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%, 15% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* 重置样式表 */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* 统一页面文本 */
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
font-family: "微软雅黑";
|
||||
}
|
||||
|
||||
|
||||
/* 清除列表符号 */
|
||||
|
||||
ul,
|
||||
ol,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
/* 清除下划线 */
|
||||
|
||||
u,
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* 清除倾斜 */
|
||||
|
||||
i,
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* 清除加粗 */
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* 清除文本默认大小和加粗 */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* 边框清零 */
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
/* 清除聚焦时候的边框 */
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,206 @@
|
||||
div{
|
||||
display: block;
|
||||
}
|
||||
.h1, .h2, .h3, .h4, .h5, .h6, a, abbr, body, cite, dd, dl, dt, h1, h2, h3, h4, h5, h6, iframe, input, li, object, ol, p, pre, span, ul {
|
||||
font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
ul, li, ol, dl, dt, dd {
|
||||
list-style: none;
|
||||
}
|
||||
div, figure, footer, header, hgroup, html, iframe, img, mark, menu, nav, object, section, span, table, tr, td, th, tbody, tfoot, thead, video {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.my_msg_list{
|
||||
position: fixed;
|
||||
margin-top: 50px;
|
||||
width: 1400px;
|
||||
min-height: 400px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.my_msg_list_view{
|
||||
position: relative;
|
||||
margin-left: 100px;
|
||||
background-color: #fff;
|
||||
padding: 24px 16px;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);
|
||||
min-height: 520px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.my_msg_list_box{
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.my_msg_list_con{
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.my_msg_list_title{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #3d3d3d;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fr{
|
||||
float: right!important;
|
||||
display: inline-block;
|
||||
color: #4a90e2;
|
||||
}
|
||||
.line{
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
margin: 2px 12px;
|
||||
border-right: 1px solid #979797;
|
||||
}
|
||||
|
||||
.msg_list{
|
||||
padding: 0 0 0 15px;
|
||||
min-height: 370px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.msg_list_ul{
|
||||
font-size: 14px;
|
||||
vertical-align: baseline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.msg_list_ul_li{
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.msg_type{
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 5px;
|
||||
color: #4d4d4d;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.msg_info_box{
|
||||
width: 100%;
|
||||
color: #4d4d4d;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.msg_title{
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.options-f{
|
||||
width: 16%;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
margin-top: -20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.msg_delete{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
float: right;
|
||||
}
|
||||
.msg_content{
|
||||
margin-top: 15px;
|
||||
margin-bottom: -16px;
|
||||
padding: 15px;
|
||||
background-color: #f7f7f7;
|
||||
font-size: 14px;
|
||||
color: #4d4d4d;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.page-box{
|
||||
width: 100%;
|
||||
margin: 32px 0 20px;
|
||||
text-align: center;
|
||||
border-top-color: initial;
|
||||
border-right-color: initial;
|
||||
border-bottom-color: initial;
|
||||
border-left-color: initial;
|
||||
}
|
||||
.ule {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lie {
|
||||
width: 23%;
|
||||
display: inline-block;
|
||||
font: 13px sans-serif;
|
||||
}
|
||||
.lie a {
|
||||
display: block;
|
||||
color: rgb(39, 124, 184);
|
||||
text-align: center;
|
||||
padding: 14px 70px;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*鼠标移动到选项上修改背景颜色 */
|
||||
.lie a:hover {
|
||||
background-color: #e3e3f5;
|
||||
}
|
||||
.ula {
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lia {
|
||||
width: 23%;
|
||||
display: inline-block;
|
||||
font: 13px sans-serif;
|
||||
}
|
||||
.lia a {
|
||||
display: block;
|
||||
font-size: larger;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: 14px 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*鼠标移动到选项上修改背景颜色 */
|
||||
.lia a:hover {
|
||||
background-color: #b7b7b7;
|
||||
}
|
||||
.square{
|
||||
width:200px;
|
||||
|
||||
height:5px;
|
||||
|
||||
border:1px solid transparent;
|
||||
|
||||
background: #06b81a;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in new issue