纯CSS框架aqua.css

下载代码

html

css

分享到微信朋友圈

html

<main class="dashboard">
  <nav class="dashboard-sidenav">
    <a href="#" class="logo">CMPC</a>
    <ul class="nav-icon-list">
      <li class="nav-icon-list__item">
        <a href="#"><svg t="1585716314757" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2469" width="20" height="20">
            <path
              d="M372.2 347.6h329.1c15.1 0 27.4-12.3 27.4-27.4 0-15.1-12.3-27.4-27.4-27.4H372.2c-15.1 0-27.4 12.3-27.4 27.4 0 15.2 12.3 27.4 27.4 27.4zM235.1 457.3h493.6c90.9 0 164.5-73.7 164.5-164.5 0-90.9-73.7-164.5-164.5-164.5v54.8c77.4 14.6 109.7 49.1 109.7 109.7S775 402.5 696.7 402.5H235.1c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.2 27.4 27.4 27.4z m274.3 164.6c-0.1 0-0.1 0 0 0H290c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.3 27.4 27.4 27.4h219.4c30.3 0 54.8 24.6 54.8 54.8 0 30.3-24.6 54.8-54.8 54.8v54.8c60.6 0 109.7-49.1 109.7-109.7-0.1-60.4-49.2-109.5-109.7-109.5z m219.3-109.7H152.8c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.3 27.4 27.4 27.4h543.9c78.3 0 141.7 49.1 141.7 109.7s-46.9 109.7-164.5 109.7v54.9h54.8c90.9 0 164.5-73.7 164.5-164.5 0-91-73.6-164.6-164.5-164.6z"
              p-id="2470"></path>
          </svg></a>
      </li>
      <li class="nav-icon-list__item">
        <a href="#"><svg t="1585716413875" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="5091" width="20" height="20" fill="white">
            <path
              d="M935.6192 68.266667 88.3808 68.266667C49.0592 68.266667 17.066667 100.8064 17.066667 140.8l0 554.666667c0 39.994667 31.991467 72.533333 71.314133 72.533333L473.6 768l0 112.424533L298.666667 880.424533c-20.795733 0-37.6544 16.858667-37.6544 37.6544S277.8688 955.733333 298.666667 955.733333l426.666667 0c20.795733 0 37.6544-16.858667 37.6544-37.6544S746.129067 880.424533 725.333333 880.424533L550.4 880.424533 550.4 768l385.2192 0C974.941867 768 1006.933333 735.461333 1006.933333 695.466667L1006.933333 140.8C1006.933333 100.8064 974.941867 68.266667 935.6192 68.266667zM930.133333 691.2 93.866667 691.2 93.866667 145.066667l836.266667 0L930.133333 691.2z"
              p-id="5092"></path>
          </svg></a>
      </li>
      <li class="nav-icon-list__item">
        <a href="#"><svg t="1585716468220" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="7384" width="20" height="20">
            <path
              d="M904 875.9H120c-30.9 0-56-25.1-56-56V204.1c0-30.9 25.1-56 56-56h231.6c12.8 0 25.2 4.4 35.2 12.4L509.9 260H904c30.9 0 56 25.1 56 56v503.8c0 31-25.1 56.1-56 56.1z m0-56v28-28zM351.6 204.1H120v615.8h784l0.1-503.8H510c-12.8 0-25.3-4.4-35.3-12.5l-123.1-99.5z"
              p-id="7385"></path>
          </svg></a>
      </li>
      <li class="nav-icon-list__item">
        <a href="#"><svg t="1585716626339" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="11970" width="20" height="20">
            <path
              d="M221.5 638.6V117.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v520.8c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v64.3c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V842c47.4-9.6 83-51.5 83-101.7s-35.6-92.1-83-101.7z m-20.7 163.9c-34.3 0-62.3-27.9-62.3-62.3s27.9-62.3 62.3-62.3c34.3 0 62.3 27.9 62.3 62.3s-28 62.3-62.3 62.3zM927 283.8c0-50.2-35.6-92-83-101.7v-64.3c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v64.3c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v520.8c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V385.4c47.4-9.6 83-51.5 83-101.6zM823.3 346c-34.3 0-62.3-27.9-62.3-62.3s27.9-62.3 62.3-62.3c34.3 0 62.3 27.9 62.3 62.3s-28 62.3-62.3 62.3zM532.8 410.3V117.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v292.6c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v292.6c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V613.7c47.4-9.6 83-51.5 83-101.7s-35.7-92-83-101.7z"
              p-id="11971"></path>
          </svg></a>
      </li>
      <li class="nav-icon-list__item">
        <a href="#"><svg t="1585716675382" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="12846" width="20" height="20">
            <path
              d="M507.050667 170.666667c85.546667 0 155.178667 61.696 155.178666 137.514666v92.544H351.872V308.181333C351.872 232.362667 421.546667 170.666667 507.050667 170.666667m276.309333 407.978666a21.333333 21.333333 0 0 0 21.333333-21.333333V499.157333c0-52.010667-44.245333-94.293333-99.797333-97.792V308.181333C704.896 208.810667 616.149333 128 507.050667 128 397.952 128 309.205333 208.810667 309.205333 308.181333v93.013334C252.629333 403.669333 207.36 446.464 207.36 499.157333v255.701334C207.36 809.173333 255.317333 853.333333 314.24 853.333333h383.488C756.693333 853.333333 804.693333 809.173333 804.693333 754.858667v-69.546667a21.333333 21.333333 0 0 0-42.666666 0v69.546667c0 30.805333-28.842667 55.808-64.298667 55.808H314.24C278.826667 810.666667 250.026667 785.664 250.026667 754.858667V499.157333c0-30.762667 28.8-55.765333 64.213333-55.765333h383.488c35.456 0 64.298667 25.002667 64.298667 55.765333v58.154667a21.333333 21.333333 0 0 0 21.333333 21.333333"
              p-id="12847"></path>
          </svg></a>
      </li>
      <li class="nav-icon-list__item">
        <a href="#"><svg t="1585716717590" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="13969" width="20" height="20">
            <path
              d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z"
              fill="" p-id="13970"></path>
          </svg></a>
      </li>
    </ul>
    <a href="#" class="logout">
      <svg t="1585716806344" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="18154" width="20" height="20">
        <path
          d="M398.933333 896h-151.466666C181.333333 896 128 842.666667 128 776.533333V247.466667C128 181.333333 181.333333 128 247.466667 128h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666666h-151.466666c-19.2 0-34.133333 14.933333-34.133334 34.133334v531.2c0 19.2 14.933333 34.133333 34.133334 34.133333h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 40.533333-42.666667 40.533333zM663.466667 744.533333c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l160-160-160-160c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l189.866667 189.866666c17.066667 17.066667 17.066667 42.666667 0 59.733334l-189.866667 189.866666c-8.533333 8.533333-19.2 12.8-29.866666 12.8z"
          p-id="18155"></path>
        <path
          d="M853.333333 554.666667H398.933333c-23.466667 0-42.666667-19.2-42.666666-42.666667s19.2-42.666667 42.666666-42.666667H853.333333c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667z"
          p-id="18156"></path>
      </svg>
    </a>
  </nav>
  <article class="dashboard-content">
    <header class="welcome-banner">
      <h2>Hello, alphardex!</h2>
      <p>Welcome back to Clean My PC</p>
    </header>
    <section class="section">
      <div class="section-titles">
        <div class="section-title">
          Mar 22-28
          <div class="btn-group nav-btns">
            <button class="btn btn-danger btn-round">
              <svg t="1585663627827" class="arrow-left-icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1157" data-darkreader-inline-fill="" width="20" height="20">
                <path d="M629.291 840.832l60.331-60.331-268.501-268.501 268.501-268.501-60.331-60.331-328.832 328.832z"
                  p-id="1158"></path>
              </svg></button><button class="btn btn-danger btn-round">
              <svg t="1585663663731" class="arrow-right-icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1391" data-darkreader-inline-fill="" width="20" height="20">
                <path d="M689.621 512l-328.832-328.832-60.331 60.331 268.501 268.501-268.501 268.501 60.331 60.331z"
                  p-id="1392"></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="section-subtitle">
          <button class="btn btn-secondary btn-round month">
            <svg t="1585661389235" fill="currentColor" class="calender-icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="6514" width="14" height="14">
              <path
                d="M810.666667 981.333333H213.333333c-72.533333 0-128-55.466667-128-128V256c0-72.533333 55.466667-128 128-128h597.333334c72.533333 0 128 55.466667 128 128v597.333333c0 72.533333-55.466667 128-128 128zM213.333333 213.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666666 42.666667h597.333334c25.6 0 42.666667-17.066667 42.666666-42.666667V256c0-25.6-17.066667-42.666667-42.666666-42.666667H213.333333z"
                p-id="6515"></path>
              <path
                d="M682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V85.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666666 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666666 42.666667zM341.333333 298.666667c-25.6 0-42.666667-17.066667-42.666666-42.666667V85.333333c0-25.6 17.066667-42.666667 42.666666-42.666666s42.666667 17.066667 42.666667 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666667zM896 469.333333H128c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666z"
                p-id="6516"></path>
            </svg>
            Month
          </button>
        </div>
      </div>
      <ul class="time-list">
        <li class="time-list__item">
          <div class="day">Mon</div>
          <div class="day-number">22</div>
          <div class="day-dot" style="--dot-color: var(--warning-color);"></div>
        </li>
        <li class="time-list__item">
          <div class="day">Tue</div>
          <div class="day-number">23</div>
          <div class="day-dot" style="--dot-color: var(--primary-color);"></div>
        </li>
        <li class="time-list__item">
          <div class="day">Wed</div>
          <div class="day-number">24</div>
          <div class="day-dot" style="--dot-color: var(--danger-color);"></div>
        </li>
        <li class="time-list__item active">
          <div class="day">Thu</div>
          <div class="day-number">25</div>
          <div class="day-dot"></div>
        </li>
        <li class="time-list__item">
          <div class="day">Fri</div>
          <div class="day-number">26</div>
          <div class="day-dot" style="--dot-color: var(--warning-color);"></div>
        </li>
        <li class="time-list__item">
          <div class="day">Sat</div>
          <div class="day-number">27</div>
          <div class="day-dot" style="--dot-color: var(--danger-color);"></div>
        </li>
        <li class="time-list__item">
          <div class="day">Sun</div>
          <div class="day-number">28</div>
          <div class="day-dot" style="--dot-color: var(--primary-color);"></div>
        </li>
      </ul>
    </section>
    <section class="section">
      <div class="section-titles">
        <div class="section-title">Weekly Reports</div>
        <div class="section-subtitle">
          <div class="weeks-option">
            <div class="weeks-option__item">Today</div>
            <div class="weeks-option__item active">Week</div>
            <div class="weeks-option__item">Month</div>
          </div>
        </div>
      </div>
      <ul class="junk-list">
        <li class="junk-list__item" style="--junk-color: var(--warning-color-darker);">
          <div class="junk-icon">
            <svg t="1585662864272" class="icon" fill="var(--junk-color)" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="9396" width="18" height="18">
              <path
                d="M949 173.6c0-40.5-32.9-73.4-73.4-73.4H148.4c-40.5 0-73.4 32.9-73.4 73.4v168.1c0 16.9 5.7 32.4 15.4 44.8-9.7 12.5-15.4 28-15.4 44.9v168.1c0 15.4 4.7 29.6 12.8 41.4-8.1 11.8-12.8 26-12.8 41.4v168.1c0 40.5 32.9 73.4 73.4 73.4h727.2c40.5 0 73.4-32.9 73.4-73.4V682.3c0-15.4-4.7-29.6-12.8-41.4 8.1-11.8 12.8-26.1 12.8-41.4V431.4c0-16.9-5.7-32.4-15.4-44.8 9.6-12.4 15.4-28 15.4-44.8V173.6z m-810 0c0-5.1 4.3-9.4 9.4-9.4h727.2c5.1 0 9.4 4.3 9.4 9.4v168.1c0 5.1-4.3 9.4-9.4 9.4H148.4c-5.1 0-9.4-4.3-9.4-9.4V173.6z m746 425.9c0 5.1-4.3 9.4-9.4 9.4H148.4c-5.1 0-9.4-4.3-9.4-9.4V431.4c0-5.1 4.3-9.4 9.4-9.4h727.2c5.1 0 9.4 4.3 9.4 9.4v168.1z m0 250.9c0 5.1-4.3 9.4-9.4 9.4H148.4c-5.1 0-9.4-4.3-9.4-9.4V682.3c0-5.1 4.3-9.4 9.4-9.4h727.2c5.1 0 9.4 4.3 9.4 9.4v168.1z"
                p-id="9397"></path>
              <path
                d="M229.2 289.7h122c17.7 0 32-14.3 32-32s-14.3-32-32-32h-122c-17.7 0-32 14.3-32 32s14.3 32 32 32zM351.1 483.4h-122c-17.7 0-32 14.3-32 32s14.3 32 32 32h122c17.7 0 32-14.3 32-32 0-17.6-14.3-32-32-32zM351.1 734.3h-122c-17.7 0-32 14.3-32 32s14.3 32 32 32h122c17.7 0 32-14.3 32-32s-14.3-32-32-32z"
                p-id="9398"></path>
            </svg>
          </div>
          <div class="junk-name">System Junk</div>
          <div class="junk-size">35 Gb</div>
        </li>
        <li class="junk-list__item" style="--junk-color: var(--danger-color-darker);">
          <div class="junk-icon">
            <svg t="1585663177457" class="icon" fill="var(--junk-color)" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="11402" width="18" height="18">
              <path
                d="M364 433.662V810c0 82.843-67.157 150-150 150S64 892.843 64 810s67.157-150 150-150c25.282 0 49.103 6.255 70 17.3V400.677a39.861 39.861 0 0 1 0-1.446V200c0-19.455 13.998-36.089 33.168-39.412l548-95C889.626 61.348 912 80.177 912 105v199.324c0.009 0.484 0.009 0.965 0 1.446V714c0 82.843-67.157 150-150 150s-150-67.157-150-150 67.157-150 150-150c25.282 0 49.103 6.255 70 17.3V352.53l-468 81.132z m0-81.193l468-81.131V152.53l-468 81.131V352.47zM214 880c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70z m548-96c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70z"
                p-id="11403"></path>
            </svg>
          </div>
          <div class="junk-name">iTunes Junk</div>
          <div class="junk-size">1.25 Gb</div>
        </li>
        <li class="junk-list__item" style="--junk-color: var(--primary-color-darker);">
          <div class="junk-icon">
            <svg t="1585663224255" class="icon" fill="var(--junk-color)" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1146" data-darkreader-inline-fill="" width="18" height="18">
              <path
                d="M896 234.666667H725.333333v-42.666667c0-70.72-57.28-128-128-128H426.666667c-70.72 0-128 57.28-128 128v42.666667H128a42.666667 42.666667 0 0 0 0 85.333333h42.666667v512c0 70.72 57.28 128 128 128h426.666666c70.72 0 128-57.28 128-128V320h42.666667a42.666667 42.666667 0 0 0 0-85.333333z m-512-42.666667c0-23.573333 19.093333-42.666667 42.666667-42.666667h170.666666c23.573333 0 42.666667 19.093333 42.666667 42.666667v42.666667H384v-42.666667z m384 640c0 23.573333-19.093333 42.666667-42.666667 42.666667H298.666667c-23.573333 0-42.666667-19.093333-42.666667-42.666667V320h512v512z"
                p-id="1147"></path>
            </svg>
          </div>
          <div class="junk-name">Trash Bins</div>
          <div class="junk-size">16.35 Gb</div>
        </li>
        <li class="junk-list__item" style="--junk-color: var(--info-color-darker);">
          <div class="junk-icon">
            <svg t="1585663289751" class="icon" fill="var(--junk-color)" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="13346" width="18" height="18">
              <path
                d="M725.333333 981.333333H298.666667c-140.8 0-256-115.2-256-256V298.666667c0-140.8 115.2-256 256-256h426.666666c140.8 0 256 115.2 256 256v426.666666c0 140.8-115.2 256-256 256zM298.666667 128C204.8 128 128 204.8 128 298.666667v426.666666c0 93.866667 76.8 170.666667 170.666667 170.666667h426.666666c93.866667 0 170.666667-76.8 170.666667-170.666667V298.666667c0-93.866667-76.8-170.666667-170.666667-170.666667H298.666667z"
                p-id="13347"></path>
              <path
                d="M512 725.333333c-46.933333 0-89.6-12.8-128-42.666666-46.933333-34.133333-76.8-85.333333-85.333333-140.8C285.866667 426.666667 366.933333 315.733333 482.133333 298.666667c21.333333-4.266667 42.666667-4.266667 64 0 93.866667 12.8 166.4 85.333333 179.2 179.2 8.533333 55.466667-4.266667 110.933333-38.4 157.866666s-85.333333 76.8-140.8 85.333334c-12.8 0-21.333333 4.266667-34.133333 4.266666z m0-341.333333h-17.066667c-68.266667 8.533333-119.466667 76.8-106.666666 145.066667 8.533333 68.266667 76.8 119.466667 145.066666 106.666666 34.133333-4.266667 64-21.333333 85.333334-51.2s29.866667-59.733333 25.6-93.866666c-8.533333-55.466667-51.2-98.133333-106.666667-106.666667H512zM746.666667 320c-12.8 0-21.333333-4.266667-29.866667-12.8-4.266667-4.266667-8.533333-8.533333-8.533333-12.8-4.266667-4.266667-4.266667-12.8-4.266667-17.066667 0-12.8 4.266667-21.333333 12.8-29.866666 17.066667-17.066667 42.666667-17.066667 59.733333 0 8.533333 8.533333 12.8 17.066667 12.8 29.866666 0 4.266667 0 12.8-4.266666 17.066667s-4.266667 8.533333-8.533334 12.8c-8.533333 8.533333-17.066667 12.8-29.866666 12.8z"
                p-id="13348"></path>
            </svg>
          </div>
          <div class="junk-name">Photo Junk</div>
          <div class="junk-size">12.10 Gb</div>
        </li>
      </ul>
    </section>
    <section class="section">
      <div class="section-titles">
        <div class="section-title">Updating Monitoring</div>
      </div>
      <ul class="monitor-list">
        <li class="monitor-list__item">
          <div class="monitor-data">
            <div class="monitor-type">System Files</div>
            <div class="monitor-date">March 2020</div>
          </div>
          <div class="monitor-gauge">
            <a href="#" class="gauge gauge-danger" style="--gauge-value: 25; --gauge-max-value: 100;"></a>
          </div>
        </li>
        <li class="monitor-list__item active">
          <div class="monitor-data">
            <div class="monitor-type">Applications</div>
            <div class="monitor-date">March 2020</div>
          </div>
          <div class="monitor-gauge">
            <a href="#" class="gauge gauge-warning" style="--gauge-value: 50; --gauge-max-value: 100;"></a>
          </div>
        </li>
      </ul>
    </section>
  </article>
  <article class="dashboard-others">
    <section class="section">
      <div class="section-titles">
        <div class="section-title">Other Functions</div>
      </div>
      <ul class="function-list">
        <li class="function-list__item" style="--function-color: var(--danger-color);">
          <div class="function">
            <div class="function-icon">
              <svg t="1585710026874" class="icon" fill="currentColor" viewBox="0 0 1093 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3269" width="18" height="18">
                <path
                  d="M682.666667 0 477.866667 0l0 819.2 204.8 0L682.666667 0zM341.333333 409.6 136.533333 409.6l0 409.6 204.8 0L341.333333 409.6zM1024 273.066667l-204.8 0 0 546.133333 204.8 0L1024 273.066667zM0 887.466667l0 136.533333 72.021333 0L1092.266667 1024l0-67.720533L1092.266667 887.466667 0 887.466667z"
                  p-id="3270"></path>
              </svg>
            </div>
            <div class="function-menu">
              <svg t="1585710109292" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7280" width="18" height="18">
                <path
                  d="M512 305.7c-57.3 0-103.8-46.5-103.8-103.8S454.7 98.2 512 98.2 615.8 144.7 615.8 202 569.3 305.7 512 305.7z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 409.5 512 409.5 615.8 456 615.8 513.3 569.3 617 512 617z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 720.8 512 720.8s103.8 46.5 103.8 103.8S569.3 928.3 512 928.3z"
                  p-id="7281"></path>
              </svg>
            </div>
          </div>
          <div class="function-data">
            <div class="function-name">Optimization</div>
            <div class="function-switch">
              <input type="checkbox" name="optimization" id="optimization" class="form-switch function-switch" />
            </div>
          </div>
        </li>
        <li class="function-list__item" style="--function-color: var(--warning-color);">
          <div class="function">
            <div class="function-icon">
              <svg t="1585711252306" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2969" fill="currentColor" width="18" height="18">
                <path
                  d="M46.545545 372.363364c-27.927727 0-46.545545-18.617819-46.545545-46.545545L0 139.636636C0 65.163364 65.163364 0 139.636636 0l186.181182 0c27.927727 0 46.545545 18.617819 46.545545 46.545545 0 27.927727-18.617819 46.545545-46.545545 46.545545L139.636636 93.091091c-27.927727 0-46.545545 18.617819-46.545545 46.545545l0 186.181182C93.091091 353.745545 74.473272 372.363364 46.545545 372.363364zM325.817819 1024 139.636636 1024C65.163364 1024 0 958.836636 0 884.364363L0 698.181182c0-27.926728 18.617819-46.545545 46.545545-46.545545 27.927727 0 46.544546 18.618818 46.544546 46.545545l0 186.182181c0 27.926728 18.617819 46.544546 46.545545 46.544546l186.181182 0c27.927727 0 46.545545 18.618818 46.545545 46.546544S353.745545 1024 325.817819 1024zM884.363364 1024 698.181182 1024c-27.926728 0-46.545545-18.617819-46.545545-46.545545s18.618818-46.546544 46.545545-46.546544l186.181182 0c27.927727 0 46.546544-18.617819 46.546544-46.544546L930.908909 698.181182c0-27.926728 18.617819-46.545545 46.545545-46.545545s46.545545 18.618818 46.545545 46.545545l0 186.182181C1024 958.836636 958.836636 1024 884.363364 1024zM977.454455 372.363364c-27.927727 0-46.545545-18.617819-46.545545-46.545545L930.908909 139.636636c0-27.927727-18.618818-46.545545-46.546544-46.545545L698.181182 93.091091c-27.926728 0-46.545545-18.617819-46.545545-46.545545 0-27.927727 18.618818-46.545545 46.545545-46.545545l186.181182 0c74.474271 0 139.636636 65.163364 139.636636 139.636636l0 186.181182C1024 353.745545 1005.382181 372.363364 977.454455 372.363364zM977.454455 558.545545 46.545545 558.545545C18.617819 558.545545 0 539.926728 0 512c0-27.927727 18.617819-46.545545 46.545545-46.545545l930.908909 0c27.927727 0 46.545545 18.617819 46.545545 46.545545C1024 539.926728 1005.382181 558.545545 977.454455 558.545545z"
                  p-id="2970"></path>
              </svg>
            </div>
            <div class="function-menu">
              <svg t="1585710109292" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7280" width="18" height="18">
                <path
                  d="M512 305.7c-57.3 0-103.8-46.5-103.8-103.8S454.7 98.2 512 98.2 615.8 144.7 615.8 202 569.3 305.7 512 305.7z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 409.5 512 409.5 615.8 456 615.8 513.3 569.3 617 512 617z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 720.8 512 720.8s103.8 46.5 103.8 103.8S569.3 928.3 512 928.3z"
                  p-id="7281"></path>
              </svg>
            </div>
          </div>
          <div class="function-data">
            <div class="function-name">Smart Scan</div>
            <div class="function-switch">
              <input type="checkbox" name="optimization" id="optimization" class="form-switch function-switch" />
            </div>
          </div>
        </li>
        <li class="function-list__item" style="--function-color: var(--primary-color);">
          <div class="function">
            <div class="function-icon">
              <svg t="1585711389204" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="11576" width="18" height="18">
                <path
                  d="M1000.7956 359.920402c-17.526241-65.903606-61.761093-130.706857-63.702896-133.534239-9.20591-13.392554-27.523582-16.773056-40.913194-7.564204-12.474611 8.58218-16.2523 25.066908-9.26181 38.106407l-0.114743 0.050017c0.535467 0.788489 1.047397 1.59169 1.579921 2.383121 0.079437 0.123569 0.147107 0.253022 0.232428 0.376592 0.020595 0.035306 0.179469 0.264791 0.438377 0.653152 1.188618 1.779985 2.359585 3.577624 3.521724 5.378205 3.321659 5.172257 8.440957 13.395497 14.289903 23.681166 0.764952 1.359261 1.541674 2.706755 2.291915 4.074843 12.356926 22.186566 27.144048 52.446325 34.890664 81.958784 1.132718 3.61293 2.230131 7.24057 3.280469 10.891748 2.286031 7.976102 4.401419 16.03164 6.269669 24.184269 27.099915 117.946859 6.637435 239.391907-57.609755 341.957336-64.244248 102.565428-164.582487 173.970809-282.538174 201.06484-117.952744 27.099915-239.394849 6.637435-341.960277-57.606813s-173.970809-164.585429-201.06484-282.541116c-27.094031-117.949802-6.634492-239.394849 57.609755-341.957336 64.24719-102.565428 164.585429-173.973751 282.538174-201.06484 69.122291-15.87865 139.439085-15.399084 206.457757 0.623731 44.276043 10.591651 87.107502 27.964901 127.202786 51.925568 2.774424 1.6623 5.545906 3.33637 8.296793 5.060456l0.079437-0.126512c13.595561 7.61422 30.909968 3.321659 39.271488-10.026763 8.626311-13.772088 4.45732-31.927943-9.314768-40.551313-0.597251-0.37365-3.901258-2.427253-9.303-5.557675C535.015981-69.782878 226.08106 4.111541 78.171597 240.234746c-150.089579 239.60374-77.522059 555.51444 162.084623 705.604018 239.606682 150.089579 555.51444 77.519117 705.604018-162.087565C1028.316241 652.11463 1043.532912 497.461816 1000.7956 359.920402zM774.872743 316.268089l-262.187493 339.691899-6.39618 8.285025-8.429189-6.184347-221.071292-162.184655c-13.0954-9.611923-31.513103-6.78454-41.125027 6.316743-9.614865 13.104226-6.78454 31.513103 6.316743 41.122085l240.671731 176.568706 11.577263 8.493915c4.954539 2.356643 10.473966 3.712962 16.322911 3.712962 9.491297 0 18.152913-3.48936 24.825653-9.229447l9.391264-12.171572 276.683344-358.468542c9.929673-12.862972 7.549494-31.339518-5.313478-41.266249C803.276021 301.033765 784.802417 303.40806 774.872743 316.268089z"
                  p-id="11577"></path>
              </svg>
            </div>
            <div class="function-menu">
              <svg t="1585710109292" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7280" width="18" height="18">
                <path
                  d="M512 305.7c-57.3 0-103.8-46.5-103.8-103.8S454.7 98.2 512 98.2 615.8 144.7 615.8 202 569.3 305.7 512 305.7z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 409.5 512 409.5 615.8 456 615.8 513.3 569.3 617 512 617z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 720.8 512 720.8s103.8 46.5 103.8 103.8S569.3 928.3 512 928.3z"
                  p-id="7281"></path>
              </svg>
            </div>
          </div>
          <div class="function-data">
            <div class="function-name">Malware</div>
            <div class="function-switch">
              <input type="checkbox" name="optimization" id="optimization" class="form-switch function-switch" />
            </div>
          </div>
        </li>
        <li class="function-list__item update-function" style="--function-color: var(--secondary-color);">
          <div class="function">
            <div class="function-icon">
              <svg t="1585711550670" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="14651" width="18" height="18">
                <path
                  d="M171.309757 549.028173C146.751772 395.45579 231.111425 240.268869 381.752145 181.550641c111.636862-43.528816 232.004979-22.709763 317.235633 39.471225l-72.526783 117.478943 325.244596-1.253392L835.458797 0l-59.546741 96.426206c-125.572881-81.321771-296.756483-107.919173-446.653666-49.477117C121.577713 127.909713 2.038109 337.289905 25.640117 549.028173L171.309757 549.028173z"
                  p-id="14652"></path>
                <path
                  d="M852.687625 464.965935c24.536741 153.572383-59.780424 308.780549-210.421144 367.477532-102.693166 40.023567-215.859591 24.940376-302.874735-29.019211 16.570267-26.894818 65.53753-106.198415 65.53753-106.198415L55.169182 676.704203l148.006473 347.295797 62.053525-100.483797c125.551637 81.321771 279.591386 101.992117 429.488569 43.55006 207.638189-80.981868 327.220281-290.340816 303.618273-502.05784L852.687625 465.008423z"
                  p-id="14653"></path>
              </svg>
            </div>
            <div class="function-menu">
              <svg t="1585710109292" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7280" width="18" height="18">
                <path
                  d="M512 305.7c-57.3 0-103.8-46.5-103.8-103.8S454.7 98.2 512 98.2 615.8 144.7 615.8 202 569.3 305.7 512 305.7z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 409.5 512 409.5 615.8 456 615.8 513.3 569.3 617 512 617z m0 311.3c-57.3 0-103.8-46.5-103.8-103.8S454.7 720.8 512 720.8s103.8 46.5 103.8 103.8S569.3 928.3 512 928.3z"
                  p-id="7281"></path>
              </svg>
            </div>
          </div>
          <div class="function-data">
            <div class="function-name">Updater</div>
            <div class="function-switch">
              <input type="checkbox" name="optimization" id="optimization" class="form-switch function-switch" />
            </div>
          </div>
        </li>
      </ul>
    </section>
    <section class="section">
      <div class="section-titles">
        <div class="section-title">
          Statistics of Cleaning
        </div>
      </div>
      <div class="statistics">
        <div class="progress-data">
          <div class="progress-text">
            <div class="progress-weekday">CURRENT/FRIDAY</div>
            <div class="progress-rate">58%</div>
          </div>
        </div>
        <ul class="progress-list">
          <li class="progress-list__item">
            <div class="weekday-abbr">
              MO
            </div>
            <progress class="progress-bar" max="145" value="109"></progress>
          </li>
          <li class="progress-list__item">
            <div class="weekday-abbr">
              TU
            </div>
            <progress class="progress-bar" max="145" value="74"></progress>
          </li>
          <li class="progress-list__item">
            <div class="weekday-abbr">
              WE
            </div>
            <progress class="progress-bar" max="145" value="55"></progress>
          </li>
          <li class="progress-list__item active">
            <div class="weekday-abbr">
              TH
            </div>
            <progress class="progress-bar" max="145" value="118"></progress>
          </li>
          <li class="progress-list__item">
            <div class="weekday-abbr">
              FR
            </div>
            <progress class="progress-bar" max="145" value="90"></progress>
          </li>
          <li class="progress-list__item">
            <div class="weekday-abbr">
              SA
            </div>
            <progress class="progress-bar" max="145" value="116"></progress>
          </li>
          <li class="progress-list__item">
            <div class="weekday-abbr">
              SU
            </div>
            <progress class="progress-bar" max="145" value="72"></progress>
          </li>
        </ul>
      </div>
    </section>
  </article>
