css实现蓝色极简后台仪表盘效果代码-html代码-BFW代码库

代码语言：html
所属分类：图表
代码描述：css实现蓝色极简后台仪表盘效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  

  
<style>
/* Vars */

:root {
   --app-sidebar-width: 240px;
   --app-sidebar-min-width: 60px;
   --app-header-height: 60px;
   --app-padding: 1rem;
}

/* Base */

html,
body {
   font-family: Inter, Arial, sans-serif;
   background: #eff4f7;
}

html,
body,
.app-viewport {
   height: 100%;
   margin: 0;
}

.app-viewport.inspect * {
   border: 1px solid red;
}

/* Grid Layout */

.app-viewport * {
   position: relative;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.app-viewport {
   display: grid;
   grid-template-columns: var(--app-sidebar-width) 1fr;
   grid-template-rows: var(--app-header-height) 1fr;
   grid-template-areas:
      "AppSidebar AppHeader"
      "AppSidebar AppMain";
}

.app-header {
   grid-area: AppHeader;
   margin-left: calc(var(--app-sidebar-width) * -1);
   z-index: 2;
}

.app-nav,
.app-header,
.app-branding {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-items: flex-start;
   color: #fff;
}

.app-nav {
   padding: 0 var(--app-padding);
   flex: auto;
}

.app-branding {
   width: var(--app-sidebar-width);
   padding: 0 var(--app-padding);
}

.app-main {
   grid-area: AppMain;
   overflow-y: auto;
   z-index: 1;
   padding: var(--app-padding);
}

.app-sidebar {
   display: grid;
   grid-area: AppSidebar;
   margin-top: var(--app-header-height);
   overflow: hidden;
   overflow-y: auto;
   z-index: 1;
}

.app-sidebar-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
}

.app-sidebar-menu > li > a {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-items: start;
   padding: 5px 0;
}

.app-sidebar-menu > li > a > .menu-icon {
   margin-left: 15px;
}

.app-sidebar-menu > li > a > span {
   margin-left: 10px;
}

/* Color / Presentation Only */

.placeholder {
   display: block;
   height: 1200px;
   background: rgba(0, 0, 0, 0.05);
}

.placeholder:after {
   content: " ";
}

.app-viewport {
   background: #e9ecef;
}

.app-header,
.app-sidebar-header {
   background: #202020;
}

.app-sidebar {
   background: #0d28f2;
   font-size: 15px;
   padding: 20px 0;
}

.app-sidebar-menu > li > a {
   text-decoration: none;
   color: #fff;
   opacity: 0.5;
}

.app-sidebar-menu > li.active > a,
.app-sidebar-menu > li > a:hover {
   opacity: 1;
}

.app-icon {
   font-size: 28px;
   margin-right: 5px;
   font-weight: 500;
}

.app-brand {
   font-size: 130%;
   font-weight: 500;
   line-height: 1.2rem;
}

.app-nav-toggle,
.app-brand {
   color: #fff;
}

/* Responsive */

@media screen and (max-width: 768px) {
   .app-viewport {
      grid-template-columns: var(--app-sidebar-min-width) 1fr;
   }
   
   .app-header {
      margin-left: calc(var(--app-sidebar-min-width) * -1);
   }
   
   .app-icon {
      font-size: 36px;
      margin: 0;
   }
   
   .app-branding {
      width: var(--app-sidebar-min-width);
      padding: 0;
      justify-content: center;
   }
   
   .app-brand {
      display: none;
   }
   
   .app-sidebar-menu > li {
      width: var(--app-sidebar-min-width);
   }
   
   .app-sidebar-menu > li > a {
      display: block;
      text-align: center;
   }
   
   .app-sidebar-menu > li > a > span {
      display: none;
   }
   
   .app-sidebar-menu > li > a > .menu-icon {
      margin: 0;
      padding: 0;
      font-size: 30px;
   }
}

.section {
   display: none;
}

/* Part of Demo Only */

