program/student.html at main · ANAN-dot/program · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧选课通 - 学生端</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: '微软雅黑', 'Segoe UI', sans-serif;
        }

        /* 页面整体布局 */
        body {
            background: #f5f7fa;
            min-height: 100vh;
        }

        /* 顶部导航栏 */
        .header {
            background: #1a4b8e;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* 侧边导航 */
        .sidebar {
            width: 240px;
            background: white;
            height: calc(100vh - 64px);
            position: fixed;
            padding: 1.5rem;
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
        }

        .nav-item {
            padding: 0.8rem 1rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            margin-bottom: 0.5rem;
        }

        .nav-item.active {
            background: #f0f5ff;
            color: #1a4b8e;
            font-weight: 500;
        }

        /* 主内容区 */
        .main-content {
            margin-left: 240px;
            padding: 2rem;
        }

        /* 功能卡片通用样式 */
        .card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }

        /* 课程表模块 */
        .schedule {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1rem;
        }

        .schedule-day {
            background: #f8f9ff;
            border-radius: 8px;
            padding: 1rem;
        }

        /* 教室查询 */
        .classroom-filter {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .classroom-filter select {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 6px;
        }

        .classroom-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .classroom-item {
            background: #f8f9ff;
            padding: 1rem;
            border-radius: 8px;
            position: relative;
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            right: 1rem;
            top: 1rem;
        }

        .available { background: #4CAF50; }
        .in-use { background: #f44336; }

        /* 考试信息 */
        .exam-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .exam-item {
            display: flex;
            justify-content: space-between;
            padding: 1rem;
            background: #fff3e0;
            border-radius: 6px;
        }

        /* 成绩查询 */
        .score-table {
            width: 100%;
            border-collapse: collapse;
        }

        .score-table th,
        .score-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        /* 功能图标 */
        .icon {
            width: 24px;
            height: 24px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="header">
        <h2>智慧选课通学生端</h2>
        <div class="user-info">
            <span>张三同学</span>
            <span>202310001</span>
            <button class="logout-btn">退出登录</button>
        </div>
    </header>

    <!-- 侧边导航 -->
    <nav class="sidebar">
        <div class="nav-item active"> 我的课表</div>
        <div class="nav-item"> 课程查询</div>
        <div class="nav-item"> 教室状态</div>
        <div class="nav-item"> 考试安排</div>
        <div class="nav-item"> 成绩查询</div>
        <div class="nav-item"> 个人设置</div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 课表模块 -->
        <div class="card">
            <h3>本周课表 (第12教学周)</h3>
            <div class="schedule">
                <div class="schedule-day">
                    <h4>周一</h4>
                    <p>高等数学<br>08:00-09:40<br>逸夫楼302</p>
                </div>
                <!-- 其他日期 -->
            </div>
        </div>

        <!-- 教室查询 -->
        <div class="card">
            <h3>教室状态查询</h3>
            <div class="classroom-filter">
                <select>
                    <option>全部教学楼</option>
                    <option>逸夫楼</option>
                    <option>明德楼</option>
                </select>
                <select>
                    <option>当前时间</option>
                    <option>上午</option>
                    <option>下午</option>
                </select>
            </div>
            <div class="classroom-list">
                <div class="classroom-item">
                    <div class="status-indicator available"></div>
                    <h4>逸夫楼201</h4>
                    <p>容量：80人</p>
                    <p>状态：空闲</p>
                </div>
                <!-- 其他教室 -->
            </div>
        </div>

        <!-- 考试信息 -->
        <div class="card">
            <h3>近期考试安排</h3>
            <div class="exam-list">
                <div class="exam-item">
                    <span>线性代数</span>
                    <span>2023-12-25 09:00</span>
                    <span>逸夫楼501</span>
                </div>
                <!-- 其他考试 -->
            </div>
        </div>

        <!-- 成绩查询 -->
        <div class="card">
            <h3>本学期成绩</h3>
            <table class="score-table">
                <thead>
                    <tr>
                        <th>课程名称</th>
                        <th>学分</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>大学物理</td>
                        <td>3.0</td>
                        <td>85</td>
                    </tr>
                    <!-- 其他课程 -->
                </tbody>
            </table>
        </div>
    </main>
</body>
</html>