css实现自适应蓝色简洁大气医疗健康保健后台管理仪表盘UI效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现自适应蓝色简洁大气医疗健康保健后台管理仪表盘UI效果代码,包含门诊预约、设备管理、数据统计、提醒等内容。
代码标签: css 自适应 蓝色 简洁 大气 医疗 健康 保健 后台 管理 仪表盘 UI效
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css"> <style> *, *::before, *::after { box-sizing: border-box; } html { font-size: 12px; } body { height: 100%; overflow-x: hidden; margin: 0; font-family: "Open Sans", Helvetica, sans-serif; color: #0c0a3d; } input { font-family: "Open Sans", Helvetica, sans-serif; } input:focus, select:focus, textarea:focus, button:focus { outline: none; } ul { list-style: none; padding: 0; margin: 0; } textarea:focus, input:focus { outline: none; } a { text-decoration: none; color: #bbbbca; } .wrapper { display: grid; height: 100vh; grid-template-rows: 7.5rem 1fr; grid-template-columns: 6.5rem 1fr; grid-template-areas: "aside header" "aside main"; flex-wrap: wrap; } @media screen and (max-width: 400px) { .wrapper { grid-template-columns: initial; grid-template-rows: initial; } } .header { grid-area: header; display: grid; grid-template-columns: max-content 1fr; align-items: center; padding: 1rem 3rem; } @media screen and (max-width: 400px) { .header { gap: 0.75rem; padding: 0.75rem; } } .header .btn-appointment { padding: 1rem 1.5rem; border-radius: 0.5rem; height: fit-content; color: #fff; background: #9395ed; background: linear-gradient(90deg, #9395ed 0%, #6c6de3 100%); font-weight: 600; } .header .profile { justify-self: end; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; } .header .profile .image { justify-self: end; } .header .profile .image img { width: 4rem; height: 4rem; border-radius: 4rem; } .header .profile .image .notification { position: absolute; width: 1.25rem; height: 1.25rem; margin-top: -1.7rem; margin-left: 3rem; background-color: #ff7d7d; border-radius: 1.25rem; box-shadow: 0px 0px 10px 0px #ff7d7d; } @media screen and (max-width: 400px) { .header .profile .image .notification { margin-top: -1.5rem; margin-left: 2.3rem; } } .header .profile select { height: fit-content; border: none; background: none; font-size: 1rem; font-weight: 600; font-family: "Open Sans", Helvetica, sans-serif; } .aside { grid-area: aside; display: grid; gap: 1.5rem; padding: 1rem; justify-content: center; font-size: 1.5rem; color: #bbbbca; background-color: #fcfdfd; } @media screen and (max-width: 400px) { .aside { position: fixed; bottom: 0; width: 100%; border-top: 1px solid #f1f1f1; justify-content: initial; } } .aside ul { display: grid; grid-template-rows: repeat(8, min-content); gap: 3rem; margin-top: 0.75rem; } @media screen and (max-width: 400px) { .aside ul { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; margin-top: 0; } .aside ul .hide, .aside ul .logo.hide { display: none; } } .aside ul li { display: grid; place-items: center; padding: 0.5rem 0.75rem; } .aside ul li.active { background-color: #fff; -webkit-box-shadow: 0px 0px 33px -10px rgba(126, 127, 232, 0.5); -moz-box-shadow: 0px 0px 33px -10px rgba(126, 127, 232, 0.5); box-shadow: 0px 0px 33px -10px rgba(126, 127, 232, 0.5); border-radius: 0.75rem; } .aside ul li.active a { color: #7e7fe8; } .aside ul li.logo img { width: 3rem; } .aside ul li.logo a { color: #fff; text-align: center; font-size: 1.25rem; } .main { padding: 3rem; grid-area: main; background-color: #edf1fb; display: grid; grid-template-rows: 1fr 1fr; gap: 2rem; } @media screen and (max-width: 1148px) { .main { grid-template-rows: initial; } } @media screen and (max-width: 400px) { .main { padding: 1rem 0 6rem 0; gap: 1rem; } } .main .top { display: grid; grid-template-columns: 5fr 8fr; gap: 2rem; } @media screen and (max-width: 1148px) { .main .top { grid-template-columns: initial; } } @media screen and (max-width: 400px) { .main .top { gap: 1rem; } } .main .bottom { display: grid; gap: 2rem; grid-template-columns: 4.2fr 3.8fr 5.2fr; } @media screen and (max-width: 1148px) { .main .bottom { grid-template-columns: initial; } } @media screen and (max-width: 400px) { .main .bottom { gap: 1rem; } } .main .card { background-color: #fff; border-radius: 0.3rem; padding: 2rem; } .main .card .card-header { display: flex; justify-content: space-between; margin-bottom: 1.5rem; } .main .card .card-header .right { color: #bbbbca; } .main .card .card-header h1 { display: inline-block; margin: 0; font-size: 1.25rem; } .main .card .card-header .header-container { display: grid; grid-template-columns: max-content max-content; gap: 1rem; align-items: end; } .main .card .card-header .header-container span { color: #bbbbca; position: absolute; margin-left: 9rem; margin-top: 0.3rem; } .main .card .card-header select { height: fit-content; border: none; background: none; font-size: 1rem; font-weight: 600; font-family: "Open Sans", Helvetica, sans-serif; } .main .card .card-body { display: grid; gap: 2rem; } .main .card .appointment { display: grid; grid-template-columns: min-content max-content 1fr min-content min-content; grid-template-rows: repeat(3, min-content); grid-template-areas: "profile name name check times" "profile title title check times" "profile date time check times"; column-gap: 1.5rem; row-gap: 0; } .main .card .appointment .image { grid-area: profile; width: 4rem; height: 4rem; border-radius: 4rem; box-shadow: 5px 5px 22px 0px rgba(116, 204, 214, 0.5); } .main .card .appointment .image.gray { box-shadow: 5px 5px 22px 0px #c7c5d2; } .main .card .appointment .image.red { box-shadow: 5px 5px 22px 0px rgba(193, 68, 84, 0.5); } .main .card .appointment .name { grid-area: name; font-weight: 600; } .main .card .appointment .title { grid-area: title; font-size: 0.8rem; color: #9695af; } .main .card .appointment .date { grid-area: date; font-size: 0.8rem; } .main .card .appointment .date i { color: #758dff; } .main .card .appointment .time { grid-area: time; font-size: 0.8rem; } .main .card .appointment .time i { color: #758dff; } .main .card .appointment .check { grid-area: check; font-size: 2rem; align-self: center; color: #758dff; } .main .card .appointment .times { grid-area: times; font-size: 2rem; align-self: center; color: #ff7d7d; } .main .card .chart-container { height: 17rem; } @media screen and (max-width: 650px) { .main .card .chart-container { height: 10rem; } } .main .card .news-list .news { display: grid; grid-template-columns: 1fr min-content; grid-template-areas: "title arrow" "subtitle arrow"; gap: 0.5rem; } .main .card .news-list .news .title { grid-area: title; font-weight: 700; color: #0c0a3d; } .main .card .news-list .news .subtitle { grid-area: subtitle; color: #9594ae; } .main .card .news-list .news .fa-caret-right { grid-area: arrow; align-self: center; } .main .card .news-list .news hr { width: 100%; border: none; background-color: #bbbbca; height: 1px; } .main .card .news-list .more { text-align: center; } .main .card .news-list .more a { color: #7e7fe8; font-weight: bold; } .main .card.alert { background: linear-gradient(90deg, #9395ed 0%, #6c6de3 100%); color: #fff; } .main .current-prescription-container { display: grid; grid-template-rows: 1fr max-content; gap: 2rem; } .main .current-prescription-container ul { display: grid; row-gap: 0.75rem; } .prescription-item { display: grid; grid-template-areas: "dot title" "dot description"; grid-template-columns: min-content 1fr; column-gap: 1.5rem; } .prescription-item .dot { grid-area: dot; width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; align-self: center; } .prescription-item .dot.gray { background-color: #bccbf5; box-shadow: 2px 2px 10px 0px #bccbf5; } .prescription-item .dot.violet { background-color: #7e7fe8; box-shadow: 2px 2px 10px 0px #7e7fe8; } .prescription-item .title { grid-area: title; color: #0c0a3d; font-weight: 800; } .prescription-item .description { grid-area: description; } .notifications ul { display: grid; gap: 1.5rem; } .notifications .more { text-align: center; } .notifications .more a { color: #7e7fe8; font-weight: 600; } .notifications .notification { display: grid; grid-template-areas: "dot title date"; grid-template-columns: min-content 1fr max-content; align-items: center; gap: 1rem; } .notifications .notification .dot { grid-area: dot; width: 0.75rem; height: 0.75rem; border-radius: 0.75rem; } .notifications .notification .dot.green { background-color: #16c08f; } .notifications .notification .dot.red { background-color: #ff7d7d; } .notifications .notification .dot.blue { background-color: #7e7fe8; } .notifications .notification .title { grid-area: title; color: #0c0a3d; font-weight: 600; } .notifications .notification .date { grid-area: date; } </style> </head> <body > <div class="wrapper"> <header class="header"> <a href="#" class="btn-appointment">Make an appointment</a> <div class="profile"> <div class="image"> <img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_45,h_45,/quality,q_90" /> <div class="notification"></div> </div> <select> <option value="Maria waters">Maria Waters</option> </select> </div> </header> <aside class="aside"> <ul> <li class="logo hide"> <a href="#"><img src="//repo.bfw.wiki/bfwrepo/icon/629fd5db550f3.png" alt="logo" width="25"></a> </li> <li class="active"><a href="#"><i class="fas fa-columns"></i></a></li> <li><a href="#"><i class="fa fa-folder" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fas fa-chart-area "></i></a></li> <li><a href="#"><i class="fas fa-pills "></i></a></li> <li class="hide"><a href="#"><i class="fas fa-calendar-check "></i></a></li> <li class="hide"><a href="#"><i class="fas fa-file-invoice-dollar "></i></a></li> <li class="hide"><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i> <!-- <span class="count">8</span> --> </a></li> </ul> </aside> <main class="main"> <div class="top"> <div class="upcoming-appointments card"> <div class="card-header"> <h1>Upcoming appointments</h1> <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a> </div> <div class="card-body"> <div class="appointment"> <img class="image" src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_45,h_45,/quality,q_90" /> <span class="name">dr Anthony Wagner</span> <span class="title">dermatologist</span> <span class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 22/07/2018</span> <span class="time"><i class="fas fa-clock"></i> 2:30 PM</span> <a href="#" class="check"><i class="far fa-check-circle" aria-hidden="true"></i></a> <a href="#" class="times"><i class="far fa-times-circle" aria-hidden="true"></i></a> </div> <div class="appointment"> <img class="image gray" src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_45,h_45,/quality,q_90" /> <span class="name">dr Caroline Fields</span> <span class="title">psycologist</span> <span class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 22/07/2018</span> <span class="time"><i class="fas fa-clock"></i> 2:30 PM</span> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0