parent
248291e067
commit
182a04ca6b
@ -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: 36 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: 740 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 6.2 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: 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;
|
||||
}
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 854 KiB |
@ -1,58 +0,0 @@
|
||||
<html>
|
||||
<head><link href="style.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<div class="body">
|
||||
<table>
|
||||
<body background="favorite-1.jpg">
|
||||
<caption>
|
||||
<div class="font3">
|
||||
<p>
|
||||
<i>The Nginx Operation System OS
|
||||
</i>
|
||||
</p>
|
||||
</div>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">状态</th>
|
||||
<th scope="col">服务器名称</th>
|
||||
<th scope="col">距上一次响应时间</th>
|
||||
<th scope="col">当前服务器状态</th>
|
||||
<th scope="col">返回报文报头</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td scope="row"><svg width="50" height="50">
|
||||
<rect width="100%" height="100%" fill="lightgreen" />
|
||||
</svg>
|
||||
</td>
|
||||
<td align="center">北京</td>
|
||||
<td align="center">70ms</td>
|
||||
<td align="center">正常</td>
|
||||
<td align="center">TCP</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row"><svg width="50" height="50">
|
||||
<rect width="100%" height="100%" fill="red" />
|
||||
</svg></td>
|
||||
<td align="center">上海</td>
|
||||
<td align="center">1300ms</td>
|
||||
<td align="center">受损</td>
|
||||
<td align="center">TCP</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td scope="row"><svg width="50" height="50">
|
||||
<rect width="100%" height="100%" fill="tan" />
|
||||
</svg></td>
|
||||
<td align="center">长沙</td>
|
||||
<td align="center">70ms</td>
|
||||
<td align="center">繁忙</td>
|
||||
<td align="center">TCP</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</body>
|
||||
</table>
|
||||
</div>
|
||||
</html>
|
||||
@ -1,19 +0,0 @@
|
||||
.font3 > p {
|
||||
font-size: 35px;
|
||||
text-shadow: 5px 5px 5px black, 0px 0px 2px black;
|
||||
color: rgb(47, 7, 243);
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh; /* 重点一 */
|
||||
margin: 0 auto;
|
||||
background-image: url(cg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; /* 重点二 */
|
||||
overflow: auto;
|
||||
}
|
||||
.font2 > p {
|
||||
font-size: 20px;
|
||||
text-shadow: 5px 5px 5px black, 0px 0px 2px black;
|
||||
color: rgb(245, 244, 250);
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
/* spacing */
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 3px solid purple;
|
||||
}
|
||||
table th{
|
||||
border:1px solid black;
|
||||
background-color:#71c1fb;
|
||||
width:100px;
|
||||
height:20px;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
table td{
|
||||
|
||||
border:1px solid #A6C1E4;
|
||||
|
||||
text-align:center;
|
||||
|
||||
height:15px;
|
||||
|
||||
padding-top:5px;
|
||||
|
||||
font-size:12px;
|
||||
|
||||
}
|
||||
|
||||
thead th:nth-child(1) {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
thead th:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
thead th:nth-child(3) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
thead th:nth-child(4) {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 20px;
|
||||
}
|
||||
.font3 > p {
|
||||
font-size: 40px;
|
||||
text-shadow: 5px 5px 5px black, 0px 0px 2px black;
|
||||
color: rgb(54, 15, 229);
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh; /* 重点一 */
|
||||
margin: 0 auto;
|
||||
background-image: url(cg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; /* 重点二 */
|
||||
overflow: auto;
|
||||
}
|
||||
Loading…
Reference in new issue