后台管理仪表盘界面效果-html代码-BFW代码库

代码语言：html
代码描述：后台管理仪表盘界面效果，基于aqua
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/aqua.min.css">
<style>
body {
  min-height: 100vh;
  margin: 0;
  font-size: 14px;
  color: var(--secondary-color-darkest);
}

:root {
  --secondary-color: hsl(240, 56%, 98%);
  --secondary-color-darker: hsl(240, 56%, 90%);
  --secondary-color-darkest: hsl(243, 24%, 43%);
  --info-color-darker: rgb(51, 42, 124);
  --info-color-lighter: rgb(92, 95, 178);
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 48px;
  margin: 12px;
}

.dashboard-sidenav {
  display: grid;
  grid-template-rows: repeat(3, auto);
  justify-items: center;
  color: white;
  background: var(--info-color-darker);
  border-radius: 30px;
}

.logo {
  padding: 36px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.nav-icon-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.nav-icon-list__item {
  padding: 36px;
}
.nav-icon-list__item:first-child {
  padding-top: 0;
}

.logout {
  padding: 36px;
}

.welcome-banner {
  padding: 18px 36px;
  color: white;
  background: var(--warning-color-darker);
  border-radius: 20px;
}

.section-titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0;
}

.section-title {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  font-size: 18px;
}

.nav-btns {
  --divider-length: 0;
  margin-left: 24px;
}
.nav-btns .btn {
  padding: 9px 0;
  line-height: 1;
}
.nav-btns .btn:first-child {
  padding-left: 15px;
  padding-right: 3px;
}
.nav-btns .btn:last-child {
  padding-left: 3px;
  padding-right: 15px;
}

.month {
  padding: 9px 18px;
  color: var(--secondary-color-darkest);
}

.time-list {
  display: grid;
  grid-template-columns: repeat(7, auto);
  column-gap: 21px;
  padding: 18px 0;
  border: 1px solid var(--secondary-color-lighter);
  border-left: none;
  border-right: none;
  list-style-type: none;
}
.time-list__item {
  display: grid;
  grid-template-rows: repeat(3, auto);
  justify-items: center;
  padding: 16px 12px;
  border-radius: 20px;
}
.time-list__item.active {
  color: white;
  background: var(--danger-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.time-list__item .day {
  margin-bottom: 18px;
}
.time-list__item .day-number {
  margin-bottom: 8px;
}
.time-list__item .day-dot {
  width: 6px;
  height: 6px;
  background: var(--dot-color, currentColor);
  border-radius: 50%;
}

.weeks-option {
  display: flex;
}
.weeks-option__item:not(:last-child) {
  margin-right: 21px;
}
.weeks-option__item:not(.active) {
  opacity: 0.5;
}

.junk-list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 30px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.junk-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 24px;
  border: 1px solid var(--secondary-color-lighter);
  border-radius: 20px;
}
.junk-list__item .junk-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--junk-color);
  border-radius: 10px;
}
.junk-list__item .junk-name {
  margin-top: 18px;
  white-space: nowrap;
}
.junk-list__item .junk-size {
  margin-top: 9px;
  font-size: 18px;
  white-space: nowrap;
}

