div+css实现简洁数字货币金融后台仪表盘页面代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现简洁数字货币金融后台仪表盘页面代码，使用Chart.js来进行曲线图绘制。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
     <style>
     

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

body,
button,
input,
select {
  font-family: 'Nexa', sans-serif;
  font-size: 1rem;
}

body {
  background-color: #F2F8FF;
}

select {
  padding: 6.3px 12px;
  border-radius: 11px;
  border: 1px solid #C4CDD5;
  background-color: #FFFFFF;
  font-weight: bold;
  color: #919EAB;
}

canvas {
  font-family: 'Nexa', sans-serif;
  font-size: 14px;
}

h1 {
  font-size: 2.25rem;
}

.nav {
  min-height: 100vh;
  padding: 2rem 1rem;
  background-color: #F2F8FF;
}

@media screen and (min-width: 375px){
  .nav__mobile {
    display: flex;
  } 
  .nav__logo.active {
    display: none;
  }
  .nav {
    transform: translateX(-130%);
    position: absolute;
    left: 61px;
  }
}

@media screen and (min-width: 768px) {
  .nav__mobile {
    display: none;
  }
  .nav {
    transform: none;
    position: static;
  }
}

.nav__mobile {
  min-height: 100vh;
  padding: 1rem 0.5rem;
  background-color: #F9FAFB;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.nav__mobile ul li {
  list-style: none;
}

.nav__hamburger {
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.nav__hamburger > span {
  display: block;
  width: 45px;
  height: 5px;
  background-color: #637381;
  transition: all 0.3s;
  border-radius: 3px;
}
.nav__hamburger > span:not(:last-child) {
  margin-bottom: 7px;
}
.nav__hamburger.active > span:first-child {
  transform: rotate(45deg) translateX(8.5px) translateY(9px);
  background-color: #4062FF;
}
.nav__hamburger.active > span:nth-child(2) {
  transform: translateX(-100%);
  opacity: 0;
}
.nav__hamburger.active > span:last-child {
  transform: rotate(-45deg) translateX(8px) translateY(-8px);
  background-color: #4062FF;
}

.nav__logo-min {
  transform: rotate(-90deg);
}

.nav__menus {
  list-style: none;
}

.nav__menu,
.nav__logout {
  font-weight: bold;
  padding: 1rem;
  width: 200px;
  cursor: pointer;
}

.nav__menu {
  color: #B8BED9;
  transition: .3s ease-in-out;
}

.nav__menu:hover {
  color: #4062FF;
}

.nav__menu svg,
.nav__logout svg {
  margin-right: 0.5rem;
}

.nav__menu svg path {
  fill: #B8BED9;
  transition: .3s ease-in-out;
}

.nav__menu:hover svg path {
  fill: #4062FF;
}

.nav__menu.active {
  color: white;
  background-color: #4062FF;
  border-radius: 16px;
}

.nav__menu.active:hover {
  color: #FFFFFF;
}

.nav__menu.active svg path {
  fill: #FFFFFF;
}

.nav__menu.active:hover svg path {
  fill: #FFFFFF;
}

.nav__logouts {
  flex: 0.2;
  list-style: none;
}

.nav__logout {
  color: #FF4842;
  transition: .3s ease-in-out;
}

.nav__logout:hover {
  color: #4062FF
}

.nav__logout svg path {
  fill: #FF4842;
  transition: .3s ease-in-out;
}

.nav__logout:hover svg path {
  fill: #4062FF
}

.section__main {
  background-color: #FBFDFF;
  padding: 2rem;
  width: 100%;
}

.search {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 16px;
  width: fit-content;
}

.search__button {
  border: none;
  padding: 0.85rem 1rem 0.85rem 1.5rem;
  border-radius: 16px 0 0 16px;
}

.search__input {
  border: none;
  outline: none;
  border-radius: 0 16px 16px 0;
  font-weight: bold;
  padding-right: 2rem;
}

.banner {
  border-radius: 24px;
}

.banner__cta {
  width: 100%;
}

.banner__img {
  position: relative;
}

.banner__img img {
  position: absolute;
  top: -150px;
  right: 0;
}

.portos {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(285px, 285px));
  gap: 1rem;
}

