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