</main>

css

@import url("https://alphardex.github.io/static/aqua.min.css");
body {
  min-height: 100vh;
  margin: 0;
  font-size: 14px;
  color: var(--secondary-color-darkest);background-color: #fff
}

:root {
  --secondary-color: hsl(240, 56%, 98%);
  --secondary-color-darker: hsl(240, 56%, 90%);
  --secondary-color-darkest: hsl(243, 24%, 43%);
  --info-color-darker: rgb(51, 42, 124);
  --info-color-lighter: rgb(92, 95, 178);
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 48px;
  margin: 12px;
}

.dashboard-sidenav {
  display: grid;
  grid-template-rows: repeat(3, auto);
  justify-items: center;
  color: white;
  background: var(--info-color-darker);
  border-radius: 30px;
}

.logo {
  padding: 36px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.nav-icon-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.nav-icon-list__item {
  padding: 36px;
}
.nav-icon-list__item:first-child {
  padding-top: 0;
}

.logout {
  padding: 36px;
}

.welcome-banner {
  padding: 18px 36px;
  color: white;
  background: var(--warning-color-darker);
  border-radius: 20px;
}

.section-titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0;
}

.section-title {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  font-size: 18px;
}

.nav-btns {
  --divider-length: 0;
  margin-left: 24px;
}
.nav-btns .btn {
  padding: 9px 0;
  line-height: 1;
}
.nav-btns .btn:first-child {
  padding-left: 15px;
  padding-right: 3px;
}
.nav-btns .btn:last-child {
  padding-left: 3px;
  padding-right: 15px;
}

