ExamAware/ExamSchedule
3
0
Fork 0
mirror of https://github.com/ExamAware/ExamSchedule.git synced 2025-04-29 19:16:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化主导航按钮样式，调整布局和交互效果，移除选择版本标题

Browse Source
This commit is contained in:
MKStoler1024 2025-04-15 15:12:05 +00:00
parent 9b88b395f6
commit 23927cdd20
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@ -21,42 +21,46 @@
}
h1 {
color: #E6E1E5;
font-size: 48px;
text-align: center;
margin-bottom: 40px;
animation: fadeInUp 1s ease-in-out;
font-weight: 500;
display: none; /* 隐藏选择版本标题 */
}
/* 只针对主导航按钮的样式 */
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
animation: fadeInUp 1s ease-in-out;
}
a {
/* 主导航按钮样式 */
ul a {
color: #E6E1E5;
text-decoration: none;
font-size: 16px;
font-size: 20px;
font-weight: 500;
padding: 16px 24px;
border-radius: 100px;
padding: 32px;
border-radius: 24px;
background-color: #49454F;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
gap: 16px;
min-width: 200px;
text-align: center;
}
a:hover {
ul a:hover {
background-color: #605D64;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
ul .material-icons {
font-size: 32px;
}
@keyframes fadeInUp {
@ -134,12 +138,15 @@
padding: 8px 16px;
border-radius: 100px;
font-size: 14px;
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.about-link:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: transparent;
transform: none;
box-shadow: none;
color: rgba(255, 255, 255, 0.7);
}
.about-link .material-icons {
@ -152,7 +159,6 @@
<img src="./icon.png" alt="ExamSchedule Logo" class="project-logo">
ExamSchedule
</div>
<h1>选择版本：</h1>
<ul>
<li><a href="./time/"><span class="material-icons">schedule</span>电子钟表</a></li>
<li><a href="./exam/"><span class="material-icons">dashboard</span>考试看板</a></li>