|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>酒店管理系统</title>
|
|
|
<!-- 设定页面字符编码为UTF-8，确保中文正常显示 -->
|
|
|
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
|
|
|
<!-- 移动端适配配置：设置视口宽度为设备宽度，初始缩放比例1，禁止用户手动缩放 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<!-- 引入Bootstrap基础样式库，提供导航栏、表单、按钮等组件的默认样式 -->
|
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
|
|
<!-- 引入登录页专属样式，定制登录框布局、颜色、字体等，匹配系统视觉风格 -->
|
|
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
|
|
<!-- 引入页脚样式，控制页脚文字、链接的排版与样式 -->
|
|
|
<link rel="stylesheet" type="text/css" href="css/footer.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 页面主体容器：使用Bootstrap的container-fluid类占满屏幕宽度，清除默认内边距 -->
|
|
|
<div class="container-fluid main" id="main" style="padding: 0">
|
|
|
<!-- 顶部导航栏：采用Bootstrap的navbar组件，作为系统标识区域 -->
|
|
|
<nav class="navbar navbar-default">
|
|
|
<div class="container-fluid nav-con">
|
|
|
<div class="navbar-header">
|
|
|
<!-- 系统名称：设置较大字体和字母间距，使用浅色调突出显示，提升视觉辨识度 -->
|
|
|
<a class="navbar-brand" href="#" style="padding-top: 2rem;color: #EDEDED">
|
|
|
<span style="font-size: 2.3rem;padding-right: 2rem;letter-spacing: 2px">酒店管理系统</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<!-- 左侧空白占位区：通过Bootstrap栅格系统的col-md-7和col-xs-1类，实现登录框在PC端和移动端的居中效果 -->
|
|
|
<div class="col-md-7 col-xs-1"></div>
|
|
|
<!-- 登录框容器：PC端占3列、移动端占10列，通过自定义logindiv类控制登录框样式 -->
|
|
|
<div class="col-md-3 col-xs-10 logindiv">
|
|
|
<!-- 登录标题区：通过login-h和loginh类控制标题样式，明确“登录”功能 -->
|
|
|
<div class="login-h">
|
|
|
<h3 class="loginh">
|
|
|
登录
|
|
|
</h3>
|
|
|
</div>
|
|
|
<!-- 登录表单：采用Bootstrap的form-horizontal类实现水平表单布局，结构清晰 -->
|
|
|
<form class="form-horizontal login-f">
|
|
|
<!-- 账号输入组：包含标签和输入框 -->
|
|
|
<div class="form-group">
|
|
|
<label for="inputName" class="col-sm-2 control-label">Username</label>
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<!-- 账号输入框：通过forminput类统一样式，占位提示同时包含中英文，适配不同用户 -->
|
|
|
<input type="text" class="form-control forminput" id="inputName" placeholder="账号 Account">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 密码输入组：包含标签和密码类型输入框 -->
|
|
|
<div class="form-group">
|
|
|
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<!-- 密码输入框：type设为password隐藏输入内容，保护隐私，占位提示包含中英文 -->
|
|
|
<input type="password" class="form-control forminput" id="inputPassword" placeholder="密码 Password">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 验证码输入组：包含标签、输入框和验证码图片 -->
|
|
|
<div class="form-group">
|
|
|
<label for="inputCode" class="col-sm-2 control-label">Code</label>
|
|
|
<div class="col-md-8 col-xs-7">
|
|
|
<!-- 验证码输入框：通过inputcode类控制宽度，适配右侧图片区域 -->
|
|
|
<input type="text" class="form-control forminput inputcode" id="inputCode" placeholder="验证码 code">
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-5" style="padding-left:0">
|
|
|
<!-- 验证码图片：id为code，用于JS动态加载验证码，点击可刷新 -->
|
|
|
<img class="code" id="code" src=" ">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 空白表单组：仅用于调整表单间距，优化页面布局美观度 -->
|
|
|
<div class="form-group">
|
|
|
</div>
|
|
|
<!-- 登录按钮组：控制按钮居中显示 -->
|
|
|
<div class="form-group">
|
|
|
<div class="col-md-offset-3 col-md-6 col-xs-12">
|
|
|
<!-- 登录按钮：添加transition过渡动画提升点击反馈，id为loginBtn用于JS绑定点击事件 -->
|
|
|
<button type="button" id="loginBtn" class="form-control btn loginbtn" style="transition: all 0.6s;" >登 录</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 页脚区域：包含系统相关链接和版权信息，通过bs-docs-footer类控制样式 -->
|
|
|
<footer class="bs-docs-footer">
|
|
|
<div class="col-md-12">
|
|
|
<p>
|
|
|
<!-- 系统辅助链接：提供关于系统、联系我们等入口，方便用户了解系统 -->
|
|
|
<a href="#">关于本站</a>
|
|
|
<a href="#">廉正举报</a>
|
|
|
<a href="#">开放平台</a>
|
|
|
<a href="#">诚征英才</a>
|
|
|
<a href="#">联系我们</a>
|
|
|
<a href="#">网站地图</a><br/><br/>
|
|
|
<!-- 版权信息：标明开发主体和年份，符合项目规范 -->
|
|
|
<em>2025 合肥师范学院 软件工程</em>
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
<!-- 引入jQuery库：提供DOM操作、AJAX请求等核心功能，是后续JS逻辑的基础 -->
|
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
|
<!-- 引入Bootstrap JS库：支持导航栏、表单等组件的基础交互效果 -->
|
|
|
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
|
|
<!-- 引入登录页专属JS：实现验证码加载刷新、登录表单校验、登录请求提交等核心逻辑 -->
|
|
|
<script type="text/javascript" src="js/index.js"></script> |