.monitor-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.monitor-list__item {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  padding: 15px 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.monitor-list__item .monitor-data {
  padding: 18px 0;
}
.monitor-list__item .monitor-data .monitor-type {
  font-weight: bold;
  white-space: nowrap;
  margin: 0 40px 18px 0;
}
.monitor-list__item .monitor-gauge {
  padding: 0 0 0 40px;
  border-left: 1px solid var(--secondary-color-lighter);
}
.monitor-list__item .monitor-gauge .gauge {
  --gauge-color-lighter: var(--secondary-color);
  --text-color: var(--secondary-color-darkest);
  width: 70px;
  height: 70px;
}
.monitor-list__item .monitor-gauge .gauge::before {
  width: 87%;
  height: 87%;
  content: counter(value) "%";
}
.monitor-list__item.active {
  color: white;
  background: var(--info-color-darker);
}
.monitor-list__item.active .monitor-gauge {
  border-left-color: var(--info-color-lighter);
}
.monitor-list__item.active .gauge {
  --bg-color: var(--info-color-darker);
  --gauge-color-lighter: var(--info-color-lighter);
  color: white;
}

.dashboard-others {
  padding: 18px 48px;
  background: var(--secondary-color);
  border-radius: 30px;
}

.function-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.function-list__item {
  padding: 4px;
  background: white;
  border-radius: 15px;
}
.function-list__item .function {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  color: white;
  background: var(--function-color);
  border-radius: 15px;
}
.function-list__item .function-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.function-list__item .function-data {
  display: flex;
  justify-content: space-between;
  padding: 30px 16px 21px 16px;
}
.function-list__item .function-name {
  margin-right: 22px;
  white-space: nowrap;
}
.function-list__item .function-switch {
  --switch-ball-color: var(--function-color);
  --switch-checked-color: var(--function-color);
  --border-color: var(--function-color);
  --switch-hover-color: transparent;
  --switch-disabled-checked-color: transparent;
}
.function-list__item .function-switch:checked {
  --border-color: var(--function-color);
}
.function-list__item.update-function .function-icon {
  color: var(--secondary-color-darker);
  background: white;
}
.function-list__item.update-function .function-menu {
  color: var(--secondary-color-darker);
}
.function-list__item.update-function .function-switch {
  --switch-ball-color: var(--secondary-color-darker);
  --switch-checked-color: var(--secondary-color-darker);
  --border-color: var(--secondary-color-darker);
  --switch-hover-color: transparent;
  --switch-disabled-checked-color: transparent;
}
.function-list__item.update-function .function-switch:checked {
  --border-color: var(--secondary-color-darker);
}

.statistics {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.statistics .progress-data {
  display: flex;
  justify-content: space-between;
}
.statistics .progress-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.statistics .progress-weekday {
  margin-bottom: 14px;
}
.statistics .progress-rate {
  font-size: 18px;
  font-weight: bold;
}
.statistics .progress-list {
  display: grid;
  gap: 40px;
  padding: 30px 0 0 0;
  margin: 0;
  list-style-type: none;
}
.statistics .progress-list__item {
  display: flex;
  align-items: center;
}
.statistics .progress-list__item .weekday-abbr {
  box-sizing: border-box;
  padding-right: 36px;
  max-width: 32px;
}
.statistics .progress-list__item .progress-bar {
  --bar-color: var(--secondary-color);
  width: 300px;
}
.statistics .progress-list__item.active .weekday-abbr {
  color: var(--warning-color);
}
.statistics .progress-list__item.active .progress-bar {
  --progress-color: var(--warning-color);
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<main class="dashboard">
<nav class="dashboard-sidenav">
<a href="#" class="logo">CMPC</a>
<ul class="nav-icon-list">
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716314757" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2469" width="20" height="20">
<path d="M372.2 347.6h329.1c15.1 0 27.4-12.3 27.4-27.4 0-15.1-12.3-27.4-27.4-27.4H372.2c-15.1 0-27.4 12.3-27.4 27.4 0 15.2 12.3 27.4 27.4 27.4zM235.1 457.3h493.6c90.9 0 164.5-73.7 164.5-164.5 0-90.9-73.7-164.5-164.5-164.5v54.8c77.4 14.6 109.7 49.1 109.7 109.7S775 402.5 696.7 402.5H235.1c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.2 27.4 27.4 27.4z m274.3 164.6c-0.1 0-0.1 0 0 0H290c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.3 27.4 27.4 27.4h219.4c30.3 0 54.8 24.6 54.8 54.8 0 30.3-24.6 54.8-54.8 54.8v54.8c60.6 0 109.7-49.1 109.7-109.7-0.1-60.4-49.2-109.5-109.7-109.5z m219.3-109.7H152.8c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.3 27.4 27.4 27.4h543.9c78.3 0 141.7 49.1 141.7 109.7s-46.9 109.7-164.5 109.7v54.9h54.8c90.9 0 164.5-73.7 164.5-164.5 0-91-73.6-164.6-164.5-164.6z" p-id="2470"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716413875" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5091" width="20" height="20" fill="white">
<path d="M935.6192 68.266667 88.3808 68.266667C49.0592 68.266667 17.066667 100.8064 17.066667 140.8l0 554.666667c0 39.994667 31.991467 72.533333 71.314133 72.533333L473.6 768l0 112.424533L298.666667 880.424533c-20.795733 0-37.6544 16.858667-37.6544 37.6544S277.8688 955.733333 298.666667 955.733333l426.666667 0c20.795733 0 37.6544-16.858667 37.6544-37.6544S746.129067 880.424533 725.333333 880.424533L550.4 880.424533 550.4 768l385.2192 0C974.941867 768 1006.933333 735.461333 1006.933333 695.466667L1006.933333 140.8C1006.933333 100.8064 974.941867 68.266667 935.6192 68.266667zM930.133333 691.2 93.866667 691.2 93.866667 145.066667l836.266667 0L930.133333 691.2z" p-id="5092"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716468220" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7384" width="20" height="20">
<path d="M904 875.9H120c-30.9 0-56-25.1-56-56V204.1c0-30.9 25.1-56 56-56h231.6c12.8 0 25.2 4.4 35.2 12.4L509.9 260H904c30.9 0 56 25.1 56 56v503.8c0 31-25.1 56.1-56 56.1z m0-56v28-28zM351.6 204.1H120v615.8h784l0.1-503.8H510c-12.8 0-25.3-4.4-35.3-12.5l-123.1-99.5z" p-id="7385"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716626339" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11970" width="20" height="20">
<path d="M221.5 638.6V117.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v520.8c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v64.3c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V842c47.4-9.6 83-51.5 83-101.7s-35.6-92.1-83-101.7z m-20.7 163.9c-34.3 0-62.3-27.9-62.3-62.3s27.9-62.3 62.3-62.3c34.3 0 62.3 27.9 62.3 62.3s-28 62.3-62.3 62.3zM927 283.8c0-50.2-35.6-92-83-101.7v-64.3c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v64.3c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v520.8c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V385.4c47.4-9.6 83-51.5 83-101.6zM823.3 346c-34.3 0-62.3-27.9-62.3-62.3s27.9-62.3 62.3-62.3c34.3 0 62.3 27.9 62.3 62.3s-28 62.3-62.3 62.3zM532.8 410.3V117.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v292.6c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v292.6c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V613.7c47.4-9.6 83-51.5 83-101.7s-35.7-92-83-101.7z" p-id="11971"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716675382" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12846" width="20" height="20">
<path d="M507.050667 170.666667c85.546667 0 155.178667 61.696 155.178666 137.514666v92.544H351.872V308.181333C351.872 232.362667 421.546667 170.666667 507.050667 170.666667m276.309333 407.978666a21.333333 21.333333 0 0 0 21.333333-21.333333V499.157333c0-52.010667-44.245333-94.293333-99.797333-97.792V308.181333C704.896 208.810667 616.149333 128 507.050667 128 397.952 128 309.205333 208.810667 309.205333 308.181333v93.013334C252.629333 403.669333 207.36 446.464 207.36 499.157333v255.701334C207.36 809.173333 255.317333 853.333333 314.24 853.333333h383.488C756.693333 853.333333 804.693333 809.173333 804.693333 754.858667v-69.546667a21.333333 21.333333 0 0 0-42.666666 0v69.546667c0 30.805333-28.842667 55.808-64.298667 55.808H314.24C278.826667 810.666667 250.026667 785.664 250.026667 754.858667V499.157333c0-30.762667 28.8-55.765333 64.213333-55.765333h383.488c35.456 0 64.298667 25.002667 64.298667 55.765333v58.154667a21.333333 21.333333 0 0 0 21.333333 21.333333" p-id="12847"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716717590" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13969" width="20" height="20">
<path d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z" fill="" p-id="13970"></path>
</svg></a>
</li>
</ul>
<a href="#" class="logout">
<svg t="1585716806344" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18154" width="20" height="20">
<path d="M398.933333 896h-151.466666C181.333333 896 128 842.666667 128 776.533333V247.466667C128 181.333333 181.333333 128 247.466667 128h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666666h-151.466666c-19.2 0-34.133333 14.933333-34.133334 34.133334v531.2c0 19.2 14.933333 34.133333 34.133334 34.133333h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 40.533333-42.666667 40.533333zM663.466667 744.533333c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l160-160-160-160c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l189.866667 189.866666c17.066667 17.066667 17.066667 42.666667 0 59.733334l-189.866667 189.866666c-8.533333 8.533333-19.2 12.8-29.866666 12.8z" p-id="18155"></path>
<path d="M853.333333 554.666667H398.933333c-23.466667 0-42.666667-19.2-42.666666-42.666667s19.2-42.666667 42.666666-42.666667H853.333333c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667z" p-id="18156"></path>
</svg>
</a>
</nav>
<article class="dashboard-content">
<header class="welcome-banner">
<h2>Hello, alphardex!</h2>
<p>Welcome back to Clean My PC</p>
</header>
<section class="section">
<div class="section-titles">
<div class="section-title">
Mar 22-28
<div class="btn-group nav-btns">
<button class="btn btn-danger btn-round">
<svg t="1585663627827" class="arrow-left-icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1157" data-darkreader-inline-fill="" width="20" height="20">
<path d="M629.291 840.832l60.331-60.331-268.501-268.501 268.501-268.501-60.331-60.331-328.832 328.832z" p-id="1158"></path>
</svg></button><button class="btn btn-danger btn-round">
<svg t="1585663663731" class="arrow-right-icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1391" data-darkreader-inline-fill="" width="20" height="20">
<path d="M689.621 512l-328.832-328.832-60.331 60.331 268.501 268.501-268.501 268.501 60.331 60.331z" p-id="1392"></path>
</svg>
</button>
</div>
</div>
<div class="section-subtitle">
<button class="btn btn-secondary btn-round month">
<svg t="1585661389235" fill="currentColor" class="calender-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6514" width="14" height="14">
<path d="M810.666667 981.333333H213.333333c-72.533333 0-128-55.466667-128-128V256c0-72.533333 55.466667-128 128-128h597.333334c72.533333 0 128 55.466667 128 128v597.333333c0 72.533333-55.466667 128-128 128zM213.333333 213.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666666 42.666667h597.333334c25.6 0 42.666667-17.066667 42.666666-42.666667V256c0-25.6-17.066667-42.666667-42.666666-42.666667H213.333333z" p-id="6515"></path>
<path d="M682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V85.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666666 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666666 42.666667zM341.333333 298.666667c-25.6 0-42.666667-17.066667-42.666666-42.666667V85.333333c0-25.6 17.066667-42.666667 42.666666-42.666666s42.666667 17.066667 42.666667 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666667zM896 469.333333H128c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666z" p-id="6516"></path>
</svg>
Month
</button>
</div>
</div>
<ul class="time-list">
<li class="time-list__item">
<div class="day">Mon</div>
<div class="day-number">22</div>
<div class="day-dot" style="--dot-color: var(--warning-color);"></div>
</li>
<li class="time-list__item">
<div class="day">Tue</div>
<div class="day-number">23</div>
<div class="day-dot" style="--dot-color: var(--primary-color);"></div>
</li>
<li class="time-list__item">
<div class="day">Wed</div>
<div class="day-number">24</div>
<div class="day-dot" style="--dot-color: var(--danger-color);"></div>
</li>
<li class="time-list__item active">
<div class="day">Thu</div>
<div class="day-number">25</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item">
<div class="day">Fri</div>
<div class="day-number">26</div>
<div class="day-dot" style="--dot-color: var(--warning-color);"></div>
</li>
<li class="time-list__item">
<div class="day">Sat</div>
<div class="day-number">27</div>
<div class="day-dot" style="--dot-color: var(--danger-color);"></div>
</li>
<li class="time-list__item">
<div class="day">Sun</div>
<div class="day-number">28</div>
<div class="day-dot" style="--dot-color: var(--primary-color);"></div>
</li>
</ul>
</section>
<section class="section">
<div class="section-titles">
<div class="section-title">Weekly Reports</div>
<div class="section-subtitle">
<div class="weeks-option">
<div class="weeks-op.........完整代码请登录后点击上方下载按钮下载查看