Compare commits
5 Commits
fe1b2cc254
...
2a6320ca9d
| Author | SHA1 | Date |
|---|---|---|
 lyy
|
2a6320ca9d | 5 months ago |
|
lyy
|
f411754a28 | 5 months ago |
|
lyy
|
b6709de6e0 | 5 months ago |
|
lyy
|
eca93ac7f1 | 5 months ago |
|
lyy
|
048b544f8e | 5 months ago |
@ -1 +0,0 @@
|
|||||||
test
|
|
||||||
@ -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,183 @@
|
|||||||
|
<!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>
|
||||||
@ -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: 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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
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
@ -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: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