.porto {
  font-weight: bold;
  padding: 1rem;
  border-radius: 16px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.charts {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background-color: #FFFFFF;
  width: 100%;
  border-radius: 16px;
  padding: 1rem;
}

@media screen and (min-width: 375px) and (max-width: 767px) {
  .section__main {
    padding: 2rem 1rem;
    width: 100%;
  }
  .search {
    width: 100%;
  }
  .search__button {
    padding: 0.85rem 1rem 0.85rem 1rem;
  }
  .search__input {
    padding-right: 1rem;
    width: 100%;
  }
  .banner {
    flex-direction: column-reverse;
    padding: 1rem;
    margin-bottom: 2rem !important;
  }
  .banner__cta {
    justify-content: center;
    display: flex;
  }
  .banner__img {
    position: static;
    width: 100%;
  }
  .banner__img img {
    position: static;
    width: 100%;
  }
  h1.text-4xl {
    font-size: 1.75rem;
    text-align: center;
  }
  h2.text-2xl {
    text-align: center;
  }
  .portos {
    margin-bottom: 2rem;
  }
  .portos>.porto:not(:last-child) {
    margin-bottom: 2rem;
  }
  .porto {
    max-width: 285px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .banner {
    padding: 2rem;
    margin-bottom: 2rem;
  }
  .banner__img img {
    position: absolute;
    top: -108px;
    right: -29px;
    width: 250px;
  }
  .portos {
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 1200px) {
  .banner {
    margin-bottom: 3.5rem;
    padding: 2.5rem;
    height: 245px;
  }
  .banner__img img {
    position: absolute;
    top: -150px;
    right: 0;
  }
  .portos {
    margin-bottom: 2rem;
  }
}

.section__account {
  background-color: #FFFFFF;
  padding: 2rem 1rem;
}

.option {
  height: 56px;
}

.notif {
  position: relative;
}

.notif__active {
  position: absolute;
  top: 0;
  right: 0;
}

.profile__pic {
  object-fit: cover;
  border-radius: 50%;
}

.card {
  width: 275px;
  height: 155px;
  border-radius: 24px;
  background: url("//repo.bfw.wiki/bfwrepo/images/shoot/Ellipse-7.png") no-repeat right top, #4062FF;
}

.card p {
  background-color: #4081FF;
  padding: 0.5rem;
  border-radius: 26px;
}

@media screen and (min-width: 375px) {
  .section__account {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  .section__account {
    display: block;
  }
}

/* REFACTORING */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-align-center {
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-center {
  justify-content: center;
}

.bg-primary {
  background-color: #4062FF;
}

.bg-secondary {
  background-color: #40BAFF;
}

.bg-white {
  background-color: #FFFFFF;
}

.text-white {
  color: #FFFFFF
}

.text-error {
  color: #FF4842
}

.text-success {
  color: #6DD64D;
}

.text-gray-500 {
  color: #919EAB;
}

.fill-white {
  fill: #FFFFFF
}

.button {
  border-radius: 16px;
  font-weight: bold;
  border: none;
}

.text-bold {
  font-weight: bold;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-11 {
  margin-bottom: 2.75rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-20 {
  margin-top: 5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.rotate-180 {
  transform: rotate(180deg);
}

@keyframes fadeIn {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes fadeOut {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-130%);
  }
}
     </style>
    </head>


        <body class="flex">
            <nav class="nav__mobile flex-column flex-align-center">
                <div class="nav__hamburger flex flex-align-center flex-column flex-justify-center mb-6">
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                </div>
                <svg width="45" height="145" viewBox="0 0 45 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.71058 88.7499C7.2624 91.2582 6.5 94.1035 6.5 96.9999C6.5 99.8962 7.2624 102.742 8.71058 105.25C10.1588 107.758 12.2417 109.841 14.75 111.289C17.2583 112.737 20.1036 113.5 23 113.5C25.8964 113.5 28.7417 112.737 31.25 111.289C33.7583 109.841 35.8412 107.758 37.2894 105.25C38.7376 102.742 39.5 99.8962 39.5 96.9999C39.5 94.1035 38.7376 91.2582 37.2894 88.7499L32.6806 91.4108C33.6617 93.1101 34.1782 95.0377 34.1782 96.9999C34.1782 98.9621 33.6617 100.89 32.6806 102.589C31.6995 104.288 30.2884 105.699 28.5891 106.681C26.8898 107.662 24.9622 108.178 23 108.178C21.0378 108.178 19.1102 107.662 17.4109 106.681C15.7116 105.699 14.3005 104.288 13.3194 102.589C12.3383 100.89 11.8218 98.9621 11.8218 96.9999C11.8218 95.0377 12.3383 93.1101 13.3194 91.4108L8.71058 88.7499Z" fill="#4062FF"/>
                    <path d="M29.2046 103.083C27.5246 104.763 25.4766 105.603 23.0606 105.603C20.6446 105.603 18.5966 104.763 16.9166 103.083C15.2366 101.387 14.3966 99.1553 14.3966 96.3873C14.3966 95.1553 14.5726 94.0833 14.9246 93.1713C15.2766 92.2433 15.8046 91.3073 16.5086 90.3633L19.3406 91.8993C18.2526 93.3233 17.7086 94.8113 17.7086 96.3633C17.7086 98.0273 18.2206 99.3553 19.2446 100.347C20.2526 101.339 21.5246 101.835 23.0606 101.835C24.5966 101.835 25.8766 101.339 26.9006 100.347C27.9086 99.3553 28.4126 98.0273 28.4126 96.3633C28.4126 94.8113 27.8686 93.3233 26.7806 91.8993L29.6126 90.3633C30.3166 91.3073 30.8446 92.2433 31.1966 93.1713C31.5486 94.0833 31.7246 95.1553 31.7246 96.3873C31.7246 99.1553 30.8846 101.387 29.2046 103.083ZM19.1486 84.8592H21.8366C20.8446 84.6832 20.1086 84.2432 19.6286 83.5392C19.1326 82.8352 18.8846 82.1472 18.8846 81.4752C18.8846 81.2032 18.9166 80.8992 18.9806 80.5632H22.5086C22.3966 81.0272 22.3406 81.5312 22.3406 82.0752C22.3406 82.8112 22.5566 83.4432 22.9886 83.9712C23.4046 84.4992 23.9966 84.7632 24.7646 84.7632H31.4606V88.3392H19.1486V84.8592ZM26.8526 73.0184L19.1486 70.0904V66.1544L37.0766 74.1224V77.7224L30.4286 74.9144L19.1486 79.9784V75.9464L26.8526 73.0184ZM25.3406 54.569C24.3166 54.569 23.4686 54.857 22.7966 55.433C22.1246 55.993 21.7886 56.761 21.7886 57.737C21.7886 58.665 22.0846 59.433 22.6766 60.041C23.2686 60.649 24.0926 60.953 25.1486 60.953C26.2846 60.953 27.1806 60.649 27.8366 60.041C28.4926 59.433 28.8206 58.633 28.8206 57.641C28.8206 56.697 28.4926 55.953 27.8366 55.409C27.1646 54.849 26.3326 54.569 25.3406 54.569ZM37.0766 60.857V64.433H19.1486L19.1486 60.857H20.9486C19.5726 59.897 18.8846 58.609 18.8846 56.993C18.8846 55.169 19.5006 53.713 20.7326 52.625C21.9646 51.537 23.5086 50.993 25.3646 50.993C27.1726 50.993 28.6846 51.521 29.9006 52.577C31.1166 53.617 31.7246 55.065 31.7246 56.921C31.7246 57.721 31.5486 58.473 31.1966 59.177C30.8446 59.865 30.3726 60.425 29.7806 60.857H37.0766ZM16.1246 44.4076H19.1486V40.9996H21.9566V44.4076H27.7166C28.4366 44.4076 28.7966 44.1036 28.7966 43.4956C28.7966 42.8716 28.4126 42.5596 27.6446 42.5596C27.2446 42.5596 26.8926 42.6156 26.5886 42.7276V39.8956C26.9886 39.7036 27.4766 39.6076 28.0526 39.6076C29.0606 39.6076 29.9246 39.9516 30.6446 40.6396C31.3646 41.3276 31.7246 42.3516 31.7246 43.7116C31.7246 46.5596 30.2766 47.9836 27.3806 47.9836H21.9566V49.8316H19.1486V47.7196L16.1246 47.1676V44.4076ZM29.9246 36.6074C28.7086 37.9354 27.1646 38.5994 25.2926 38.5994C23.4206 38.5994 21.8846 37.9354 20.6846 36.6074C19.4846 35.2634 18.8846 33.6714 18.8846 31.8314C18.8846 29.9914 19.4926 28.4074 20.7086 27.0794C21.9086 25.7354 23.4366 25.0634 25.2926 25.0634C27.1646 25.0634 28.7086 25.7354 29.9246 27.0794C31.1246 28.4074 31.7246 29.9914 31.7246 31.8314C31.7246 33.6714 31.1246 35.2634 29.9246 36.6074ZM25.2926 35.1194C26.2526 35.1194 27.0526 34.7994 27.6926 34.1594C28.3326 33.5034 28.6526 32.7274 28.6526 31.8314C28.6526 30.9194 28.3326 30.1434 27.6926 29.5034C27.0366 28.8634 26.2366 28.5434 25.2926 28.5434C24.3486 28.5434 23.5566 28.8634 22.9166 29.5034C22.2766 30.1434 21.9566 30.9194 21.9566 31.831.........完整代码请登录后点击上方下载按钮下载查看