.section h1 {
   font-size: 18px;
}

.section.active {
   display: block;
}

#dashboard-spark1,
#dashboard-spark2,
#dashboard-spark3,
#dashboard-chart {
   padding: 15px 15px 15px 5px;
   background: #fff;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   border-radius: 4px;
   min-height: 400px;
   margin-bottom: 20px;
}

.sparklines {
   display: flex;
   width: 100%;
}

.sparklines > div {
   flex: 1;
}

.sparklines > div#dashboard-spark2 {
   margin: 0 20px 20px;
}

@media screen and (max-width: 768px) {
   .sparklines {
      display: block;
   }
   
   .sparklines > div {
      margin: 0 0 20px !important;
   }
}
</style>




</head>

<body  >
  <div class="app-viewport inspect_">

   <div class="app-header">
      <div class="app-branding">
         <i class="material-icons app-icon">change_history</i>
         <h1 class="app-brand">Backend</h1>
      </div>
      <div class="app-nav">
         <p>Navigation</p>
      </div>
   </div>
   
   <!-- 
   ---- App Content 
   --->
   <div class="app-main">
      
      <!-- 
      ---- Dashboard
      --->
      <div data-page-name="dashboard" class="section">
         <div id="dashboard-chart"></div>
         <div class="sparklines">
            <div id="dashboard-spark1"></div>
            <div id="dashboard-spark2"></div>
            <div id="dashboard-spark3"></div>
         </div>
      </div>
      
      <div data-page-name="not_found" class="section">
         <h1>Not Found</h1>
      </div>

   </div>
   
   <!-- 
   ---- App Sidebar
   --->
   <div class="app-sidebar">

      <ul class="app-sidebar-menu">
         <li class="active">
            <a href="#dashboard">
              <i class="material-icons menu-icon">explore</i>
              <span>Dashboard</span>
            </a>
         </li>
         <li>
            <a href="#payment">
              <i class="material-icons menu-icon">payment</i>
              <span>Bills &amp; Payments</span>
           </a>
         </li>
         <li>
            <a href="#customers">
              <i class="material-icons menu-icon">supervised_user_circle</i>
              <span>Customers</span>
           </a>
         </li>
         <li>
            <a href="#serverlogs">
              <i class="material-icons menu-icon">error_outline</i>
              <span>Server Logs</span>
           </a>
         </li>
      </ul>

   </div>
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/apexcharts.3.35.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.3.4.1.js"></script>
      <script >
var randomizeArray = function (arg) {
  var array = arg.slice();
  var currentIndex = array.length, temporaryValue, randomIndex;
  
  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
};

const payloads = {
   //
   // Dashboard
   //
   dashboard: function() {
      if ($("#dashboard-chart").html().length === 0) {
         (function() {
            var ts2 = 1484418600000;
            var dates = [];
            var spikes = [5, -5, 3, -3, 8, -8];
            for (var i = 0; i < payloads.dataSeries.length; i++) {
               ts2 = ts2 + 86400000;
               var innerArr = [
                  ts2, payloads.dataSeries[i].value
               ];
               dates.push(innerArr);
            }

            var options = {
               chart: {
                  type: "area",
                  stacked: false,
                  height: 400,
                  fontFamily: "Inter, Arial, sans-serif",
                  zoom: {
                     type: "x",
                     enabled: true,
                     autoScaleYaxis: true
                  },
                  toolbar: {
                     tools: {
                        download: true,
                        selection: true,
                        zoom: true,
                        zoomin: true,
                        zoomout: true,
                        pan: true,
                     },
                     autoSelected: 'zoom'
                  }
               },
               dataLabels: {
                  enabled: false
               },
               series: [
                  {
                     name: "XYZ MOTORS",
                     data: dates
                  }
               ],
               markers: {
                  size: 0
               },
               fill: {
                  type: "gradient",
                  gradient: {
 .........完整代码请登录后点击上方下载按钮下载查看