在写作业的时候，做了一个纯界面的酒店管理系统，在这个界面系统里面，我认为其最大的亮点应该在于其应用了不同样式的表格
效果如下：
整体工程目录：
代码如下：
Admin.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>酒店后台管理系统</title> 6 <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> 7 <link rel="stylesheet" href="css/main.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 </head> 10 <body> 11 <div id="loading"> 12 <div></div> 13 <div></div> 14 <span></span> </div> 15 <div id="wrapper"> 16 <nav class="navbar navbar-default navbar-fixed-top"> 17 <div class="brand"></div> 18 <div class="container-fluid"> 19 <div class="navbar-btn" style="padding: 0; padding-top: 10px;"> 20 <button type="button" class="btn-toggle-fullwidth btn-toggle-mx"><img src="image/jiantou.png" height="40px" alt="放大内容"></button> 21 <button type="button" style="font-family: 华文楷体;text-align:right" onClick="window.location.href = 'Login.html'">退出</button> 22 </div> 23 </div> 24 </nav> 25 <div id="sidebar-nav" class="sidebar"> 26 <div class="sidebar-scroll"> 27 <nav> 28 <ul class="nav"> 29 <!--此酒店有几层，如果该层出故障了，可以在此楼层上进行相关备注--> 30 <li><a href="floor.html" target="_blank" class="iframe_link active"><span>楼层管理</span></a></li> 31 <!--客人入住后，登记相关入住信息--> 32 <li><a href="check.html" target="_blank" class="iframe_link"><span>入住管理</span></a></li> 33 <!--比如在向客户显示房型，比如大床房、商务房、豪华房等--> 34 <li><a href="type.html" target="_blank" class="iframe_link"><span>房型管理</span></a></li> 35 <!--每层的房间--> 36 <li><a href="room.html" target="_blank" class="iframe_link"><span>房间管理</span></a></li> 37 <!--注册账号后的客户账号信息管理--> 38 <li><a href="client.html" target="_blank" class="iframe_link"><span>客户管理</span></a></li> 39 <!--客户订房之前需要先预订房间--> 40 <li><a href="reserver.html" target="_blank" class="iframe_link"><span>预订列表</span></a></li> 41 <!--该酒店每个月的营业额--> 42 <li><a href="statistics.html" target="_blank" class="iframe_link"><span>营业统计</span></a></li> 43 </ul> 44 </nav> 45 </div> 46 </div> 47 <div class="main"> 48 <div class="main-content" style="height: 100%;"> 49 <iframe src="floor.html" class="iframe_mx uicss-cn"></iframe> 50 </div> 51 </div> 52 </div> 53 <script src="js/jquery.min.js"></script> 54 <script src="js/bootstrap.min.js"></script> 55 <script src="js/jquery.slimscroll.min.js"></script> 56 <script src="js/klorofil-common.js" ></script> 57 </body> 58 </html>
check.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>入住管理</title>
6 <link rel="stylesheet" href="css/heightlength.css">
7 <link rel="stylesheet" href="css/mxjs.css">
8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
9 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
10 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
11 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
12 <!-- Javascript goes in the document HEAD -->
13 <script type="text/javascript">
14 function altRows(id){
15 if(document.getElementsByTagName){
16
17 var table = document.getElementById(id);
18 var rows = table.getElementsByTagName("tr");
19
20 for(i = 0; i < rows.length; i++){
21 if(i % 2 == 0){
22 rows[i].className = "evenrowcolor";
23 }else{
24 rows[i].className = "oddrowcolor";
25 }
26 }
27 }
28 }
29
30 window.onload=function(){
31 altRows('alternatecolor');
32 }
33 </script>
34
35 <!-- CSS goes in the document HEAD or added to your external stylesheet -->
36 <style type="text/css">
37 table.altrowstable {
38 font-family: verdana, arial, sans-serif;
39 font-size: 11px;
40 color: #333333;
41 border-width: 1px;
42 border-color: #a9c6c9;
43 border-collapse: collapse;
44 }
45 table.altrowstable th {
46 border-width: 1px;
47 padding: 8px;
48 border-style: solid;
49 border-color: #a9c6c9;
50 }
51 table.altrowstable td {
52 border-width: 1px;
53 padding: 8px;
54 border-style: solid;
55 border-color: #a9c6c9;
56 }
57 .oddrowcolor {
58 background-color: #d4e3e5;
59 }
60 .evenrowcolor {
61 background-color: #c3dde0;
62 }
63 </style>
64 </head>
65 <body>
66 <div class="container">
67 <div class="jsbg">
68 <div class="col-lg-12 mxlength">
69 <div class="mx-1">
70 <h2 align="center" style="font-size: 30px">入住管理</h2>
71 <hr style="border-top:1px dashed #EEC591;" width="100%">
72 <button type="button" class="btn btn-primary">新增</button>
73 <!-- Table goes in the document BODY -->
74 <table class="altrowstable" id="alternatecolor">
75 <tr>
76 <th>id</th>
77 <th>房间</th>
78 <th>入住价格</th>
79 <th>入住人</th>
80 <th>身份证号</th>
81 <th>手机号</th>
82 <th>入住日期</th>
83 <th>离店日期</th>
84 <th>状态</th>
85 <th>预定时间</th>
86 <th>备注</th>
87 <th>操作</th>
88 </tr>
89 <tr>
90 <td>1</td>
91 <td>单人间</td>
92 <td>89</td>
93 <td>姚淼</td>
94 <td>231123200205010023</td>
95 <td>19894317415</td>
96 <td>2021-10-24</td>
97 <td>2021-10-25</td>
98 <td>已结算离店</td>
99 <td>2021-10-24 16:31:22</td>
100 <td>无</td>
101 <td><button type="button" class="btn btn-warning">删除</button>
102 <button type="button" class="btn btn-secondary">修改</button></td>
103 </tr>
104 <tr>
105 <td>2</td>
106 <td>标准间</td>
107 <td>100</td>
108 <td>20194134</td>
109 <td>231123200205010023</td>
110 <td>19894317415</td>
111 <td>2021-10-24</td>
112 <td>2021-10-25</td>
113 <td>入住中</td>
114 <td>2021-10-24 17:31:22</td>
115 <td>请尽快打扫</td>
116 <td><button type="button" class="btn btn-warning">删除</button>
117 <button type="button" class="btn btn-secondary">修改</button></td>
118 </tr>
119 <tr>
120 <td>3</td>
121 <td>总统套房</td>
122 <td>899</td>
123 <td>小山羊</td>
124 <td>123423200205010023</td>
125 <td>19812347415</td>
126 <td>2021-10-25</td>
127 <td>2021-10-26</td>
128 <td>预定中</td>
129 <td>2021-10-24 18:31:22</td>
130 <td>无</td>
131 <td><button type="button" class="btn btn-warning">删除</button>
132 <button type="button" class="btn btn-secondary">修改</button></td>
133 </tr>
134 </table>
135
136 <!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->
137 </div>
138 </div>
139 </div>
140 <from> </from>
141 </div>
142 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
143 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
144 <script src="js/smoothscroll.js"></script>
145 <script src="js/mking.js"></script>
146 </body>
147 </html>
client.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>客户管理</title>
6 <link rel="stylesheet" href="css/heightlength.css">
7 <link rel="stylesheet" href="css/mxjs.css">
8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
9 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
10 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
11 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
12 <style type="text/css">
13 html {
14 font-family: sans-serif;
15 -ms-text-size-adjust: 100%;
16 -webkit-text-size-adjust: 100%;
17 }
18 body {
19 margin: 10px;
20 }
21 table {
22 border-collapse: collapse;
23 border-spacing: 0;
24 }
25 td, th {
26 padding: 0;
27 }
28 .pure-table {
29 border-collapse: collapse;
30 border-spacing: 0;
31 empty-cells: show;
32 border: 1px solid #cbcbcb;
33 }
34 .pure-table caption {
35 color: #000;
36 font: italic 85%/1 arial, sans-serif;
37 padding: 1em 0;
38 text-align: center;
39 }
40 .pure-table td, .pure-table th {
41 border-left: 1px solid #cbcbcb;
42 border-width: 0 0 0 1px;
43 font-size: inherit;
44 margin: 0;
45 overflow: visible;
46 padding: .5em 1em;
47 }
48 .pure-table thead {
49 background-color: #e0e0e0;
50 color: #000;
51 text-align: left;
52 vertical-align: bottom;
53 }
54 .pure-table td {
55 background-color: transparent;
56 }
57 .pure-table-bordered td {
58 border-bottom: 1px solid #cbcbcb;
59 }
60 .pure-table-bordered tbody>tr:last-child>td {
61 border-bottom-width: 0;
62 }
63 </style>
64 </head>
65 <body>
66 <div class="container">
67 <div class="jsbg">
68 <div class="col-lg-12 mxlength">
69 <div class="mx-1">
70 <h2 align="center" style="font-size: 30px">客户管理</h2>
71 <hr style="border-top:1px dashed #99ff66;" width="100%">
72 <button type="button" class="btn btn-primary">新增</button>
73 <!--加边框的表格-->
74 <table class="pure-table pure-table-bordered">
75 <thead>
76 <tr>
77 <th>id</th>
78 <th>用户名</th>
79 <th>密码</th>
80 <th>真实姓名</th>
81 <th>身份证号</th>
82 <th>手机号</th>
83 <th>地址</th>
84 <th>状态</th>
85 <th>操作</th>
86 </tr>
87 </thead>
88 <tbody>
89 <tr>
90 <td>1</td>
91 <td>20194134</td>
92 <td>20194134</td>
93 <td>姚淼</td>
94 <td>231423200205010023</td>
95 <td>19894317415</td>
96 <td>中国河北石家庄</td>
97 <td>可用</td>
98 <td><button type="button" class="btn btn-danger">删除</button>
99 <button type="button" class="btn btn-success">修改</button></td>
100 </tr>
101 <tr>
102 <td>2</td>
103 <td>小山羊</td>
104 <td>20194134</td>
105 <td>姚淼</td>
106 <td>231423200205010023</td>
107 <td>19894317415</td>
108 <td>中国河北</td>
109 <td>不可用</td>
110 <td><button type="button" class="btn btn-danger">删除</button>
111 <button type="button" class="btn btn-success">修改</button></td>
112 </tr>
113 <tr>
114 <td>3</td>
115 <td>ym</td>
116 <td>ym</td>
117 <td>姚淼</td>
118 <td>231123200205010023</td>
119 <td>19812347415</td>
120 <td>石家庄</td>
121 <td>可用</td>
122 <td><button type="button" class="btn btn-danger">删除</button>
123 <button type="button" class="btn btn-success">修改</button></td>
124 </tr>
125 </tbody>
126 </table>
127 </div>
128 </div>
129 </div>
130 <from> </from>
131 </div>
132 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
133 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
134 <script src="js/smoothscroll.js"></script>
135 <script src="js/mking.js"></script>
136 </body>
137 </html>
floor.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>楼层管理</title>
6 <link rel="stylesheet" href="css/heightlength.css">
7 <link rel="stylesheet" href="css/mxjs.css">
8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
9 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
10 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
11 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
12 <style type="text/css">
13 table.hovertable {
14 font-family: verdana, arial, sans-serif;
15 font-size: 11px;
16 color: #333333;
17 border-width: 1px;
18 border-color: #999999;
19 border-collapse: collapse;
20 }
21 table.hovertable th {
22 background-color: #c3dde0;
23 border-width: 1px;
24 padding: 8px;
25 border-style: solid;
26 border-color: #a9c6c9;
27 }
28 table.hovertable tr {
29 background-color: #d4e3e5;
30 }
31 table.hovertable td {
32 border-width: 1px;
33 padding: 8px;
34 border-style: solid;
35 border-color: #a9c6c9;
36 }
37 </style>
38 </head>
39 <body>
40 <div class="container">
41 <div class="jsbg">
42 <div class="col-lg-12 mxlength">
43 <div class="mx-1">
44 <h2 align="center" style="font-size: 30px">楼层管理</h2>
45 <hr style="border-top:1px dashed #FF7F24;" width="100%">
46 <button type="button" class="btn btn-primary">新增</button>
47 <!--鼠标悬停高亮的CSS样式表格-->
48 <table class="hovertable">
49 <tr>
50 <th>id</th>
51 <th>楼层名称</th>
52 <th>楼层备注</th>
53 <th>操作</th>
54 </tr>
55 <tr onm ouseover="this.style.backgroundColor='#ffff66';" onm ouseout="this.style.backgroundColor='#d4e3e5';">
56 <td>1</td>
57 <td>1楼</td>
58 <td>安全通道正在维修</td>
59 <td><button type="button" class="btn btn-success">编辑</button>
60 <button type="button" class="btn btn-light">删除</button></td>
61 </tr>
62 <tr onm ouseover="this.style.backgroundColor='#ffff66';" onm ouseout="this.style.backgroundColor='#d4e3e5';">
63 <td>2</td>
64 <td>2楼</td>
65 <td>无</td>
66 <td><button type="button" class="btn btn-success">编辑</button>
67 <button type="button" class="btn btn-light">删除</button></td>
68 </tr>
69 <tr onm ouseover="this.style.backgroundColor='#ffff66';" onm ouseout="this.style.backgroundColor='#d4e3e5';">
70 <td>3</td>
71 <td>3楼</td>
72 <td>监控损坏</td>
73 <td><button type="button" class="btn btn-success">编辑</button>
74 <button type="button" class="btn btn-light">删除</button></td>
75 </tr>
76 <tr onm ouseover="this.style.backgroundColor='#ffff66';" onm ouseout="this.style.backgroundColor='#d4e3e5';">
77 <td>4</td>
78 <td>4楼</td>
79 <td>无</td>
80 <td><button type="button" class="btn btn-success">编辑</button>
81 <button type="button" class="btn btn-light">删除</button></td>
82 </tr>
83 <tr onm ouseover="this.style.backgroundColor='#ffff66';" onm ouseout="this.style.backgroundColor='#d4e3e5';">
84 <td>5</td>
85 <td>5楼</td>
86 <td>无</td>
87 <td><button type="button" class="btn btn-success">编辑</button>
88 <button type="button" class="btn btn-light">删除</button></td>
89 </tr>
90 </table>
91 </div>
92 </div>
93 </div>
94 <from></from>
95 </div>
96 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
97 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
98 <script src="js/smoothscroll.js"></script>
99 <script src="js/mking.js"></script>
100 </body>
101 </html>
Login.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>酒店后台管理系统登录界面</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 html {
12 height: 100%;
13 width: 100%;
14 overflow: hidden;
15 margin: 0;
16 padding: 0;
17 background: url(image/background.jpg) no-repeat 0px 0px;
18 background-repeat: no-repeat;
19 background-size: 100% 100%;
20 -moz-background-size: 100% 100%;
21 }
22 body {
23 display: flex;
24 align-items: center;
25 justify-content: center;
26 height: 100%;
27 }
28 #Login {
29 width: 50%;
30 display: flex;
31 justify-content: center;
32 align-items: center;
33 height: 300px;
34 background-color: #FFEFDB;
35 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
36 border-radius: 5px;
37 }
38 input {
39 margin-left: 15px;
40 border-radius: 5px;
41 border-style: hidden;
42 height: 30px;
43 width: 140px;
44 background-color: rgba(216, 191, 216, 0.5);
45 outline: none;
46 color: #f0edf3;
47 padding-left: 10px;
48 }
49 tr, .sexDiv {
50 margin-top: 10px;
51 margin-left: 20px;
52 color: #F08080;
53 }
54 .sexDiv > input, .hobby > input {
55 width: 30px;
56 height: 17px;
57 }
58 input, select {
59 margin-left: 15px;
60 border-radius: 5px;
61 border-style: hidden;
62 height: 30px;
63 width: 140px;
64 background-color: rgba(216, 191, 216, 0.5);
65 outline: none;
66 color: #F08080;
67 padding-left: 10px;
68 }
69 .button {
70 border-color: cornsilk;
71 background-color: rgba(100, 149, 237, .7);
72 color: aliceblue;
73 border-style: hidden;
74 border-radius: 5px;
75 width: 100px;
76 height: 31px;
77 font-size: 16px;
78 margin-top: 30px;
79 }
80 </style>
81 </head>
82 <body background="background.jpg"
83 style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
84 <div id="Login">
85 <form action="" method="post">
86 <h1 style="text-align: center;color: #F08080;font-family: 华文楷体">登录</h1>
87 <br>
88 <br>
89 <table>
90 <tr>
91 <td>用户名</td>
92 <td><input type="text" id="username" name="username" class="in"></td>
93 </tr>
94 <tr>
95 <td>密 码</td>
96 <td><input type="password" id="password" name="password" class="in"></td>
97 </tr>
98 <tr>
99 <td><input type="button" value="登录" class="button" onclick='location.href =( "Admin.html")'></td>
100 <td><input type="button" value="注册" class="button" onclick="window.location.href = 'register.html'"></td>
101 <td></td>
102 </tr>
103 </table>
104 </form>
105 </div>
106 </body>
107 </html>
register.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>酒店后台管理系统注册界面</title>
6 </head>
7 <body background="image/background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
8 <style type="text/css">
9 .mytable{
10 width:500px;
11 height:500px;
12 margin:0 auto;
13 }
14 </style>
15
16 <table border="1px" class="mytable" width="500px" height="300px" cellpadding="0px" cellspacing="0px" align="center">
17 <!-- 10行3列 -->
18 <tr>
19 <td colspan="3" align="center" style="color:red;">注册</td>
20 </tr>
21 <tr>
22 <td width="33.3%" align="center">用户名</td>
23 <td colspan="2"><input type="text" name="name" id="name" ></td>
24 </tr>
25 <tr>
26 <td width="33.3%" align="center">头像</td>
27 <td colspan="2"><input type="file"></td>
28 </tr>
29 <tr>
30 <td width="33.3%" align="center">密码</td>
31 <td colspan="2"><input type="password" name="password" id="password"></td>
32 </tr>
33 <tr>
34 <td width="33.3%" align="center">性别</td>
35 <td colspan="2"><input type="radio" name="sex" value="男" checked="checked">
36 男
37 <input type="radio" name="sex" value="女">
38 女 </td>
39 </tr>
40 <tr>
41 <td width="33.3%" align="center">生日月份</td>
42 <td colspan="2"><select name="birth" id="birth">
43 <option>--请选择--</option>
44 <option value="1">1月</option>
45 <option value="2">2月</option>
46 <option value="3">3月</option>
47 <option value="4">4月</option>
48 <option value="5">5月</option>
49 <option value="6">6月</option>
50 <option value="7">7月</option>
51 <option value="8">8月</option>
52 <option value="9">9月</option>
53 <option value="10">10月</option>
54 <option value="11">11月</option>
55 <option value="12">12月</option>
56 </select></td>
57 </tr>
58 <tr>
59 <td width="33.3%" align="center">电话</td>
60 <td colspan="2"><input type="text" name="phone" id="phone" ></td>
61 </tr>
62 <tr>
63 <td width="33.3%" align="center">邮箱</td>
64 <td colspan="2"><input type="text" name="email" id="email" ></td>
65 </tr>
66 <tr>
67 <td colspan="3" align="center"><a href="Login.html">
68 <input type="button" value="提交" />
69 </a>
70 <input type="reset" value="重置" />
71 <a href="Login.html">
72 <input type="button" value="返回" />
73 </a></td>
74 </tr>
75 </table>
76 </body>
77 </html>
reserver.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>预订列表</title> 6 <link rel="stylesheet" href="css/heightlength.css"> 7 <link rel="stylesheet" href="css/mxjs.css"> 8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> 9 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 10 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 11 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="jsbg"> 16 <div class="col-lg-12 mxlength"> 17 <div class="mx-1"> 18 <h2 align="center" style="font-size: 30px">预订列表</h2> 19 <hr style="border-top:1px dashed #DC143C;" width="100%"> 20 <button type="button" class="btn btn-primary">新增</button> 21 <div class="container"> 22 <div class="table-responsive-sm"> 23 <table class="table"> 24 <thead> 25 <tr> 26 <th>id</th> 27 <th>客户</th> 28 <th>房型</th> 29 <th>预订人</th> 30 <th>身份证号</th> 31 <th>手机号</th> 32 <th>入住日期</th> 33 <th>离店日期</th> 34 <th>状态</th> 35 <th>预定时间</th> 36 <th>备注</th> 37 <th>操作</th> 38 </tr> 39 </thead> 40 <tbody> 41 <tr> 42 <td>1</td> 43 <td>20194134</td> 44 <td>单人间</td> 45 <td>20194134</td> 46 <td>231423200205010023</td> 47 <td>19894317415</td> 48 <td>2021-10-24</td> 49 <td>2021-10-25</td> 50 <td>预定中</td> 51 <td>2021-10-24 14:56:24</td> 52 <td>请留一间</td> 53 <td><button type="button" class="btn btn-danger">删除</button> 54 <button type="button" class="btn btn-info">修改</button></td> 55 </tr> 56 <tr> 57 <td>2</td> 58 <td>20194134</td> 59 <td>商务大床房</td> 60 <td>姚淼</td> 61 <td>231423200205010023</td> 62 <td>19894317415</td> 63 <td>2021-10-25</td> 64 <td>2021-10-26</td> 65 <td>已入住</td> 66 <td>2021-10-24 15:56:24</td> 67 <td>请留一间</td> 68 <td><button type="button" class="btn btn-danger">删除</button> 69 <button type="button" class="btn btn-info">修改</button></td> 70 </tr> 71 <tr> 72 <td>3</td> 73 <td>20194134</td> 74 <td>单人间</td> 75 <td>淼</td> 76 <td>231423200205010023</td> 77 <td>19894317415</td> 78 <td>2021-10-24</td> 79 <td>2021-10-25</td> 80 <td>已结算离店</td> 81 <td>2021-10-25 14:56:24</td> 82 <td>无</td> 83 <td><button type="button" class="btn btn-danger">删除</button> 84 <button type="button" class="btn btn-info">修改</button></td> 85 </tr> 86 </tbody> 87 </table> 88 </div> 89 </div> 90 </div> 91 </div> 92 </div> 93 <from> </from> 94 </div> 95 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 96 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 97 <script src="js/smoothscroll.js"></script> 98 <script src="js/mking.js"></script> 99 </body> 100 </html>
room.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>房间管理</title>
6 <link rel="stylesheet" href="css/heightlength.css">
7 <link rel="stylesheet" href="css/mxjs.css">
8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
9 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
10 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
11 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
12 <style>
13 #table_wrap > table {
14 font-size: 16px;
15 text-align: center;
16 margin: 0 auto;
17 border-collapse: separate;
18 border-spacing: 0;
19 border: 2px #000;
20 }
21 table thead tr, table tbody tr {
22 height: 50px;
23 line-height: 50px;/*background-color: pink;*/
24 }
25 table tr th:first-child, table tr td:first-child {/*设置table左边边框*/
26 border-left: 2px solid #eaeaea;
27 }
28 table tr th:last-child, table tr td:last-child {/*设置table右边边框*/
29 border-right: 2px solid #eaeaea;
30 }
31 table tr td:first-child, table tr td:nth-child(2), table tr td:nth-child(3), table tr td:last-child {/*设置table表格每列底部边框*/
32 border-bottom: 2px solid #eaeaea;
33 }
34 /*table tr:last-child td:first-child,
35 table tr:last-child td:nth-child(2),
36 table tr:last-child td:nth-child(3),
37 table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/
38 border-bottom: 2px solid #000;
39 }*/
40 table tr th {
41 background: #eaeaea;
42 }
43 table tr:first-child th:first-child {
44 border-top-left-radius: 12px;
45 }
46 table tr:first-child th:last-child {
47 border-top-right-radius: 12px;
48 }
49 table tr:last-child td:first-child {
50 border-bottom-left-radius: 12px;
51 }
52 table tr:last-child td:last-child {
53 border-bottom-right-radius: 12px;
54 }
55 </style>
56 </head>
57 <body>
58 <div class="container">
59 <div class="jsbg">
60 <div class="col-lg-12 mxlength">
61 <div class="mx-1">
62 <h2 align="center" style="font-size: 30px">房间管理</h2>
63 <hr style="border-top:1px dashed #D15FEE;" width="100%">
64 <button type="button" class="btn btn-primary">新增</button>
65 <div id="table_wrap">
66 <table class="table" width="800" cellspacing="0" cellpadding="0">
67 <thead class="table_head">
68 <tr>
69 <th>id</th>
70 <th>房间图片</th>
71 <th>房间编号</th>
72 <th>房间类型</th>
73 <th>所属楼层</th>
74 <th>状态</th>
75 <th>房间备注</th>
76 <th>操作</th>
77 </tr>
78 </thead>
79 <tbody>
80 <tr>
81 <td>1</td>
82 <td><img src="image/single_room.png" width="100px" alt="单人间"></td>
83 <td>101</td>
84 <td>单人间</td>
85 <td>1楼</td>
86 <td>可入住</td>
87 <td>无</td>
88 <td><button type="button" class="btn">删除</button>
89 <button type="button" class="btn">修改</button></td>
90 </tr>
91 <tr>
92 <td>2</td>
93 <td><img src="image/standard_room.png" width="100px" alt="标间"></td>
94 <td>301</td>
95 <td>标间</td>
96 <td>3楼</td>
97 <td>打扫中</td>
98 <td>暂时不能入住</td>
99 <td><button type="button" class="btn">删除</button>
100 <button type="button" class="btn">修改</button></td>
101 </tr>
102 <tr>
103 <td>3</td>
104 <td><img src="image/suite.png" width="100px" alt="普通套房"></td>
105 <td>401</td>
106 <td>普通套房</td>
107 <td>4楼</td>
108 <td>已入住</td>
109 <td>无</td>
110 <td><button type="button" class="btn">删除</button>
111 <button type="button" class="btn">修改</button></td>
112 </tr>
113 </tbody>
114 </table>
115 </div>
116 </div>
117 </div>
118 </div>
119 <from> </from>
120 </div>
121 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
122 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
123 <script src="js/smoothscroll.js"></script>
124 <script src="js/mking.js"></script>
125 </body>
126 </html>
statistics.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>营业统计</title>
6 <link rel="stylesheet" href="css/heightlength.css">
7 <link rel="stylesheet" href="css/mxjs.css">
8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
9 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
10 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
11 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
12 <!-- 使用单文件引入的方式使用echarts.min.jS -->
13 <script src="js/echarts.min.js"></script>
14 <!-- 官网jQuery文件 -->
15 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
16 </head>
17 <body>
18 <div class="container">
19 <div class="jsbg">
20 <div class="col-lg-12 mxlength">
21 <div class="mx-1">
22 <h2 align="center" style="font-size: 30px">营业统计</h2>
23 <hr style="border-top:1px dashed #FF7F50;" width="100%">
24 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
25 <div class="layui-form-item">
26 <div class="layui-inline">
27 <div id="main" style="width: 650px; height: 400px;"></div>
28 </div>
29 </div>
30 </div>
31 </div>
32 </div>
33 <from> </from>
34 </div>
35 <script type="text/javascript">
36 // 基于准备好的dom，初始化echarts实例
37 var myChart = echarts.init(document.getElementById('main'));
38 var option;
39 option = {
40 title: {
41 text: '营业统计'
42 },
43 tooltip: {
44 trigger: 'axis'
45 },
46 legend: {},
47 toolbox: {
48 show: true,
49 feature: {
50 dataZoom: {
51 yAxisIndex: 'none'
52 },
53 dataView: { readOnly: false },
54 magicType: { type: ['line', 'bar'] },
55 restore: {},
56 saveAsImage: {}
57 }
58 },
59 xAxis: {
60 type: 'category',
61 boundaryGap: false,
62 data: [
63 '1月',
64 '2月',
65 '3月',
66 '4月',
67 '5月',
68 '6月',
69 '7月',
70 '8月',
71 '9月',
72 '10月',
73 '11月',
74 '12月'
75 ]
76 },
77 yAxis: {
78 type: 'value',
79 axisLabel: {
80 formatter: '{value} 元'
81 }
82 },
83 series: [
84 {
85 name: '销售额',
86 type: 'line',
87 data: [100, 450, 700, 300, 600, 350, 800,230,940,293,495,50],
88 markPoint: {
89 data: [
90 { type: 'max', name: 'Max' },
91 { type: 'min', name: 'Min' }
92 ]
93 },
94 markLine: {
95 data: [{ type: 'average', name: 'Avg' }]
96 }
97 }
98 ]
99 };
100 myChart.setOption(option);
101 </script>
102 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
103 <script src="js/smoothscroll.js"></script>
104 <script src="js/mking.js"></script>
105 </body>
106 </html>
type.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>房型管理</title> 6 <link rel="stylesheet" href="css/heightlength.css"> 7 <link rel="stylesheet" href="css/mxjs.css"> 8 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 9 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 10 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 11 </head> 12 <body> 13 <div class="container"> 14 <div class="jsbg"> 15 <div class="col-lg-12 mxlength"> 16 <div class="mx-1"> 17 <h2 align="center" style="font-size: 30px">房型管理</h2> 18 <hr style="border-top:1px dashed #FF0000;" width="100%"> 19 <button type="button" class="btn btn-primary">新增</button> 20 <table class="table"> 21 <thead> 22 <tr> 23 <th>id</th> 24 <th>名称</th> 25 <th>价格</th> 26 <th>可住人数</th> 27 <th>床位数</th> 28 <th>房间数</th> 29 <th>可用房间数</th> 30 <th>已预定数</th> 31 <th>已入住数</th> 32 <th>状态</th> 33 <th>房间类型备注</th> 34 <th>操作</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr class="active"> 39 <td>1</td> 40 <td>单人间</td> 41 <td>79</td> 42 <td>1</td> 43 <td>1</td> 44 <td>30</td> 45 <td>1</td> 46 <td>0</td> 47 <td>0</td> 48 <td>可预订可入住</td> 49 <td>1人入住，无早餐</td> 50 <td><button type="button" class="btn btn-primary">编辑</button></td> 51 </tr> 52 <tr class="success"> 53 <td>2</td> 54 <td>标间</td> 55 <td>89</td> 56 <td>1</td> 57 <td>1</td> 58 <td>30</td> 59 <td>1</td> 60 <td>0</td> 61 <td>0</td> 62 <td>可预订可入住</td> 63 <td>1人入住，无早餐</td> 64 <td><button type="button" class="btn btn-primary">编辑</button></td> 65 </tr> 66 <tr class="warning"> 67 <td>3</td> 68 <td>大床房</td> 69 <td>288</td> 70 <td>2</td> 71 <td>1</td> 72 <td>20</td> 73 <td>0</td> 74 <td>0</td> 75 <td>0</td> 76 <td>可预订可入住</td> 77 <td>2人入住，无早餐</td> 78 <td><button type="button" class="btn btn-primary">编辑</button></td> 79 </tr> 80 <tr class="danger"> 81 <td>4</td> 82 <td>套房</td> 83 <td>599</td> 84 <td>2</td> 85 <td>2</td> 86 <td>10</td> 87 <td>0</td> 88 <td>0</td> 89 <td>0</td> 90 <td>可预订可入住</td> 91 <td>2人入住，有早餐</td> 92 <td><button type="button" class="btn btn-primary">编辑</button></td> 93 </tr> 94 </tbody> 95 </table> 96 </div> 97 </div> 98 </div> 99 <from> </from> 100 </div> 101 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 102 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 103 <script src="js/smoothscroll.js"></script> 104 <script src="js/mking.js"></script> 105 </body> 106 </html>