/* 添加考试按钮 */
.add-exam-btn {
background-color: rgba(74, 111, 165, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
transition: all 0.3s ease;
transform: translateY(0);
} .add-exam-btn:hover { background-color: #3a5a8c; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.add-exam-btn:hover {
background-color: #3a5a8c;
}
/* 考试总结容器 */
.exam-summary-container { background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
/* 便利贴样式 */
.exam-note {
background-color: rgba(255, 243, 152, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
position: relative;
min-height: 180px;
transform: rotate(-1deg);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
overflow: hidden;
} .exam-note:hover { transform: rotate(0deg) scale(1.05); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.exam-note::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #f59f00;
}
.exam-note:nth-child(3n+2) {
background-color: rgba(167, 255, 235, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transform: rotate(1deg);
}
.exam-note:nth-child(3n+2)::before {
background-color: #00b8d9;
}
.exam-note:nth-child(3n+3) {
background-color: rgba(255, 204, 213, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transform: rotate(-0.5deg);
}
.exam-note:nth-child(3n+3)::before {
background-color: #e64980;
}
.exam-note:hover {
transform: scale(1.05) rotate(0deg);
z-index: 10;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.exam-name {
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
color: #333;
padding-right: 30px;
}
.exam-date {
font-size: 13px;
color: #666;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 5px;
}
.exam-date i {
font-size: 12px;
}
.exam-record-count {
font-size: 14px;
color: #555;
position: absolute;
bottom: 15px;
left: 20px;
}
/* 删除按钮 */
.delete-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #e64980;
cursor: pointer;
font-size: 16px;
opacity: 0.6;
transition: all 0.3s;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.delete-btn:hover {
opacity: 1;
background-color: rgba(230, 73, 128, 0.1);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}
.modal-content { background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
padding: 30px;
border-radius: 12px;
width: 90%;
max-width: 1000px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
position: relative;
animation: modalFadeIn 0.3s;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.close-modal {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #666;
transition: color 0.3s;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #f5f5f5;
}
.close-modal:hover {
color: #e64980;
background-color: #f0f0f0;
}
/* 图表容器 */
.chart-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 30px 0;
}
@media (max-width: 768px) {
.chart-container {
grid-template-columns: 1fr;
}
}
.chart-wrapper {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.chart-wrapper h3 {
margin-bottom: 20px;
color: #444;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.chart-wrapper h3 i {
color: #4a6fa5;
}
/* 比较表格 */
.comparison-section {
margin-top: 40px;
}
.comparison-section h3 {
margin-bottom: 20px;
color: #444;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.comparison-section h3 i {
color: #4a6fa5;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.comparison-table th,
.comparison-table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid #f0f0f0;
}
.comparison-table th {
background-color: #f5f7fa;
font-weight: 600;
color: #444;
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table tr:hover {
background-color: #f9f9f9;
}
/* 状态标签 */
.status-up {
color: #34d399;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.status-down {
color: #f87171;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.status-none {
color: #9ca3af;
font-style: italic;
}
/* 添加考试表单 */
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #444;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group select:focus {
border-color: #4a6fa5;
box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.1);
outline: none;
}
.submit-btn {
background-color: rgba(74, 111, 165, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: white;
border: none;
padding: 12px 25px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #3a5a8c;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #888;
}
.empty-state i {
font-size: 60px;
margin-bottom: 20px;
color: #ddd;
}
.empty-state p {
font-size: 16px;
margin-bottom: 25px;
}