for-the-first-time
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body class="application application-offset">
    <div class="container-fluid container-application">
      <div class="sidenav show" id="sidenav-main">
        <!-- Sidenav header -->
        <div class="sidenav-header d-flex align-items-center">
          <a class="navbar-brand" href="./index.html">
            <span class="logo">·ITCAST·</span>
          </a>
        </div>
        <!-- User mini profile -->
        <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
          <!-- Avatar -->
          <div>
            <a href="#" class="avatar rounded-circle avatar-xl">
              <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" class="" />
            </a>
            <div class="mt-5">
              <h5 class="mb-0 text-white">黑马前端</h5>
              <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
              <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
                <span class="btn-inner--text">学前端来黑马</span>
              </a>
            </div>
          </div>
        </div>
        <!-- Application nav -->
        <div class="nav-application clearfix">
          <a href="./index.html" class="btn btn-square text-sm active">
            <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">首页</span>
          </a>
          <a href="./student.html" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">学生</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">排版</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">资料</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">就业</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">设置</span>
          </a>
        </div>
        <!-- Misc area -->
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <h5 class="text-white">哈喽, 朋友!</h5>
            <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
            <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
          </div>
        </div>
      </div>
      <div class="main-content position-relative">
        <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
          <div class="container-fluid">
            <!-- Navbar nav -->
            <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
              <ul class="navbar-nav align-items-lg-center">
                <!-- Home  -->
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                </li>
              </ul>
              <!-- Right menu -->
              <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
                <li class="nav-item dropdown dropdown-animate">
                  <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="media media-pill align-items-center">
                      <span class="avatar rounded-circle">
                        <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                      </span>
                      <div class="ml-2 d-none d-lg-block">
                        <span class="mb-0 text-sm font-weight-bold">Admin</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="page-content">
          <!-- Page Title -->
          <div class="page-title">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
                <span class="text-sm text-white opacity-8">深圳前端 xx 期</span>
              </div>
            </div>
          </div>
          <!-- charts -->
          <div class="row">
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">就业薪资</h6>
                      <span name="salary" class="h3 font-weight-bold mb-0">15500</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-coin"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">班级人数</h6>
                      <span name="student_count" class="h3 font-weight-bold mb-0">80</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-people"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">平均年龄</h6>
                      <span name="age" class="h3 font-weight-bold mb-0">24.40</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-calendar2-week"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <!-- Card body -->
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">小组个数</h6>
                      <span name="group_count" class="h3 font-weight-bold mb-0">8</span>
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-collection"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col col-xl-8">
              <div class="card" id="line" style="height: 400px"></div>
            </div>
            <div class="col col-xl-4">
              <div class="card" id="salary" style="height: 400px"></div>
            </div>
            <div class="col col-xl-12">
              <div class="card" style="height: 400px">
                <div class="card-header">
                  <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">班级每组薪资</h6>
                    <div id="btns">
                      <button type="button" class="btn btn-xs btn-blue">1</button>
                      <button type="button" class="btn btn-xs">2</button>
                      <button type="button" class="btn btn-xs">3</button>
                      <button type="button" class="btn btn-xs">4</button>
                      <button type="button" class="btn btn-xs">5</button>
                      <button type="button" class="btn btn-xs">6</button>
                      <button type="button" class="btn btn-xs">7</button>
                      <button type="button" class="btn btn-xs">8</button>
                    </div>
                  </div>
                </div>
                <div class="card-body p-0" id="lines"></div>
              </div>
            </div>
            <div class="col col-xl-4">
              <div class="card" id="gender" style="height: 500px"></div>
            </div>
            <div class="col col-xl-8">
              <div class="card" id="map" style="height: 500px"></div>
            </div>
          </div>
          <!-- footer -->
          <div class="footer pt-5 pb-4 footer-light" id="footer-main">
            <div class="row text-center text-sm-left align-items-sm-center">
              <div class="col-sm-6">
                <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>. All rights reserved.</p>
              </div>
              <div class="col-sm-6 mb-md-0">
                <ul class="nav justify-content-center justify-content-md-end">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Terms</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pr-0" href="#">Privacy</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./lib/china.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>