1.框架样式

源码

 

2.各种样式库

 

 

 

 

 还有很多元素,就不一一截图列举了。。

3.首页源码如

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>XXX管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
  
<body data-logobg="color_8" data-sidebarbg="color_8">
<div class="layout-web">
  <div class="layout-container">
    <!--左侧导航-->
    <aside class="layout-sidebar">
      
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="index.html"><h4 style="color:#fff; height:50px; margin-top:20px">XXXXX管理系统</h4></a>
      </div>
      <div class="layout-sidebar-scroll"> 
        
        <nav class="sidebar-main">
          <ul class="nav nav-drawer">
            <li class="nav-item active"> <a href="index.html"><i class="mdi mdi-home"></i> 工作台</a> </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> 快递任务管理</a>
               <ul class="nav nav-subnav">
                <li> <a href="ui_tables.html">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i>  发送业务管理</a>
               <ul class="nav nav-subnav">
                <li> <a href="#!">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i>快递追踪</a>
             <ul class="nav nav-subnav">
                <li> <a href="#!">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i>快递签收 </a>
              <ul class="nav nav-subnav">
                <li> <a href="#!">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 资料归档</a>
              <ul class="nav nav-subnav">
                <li> <a href="#!">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
			
			   <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 查询统计</a>
              <ul class="nav nav-subnav">
                <li> <a href="#!">一级菜单</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">一级菜单</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="#!">一级菜单</a> </li>
              </ul>
            </li>
			
			   <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 系统管理</a>
              <ul class="nav nav-subnav">
                <li> <a href="#!">门店管理</a> </li>
                <li class="nav-item nav-item-has-subnav"> 
                  <a href="#!">用户管理</a>
                  <ul class="nav nav-subnav">
                    <li> <a href="#!">二级菜单</a> </li>
                    <li class="nav-item nav-item-has-subnav"> 
                      <a href="#!">二级菜单</a>
                      <ul class="nav nav-subnav">
                        <li> <a href="#!">三级菜单</a> </li>
                        <li> <a href="#!">三级菜单</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
				<li> <a href="#!">XX公司</a> </li>
                <li> <a href="#!">基础数据</a> </li>
              </ul>
            </li>
			
          </ul>
        </nav>
        
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019.  All rights <a href="http://www.bootstrapmb.com/">reserved</a>. </p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="aside-toggler">
              <span class="toggler-bar"></span>
              <span class="toggler-bar"></span>
              <span class="toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 工作台 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
                <span>管理员 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> <a href="pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
            <!--切换主题配色-->
		    <li class="dropdown dropdown-skin">
			  <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
			  <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                <li class="drop-title"><p>主题</p></li>
                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                </li>
			    <li class="drop-title"><p>LOGO</p></li>
				<li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
				</li>
				<li class="drop-title"><p>头部</p></li>
				<li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>                      
                  </span>                                                    
                  <span>                                                     
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
				</li>
				<li class="drop-title"><p>侧边栏</p></li>
				<li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                  <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
				</li>
			  </ul>
			</li>
            <!--切换主题配色-->
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="layout-content">
      
      <div class="container-fluid">
	  
	   <div class="card-header">
                <h4>待办事务</h4>
              </div>
        
        <div class="row">
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-primary">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">待办任务数</p>
                  <p class="h3 text-white m-b-0">0</p>
                </div>
                <div class="pull-left"> <img src="images/193.png"/> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-danger">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">已办任务数据</p>
                  <p class="h3 text-white m-b-0">0</p>
                </div>
                <div class="pull-left"> <img src="images/194.png"/></div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-success">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">签订合同客户数</p>
                  <p class="h3 text-white m-b-0">0</p>
                </div>
                <div class="pull-left"> <img src="images/195.png"/> </div>
              </div>
            </div>
          </div>
          
          <div class="col-sm-6 col-lg-3">
            <div class="card bg-purple">
              <div class="card-body clearfix">
                <div class="pull-right">
                  <p class="h6 text-white m-t-0">快递文件分数</p>
                  <p class="h3 text-white m-b-0">0 份</p>
                </div>
                <div class="pull-left"> <img src="images/196.png"/>  </div>
              </div>
            </div>
          </div>
        </div>
		
		<div class="row">
          
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4>待办快递任务清单</h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>序号</th>
                        <th>任务单号</th>
                        <th>日期</th>
                        <th>合同个数</th>
                        <th>操作</th>
                        
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>CY202006139</td>
                        <td>10/02/2019</td>
                        <td>7</td>
                        <td><span class="label label-warning">办理</span></td>
                       
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>CY202006139</td>
                        <td>01/03/2019</td>
                       <td>2</td>
                        <!-- <td><span class="label label-success">进行中</span></td> -->
						 <td><span class="label label-warning">办理</span></td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>CY202006139</td>
                         <td>10/10/2019</td>
                         <td>9</td>
                        <!-- <td><span class="label label-warning">待定</span></td> -->
						 <td><span class="label label-warning">办理</span></td>
                      </tr>
                      <tr>
                        <td>4</td>
                        <td>CY202006139</td>
                        <td>25/01/2019</td>
                        <td>10</td>
                        <!-- <td><span class="label label-success">进行中</span></td> -->
						 <td><span class="label label-warning">办理</span></td>
                      </tr>
                      <tr>
                        <td>5</td>
                        <td>CY202006139</td>
                        <td>10/10/2019</td>
                        <td>6</td>
                        <!-- <td><span class="label label-danger">未开始</span></td> -->
						 <td><span class="label label-warning">办理</span></td>
                      </tr>
                      <tr>
                        <td>6</td>
                        <td>CY202006139</td>
                        <td>10/01/2019</td>
                        <td>8</td>
                        <!-- <td><span class="label label-success">进行中</span></td> -->
						 <td><span class="label label-warning">办理</span></td>
                      </tr>
                      <tr>
                        <td>7</td>
                        <td>CY202006139</td>
                        <td>25/02/2019</td>
                        <td>5</td>
                        <!-- <td><span class="label label-danger">暂停</span></td> -->
						 <td><span class="label label-warning">办理</span></td>
                      </tr>
                      <tr>
                        <td>8</td>
                        <td>CY202006139</td>
                        <td>10/02/2019</td>
                        <td>3</td>
                        <td><span class="label label-warning">办理</span></td>
						
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-success" style="width: 100%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          
        </div>
		
				<!-- <div class="row"> -->
          
          <!-- <div class="col-lg-12"> -->
            <!-- <div class="card"> -->
              <!-- <div class="card-header"> -->
                <!-- <h4>补充快递任务清单</h4> -->
              <!-- </div> -->
              <!-- <div class="card-body"> -->
                <!-- <div class="table-responsive"> -->
                  <!-- <table class="table table-hover"> -->
                    <!-- <thead> -->
                      <!-- <tr> -->
                        <!-- <th>序号</th> -->
                        <!-- <th>原任务单号</th> -->
                        <!-- <th>返回日期</th> -->
                        <!-- <th>备注</th> -->
                        <!-- <th>操作</th> -->
                        <!-- <th>进度</th> -->
                      <!-- </tr> -->
                    <!-- </thead> -->
                    <!-- <tbody> -->
                      <!-- <tr> -->
                        <!-- <td>1</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>10/02/2019</td> -->
                        <!-- <td>7</td> -->
                        <!-- <td><span class="label label-warning">待定</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-warning" style="width: 45%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>2</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>01/03/2019</td> -->
                       <!-- <td>2</td> -->
                        <!-- <td><span class="label label-success">进行中</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-success" style="width: 30%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>3</td> -->
                        <!-- <td>CY202006139</td> -->
                         <!-- <td>10/10/2019</td> -->
                         <!-- <td>9</td> -->
                        <!-- <td><span class="label label-warning">待定</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-warning" style="width: 25%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>4</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>25/01/2019</td> -->
                        <!-- <td>10</td> -->
                        <!-- <td><span class="label label-success">进行中</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-success" style="width: 55%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>5</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>10/10/2019</td> -->
                        <!-- <td>6</td> -->
                        <!-- <td><span class="label label-danger">未开始</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-danger" style="width: 0%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>6</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>10/01/2019</td> -->
                        <!-- <td>8</td> -->
                        <!-- <td><span class="label label-success">进行中</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-success" style="width: 75%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>7</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>25/02/2019</td> -->
                        <!-- <td>5</td> -->
                        <!-- <td><span class="label label-danger">暂停</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-danger" style="width: 15%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                      <!-- <tr> -->
                        <!-- <td>8</td> -->
                        <!-- <td>CY202006139</td> -->
                        <!-- <td>10/02/2019</td> -->
                        <!-- <td>3</td> -->
                        <!-- <td><span class="label label-warning">完成</span></td> -->
                        <!-- <td> -->
                          <!-- <div class="progress progress-striped progress-sm"> -->
                            <!-- <div class="progress-bar progress-bar-success" style="width: 100%;"></div> -->
                          <!-- </div> -->
                        <!-- </td> -->
                      <!-- </tr> -->
                    <!-- </tbody> -->
                  <!-- </table> -->
                <!-- </div> -->
              <!-- </div> -->
            <!-- </div> -->
          <!-- </div> -->
          
        <!-- </div> -->
		<h4 style="font-size:16px; margin-left:20px">补充快递任务清单</h4>
		<div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                       <th>序号</th>
                        <th>原任务单号</th>
                        <th>返回日期</th>
                        <th>备注</th>
                        <th>操作</th>
                        
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td>CY202006139</td>
                        <td>2020/07/11</td>
                        <td>某某客户身份证没有签字</td>
                        <td>办理</td>
                     
                      </tr>
                      <tr>
                        <th scope="row">2</th>
                        <td>CY202006139</td>
                        <td>2020/07/11</td>
                        <td>某某客户身份证没有签字</td>
                        <td>办理</td>
                       
                      </tr>
                      <tr>
                        <th scope="row">3</th>
                        <td>CY202006139</td>
                        <td>2020/07/11</td>
                        <td>某某客户身份证没有签字</td>
                        <td>办理</td>

                      </tr>
                    </tbody>
                  </table>
                </div>
        
        <div class="row">
          
          <div class="col-lg-6"> 
            <div class="card">
              <div class="card-header">
                <h4>每周用户</h4>
              </div>
              <div class="card-body">
                <canvas class="js-chartjs-bars"></canvas>
              </div>
            </div>
          </div>
          
          <div class="col-lg-6"> 
            <div class="card">
              <div class="card-header">
                <h4>交易历史记录</h4>
              </div>
              <div class="card-body">
                <canvas class="js-chartjs-lines"></canvas>
              </div>
            </div>
          </div>
           
        </div>
        
        
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
        $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
    
    var $dashChartBarsData = {
		labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
		datasets: [
			{
				label: '注册用户',
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0)',
				backgroundColor: 'rgba(51,202,185,0.5)',
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
				data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
			}
		]
	};
    var $dashChartLinesData = {
		labels: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
		datasets: [
			{
				label: '交易资金',
				data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
				borderColor: '#358ed7',
				backgroundColor: 'rgba(53, 142, 215, 0.175)',
                borderWidth: 1,
                fill: false,
                lineTension: 0.5
			}
		]
	};
    
    new Chart($dashChartBarsCnt, {
        type: 'bar',
        data: $dashChartBarsData
    });
    
    var myLineChart = new Chart($dashChartLinesCnt, {
        type: 'line',
        data: $dashChartLinesData,
    });
});
</script>
</body>
</html>

 4.源码

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