1f9fc4a164
Web端 优化UI界面 ANDROID端 - 在错题页面中添加详细统计信息，显示错题数量和已练习情况 - 实现单个错题的练习功能，用户可以直接练习特定错题 - 增加标记错题为已掌握的功能，用户可以管理自己的错题库 - 优化题目卡片，显示作答次数，提升用户对题目的掌握情况 - 更新导航结构，增加错题练习的入口，提升功能可用性 - 更新导航结构整合精简重复入口 这些改进旨在提升用户在错题管理和练习过程中的体验，帮助用户更有效地复习和掌握知识点。
2424 lines
51 KiB
CSS
2424 lines
51 KiB
CSS
/* style.css - 现代化响应式设计 */
|
||
|
||
/* ====== 基础设置 ====== */
|
||
:root {
|
||
/* 颜色变量 */
|
||
--primary-color: #4361ee;
|
||
--primary-hover: #3a56e7;
|
||
--secondary-color: #3f8efc;
|
||
--success-color: #2ec4b6;
|
||
--danger-color: #e63946;
|
||
--warning-color: #ffb703;
|
||
--info-color: #4cc9f0;
|
||
--light-color: #f8f9fa;
|
||
--dark-color: #212529;
|
||
--gray-100: #f8f9fa;
|
||
--gray-200: #e9ecef;
|
||
--gray-300: #dee2e6;
|
||
--gray-400: #ced4da;
|
||
--gray-500: #adb5bd;
|
||
--gray-600: #6c757d;
|
||
--gray-700: #495057;
|
||
--gray-800: #343a40;
|
||
--gray-900: #212529;
|
||
|
||
/* 字体与尺寸 */
|
||
--font-main: 'Roboto', 'Noto Sans SC', sans-serif;
|
||
--border-radius: 0.5rem;
|
||
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||
--transition: all 0.3s ease;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-main);
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #eaf5ff 100%);
|
||
color: var(--gray-800);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* ====== 顶部导航栏 ====== */
|
||
nav {
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
|
||
padding: 0.5rem 1.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.nav-logo {
|
||
color: var(--primary-color);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
margin-right: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-logo i {
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: nowrap; /* 桌面端不换行 */
|
||
justify-content: flex-start; /* 左对齐以支持滚动 */
|
||
width: 100%;
|
||
}
|
||
|
||
/* 桌面端水平滚动样式 - 只在大屏幕上生效 */
|
||
@media (min-width: 769px) {
|
||
.nav-links {
|
||
overflow-x: auto; /* 水平滚动 */
|
||
overflow-y: hidden;
|
||
/* 滚动条样式 */
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--gray-400) transparent;
|
||
}
|
||
}
|
||
|
||
/* 桌面端滚动条样式 - 只在大屏幕上生效 */
|
||
@media (min-width: 769px) {
|
||
.nav-links::-webkit-scrollbar {
|
||
height: 6px;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar-thumb {
|
||
background-color: var(--gray-400);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar-thumb:hover {
|
||
background-color: var(--gray-500);
|
||
}
|
||
}
|
||
|
||
/* 桌面端隐藏移动菜单元素 */
|
||
.mobile-menu-header,
|
||
.mobile-menu-group,
|
||
.mobile-menu-group-label {
|
||
display: none;
|
||
}
|
||
|
||
.nav-link {
|
||
color: var(--gray-700);
|
||
text-decoration: none;
|
||
font-size: 1rem;
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: var(--border-radius);
|
||
transition: var(--transition);
|
||
flex-shrink: 0; /* 防止链接收缩 */
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background-color: var(--gray-100);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.nav-link.active {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.nav-right .logout-link {
|
||
background-color: var(--danger-color);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: var(--border-radius);
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
display: inline-block;
|
||
}
|
||
|
||
.nav-right .logout-link:hover {
|
||
background-color: #d32f2f;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: none;
|
||
background: var(--primary-color);
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
color: white;
|
||
cursor: pointer;
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: var(--transition);
|
||
box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
|
||
z-index: 1001;
|
||
}
|
||
|
||
/* ====== 主内容容器 ====== */
|
||
.container {
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0.75rem 1.5rem;
|
||
flex: 1;
|
||
}
|
||
|
||
.card {
|
||
background-color: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--box-shadow);
|
||
padding: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-title {
|
||
color: var(--gray-800);
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.card-subtitle {
|
||
color: var(--gray-600);
|
||
font-size: 1.1rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* ====== 表单元素 ====== */
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 0.75rem 1rem;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
color: var(--gray-700);
|
||
background-color: #fff;
|
||
background-clip: padding-box;
|
||
border: 1px solid var(--gray-300);
|
||
border-radius: var(--border-radius);
|
||
transition: var(--transition);
|
||
-webkit-appearance: none; /* 移除iOS默认样式 */
|
||
appearance: none;
|
||
/* 移动端触摸优化 */
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
.form-control:focus {
|
||
border-color: var(--primary-color);
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
|
||
}
|
||
|
||
/* 输入框优化 */
|
||
input.form-control {
|
||
min-height: 2.75rem; /* 确保触摸区域足够大 */
|
||
}
|
||
|
||
/* 为移动设备优化的选择框 */
|
||
select.form-control {
|
||
cursor: pointer;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M3.5 4.5L6 7l2.5-2.5L10 6l-4 4-4-4z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 1rem center;
|
||
background-size: 0.75rem;
|
||
padding-right: 2.5rem;
|
||
}
|
||
|
||
/* 为移动设备优化的复选框和单选框 */
|
||
.option-checkbox,
|
||
input[type="checkbox"],
|
||
input[type="radio"] {
|
||
min-width: 1.25rem;
|
||
min-height: 1.25rem;
|
||
/* 确保足够大的触摸区域 */
|
||
}
|
||
|
||
/* 移动端表单布局优化 */
|
||
@media (max-width: 768px) {
|
||
.form-row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.form-control {
|
||
font-size: 16px; /* 避免iOS缩放 */
|
||
padding: 0.7rem 0.9rem;
|
||
}
|
||
|
||
/* 增大按钮间距，防止误触 */
|
||
.btn + .btn {
|
||
margin-top: 0.5rem;
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
|
||
/* 更小屏幕的表单元素优化 */
|
||
@media (max-width: 480px) {
|
||
.form-control {
|
||
padding: 0.65rem 0.85rem;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
/* ====== 按钮样式 ====== */
|
||
.btn {
|
||
display: inline-block;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
user-select: none;
|
||
border: 1px solid transparent;
|
||
padding: 0.75rem 1.5rem;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
border-radius: var(--border-radius);
|
||
transition: var(--transition);
|
||
cursor: pointer;
|
||
/* 触摸优化 */
|
||
touch-action: manipulation;
|
||
-webkit-tap-highlight-color: transparent;
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* 确保移动端触摸区域足够大 */
|
||
min-height: 2.75rem;
|
||
}
|
||
|
||
/* 添加触摸反馈效果 */
|
||
.btn::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
|
||
background-repeat: no-repeat;
|
||
background-position: 50%;
|
||
transform: scale(10, 10);
|
||
opacity: 0;
|
||
transition: transform 0.5s, opacity 0.8s;
|
||
}
|
||
|
||
.btn:active::after {
|
||
transform: scale(0, 0);
|
||
opacity: 0.3;
|
||
transition: 0s;
|
||
}
|
||
|
||
.btn:focus {
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
|
||
}
|
||
|
||
.btn-primary {
|
||
color: #fff;
|
||
background-color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: var(--primary-hover);
|
||
border-color: var(--primary-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-success {
|
||
color: #fff;
|
||
background-color: var(--success-color);
|
||
border-color: var(--success-color);
|
||
}
|
||
|
||
.btn-success:hover {
|
||
background-color: #25a99d;
|
||
border-color: #25a99d;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-danger {
|
||
color: #fff;
|
||
background-color: var(--danger-color);
|
||
border-color: var(--danger-color);
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background-color: #d32f2f;
|
||
border-color: #d32f2f;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-warning {
|
||
color: #212529;
|
||
background-color: var(--warning-color);
|
||
border-color: var(--warning-color);
|
||
}
|
||
|
||
.btn-warning:hover {
|
||
background-color: #e5a602;
|
||
border-color: #e5a602;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-info {
|
||
color: white;
|
||
background-color: var(--info-color);
|
||
border-color: var(--info-color);
|
||
}
|
||
|
||
.btn-info:hover {
|
||
background-color: #0ea5e9;
|
||
border-color: #0ea5e9;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-outline-primary {
|
||
color: var(--primary-color);
|
||
background-color: transparent;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.btn-outline-primary:hover {
|
||
color: #fff;
|
||
background-color: var(--primary-color);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.875rem;
|
||
min-height: 2.25rem;
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: 1rem 2rem;
|
||
font-size: 1.25rem;
|
||
min-height: 3.25rem;
|
||
}
|
||
|
||
.btn-block {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 移动端按钮优化 */
|
||
@media (max-width: 768px) {
|
||
.btn {
|
||
padding: 0.7rem 1.25rem;
|
||
}
|
||
|
||
/* 增大按钮之间的间距以避免误触 */
|
||
.btn + .btn {
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
/* 移动端交互元素适配 */
|
||
.card-actions .btn,
|
||
.question-actions .btn {
|
||
width: 100%;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
}
|
||
|
||
/* 更小屏幕的按钮优化 */
|
||
@media (max-width: 480px) {
|
||
.btn {
|
||
padding: 0.65rem 1.15rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 0.45rem 0.9rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: 0.9rem 1.75rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|
||
|
||
/* ====== 徽章 ====== */
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
vertical-align: baseline;
|
||
border-radius: 50rem;
|
||
}
|
||
|
||
.badge-primary { background-color: var(--primary-color); color: white; }
|
||
.badge-success { background-color: var(--success-color); color: white; }
|
||
.badge-danger { background-color: var(--danger-color); color: white; }
|
||
.badge-warning { background-color: var(--warning-color); color: var(--gray-800); }
|
||
.badge-info { background-color: var(--info-color); color: white; }
|
||
|
||
/* ====== 答题页面样式 ====== */
|
||
.question-container {
|
||
background-color: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--box-shadow);
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.question-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.question-number {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #3248cc 100%);
|
||
color: white;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
box-shadow: 0 2px 8px rgba(67, 97, 238, 0.25);
|
||
}
|
||
|
||
.question-difficulty {
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.difficulty-easy { background-color: #a3e635; color: var(--gray-800); }
|
||
.difficulty-medium { background-color: #facc15; color: var(--gray-800); }
|
||
.difficulty-hard { background-color: #f87171; color: white; }
|
||
|
||
.question-stem {
|
||
font-size: 1.2rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--gray-800);
|
||
}
|
||
|
||
.options-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.option-item {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.option-label {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 1rem;
|
||
background-color: var(--gray-100);
|
||
border: 1px solid var(--gray-300);
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
/* 移动端触摸优化 */
|
||
touch-action: manipulation;
|
||
-webkit-tap-highlight-color: transparent;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 添加触摸反馈效果 */
|
||
.option-label::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
background-image: radial-gradient(circle, rgba(67, 97, 238, 0.1) 10%, transparent 10.01%);
|
||
background-repeat: no-repeat;
|
||
background-position: 50%;
|
||
transform: scale(10, 10);
|
||
opacity: 0;
|
||
transition: transform 0.5s, opacity 0.8s;
|
||
}
|
||
|
||
.option-label:active::after {
|
||
transform: scale(0, 0);
|
||
opacity: 0.3;
|
||
transition: 0s;
|
||
}
|
||
|
||
.option-label:hover {
|
||
background-color: var(--gray-200);
|
||
}
|
||
|
||
/* 选中状态增强 */
|
||
.option-item input:checked + .option-text {
|
||
font-weight: 500;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.option-item input:checked ~ .option-label {
|
||
background-color: rgba(67, 97, 238, 0.05);
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 1px var(--primary-color);
|
||
}
|
||
|
||
.option-checkbox {
|
||
margin-right: 1rem;
|
||
transform: scale(1.2);
|
||
/* 移动端触摸优化 */
|
||
min-width: 1.5rem;
|
||
min-height: 1.5rem;
|
||
}
|
||
|
||
.option-text {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 移动设备优化 */
|
||
@media (max-width: 768px) {
|
||
.option-label {
|
||
padding: 0.875rem;
|
||
}
|
||
|
||
.option-checkbox {
|
||
transform: scale(1.3);
|
||
margin-right: 0.75rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.option-label {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.option-text {
|
||
font-size: 0.95rem;
|
||
}
|
||
}
|
||
|
||
.question-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.favorite-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
background-color: white;
|
||
border: 1px solid var(--gray-300);
|
||
border-radius: var(--border-radius);
|
||
padding: 0.5rem 1rem;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.favorite-btn:hover {
|
||
background-color: var(--gray-100);
|
||
}
|
||
|
||
.favorite-btn.active {
|
||
background-color: var(--warning-color);
|
||
border-color: var(--warning-color);
|
||
color: var(--gray-800);
|
||
}
|
||
|
||
.result-message {
|
||
margin: 1.5rem 0;
|
||
padding: 1rem;
|
||
border-radius: var(--border-radius);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.result-correct {
|
||
background-color: rgba(46, 196, 182, 0.2);
|
||
color: #1a8a7e;
|
||
border-left: 4px solid var(--success-color);
|
||
}
|
||
|
||
.result-incorrect {
|
||
background-color: rgba(230, 57, 70, 0.2);
|
||
color: #b71c1c;
|
||
border-left: 4px solid var(--danger-color);
|
||
}
|
||
|
||
/* ====== 进度条 ====== */
|
||
.progress-container {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.progress-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.progress-title {
|
||
font-weight: 500;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.progress-value {
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.progress-bar-container {
|
||
width: 100%;
|
||
height: 0.75rem;
|
||
background-color: var(--gray-200);
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background-color: var(--primary-color);
|
||
border-radius: 1rem;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* ====== 表格样式 ====== */
|
||
.table-container {
|
||
overflow-x: auto;
|
||
margin-bottom: 1.25rem;
|
||
/* 添加移动端水平滚动支持 */
|
||
-webkit-overflow-scrolling: touch;
|
||
position: relative;
|
||
}
|
||
|
||
/* 添加滚动指示器 */
|
||
.table-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 20px;
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05));
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
/* 仅在可滚动且非移动设备上显示滚动指示器 */
|
||
@media (min-width: 769px) {
|
||
.table-container.is-scrollable::after {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 1rem;
|
||
/* 确保表格在移动设备上不会被压缩 */
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 1rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--gray-300);
|
||
/* 移动端文本处理 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.table th {
|
||
font-weight: 600;
|
||
color: var(--gray-700);
|
||
background-color: var(--gray-100);
|
||
/* 粘性表头，在水平滚动时保持可见 */
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
.table tbody tr {
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.table tbody tr:hover {
|
||
background-color: rgba(67, 97, 238, 0.05);
|
||
}
|
||
|
||
/* 响应式表格 - 移动优化 */
|
||
@media (max-width: 768px) {
|
||
.table-container {
|
||
margin-left: -1rem;
|
||
margin-right: -1rem;
|
||
width: calc(100% + 2rem);
|
||
padding: 0 1rem;
|
||
/* 添加滚动提示 */
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--gray-300) transparent;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 0.85rem 0.75rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 特定表格列宽调整 - 适用于答题历史表格 */
|
||
.table th:nth-child(1),
|
||
.table td:nth-child(1) {
|
||
width: 40px;
|
||
min-width: 40px;
|
||
}
|
||
|
||
.table th:nth-child(2),
|
||
.table td:nth-child(2) {
|
||
width: 60px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.table th:nth-child(3),
|
||
.table td:nth-child(3) {
|
||
width: auto;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.table th:nth-child(4),
|
||
.table td:nth-child(4) {
|
||
width: 60px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.table th:nth-child(5),
|
||
.table td:nth-child(5) {
|
||
width: 80px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.table th:nth-child(6),
|
||
.table td:nth-child(6) {
|
||
width: 100px;
|
||
min-width: 100px;
|
||
}
|
||
|
||
/* 为小屏幕添加水平滚动提示 */
|
||
.table-scroll-hint {
|
||
display: block;
|
||
text-align: center;
|
||
color: var(--gray-600);
|
||
font-size: 0.85rem;
|
||
margin-bottom: 0.5rem;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 卡片式移动表格 - 用于特定表格 */
|
||
.table.table-card-mobile {
|
||
border: 0;
|
||
}
|
||
|
||
.table.table-card-mobile thead {
|
||
display: none; /* 隐藏表头 */
|
||
}
|
||
|
||
.table.table-card-mobile tr {
|
||
display: block;
|
||
margin-bottom: 1rem;
|
||
border: 1px solid var(--gray-300);
|
||
border-radius: var(--border-radius);
|
||
}
|
||
|
||
.table.table-card-mobile td {
|
||
display: block;
|
||
text-align: right;
|
||
border-bottom: 1px solid var(--gray-200);
|
||
position: relative;
|
||
padding-left: 50%;
|
||
}
|
||
|
||
.table.table-card-mobile td:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.table.table-card-mobile td::before {
|
||
content: attr(data-label);
|
||
position: absolute;
|
||
left: 0.75rem;
|
||
width: 45%;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: var(--gray-700);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.table th,
|
||
.table td {
|
||
padding: 0.75rem 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.nav-right .logout-link {
|
||
width: 95%;
|
||
}
|
||
}
|
||
|
||
/* ====== 卡片样式 ====== */
|
||
.card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.stat-card {
|
||
background-color: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--box-shadow);
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background-color: rgba(67, 97, 238, 0.1);
|
||
color: var(--primary-color);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
margin-bottom: 1rem;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--gray-800);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--gray-600);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* ====== 登录/注册页面 ====== */
|
||
.auth-container {
|
||
max-width: 400px;
|
||
margin: 1.5rem auto;
|
||
padding: 1.5rem;
|
||
background-color: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--box-shadow);
|
||
}
|
||
|
||
.auth-logo {
|
||
text-align: center;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.auth-title {
|
||
text-align: center;
|
||
color: var(--gray-800);
|
||
font-size: 1.75rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.auth-form {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.auth-footer {
|
||
text-align: center;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.auth-footer a {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.auth-footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ====== 提醒消息 ====== */
|
||
.alert {
|
||
padding: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: var(--border-radius);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.alert-success {
|
||
background-color: rgba(46, 196, 182, 0.2);
|
||
color: #1a8a7e;
|
||
border-left: 4px solid var(--success-color);
|
||
}
|
||
|
||
.alert-danger {
|
||
background-color: rgba(230, 57, 70, 0.2);
|
||
color: #b71c1c;
|
||
border-left: 4px solid var(--danger-color);
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.alert-warning {
|
||
background-color: rgba(255, 183, 3, 0.2);
|
||
color: #9c6d00;
|
||
border-left: 4px solid var(--warning-color);
|
||
}
|
||
|
||
.alert-info {
|
||
background-color: rgba(76, 201, 240, 0.2);
|
||
color: #0277bd;
|
||
border-left: 4px solid var(--info-color);
|
||
}
|
||
|
||
/* ====== 倒计时样式 ====== */
|
||
.countdown-container {
|
||
background-color: white;
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--box-shadow);
|
||
padding: 1.25rem;
|
||
text-align: center;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.countdown-title {
|
||
color: var(--gray-700);
|
||
font-size: 1.2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.countdown-timer {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.countdown-warning {
|
||
color: var(--warning-color);
|
||
}
|
||
|
||
.countdown-danger {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
/* ====== 页脚样式 ====== */
|
||
.footer {
|
||
background-color: white;
|
||
padding: 1.5rem 0;
|
||
margin-top: auto;
|
||
text-align: center;
|
||
border-top: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.footer-text {
|
||
color: var(--gray-600);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.footer-link {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.footer-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ====== 响应式设计 ====== */
|
||
@media (max-width: 992px) {
|
||
.nav-left {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.nav-link {
|
||
padding: 0.4rem 0.6rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.card-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-logo {
|
||
margin-right: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 移动端显示菜单元素 */
|
||
.mobile-menu-header,
|
||
.mobile-menu-group,
|
||
.mobile-menu-group-label {
|
||
display: block;
|
||
}
|
||
|
||
.mobile-menu-group {
|
||
display: block;
|
||
}
|
||
|
||
.mobile-menu-group-label {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-links {
|
||
display: none;
|
||
flex-direction: column;
|
||
margin-top: 0;
|
||
flex-wrap: nowrap;
|
||
gap: 0.5rem; /* 增加菜单项之间的间距 */
|
||
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
|
||
border-radius: 20px; /* 增加圆角 */
|
||
padding: 1.2rem; /* 增加内边距 */
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(67, 97, 238, 0.1);
|
||
max-height: 85vh;
|
||
overflow-x: hidden; /* 移动端隐藏水平滚动 */
|
||
overflow-y: auto;
|
||
position: fixed;
|
||
right: 1rem;
|
||
top: 4.5rem;
|
||
width: auto;
|
||
min-width: 320px; /* 增加最小宽度 */
|
||
max-width: 90%;
|
||
border: 2px solid rgba(67, 97, 238, 0.08);
|
||
z-index: 1000;
|
||
/* 添加平滑滚动 */
|
||
scroll-behavior: smooth;
|
||
/* 美化滚动条 */
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(67, 97, 238, 0.3) transparent;
|
||
/* 添加毛玻璃效果 */
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar-track {
|
||
background: rgba(248, 250, 252, 0.5);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(135deg, rgba(67, 97, 238, 0.4) 0%, rgba(67, 97, 238, 0.6) 100%);
|
||
border-radius: 10px;
|
||
border: 2px solid transparent;
|
||
background-clip: content-box;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(135deg, rgba(67, 97, 238, 0.6) 0%, rgba(67, 97, 238, 0.8) 100%);
|
||
background-clip: content-box;
|
||
}
|
||
|
||
/* 移动端菜单标题样式 */
|
||
.mobile-menu-header {
|
||
padding: 0.8rem 0; /* 增加上下内边距 */
|
||
margin-bottom: 0.8rem; /* 增加下边距 */
|
||
border-bottom: 3px solid transparent;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(67, 97, 238, 0.1) 50%, transparent 100%);
|
||
border-radius: 12px; /* 增加圆角 */
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.mobile-menu-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -3px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80px; /* 增加装饰线宽度 */
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.mobile-menu-title {
|
||
font-size: 1.2rem; /* 增加标题字体大小 */
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.6rem; /* 增加图标和文字间距 */
|
||
letter-spacing: 0.5px; /* 增加字母间距 */
|
||
}
|
||
|
||
.mobile-menu-title i {
|
||
font-size: 1.3rem; /* 增加标题图标大小 */
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
|
||
/* 移动端菜单分组样式 */
|
||
.mobile-menu-group {
|
||
margin-bottom: 0.6rem; /* 增加分组间距 */
|
||
position: relative;
|
||
}
|
||
|
||
.mobile-menu-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.mobile-menu-group::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(67, 97, 238, 0.2) 50%, transparent 100%);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.mobile-menu-group-label {
|
||
font-size: 0.85rem; /* 增加字体大小 */
|
||
font-weight: 700;
|
||
color: var(--gray-700);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.8px; /* 增加字母间距 */
|
||
margin: 0.4rem 0 0.6rem 0; /* 增加上下边距 */
|
||
padding: 0.5rem 0.8rem; /* 增加内边距 */
|
||
background: linear-gradient(135deg, rgba(67, 97, 238, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
|
||
border-radius: 10px; /* 增加圆角 */
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem; /* 增加图标和文字间距 */
|
||
border: 1px solid rgba(67, 97, 238, 0.15);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mobile-menu-group-label::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.mobile-menu-group-label i {
|
||
font-size: 0.9rem; /* 增加图标大小 */
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
width: 18px; /* 增加图标容器大小 */
|
||
height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px; /* 增加圆角 */
|
||
background-color: rgba(67, 97, 238, 0.1);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
/* 菜单打开时添加背景遮罩 */
|
||
.menu-backdrop {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(67, 97, 238, 0.1) 100%);
|
||
z-index: 999;
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
opacity: 0;
|
||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.menu-backdrop.active {
|
||
display: block;
|
||
opacity: 1;
|
||
}
|
||
|
||
.nav-links.active {
|
||
display: flex;
|
||
animation: slideDownBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||
}
|
||
|
||
@keyframes slideDownBounce {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-30px) scale(0.8) rotateX(-15deg);
|
||
}
|
||
60% {
|
||
opacity: 0.8;
|
||
transform: translateY(5px) scale(1.05) rotateX(5deg);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1) rotateX(0deg);
|
||
}
|
||
}
|
||
|
||
.nav-link {
|
||
padding: 0.8rem 1rem; /* 增加内边距 */
|
||
width: 100%;
|
||
border-radius: 10px; /* 增加圆角 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.3rem; /* 增加菜单选项间距 */
|
||
font-weight: 500;
|
||
font-size: 0.95rem; /* 增加字体大小 */
|
||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);
|
||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||
position: relative;
|
||
color: var(--gray-700);
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
min-height: 48px; /* 增加最小高度，便于触摸 */
|
||
}
|
||
|
||
.nav-link::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 0;
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
border-radius: 10px 0 0 10px; /* 匹配新的圆角 */
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.nav-link i {
|
||
margin-right: 0.8rem; /* 增加图标右边距 */
|
||
font-size: 1rem; /* 增加图标大小 */
|
||
width: 28px; /* 增加图标容器大小 */
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8px; /* 增加圆角 */
|
||
background: linear-gradient(135deg, rgba(67, 97, 238, 0.12) 0%, rgba(124, 58, 237, 0.12) 100%);
|
||
color: var(--primary-color);
|
||
flex-shrink: 0;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
z-index: 1;
|
||
box-shadow: 0 2px 8px rgba(67, 97, 238, 0.1);
|
||
}
|
||
|
||
.nav-link:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background: linear-gradient(135deg, rgba(67, 97, 238, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
|
||
transform: translateX(6px) translateY(-2px);
|
||
border-color: rgba(67, 97, 238, 0.3);
|
||
box-shadow: 0 8px 25px rgba(67, 97, 238, 0.2), 0 4px 12px rgba(124, 58, 237, 0.1);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.nav-link:hover::before {
|
||
width: 4px;
|
||
}
|
||
|
||
.nav-link:hover i {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
color: white;
|
||
transform: scale(1.15) rotate(5deg);
|
||
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
|
||
}
|
||
|
||
.nav-link.active {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
color: white;
|
||
box-shadow: 0 10px 30px rgba(67, 97, 238, 0.4), 0 6px 20px rgba(124, 58, 237, 0.2);
|
||
border-color: transparent;
|
||
transform: translateX(8px) scale(1.02);
|
||
}
|
||
|
||
.nav-link.active::before {
|
||
width: 6px;
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
|
||
}
|
||
|
||
.nav-link.active i {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
color: white;
|
||
transform: scale(1.2);
|
||
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 1rem;
|
||
transform: translateY(-50%);
|
||
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
|
||
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
width: 48px; /* 增加按钮大小 */
|
||
height: 48px;
|
||
font-size: 1.6rem; /* 增加图标大小 */
|
||
}
|
||
|
||
.menu-toggle:hover {
|
||
transform: translateY(-50%) scale(1.05);
|
||
box-shadow: 0 6px 16px rgba(67, 97, 238, 0.35);
|
||
}
|
||
|
||
.menu-toggle:active {
|
||
transform: translateY(-50%) scale(0.95);
|
||
}
|
||
|
||
.nav-right {
|
||
display: none;
|
||
}
|
||
|
||
.question-actions {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.question-actions button {
|
||
width: 100%;
|
||
}
|
||
|
||
.card-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.question-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 1.125rem;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
|
||
border-radius: 16px;
|
||
border: 1px solid #e2e8f0;
|
||
margin-bottom: 1.25rem;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 添加微妙的装饰线 */
|
||
.question-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--primary-color) 0%, #7c3aed 100%);
|
||
border-radius: 16px 16px 0 0;
|
||
}
|
||
|
||
/* 题目信息区域 */
|
||
.question-header .question-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.625rem;
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: 2.5rem; /* 确保最小高度，保持对齐 */
|
||
}
|
||
|
||
.question-header .question-number {
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
padding: 0 1rem;
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
|
||
color: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
|
||
letter-spacing: 0.025em;
|
||
flex-shrink: 0;
|
||
height: 2.5rem; /* 固定高度确保对齐 */
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 徽章样式优化 */
|
||
.question-header .badge {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
padding: 0 0.75rem;
|
||
border-radius: 10px;
|
||
letter-spacing: 0.025em;
|
||
flex-shrink: 0;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
height: 2.5rem; /* 固定高度确保对齐 */
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.question-header .question-difficulty {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
padding: 0 0.75rem;
|
||
border-radius: 10px;
|
||
flex-shrink: 0;
|
||
height: 2.5rem; /* 固定高度确保对齐 */
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 操作按钮区域 */
|
||
.question-header .question-actions-top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex-shrink: 0;
|
||
min-height: 2.5rem; /* 确保最小高度，保持对齐 */
|
||
}
|
||
|
||
/* 确保 form 元素不影响对齐 */
|
||
.question-header .question-actions-top form {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 桌面端question-actions-top内容放在一行 */
|
||
@media (min-width: 769px) {
|
||
.question-header .question-actions-top {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
/* 自动跳转状态优化 */
|
||
.question-header .auto-jump-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
padding: 0 0.875rem;
|
||
background: rgba(34, 197, 94, 0.1);
|
||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||
border-radius: 12px;
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
color: #059669;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
user-select: none;
|
||
height: 2.5rem; /* 固定高度确保对齐 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.question-header .auto-jump-status:hover {
|
||
background: rgba(34, 197, 94, 0.15);
|
||
border-color: rgba(34, 197, 94, 0.3);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
|
||
}
|
||
|
||
.question-header .auto-jump-status:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 1px 4px rgba(34, 197, 94, 0.2);
|
||
}
|
||
|
||
.question-header .auto-jump-status.disabled {
|
||
background: rgba(107, 114, 128, 0.1);
|
||
border-color: rgba(107, 114, 128, 0.2);
|
||
color: #6b7280;
|
||
}
|
||
|
||
.question-header .auto-jump-status.disabled:hover {
|
||
background: rgba(107, 114, 128, 0.15);
|
||
border-color: rgba(107, 114, 128, 0.3);
|
||
}
|
||
|
||
.question-header .auto-jump-status i {
|
||
font-size: 0.875rem;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.question-header .auto-jump-status:hover i {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 收藏按钮优化 */
|
||
.question-header .favorite-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
padding: 0 1rem;
|
||
background: white;
|
||
border: 1.5px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
color: #64748b;
|
||
transition: all 0.2s ease;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
height: 2.5rem; /* 固定高度确保对齐 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.question-header .favorite-btn:hover {
|
||
border-color: var(--primary-color);
|
||
color: var(--primary-color);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
|
||
}
|
||
|
||
.question-header .favorite-btn.active {
|
||
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
|
||
border-color: #f59e0b;
|
||
color: white;
|
||
}
|
||
|
||
.question-header .favorite-btn.active:hover {
|
||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||
border-color: #d97706;
|
||
color: white;
|
||
}
|
||
|
||
/* 简化版question-header（exam和timed_mode）的移动端优化 */
|
||
.question-header:not(.question-header .question-info):not(.question-header .question-actions-top) {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 0.625rem;
|
||
}
|
||
|
||
.question-header:not(.question-header .question-info):not(.question-header .question-actions-top) .question-number {
|
||
margin-right: auto;
|
||
}
|
||
|
||
.table-container {
|
||
margin-left: -1rem;
|
||
margin-right: -1rem;
|
||
width: calc(100% + 2rem);
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.option-label {
|
||
padding: 0.75rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.option-checkbox {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.pagination {
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
body {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.container {
|
||
padding: 0.5rem 1rem;
|
||
}
|
||
|
||
.card, .question-container {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.35rem;
|
||
}
|
||
|
||
.auth-container {
|
||
margin: 1rem;
|
||
max-width: none;
|
||
}
|
||
|
||
.question-stem {
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.option-label {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.65rem;
|
||
}
|
||
|
||
.countdown-timer {
|
||
font-size: 1.85rem;
|
||
}
|
||
|
||
.table th, .table td {
|
||
padding: 0.75rem 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.btn {
|
||
padding: 0.65rem 1.25rem;
|
||
}
|
||
|
||
.btn-block {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-control {
|
||
padding: 0.65rem 0.875rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.footer {
|
||
padding: 1.5rem 0;
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
|
||
/* 更多手机端优化 */
|
||
@media (max-width: 480px) {
|
||
body {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.container {
|
||
padding: 0.5rem 0.85rem;
|
||
}
|
||
|
||
.card, .question-container {
|
||
padding: 1rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.25rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.question-stem {
|
||
font-size: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.option-label {
|
||
padding: 0.625rem;
|
||
}
|
||
|
||
.option-checkbox {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.btn {
|
||
padding: 0.6rem 1.2rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.badge {
|
||
padding: 0.2rem 0.5rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
/* 超小屏幕question-header优化 */
|
||
.question-header {
|
||
padding: 1rem;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.question-header .question-info {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.question-header .question-number {
|
||
font-size: 0.875rem;
|
||
padding: 0.45rem 0.875rem;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.question-header .badge {
|
||
font-size: 0.75rem;
|
||
padding: 0.3rem 0.625rem;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.question-header .question-difficulty {
|
||
font-size: 0.75rem;
|
||
padding: 0.3rem 0.625rem;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.question-header .question-actions-top {
|
||
gap: 0.625rem;
|
||
}
|
||
|
||
.question-header .auto-jump-status {
|
||
padding: 0.45rem 0.75rem;
|
||
font-size: 0.75rem;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.question-header .auto-jump-status i {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.question-header .favorite-btn {
|
||
padding: 0.55rem 0.875rem;
|
||
font-size: 0.8rem;
|
||
border-radius: 10px;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
/* 简化版question-header在超小屏幕的优化 */
|
||
.question-header:not(.question-header .question-info):not(.question-header .question-actions-top) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.alert {
|
||
padding: 0.65rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.auth-container {
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.auth-title {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.countdown-timer {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
/* 更小屏幕的导航菜单优化 */
|
||
.nav-links {
|
||
top: 4.5rem;
|
||
padding: 1rem; /* 增加内边距 */
|
||
max-height: 80vh; /* 增加最大高度 */
|
||
right: 0.75rem;
|
||
min-width: 300px; /* 增加最小宽度 */
|
||
max-width: 92%; /* 稍微增加最大宽度 */
|
||
border-radius: 18px; /* 增加圆角 */
|
||
}
|
||
|
||
/* 小屏幕菜单标题调整 */
|
||
.mobile-menu-header {
|
||
padding: 0.6rem 0; /* 增加内边距 */
|
||
margin-bottom: 0.7rem; /* 增加下边距 */
|
||
}
|
||
|
||
.mobile-menu-title {
|
||
font-size: 1.1rem; /* 增加字体大小 */
|
||
}
|
||
|
||
.mobile-menu-title i {
|
||
font-size: 1.2rem; /* 增加图标大小 */
|
||
}
|
||
|
||
/* 小屏幕分组标签调整 */
|
||
.mobile-menu-group {
|
||
margin-bottom: 0.5rem; /* 增加分组间距 */
|
||
}
|
||
|
||
.mobile-menu-group-label {
|
||
font-size: 0.8rem; /* 增加字体大小 */
|
||
padding: 0.4rem 0.6rem; /* 增加内边距 */
|
||
margin: 0.3rem 0 0.5rem 0; /* 增加边距 */
|
||
}
|
||
|
||
.mobile-menu-group-label i {
|
||
font-size: 0.85rem; /* 增加图标大小 */
|
||
width: 16px; /* 增加图标容器大小 */
|
||
height: 16px;
|
||
}
|
||
|
||
.nav-link {
|
||
padding: 0.75rem 0.9rem; /* 增加内边距 */
|
||
font-size: 0.92rem; /* 增加字体大小 */
|
||
margin-bottom: 0.25rem; /* 保持适当间距 */
|
||
text-align: left;
|
||
border-radius: 10px;
|
||
min-height: 44px; /* 增加最小高度，便于触摸 */
|
||
}
|
||
|
||
.nav-link i {
|
||
margin-right: 0.75rem; /* 调整图标右边距 */
|
||
font-size: 0.95rem; /* 调整图标大小 */
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.menu-toggle {
|
||
width: 44px; /* 增加按钮大小 */
|
||
height: 44px;
|
||
font-size: 1.5rem; /* 增加图标大小 */
|
||
right: 0.75rem;
|
||
}
|
||
}
|
||
|
||
/* ====== 主题色变量自定义 ====== */
|
||
[data-theme="blue"] {
|
||
--primary-color: #4361ee;
|
||
--primary-hover: #3a56e7;
|
||
}
|
||
|
||
[data-theme="green"] {
|
||
--primary-color: #2ec4b6;
|
||
--primary-hover: #25a99d;
|
||
}
|
||
|
||
[data-theme="purple"] {
|
||
--primary-color: #7209b7;
|
||
--primary-hover: #5f08a0;
|
||
}
|
||
|
||
[data-theme="orange"] {
|
||
--primary-color: #fb8500;
|
||
--primary-hover: #e67700;
|
||
}
|
||
|
||
/* ====== 翻页样式 ====== */
|
||
.pagination {
|
||
display: flex;
|
||
padding-left: 0;
|
||
list-style: none;
|
||
border-radius: var(--border-radius);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.page-item {
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
|
||
.page-item:not(:first-child) .page-link {
|
||
margin-left: -1px;
|
||
}
|
||
|
||
.page-item.active .page-link {
|
||
z-index: 3;
|
||
color: #fff;
|
||
background-color: var(--primary-color);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.page-item.disabled .page-link {
|
||
color: #6c757d;
|
||
pointer-events: none;
|
||
background-color: #fff;
|
||
border-color: #dee2e6;
|
||
}
|
||
|
||
.page-link {
|
||
position: relative;
|
||
display: block;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
background-color: #fff;
|
||
border: 1px solid #dee2e6;
|
||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||
padding: 0.375rem 0.75rem;
|
||
margin-left: -1px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.page-link:hover {
|
||
z-index: 2;
|
||
color: var(--primary-hover);
|
||
text-decoration: none;
|
||
background-color: #e9ecef;
|
||
border-color: #dee2e6;
|
||
}
|
||
|
||
.page-link:focus {
|
||
z-index: 3;
|
||
color: var(--primary-hover);
|
||
background-color: #e9ecef;
|
||
border-color: #86b7fe;
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
|
||
}
|
||
|
||
.page-item:first-child .page-link {
|
||
border-top-left-radius: var(--border-radius);
|
||
border-bottom-left-radius: var(--border-radius);
|
||
}
|
||
|
||
.page-item:last-child .page-link {
|
||
border-top-right-radius: var(--border-radius);
|
||
border-bottom-right-radius: var(--border-radius);
|
||
}
|
||
|
||
.pagination-lg .page-link {
|
||
padding: 0.75rem 1.5rem;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.pagination-sm .page-link {
|
||
padding: 0.25rem 0.5rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
/* ====== 答题历史记录文本限制 ====== */
|
||
.question-text-truncate {
|
||
display: block;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 移动端答题历史文本限制 */
|
||
@media (max-width: 768px) {
|
||
.question-text-truncate {
|
||
max-width: 150px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.question-text-truncate {
|
||
max-width: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.question-text-truncate {
|
||
max-width: 100px;
|
||
}
|
||
}
|
||
|
||
/* ====== 辅助工具类 ====== */
|
||
.text-center { text-align: center; }
|
||
.text-left { text-align: left; }
|
||
.text-right { text-align: right; }
|
||
.text-decoration-none { text-decoration: none !important; }
|
||
|
||
/* Margin utilities */
|
||
.mb-0 { margin-bottom: 0 !important; }
|
||
.mb-1 { margin-bottom: 0.5rem !important; }
|
||
.mb-2 { margin-bottom: 0.75rem !important; }
|
||
.mb-3 { margin-bottom: 1rem !important; }
|
||
.mb-4 { margin-bottom: 1.25rem !important; }
|
||
.mt-0 { margin-top: 0 !important; }
|
||
.mt-1 { margin-top: 0.5rem !important; }
|
||
.mt-2 { margin-top: 0.75rem !important; }
|
||
.mt-3 { margin-top: 1rem !important; }
|
||
.mt-4 { margin-top: 1.25rem !important; }
|
||
.me-1 { margin-right: 0.5rem !important; }
|
||
.me-2 { margin-right: 1rem !important; }
|
||
.me-3 { margin-right: 1.5rem !important; }
|
||
.ms-1 { margin-left: 0.5rem !important; }
|
||
.ms-2 { margin-left: 1rem !important; }
|
||
.ms-3 { margin-left: 1.5rem !important; }
|
||
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||
|
||
/* Padding utilities */
|
||
.p-0 { padding: 0 !important; }
|
||
.p-1 { padding: 0.5rem !important; }
|
||
.p-2 { padding: 1rem !important; }
|
||
.p-3 { padding: 1.5rem !important; }
|
||
|
||
/* Display utilities */
|
||
.d-none { display: none !important; }
|
||
.d-block { display: block !important; }
|
||
.d-inline { display: inline !important; }
|
||
.d-inline-block { display: inline-block !important; }
|
||
.d-flex { display: flex !important; }
|
||
.d-inline-flex { display: inline-flex !important; }
|
||
|
||
/* Responsive display utilities */
|
||
@media (min-width: 576px) {
|
||
.d-sm-none { display: none !important; }
|
||
.d-sm-block { display: block !important; }
|
||
.d-sm-flex { display: flex !important; }
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.d-md-none { display: none !important; }
|
||
.d-md-block { display: block !important; }
|
||
.d-md-flex { display: flex !important; }
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.d-lg-none { display: none !important; }
|
||
.d-lg-block { display: block !important; }
|
||
.d-lg-flex { display: flex !important; }
|
||
}
|
||
|
||
/* Flexbox utilities */
|
||
.flex-row { flex-direction: row !important; }
|
||
.flex-column { flex-direction: column !important; }
|
||
.flex-wrap { flex-wrap: wrap !important; }
|
||
.flex-nowrap { flex-wrap: nowrap !important; }
|
||
.justify-content-start { justify-content: flex-start !important; }
|
||
.justify-content-end { justify-content: flex-end !important; }
|
||
.justify-content-center { justify-content: center !important; }
|
||
.justify-content-between { justify-content: space-between !important; }
|
||
.justify-content-around { justify-content: space-around !important; }
|
||
.align-items-start { align-items: flex-start !important; }
|
||
.align-items-end { align-items: flex-end !important; }
|
||
.align-items-center { align-items: center !important; }
|
||
.align-items-baseline { align-items: baseline !important; }
|
||
.align-items-stretch { align-items: stretch !important; }
|
||
|
||
/* Gap utilities */
|
||
.gap-1 { gap: 0.5rem !important; }
|
||
.gap-2 { gap: 1rem !important; }
|
||
.gap-3 { gap: 1.5rem !important; }
|
||
|
||
/* Width utilities */
|
||
.w-25 { width: 25% !important; }
|
||
.w-50 { width: 50% !important; }
|
||
.w-75 { width: 75% !important; }
|
||
.w-100 { width: 100% !important; }
|
||
.w-auto { width: auto !important; }
|
||
|
||
/* Font utilities */
|
||
.font-weight-bold { font-weight: 700 !important; }
|
||
.font-weight-normal { font-weight: 400 !important; }
|
||
.fw-bold { font-weight: 700 !important; }
|
||
.fw-normal { font-weight: 400 !important; }
|
||
|
||
/* Text color utilities */
|
||
.text-primary { color: var(--primary-color) !important; }
|
||
.text-success { color: var(--success-color) !important; }
|
||
.text-danger { color: var(--danger-color) !important; }
|
||
.text-warning { color: var(--warning-color) !important; }
|
||
.text-info { color: var(--info-color) !important; }
|
||
.text-muted { color: var(--gray-600) !important; }
|
||
|
||
/* Position utilities */
|
||
.position-relative { position: relative !important; }
|
||
.position-absolute { position: absolute !important; }
|
||
.position-fixed { position: fixed !important; }
|
||
.position-sticky { position: sticky !important; }
|
||
|
||
/* 响应式显示类 */
|
||
.mobile-only {
|
||
display: none;
|
||
}
|
||
|
||
/* 移动端全宽元素 */
|
||
.mobile-full-width {
|
||
width: auto;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.mobile-only {
|
||
display: block;
|
||
}
|
||
|
||
.desktop-only {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-full-width {
|
||
width: 90% !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.mobile-full-width {
|
||
width: 95% !important;
|
||
}
|
||
}
|
||
|
||
/* 答题状态图标样式 */
|
||
.answer-status-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
background: linear-gradient(135deg, #2ec4b6 0%, #20a394 100%);
|
||
color: white;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 25px;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
box-shadow: 0 2px 8px rgba(46, 196, 182, 0.3);
|
||
animation: fadeInScale 0.6s ease-out;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 桌面端 - 状态图标居中显示 */
|
||
@media (min-width: 769px) {
|
||
.question-header {
|
||
position: relative;
|
||
}
|
||
|
||
.answer-status-icon {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
.answer-status-icon::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
animation: shimmer 2s infinite;
|
||
}
|
||
|
||
.answer-status-icon i {
|
||
font-size: 1.1rem;
|
||
animation: bounce 0.8s ease-in-out;
|
||
}
|
||
|
||
.answer-status-icon .status-text {
|
||
font-size: 0.85rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@keyframes fadeInScale {
|
||
0% {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% {
|
||
left: -100%;
|
||
}
|
||
100% {
|
||
left: 100%;
|
||
}
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
40% {
|
||
transform: translateY(-3px);
|
||
}
|
||
60% {
|
||
transform: translateY(-1px);
|
||
}
|
||
}
|
||
|
||
/* 移动端优化 */
|
||
@media (max-width: 768px) {
|
||
.question-header {
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.question-header .question-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
}
|
||
|
||
.answer-status-icon {
|
||
padding: 0.3rem 0.6rem;
|
||
font-size: 0.75rem;
|
||
gap: 0.3rem;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.answer-status-icon i {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.answer-status-icon .status-text {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.question-header .question-actions-top {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.question-header {
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.question-header .question-info {
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.answer-status-icon .status-text {
|
||
display: none;
|
||
}
|
||
|
||
.answer-status-icon {
|
||
padding: 0.25rem;
|
||
min-width: 2rem;
|
||
justify-content: center;
|
||
margin-left: 0.25rem;
|
||
}
|
||
|
||
.answer-status-icon i {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.question-header .question-actions-top {
|
||
gap: 0.25rem;
|
||
}
|
||
} |