Skip to content
This repository was archived by the owner on Oct 17, 2023. It is now read-only.

23030332金天培 #19

Merged
merged 1 commit into from
Oct 13, 2023
Merged

23030332金天培 #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions KEAICONG/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* @author 可爱天培
*/


a, img, button, input, textarea {
-webkit-tap-highlight-color:rgba(13, 19, 210, 0);
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
font-size: 100%;
border: 0;
vertical-align:baseline;
}

body {
background-image: url('../images/图片1.png');
background-size: cover; /* 背景图像大小适应页面 */
background-repeat: no-repeat; /* 防止图像重复 */
background-attachment: fixed; /* 固定背景图像 */
font-size: 14px;
color: #333;
font-family: "Hiragino Sans GB", Tahoma, Arial, "Lantinghei SC", "Microsoft YaHei", "simsun", sans-serif;
min-width: 1080px;
}


.wrap {
max-width: 1080px;
margin: 0 auto 20px;
overflow: hidden;
position:relative
}

h1.title {
font-size: 35px;
text-align: center;
margin-bottom: 10px;
}



table label { -ms-text-size-adjust: 100%; /*用于解决IE10 for WP8字体过大的问题*/ }
td,th { margin: 0; text-indent: 0; vertical-align: middle; }
tr img { margin-bottom: -4px; }
tr.color1 { background: #ededed; }
tr.color2 { background: #F4F4F4; }
tr.color3 { background: #ffffff; }
tr.color4 { background: #ffffdd; }
.tableBorder { line-height: 1.8em; margin-bottom: 0.8em; margin-top: 0.4em; -ms-text-size-adjust: 100%; /*用于解决IE10 for WP8字体过大的问题*/ }
.tableBorder th { text-align: left; }
.tableBorder-thcenter th { text-align: center; }
.tableBorder-tdcenter td { text-align: center; }
.ui-sortable tr.color4 { cursor: move; }
.noteinfo { font-weight: normal; font-size: 0.9em; color: #666; font-style: italic; }
.tableFull { width: 100%; }
.tdCenter { text-align: center; }
.td5 { width: 5%; }
.td10 { width: 10%; }
.td15 { width: 15%; }
.td20 { width: 20%; }
.td25 { width: 25%; }
.td30 { width: 30%; }
.td35 { width: 35%; }
table > tbody > tr > td:hover,
table > tbody > tr > th:hover,
table > tbody > tr:hover > td,
table > tbody > tr:hover > th {background-color: #ffffdd;}
/* table > tbody > tr:nth-of-type(odd) {background-color: #920707;} 奇数行的背颜色为 #F4F4F4，这是一种浅灰色 */
/* table > thead > tr {background-color: #ffffff;} 表格头部的背景颜色为ededed,这是一种浅灰色*/

table{border:none;line-height:1.8;box-shadow:0 0 0.1em rgba(0,0,0,0.3);}
td,th{border:none;padding:0.5em; }
td:last-child{border-right:none;}
th:last-child{border-right:none;}

table.table_hover > tbody > tr > td:hover,
table.table_hover > tbody > tr > th:hover,
table.table_hover > tbody > tr:hover > td,
table.table_hover > tbody > tr:hover > th {background-color: #ffffdd;}
/* table.table_striped > tbody > tr:nth-of-type(odd) {background-color: #F4F4F4;} */
table.table_hover > tbody > tr > td:hover,
table.table_hover > tbody > tr > th:hover,
table.table_hover > tbody > tr:hover > td,
table.table_hover > tbody > tr:hover > th {background-color: #ffffdd;}
/* table.table_striped > tbody > tr:nth-of-type(odd) {background-color: #F4F4F4;} */

a.handle-link {
color: #4352df;
text-decoration: none;
}
a.handle-link:hover {
text-decoration: underline;
}

.layui-input-group {
width: 100%;
}
22 changes: 22 additions & 0 deletions KEAICONG/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
[
{
"id": 1,
"studentId": "1001",
"name": "张三",
"college": "计算机学院",
"major": "计算机科学与技术",
"grade": "2023",
"class": "1",
"age": 20
},
{
"id": 2,
"studentId": "1002",
"name": "李四",
"college": "计算机学院",
"major": "计算机科学与技术",
"grade": "2023",
"class": "1",
"age": 20
}
]
Binary file added KEAICONG/images/ab99a44dc97c5653acc89a5ea3c47f9.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added KEAICONG/images/mio.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added KEAICONG/images/图片1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
161 changes: 161 additions & 0 deletions KEAICONG/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>杭州电子科技大学学生管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/layui.min.css" rel="stylesheet">
<!-- 引用了 layui 框架的样式 -->
<link rel="stylesheet" href="css/style.css" />
<!-- 引入自定义的 CSS 样式表 -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<!-- js框架 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<!-- axios是一种请求库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/layui.min.js"></script>
<!-- 引用了弹出层组件，创建网页的交互效果 -->
</head>
<body>dui'a
<div class="wrap">
<!-- 包裹整个网页 -->
<h1 class="title">学生管理系统</h1>
<!-- 网页标题 -->

<div x-data="{ items: [] }" x-init="() => {
axios.get('./data.json').then(function (res) {
items = res.data;
});
}">
<!-- 初始化items，将在后面用于存储学生信息数据 -->
<!-- 使用 Axios 库发起 GET 请求来获取名为 "data.json" 的数据文件 ，当请求成功完成并响应时，执行 then 中的函数，获取数据部分，并将其赋值给名为 items-->
<table border="1" class="tableFull tableBorder tableBorder-tdcenter tableBorder-thcenter table_hover table_striped">
<!-- CSS 类的集合，定义表格的样式和行为 -->
<tbody>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>学院</th>
<th>专业</th>
<th>年级</th>
<th>班级</th>
<th>年龄</th>
<th>操作</th>
</tr>
<template x-for="item in items" :key="item.id">
<!-- 动态生成表格行的部分 -->
<tr>
<td x-text="item.id"></td>
<td x-text="item.studentId"></td>
<td x-text="item.name"></td>
<td x-text="item.college"></td>
<td x-text="item.major"></td>
<td x-text="item.grade"></td>
<td x-text="item.class"></td>
<td x-text="item.age"></td>
<td><a href="javascript:;" @click="window.showInfo(item)" class="handle-link">查询</a></td>
<!-- 点击链接时，将触发 window.showInfo(item) 这个函数 -->
</tr>
</template>
</tbody>
</table>
</div>
</div>
<script>
layui.use(function () {
var layer = layui.layer;
window.showInfo = function (stu) {
layer.open({
// 弹出层的函数
content: '\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
ID\
</div>\
<input type="text" value="'+stu.id+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
学号\
</div>\
<input type="text" value="'+stu.studentId+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
姓名\
</div>\
<input type="text" value="'+stu.name+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
学院\
</div>\
<input type="text" value="'+stu.college+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
专业\
</div>\
<input type="text" value="'+stu.major+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
年级\
</div>\
<input type="text" value="'+stu.grade+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
班级\
</div>\
<input type="text" value="'+stu.class+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
<div class="layui-form">\
<div class="layui-form-item">\
<div class="layui-input-group">\
<div class="layui-input-split layui-input-prefix">\
年龄\
</div>\
<input type="text" value="'+stu.age+'" class="layui-input" disabled>\
</div>\
</div>\
</div>\
',
area: ['520px', '560px']
});
};
});
</script>
</body>
</html>