/* ===========================================
* 班级教学平台 - 优化版样式
* 设计标准：清晰易用 + 响应式布局
* =========================================== */
/* CSS变量系统 - 优化参数 */
:root {
/* 色彩体系 - 深空灰渐变 + 电光紫 */
--color-bg-primary: #0F172A;
--color-bg-secondary: #1E293B;
--color-accent-primary: #8B5CF6;
--color-accent-secondary: #EC4899;
--color-accent-tertiary: #06B6D4;
--color-text-primary: #FFFFFF;
--color-text-secondary: rgba(255, 255, 255, 0.8);
--color-text-tertiary: rgba(255, 255, 255, 0.6);
/* 玻璃态设计参数 - 优化性能 */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-blur: blur(10px);
--glass-border: 1px solid rgba(139, 92, 246, 0.2);
/* 阴影系统 - 优化性能 */
--shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.2);
--shadow-medium: 0 6px 25px rgba(0, 0, 0, 0.3);
--shadow-hard: 0 10px 40px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 20px rgba(139, 92, 246, 0.4);
/* 动效时长 - 优化性能 */
--duration-fast: 0.2s;
--duration-medium: 0.4s;
--duration-slow: 0.8s;
/* 缓动函数 */
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* 布局参数 */
--container-max-width: 1200px;
--grid-gap: 2rem;
--border-radius: 16px;
--border-radius-large: 24px;
/* 字体系统 */
--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-title: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-mono: 'JetBrains Mono', monospace;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 800;
/* 响应式断点 */
--breakpoint-tablet: 1024px;
--breakpoint-mobile: 768px;
--breakpoint-small: 480px;
/* 设备类型检测类 */
--device-type: unknown;
--device-performance: medium;
}
/* 设备类型检测类 */
.device-mobile {
--device-type: mobile;
--device-performance: low;
}
.device-tablet {
--device-type: tablet;
--device-performance: medium;
}
.device-desktop {
--device-type: desktop;
--device-performance: high;
}
.device-school-display {
--device-type: school-display;
--device-performance: high;
}
/* 全局重置与基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
min-height: 100vh;
}
body {
font-family: var(--font-family-primary);
background: transparent;
color: var(--color-text-primary);
line-height: 1.7;
overflow-x: hidden;
position: relative;
min-height: 100vh;
}
/* 设备差异化特效 - 移动端优化（极致性能） */
.device-mobile {
/* 移除所有非核心动态特效 */
.particles-bg,
.grid-overlay,
.header-gradient,
.particle-container,
.card-glow,
.button-glow {
display: none !important;
}
/* 简化动画效果 */
.subject-card {
animation: none !important;
transform: scale(1) translateY(0) !important;
opacity: 1 !important;
transition: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.subject-card:hover {
transform: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.subject-card:hover .card-icon {
transform: none !important;
}
/* 简化C++专区动效 */
.cpp-container {
animation: none !important;
filter: none !important;
opacity: 1 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.cpp-container::before,
.cpp-container::after,
.cpp-container .cpp-glow,
.cpp-container .cpp-content::before {
display: none !important;
}
/* 简化按钮动画 - 仅保留极简反馈 */
.cpp-button {
transition: all 0.1s ease-out !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.cpp-button:hover {
transform: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
/* 简化滚动效果 */
[data-parallax] {
transform: none !important;
}
/* 简化返回顶部按钮动画 */
.back-to-top {
transition: all 0.1s ease-out !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.back-to-top:hover {
animation: none !important;
transform: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
/* 简化分割线动画 */
.divider-glow {
animation: none !important;
opacity: 0.5 !important;
width: 100px !important;
}
/* 禁用硬件加速 */
* {
transform: none !important;
will-change: unset !important;
backface-visibility: visible !important;
perspective: none !important;
}
/* 简化标题样式 */
.title-text {
text-shadow: none !important;
}
.title-subtitle {
text-shadow: none !important;
}
/* 简化卡片样式 */
.card-icon svg {
filter: none !important;
}
.subject-card:hover .card-title {
color: var(--color-text-primary) !important;
text-shadow: none !important;
}
}
/* 设备差异化特效 - 平板/低端PC优化 */
.device-tablet {
/* 减少粒子效果复杂度 */
.particle {
width: 0.5px !important;
height: 0.5px !important;
}
/* 降低动画复杂度 */
.subject-card {
transition: all 0.3s ease-out !important;
}
.cpp-container {
animation-duration: 20s !important;
}
/* 适度简化特效 */
.header-gradient {
animation-duration: 10s !important;
}
}
/* 设备差异化特效 - 桌面端优化（特效拉满+升级） */
.device-desktop {
/* 视觉特效升级 */
/* 多层级光影 + 动态渐变背景 + 细腻纹理质感 */
.header {
position: relative;
overflow: hidden;
/* 细腻纹理质感 */
background-image:
linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 50%, rgba(6, 182, 212, 0.1) 100%),
radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
/* 多层级阴影 */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* 动态渐变背景 - 随鼠标轻微变化 */
.header-gradient {
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.3) 0%,
rgba(236, 72, 153, 0.3) 50%,
rgba(6, 182, 212, 0.3) 100%
);
animation: gradientShift 6s ease infinite, gradientPulse 4s ease-in-out infinite;
}
/* 学科卡片特效升级 */
.subject-card {
position: relative;
overflow: hidden;
/* 细腻纹理质感 */
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
/* 多层级阴影 */
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
/* 硬件加速 */
transform: translateZ(0);
will-change: transform, box-shadow;
}
/* 卡片悬停效果升级 - 组合动画 */
.subject-card:hover {
transform: translateY(-15px) scale(1.08) rotateX(5deg) rotateY(5deg) !important;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.3),
0 0 0 2px rgba(139, 92, 246, 0.3),
0 0 40px rgba(139, 92, 246, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* 卡片图标特效升级 */
.subject-card:hover .card-icon {
transform: rotate(360deg) scale(1.2);
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
box-shadow:
0 0 20px rgba(139, 92, 246, 0.8),
0 0 40px rgba(139, 92, 246, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* 卡片标题特效升级 */
.subject-card:hover .card-title {
color: var(--color-accent-primary);
text-shadow:
0 0 10px rgba(139, 92, 246, 0.8),
0 0 20px rgba(139, 92, 246, 0.6),
0 0 30px rgba(139, 92, 246, 0.4);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* C++专区特效升级 */
.cpp-container {
/* 多层级光影 */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
/* 细腻纹理质感 */
background-image:
linear-gradient(90deg,
rgba(139, 92, 246, 0.05) 0%,
rgba(139, 92, 246, 0.1) 50%,
rgba(139, 92, 246, 0.05) 100%
),
url('data:image/svg+xml,');
}
/* 按钮特效升级 */
.cpp-button {
position: relative;
overflow: hidden;
/* 多层级阴影 */
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
/* 硬件加速 */
transform: translateZ(0);
will-change: transform, box-shadow;
}
.cpp-button:hover {
transform: translateY(-5px) scale(1.1) rotateX(5deg);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 0 2px rgba(139, 92, 246, 0.3),
0 0 40px rgba(139, 92, 246, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* 按钮点击反馈动效 */
.cpp-button:active {
transform: translateY(0) scale(0.95);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-out !important;
}
/* 波纹扩散效果 */
.button-glow {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
opacity: 0;
}
.cpp-button:hover .button-glow {
width: 300px;
height: 300px;
opacity: 1;
left: 50%;
}
/* 返回顶部按钮特效升级 */
.back-to-top {
/* 多层级阴影 */
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* 硬件加速 */
transform: translateZ(0);
will-change: transform, box-shadow;
}
.back-to-top:hover {
transform: translateY(-8px) scale(1.2) rotate(360deg);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 0 2px rgba(139, 92, 246, 0.3),
0 0 40px rgba(139, 92, 246, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* 分割线特效升级 */
.divider-glow {
background: linear-gradient(
90deg,
transparent 0%,
var(--color-accent-primary) 50%,
transparent 100%
);
animation: dividerPulse 3s ease-in-out infinite, dividerSlide 6s ease-in-out infinite;
}
/* 视差效果升级 */
[data-parallax] {
transform: translateZ(0);
will-change: transform;
}
/* 滚动时的平滑视差效果 */
.particles-bg {
background:
radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
animation: particlesFloat 20s ease-in-out infinite;
}
/* 网格背景特效升级 */
.grid-overlay {
background-image:
linear-gradient(rgba(139, 92, 246, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 92, 246, 0.06) 1px, transparent 1px),
radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 100%);
animation: gridPulse 8s ease-in-out infinite;
}
}
/* 济南版生物答题框样式 */
.bio-jinan-input {
width: 100%;
padding: 1.5rem;
border: 2px solid rgba(139, 92, 246, 0.3);
border-radius: var(--border-radius);
background: rgba(255, 255, 255, 0.05);
color: var(--color-text-primary);
font-size: 1.1rem;
line-height: 1.6;
resize: vertical;
min-height: 120px;
transition: all 0.3s ease;
font-family: var(--font-family-primary);
}
.bio-jinan-input:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
background: rgba(255, 255, 255, 0.08);
}
.bio-jinan-input::placeholder {
color: var(--color-text-tertiary);
font-style: italic;
}
/* 设备差异化特效 - 学校大屏优化（特效拉满+升级） */
.device-school-display {
/* 增强视觉特效 - 尺寸按屏幕比例放大1.2倍 */
.subject-card {
padding: 3.6rem !important;
transform: scale(1.1);
margin: 1rem;
}
.card-icon {
width: 144px !important;
height: 144px !important;
}
.card-title {
font-size: 2.4rem !important;
}
.card-description {
font-size: 1.2rem !important;
}
/* 放大C++专区元素 */
.cpp-container {
padding: 3.6rem !important;
transform: scale(1.1);
margin: 1rem;
}
.cpp-title {
font-size: 3rem !important;
}
.cpp-description {
font-size: 1.32rem !important;
}
.cpp-button {
padding: 1.8rem 3.6rem !important;
font-size: 1.32rem !important;
}
/* 放大标题元素 */
.title-text {
font-size: clamp(3.6rem, 7.2vw, 6rem) !important;
}
.title-subtitle {
font-size: clamp(1.44rem, 3vw, 2.16rem) !important;
}
/* 增强阴影效果 */
.subject-card:hover {
transform: translateY(-20px) scale(1.15) rotateX(8deg) rotateY(8deg) !important;
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.4),
0 0 0 2px rgba(139, 92, 246, 0.4),
0 0 60px rgba(139, 92, 246, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 增强粒子效果 */
.particle {
width: 2px !important;
height: 2px !important;
box-shadow: 0 0 6px var(--color-accent-primary) !important;
}
/* 增强按钮效果 */
.cpp-button:hover {
transform: translateY(-8px) scale(1.15) rotateX(8deg);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.5),
0 0 0 2px rgba(139, 92, 246, 0.4),
0 0 60px rgba(139, 92, 246, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* 增强返回顶部按钮 */
.back-to-top {
width: 72px !important;
height: 72px !important;
font-size: 1.2rem !important;
}
.back-to-top:hover {
transform: translateY(-10px) scale(1.3) rotate(360deg);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.5),
0 0 0 2px rgba(139, 92, 246, 0.4),
0 0 60px rgba(139, 92, 246, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* 大屏设备帧率适配 - 锁定60fps */
* {
animation-timing-function: linear !important;
}
/* 增强视差效果 */
[data-parallax] {
transform: translateZ(0);
will-change: transform;
}
/* 增强滚动效果 */
.particles-bg {
animation: particlesFloat 15s ease-in-out infinite;
}
.grid-overlay {
animation: gridPulse 6s ease-in-out infinite;
}
/* 增强标题动画 */
.header-gradient {
animation: gradientShift 4s ease infinite, gradientPulse 3s ease-in-out infinite;
}
/* 增强分割线动画 */
.divider-glow {
animation: dividerPulse 2s ease-in-out infinite, dividerSlide 4s ease-in-out infinite;
}
}
/* 动态粒子背景 */
.particles-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.06) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
pointer-events: none;
z-index: -2;
}
/* 静态网格线背景 - 优化性能 */
.grid-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* 主网格线（紫色） */
linear-gradient(rgba(139, 92, 246, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 92, 246, 0.04) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px;
background-position: 0 0, 0 0;
pointer-events: none;
z-index: -1;
}
/* 主容器 */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 3rem 2rem;
position: relative;
z-index: 1;
}
/* 动态渐变标题栏 */
.header {
position: relative;
margin-bottom: 2rem;
padding: 4rem 0;
text-align: center;
overflow: hidden;
border-radius: var(--border-radius-large);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 50%, rgba(6, 182, 212, 0.1) 100%);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--shadow-glow);
}
.header-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.2) 0%,
rgba(236, 72, 153, 0.2) 50%,
rgba(139, 92, 246, 0.2) 100%
);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
border-radius: var(--border-radius-large);
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.main-title {
position: relative;
z-index: 2;
}
.title-text {
display: block;
font-size: clamp(3rem, 6vw, 5rem);
font-weight: var(--font-weight-black);
background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent-primary) 50%, var(--color-accent-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.title-subtitle {
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--color-text-secondary) 0%, var(--color-accent-tertiary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 学科卡片网格 */
.main-content {
margin-bottom: 6rem;
}
.subjects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--grid-gap);
margin-bottom: 4rem;
}
/* 超透玻璃态卡片设计 */
.subject-card {
position: relative;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--border-radius);
padding: 2.5rem;
box-shadow: var(--shadow-soft);
transition: all var(--duration-medium) var(--ease-out);
cursor: pointer;
overflow: hidden;
transform: scale(0.8) translateY(50px);
opacity: 0;
animation: cardEntrance 0.8s var(--ease-out) forwards;
}
@keyframes cardEntrance {
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
/* 卡片延迟入场 */
.subject-card[data-delay="0"] { animation-delay: 0.1s; }
.subject-card[data-delay="0.1"] { animation-delay: 0.2s; }
.subject-card[data-delay="0.2"] { animation-delay: 0.3s; }
.subject-card[data-delay="0.3"] { animation-delay: 0.4s; }
.subject-card[data-delay="0.4"] { animation-delay: 0.5s; }
.subject-card[data-delay="0.5"] { animation-delay: 0.6s; }
.subject-card[data-delay="0.6"] { animation-delay: 0.7s; }
.subject-card[data-delay="0.7"] { animation-delay: 0.8s; }
.subject-card[data-delay="0.8"] { animation-delay: 0.9s; }
.card-content {
position: relative;
z-index: 2;
text-align: center;
}
.card-icon {
width: 100px;
height: 100px;
margin: 0 auto 2rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--duration-medium) var(--ease-out);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.icon-animation {
animation: iconBreathing 3s ease-in-out infinite;
}
@keyframes iconBreathing {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.8;
}
50% {
transform: scale(1.1) rotate(5deg);
opacity: 1;
}
}
.card-icon svg {
color: var(--color-accent-primary);
transition: all var(--duration-medium) var(--ease-out);
filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
}
.card-title {
font-size: 1.8rem;
font-weight: var(--font-weight-bold);
margin-bottom: 1rem;
color: var(--color-text-primary);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.card-description {
color: var(--color-text-secondary);
font-size: 1rem;
line-height: 1.6;
font-weight: var(--font-weight-medium);
}
.card-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity var(--duration-medium) var(--ease-out);
border-radius: var(--border-radius);
}
/* 卡片悬停效果 - 视觉炸裂级 */
.subject-card:hover {
transform: translateY(-12px) scale(1.05) !important;
box-shadow: var(--shadow-hard), var(--shadow-glow), var(--shadow-accent);
border-color: rgba(139, 92, 246, 0.6);
}
.subject-card:hover .card-icon {
transform: rotate(360deg) scale(1.1);
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
box-shadow: 0 0 30px rgba(139, 92, 246, 0.8);
}
.subject-card:hover .card-icon svg {
color: var(--color-text-primary);
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}
.subject-card:hover .card-title {
color: var(--color-accent-primary);
text-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
}
.subject-card:hover .card-glow {
opacity: 1;
}
/* 卡片点击波纹效果 */
.card-hover-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 1%, rgba(139, 92, 246, 0.2) 1%);
background-size: 0 0;
background-position: center;
background-repeat: no-repeat;
transition: background-size var(--duration-medium) var(--ease-out);
border-radius: var(--border-radius);
opacity: 0;
}
.subject-card:active .card-hover-effect {
background-size: 200% 200%;
opacity: 1;
transition: background-size 0s;
}
/* ===========================================
* 学科卡片粒子爆发效果 - 悬浮交互增强
* 性能优化：限制粒子数量，硬件加速渲染
* =========================================== */
.subject-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: calc(var(--border-radius) + 2px);
pointer-events: none;
opacity: 0;
z-index: 1;
}
/* 粒子容器 */
.subject-card .particle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
z-index: 2;
}
/* 粒子基础样式 */
.particle {
position: absolute;
width: 1px;
height: 1px;
background: var(--color-accent-primary);
border-radius: 50%;
pointer-events: none;
opacity: 0;
/* 性能优化：硬件加速 */
will-change: transform, opacity;
}
/* 粒子发射动画 */
@keyframes particleEmit {
0% {
opacity: 0;
transform: translate(0, 0) scale(0);
}
10% {
opacity: 0.8;
transform: translate(var(--tx), var(--ty)) scale(1);
}
90% {
opacity: 0.2;
transform: translate(var(--tx), var(--ty)) scale(0.5);
}
100% {
opacity: 0;
transform: translate(var(--tx), var(--ty)) scale(0);
}
}
/* 粒子轨迹变体 */
.particle-1 { --tx: -15px; --ty: -15px; }
.particle-2 { --tx: 15px; --ty: -15px; }
.particle-3 { --tx: -15px; --ty: 15px; }
.particle-4 { --tx: 15px; --ty: 15px; }
.particle-5 { --tx: 0px; --ty: -20px; }
/* 悬浮时触发粒子效果 */
.subject-card:hover::before {
opacity: 1;
}
/* 粒子动画延迟 */
.particle-1 { animation-delay: 0s; }
.particle-2 { animation-delay: 0.1s; }
.particle-3 { animation-delay: 0.2s; }
.particle-4 { animation-delay: 0.3s; }
.particle-5 { animation-delay: 0.4s; }
/* 渐变分割线 */
.section-divider {
position: relative;
margin: 4rem 0;
height: 2px;
}
.divider-line {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.5) 50%, transparent 100%);
}
.divider-glow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: var(--color-accent-primary);
filter: blur(5px);
animation: dividerPulse 2s ease-in-out infinite;
}
@keyframes dividerPulse {
0%, 100% { opacity: 0.5; width: 100px; }
50% { opacity: 1; width: 200px; }
}
/* ===========================================
* C++专区动效 - 代码主题轻量级优化
* 移除倒计时，添加纯CSS硬件加速动效
* =========================================== */
/* C++专区样式 - 代码主题轻量级优化 */
.cpp-section {
position: relative;
margin-top: 4rem;
}
.cpp-container {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--border-radius-large);
padding: 3rem;
box-shadow: var(--shadow-medium);
transition: all var(--duration-medium) var(--ease-out);
filter: grayscale(0.4) blur(1px);
opacity: 0.7;
position: relative;
overflow: hidden;
/* 动效1：代码字符流光轨迹背景 */
background-image:
linear-gradient(90deg,
rgba(139, 92, 246, 0.03) 0%,
rgba(139, 92, 246, 0.08) 50%,
rgba(139, 92, 246, 0.03) 100%
),
/* C++代码符号图案 */
url('data:image/svg+xml,');
background-repeat: repeat-x;
background-size: 200% 100%, 400px 200px;
background-position: 0% 0%, 0% 0%;
/* 性能优化：提前告知浏览器将进行背景位置动画 */
will-change: background-position, transform, opacity;
/* 动效2：渐变呼吸边框 + 点阵脉冲 */
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
}
/* 代码字符流光轨迹动画 - 15秒匀速水平流动 */
@keyframes codeFlow {
0% {
background-position: 0% 0%, 0% 0%;
}
100% {
background-position: 200% 0%, 400px 0%;
}
}
.cpp-container {
animation: codeFlow 15s linear infinite;
}
/* 渐变呼吸边框动画 - 8秒呼吸周期 */
.cpp-container::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg,
rgba(139, 92, 246, 0.6) 0%,
rgba(236, 72, 153, 0.4) 50%,
rgba(6, 182, 212, 0.6) 100%
);
border-radius: calc(var(--border-radius-large) + 2px);
z-index: -1;
animation: borderBreathing 8s ease-in-out infinite;
opacity: 0.3;
/* 性能优化：硬件加速 */
will-change: opacity, transform;
}
@keyframes borderBreathing {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.02);
}
}
/* 点阵脉冲效果 - 四角装饰 */
.cpp-container::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: var(--color-accent-primary);
border-radius: 50%;
top: 10px;
left: 10px;
animation: cornerPulse 3s ease-in-out infinite;
box-shadow:
0 0 0 0px var(--color-accent-primary),
0 0 0 0px var(--color-accent-tertiary);
/* 性能优化：硬件加速 */
will-change: transform, opacity, box-shadow;
}
.cpp-container::before {
/* 右上角点阵 */
content: '';
position: absolute;
width: 3px;
height: 3px;
background: var(--color-accent-tertiary);
border-radius: 50%;
top: 10px;
right: 10px;
animation: cornerPulse 3s ease-in-out infinite 0.75s;
}
.cpp-container .cpp-glow {
/* 左下角点阵 */
position: absolute;
width: 2px;
height: 2px;
background: var(--color-accent-primary);
border-radius: 50%;
bottom: 10px;
left: 10px;
animation: cornerPulse 3s ease-in-out infinite 1.5s;
}
.cpp-container .cpp-content::before {
/* 右下角点阵 */
content: '';
position: absolute;
width: 2px;
height: 2px;
background: var(--color-accent-tertiary);
border-radius: 50%;
bottom: 10px;
right: 10px;
animation: cornerPulse 3s ease-in-out infinite 2.25s;
}
@keyframes cornerPulse {
0%, 100% {
transform: scale(1);
opacity: 0.7;
box-shadow:
0 0 0 0px var(--color-accent-primary),
0 0 0 0px var(--color-accent-tertiary);
}
50% {
transform: scale(1.5);
opacity: 1;
box-shadow:
0 0 0 2px var(--color-accent-primary),
0 0 0 4px var(--color-accent-tertiary);
}
}
/* 新增动画关键帧 */
@keyframes gradientPulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@keyframes dividerSlide {
0%, 100% { left: 25%; width: 100px; }
50% { left: 50%; width: 200px; }
}
@keyframes particlesFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes gridPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.cpp-section:hover .cpp-container {
filter: grayscale(0) blur(0px);
opacity: 1;
box-shadow: var(--shadow-hard), 0 0 50px rgba(139, 92, 246, 0.4);
border-color: rgba(139, 92, 246, 0.6);
transform: translateY(-5px);
/* Hover时增强动效 */
animation-duration: 12s, 15s; /* 流光加速 */
}
.cpp-section:hover .cpp-container::before {
animation-duration: 6s; /* 边框呼吸加速 */
opacity: 0.8;
}
.cpp-section:hover .cpp-container::after,
.cpp-section:hover .cpp-container .cpp-glow,
.cpp-section:hover .cpp-container .cpp-content::before {
animation-duration: 2s; /* 点阵脉冲加速 */
}
.cpp-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1.5rem;
}
.cpp-title {
font-size: 2.2rem;
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 1rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.cpp-icon {
font-size: 2rem;
animation: lightning 2s ease-in-out infinite;
}
@keyframes lightning {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.1); }
}
.opening-time {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: var(--font-family-mono);
font-size: 1rem;
color: var(--color-text-secondary);
padding: 0.8rem 1.2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 50px;
border: 1px solid rgba(139, 92, 246, 0.3);
/* 移除倒计时动画，改为静态显示 */
animation: none;
opacity: 1;
box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}
.cpp-content {
text-align: center;
position: relative;
z-index: 2;
}
.cpp-description {
color: var(--color-text-secondary);
margin-bottom: 2.5rem;
line-height: 1.6;
font-size: 1.1rem;
font-weight: var(--font-weight-medium);
}
.cpp-button {
position: relative;
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
color: var(--color-text-primary);
border: none;
padding: 1.2rem 2.5rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-elastic);
display: inline-flex;
align-items: center;
gap: 1rem;
box-shadow: var(--shadow-soft);
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.05em;
/* 性能优化 */
will-change: transform, box-shadow;
}
.cpp-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-medium), 0 0 30px rgba(139, 92, 246, 0.6);
}
.cpp-button:active {
transform: translateY(0) scale(0.98);
}
.button-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left var(--duration-slow) ease;
}
.cpp-button:hover .button-glow {
left: 100%;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 3rem;
right: 3rem;
width: 60px;
height: 60px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: 50%;
color: var(--color-accent-primary);
cursor: pointer;
transition: all var(--duration-medium) var(--ease-out);
opacity: 0;
visibility: hidden;
transform: translateY(30px) scale(0.8);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
z-index: 1000;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.back-to-top:hover {
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
color: var(--color-text-primary);
transform: translateY(-5px) scale(1.1);
box-shadow: var(--shadow-glow);
animation: rotate 1s ease-in-out;
}
@keyframes rotate {
0% { transform: translateY(-5px) scale(1.1) rotate(0deg); }
100% { transform: translateY(-5px) scale(1.1) rotate(360deg); }
}
/* 视差效果 */
[data-parallax] {
will-change: transform;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.container {
padding: 2rem 1.5rem;
}
.subjects-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.header {
padding: 3rem 0;
margin-bottom: 4rem;
}
.title-text {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.subjects-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.cpp-header {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.header {
padding: 2.5rem 0;
margin-bottom: 3rem;
}
.title-text {
font-size: 2.5rem;
}
.back-to-top {
bottom: 2rem;
right: 2rem;
width: 55px;
height: 55px;
}
.tab-button {
min-width: 150px;
padding: 1rem 2rem;
font-size: 1.1rem;
}
.import-btn {
min-width: 180px;
padding: 1rem 2rem;
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 1.5rem 1rem;
}
.subject-card {
padding: 1.5rem;
}
.cpp-container {
padding: 1.5rem;
}
.title-text {
font-size: 2rem;
}
.back-to-top {
bottom: 1.5rem;
right: 1.5rem;
width: 50px;
height: 50px;
}
.tab-button {
min-width: 120px;
padding: 0.8rem 1.5rem;
font-size: 1rem;
}
.import-btn {
min-width: 150px;
padding: 0.8rem 1.5rem;
font-size: 1rem;
}
.quiz-btn {
min-width: 180px;
padding: 1rem 2rem;
font-size: 1.1rem;
}
.draw-btn {
min-width: 200px;
padding: 1.2rem 2.5rem;
font-size: 1.2rem;
}
}
/* 录音按钮样式 */
.voice-record-btn {
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: var(--color-accent-primary, #8B5CF6);
color: white;
border: none;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
cursor: pointer;
z-index: 9998;
transition: all 0.3s ease;
box-shadow: var(--shadow-soft, 0 4px 15px rgba(0, 0, 0, 0.2));
}
.voice-record-btn:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: var(--shadow-medium, 0 6px 25px rgba(0, 0, 0, 0.3));
}
.voice-record-btn.recording {
background: #F472B6;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(244, 114, 182, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(244, 114, 182, 0);
}
}
/* 语音速记专区样式 */
.voice-notes-section {
background: var(--glass-bg, rgba(255, 255, 255, 0.1));
border: var(--glass-border, 1px solid rgba(139, 92, 246, 0.2));
border-radius: var(--border-radius, 16px);
padding: 16px;
margin-bottom: 20px;
box-shadow: var(--shadow-soft, 0 4px 15px rgba(0, 0, 0, 0.2));
backdrop-filter: var(--glass-blur, blur(10px));
}
.voice-notes-header {
margin-bottom: 16px;
}
.voice-notes-title {
color: var(--color-accent-primary, #8B5CF6);
font-size: 18px;
font-weight: 600;
margin: 0;
}
.voice-notes-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.voice-note-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.voice-note-item:hover {
background: rgba(var(--color-accent-primary-rgb, 139, 92, 246), 0.05);
}
.voice-note-info {
flex: 1;
}
.voice-note-name {
color: var(--color-text-primary, #FFFFFF);
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.voice-note-time {
color: var(--color-text-secondary, rgba(255, 255, 255, 0.8));
font-size: 12px;
}
.voice-note-play {
width: 28px;
height: 28px;
background: none;
border: none;
color: var(--color-accent-primary, #8B5CF6);
font-size: 16px;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.voice-note-play:hover {
background: rgba(var(--color-accent-primary-rgb, 139, 92, 246), 0.1);
}
/* 性能优化 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 高对比度模式支持 */
@media (prefers-contrast: high) {
:root {
--color-text-primary: #FFFFFF;
--color-text-secondary: #CCCCCC;
}
.subject-card {
border-width: 2px;
}
}
/* 打印样式 */
@media print {
.particles-bg,
.grid-overlay,
.back-to-top,
.ai-float-ball,
.ai-modal {
display: none;
}
.subject-card {
box-shadow: none;
border: 2px solid #000;
background: white !important;
color: black !important;
}
}
/* ===========================================
* AI功能样式
* =========================================== */
/* 缴费相关文字样式 */
.ai-fee-text {
font-weight: 700 !important;
color: #ff4444 !important;
}
/* 悬浮球样式 */
.ai-float-ball {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--color-accent-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9998;
transition: all 0.3s ease;
box-shadow: var(--shadow-soft);
}
.ai-float-ball:hover {
width: 65px;
height: 65px;
animation: aiFloatBallPulse 2s ease-in-out infinite;
}
.ai-float-ball.dragging {
cursor: grabbing;
transform: scale(1.1);
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
transition: none;
animation: none;
}
@keyframes aiFloatBallPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
}
}
/* 弹窗基础样式 */
.ai-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
display: none;
}
.ai-modal.active {
display: flex;
}
.ai-modal-content {
background: rgba(30, 41, 59, 0.8);
border: 1px solid var(--color-accent-primary);
border-radius: 12px;
width: 70%;
max-width: 600px;
box-shadow: 0 8px 32px rgba(159, 122, 234, 0.2);
backdrop-filter: blur(10px);
}
/* 隐私协议弹窗 */
.ai-privacy-modal .ai-modal-content {
width: 70%;
max-width: 600px;
}
/* AI聊天弹窗 */
.ai-chat-modal .ai-modal-content {
width: 80%;
max-width: 500px;
height: 80%;
max-height: 600px;
display: flex;
flex-direction: column;
}
/* 弹窗头部 */
.ai-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid rgba(159, 122, 234, 0.3);
}
.ai-modal-header h3 {
color: var(--color-accent-primary);
font-size: 18px;
font-weight: 600;
margin: 0;
}
.ai-modal-close {
background: none;
border: none;
color: var(--color-text-secondary);
font-size: 24px;
cursor: pointer;
transition: color 0.3s ease;
}
.ai-modal-close:hover {
color: var(--color-accent-primary);
}
/* 弹窗内容 */
.ai-modal-body {
padding: 20px;
flex: 1;
overflow-y: auto;
}
/* 隐私协议内容 */
.ai-privacy-modal .ai-modal-body p {
color: var(--color-text-primary);
font-size: 14px;
line-height: 1.6;
margin-bottom: 12px;
}
.ai-privacy-modal .ai-modal-body p:last-child {
margin-bottom: 0;
}
/* 弹窗底部 */
.ai-modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 20px;
border-top: 1px solid rgba(159, 122, 234, 0.3);
}
/* 按钮样式 */
.ai-btn {
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.ai-btn-primary {
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
color: var(--color-text-primary);
border: none;
}
.ai-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(159, 122, 234, 0.3);
}
.ai-btn-secondary {
background: transparent;
color: var(--color-accent-primary);
border: 1px solid var(--color-accent-primary);
}
.ai-btn-secondary:hover {
background: rgba(159, 122, 234, 0.2);
}
/* 标签切换 */
.ai-modal-tabs {
display: flex;
border-bottom: 1px solid rgba(159, 122, 234, 0.3);
}
.ai-tab-btn {
flex: 1;
padding: 12px;
background: transparent;
border: none;
color: var(--color-text-secondary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.ai-tab-btn:hover {
color: var(--color-accent-primary);
}
.ai-tab-btn.active {
color: var(--color-accent-primary);
}
.ai-tab-btn.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--color-accent-primary);
}
/* 标签内容 */
.ai-tab-content {
display: none;
height: 100%;
}
.ai-tab-content.active {
display: block;
}
/* 输入区域 */
.ai-input-section {
margin-bottom: 20px;
}
.ai-textarea {
width: 100%;
min-height: 100px;
background: rgba(45, 55, 72, 0.9);
border: 1px solid rgba(159, 122, 234, 0.3);
border-radius: 8px;
padding: 12px;
color: var(--color-text-primary);
font-family: var(--font-family-primary);
font-size: 14px;
resize: vertical;
transition: all 0.3s ease;
margin-bottom: 12px;
}
.ai-textarea:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 10px rgba(159, 122, 234, 0.3);
}
.ai-textarea::placeholder {
color: var(--color-text-tertiary);
}
/* 输入框头部（模型选择器 - 下拉折叠） */
.ai-input-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
/* 模型下拉选择器 */
.ai-model-dropdown {
position: relative;
display: inline-block;
}
.ai-model-dropdown-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: #E2E8F0;
transition: all 0.2s;
white-space: nowrap;
}
.ai-model-dropdown-btn:hover {
background: rgba(159, 122, 234, 0.08);
border-color: rgba(159, 122, 234, 0.3);
}
.ai-model-icon {
font-size: 14px;
line-height: 1;
}
.ai-model-arrow {
font-size: 8px;
color: #8899AA;
margin-left: 2px;
transition: transform 0.2s;
}
.ai-model-dropdown-menu {
display: none;
width: max-content;
min-width: 180px;
background: rgba(30, 41, 59, 0.98);
border: 1px solid rgba(159, 122, 234, 0.3);
border-radius: 8px;
padding: 4px;
z-index: 9999;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.ai-model-dropdown-menu.active {
display: block;
}
.ai-model-item {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.ai-model-item:hover {
background: rgba(159, 122, 234, 0.12);
}
.ai-model-item-icon {
font-size: 14px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.ai-model-item-name {
font-size: 13px;
font-weight: 600;
color: #E2E8F0;
white-space: nowrap;
flex-shrink: 0;
}
.ai-model-item-desc {
font-size: 11px;
color: #8899AA;
white-space: nowrap;
flex-shrink: 0;
}
/* Light 主题 */
body.light .ai-model-dropdown-btn {
background: #F1F5F9;
border-color: rgba(0,0,0,0.08);
color: #1E293B;
}
body.light .ai-model-dropdown-btn:hover {
background: #E2E8F0;
}
body.light .ai-model-dropdown-menu {
background: rgba(248,250,252,0.98);
border-color: rgba(159, 122, 234, 0.4);
}
body.light .ai-model-item-name {
color: #1E293B;
}
color: #ff4444;
font-size: 12px;
margin-bottom: 12px;
text-align: center;
}
/* 回复区域 */
.ai-response {
background: rgba(45, 55, 72, 0.6);
border: 1px solid rgba(159, 122, 234, 0.2);
border-radius: 8px;
padding: 16px;
min-height: 100px;
color: var(--color-text-primary);
font-size: 14px;
line-height: 1.6;
}
.ai-response.loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* AI 回复 Markdown 样式 */
.ai-response p{margin:6px 0}
.ai-response h3{font-size:16px;color:#F1F5F9;margin:12px 0 6px}
.ai-response h2{font-size:18px;color:#F1F5F9;margin:14px 0 8px}
.ai-response code{background:rgba(255,255,255,0.08);padding:2px 6px;border-radius:4px;font-size:13px;font-family:Consolas,monospace}
.ai-response pre{background:#0F172A;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:12px;overflow-x:auto;margin:8px 0}
.ai-response pre code{background:none;padding:0}
.ai-response blockquote{border-left:3px solid #9F7AEA;margin:6px 0;padding:4px 12px;color:#8899AA;background:rgba(159,122,234,0.04);border-radius:0 6px 6px 0}
.ai-response ul,.ai-response ol{padding-left:20px;margin:4px 0}
.ai-response li{margin:2px 0}
.ai-response a{color:#409EFF}
.ai-response img{max-width:100%;border-radius:6px}
.ai-history-item-reply p{margin:6px 0}
.ai-history-item-reply code{background:rgba(255,255,255,0.08);padding:2px 6px;border-radius:4px;font-size:13px;font-family:Consolas,monospace}
.ai-history-item-reply pre{background:#0F172A;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:12px;overflow-x:auto;margin:8px 0}
.ai-history-item-reply pre code{background:none;padding:0}
.ai-history-item-reply ul,.ai-history-item-reply ol{padding-left:20px;margin:4px 0}
.ai-history-item-reply li{margin:2px 0}
/* KaTeX 公式样式覆盖 */
.ai-response .katex-display,
.ai-history-item-reply .katex-display {
margin: 8px 0;
overflow-x: auto;
overflow-y: hidden;
}
.ai-response .katex,
.ai-history-item-reply .katex {
font-size: 1.1em;
}
.ai-response.loading::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid rgba(159, 122, 234, 0.3);
border-top: 2px solid var(--color-accent-primary);
border-radius: 50%;
animation: aiLoadingSpin 1s linear infinite;
}
@keyframes aiLoadingSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 历史记录列表 */
.ai-history-list {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
overflow-y: auto;
}
.ai-history-item {
background: rgba(45, 55, 72, 0.6);
border: 1px solid rgba(159, 122, 234, 0.2);
border-radius: 8px;
padding: 12px;
transition: background-color 0.3s ease;
}
.ai-history-item:hover {
background: rgba(159, 122, 234, 0.05);
}
.ai-history-item-header {
font-size: 12px;
color: var(--color-text-tertiary);
margin-bottom: 8px;
}
.ai-history-item-question {
font-size: 14px;
color: var(--color-text-primary);
margin-bottom: 8px;
line-height: 1.4;
}
.ai-history-item-info {
font-size: 12px;
margin-bottom: 8px;
}
.ai-history-item-reply {
font-size: 14px;
color: var(--color-text-secondary);
line-height: 1.4;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(159, 122, 234, 0.1);
}
.ai-history-item-reply.collapsed {
max-height: 60px;
overflow: hidden;
position: relative;
}
.ai-history-item-reply.collapsed::after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
background: rgba(45, 55, 72, 0.6);
padding-left: 10px;
}
.ai-history-item-toggle {
background: none;
border: none;
color: var(--color-accent-primary);
font-size: 12px;
cursor: pointer;
padding: 0;
margin-top: 8px;
}
.ai-model-info {
color: #67C23A;
}
/* 响应式适配 */
@media (max-width: 768px) {
.ai-modal-content {
width: 90%;
}
.ai-privacy-modal .ai-modal-content {
width: 90%;
}
.ai-chat-modal .ai-modal-content {
width: 95%;
height: 85%;
}
.ai-float-ball {
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
}
.ai-float-ball:hover {
width: 60px;
height: 60px;
}
}
/* ===========================================
* 主观题输入框样式 - 视觉炸裂级设计
* =========================================== */
/* 主观题输入框 */
.subjective-input {
width: 100%;
min-height: 120px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--border-radius);
padding: 1.5rem;
color: var(--color-text-primary);
font-family: var(--font-family-primary);
font-size: 1rem;
line-height: 1.6;
resize: vertical;
transition: all var(--duration-medium) var(--ease-out);
box-shadow: var(--shadow-soft);
margin-bottom: 1rem;
}
.subjective-input:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: var(--shadow-glow);
background: rgba(255, 255, 255, 0.15);
}
.subjective-input::placeholder {
color: var(--color-text-tertiary);
}
/* 主观题提示信息 */
.subjective-hint {
color: var(--color-accent-tertiary);
font-size: 0.9rem;
font-style: italic;
margin-bottom: 1rem;
text-align: center;
opacity: 0.8;
}
/* 主观题反馈区域 */
#quizFeedback {
margin-top: 1rem;
padding: 1.5rem;
border-radius: var(--border-radius);
font-size: 1rem;
line-height: 1.6;
}
#quizFeedback div {
margin-bottom: 0.5rem;
}
#quizFeedback strong {
color: var(--color-accent-primary);
}
/* ===========================================
* 新增交互组件样式 - 大屏适配优化
* =========================================== */
/* 单选题单选按钮组 */
.radio-option {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding: 1.2rem;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--border-radius);
transition: all var(--duration-medium) var(--ease-out);
cursor: pointer;
min-height: 60px;
box-shadow: var(--shadow-soft);
}
.radio-option:hover {
border-color: var(--color-accent-primary);
box-shadow: var(--shadow-glow);
transform: translateY(-2px);
}
.radio-btn {
width: 30px;
height: 30px;
margin-right: 1.5rem;
accent-color: var(--color-accent-primary);
cursor: pointer;
}
.radio-label {
font-size: 1.1rem;
line-height: 1.4;
color: var(--color-text-primary);
cursor: pointer;
flex: 1;
}
/* 单行输入框 */
.single-line-input {
width: 100%;
height: 60px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--border-radius);
padding: 1.2rem;
color: var(--color-text-primary);
font-family: var(--font-family-primary);
font-size: 1.1rem;
line-height: 1.6;
transition: all var(--duration-medium) var(--ease-out);
box-shadow: var(--shadow-soft);
margin-bottom: 1rem;
}
.single-line-input:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: var(--shadow-glow);
background: rgba(255, 255, 255, 0.15);
}
.single-line-input::placeholder {
color: var(--color-text-tertiary);
}
/* 多行输入框 */
.multi-line-input {
width: 100%;
min-height: 180px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--border-radius);
padding: 1.5rem;
color: var(--color-text-primary);
font-family: var(--font-family-primary);
font-size: 1.1rem;
line-height: 1.6;
resize: vertical;
transition: all var(--duration-medium) var(--ease-out);
box-shadow: var(--shadow-soft);
margin-bottom: 1rem;
}
.multi-line-input:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: var(--shadow-glow);
background: rgba(255, 255, 255, 0.15);
}
.multi-line-input::placeholder {
color: var(--color-text-tertiary);
}
/* 输入提示信息 */
.input-hint {
color: var(--color-accent-tertiary);
font-size: 1rem;
font-style: italic;
margin-bottom: 1rem;
text-align: center;
opacity: 0.8;
}
/* 大屏触屏优化 */
@media (min-width: 1024px) {
.radio-option {
min-height: 70px;
padding: 1.5rem;
}
.radio-btn {
width: 35px;
height: 35px;
margin-right: 2rem;
}
.radio-label {
font-size: 1.2rem;
}
.single-line-input {
height: 70px;
font-size: 1.2rem;
padding: 1.5rem;
}
.multi-line-input {
min-height: 200px;
font-size: 1.2rem;
padding: 2rem;
}
.input-hint {
font-size: 1.1rem;
}
}