Compare commits
No commits in common. '2a6320ca9d999b328a9dda267377d37f91f09a3b' and 'fe1b2cc254b85d97b834ca804687a7aec12e7c1d' have entirely different histories.
2a6320ca9d
...
fe1b2cc254
@ -0,0 +1 @@
|
||||
test
|
||||
@ -1,132 +0,0 @@
|
||||
<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>
|
||||
@ -1,183 +0,0 @@
|
||||
<!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("./assets/images/button.jpg")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,#real_name,#ID,#password,#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 class="ant-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="real_name">姓名</label> </td>
|
||||
<td class="td_right"><input type="text" name="real_name" id="real_name"> </td>
|
||||
</tr>
|
||||
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
|
||||
<td class="td_left"><label for="ID">身份证号</label> </td>
|
||||
<td class="td_right"><input type="text" name="ID" id="ID"> </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>
|
||||
<td class="td_left"><label for="tel">再次输入密码</label> </td>
|
||||
<td class="td_right"><input type="password" 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>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取表单元素
|
||||
var form = document.querySelector('.ant-form');
|
||||
|
||||
// 为表单添加提交事件监听器
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault(); // 阻止表单的默认提交行为
|
||||
|
||||
// 收集表单数据
|
||||
var formData = {
|
||||
//question_kind: document.getElementsByName('question_kind').value,
|
||||
ID:document.getElementById('ID').value,
|
||||
password: document.getElementById('password').value,
|
||||
real_name:document.getElementById('real_name').value,
|
||||
source:"frontend",
|
||||
tel:document.getElementById('tel').value,
|
||||
type:"register_message",
|
||||
username: document.getElementById('username').value,
|
||||
};
|
||||
console.log(formData);
|
||||
fetch('', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData) // 将表单数据转换为JSON字符串
|
||||
})
|
||||
.then(response => response.json()) // 转换响应为JSON
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
alert('反馈成功提交！');
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
alert('提交失败，请稍后重试！');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@ -1,288 +0,0 @@
|
||||
/*-----------------------------------*\
|
||||
#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
|
||||
*/
|
||||
|
||||
|
Before Width: | Height: | Size: 710 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 313 KiB |
|
Before Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 533 KiB |
|
Before Width: | Height: | Size: 740 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 409 KiB |
|
Before Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 204 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 516 B |
|
Before Width: | Height: | Size: 12 KiB |
@ -1,20 +0,0 @@
|
||||
[
|
||||
{
|
||||
"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
@ -1,149 +0,0 @@
|
||||
'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);
|
||||
@ -1,138 +0,0 @@
|
||||
@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: 10px;
|
||||
/* 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;
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
body{
|
||||
background: url("ab.jpg") no-repeat center;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login{
|
||||
color: #988fc7;
|
||||
float: right;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.search-box{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
background:#2f3640;
|
||||
height: 38px;
|
||||
border-radius: 60px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-box:hover > .search-txt{
|
||||
width: 240px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.search-box:hover > .search-btn{
|
||||
background: white;
|
||||
}
|
||||
|
||||
.search-btn{
|
||||
color: #988fc7;
|
||||
float: right;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #2f3640;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.search-txt{
|
||||
border:none;
|
||||
background: none;
|
||||
outline: none;
|
||||
float: left;
|
||||
padding: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: 0.4s;
|
||||
line-height: 40px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
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
@ -1,206 +0,0 @@
|
||||
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:inherit;
|
||||
margin-top: 50px;
|
||||
width: 1300px;
|
||||
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