摘要：全部自己做的，第一次做比較慢點(diǎn)，還有很多細(xì)節(jié)還沒(méi)做的很好。先交了。效果圖：1、首頁(yè)2、維修單據(jù)列表頁(yè)3、維修開(kāi)單頁(yè)4、模態(tài)框(彈層)1、首頁(yè)代碼<!doctype html> <html> <head> <meta charset="UTF-8"> &
全部自己做的，第一次做比較慢點(diǎn)，還有很多細(xì)節(jié)還沒(méi)做的很好。先交了。
效果圖：
1、首頁(yè)
2、維修單據(jù)列表頁(yè)
3、維修開(kāi)單頁(yè)
4、模態(tài)框(彈層)
1、首頁(yè)代碼
<!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>后臺(tái)管理</title>
</head>
<body>
<!-- 頂部導(dǎo)航 -->
<nav class="navbar navbar-inverse">
<div>
<!-- 導(dǎo)航前部 -->
<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="#">財(cái) 務(wù)</a></li>
<li><a href="#">采 購(gòu)</a></li>
<li><a href="#">倉(cāng) 庫(kù)</a></li>
<li><a href="#">系統(tǒng)設(shè)置</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>
<!-- 修改密碼確認(rèn)框 -->
<div class="modal fade" id="myModal">
<!-- 創(chuàng)建一個(gè)對(duì)話框 -->
<div>
<div>
<!-- 模態(tài)框頭部 -->
<div>
<!-- 關(guān)閉按鈕 -->
<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">賬號(hào):</label>
<div>
<p>admin</p>
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">身份:</label>
<div>
<input type="text" placeholder="超級(jí)管理員" readonly>
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">密碼:</label>
<div>
<input type="password" id="password" placeholder="請(qǐng)輸入新密碼">
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">密碼:</label>
<div>
<input type="password" id="password" placeholder="請(qǐng)?jiān)俅屋斎胄旅艽a">
</div>
</div>
</form>
</div>
<!-- 模態(tài)框底部 -->
<div>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">關(guān)閉</button>
<!-- 用戶自定義功能按鈕:確定/保存/提交 -->
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 左側(cè)菜單及內(nèi)容區(qū) -->
<div>
<div>
<!-- 左側(cè)菜單區(qū) -->
<div>
<!-- 左側(cè)菜單折疊 -->
<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;">維修開(kāi)單</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>
銷售開(kāi)單
</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">
客戶預(yù)約
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div>
預(yù)約管理
</div>
</div>
</div>
</div>
</div>
<!--主操作頁(yè)面-->
<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>
//菜單點(diǎn)擊
function menuFire(obj){
//獲取url
var src=$(obj).attr('src')
//改變框架內(nèi)的頁(yè)面地址
$('iframe').attr('src',src)
}
// 設(shè)置主操作頁(yè)面高度
function resetMainHeight(obj){
var height = parent.document.documentElement.clientHeight-53;
$(obj).parent('div').height(height)
}
</script>
</body>
</html>2、維修單據(jù)頁(yè)內(nèi)聯(lián)頁(yè)代碼
<!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> <!-- 右側(cè)內(nèi)容區(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">時(shí)間類型</label> <select> <option>單據(jù)時(shí)間</option> <option>派工時(shí)間</option> <option>竣工時(shí)間</option> <option>結(jié)算時(shí)間</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="訂單號(hào)、客戶名、車牌、手機(jī)"> </div> <div> <button type="submit" class="btn btn-default">開(kāi)始搜索</button> </div> </form> </div> <!-- 列表 --> <div> <table class="table table-striped "> <thead> <tr> <th>序號(hào)</th> <th>單據(jù)編號(hào)</th> <th>單據(jù)日期</th> <th>狀態(tài)</th> <th>車牌號(hào)</th> <th>品牌</th> <th>車系</th> <th>客戶姓名</th> <th>手機(jī)號(hào)碼</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>標(biāo)致(進(jìn)口)</td> <td>標(biāo)致508</td> <td>張長(zhǎng)建</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>標(biāo)致(進(jìn)口)</td> <td>標(biāo)致508</td> <td>張長(zhǎng)建</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>標(biāo)致(進(jìn)口)</td> <td>標(biāo)致508</td> <td>張長(zhǎng)建</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>標(biāo)致(進(jìn)口)</td> <td>標(biāo)致508</td> <td>張長(zhǎng)建</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>標(biāo)致(進(jìn)口)</td> <td>標(biāo)致508</td> <td>張長(zhǎng)建</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>標(biāo)致(進(jìn)口)</td> <td>標(biāo)致508</td> <td>張長(zhǎng)建</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> &批改老師：查無(wú)此人批改時(shí)間：2019-01-09 16:42:22
老師總結(jié)：做的真不錯(cuò)，很快你就有自己的cms后臺(tái)系統(tǒng)了。繼續(xù)加油。