.month {
  padding: 9px 18px;
  color: var(--secondary-color-darkest);
}

.time-list {
  display: grid;
  grid-template-columns: repeat(7, auto);
  column-gap: 21px;
  padding: 18px 0;
  border: 1px solid var(--secondary-color-lighter);
  border-left: none;
  border-right: none;
  list-style-type: none;
}
.time-list__item {
  display: grid;
  grid-template-rows: repeat(3, auto);
  justify-items: center;
  padding: 16px 12px;
  border-radius: 20px;
}
.time-list__item.active {
  color: white;
  background: var(--danger-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.time-list__item .day {
  margin-bottom: 18px;
}
.time-list__item .day-number {
  margin-bottom: 8px;
}
.time-list__item .day-dot {
  width: 6px;
  height: 6px;
  background: var(--dot-color, currentColor);
  border-radius: 50%;
}

.weeks-option {
  display: flex;
}
.weeks-option__item:not(:last-child) {
  margin-right: 21px;
}
.weeks-option__item:not(.active) {
  opacity: 0.5;
}

.junk-list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 30px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.junk-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 24px;
  border: 1px solid var(--secondary-color-lighter);
  border-radius: 20px;
}
.junk-list__item .junk-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--junk-color);
  border-radius: 10px;
}
.junk-list__item .junk-name {
  margin-top: 18px;
  white-space: nowrap;
}
.junk-list__item .junk-size {
  margin-top: 9px;
  font-size: 18px;
  white-space: nowrap;
}

