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.8314C21.9566 32.7274 22.2766 33.5034 22.9166 34.1594C23.5566 34.7994 24.3486 35.1194 25.2926 35.1194Z" fill="black"/>
                    <path d="M19.2446 10.0891C19.9966 10.0891 20.6926 10.3291 21.3326 10.8091C21.9566 11.2731 22.4286 11.9451 22.7486 12.8251C22.9406 11.8331 23.4366 11.0011 24.2366 10.3291C25.0206 9.65712 25.8526 9.32112 26.7326 9.32112C28.1566 9.32112 29.3006 9.87312 30.1646 10.9771C31.0286 12.0651 31.4606 13.4971 31.4606 15.2731L31.4606 22.3051H14.6366L14.6606 15.9931C14.6606 14.2651 15.0766 12.8491 15.9086 11.7451C16.7246 10.6411 17.8366 10.0891 19.2446 10.0891ZM24.3086 16.6411V18.5851H28.5086V15.2731C28.5086 14.6331 28.3406 14.1131 28.0046 13.7131C27.6686 13.2971 27.2206 13.0891 26.6606 13.0891C25.9566 13.0891 25.3886 13.3371 24.9566 13.8331C24.5246 14.3131 24.3086 15.2491 24.3086 16.6411ZM21.7166 18.5851V17.0491C21.7166 14.9211 20.9486 13.8571 19.4126 13.8571C18.8366 13.8571 18.3966 14.0651 18.0926 14.4811C17.7726 14.8811 17.6126 15.3851 17.6126 15.9931V18.5851H21.7166ZM19.1486 3.39049H21.8366C20.8446 3.21449 20.1086 2.77449 19.6286 2.07049C19.1326 1.36649 18.8846 0.678493 18.8846 0.00649357C18.8846 -0.265506 18.9166 -0.569506 18.9806 -0.905506H22.5086C22.3966 -0.441506 22.3406 0.0624936 22.3406 0.606494C22.3406 1.34249 22.5566 1.97449 22.9886 2.50249C23.4046 3.03049 23.9966 3.29449 24.7646 3.29449H31.4606V6.87049H19.1486V3.39049ZM29.9246 -3.84569C28.7086 -2.51769 27.1646 -1.85369 25.2926 -1.85369C23.4206 -1.85369 21.8846 -2.51769 20.6846 -3.84569C19.4846 -5.18969 18.8846 -6.78169 18.8846 -8.62169C18.8846 -10.4617 19.4926 -12.0457 20.7086 -13.3737C21.9086 -14.7177 23.4366 -15.3897 25.2926 -15.3897C27.1646 -15.3897 28.7086 -14.7177 29.9246 -13.3737C31.1246 -12.0457 31.7246 -10.4617 31.7246 -8.62169C31.7246 -6.78169 31.1246 -5.18969 29.9246 -3.84569ZM25.2926 -5.33369C26.2526 -5.33369 27.0526 -5.65369 27.6926 -6.29369C28.3326 -6.94969 28.6526 -7.72569 28.6526 -8.62169C28.6526 -9.53369 28.3326 -10.3097 27.6926 -10.9497C27.0366 -11.5897 26.2366 -11.9097 25.2926 -11.9097C24.3486 -11.9097 23.5566 -11.5897 22.9166 -10.9497C22.2766 -10.3097 21.9566 -9.53369 21.9566 -8.62169C21.9566 -7.72569 22.2766 -6.94969 22.9166 -6.29369C23.5566 -5.65369 24.3486 -5.33369 25.2926 -5.33369Z" fill="#4062FF"/>
                </svg>
            </nav>
            <nav class="nav flex flex-column">
                <ul class="nav__menus flex flex-column mb-14">
                    <svg width="136" height="46" viewBox="0 0 136 46" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav__logo mb-11">
                        <path d="M30.7894 8.25002C28.2811 6.80184 25.4358 6.03943 22.5394 6.03944C19.6431 6.03944 16.7977 6.80184 14.2894 8.25002C11.7811 9.6982 9.69818 11.7811 8.25 14.2894C6.80182 16.7978 6.03942 19.6431 6.03942 22.5394C6.03942 25.4358 6.80182 28.2811 8.25 30.7894C9.69818 33.2978 11.7811 35.3807 14.2894 36.8289C16.7977 38.277 19.6431 39.0394 22.5394 39.0394C25.4358 39.0394 28.2811 38.277 30.7894 36.8289L28.1285 32.2201C26.4292 33.2012 24.5016 33.7177 22.5394 33.7177C20.5772 33.7177 18.6496 33.2012 16.9503 32.2201C15.251 31.239 13.8399 29.8279 12.8588 28.1285C11.8777 26.4292 11.3612 24.5016 11.3612 22.5394C11.3612 20.5773 11.8777 18.6496 12.8588 16.9503C13.8399 15.251 15.251 13.8399 16.9503 12.8588C18.6496 11.8777 20.5772 11.3612 22.5394 11.3612C24.5016 11.3612 26.4292 11.8777 28.1285 12.8588L30.7894 8.25002Z" fill="#4062FF"/>
                        <path d="M16.456 28.744C14.776 27.064 13.936 25.016 13.936 22.6C13.936 20.184 14.776 18.136 16.456 16.456C18.152 14.776 20.384 13.936 23.152 13.936C24.384 13.936 25.456 14.112 26.368 14.464C27.296 14.816 28.232 15.344 29.176 16.048L27.64 18.88C26.216 17.792 24.728 17.248 23.176 17.248C21.512 17.248 20.184 17.76 19.192 18.784C18.2 19.792 17.704 21.064 17.704 22.6C17.704 24.136 18.2 25.416 19.192 26.44C20.184 27.448 21.512 27.952 23.176 27.952C24.728 27.952 26.216 27.408 27.64 26.32L29.176 29.152C28.232 29.856 27.296 30.384 26.368 30.736C25.456 31.088 24.384 31.264 23.152 31.264C20.384 31.264 18.152 30.424 16.456 28.744ZM34.6801 18.688V21.376C34.8561 20.384 35.2961 19.648 36.0001 19.168C36.7041 18.672 37.3921 18.424 38.0641 18.424C38.3361 18.424 38.6401 18.456 38.9761 18.52V22.048C38.5121 21.936 38.0081 21.88 37.4641 21.88C36.7281 21.88 36.0961 22.096 35.5681 22.528C35.0401 22.944 34.7761 23.536 34.7761 24.304V31H31.2001V18.688H34.6801ZM46.5209 26.392L49.4489 18.688H53.3849L45.4169 36.616H41.8169L44.6249 29.968L39.5609 18.688H43.5929L46.5209 26.392ZM64.9703 24.88C64.9703 23.856 64.6823 23.008 64.1063 22.336C63.5463 21.664 62.7783 21.328 61.8023 21.328C60.8743 21.328 60.1063 21.624 59.4983 22.216C58.8903 22.808 58.5863 23.632 58.5863 24.688C58.5863 25.824 58.8903 26.72 59.4983 27.376C60.1063 28.032 60.9063 28.36 61.8983 28.36C62.8423 28.36 63.5863 28.032 64.1303 27.376C64.6903 26.704 64.9703 25.872 64.9703 24.88ZM58.6823 36.616H55.1063V18.688H58.6823V20.488C59.6423 19.112 60.9303 18.424 62.5463 18.424C64.3703 18.424 65.8263 19.04 66.9143 20.272C68.0023 21.504 68.5463 23.048 68.5463 24.904C68.5463 26.712 68.0183 28.224 66.9623 29.44C65.9223 30.656 64.4743 31.264 62.6183 31.264C61.8183 31.264 61.0663 31.088 60.3623 30.736C59.6743 30.384 59.1143 29.912 58.6823 29.32V36.616ZM75.1317 15.664V18.688H78.5397V21.496H75.1317V27.256C75.1317 27.976 75.4357 28.336 76.0437 28.336C76.6677 28.336 76.9797 27.952 76.9797 27.184C76.9797 26.784 76.9237 26.432 76.8117 26.128H79.6437C79.8357 26.528 79.9317 27.016 79.9317 27.592C79.9317 28.6 79.5877 29.464 78.8997 30.184C78.2117 30.904 77.1877 31.264 75.8277 31.264C72.9797 31.264 71.5557 29.816 71.5557 26.92V21.496H69.7077V18.688H71.8197L72.3717 15.664H75.1317ZM82.9319 29.464C81.6039 28.248 80.9399 26.704 80.9399 24.832C80.9399 22.96 81.6039 21.424 82.9319 20.224C84.2759 19.024 85.8679 18.424 87.7079 18.424C89.5479 18.424 91.1319 19.032 92.4599 20.248C93.8039 21.448 94.4759 22.976 94.4759 24.832C94.4759 26.704 93.8039 28.248 92.4599 29.464C91.1319 30.664 89.5479 31.264 87.7079 31.264C85.8679 31.264 84.2759 30.664 82.9319 29.464ZM84.4199 24.832C84.4199 25.792 84.7399 26.592 85.3799 27.232C86.0359 27.872 86.8119 28.192 87.7079 28.192C88.6199 28.192 89.3959 27.872 90.0359 27.232C90.6759 26.576 90.9959 25.776 90.9959 24.832C90.9959 23.888 90.6759 23.096 90.0359 22.456C89.3959 21.816 88.6199 21.496 87.7079 21.496C86.8119 21.496 86.0359 21.816 85.3799 22.456C84.7399 23.096 84.4199 23.888 84.4199 24.832Z" fill="black"/>
                        <path d="M109.45 18.784C109.45 19.536 109.21 20.232 108.73 20.872C108.266 21.496 107.594 21.968 106.714 22.288C107.706 22.48 108.538 22.976 109.21 23.776C109.882 24.56 110.218 25.392 110.218 26.272C110.218 27.696 109.666 28.84 108.562 29.704C107.474 30.568 106.042 31 104.266 31H97.2342V14.176L103.546 14.2C105.274 14.2 106.69 14.616 107.794 15.448C108.898 16.264 109.45 17.376 109.45 18.784ZM102.898 23.848H100.954V28.048H104.266C104.906 28.048 105.426 27.88 105.826 27.544C106.242 27.208 106.45 26.76 106.45 26.2C106.45 25.496 106.202 24.928 105.706 24.496C105.226 24.064 104.29 23.848 102.898 23.848ZM100.954 21.256H102.49C104.618 21.256 105.682 20.488 105.682 18.952C105.682 18.376 105.474 17.936 105.058 17.632C104.658 17.312 104.154 17.152 103.546 17.152H100.954V21.256ZM116.149 18.688V21.376C116.325 20.384 116.765 19.648 117.469 19.168C118.173 18.672 118.861 18.424 119.533 18.424C119.805 18.424 120.109 18.456 120.445 18.52V22.048C119.981 21.936 119.477 21.88 118.933 21.88C118.197 21.88 117.565 22.096 117.037 22.528C116.509 22.944 116.245 23.536 116.245 24.304V31H112.669V18.688H116.149ZM123.385 29.464C122.057 28.248 121.393 26.704 121.393 24.832C121.393 22.96 122.057 21.424 123.385 20.224C124.729 19.024 126.321 18.424 128.161 18.424C130.001 18.424 131.585 19.032 132.913 20.248C134.257 21.448 134.929 22.976 134.929 24.832C134.929 26.704 134.257 28.248 132.913 29.464C131.585 30.664 130.001 31.264 128.161 31.264C126.321 31.264 124.729 30.664 123.385 29.464ZM124.873 24.832C124.873 25.792 125.193 26.592 125.833 27.232C126.489 27.872 127.265 28.192 128.161 28.192C129.073 28.192 129.849 27.872 130.489 27.232C131.129 26.576 131.449 25.776 131.449 24.832C131.449 23.888 131.129 23.096 130.489 22.456C129.849 21.816 129.073 21.496 128.161 21.496C127.265 21.496 126.489 21.816 125.833 22.456C125.193 23.096 124.873 23.888 124.873 24.832Z" fill="#4062FF"/>
                    </svg>
                    <li class="mt-8 mb-3">
                        <a class="nav__menu active flex flex-align-center">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.13478 20.7733V17.7156C9.13478 16.9351 9.77217 16.3023 10.5584 16.3023H13.4326C13.8102 16.3023 14.1723 16.4512 14.4393 16.7163C14.7063 16.9813 14.8563 17.3408 14.8563 17.7156V20.7733C14.8539 21.0978 14.9821 21.4099 15.2124 21.6402C15.4427 21.8705 15.7561 22 16.0829 22H18.0438C18.9596 22.0023 19.8388 21.6428 20.4872 21.0008C21.1356 20.3588 21.5 19.487 21.5 18.5778V9.86686C21.5 9.13246 21.1721 8.43584 20.6046 7.96467L13.934 2.67587C12.7737 1.74856 11.1111 1.7785 9.98539 2.74698L3.46701 7.96467C2.87274 8.42195 2.51755 9.12064 2.5 9.86686V18.5689C2.5 20.4639 4.04738 22 5.95617 22H7.87229C8.55123 22 9.103 21.4562 9.10792 20.7822L9.13478 20.7733Z" fill="black"/>
                            </svg>
                            Dashboard
        
                        </a>
                    </li>
                    <li class="mb-3">
                        <a class="nav__menu flex flex-align-center ">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.3 12.8294C18.5124 12.8294 19.6102 12.8983 20.2855 13.0265C20.296 13.0265 20.9139 13.1536 21.1199 13.2356C21.4172 13.3639 21.6688 13.5955 21.8291 13.8853C21.9438 14.1169 22 14.3616 22 14.617C21.9895 14.883 21.8174 15.3831 21.7367 15.5802C21.2346 16.8797 19.5868 19.3633 18.5815 20.3158C18.4211 20.4774 18.2269 20.652 18.1812 20.6983C17.9284 20.8955 17.6206 21 17.2894 21C16.991 21 16.6937 20.9074 16.4538 20.7209C16.3292 20.6318 16.1473 20.4545 16.0641 20.3715L16.0196 20.3265C14.978 19.3526 13.4121 16.926 12.9089 15.6955C12.8982 15.6955 12.6475 15.0816 12.5968 14.7113L12.5882 14.617V14.5706C12.5882 14.0361 12.8855 13.5373 13.3665 13.2819C13.6298 13.1429 14.3952 13.0147 14.4069 13.0028C15.0927 12.8983 16.1449 12.8294 17.3 12.8294ZM6.70553 12.8905C7.18478 12.8905 7.57926 13.2561 7.63317 13.7277L7.63945 13.8383L7.89575 18.4171C7.89575 19.0846 7.36325 19.625 6.70553 19.625C6.08892 19.625 5.58133 19.15 5.52029 18.5406L5.51414 18.4171L5.77161 13.8383C5.77161 13.3146 6.18942 12.8905 6.70553 12.8905ZM6.71173 3C7.00783 3 7.30509 3.09264 7.54618 3.27793C7.65004 3.35291 7.79368 3.48866 7.88681 3.57993L7.98037 3.67345C9.02079 4.64858 10.5879 7.07394 11.0911 8.30444C11.1007 8.30444 11.3523 8.91922 11.4032 9.28974L11.4118 9.38409V9.43041C11.4118 9.96371 11.1133 10.4626 10.6335 10.7179C10.3702 10.8581 9.60478 10.9852 9.59308 10.997C8.90727 11.1016 7.85514 11.1704 6.70003 11.1704C5.48757 11.1704 4.38981 11.1016 3.71453 10.9733C3.70282 10.9733 3.08606 10.8462 2.88009 10.7642C2.58282 10.6372 2.3312 10.4044 2.17087 10.1145C2.05618 9.88294 2 9.63827 2 9.38409C2.01053 9.11685 2.18257 8.618 2.26215 8.42083C2.76539 7.12026 4.41204 4.6367 5.41852 3.68532C5.57886 3.5226 5.77313 3.34801 5.81877 3.30169C6.07039 3.10452 6.37936 3 6.71173 3ZM17.2947 4.375C17.9113 4.375 18.4179 4.84999 18.4788 5.45938L18.4849 5.58295L18.2286 10.1618C18.2286 10.6856 17.8108 11.1096 17.2947 11.1096C16.8155 11.1096 16.421 10.744 16.3671 10.2724L16.3608 10.1618L16.1033 5.58295C16.1033 4.91543 16.637 4.375 17.2947 4.375Z" fill="black"/>
                            </svg>
                            Exchange
        
                        </a>
                    </li>
                    <li class="mb-3">
                        <a class="nav__menu flex flex-align-center">
                            <svg width="27" height="24" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19.3541 0C23.9526 0 26.6667 2.64612 26.6667 7.17573H21.0252V7.22196C18.4069 7.22196 16.2844 9.29132 16.2844 11.844C16.2844 14.3967 18.4069 16.4661 21.0252 16.4661H26.6667V16.882C26.6667 21.3539 23.9526 24 19.3541 24H7.31259C2.71407 24 0 21.3539 0 16.882V7.11796C0 2.64612 2.71407 0 7.31259 0H19.3541ZM25.6711 9.16322C26.2209 9.16322 26.6667 9.59778 26.6667 10.1338V13.5079C26.6603 14.0414 26.2183 14.4723 25.6711 14.4786H21.1319C19.8064 14.496 18.6473 13.6112 18.3467 12.3524C18.1961 11.5711 18.4075 10.7648 18.9241 10.1496C19.4407 9.53449 20.2098 9.17343 21.0252 9.16322H25.6711ZM21.6652 10.7232H21.2267C20.9574 10.7201 20.6981 10.8222 20.5066 11.0067C20.3151 11.1912 20.2074 11.4428 20.2074 11.7053C20.2074 12.2561 20.6618 12.7043 21.2267 12.7106H21.6652C22.2281 12.7106 22.6844 12.2657 22.6844 11.7169C22.6844 11.1681 22.2281 10.7232 21.6652 10.7232ZM13.843 5.18825H6.31704C5.75871 5.18822 5.30427 5.62613 5.29778 6.17044C5.29778 6.72117 5.7522 7.1694 6.31704 7.17573H13.843C14.4059 7.17573 14.8622 6.73082 14.8622 6.18199C14.8622 5.63317 14.4059 5.18825 13.843 5.18825Z" fill="black"/>
                            </svg>
                            Wallet
        
                        </a>
                    </li>
                    <li class="mb-3">
                        <a class="nav__menu flex flex-align-center">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.4498 3.7803C15.4098 4.0303 15.3898 4.2803 15.3898 4.5303C15.3898 6.7803 17.2098 8.5993 19.4498 8.5993C19.6998 8.5993 19.9398 8.5703 20.1898 8.5303V16.5993C20.1898 19.9903 18.1898 22.0003 14.7898 22.0003H7.40076C3.99976 22.0003 1.99976 19.9903 1.99976 16.5993V9.2003C1.99976 5.8003 3.99976 3.7803 7.40076 3.7803H15.4498ZM15.6508 9.8603C15.3798 9.8303 15.1108 9.9503 14.9498 10.1703L12.5308 13.3003L9.75976 11.1203C9.58976 10.9903 9.38976 10.9393 9.18975 10.9603C8.99076 10.9903 8.81076 11.0993 8.68975 11.2593L5.73076 15.1103L5.66976 15.2003C5.49976 15.5193 5.57976 15.9293 5.87976 16.1503C6.01976 16.2403 6.16976 16.3003 6.33976 16.3003C6.57076 16.3103 6.78976 16.1893 6.92976 16.0003L9.43975 12.7693L12.2898 14.9103L12.3798 14.9693C12.6998 15.1393 13.0998 15.0603 13.3298 14.7593L16.2198 11.0303L16.1798 11.0503C16.3398 10.8303 16.3698 10.5503 16.2598 10.3003C16.1508 10.0503 15.9098 9.8803 15.6508 9.8603ZM19.5899 2C20.9199 2 21.9999 3.08 21.9999 4.41C21.9999 5.74 20.9199 6.82 19.5899 6.82C18.2599 6.82 17.1799 5.74 17.1799 4.41C17.1799 3.08 18.2599 2 19.5899 2Z" fill="black"/>
                            </svg>
                            Statistics
        
                        </a>
                    </li>
                    <li class="mb-3">
                        <a class="nav__menu flex flex-align-center">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 15.1739C16.3386 15.1739 20 15.8789 20 18.599C20 21.32 16.3146 22 12 22C7.66237 22 4 21.295 4 18.575C4 15.8539 7.68538 15.1739 12 15.1739ZM12 2C14.9391 2 17.294 4.35402 17.294 7.29105C17.294 10.2281 14.9391 12.5831 12 12.5831C9.0619 12.5831 6.70601 10.2281 6.70601 7.29105C6.70601 4.35402 9.0619 2 12 2Z" fill="black"/>
                            </svg>
                            Profile
        
                        </a>
                    </li>
                    <li class="mb-3">
                        <a class="nav__menu flex flex-align-center">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.7171 2.00012C13.4734 2.00012 14.1581 2.42012 14.5362 3.04012C14.7201 3.34012 14.8428 3.71012 14.8121 4.10012C14.7917 4.40012 14.8837 4.70012 15.0472 4.98012C15.5684 5.83012 16.7232 6.15012 17.6225 5.67012C18.6342 5.09012 19.9117 5.44012 20.4942 6.43012L21.1789 7.61012C21.7716 8.60012 21.4446 9.87012 20.4227 10.4401C19.554 10.9501 19.2474 12.0801 19.7686 12.9401C19.9321 13.2101 20.1161 13.4401 20.4022 13.5801C20.7599 13.7701 21.0358 14.0701 21.23 14.3701C21.6081 14.9901 21.5775 15.7501 21.2096 16.4201L20.4942 17.6201C20.1161 18.2601 19.4109 18.6601 18.6853 18.6601C18.3277 18.6601 17.9291 18.5601 17.6021 18.3601C17.3364 18.1901 17.0298 18.1301 16.7027 18.1301C15.691 18.1301 14.8428 18.9601 14.8121 19.9501C14.8121 21.1001 13.8719 22.0001 12.6967 22.0001H11.3068C10.1213 22.0001 9.18113 21.1001 9.18113 19.9501C9.16069 18.9601 8.31247 18.1301 7.30073 18.1301C6.96348 18.1301 6.6569 18.1901 6.40141 18.3601C6.07438 18.5601 5.6656 18.6601 5.31813 18.6601C4.58232 18.6601 3.87717 18.2601 3.49905 17.6201L2.7939 16.4201C2.41577 15.7701 2.39533 14.9901 2.77346 14.3701C2.93697 14.0701 3.24356 13.7701 3.59102 13.5801C3.87717 13.4401 4.06112 13.2101 4.23486 12.9401C4.74584 12.0801 4.43925 10.9501 3.57059 10.4401C2.55885 9.87012 2.23182 8.60012 2.81434 7.61012L3.49905 6.43012C4.09178 5.44012 5.35901 5.09012 6.38097 5.67012C7.27007 6.15012 8.42488 5.83012 8.94608 4.98012C9.10959 4.70012 9.20157 4.40012 9.18113 4.10012C9.16069 3.71012 9.27311 3.34012 9.46728 3.04012C9.8454 2.42012 10.5301 2.02012 11.2761 2.00012H12.7171ZM12.012 9.18012C10.4075 9.18012 9.10959 10.4401 9.10959 12.0101C9.10959 13.5801 10.4075 14.8301 12.012 14.8301C13.6164 14.8301 14.8837 13.5801 14.8837 12.0101C14.8837 10.4401 13.6164 9.18012 12.012 9.18012Z" fill="black"/>
                            </svg>
                            Settings
        
                        </a>
                    </li>
                </ul>
                <ul class="nav__logouts flex flex-column flex-justify-between">
                    <li>
                        <a class="nav__logout flex flex-align-center">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.4927 2C13.9753 2 16 3.99 16 6.44V11.23H9.89535C9.45785 11.23 9.11192 11.57 9.11192 12C9.11192 12.42 9.45785 12.77 9.89535 12.77H16V17.55C16 20 13.9753 22 11.4724 22H6.51744C4.02471 22 2 20.01 2 17.56V6.45C2 3.99 4.03488 2 6.52762 2H11.4927ZM18.5402 8.5502C18.8402 8.2402 19.3302 8.2402 19.6302 8.5402L22.5502 11.4502C22.7002 11.6002 22.7802 11.7902 22.7802 12.0002C22.7802 12.2002 22.7002 12.4002 22.5502 12.5402L19.6302 15.4502C19.4802 15.6002 19.2802 15.6802 19.0902 15.6802C18.8902 15.6802 18.6902 15.6002 18.5402 15.4502C18.2402 15.1502 18.2402 14.6602 18.5402 14.3602L20.1402 12.7702H16.0002V11.2302H20.1402L18.5402 9.6402C18.2402 9.3402 18.2402 8.8502 18.5402 8.5502Z" fill="black"/>
                            </svg>
                            Logout
        
                        </a>
                    </li>
                </ul>
            </nav>
            <section class="section__main">
                <div class="flex search mb-8">
                    <button class="bg-white search__button">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7388 2C17.1088 2 21.4768 6.368 21.4768 11.738C21.4768 14.2715 20.5045 16.5823 18.9134 18.3165L22.0442 21.4407C22.3372 21.7337 22.3382 22.2077 22.0452 22.5007C21.8992 22.6487 21.7062 22.7217 21.5142 22.7217C21.3232 22.7217 21.1312 22.6487 20.9842 22.5027L17.8156 19.343C16.1488 20.6778 14.0354 21.477 11.7388 21.477C6.36876 21.477 1.99976 17.108 1.99976 11.738C1.99976 6.368 6.36876 2 11.7388 2ZM11.7388 3.5C7.19576 3.5 3.49976 7.195 3.49976 11.738C3.49976 16.281 7.19576 19.977 11.7388 19.977C16.2808 19.977 19.9768 16.281 19.9768 11.738C19.9768 7.195 16.2808 3.5 11.7388 3.5Z" fill="#919EAB"/>
                        </svg>
                    </button>
                    <input type="text" placeholder="Search anything" class="search__input">
                </div>
                <div class="bg-primary flex flex-justify-between flex-align-center banner">
                    <div>
                        <h1 class="text-4xl text-white mb-2">Assign expert to</h1>
                        <h1 class="text-4xl text-white mb-4">Manage Portfolio</h1>
                        <div class="banner__cta">
                            <button class="button bg-secondary text-white py-4 px-8">Find expert</button>
                        </div>
                    </div>
                    <div class="banner__img">
                        <img src="//repo.bfw.wiki/bfwrepo/images/shoot/banner.png" alt="banner">
                    </div>
                </div>
                <h2 class="text-2xl mb-5">My Portfolio</h2>
                <div class="portos">
                    <div class="flex flex-justify-between flex-align-center bg-white porto">
                        <svg width="48" height="48" viewBox="20 20 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2">
                            <g filter="url(#filter0_d_1_55)">
                                <rect x="20" y="20" width="48" height="48" rx="16" fill="#EF8E19"/>
                            </g>
                            <path d="M40.25 51.5V53.375C40.25 53.582 40.418 53.75 40.625 53.75H42.125C42.2245 53.75 42.3198 53.7105 42.3902 53.6402C42.4605 53.5698 42.5 53.4745 42.5 53.375V51.5H43.25V53.375C43.25 53.582 43.418 53.75 43.625 53.75H45.125C45.2245 53.75 45.3198 53.7105 45.3902 53.6402C45.4605 53.5698 45.5 53.4745 45.5 53.375V51.5H45.626C48.614 51.5 50.75 49.9505 50.75 47.27C50.75 45.017 49.2395 43.7855 47.471 43.61V43.478C48.926 43.115 49.9955 42.017 49.9955 40.193C49.9955 37.895 48.2705 36.5 45.638 36.5H45.5V34.625C45.5 34.5255 45.4605 34.4302 45.3902 34.3598C45.3198 34.2895 45.2245 34.25 45.125 34.25H43.625C43.5255 34.25 43.4302 34.2895 43.3598 34.3598C43.2895 34.4302 43.25 34.5255 43.25 34.625V36.5H42.3905V34.625C42.3905 34.5255 42.351 34.4302 42.2807 34.3598C42.2103 34.2895 42.115 34.25 42.0155 34.25H40.625C40.5255 34.25 40.4302 34.2895 40.3598 34.3598C40.2895 34.4302 40.25 34.5255 40.25 34.625V36.5L37.253 36.5165C37.1535 36.5165 37.0582 36.556 36.9878 36.6263C36.9175 36.6967 36.878 36.792 36.878 36.8915V38.375C36.878 38.5805 37.043 38.75 37.25 38.75L38.3825 38.7425C38.6796 38.7445 38.9638 38.8639 39.1732 39.0746C39.3825 39.2854 39.5 39.5704 39.5 39.8675V48.125C39.5 48.4234 39.3815 48.7095 39.1705 48.9205C38.9595 49.1315 38.6734 49.25 38.375 49.25L37.253 49.2665C37.1535 49.2665 37.0582 49.306 36.9878 49.3763C36.9175 49.4467 36.878 49.542 36.878 49.6415V51.1415C36.878 51.3485 37.046 51.5165 37.253 51.5165L40.25 51.5ZM42.3905 38.7305H44.969C46.328 38.7305 47.126 39.4775 47.126 40.6985C47.126 42.005 46.2635 42.7415 44.3105 42.7415H42.3905V38.7305ZM42.3905 44.807H45.1505C46.856 44.807 47.7845 45.677 47.7845 47.093C47.7845 48.5225 46.8455 49.268 44.5475 49.268H42.3905V44.8085V44.807Z" fill="white"/>
                            <defs>
                                <filter id="filter0_d_1_55" x="0" y="0" width="88" height="88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                    <feOffset/.........完整代码请登录后点击上方下载按钮下载查看