abstract：全部自己做的，第一次做比較慢點，還有很多細節(jié)還沒做的很好。先交了。效果圖：1、首頁2、維修單據(jù)列表頁3、維修開單頁4、模態(tài)框(彈層)1、首頁代碼<!doctype html> <html> <head> <meta charset="UTF-8"> &
全部自己做的，第一次做比較慢點，還有很多細節(jié)還沒做的很好。先交了。
效果圖：
1、首頁
2、維修單據(jù)列表頁
3、維修開單頁
4、模態(tài)框(彈層)
1、首頁代碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
<title>后臺管理</title>
</head>
<body>
<!-- 頂部導航 -->
<nav class="navbar navbar-inverse">
<div>
<!-- 導航前部 -->
<div>
<a href="#">
<img alt="Brand" src="a.jpg" height="100%">
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">客 戶</a></li>
<li><a href="#">單 據(jù)</a></li>
<li><a href="#">財 務</a></li>
<li><a href="#">采 購</a></li>
<li><a href="#">倉 庫</a></li>
<li><a href="#">系統(tǒng)設置</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>歡迎您,admin</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">修改密碼</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal">安全退出</a></li>
</ul>
</div>
</div>
</nav>
<!-- 修改密碼確認框 -->
<div class="modal fade" id="myModal">
<!-- 創(chuàng)建一個對話框 -->
<div>
<div>
<!-- 模態(tài)框頭部 -->
<div>
<!-- 關閉按鈕 -->
<button type="button" data-dismiss="modal" aria-label="Clost">×</button>
<h4>修改密碼</h4>
</div>
<!-- 模態(tài)框主體 -->
<div class="modal-body ">
<form action="">
<div>
<label class="control-label col-sm-2" for="user">賬號:</label>
<div>
<p>admin</p>
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">身份:</label>
<div>
<input type="text" placeholder="超級管理員" readonly>
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">密碼:</label>
<div>
<input type="password" id="password" placeholder="請輸入新密碼">
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">密碼:</label>
<div>
<input type="password" id="password" placeholder="請再次輸入新密碼">
</div>
</div>
</form>
</div>
<!-- 模態(tài)框底部 -->
<div>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">關閉</button>
<!-- 用戶自定義功能按鈕:確定/保存/提交 -->
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 左側菜單及內容區(qū) -->
<div>
<div>
<!-- 左側菜單區(qū) -->
<div>
<!-- 左側菜單折疊 -->
<div id="accordion">
<div class="panel panel-default">
<div>
<h5>
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" style="">
維修管理
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div>
<a href="javascript:;"onclick="menuFire(this)" src="kaidan.html" style="text-decoration:none;color: #333;">維修開單</a>
</div>
<div >
<a href="javascript:;"onclick="menuFire(this)" src="danju.html" style="text-decoration:none;color: #333;">維修單據(jù)</a>
</div>
<div>
維修作廢單據(jù)
</div>
</div>
</div>
<div class="panel panel-default">
<div>
<h5>
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
收銀管理
</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div>
銷售開單
</div>
<div>
銷售單據(jù)
</div>
<div>
銷售作廢單據(jù)
</div>
</div>
</div>
<div class="panel panel-default">
<div>
<h4>
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
客戶預約
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div>
預約管理
</div>
</div>
</div>
</div>
</div>
<!--主操作頁面-->
<div>
<iframe src="welcome.html" onload="resetMainHeight(this)" style="width: 100%;height: 100%;"frameborder="0" scrolling="0" ></iframe>
</div>
</div>
</div>
<div>
<p>
2019 © HiKi1987 QQ 97369623
</p>
</div>
<script>
//菜單點擊
function menuFire(obj){
//獲取url
var src=$(obj).attr('src')
//改變框架內的頁面地址
$('iframe').attr('src',src)
}
// 設置主操作頁面高度
function resetMainHeight(obj){
var height = parent.document.documentElement.clientHeight-53;
$(obj).parent('div').height(height)
}
</script>
</body>
</html>2、維修單據(jù)頁內聯(lián)頁代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </head> <body> <!-- 右側內容區(qū) --> <div class="panel panel-default"> <div> <h3> 維修單據(jù) </h3> </div> <div> <form role="form"> <div> <label for="name">所屬門店</label> <select> <option>高新站</option> <option>新都站</option> <option>武侯站</option> </select> </div> <div> <label for="name">時間類型</label> <select> <option>單據(jù)時間</option> <option>派工時間</option> <option>竣工時間</option> <option>結算時間</option> </select> </div> <div> <input type="glyphicon-time">至 <input type="glyphicon-time"> </div> <div> <label for="name">接車人</label> <select> <option>張三</option> <option>李四</option> </select> </div> <div> <label for="name"></label> <input type="text" id="name" placeholder="訂單號、客戶名、車牌、手機"> </div> <div> <button type="submit" class="btn btn-default">開始搜索</button> </div> </form> </div> <!-- 列表 --> <div> <table class="table table-striped "> <thead> <tr> <th>序號</th> <th>單據(jù)編號</th> <th>單據(jù)日期</th> <th>狀態(tài)</th> <th>車牌號</th> <th>品牌</th> <th>車系</th> <th>客戶姓名</th> <th>手機號碼</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>R1901091253519003</td> <td>2019-01-09 12:59:01</td> <td>待竣工</td> <td>川BZP821</td> <td>標致(進口)</td> <td>標致508</td> <td>張長建</td> <td>15882869790</td> <td> <div> <a href="" class="btn btn-default btn-sm">修改</a> <a href="" class="btn btn-danger btn-sm">作廢</a> </div> </td> </tr> <tr> <td>2</td> <td>R1901090833419006</td> <td>2019-01-09 12:59:01</td> <td>待竣工</td> <td>川A1JM06</td> <td>標致(進口)</td> <td>標致508</td> <td>張長建</td> <td>15882869790</td> <td> <div> <a href="" class="btn btn-default btn-sm">修改</a> <a href="" class="btn btn-danger btn-sm">作廢</a> </div> </td> </tr> <tr> <td>3</td> <td>R1901091206504203</td> <td>2019-01-09 12:59:01</td> <td>待竣工</td> <td>川MSA761</td> <td>標致(進口)</td> <td>標致508</td> <td>張長建</td> <td>15882869790</td> <td> <div> <a href="" class="btn btn-default btn-sm">修改</a> <a href="" class="btn btn-danger btn-sm">作廢</a> </div> </td> </tr> <tr> <td>4</td> <td>R1901090954519002 </td> <td>2019-01-09 12:59:01</td> <td>待竣工</td> <td>川A1W26Y</td> <td>標致(進口)</td> <td>標致508</td> <td>張長建</td> <td>15882869790</td> <td> <div> <a href="" class="btn btn-default btn-sm">修改</a> <a href="" class="btn btn-danger btn-sm">作廢</a> </div> </td> </tr> <tr> <td>5</td> <td>R1901091253519003</td> <td>2019-01-09 12:59:01</td> <td>待竣工</td> <td>川AL679H</td> <td>標致(進口)</td> <td>標致508</td> <td>張長建</td> <td>15882869790</td> <td> <div> <a href="" class="btn btn-default btn-sm">修改</a> <a href="" class="btn btn-danger btn-sm">作廢</a> </div> </td> </tr> <tr> <td>6</td> <td>R1901090819080301</td> <td>2019-01-09 12:59:01</td> <td>待竣工</td> <td>川CG1730</td> <td>標致(進口)</td> <td>標致508</td> <td>張長建</td> <td>15882869790</td> <td> <div> <a href="" class="btn btn-default btn-sm">修改</a> <a href="" class="btn btn-danger btn-sm">作廢</a> </div> </td> &Correcting teacher：查無此人Correction time：2019-01-09 16:42:22
Teacher's summary：做的真不錯，很快你就有自己的cms后臺系統(tǒng)了。繼續(xù)加油。