.monitor-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.monitor-list__item {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  padding: 15px 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.monitor-list__item .monitor-data {
  padding: 18px 0;
}
.monitor-list__item .monitor-data .monitor-type {
  font-weight: bold;
  white-space: nowrap;
  margin: 0 40px 18px 0;
}
.monitor-list__item .monitor-gauge {
  padding: 0 0 0 40px;
  border-left: 1px solid var(--secondary-color-lighter);
}
.monitor-list__item .monitor-gauge .gauge {
  --gauge-color-lighter: var(--secondary-color);
  --text-color: var(--secondary-color-darkest);
  width: 70px;
  height: 70px;
}
.monitor-list__item .monitor-gauge .gauge::before {
  width: 87%;
  height: 87%;
  content: counter(value) "%";
}
.monitor-list__item.active {
  color: white;
  background: var(--info-color-darker);
}
.monitor-list__item.active .monitor-gauge {
  border-left-color: var(--info-color-lighter);
}
.monitor-list__item.active .gauge {
  --bg-color: var(--info-color-darker);
  --gauge-color-lighter: var(--info-color-lighter);
  color: white;
}

.dashboard-others {
  padding: 18px 48px;
  background: var(--secondary-color);
  border-radius: 30px;
}

.function-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.function-list__item {
  padding: 4px;
  background: white;
  border-radius: 15px;
}
.function-list__item .function {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  color: white;
  background: var(--function-color);
  border-radius: 15px;
}
.function-list__item .function-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.function-list__item .function-data {
  display: flex;
  justify-content: space-between;
  padding: 30px 16px 21px 16px;
}
.function-list__item .function-name {
  margin-right: 22px;
  white-space: nowrap;
}
.function-list__item .function-switch {
  --switch-ball-color: var(--function-color);
  --switch-checked-color: var(--function-color);
  --border-color: var(--function-color);
  --switch-hover-color: transparent;
  --switch-disabled-checked-color: transparent;
}
.function-list__item .function-switch:checked {
  --border-color: var(--function-color);
}
.function-list__item.update-function .function-icon {
  color: var(--secondary-color-darker);
  background: white;
}
.function-list__item.update-function .function-menu {
  color: var(--secondary-color-darker);
}
.function-list__item.update-function .function-switch {
  --switch-ball-color: var(--secondary-color-darker);
  --switch-checked-color: var(--secondary-color-darker);
  --border-color: var(--secondary-color-darker);
  --switch-hover-color: transparent;
  --switch-disabled-checked-color: transparent;
}
.function-list__item.update-function .function-switch:checked {
  --border-color: var(--secondary-color-darker);
}

.statistics {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.statistics .progress-data {
  display: flex;
  justify-content: space-between;
}
.statistics .progress-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.statistics .progress-weekday {
  margin-bottom: 14px;
}
.statistics .progress-rate {
  font-size: 18px;
  font-weight: bold;
}
.statistics .progress-list {
  display: grid;
  gap: 40px;
  padding: 30px 0 0 0;
  margin: 0;
  list-style-type: none;
}
.statistics .progress-list__item {
  display: flex;
  align-items: center;
}
.statistics .progress-list__item .weekday-abbr {
  box-sizing: border-box;
  padding-right: 36px;
  max-width: 32px;
}
.statistics .progress-list__item .progress-bar {
  --bar-color: var(--secondary-color);
  width: 300px;
}
.statistics .progress-list__item.active .weekday-abbr {
  color: var(--warning-color);
}
.statistics .progress-list__item.active .progress-bar {
  --progress-color: var(--warning-color);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg