feature: 添加静态文件
This commit is contained in:
zhengxinonly
@@ -0,0 +1,8 @@
|
||||
<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="/static/admin/css/admin.css" />
|
||||
<link rel="stylesheet" href="/static/admin/css/admin.dark.css" />
|
||||
<link rel="stylesheet" href="/static/admin/css/variables.css" />
|
||||
<link rel="stylesheet" href="/static/admin/css/reset.css" />
|
||||
<!-- 依 赖 脚 本 -->
|
||||
<script src="/static/component/layui/layui.js"></script>
|
||||
<script src="/static/component/pear/pear.js"></script>
|
||||
@@ -0,0 +1,132 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<title>Pear Admin 4.0</title>
|
||||
{% include 'includes/script.html' %}
|
||||
</head>
|
||||
<!-- 结 构 代 码 -->
|
||||
<body class="layui-layout-body pear-admin">
|
||||
<!-- 布 局 框 架 -->
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<!-- 顶 部 样 式 -->
|
||||
<div class="layui-header">
|
||||
<!-- 菜 单 顶 部 -->
|
||||
<div class="layui-logo">
|
||||
<!-- 图 标 -->
|
||||
<img class="logo" />
|
||||
<!-- 标 题 -->
|
||||
<span class="title"></span>
|
||||
</div>
|
||||
<!-- 顶 部 左 侧 功 能 -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="collapse layui-nav-item">
|
||||
<a href="#" class="layui-icon layui-icon-shrink-right"></a>
|
||||
</li>
|
||||
<li class="refresh layui-nav-item">
|
||||
<a
|
||||
href="#"
|
||||
class="layui-icon layui-icon-refresh-1"
|
||||
loading="600"
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 多 系 统 菜 单 -->
|
||||
<div id="control" class="layui-layout-control"></div>
|
||||
<!-- 顶 部 右 侧 菜 单 -->
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item layui-hide-xs">
|
||||
<a href="#" class="menuSearch layui-icon layui-icon-search"></a>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-hide-xs message"></li>
|
||||
<li class="layui-nav-item layui-hide-xs">
|
||||
<a
|
||||
href="#"
|
||||
class="fullScreen layui-icon layui-icon-screen-full"
|
||||
></a>
|
||||
</li>
|
||||
<li class="layui-nav-item user">
|
||||
<!-- 头 像 -->
|
||||
<a class="layui-icon layui-icon-username" href="javascript:;"></a>
|
||||
<!-- 功 能 菜 单 -->
|
||||
<dl class="layui-nav-child">
|
||||
<dd>
|
||||
<a
|
||||
user-menu-url="view/system/person.html"
|
||||
user-menu-id="5555"
|
||||
user-menu-title="基本资料"
|
||||
>基本资料</a
|
||||
>
|
||||
</dd>
|
||||
<dd><a href="javascript:void(0);" class="logout">注销登录</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<!-- 主 题 配 置 -->
|
||||
<li class="layui-nav-item setting">
|
||||
<a href="#" class="layui-icon layui-icon-more-vertical"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 侧 边 区 域 -->
|
||||
<div class="layui-side layui-bg-black">
|
||||
<!-- 菜 单 顶 部 -->
|
||||
<div class="layui-logo">
|
||||
<!-- 图 标 -->
|
||||
<img class="logo" />
|
||||
<!-- 标 题 -->
|
||||
<span class="title"></span>
|
||||
</div>
|
||||
<!-- 菜 单 内 容 -->
|
||||
<div class="layui-side-scroll">
|
||||
<div id="sideMenu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视 图 页 面 -->
|
||||
<div class="layui-body">
|
||||
<!-- 内 容 页 面 -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div class="layui-footer layui-text"></div>
|
||||
<!-- 遮 盖 层 -->
|
||||
<div class="pear-cover"></div>
|
||||
<!-- 加 载 动 画 -->
|
||||
<div class="loader-wrapper">
|
||||
<!-- 动 画 对 象 -->
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移 动 端 便 捷 操 作 -->
|
||||
<div class="pear-collapsed-pe collapse">
|
||||
<a href="#" class="layui-icon layui-icon-shrink-right"></a>
|
||||
</div>
|
||||
|
||||
<!-- 框 架 初 始 化 -->
|
||||
<script>
|
||||
layui.use(["admin", "jquery", "popup"], function () {
|
||||
var $ = layui.jquery;
|
||||
var admin = layui.admin;
|
||||
var popup = layui.popup;
|
||||
|
||||
admin.setConfigurationPath("/static/config/pear.config.json");
|
||||
|
||||
admin.render();
|
||||
|
||||
admin.logout(function () {
|
||||
popup.success("注销成功", function () {
|
||||
location.href = "./login.html";
|
||||
});
|
||||
|
||||
// 清空 tabs 缓存
|
||||
return new Promise((resolve) => {
|
||||
resolve(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,154 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<title>登录</title>
|
||||
{% include 'includes/script.html' %}
|
||||
<link rel="stylesheet" href="/static/admin/css/other/login.css" />
|
||||
</head>
|
||||
|
||||
<body background="/static/admin/images/background.svg">
|
||||
<form class="layui-form">
|
||||
<div class="demo-login-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value=""
|
||||
lay-verify="required"
|
||||
placeholder="用户名"
|
||||
lay-reqtext="请填写用户名"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
value=""
|
||||
lay-verify="required"
|
||||
placeholder="密 码"
|
||||
lay-reqtext="请填写密码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="eye"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="captcha"
|
||||
value=""
|
||||
lay-verify="required"
|
||||
placeholder="验证码"
|
||||
lay-reqtext="请填写验证码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px">
|
||||
<img
|
||||
src="https://www.oschina.net/action/user/captcha"
|
||||
onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="remember"
|
||||
lay-skin="primary"
|
||||
title="记住密码"
|
||||
/>
|
||||
<a href="#forget" style="float: right; margin-top: 7px">忘记密码？</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button
|
||||
class="layui-btn layui-btn-fluid"
|
||||
lay-submit
|
||||
lay-filter="demo-login"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
<div class="layui-form-item demo-login-other">
|
||||
<label>社交账号登录</label>
|
||||
<span style="padding: 0 21px 0 6px">
|
||||
<a href="javascript:;">
|
||||
<i
|
||||
class="layui-icon layui-icon-login-qq"
|
||||
style="color: #3492ed"
|
||||
></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i
|
||||
class="layui-icon layui-icon-login-wechat"
|
||||
style="color: #4daf29"
|
||||
></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i
|
||||
class="layui-icon layui-icon-login-weibo"
|
||||
style="color: #cf1900"
|
||||
></i
|
||||
></a>
|
||||
</span>
|
||||
或 <a href="#reg">注册帐号</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
layui.use(["form", "button", "popup"], function () {
|
||||
var form = layui.form;
|
||||
var button = layui.button;
|
||||
var popup = layui.popup;
|
||||
|
||||
// 登 录 提 交
|
||||
form.on("submit(login)", function (data) {
|
||||
/// 验证
|
||||
|
||||
/// 登录
|
||||
|
||||
/// 动画
|
||||
button.load({
|
||||
elem: ".login",
|
||||
time: 1500,
|
||||
done: function () {
|
||||
popup.success("登录成功", function () {
|
||||
location.href = "./index.html";
|
||||
});
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<title>注册</title>
|
||||
{% include 'includes/script.html' %}
|
||||
<link rel="stylesheet" href="/static/admin/css/other/register.css" />
|
||||
</head>
|
||||
|
||||
<body background="/static/admin/images/background.svg">
|
||||
<form class="layui-form">
|
||||
<div class="demo-reg-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-cellphone"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="cellphone"
|
||||
value=""
|
||||
lay-verify="required|phone"
|
||||
placeholder="手机号"
|
||||
lay-reqtext="请填写手机号"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
id="reg-cellphone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 11px">
|
||||
<button
|
||||
type="button"
|
||||
class="layui-btn layui-btn-fluid layui-btn-primary"
|
||||
lay-on="reg-get-vercode"
|
||||
>
|
||||
获取验证码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="vercode"
|
||||
value=""
|
||||
lay-verify="required"
|
||||
placeholder="验证码"
|
||||
lay-reqtext="请填写验证码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
value=""
|
||||
lay-verify="required"
|
||||
placeholder="密码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
id="reg-password"
|
||||
lay-affix="eye"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
value=""
|
||||
lay-verify="required|confirmPassword"
|
||||
placeholder="确认密码"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="eye"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="nickname"
|
||||
value=""
|
||||
lay-verify="required"
|
||||
placeholder="昵称"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="clear"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="agreement"
|
||||
lay-verify="required"
|
||||
lay-skin="primary"
|
||||
title="同意"
|
||||
/>
|
||||
<a
|
||||
href="#terms"
|
||||
target="_blank"
|
||||
style="position: relative; top: 6px; left: -15px"
|
||||
>
|
||||
<ins>用户协议</ins>
|
||||
</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button
|
||||
class="layui-btn layui-btn-fluid"
|
||||
lay-submit
|
||||
lay-filter="demo-reg"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
</div>
|
||||
<div class="layui-form-item demo-reg-other">
|
||||
<label>社交账号注册</label>
|
||||
<span style="padding: 0 21px 0 6px">
|
||||
<a href="javascript:;"
|
||||
><i
|
||||
class="layui-icon layui-icon-login-qq"
|
||||
style="color: #3492ed"
|
||||
></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i
|
||||
class="layui-icon layui-icon-login-wechat"
|
||||
style="color: #4daf29"
|
||||
></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i
|
||||
class="layui-icon layui-icon-login-weibo"
|
||||
style="color: #cf1900"
|
||||
></i
|
||||
></a>
|
||||
</span>
|
||||
<a href="#login">登录已有帐号</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(["form", "button", "popup"], function () {
|
||||
var form = layui.form;
|
||||
var button = layui.button;
|
||||
var popup = layui.popup;
|
||||
|
||||
// 登 录 提 交
|
||||
form.on("submit(login)", function (data) {
|
||||
/// 验证
|
||||
|
||||
/// 登录
|
||||
|
||||
/// 动画
|
||||
button.load({
|
||||
elem: ".login",
|
||||
time: 1500,
|
||||
done: function () {
|
||||
popup.success("登录成功", function () {
|
||||
location.href = "index.html";
|
||||
});
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,615 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>控制后台</title>
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/admin/css/other/analysis.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">今日访问</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div
|
||||
class="layui-col-xs8 layui-col-md8 top-panel-number"
|
||||
style="color: #28333e"
|
||||
id="value1"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg
|
||||
t="1688201011061"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1411"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<path
|
||||
d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
|
||||
fill="#D8F4EE"
|
||||
p-id="1412"
|
||||
></path>
|
||||
<path
|
||||
d="M691.8656 639.1296a257.4592 257.4592 0 0 1-52.736 52.736l60.928 60.928a37.2992 37.2992 0 0 0 52.736-52.736l-60.928-60.928z"
|
||||
fill="#75E8CD"
|
||||
p-id="1413"
|
||||
></path>
|
||||
<path
|
||||
d="M486.4 716.8a230.4 230.4 0 1 0 0-460.8 230.4 230.4 0 0 0 0 460.8z m130.9696-302.5152a16.64 16.64 0 0 1 0.3584 23.5008l-115.84 119.296a16.5376 16.5376 0 0 1-3.84 3.3792 16.64 16.64 0 0 1-22.144-3.5072l-67.328-60.5184-47.232 48.64a16.64 16.64 0 0 1-23.8336-23.168l56.32-57.984a16.6912 16.6912 0 0 1 24.8832-3.072l69.5552 62.5152 105.6-108.7232a16.6144 16.6144 0 0 1 23.5008-0.3584z"
|
||||
fill="#01C3A3"
|
||||
p-id="1414"
|
||||
></path>
|
||||
<path
|
||||
d="M341.257236 436.535528m-7.948259-21.87091l0 0q-7.948258-21.87091-29.819168-13.922652l0 0q-21.87091 7.948258-13.922652 29.819169l0 0q7.948258 21.87091 29.819168 13.922651l0 0q21.87091-7.948258 13.922652-29.819168Z"
|
||||
fill="#FFFFFF"
|
||||
p-id="1415"
|
||||
></path>
|
||||
<path
|
||||
d="M331.4432 370.7392a17.2544 17.2544 0 0 0 29.3888-3.584l5.9648-13.5168a26.112 26.112 0 0 1 14.9504-13.9264l30.1056-10.9312a15.2576 15.2576 0 0 0 8.8832-20.224 15.0272 15.0272 0 0 0-18.4576-8.6016c-47.7696 15.4368-67.0976 29.3888-73.9584 57.5232a15.6672 15.6672 0 0 0 3.1488 13.2608z"
|
||||
fill="#FFFFFF"
|
||||
p-id="1416"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">提交次数</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div
|
||||
class="layui-col-xs8 layui-col-md8 top-panel-number"
|
||||
style="color: #28333e"
|
||||
id="value2"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg
|
||||
t="1688201051691"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1560"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<path
|
||||
d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
|
||||
fill="#D8F4EE"
|
||||
p-id="1561"
|
||||
></path>
|
||||
<path
|
||||
d="M257.92 354.304a12.8 12.8 0 0 1 12.8-12.8h51.2a12.8 12.8 0 1 1 0 25.6h-51.2a12.8 12.8 0 0 1-12.8-12.8zM258.048 485.6832a12.8 12.8 0 0 1 12.8512-12.7488l51.2 0.1536a12.8 12.8 0 1 1-0.0768 25.6l-51.2-0.1536a12.8 12.8 0 0 1-12.7488-12.8512zM257.8432 613.5808c0-7.296 5.76-13.184 12.8-13.184l51.2 0.1024c7.0912 0 12.8 5.9392 12.8 13.2096a13.0048 13.0048 0 0 1-12.8256 13.1584l-51.2-0.1024a13.0048 13.0048 0 0 1-12.8-13.184z"
|
||||
fill="#75E8CD"
|
||||
p-id="1562"
|
||||
></path>
|
||||
<path
|
||||
d="M281.6 307.2a51.2 51.2 0 0 1 51.2-51.2h307.2a51.2 51.2 0 0 1 51.2 51.2 51.2 51.2 0 0 1 51.2 51.2v358.4a51.2 51.2 0 0 1-51.2 51.2H332.8a51.2 51.2 0 0 1-51.2-51.2v-76.8h51.2a25.6 25.6 0 0 0 0-51.2h-51.2v-76.8h51.2a25.6 25.6 0 0 0 0-51.2h-51.2v-76.8h51.2a25.6 25.6 0 0 0 0-51.2h-51.2v-25.6z m51.2 409.6c-9.3184 0-18.0736-2.4832-25.6-6.8352V716.8a25.6 25.6 0 0 0 25.6 25.6h358.4a25.6 25.6 0 0 0 25.6-25.6V358.4a25.6 25.6 0 0 0-25.6-25.6v332.8a51.2 51.2 0 0 1-51.2 51.2H332.8z"
|
||||
fill="#01C3A3"
|
||||
p-id="1563"
|
||||
></path>
|
||||
<path
|
||||
d="M358.4 293.2224c0-6.4 5.1968-11.6224 11.6224-11.6224h209.4592a11.648 11.648 0 0 1 0 23.296h-209.4592a11.648 11.648 0 0 1-11.6224-11.6736zM614.4 293.2224a11.648 11.648 0 0 1 23.2704 0 11.648 11.648 0 0 1-23.2704 0z"
|
||||
fill="#FFFFFF"
|
||||
p-id="1564"
|
||||
></path>
|
||||
<path
|
||||
d="M426.7264 401.9712a13.568 13.568 0 0 1 5.8368-17.9456l26.624-13.952a12.8512 12.8512 0 0 1 17.5616 5.7088l18.0224 36.3264-50.3552 25.5488-17.6896-35.6864z m23.552 47.5136l84.7872 170.8544-5.0432 2.6624c-3.8144 1.9968-4.1984 7.296-0.6656 9.5232l55.3472 35.2256c3.5072 2.2272 8.2688-0.256 8.576-4.5056l4.7616-66.7136a5.3248 5.3248 0 0 0-7.9104-5.0432l-5.0176 2.6624-84.48-170.24-50.3552 25.5744z"
|
||||
fill="#75E8CD"
|
||||
p-id="1565"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">下载数量</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div
|
||||
class="layui-col-xs8 layui-col-md8 top-panel-number"
|
||||
style="color: #28333e"
|
||||
id="value3"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg
|
||||
t="1688201066494"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1709"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<path
|
||||
d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
|
||||
fill="#D8F4EE"
|
||||
p-id="1710"
|
||||
></path>
|
||||
<path
|
||||
d="M349.056 373.2992L461.1072 512l-112.0512 138.7008C311.9872 696.6272 342.4 768 399.0528 768h225.8944c56.6528 0 87.0656-71.3728 49.9968-117.2992L562.8928 512l112.0512-138.7008c37.0688-45.9008 6.656-117.2992-49.9968-117.2992h-225.8944c-56.6528 0-87.0656 71.3984-49.9968 117.2992z m134.2464 123.904l-67.7376-84.4288c-22.2208-27.7248 22.5024-38.9632 54.7328-17.6896 29.1328 19.2 53.5808 18.1504 62.2336 17.7664l2.2272-0.0768c1.1264 0 5.7088-1.1008 12.1344-2.6368 25.9072-6.1952 81.8944-19.584 64.0768 2.6368l-67.7376 84.4544c-15.7952 19.712-44.1344 19.712-59.9296 0z"
|
||||
fill="#01C99A"
|
||||
p-id="1711"
|
||||
></path>
|
||||
<path
|
||||
d="M256 294.4a38.4 38.4 0 0 1 38.4-38.4h435.2a38.4 38.4 0 0 1 0 76.8h-435.2a38.4 38.4 0 0 1-38.4-38.4zM768 729.6a38.4 38.4 0 0 1-38.4 38.4h-435.2a38.4 38.4 0 0 1 0-76.8h435.2a38.4 38.4 0 0 1 38.4 38.4z"
|
||||
fill="#75E8CD"
|
||||
p-id="1712"
|
||||
></path>
|
||||
<path
|
||||
d="M402.7392 614.9632m7.7068-10.219845l42.926877-56.924536q7.7068-10.219845 17.926645-2.513045l0 0q10.219845 7.7068 2.513045 17.926645l-42.926877 56.924536q-7.7068 10.219845-17.926645 2.513045l0 0q-10.219845-7.7068-2.513045-17.926645Z"
|
||||
fill="#FFFFFF"
|
||||
p-id="1713"
|
||||
></path>
|
||||
<path
|
||||
d="M419.824586 634.79804m-7.7068 10.219845l0 0q-7.7068 10.219845-17.926645 2.513044l0 0q-10.219845-7.7068-2.513045-17.926645l0 0q7.7068-10.219845 17.926645-2.513044l0 0q10.219845 7.7068 2.513045 17.926645Z"
|
||||
fill="#FFFFFF"
|
||||
p-id="1714"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">流量统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div
|
||||
class="layui-col-xs8 layui-col-md8 top-panel-number"
|
||||
style="color: #28333e"
|
||||
id="value4"
|
||||
>
|
||||
0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<svg
|
||||
t="1688201079590"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1858"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<path
|
||||
d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
|
||||
fill="#D8F4EE"
|
||||
p-id="1859"
|
||||
></path>
|
||||
<path
|
||||
d="M327.936 280.3712a24.3712 24.3712 0 0 1 48.7424 0v48.768a24.3712 24.3712 0 1 1-48.768 0v-48.768z m195.0464 0h-121.9072v73.1392a24.3712 24.3712 0 0 1-24.3968 24.3968H327.936a24.3712 24.3712 0 0 1-24.3712-24.3968v-73.1392h-24.3712A48.768 48.768 0 0 0 230.4 329.1392v390.0928C230.4 746.1632 252.2368 768 279.168 768H644.864c3.0208 0 5.9904-0.256 8.8832-0.8192a146.304 146.304 0 1 1 39.8592-289.7408v-148.3008a48.768 48.768 0 0 0-48.7424-48.768h-24.3968v73.1392a24.3712 24.3712 0 0 1-24.3712 24.3968H547.328a24.3712 24.3712 0 0 1-24.3712-24.3968v-73.1392zM571.7248 256a24.3712 24.3712 0 0 0-24.3712 24.3712v48.768a24.3712 24.3712 0 0 0 48.768 0v-48.768a24.3712 24.3712 0 0 0-24.3968-24.3712z m-292.5568 182.8608c0-6.7328 5.4528-12.1856 12.1856-12.1856h316.928a12.1856 12.1856 0 1 1 0 24.3712h-316.928a12.1856 12.1856 0 0 1-12.1856-12.1856z m12.1856 109.7216a12.1856 12.1856 0 1 1 0-24.3968h170.6752a12.1856 12.1856 0 1 1 0 24.3968H291.328z m-12.1856 85.3248c0-6.7328 5.4528-12.1856 12.1856-12.1856h170.6752a12.1856 12.1856 0 1 1 0 24.3712H291.328a12.1856 12.1856 0 0 1-12.1856-12.1856z"
|
||||
fill="#01C3A3"
|
||||
p-id="1860"
|
||||
></path>
|
||||
<path
|
||||
d="M675.968 742.4a115.2 115.2 0 1 0 0-230.4 115.2 115.2 0 0 0 0 230.4z m25.7024-101.8112l30.208 30.2336a8.704 8.704 0 0 1-12.288 12.3136l-30.2336-30.2336a52.224 52.224 0 1 1 12.3136-12.288z m-7.7568-30.2848a34.816 34.816 0 1 1-69.6576 0 34.816 34.816 0 0 1 69.632 0z"
|
||||
fill="#75E8CD"
|
||||
p-id="1861"
|
||||
></path>
|
||||
<path
|
||||
d="M637.568 627.2a12.8 12.8 0 0 1 25.6 0 12.8 12.8 0 1 1-25.6 0z"
|
||||
fill="#FFFFFF"
|
||||
p-id="1862"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col layui-col-md9">
|
||||
<div
|
||||
id="echarts-records"
|
||||
style="min-height: 400px; padding: 10px"
|
||||
></div>
|
||||
</div>
|
||||
<div class="layui-col layui-col-md3">
|
||||
<div style="padding: 40px 0px 0px 50px">
|
||||
<div class="layui-timeline">
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-timeline-axis layui-icon-circle"
|
||||
></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-timeline-axis layui-icon-circle"
|
||||
></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-timeline-axis layui-icon-circle"
|
||||
></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-timeline-axis layui-icon-circle"
|
||||
></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-timeline-axis layui-icon-circle"
|
||||
></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-timeline-axis layui-icon-circle"
|
||||
></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-timeline-item">
|
||||
<i
|
||||
class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"
|
||||
></i
|
||||
>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">
|
||||
最初，Layui 在爱与期许中孵化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md9">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<dl class="dynamic-status">
|
||||
<dd>
|
||||
<div class="dynamic-status-img">
|
||||
<a href="javascript:;"
|
||||
><img
|
||||
style="width: 32px; height: 32px; border-radius: 50px"
|
||||
src="/static/admin/images/avatar.jpg"
|
||||
/></a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
就眠儀式 在
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>讨论区</a
|
||||
>
|
||||
回答了
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>夏娜</a
|
||||
>
|
||||
提出得问题
|
||||
</p>
|
||||
<span>昨天</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="dynamic-status-img">
|
||||
<a href="javascript:;"
|
||||
><img
|
||||
style="width: 32px; height: 32px; border-radius: 50px"
|
||||
src="/static/admin/images/avatar.jpg"
|
||||
/></a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
就眠儀式 在
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>讨论区</a
|
||||
>
|
||||
回答了
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>夏娜</a
|
||||
>
|
||||
提出得问题
|
||||
</p>
|
||||
<span>昨天</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="dynamic-status-img">
|
||||
<a href="javascript:;"
|
||||
><img
|
||||
style="width: 32px; height: 32px; border-radius: 50px"
|
||||
src="/static/admin/images/avatar.jpg"
|
||||
/></a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
就眠儀式 在
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>讨论区</a
|
||||
>
|
||||
回答了
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>夏娜</a
|
||||
>
|
||||
提出得问题
|
||||
</p>
|
||||
<span>昨天</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="dynamic-status-img">
|
||||
<a href="javascript:;"
|
||||
><img
|
||||
style="width: 32px; height: 32px; border-radius: 50px"
|
||||
src="/static/admin/images/avatar.jpg"
|
||||
/></a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
就眠儀式 在
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>讨论区</a
|
||||
>
|
||||
回答了
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>夏娜</a
|
||||
>
|
||||
提出得问题
|
||||
</p>
|
||||
<span>昨天</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd>
|
||||
<div class="dynamic-status-img">
|
||||
<a href="javascript:;"
|
||||
><img
|
||||
style="width: 32px; height: 32px; border-radius: 50px"
|
||||
src="/static/admin/images/avatar.jpg"
|
||||
/></a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
就眠儀式 在
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>讨论区</a
|
||||
>
|
||||
回答了
|
||||
<a
|
||||
style="color: var(--global-primary-color)"
|
||||
lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui"
|
||||
>夏娜</a
|
||||
>
|
||||
提出得问题
|
||||
</p>
|
||||
<span>昨天</span>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div
|
||||
class="layui-card-body"
|
||||
style="
|
||||
flex-direction: column;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
focusable="false"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
width="6em"
|
||||
height="6em"
|
||||
fill="#16baaa"
|
||||
aria-hidden="true"
|
||||
viewBox="64 64 896 896"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
fill="#16baaa"
|
||||
></path>
|
||||
<path
|
||||
d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zM288 421a48.01 48.01 0 0196 0 48.01 48.01 0 01-96 0zm224 272c-85.5 0-155.6-67.3-160-151.6a8 8 0 018-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 589.9 461.5 629 512 629s92.1-39.1 95.8-88.6c.3-4.2 3.9-7.4 8.1-7.4H664a8 8 0 018 8.4C667.6 625.7 597.5 693 512 693zm176-224a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
fill="#e6f7ff"
|
||||
></path>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm376 112h-48.1c-4.2 0-7.8 3.2-8.1 7.4-3.7 49.5-45.3 88.6-95.8 88.6s-92-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4zm-24-112a48 48 0 1096 0 48 48 0 10-96 0z"
|
||||
fill="#16baaa"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>Hello Word</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">寄语</div>
|
||||
<div class="layui-card-body" style="line-height: 40px">
|
||||
原想将澎湃的爱平平稳稳放置你手心，奈何我徒有一股蛮劲，只顾向你跑去，一个不稳跌的满身脏兮兮。试图爬起的我，
|
||||
心想你会不会笑我 " 献爱献的这样笨拙, 怎么不知避开爱里的埋伏 "
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
layui.use(["layer", "echarts", "element", "count"], function () {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
element = layui.element,
|
||||
count = layui.count,
|
||||
echarts = layui.echarts;
|
||||
|
||||
count.up("value1", {
|
||||
time: 4000,
|
||||
num: 440.34,
|
||||
bit: 2,
|
||||
regulator: 50,
|
||||
});
|
||||
|
||||
count.up("value2", {
|
||||
time: 4000,
|
||||
num: 236.3,
|
||||
bit: 2,
|
||||
regulator: 50,
|
||||
});
|
||||
|
||||
count.up("value3", {
|
||||
time: 4000,
|
||||
num: 634.43,
|
||||
bit: 2,
|
||||
regulator: 50,
|
||||
});
|
||||
|
||||
count.up("value4", {
|
||||
time: 4000,
|
||||
bit: 2,
|
||||
num: 373.23,
|
||||
regulator: 50,
|
||||
});
|
||||
|
||||
var echartsRecords = echarts.init(
|
||||
document.getElementById("echarts-records"),
|
||||
"walden",
|
||||
);
|
||||
|
||||
const colorList = [
|
||||
"#9E87FF",
|
||||
"#73DDFF",
|
||||
"#fe9a8b",
|
||||
"#F56948",
|
||||
"#9E87FF",
|
||||
];
|
||||
var option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat",
|
||||
"Sun",
|
||||
"Bai",
|
||||
"Fan",
|
||||
"Yue",
|
||||
"Qian",
|
||||
],
|
||||
splitLine: false,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: false,
|
||||
},
|
||||
grid: {
|
||||
x: "50px",
|
||||
y: "50px",
|
||||
x2: "50px",
|
||||
y2: "50px",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130, 50, 40, 70, 100],
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#16baaa",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
echartsRecords.setOption(option);
|
||||
|
||||
window.onresize = function () {
|
||||
echartsRecords.resize();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,647 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>数据分析</title>
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/admin/css/other/console.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md8">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">快捷菜单</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home1"
|
||||
data-title="主页"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-home"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">主页</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home2"
|
||||
data-title="弹层"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-camera"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">弹层</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home2"
|
||||
data-title="聊天"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-star"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">聊天</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home3"
|
||||
data-title="相机"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-camera"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">相机</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home4"
|
||||
data-title="表单"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-console"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">表单</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home5"
|
||||
data-title="安全"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-auz"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">安全</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home6"
|
||||
data-title="公告"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-cart"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">公告</span>
|
||||
</div>
|
||||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||||
<div
|
||||
class="shortcut-menu"
|
||||
data-id="home7"
|
||||
data-title="更多"
|
||||
data-url="http://www.baidu.com"
|
||||
>
|
||||
<i class="layui-icon layui-icon-app"></i>
|
||||
</div>
|
||||
<span class="shortcut-menu-label">更多</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">代办任务</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||||
<div class="deputy">
|
||||
<div class="deputy-label">待审评论</div>
|
||||
<div class="deputy-count">21</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||||
<div class="deputy">
|
||||
<div class="deputy-label">待审帖子</div>
|
||||
<div class="deputy-count">32</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||||
<div class="deputy">
|
||||
<div class="deputy-label">待审文章</div>
|
||||
<div class="deputy-count">14</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||||
<div class="deputy">
|
||||
<div class="deputy-label">待审用户</div>
|
||||
<div class="deputy-count">63</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div
|
||||
class="layui-tab custom-tab layui-tab-brief"
|
||||
lay-filter="docDemoTabBrief"
|
||||
>
|
||||
<div id="echarts-records-1" style="min-height: 400px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div
|
||||
class="layui-card-body"
|
||||
style="padding-top: 15px; padding-bottom: 15px"
|
||||
>
|
||||
<table class="layui-hide" id="ID-table-demo-data"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">留言板</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="message-board">
|
||||
<li>
|
||||
<p>要不要作为我的家人，搬来我家。</p>
|
||||
<span>12月25日 19:92</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
|
||||
<span>4月30日 22:43</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>夏天真的来了，尽管它还有些犹豫。</p>
|
||||
<span>4月30日 22:43</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
|
||||
<span>4月30日 22:43</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
|
||||
<span>4月30日 22:43</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
|
||||
<span>5月12日 01:25</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
|
||||
<span>6月11日 15:33</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>一切都在不可避免的走向庸俗。</p>
|
||||
<span>2月09日 13:40</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>路上没有灯火的时候，就点亮自己的头颅。</p>
|
||||
<span>3月11日 12:30</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>
|
||||
我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂
|
||||
</p>
|
||||
<span>4月30日 22:43</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>接近，是我对一切的态度，是我对一切态度的距离</p>
|
||||
<span>6月11日 15:33</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
|
||||
<span>2月09日 13:40</span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-id="1"
|
||||
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
||||
>回复</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
layui.use(
|
||||
["layer", "echarts", "carousel", "element", "table"],
|
||||
function () {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
element = layui.element,
|
||||
echarts = layui.echarts,
|
||||
table = layui.table,
|
||||
carousel = layui.carousel;
|
||||
|
||||
var inst = table.render({
|
||||
elem: "#ID-table-demo-data",
|
||||
cols: [
|
||||
[
|
||||
{ field: "id", title: "ID", width: 80, sort: true },
|
||||
{ field: "username", title: "用户", width: 120 },
|
||||
{ field: "sex", title: "性别", width: 80 },
|
||||
{ field: "sign", title: "签名", minWidth: 160 },
|
||||
{ field: "city", title: "城市", width: 80 },
|
||||
{ field: "experience", title: "状态", width: 80, sort: true },
|
||||
],
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: "10001",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
{
|
||||
id: "10002",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
{
|
||||
id: "10003",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
{
|
||||
id: "10004",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
{
|
||||
id: "10005",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
{
|
||||
id: "10006",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
{
|
||||
id: "10007",
|
||||
username: "就眠儀式",
|
||||
sex: "男",
|
||||
city: "山东",
|
||||
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
||||
experience: "在线",
|
||||
},
|
||||
],
|
||||
page: false,
|
||||
});
|
||||
|
||||
var echartsRecordsOne = echarts.init(
|
||||
document.getElementById("echarts-records-1"),
|
||||
"walden",
|
||||
);
|
||||
|
||||
$("body").on("click", "[data-url]", function () {
|
||||
parent.layui.tab.addTabOnlyByElem("content", {
|
||||
id: $(this).attr("data-id"),
|
||||
title: $(this).attr("data-title"),
|
||||
url: $(this).attr("data-url"),
|
||||
close: true,
|
||||
});
|
||||
});
|
||||
|
||||
let color = [
|
||||
"#0090FF",
|
||||
"#36CE9E",
|
||||
"#FFC005",
|
||||
"#FF515A",
|
||||
"#8B5CFF",
|
||||
"#00CA69",
|
||||
];
|
||||
let echartData = [
|
||||
{
|
||||
name: "1",
|
||||
value1: 100,
|
||||
value2: 233,
|
||||
},
|
||||
{
|
||||
name: "2",
|
||||
value1: 138,
|
||||
value2: 233,
|
||||
},
|
||||
{
|
||||
name: "3",
|
||||
value1: 350,
|
||||
value2: 200,
|
||||
},
|
||||
{
|
||||
name: "4",
|
||||
value1: 173,
|
||||
value2: 180,
|
||||
},
|
||||
{
|
||||
name: "5",
|
||||
value1: 180,
|
||||
value2: 199,
|
||||
},
|
||||
{
|
||||
name: "6",
|
||||
value1: 150,
|
||||
value2: 233,
|
||||
},
|
||||
{
|
||||
name: "7",
|
||||
value1: 180,
|
||||
value2: 210,
|
||||
},
|
||||
{
|
||||
name: "8",
|
||||
value1: 230,
|
||||
value2: 180,
|
||||
},
|
||||
];
|
||||
|
||||
let xAxisData = echartData.map((v) => v.name);
|
||||
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
||||
let yAxisData1 = echartData.map((v) => v.value1);
|
||||
// [100, 138, 350, 173, 180, 150, 180, 230]
|
||||
let yAxisData2 = echartData.map((v) => v.value2);
|
||||
// [233, 233, 200, 180, 199, 233, 210, 180]
|
||||
const hexToRgba = (hex, opacity) => {
|
||||
let rgbaColor = "";
|
||||
let reg = /^#[\da-f]{6}$/i;
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||||
"0x" + hex.slice(3, 5),
|
||||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||||
}
|
||||
return rgbaColor;
|
||||
};
|
||||
|
||||
optionOne = {
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function (params) {
|
||||
let html = "";
|
||||
params.forEach((v) => {
|
||||
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||||
color[v.componentIndex]
|
||||
};"></span>
|
||||
${v.seriesName}.${v.name}
|
||||
<span style="color:${
|
||||
color[v.componentIndex]
|
||||
};font-weight:700;font-size: 18px">${v.value}</span>
|
||||
万元`;
|
||||
});
|
||||
return html;
|
||||
},
|
||||
extraCssText:
|
||||
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
shadowStyle: {
|
||||
color: "#ffffff",
|
||||
shadowColor: "rgba(225,225,225,1)",
|
||||
shadowBlur: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: "{value}月",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9",
|
||||
},
|
||||
},
|
||||
data: xAxisData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位：万千瓦时",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#666",
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#666",
|
||||
fontSize: 12,
|
||||
lineHeight: 40,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#E9E9E9",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "2018",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3),
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1),
|
||||
},
|
||||
],
|
||||
false,
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: yAxisData1,
|
||||
},
|
||||
{
|
||||
name: "2019",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3),
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1),
|
||||
},
|
||||
],
|
||||
false,
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: yAxisData2,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
echartsRecordsOne.setOption(optionOne);
|
||||
|
||||
window.onresize = function () {
|
||||
echartsRecordsOne.resize();
|
||||
};
|
||||
},
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user