<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AdminLTE 3 | Dashboard</title>
<link rel="stylesheet" href="../public/plugins/fontawesome-free-6.1.2-web/css/all.min.css" />
<link rel="stylesheet" href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" />
<link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="dist/css/adminlte.min.css" /> -->
<!-- jQuery -->
<script src="../public/plugins/jquery-1.9.1.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../public/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge("uibutton", $.ui.button);
</script>
<script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>
<style>
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body,
html,
.wrapper {
min-height: 100%;
height: 100%;
}
.content-wrapper {
min-height: calc(100% - (7rem + 2px));
height: auto;
}
[class*="sidebar-dark-"] {
background-color: #343a40;
}
.main-header {
transition: margin-left 0.3s ease-in-out;
margin-left: 250px;
}
.main-sidebar {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: 0;
height: 100vh;
overflow-y: hidden;
z-index: 1038;
}
.main-sidebar,
.main-sidebar::before {
transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
width: 250px;
}
.brand-link {
width: 250px;
border-bottom: 1px solid #4b545c;
text-decoration: none;
}
.brand-link {
display: block;
font-size: 1.25rem;
line-height: 1.5;
padding: 0.8125rem 0.5rem;
transition: width 0.3s ease-in-out;
white-space: nowrap;
}
.brand-link .brand-image {
float: left;
line-height: 0.8;
margin-left: 0.8rem;
margin-right: 0.5rem;
margin-top: -3px;
max-height: 33px;
width: auto;
}
.brand-image {
width: 6.5rem !important;
transition: width 0.3s linear 0.1s;
}
.sidebar {
height: calc(100% - (3.5rem + 1px));
overflow-x: hidden;
overflow-y: initial;
padding-bottom: 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0;
scrollbar-color: #a9a9a9 transparent;
scrollbar-width: none;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: #a9a9a9;
}
.sidebar::-webkit-scrollbar-track {
background-color: transparent;
}
.sidebar::-webkit-scrollbar-corner {
background-color: transparent;
}
.sidebar::-webkit-scrollbar {
width: 0;
}
/* .sidebar:hover {
scrollbar-width: thin;
}
.sidebar:hover::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
} */
.nav-sidebar .nav-item .nav-icon {
margin-left: 0.05rem;
font-size: 1.2rem;
margin-right: 0.2rem;
text-align: center;
width: 1.6rem;
font-size: 1.1rem;
font-weight: 900;
}
.main-sidebar .brand-text,
.nav-sidebar .nav-link p {
transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
}
.nav-sidebar .nav-link p {
display: inline;
margin: 0;
white-space: nowrap;
}
.nav-sidebar .nav-item > .nav-link .right {
transition: -webkit-transform ease-in-out 0.1s;
transition: transform ease-in-out 0.1s;
transition: transform ease-in-out 0.1s, -webkit-transform ease-in-out 0.1s;
}
@media (prefers-reduced-motion: reduce) {
.nav-sidebar .nav-item > .nav-link .right {
transition: none;
}
}
.nav-sidebar .nav-item > .nav-link {
position: relative;
}
.nav-treeview > .nav-item > .nav-link {
color: #c2c7d0;
}
.nav-treeview > .nav-item > .nav-link.active,
.nav-treeview > .nav-item > .nav-link.active:focus,
.nav-treeview > .nav-item > .nav-link.active:hover {
background-color: rgba(255, 255, 255, 0.9);
color: #343a40;
}
.nav-treeview > .nav-item .nav-item > .nav-link.active,
.nav-treeview > .nav-item .nav-item > .nav-link.active:focus,
.nav-treeview > .nav-item .nav-item > .nav-link.active:hover {
background-color: rgba(188, 187, 187, 0.9);
color: #343a40;
}
.nav-sidebar .nav-item > .nav-link .right {
transition: -webkit-transform ease-in-out 0.3s;
transition: transform ease-in-out 0.3s;
transition: transform ease-in-out 0.3s, -webkit-transform ease-in-out 0.3s;
}
.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right {
position: absolute;
right: 1rem;
top: 0.7rem;
}
.nav-sidebar .nav-treeview {
display: none;
list-style: none;
padding: 0;
}
.nav-sidebar .menu-is-opening > .nav-link i.right,
.nav-sidebar .menu-is-opening > .nav-link svg.right,
.nav-sidebar .menu-open > .nav-link i.right,
.nav-sidebar .menu-open > .nav-link svg.right {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.content-wrapper,
.main-footer,
.main-header {
transition: margin-left 0.3s ease-in-out;
margin-left: 250px;
}
.main-header {
border-bottom: 1px solid #dee2e6;
z-index: 1034;
padding: 0.5rem 0.5rem;
}
.main-footer {
background-color: #fff;
border-top: 1px solid #dee2e6;
color: #869099;
padding: 1rem;
}
.sidebar-mini .nav-sidebar,
.sidebar-mini .nav-sidebar .nav-link,
.sidebar-mini .nav-sidebar > .nav-header {
white-space: nowrap;
}
.shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.sidebar-collapse .brand-image {
width: 3.5rem !important;
transition: width 0.3s linear 0.1s;
}
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-footer,
.sidebar-mini.sidebar-collapse .main-header {
margin-left: 4.6rem !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar::before {
margin-left: 0;
width: 4.6rem;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover,
.sidebar-mini.sidebar-collapse .main-sidebar:hover::before {
width: 250px;
}
.sidebar-mini.sidebar-collapse .main-sidebar {
overflow-x: hidden;
}
.sidebar-mini.sidebar-collapse .brand-link {
width: 4.6rem;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link {
width: 250px;
transition: width 0.3s ease-in-out;
}
.sidebar-mini.sidebar-collapse .brand-image {
width: 3.5rem !important;
transition: width 0.3s linear 0.1s;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-image {
width: 6.5rem !important;
}
.sidebar-collapse.sidebar-mini .main-sidebar .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-md .main-sidebar .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-xs .main-sidebar .nav-sidebar .nav-link {
width: 3.6rem;
}
.sidebar-collapse.sidebar-mini .main-sidebar:hover .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-md .main-sidebar:hover .nav-sidebar .nav-link,
.sidebar-collapse.sidebar-mini-xs .main-sidebar:hover .nav-sidebar .nav-link {
width: auto;
}
.sidebar-mini.sidebar-collapse .sidebar .nav-sidebar .nav-link p {
width: 0;
transition: width 0.3s ease-in-out;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar .nav-sidebar .nav-link p {
width: auto;
}
.sidebar-mini.sidebar-collapse .brand-text,
.sidebar-mini.sidebar-collapse .sidebar .nav-sidebar .nav-link p {
margin-left: -10px;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar .nav-sidebar .nav-link p {
visibility: visible;
margin-left: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.card-info.card-outline {
border-top: 3px solid #17a2b8;
}
.card-primary.card-outline {
border-top: 3px solid #007bff;
}
</style>
<script>
$(function () {
$('[data-toggle="sub-menu"]').on("click", function () {
$(this).parent().toggleClass("menu-open");
$(this).next().slideToggle();
});
$('[data-toggle="pushmenu"]').on("click", function () {
$("body").toggleClass("sidebar-collapse");
});
$('[data-toggle="fullscreen"]').on("click", function () {
console.log(top.document.getElementById("contentFrame").document, parent.document);
return;
const dom = window.frames["content"].document;
if ($(this).attr("data-full") == "0") {
if (dom.body.requestFullscreen) {
dom.body.requestFullscreen();
} else if (dom.body.webkitRequestFullScreen) {
dom.body.webkitRequestFullScreen();
} else if (dom.body.mozRequestFullScreen) {
dom.body.mozRequestFullScreen();
} else if (dom.body.msRequestFullscreen) {
dom.body.msRequestFullscreen();
}
$(this).attr("data-full", "1");
} else {
if (dom.exitFullscreen) {
dom.exitFullscreen();
} else if (dom.webkitCancelFullScreen) {
dom.webkitCancelFullScreen();
} else if (dom.mozCancelFullScreen) {
dom.mozCancelFullScreen();
} else if (dom.msExitFullscreen) {
dom.msExitFullscreen();
}
$(this).attr("data-full", "0");
}
});
});
</script>
</head>
<body class="hold-transition sidebar-mini layout-fixed" style="background-color: #e1e8ef; height: 100%">
<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-light bg-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="pushmenu"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">name</a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" data-toggle="fullscreen" data-full="0" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#SettingModal">
<i class="fa-solid fa-gear"></i>
</a>
</li>
<li class="nav-item">
<div class="dropdown mt-2">
<a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle text-dark" data-bs-toggle="dropdown">
<strong>Admin</strong>
</a>
<ul class="dropdown-menu dropdown-menu-end text-small">
<li><a class="dropdown-item" href="#">Sign out</a></li>
<li><a class="dropdown-item" href="#">切换为中文显示</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar d-flex flex-column flex-shrink-0 p-0 text-white bg-dark">
<a class="brand-link d-flex align-items-center">
<img src="../public/images/logo.png" class="brand-image m-0 me-2" />
<span class="brand-text text-white">Sidebar</span>
</a>
<div class="sidebar text-white" style="overflow-y: auto">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="nav-icon fas fa-bell"></i>
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light active">
<i class="nav-icon fas fa-arrow-up-right-dots"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" data-toggle="sub-menu">
<i class="nav-icon fas fa-desktop"></i>
<p>Orders<i class="fas fa-angle-left right"></i></p>
</a>
<ul class="nav nav-treeview" style="display: none">
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="fa-regular fa-circle nav-icon"></i>
<p>menu1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light active" data-toggle="sub-menu">
<i class="fa-regular fa-circle nav-icon"></i>
<p>menu2<i class="fas fa-angle-left right"></i></p>
</a>
<ul class="nav nav-treeview" style="display: none">
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="fa-regular fa-circle nav-icon"></i>
<p>sub menu1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light active">
<i class="fa-regular fa-circle nav-icon"></i>
<p>sub menu2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light">
<i class="fa-regular fa-circle nav-icon"></i>
<p>sub menu2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light">
<i class="fa-regular fa-circle nav-icon"></i>
<p>menu2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="nav-icon fas fa-bell"></i>
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light">
<i class="nav-icon fas fa-bell"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="nav-icon fas fa-bell"></i>
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light active">
<i class="nav-icon fas fa-bell"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" data-toggle="sub-menu">
<i class="nav-icon fas fa-bell"></i>
<p>Orders<i class="fas fa-angle-left right"></i></p>
</a>
<ul class="nav nav-treeview" style="display: none">
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="fa-regular fa-circle nav-icon"></i>
<p>menu1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light active" data-toggle="sub-menu">
<i class="fa-regular fa-circle nav-icon"></i>
<p>menu2<i class="fas fa-angle-left right"></i></p>
</a>
<ul class="nav nav-treeview" style="display: none">
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="fa-regular fa-file nav-icon"></i>
<p>sub menu1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light active">
<i class="fa-regular fa-file nav-icon"></i>
<p>sub menu2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light">
<i class="fa-regular fa-file nav-icon"></i>
<p>sub menu2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light">
<i class="fa-regular fa-circle nav-icon"></i>
<p>menu2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light" aria-current="page">
<i class="nav-icon fas fa-bell"></i>
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-light">
<i class="nav-icon fas fa-bell"></i>
<p>Dashboard</p>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row my-3">
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card card-info card-outline">
<div class="card-header">
<p class="card-title">
<i class="fas fa-chart-pie mr-1"></i>
text5
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-5">
<h2 style="font-weight: bolder">70%</h2>
<p class="mt-4 mb-1">text6</p>
<p>1109 pcs</p>
</div>
<div class="col-7" id="echart1" style="height: 150px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer clearfix p-2 mt-auto">
<div class="float-end"><b>Copyright © 2022 </b></div>
</footer>
<div class="modal fade" tabindex="-1" id="SettingModal" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Setting</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="post" action="">
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text">语言</span>
<select name="language" class="form-control">
<option value="zh_CN">中文</option>
<option value="en">英文</option>
</select>
</div>
<div class="input-group">
<span class="input-group-text">侧边栏</span>
<select name="sidebar" class="form-control">
<option value="off">折叠</option>
<option value="on">展开</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
标签：main,bootstrap,width,nav,rem,导航条,link,sidebar,模板 From： https://www.cnblogs.com/caroline2016/p/16905460.html