自适应后台dashboard仪表盘效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在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/bootstrap.3.3.4.css"> <link rel='stylesheet' href='http://repo.bfw.wiki/bfwrepo/css/material-icons.min.css'> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/chartist.min.css"> <style> html { font-size: 62.5%; } body { margin: 0; padding: 0; } .backdrop { background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; bottom: 0; width: 100%; min-height: 100%; z-index: 1; display: none; } #app { position: relative; min-height: 100vh; background: #eee; } .navbar { padding: 1rem; height: 7rem; } .sidebar { box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; height: 100%; background-image: linear-gradient(to bottom, white 0%, #f6f6f6 47%, rgba(237, 237, 237, 0.8) 85%, rgba(237, 237, 237, 0.5) 100%), url("http://repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png"); background-repeat: no-repeat; background-size: cover; background-position: left; width: 260px; z-index: 2; } @media (max-width: 990px) { .sidebar { transform: translateX(-290px); } } .sidebar__logo { text-transform: uppercase; border-bottom: 1px solid #eee; margin: 0 auto; text-align: center; padding: 2rem 0; font-size: 1.8rem; width: 90%; } .nav { list-style: none; display: flex; margin: 2rem auto; flex-direction: column; overflow: auto; width: 90%; } .nav__link { border-radius: 3px; display: flex; padding: 1rem 1.5rem; margin-bottom: .5rem; } .nav__link i { color: #888888; font-size: 2.4rem; width: 30px; margin-right: 15px; } .nav__link p { align-self: center; margin: 0; color: #555555; font-size: 1.4rem; } .nav__link:hover, .nav__link--active { background: #9c27b0; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); text-decoration: none; } .nav__link:hover i, .nav__link:hover p, .nav__link--active i, .nav__link--active p { color: #fff; } section { background: inherit; position: relative; padding: 3rem 1.5rem; float: right; min-height: 100vh; width: calc(100% - 260px); } @media (max-width: 990px) { section { width: 100%; } } .row { padding: 30px 10px; } .card { border-radius: 5px; margin: 2rem 0; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); } .card__header { position: relative; padding: 1rem; } .card__icon { align-items: center; display: flex; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); text-align: center; border-radius: 3px; margin-top: -4rem; padding: 2rem; float: left; z-index: 1; } .card__icon--orange { background-image: linear-gradient(60deg, #ffa726, #fb8c00); } .card__icon--green { background-image: linear-gradient(60deg, #66bb6a, #43a047); } .card__icon--red { background-image: linear-gradient(60deg, #ef5350, #e53935); } .card__icon--blue { background-image: linear-gradient(60deg, #26c6da, #00acc1); } .card__icon i { color: #fff; font-size: 3.6rem; width: 56px; } .card__category { display: block; text-align: right; font-size: 1.4rem; color: #999; top: 10px; width: 96%; } .card__title { font-size: 2.4rem; font-weight: lighter; text-align: right; width: 96%; } .card__title small { font-weight: 600; } .card__body { margin: 0 auto; padding: .5rem 0 1rem 0; width: 90%; } .card__body h4 { font-size: 2.2rem; font-weight: lighter; } .card__body p { color: #888888; font-size: 1.4rem; } .card__footer { display: flex; border-top: 1px solid #eee; font-size: 1.2rem; margin: 0 auto; padding: 1rem 1rem; width: 90%; } .card__footer i { color: #6f6f6f; font-size: 1.4rem; } .card__footer a { color: #888888; text-decoration: none; align-self: center; margin-left: .5rem; font-size: 1.3rem; } .chart { color: #fff; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); padding: 1.5rem; border-radius: 3px; margin-top: -40px; width: 100%; } .chart--green { background-image: linear-gradient(60deg, #66bb6a, #43a047); } .chart--orange { background-image: linear-gradient(60deg, #ffa726, #fb8c00); } .chart--red { background-image: linear-gradient(60deg, #ef5350, #e53935); } footer { background: #eee; } footer:after { clear: both; content: ""; display: block; } .navbar-brand { font-size: 1.9rem; margin-left: 1.6rem; color: #6f6f6f; font-weight: lighter; } .table { font-size: 1.6rem; } .table tbody tr:first-child { border-top: none; } .ct-grid { strokeWith: .3rem; stroke: rgba(255, 255, 255, 0.7); } #lineB-ChartExample.ct-chart-line .ct-series-a .ct-point .ct-line { stroke: #fff !important; stroke-width: 10px; stroke-linecap: round; } .ct-label { fill: rgba(0, 0, 0, 0.4); color: #fff; font-size: 1.5rem; line-height: 1; } #lineBarExample .ct-bar { stroke: rgba(255, 255, 255, 0.8); } .open { animation: slideIn .5s forwards; animation-delay: .2s; } @keyframes slideIn { 0% { transform: translateX(-260px); } 100% { transform: translateX(0); } } </style> </head> <body translate="no"> <main id="app"> <div class="backdrop"></div> <aside class="sidebar"> <div class="sidebar__logo"> Admin PAge </div> <ul class="nav"> <li class="nav__item"> <a href="" class="nav__link nav__link--active"> <i class="material-icons">dashboard</i> <p>Dashboard</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">content_paste</i> <p>Table List</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">person</i> <p>User Profile</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">library_books</i> <p>Typography</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">bubble_chart</i> <p>Icons</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">location_ons</i> <p>Maps</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">notifications</i> <p>Notifications</p> </a> </li> <li class="nav__item"> <a href="" class="nav__link"> <i class="material-icons">language</i> <p>Language support</p> </a> </li> </ul> </aside> <section> <nav class="navbar navbar-expand-lg navbar-transparent"> <div class="navbar-wrapper"> <a href="" class="navbar-brand">Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-cont.........完整代码请登录后点击上方下载按钮下载查看
网友评论0