css实现蓝色极简后台仪表盘效果代码
代码语言: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 & 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: { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0