<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>网站后台管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../static/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style type="text/css">
#li1{
list-style: none;
font-size: 16px;
}
</style>
<style type="text/css">
@media (min-width:768px) {
#slider_sub{
width:180px;
margin-top: 55px;
position: absolute;
z-index: 1;
height:650px;
}
.page_main{margin-left: 180px;margin-top: -18px;}
}
</style>
</head>
<body>
<!--先设置个响应式导航条-->
<nav class="navbar navbar-default navbar-static-top" style="background: #204d74">
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" style="color:white;margin-top: -25px"><h2>数据中心采集系统</h2></a>
</div>
<ul class="navbar-nav navbar-right" style="margin-right:25px; margin-top: 20px">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-home"></span> 退出</a></li>
</ul>
<!--侧边功能栏-->
<div class="navbar-default navbar-collapse" id="slider_sub">
<ul class="nav">
<li>
<a href="#" data-toggle="collapse" data-target="#sub1">用户信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub1" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-user"></span> 个人信息</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#sub2">店铺信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub2" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-book"></span> 基础档案</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 区域分布</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#sub3">数据信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub3" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-yen"></span> 银行现金</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-usd"></span> 外卖收入</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-gbp"></span> 小程序</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-ruble"></span> 成本费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-btc"></span> 经营费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-paperclip"></span> 报销费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-random"></span> 人事费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-euro"></span> 初始投资</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-remove"></span> 未返款</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-magnet"></span> 净利润</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--中间部分-->
<div class="page_main">
<!--面包导航-->
<ol class="breadcrumb" style="background: #265a88;">
<li style="margin-left: 10px;color: white" >您当前的位置：</li>
<li><a href="#">用户信息</a></li>
<li><a href="#">人个信息</a></li>
</ol>
<!--表格内容-->
<div class="container" style="margin-left: -5px;">
<!--筛选条件框-->
<form method="post" style="margin-top: -20px;">
<h5>
<div class="appNameSelect" style="width:1300px;">
<label >店铺名称:</label>
<input id="appName_1" name="appName_1" placeholder="输入店铺名称" type="text" list="appNamelist" style="padding:0.3em;border-radius:3px;" >
<datalist id="appNamelist">
<option>桂源铺(大华乐购店) </option>
<option>桂源铺(大华第一坊) </option>
</datalist>
<label >店铺代码:</label>
<input id="appName_5" name="appName_5" placeholder="输入店铺代码" type="text" list="appNamelist_5" style="padding:0.3em;border-radius:3px;" >
<datalist id="appNamelist_5">
<option>G1057 </option>
<option>G1022 </option>
</datalist>
<label>    年份:</label>
<select id="appName_2" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<label >-- 月份:</label>
<select id="appName_3" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<label >    科目类型:</label>
<select id="appName_4" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>现金 </option>
<option>货币 </option>
</select>
<button type="submit" class="btn btn-primary" id="btn">查 询</button>
<button type="submit" class="btn btn-success" id="btn">新 增</button>
</div>
</h5>
</form>
<!--表格内容框-->
<div class="panel panel-default" style="width:1200px;">
<div class="panel-heading">最新订单</div>
<div class="panel-body ">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>日期</th>
<th>店铺名称</th>
<th>店铺代码</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>2</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>3</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
</tr>
<tr>
<td>4</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>5</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination" style="margin-top: 2px;">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../static/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
