This commit is contained in:
Chenx221 2023-06-06 18:36:33 +08:00
parent 518a19a170
commit fd7425b797
18 changed files with 7694 additions and 29 deletions

View File

@ -7,7 +7,7 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>面板</title> <title>学生信息查看</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

View File

@ -0,0 +1,267 @@
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>学生信息查询</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/mdb.min.css"/>
<style>
.table-container {
min-width: 80vw; /* 设置最小宽度为视窗宽度的80% */
min-height: 80vh; /* 设置最小高度为视窗高度的80% */
/*display: flex;*/
align-items: center;
justify-content: center;
}
.table-container table {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
<div class="container">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<i class="fas fa-chalkboard-user me-2"></i>
教务管理系统
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
学生管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="#">学生信息查询</a></li>
<li><a class="dropdown-item" href="#">学生信息管理</a></li>
<li><a class="dropdown-item" href="#">学生信息管理</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
教师管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
<li><a class="dropdown-item" href="#">教师信息管理</a></li>
<li><a class="dropdown-item" href="#">教师课程管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
课程管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
<li><a class="dropdown-item" href="#">课程信息管理</a></li>
<li><a class="dropdown-item" href="#">课程安排管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
系统管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown4">
<li><a class="dropdown-item" href="#">个人设定</a></li>
<li><a class="dropdown-item" href="#">用户管理</a></li>
<li><a class="dropdown-item" href="#">日志管理</a></li>
<li><a class="dropdown-item" href="#">版本信息</a></li>
</ul>
</li>
</ul>
</div>
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-circle-user fa-lg"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="logout">登出</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="bg-image shadow-2-strong vh-100"
style="background-image: url('${pageContext.request.contextPath}/resources/img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg'); margin-top: -58.59px;">
<div class="mask d-flex align-items-center h-100" style="background-color: hsla(0, 0%, 100%, 0.5);">
<div class="container d-flex justify-content-center">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">数据查询</h3>
<form action="">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="firstName" class="form-control"/>
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="lastName" class="form-control"/>
<label class="form-label" for="lastName">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input
type="text"
class="form-control"
id="birthdayDate"
/>
<label for="birthdayDate" class="form-label">出生日期</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">性别: </h6>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="femaleGender"
value="option1"
/>
<label class="form-check-label" for="femaleGender">女</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="maleGender"
value="option2"
/>
<label class="form-check-label" for="maleGender">男</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="email" id="emailAddress" class="form-control"/>
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" id="phoneNumber" class="form-control"/>
<label class="form-label" for="phoneNumber">Phone Number</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6 class="mb-3">Subject</h6>
<select class="select" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<label class="form-label select-label">Choose option</label>
<div class="mt-4">
<input class="btn btn-warning btn-lg" type="submit" value="Submit"/>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="table-container rounded-4 shadow-3-strong"
style="background-color: rgba(255,255,255,0.9); overflow-y: auto; max-height: 400px;">
<table class="table table-striped table-hover border-primary">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">出生日期</th>
<th scope="col">联系方式</th>
<th scope="col">班级</th>
</tr>
</thead>
<tbody>
<c:forEach var="student" items="${students}">
<tr>
<td>${student.id}</td>
<td>${student.name}</td>
<td>${student.sex}</td>
<td>${student.birthday}</td>
<td>${student.phone}</td>
<td>${student.classes}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="bg-link text-center text-lg-start ">
</footer>
<!-- Footer -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/mdb.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,384 @@
.datepicker-toggle-button {
position: absolute;
outline: none;
border: none;
background-color: transparent;
right: -10px;
top: 50%;
transform: translate(-50%, -50%)
}
.datepicker-toggle-button:focus, .datepicker-toggle-button:hover {
color: #3b71ca
}
.datepicker-backdrop {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .4);
z-index: 1065
}
.datepicker-dropdown-container {
height: 380px;
border-radius: .5rem
}
.datepicker-dropdown-container, .datepicker-modal-container {
width: 328px;
background-color: #fff;
box-shadow: 0 2px 15px -3px rgba(0, 0, 0, .07), 0 10px 20px -2px rgba(0, 0, 0, .04);
z-index: 1066
}
.datepicker-modal-container {
display: flex;
flex-direction: column;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 512px;
border-radius: .6rem .6rem .5rem .5rem
}
@media screen and (min-width: 320px)and (max-width: 820px)and (orientation: landscape) {
.datepicker-modal-container .datepicker-header {
height: 100%
}
}
@media screen and (min-width: 320px)and (max-width: 820px)and (orientation: landscape) {
.datepicker-modal-container .datepicker-date {
margin-top: 100px
}
}
@media screen and (min-width: 320px)and (max-width: 820px)and (orientation: landscape) {
.datepicker-modal-container .datepicker-day-cell {
width: 32x;
height: 32x
}
}
@media screen and (min-width: 320px)and (max-width: 820px)and (orientation: landscape) {
.datepicker-modal-container {
flex-direction: row;
width: 475px;
height: 360px
}
.datepicker-modal-container.datepicker-day-cell {
width: 36px;
height: 36px
}
}
.datepicker-header {
height: 120px;
padding-right: 24px;
padding-left: 24px;
background-color: #3b71ca;
display: flex;
flex-direction: column;
border-radius: .5rem .5rem 0 0
}
.datepicker-title {
height: 32px;
display: flex;
flex-direction: column;
justify-content: flex-end
}
.datepicker-title-text {
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.7px;
color: #fff
}
.datepicker-date {
height: 72px;
display: flex;
flex-direction: column;
justify-content: flex-end
}
.datepicker-date-text {
font-size: 34px;
font-weight: 400;
color: #fff
}
.datepicker-main {
position: relative;
height: 100%
}
.datepicker-date-controls {
padding: 10px 12px 0;
display: flex;
justify-content: space-between
}
.datepicker-arrow, .datepicker-arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-width: 5px;
border-top-style: solid;
margin: 0 0 0 5px;
vertical-align: middle
}
.datepicker-arrow-up {
transform: rotate(180deg)
}
.datepicker-date-controls {
color: rgba(0, 0, 0, .64)
}
.datepicker-view-change-button {
padding: 10px;
color: #666;
font-weight: 500;
font-size: .9rem;
border-radius: 10px;
box-shadow: none;
background-color: transparent;
margin: 0;
border: none
}
.datepicker-view-change-button:focus, .datepicker-view-change-button:hover {
background-color: #eee
}
.datepicker-view-change-button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-width: 5px;
border-top-style: solid;
margin: 0 0 0 5px;
vertical-align: middle
}
.datepicker-arrow-controls {
margin-top: 10px
}
/*!rtl:begin:options:
{
"autoRename": true,
"stringMap":[
{
"name" : "prev-next",
"search" : ["datepicker-previous-button", "datepicker-next-button"],
"replace" : ["datepicker-next-button", "datepicker-previous-button"],
"options" : {"ignoreCase":false}
}
]
}
*/
.datepicker-previous-button {
position: relative;
padding: 0;
width: 40px;
height: 40px;
line-height: 40px;
border: none;
outline: none;
color: rgba(0, 0, 0, .64);
background-color: transparent;
margin: 0 24px 0 0
}
.datepicker-previous-button:focus, .datepicker-previous-button:hover {
background-color: #eee;
border-radius: 50%
}
.datepicker-previous-button:after {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
content: "";
margin: 15.5px;
border-color: currentcolor;
border-style: solid;
border-width: 2px 0 0 2px;
transform: translateX(2px) rotate(-45deg)
}
.datepicker-next-button {
position: relative;
padding: 0;
width: 40px;
height: 40px;
line-height: 40px;
border: none;
outline: none;
margin: 0;
color: rgba(0, 0, 0, .64);
background-color: transparent
}
.datepicker-next-button:focus, .datepicker-next-button:hover {
background-color: #eee;
border-radius: 50%
}
.datepicker-next-button:after {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
content: "";
margin: 15.5px;
border-color: currentcolor;
border-style: solid;
border-width: 2px 2px 0 0;
transform: translateX(-2px) rotate(45deg)
}
/*!rtl:end:options*/
.datepicker-view {
padding-left: 12px;
padding-right: 12px;
outline: none
}
.datepicker-table {
margin-right: auto;
margin-left: auto;
width: 304px
}
.datepicker-day-heading {
width: 40px;
height: 40px;
text-align: center;
font-size: 12px;
font-weight: 400
}
.datepicker-cell {
text-align: center
}
.datepicker-cell.disabled {
color: #ccc;
cursor: default;
pointer-events: none
}
.datepicker-cell.disabled:hover {
cursor: default
}
.datepicker-cell:hover {
cursor: pointer
}
.datepicker-cell:not(.disabled):not(.selected):hover .datepicker-cell-content {
background-color: #d3d3d3
}
.datepicker-cell.selected .datepicker-cell-content {
background-color: #3b71ca;
color: #fff
}
.datepicker-cell:not(.selected).focused .datepicker-cell-content {
background-color: #eee
}
.datepicker-cell.focused .datepicker-cell-content.selected {
background-color: #3b71ca
}
.datepicker-cell.current .datepicker-cell-content {
border: 1px solid #000
}
.datepicker-small-cell {
width: 40px;
height: 40px
}
.datepicker-small-cell-content {
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
font-size: 13px
}
.datepicker-large-cell {
width: 76px;
height: 42px
}
.datepicker-large-cell-content {
width: 72px;
height: 40px;
line-height: 40px;
padding: 1px 2px;
border-radius: 999px
}
.datepicker-footer, .datepicker-yearview-content {
padding-left: 12px;
padding-right: 12px
}
.datepicker-footer {
height: 56px;
display: flex;
position: absolute;
width: 100%;
bottom: 0;
justify-content: flex-end;
align-items: center
}
.datepicker-footer-btn {
background-color: #fff;
color: #3b71ca;
border: none;
cursor: pointer;
padding: 0 10px;
text-transform: uppercase;
font-size: .8rem;
font-weight: 500;
height: 40px;
line-height: 40px;
letter-spacing: .1rem;
border-radius: 10px;
margin-bottom: 10px
}
.datepicker-footer-btn:focus, .datepicker-footer-btn:hover {
background-color: #eee
}
.datepicker-clear-btn {
margin-right: auto
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,295 @@
.select-dropdown .form-check-input label {
display: block
}
select.select-initialized {
display: none !important
}
.select-arrow {
color: #000;
text-align: center;
font-size: .8rem;
position: absolute;
top: 9px;
right: 9px
}
.select-arrow:before {
content: "▼"
}
.was-validated .form-control:valid ~ .select-arrow {
color: #00b74a
}
.was-validated .form-control:invalid ~ .select-arrow {
color: #f93154
}
.select-clear-btn {
color: #000;
font-size: 1rem;
position: absolute;
top: 7px;
right: 27px;
cursor: pointer
}
.select-clear-btn:focus {
color: #3b71ca;
outline: none
}
.form-control-sm ~ .select-clear-btn {
font-size: .8rem;
top: 4px
}
.form-control-lg ~ .select-clear-btn {
top: 11px
}
.select-dropdown-container {
z-index: 1070
}
.select-dropdown {
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
margin: 0;
min-width: 100px;
outline: 0;
position: relative;
transform: scaleY(.8);
opacity: 0;
transition: all .2s
}
.select-dropdown.open {
transform: scaleY(1);
opacity: 1
}
.select-dropdown > .input-group {
padding: 10px
}
.select-label {
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select-label.active {
transform: translateY(-1rem) translateY(.1rem) scale(.8)
}
.form-control-lg ~ .select-label.active {
transform: translateY(-1.25rem) translateY(.1rem) scale(.8)
}
.form-control-sm ~ .select-label.active {
transform: translateY(-.83rem) translateY(.1rem) scale(.8)
}
.form-outline .select-label.active ~ .form-notch .form-notch-middle {
border-right: none;
border-left: none;
border-top: 1px solid transparent !important
}
.select-input {
cursor: pointer
}
.select-input[disabled] {
cursor: default
}
.select-input.focused {
color: #616161;
outline: 0
}
.select-input.focused ~ .select-label {
color: #3b71ca
}
.select-input.focused::-moz-placeholder {
opacity: 1
}
.select-input.focused::placeholder {
opacity: 1
}
.select-input.focused ~ .form-notch .form-notch-leading {
border-color: #3b71ca;
box-shadow: -1px 0 0 0 #3b71ca, 0 1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca
}
.select-input.focused ~ .form-notch .form-notch-middle {
border-color: #3b71ca;
box-shadow: 0 1px 0 0 #3b71ca;
border-top: 1px solid transparent
}
.select-input.focused ~ .form-notch .form-notch-trailing {
border-color: #3b71ca;
box-shadow: 1px 0 0 0 #3b71ca, 0 -1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca
}
.select-input.focused ~ .select-arrow {
color: #3b71ca
}
.form-white .select-arrow, .form-white .select-clear-btn, .form-white .select-input:focus ~ .select-arrow {
color: #fff
}
.form-control-sm ~ .select-arrow {
top: 3px
}
.form-control-lg ~ .select-arrow {
top: 13px
}
.select-options-wrapper {
overflow-y: auto
}
.select-options-wrapper::-webkit-scrollbar {
width: 4px;
height: 4px
}
.select-options-wrapper::-webkit-scrollbar-button:end:increment, .select-options-wrapper::-webkit-scrollbar-button:start:decrement {
display: block;
height: 0;
background-color: transparent
}
.select-options-wrapper::-webkit-scrollbar-track-piece {
background-color: transparent;
border-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.select-options-wrapper::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #999;
border-radius: 4px
}
.select-options-list {
list-style: none;
margin: 0;
padding: 0
}
.select-option-group-label {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 16px;
padding-right: 16px;
font-size: 1rem;
font-weight: 400;
background-color: transparent;
color: rgba(0, 0, 0, .54);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.select-option-group > .select-option {
padding-left: 26px
}
.select-option {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
color: rgba(0, 0, 0, .87);
padding-left: 16px;
padding-right: 16px;
font-size: 1rem;
font-weight: 400;
background-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.select-option.active, .select-option.selected.active, .select-option:hover:not(.disabled) {
background-color: rgba(0, 0, 0, .048)
}
.select-option.selected.disabled {
cursor: default;
color: #9e9e9e;
background-color: transparent
}
.select-option.selected {
background-color: rgba(0, 0, 0, .02)
}
.select-option.disabled {
cursor: default;
color: #9e9e9e
}
.select-option-text .form-check-input {
margin-right: 10px
}
.select-option-secondary-text {
font-size: .8rem;
color: #6c757d;
display: block;
line-height: normal
}
.select-option-icon {
width: 28px;
height: 28px
}
.select-custom-content {
padding: 16px
}
.select-no-results {
padding-left: 16px;
padding-right: 16px;
display: flex;
align-items: center
}
.form-white .select-input.focused ~ .select-arrow {
color: #fff
}
.form-outline .form-control.active ~ .form-label.select-fake-value, .form-outline .form-control:focus ~ .form-label.select-fake-value, .form-outline .form-control ~ .form-label.select-fake-value {
transform: none;
display: none
}
.form-outline .form-control.active ~ .form-label.select-fake-value.active, .form-outline .form-control:focus ~ .form-label.select-fake-value.active, .form-outline .form-control ~ .form-label.select-fake-value.active {
display: block
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>学生信息查询</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/mdb.min.css"/>
<link rel="stylesheet" href="css/datepicker.min.css"
<style>
.table-container {
min-width: 80vw; /* 设置最小宽度为视窗宽度的80% */
min-height: 80vh; /* 设置最小高度为视窗高度的80% */
/*display: flex;*/
align-items: center;
justify-content: center;
}
.table-container table {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
<div class="container">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<i class="fas fa-chalkboard-user me-2"></i>
教务管理系统
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
学生管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="#">学生信息查询</a></li>
<li><a class="dropdown-item" href="#">学生信息管理</a></li>
<li><a class="dropdown-item" href="#">学生信息管理</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
教师管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
<li><a class="dropdown-item" href="#">教师信息管理</a></li>
<li><a class="dropdown-item" href="#">教师课程管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
课程管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
<li><a class="dropdown-item" href="#">课程信息管理</a></li>
<li><a class="dropdown-item" href="#">课程安排管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
系统管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown4">
<li><a class="dropdown-item" href="#">个人设定</a></li>
<li><a class="dropdown-item" href="#">用户管理</a></li>
<li><a class="dropdown-item" href="#">日志管理</a></li>
<li><a class="dropdown-item" href="#">版本信息</a></li>
</ul>
</li>
</ul>
</div>
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-circle-user fa-lg"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="logout">登出</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="bg-image shadow-2-strong vh-100"
style="background-image: url('img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg'); margin-top: -58.59px;">
<div class="mask d-flex align-items-center h-100" style="background-color: hsla(0, 0%, 100%, 0.5);">
<div class="container d-flex justify-content-center">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">数据查询</h3>
<form action="">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="firstName" class="form-control"/>
<label class="form-label" for="firstName">名字</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input
type="text"
class="form-control"
id="birthdayDate"
/>
<label for="birthdayDate" class="form-label">出生日期</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">性别: </h6>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="femaleGender"
value="option1"
/>
<label class="form-check-label" for="femaleGender"></label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="maleGender"
value="option2"
/>
<label class="form-check-label" for="maleGender"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="id" id="id" class="form-control"/>
<label class="form-label" for="id">学号</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" id="phoneNumber" class="form-control"/>
<label class="form-label" for="phoneNumber">联系方式</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6 class="mb-3">班级</h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
<label class="form-check-label" for="inlineCheckbox1">1班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
<label class="form-check-label" for="inlineCheckbox2">2班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" />
<label class="form-check-label" for="inlineCheckbox2">3班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4" />
<label class="form-check-label" for="inlineCheckbox2">4班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option5" />
<label class="form-check-label" for="inlineCheckbox2">5班</label>
</div>
<div class="mt-4">
<input class="btn btn-warning btn-lg" type="submit" value="Submit"/>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="bg-link text-center text-lg-start ">
</footer>
<!-- Footer -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,295 @@
.select-dropdown .form-check-input label {
display: block
}
select.select-initialized {
display: none !important
}
.select-arrow {
color: #000;
text-align: center;
font-size: .8rem;
position: absolute;
top: 9px;
right: 9px
}
.select-arrow:before {
content: "▼"
}
.was-validated .form-control:valid ~ .select-arrow {
color: #00b74a
}
.was-validated .form-control:invalid ~ .select-arrow {
color: #f93154
}
.select-clear-btn {
color: #000;
font-size: 1rem;
position: absolute;
top: 7px;
right: 27px;
cursor: pointer
}
.select-clear-btn:focus {
color: #3b71ca;
outline: none
}
.form-control-sm ~ .select-clear-btn {
font-size: .8rem;
top: 4px
}
.form-control-lg ~ .select-clear-btn {
top: 11px
}
.select-dropdown-container {
z-index: 1070
}
.select-dropdown {
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
margin: 0;
min-width: 100px;
outline: 0;
position: relative;
transform: scaleY(.8);
opacity: 0;
transition: all .2s
}
.select-dropdown.open {
transform: scaleY(1);
opacity: 1
}
.select-dropdown > .input-group {
padding: 10px
}
.select-label {
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.select-label.active {
transform: translateY(-1rem) translateY(.1rem) scale(.8)
}
.form-control-lg ~ .select-label.active {
transform: translateY(-1.25rem) translateY(.1rem) scale(.8)
}
.form-control-sm ~ .select-label.active {
transform: translateY(-.83rem) translateY(.1rem) scale(.8)
}
.form-outline .select-label.active ~ .form-notch .form-notch-middle {
border-right: none;
border-left: none;
border-top: 1px solid transparent !important
}
.select-input {
cursor: pointer
}
.select-input[disabled] {
cursor: default
}
.select-input.focused {
color: #616161;
outline: 0
}
.select-input.focused ~ .select-label {
color: #3b71ca
}
.select-input.focused::-moz-placeholder {
opacity: 1
}
.select-input.focused::placeholder {
opacity: 1
}
.select-input.focused ~ .form-notch .form-notch-leading {
border-color: #3b71ca;
box-shadow: -1px 0 0 0 #3b71ca, 0 1px 0 0 #3b71ca, 0 -1px 0 0 #3b71ca
}
.select-input.focused ~ .form-notch .form-notch-middle {
border-color: #3b71ca;
box-shadow: 0 1px 0 0 #3b71ca;
border-top: 1px solid transparent
}
.select-input.focused ~ .form-notch .form-notch-trailing {
border-color: #3b71ca;
box-shadow: 1px 0 0 0 #3b71ca, 0 -1px 0 0 #3b71ca, 0 1px 0 0 #3b71ca
}
.select-input.focused ~ .select-arrow {
color: #3b71ca
}
.form-white .select-arrow, .form-white .select-clear-btn, .form-white .select-input:focus ~ .select-arrow {
color: #fff
}
.form-control-sm ~ .select-arrow {
top: 3px
}
.form-control-lg ~ .select-arrow {
top: 13px
}
.select-options-wrapper {
overflow-y: auto
}
.select-options-wrapper::-webkit-scrollbar {
width: 4px;
height: 4px
}
.select-options-wrapper::-webkit-scrollbar-button:end:increment, .select-options-wrapper::-webkit-scrollbar-button:start:decrement {
display: block;
height: 0;
background-color: transparent
}
.select-options-wrapper::-webkit-scrollbar-track-piece {
background-color: transparent;
border-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.select-options-wrapper::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #999;
border-radius: 4px
}
.select-options-list {
list-style: none;
margin: 0;
padding: 0
}
.select-option-group-label {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 16px;
padding-right: 16px;
font-size: 1rem;
font-weight: 400;
background-color: transparent;
color: rgba(0, 0, 0, .54);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.select-option-group > .select-option {
padding-left: 26px
}
.select-option {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
color: rgba(0, 0, 0, .87);
padding-left: 16px;
padding-right: 16px;
font-size: 1rem;
font-weight: 400;
background-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.select-option.active, .select-option.selected.active, .select-option:hover:not(.disabled) {
background-color: rgba(0, 0, 0, .048)
}
.select-option.selected.disabled {
cursor: default;
color: #9e9e9e;
background-color: transparent
}
.select-option.selected {
background-color: rgba(0, 0, 0, .02)
}
.select-option.disabled {
cursor: default;
color: #9e9e9e
}
.select-option-text .form-check-input {
margin-right: 10px
}
.select-option-secondary-text {
font-size: .8rem;
color: #6c757d;
display: block;
line-height: normal
}
.select-option-icon {
width: 28px;
height: 28px
}
.select-custom-content {
padding: 16px
}
.select-no-results {
padding-left: 16px;
padding-right: 16px;
display: flex;
align-items: center
}
.form-white .select-input.focused ~ .select-arrow {
color: #fff
}
.form-outline .form-control.active ~ .form-label.select-fake-value, .form-outline .form-control:focus ~ .form-label.select-fake-value, .form-outline .form-control ~ .form-label.select-fake-value {
transform: none;
display: none
}
.form-outline .form-control.active ~ .form-label.select-fake-value.active, .form-outline .form-control:focus ~ .form-label.select-fake-value.active, .form-outline .form-control ~ .form-label.select-fake-value.active {
display: block
}

File diff suppressed because one or more lines are too long

3084
project2/web/resources/js/select.min.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -136,14 +136,7 @@
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-4">
<div class="form-outline"> <div class="form-outline">
<input type="text" id="firstName" class="form-control"/> <input type="text" id="firstName" class="form-control"/>
<label class="form-label" for="firstName">First Name</label> <label class="form-label" for="firstName">名字</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="lastName" class="form-control"/>
<label class="form-label" for="lastName">Last Name</label>
</div> </div>
</div> </div>
</div> </div>
@ -155,11 +148,11 @@
class="form-control" class="form-control"
id="birthdayDate" id="birthdayDate"
/> />
<label for="birthdayDate" class="form-label">Birthday</label> <label for="birthdayDate" class="form-label">出生日期</label>
</div> </div>
</div> </div>
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender: </h6> <h6 class="mb-2 pb-1">性别: </h6>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input <input
class="form-check-input" class="form-check-input"
@ -168,7 +161,7 @@
id="femaleGender" id="femaleGender"
value="option1" value="option1"
/> />
<label class="form-check-label" for="femaleGender">Female</label> <label class="form-check-label" for="femaleGender"></label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input <input
@ -178,38 +171,49 @@
id="maleGender" id="maleGender"
value="option2" value="option2"
/> />
<label class="form-check-label" for="maleGender">Male</label> <label class="form-check-label" for="maleGender"></label>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-4">
<div class="form-outline"> <div class="form-outline">
<input type="email" id="emailAddress" class="form-control"/> <input type="id" id="id" class="form-control"/>
<label class="form-label" for="emailAddress">Email</label> <label class="form-label" for="id">学号</label>
</div> </div>
</div> </div>
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-4">
<div class="form-outline"> <div class="form-outline">
<input type="tel" id="phoneNumber" class="form-control"/> <input type="tel" id="phoneNumber" class="form-control"/>
<label class="form-label" for="phoneNumber">Phone Number</label> <label class="form-label" for="phoneNumber">联系方式</label>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h6 class="mb-3">Subject</h6> <h6 class="mb-3">班级</h6>
<select class="select" multiple> <div class="form-check form-check-inline">
<option value="1">One</option> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
<option value="2">Two</option> <label class="form-check-label" for="inlineCheckbox1">1班</label>
<option value="3">Three</option> </div>
<option value="4">Four</option>
<option value="5">Five</option> <div class="form-check form-check-inline">
<option value="6">Six</option> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
<option value="7">Seven</option> <label class="form-check-label" for="inlineCheckbox2">2班</label>
<option value="8">Eight</option> </div>
</select> <div class="form-check form-check-inline">
<label class="form-label select-label">Choose option</label> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" />
<label class="form-check-label" for="inlineCheckbox3">3班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4" />
<label class="form-check-label" for="inlineCheckbox4">4班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option5" />
<label class="form-check-label" for="inlineCheckbox5">5班</label>
</div>
<div class="mt-4"> <div class="mt-4">
<input class="btn btn-warning btn-lg" type="submit" value="Submit"/> <input class="btn btn-warning btn-lg" type="submit" value="Submit"/>
</div> </div>