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

Commit 9894552

Browse files
setcysetcy
authored
Merge pull request #19 from KEAICONG/main
23030332金天培
2 parents 431c619 + dd2f9b3 commit 9894552

File tree

6 files changed

+284
-0
lines changed

6 files changed

+284
-0
lines changed

‎KEAICONG/css/style.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*
2+
* @author 可爱天培
3+
*/
4+
5+
6+
a, img, button, input, textarea {
7+
-webkit-tap-highlight-color:rgba(13, 19, 210, 0);
8+
}
9+
10+
11+
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 {
12+
margin: 0;
13+
padding: 0;
14+
font-size: 100%;
15+
border: 0;
16+
vertical-align:baseline;
17+
}
18+
19+
body {
20+
background-image: url('../images/图片1.png');
21+
background-size: cover; /* 背景图像大小适应页面 */
22+
background-repeat: no-repeat; /* 防止图像重复 */
23+
background-attachment: fixed; /* 固定背景图像 */
24+
font-size: 14px;
25+
color: #333;
26+
font-family: "Hiragino Sans GB", Tahoma, Arial, "Lantinghei SC", "Microsoft YaHei", "simsun", sans-serif;
27+
min-width: 1080px;
28+
}
29+
30+
31+
.wrap {
32+
max-width: 1080px;
33+
margin: 0 auto 20px;
34+
overflow: hidden;
35+
position:relative
36+
}
37+
38+
h1.title {
39+
font-size: 35px;
40+
text-align: center;
41+
margin-bottom: 10px;
42+
}
43+
44+
45+
46+
table label { -ms-text-size-adjust: 100%; /*用于解决IE10 for WP8字体过大的问题*/ }
47+
td,th { margin: 0; text-indent: 0; vertical-align: middle; }
48+
tr img { margin-bottom: -4px; }
49+
tr.color1 { background: #ededed; }
50+
tr.color2 { background: #F4F4F4; }
51+
tr.color3 { background: #ffffff; }
52+
tr.color4 { background: #ffffdd; }
53+
.tableBorder { line-height: 1.8em; margin-bottom: 0.8em; margin-top: 0.4em; -ms-text-size-adjust: 100%; /*用于解决IE10 for WP8字体过大的问题*/ }
54+
.tableBorder th { text-align: left; }
55+
.tableBorder-thcenter th { text-align: center; }
56+
.tableBorder-tdcenter td { text-align: center; }
57+
.ui-sortable tr.color4 { cursor: move; }
58+
.noteinfo { font-weight: normal; font-size: 0.9em; color: #666; font-style: italic; }
59+
.tableFull { width: 100%; }
60+
.tdCenter { text-align: center; }
61+
.td5 { width: 5%; }
62+
.td10 { width: 10%; }
63+
.td15 { width: 15%; }
64+
.td20 { width: 20%; }
65+
.td25 { width: 25%; }
66+
.td30 { width: 30%; }
67+
.td35 { width: 35%; }
68+
table > tbody > tr > td:hover,
69+
table > tbody > tr > th:hover,
70+
table > tbody > tr:hover > td,
71+
table > tbody > tr:hover > th {background-color: #ffffdd;}
72+
/* table > tbody > tr:nth-of-type(odd) {background-color: #920707;} 奇数行的背颜色为 #F4F4F4，这是一种浅灰色 */
73+
/* table > thead > tr {background-color: #ffffff;} 表格头部的背景颜色为ededed,这是一种浅灰色*/
74+
75+
table{border:none;line-height:1.8;box-shadow:0 0 0.1em rgba(0,0,0,0.3);}
76+
td,th{border:none;padding:0.5em; }
77+
td:last-child{border-right:none;}
78+
th:last-child{border-right:none;}
79+
80+
table.table_hover > tbody > tr > td:hover,
81+
table.table_hover > tbody > tr > th:hover,
82+
table.table_hover > tbody > tr:hover > td,
83+
table.table_hover > tbody > tr:hover > th {background-color: #ffffdd;}
84+
/* table.table_striped > tbody > tr:nth-of-type(odd) {background-color: #F4F4F4;} */
85+
table.table_hover > tbody > tr > td:hover,
86+
table.table_hover > tbody > tr > th:hover,
87+
table.table_hover > tbody > tr:hover > td,
88+
table.table_hover > tbody > tr:hover > th {background-color: #ffffdd;}
89+
/* table.table_striped > tbody > tr:nth-of-type(odd) {background-color: #F4F4F4;} */
90+
91+
a.handle-link {
92+
color: #4352df;
93+
text-decoration: none;
94+
}
95+
a.handle-link:hover {
96+
text-decoration: underline;
97+
}
98+
99+
.layui-input-group {
100+
width: 100%;
101+
}

‎KEAICONG/data.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
[
2+
{
3+
"id": 1,
4+
"studentId": "1001",
5+
"name": "张三",
6+
"college": "计算机学院",
7+
"major": "计算机科学与技术",
8+
"grade": "2023",
9+
"class": "1",
10+
"age": 20
11+
},
12+
{
13+
"id": 2,
14+
"studentId": "1002",
15+
"name": "李四",
16+
"college": "计算机学院",
17+
"major": "计算机科学与技术",
18+
"grade": "2023",
19+
"class": "1",
20+
"age": 20
21+
}
22+
]

‎KEAICONG/images/ab99a44dc97c5653acc89a5ea3c47f9.jpg

172 KB
Loading

‎KEAICONG/images/mio.png

2.67 MB
Loading

‎KEAICONG/images/图片1.png

490 KB
Loading

‎KEAICONG/index.html

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>杭州电子科技大学学生管理系统</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/layui.min.css" rel="stylesheet">
9+
<!-- 引用了 layui 框架的样式 -->
10+
<link rel="stylesheet" href="css/style.css" />
11+
<!-- 引入自定义的 CSS 样式表 -->
12+
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
13+
<!-- js框架 -->
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
15+
<!-- axios是一种请求库 -->
16+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/layui.min.js"></script>
17+
<!-- 引用了弹出层组件，创建网页的交互效果 -->
18+
</head>
19+
<body>dui'a
20+
<div class="wrap">
21+
<!-- 包裹整个网页 -->
22+
<h1 class="title">学生管理系统</h1>
23+
<!-- 网页标题 -->
24+
25+
<div x-data="{ items: [] }" x-init="() => {
26+
axios.get('./data.json').then(function (res) {
27+
items = res.data;
28+
});
29+
}">
30+
<!-- 初始化items，将在后面用于存储学生信息数据 -->
31+
<!-- 使用 Axios 库发起 GET 请求来获取名为 "data.json" 的数据文件 ，当请求成功完成并响应时，执行 then 中的函数，获取数据部分，并将其赋值给名为 items-->
32+
<table border="1" class="tableFull tableBorder tableBorder-tdcenter tableBorder-thcenter table_hover table_striped">
33+
<!-- CSS 类的集合，定义表格的样式和行为 -->
34+
<tbody>
35+
<tr>
36+
<th>序号</th>
37+
<th>学号</th>
38+
<th>姓名</th>
39+
<th>学院</th>
40+
<th>专业</th>
41+
<th>年级</th>
42+
<th>班级</th>
43+
<th>年龄</th>
44+
<th>操作</th>
45+
</tr>
46+
<template x-for="item in items" :key="item.id">
47+
<!-- 动态生成表格行的部分 -->
48+
<tr>
49+
<td x-text="item.id"></td>
50+
<td x-text="item.studentId"></td>
51+
<td x-text="item.name"></td>
52+
<td x-text="item.college"></td>
53+
<td x-text="item.major"></td>
54+
<td x-text="item.grade"></td>
55+
<td x-text="item.class"></td>
56+
<td x-text="item.age"></td>
57+
<td><a href="javascript:;" @click="window.showInfo(item)" class="handle-link">查询</a></td>
58+
<!-- 点击链接时，将触发 window.showInfo(item) 这个函数 -->
59+
</tr>
60+
</template>
61+
</tbody>
62+
</table>
63+
</div>
64+
</div>
65+
<script>
66+
layui.use(function () {
67+
var layer = layui.layer;
68+
window.showInfo = function (stu) {
69+
layer.open({
70+
// 弹出层的函数
71+
content: '\
72+
<div class="layui-form">\
73+
<div class="layui-form-item">\
74+
<div class="layui-input-group">\
75+
<div class="layui-input-split layui-input-prefix">\
76+
ID\
77+
</div>\
78+
<input type="text" value="'+stu.id+'" class="layui-input" disabled>\
79+
</div>\
80+
</div>\
81+
</div>\
82+
<div class="layui-form">\
83+
<div class="layui-form-item">\
84+
<div class="layui-input-group">\
85+
<div class="layui-input-split layui-input-prefix">\
86+
学号\
87+
</div>\
88+
<input type="text" value="'+stu.studentId+'" class="layui-input" disabled>\
89+
</div>\
90+
</div>\
91+
</div>\
92+
<div class="layui-form">\
93+
<div class="layui-form-item">\
94+
<div class="layui-input-group">\
95+
<div class="layui-input-split layui-input-prefix">\
96+
姓名\
97+
</div>\
98+
<input type="text" value="'+stu.name+'" class="layui-input" disabled>\
99+
</div>\
100+
</div>\
101+
</div>\
102+
<div class="layui-form">\
103+
<div class="layui-form-item">\
104+
<div class="layui-input-group">\
105+
<div class="layui-input-split layui-input-prefix">\
106+
学院\
107+
</div>\
108+
<input type="text" value="'+stu.college+'" class="layui-input" disabled>\
109+
</div>\
110+
</div>\
111+
</div>\
112+
<div class="layui-form">\
113+
<div class="layui-form-item">\
114+
<div class="layui-input-group">\
115+
<div class="layui-input-split layui-input-prefix">\
116+
专业\
117+
</div>\
118+
<input type="text" value="'+stu.major+'" class="layui-input" disabled>\
119+
</div>\
120+
</div>\
121+
</div>\
122+
<div class="layui-form">\
123+
<div class="layui-form-item">\
124+
<div class="layui-input-group">\
125+
<div class="layui-input-split layui-input-prefix">\
126+
年级\
127+
</div>\
128+
<input type="text" value="'+stu.grade+'" class="layui-input" disabled>\
129+
</div>\
130+
</div>\
131+
</div>\
132+
<div class="layui-form">\
133+
<div class="layui-form-item">\
134+
<div class="layui-input-group">\
135+
<div class="layui-input-split layui-input-prefix">\
136+
班级\
137+
</div>\
138+
<input type="text" value="'+stu.class+'" class="layui-input" disabled>\
139+
</div>\
140+
</div>\
141+
</div>\
142+
<div class="layui-form">\
143+
<div class="layui-form-item">\
144+
<div class="layui-input-group">\
145+
<div class="layui-input-split layui-input-prefix">\
146+
年龄\
147+
</div>\
148+
<input type="text" value="'+stu.age+'" class="layui-input" disabled>\
149+
</div>\
150+
</div>\
151+
</div>\
152+
',
153+
area: ['520px', '560px']
154+
});
155+
};
156+
});
157+
</script>
158+
</body>
159+
</html>
160+
161+

0 commit comments

Comments
 (0)