/* 完整 CSS - 从备份 index_backup_20250618_v2.html 重新提取 */
/* 基础动画定义 */
/* 可移动面板样式 */
.scene-mode-panel {
position: fixed;
width: 600px;
height: 500px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border: 2px solid var(--primary-color);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
color: white;
cursor: move;
}
.panel-header h3 {
margin: 0;
font-size: 1.3em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.panel-controls {
display: flex;
gap: 5px;
}
/* 遮罩层样式 */
.scene-mode-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
z-index: 999;
}
/* 皇冠样式 */
.crown {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 20px;
background: var(--crown-color, #FFD700);
border-radius: 5px 5px 0 0;
box-shadow: 0 0 15px var(--crown-color, #FFD700);
}
.crown:before, .crown:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid var(--crown-color, #FFD700);
}
.crown:before {
left: -10px;
top: -10px;
}
.crown:after {
right: -10px;
top: -10px;
}
/* 金色皇冠变体 */
.crown.gold-crown {
background: linear-gradient(135deg, #FFD700, #FFA500);
box-shadow: 0 0 20px #FFD700, 0 0 30px rgba(255,215,0,0.5);
}
.crown.gold-crown:before, .crown.gold-crown:after {
border-bottom-color: #FFD700;
}
/* 场景模式内容样式 */
.scene-mode-controls {
padding: 20px;
}
.mode-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.mode-btn {
padding: 15px 20px;
font-size: 1.1em;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
color: white;
font-weight: bold;
text-align: left;
box-shadow: var(--shadow-sm);
}
.mode-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.mode-btn:nth-child(1) {
background: linear-gradient(45deg, #FF6B35, #F7931E);
}
.mode-btn:nth-child(2) {
background: linear-gradient(45deg, #4682B4, #5F9EA0);
}
#autoModeToggle {
background: #6c757d;
}
.panel-control-btn {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
color: white;
font-size: 1.2em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.panel-control-btn:hover {
background: rgba(255, 255, 255, 0.5);
}
.panel-body {
padding: 20px;
height: calc(100% - 60px);
overflow-y: auto;
}
/* 场景模式内容样式 */
.mode-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.manual-score-btn {
padding: 10px 15px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.9em;
transition: all 0.3s ease;
margin: 5px 0;
}
.manual-score-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
:root {
/* 基础主题颜色变量 */
--primary-color: #4dabf7;
--primary-light: #74c0fc;
--primary-dark: #339af0;
/* 次要颜色 */
--secondary-color: #51cf66;
--secondary-light: #8ce99a;
--secondary-dark: #37b24d;
/* 玻璃拟态与卡片 */
--glass-bg: rgba(255,255,255,0.72);
--glass-border: rgba(255,255,255,0.5);
--card-shadow: 0 4px 20px rgba(0,0,0,0.06);
--card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);
/* 强调色 */
--accent-color: #ffd43b;
--accent-light: #ffe066;
--accent-dark: #fab005;
/* 其他颜色 */
--green-color: #51cf66;
--green-light: #8ce99a;
--green-dark: #37b24d;
--blue-color: #339af0;
--blue-light: #74c0fc;
--blue-dark: #1971c2;
--pink-color: #ff6b9d;
--pink-light: #ffa8a8;
--pink-dark: #e64980;
/* 背景色 */
--bg-primary: #F8F9FA;
--bg-secondary: #FFFFFF;
--bg-tertiary: #F0F8FF;
/* 文本色 */
--text-primary: #333333;
--text-secondary: #666666;
--text-light: #999999;
/* 阴影 */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 5px 15px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
/* 圆角 */
--radius-sm: 8px;
--radius-md: 15px;
--radius-lg: 25px;
}
/* 全局样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 闪烁动画 */
@keyframes twinkle {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
/* 冬季主题背景 */
body {
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
background: linear-gradient(to bottom,
#0c1445 0%, /* 深冬夜空 */
#1e3a8a 25%, /* 冬季夜空蓝 */
#3b82f6 50%, /* 冬日蓝天 */
#bfdbfe 70%, /* 浅冬云层 */
#f0f9ff 85%, /* 近地云层 */
#ffffff 100% /* 雪地 */
);
color: #333;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/* 冬季雪地层 */
.snow-ground {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to top,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0.3) 100%
);
z-index: 100;
pointer-events: none;
}
/* 添加马年快乐文字装饰 */
#startButton {
position: absolute;
bottom: 100px;
right: 100px;
padding: 20px 40px;
font-size: 1.8em;
background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.4);
color: white;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
user-select: none;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
#startButton:hover {
transform: scale(1.15) translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
}
#startButton:active {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
}
/* 通用模态框样式 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
display: none; /* 默认隐藏 */
overflow-y: auto;
}
.modal-content {
background-color: var(--bg-secondary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
width: 90%;
max-width: 700px;
max-height: 80vh;
overflow-y: auto;
padding: 0;
border: 3px solid var(--primary-color);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
color: white;
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
.modal-header h2 {
margin: 0;
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
font-size: 1.8em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.modal .close {
color: white;
font-size: 36px;
font-weight: bold;
cursor: pointer;
background: none;
border: none;
padding: 5px 10px;
margin: 0;
transition: transform 0.3s ease;
}
.modal .close:hover {
color: var(--accent-color);
transform: scale(1.2) rotate(90deg);
}
/* 优化：简化宠物图标样式，减少性能消耗 */
.pet-icon-3d {
display: inline-block;
position: relative;
transform-style: flat;
perspective: none;
perspective-origin: center center;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* 增强3D立体阴影层次效果 */
text-shadow:
0 1px 0 rgba(255,255,255,0.8),
0 -1px 0 rgba(0,0,0,0.4),
0 2px 2px rgba(0,0,0,0.3),
0 4px 4px rgba(0,0,0,0.25),
0 8px 8px rgba(0,0,0,0.2),
0 16px 16px rgba(0,0,0,0.15),
0 32px 32px rgba(0,0,0,0.1),
0 64px 64px rgba(0,0,0,0.05);
/* 增强的3D边框效果 */
border: 1px solid rgba(255,255,255,0.3);
border-radius: 12px;
background: linear-gradient(145deg,
rgba(255,255,255,0.1),
rgba(255,255,255,0.05),
rgba(0,0,0,0.05));
/* 3D容器背景 */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
animation: advanced-float 4s ease-in-out infinite;
will-change: transform, filter;
/* 3D变换原点 */
transform-origin: center center;
}
/* 3D容器增强效果 */
.pet-icon-3d::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg,
rgba(255,255,255,0.1),
rgba(255,255,255,0.05),
rgba(0,0,0,0.05));
border-radius: 15px;
z-index: -1;
opacity: 0;
transition: all 0.4s ease;
}
/* 悬停时的轻量增强效果 */
.pet-icon-3d:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 点击反馈效果 */
.pet-icon-3d:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
/* 点击波纹效果 */
.pet-icon-3d.clicked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.6);
transform: translate(-50%, -50%);
animation: click-ripple 0.6s ease-out;
pointer-events: none;
}
@keyframes click-ripple {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
opacity: 0;
}
}
/* 粒子发光效果 */
.pet-icon-3d.glowing::before {
opacity: 1;
animation: glow-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
0% {
box-shadow: 0 0 20px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.1);
}
100% {
box-shadow: 0 0 30px rgba(255,255,255,0.5), 0 0 60px rgba(255,255,255,0.2);
}
}
/* 已删除未使用的马年特效 CSS (horse-year-interactive, imagination-particles, joyful-swing, positive-rise, creative-breathe, rainbow-aura, creative-border, innovative-text, creative-particles) - 共约270行 */
/* 宠物视频样式 */
.pet-video {
display: block;
border: none;
outline: none;
transition: all 0.3s ease;
}
.pet-video:hover {
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* 视频加载动画 */
@keyframes video-loading {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
.pet-video {
animation: video-loading 2s ease-in-out infinite;
}
/* 宠物成长阶段动画 */
/* 幼体期（1-5级）：软糖摇摆动画 */
@keyframes baby-pet-animation {
0% {
transform: scale(0.9);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
25% {
transform: scale(1.1);
text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
50% {
transform: scale(1.0);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
75% {
transform: scale(1.1);
text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
100% {
transform: scale(0.9);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
}
/* 少年期（6-10级）：弹性跳跃动画 */
@keyframes teen-pet-animation {
0% {
transform: scale(1) translateY(0px);
text-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
25% {
transform: scale(1.05) translateY(-5px);
text-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
50% {
transform: scale(1.1) translateY(-10px);
text-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
75% {
transform: scale(1.05) translateY(-5px);
text-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
100% {
transform: scale(1) translateY(0px);
text-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
}
/* 成年期（21-30级）：沉稳呼吸动画 */
@keyframes adult-pet-animation {
0% {
transform: scale(1);
text-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
50% {
transform: scale(1.05);
text-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
100% {
transform: scale(1);
text-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
}
/* 终极期（31-40级）：炫目光效动画 */
@keyframes ultimate-pet-animation {
0% {
transform: scale(1) rotateY(0deg);
text-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
25% {
transform: scale(1.05) rotateY(10deg);
text-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
50% {
transform: scale(1.1) rotateY(0deg);
text-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
75% {
transform: scale(1.05) rotateY(-10deg);
text-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
100% {
transform: scale(1) rotateY(0deg);
text-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
}
/* 优化后的宠物3D动画 */
@keyframes petFloat {
0% { transform: translateZ(0px) rotateY(0deg); }
25% { transform: translateZ(3px) rotateY(5deg); }
50% { transform: translateZ(0px) rotateY(0deg); }
75% { transform: translateZ(3px) rotateY(-5deg); }
100% { transform: translateZ(0px) rotateY(0deg); }
}
@keyframes ultimatePulse {
0% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 0.9; }
100% { transform: scale(1); opacity: 0.7; }
}
@keyframes ultimateRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 浮动动画 */
/* 100级宠物特殊样式 - 完全禁用所有动画 */
.pet-level-500 {
animation: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
}
/* 100级宠物的子元素也禁用动画 */
.pet-level-500 * {
animation: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
}
/* 100级宠物禁用悬停效果 */
.pet-level-500:hover {
animation: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
filter: none !important;
-webkit-filter: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
text-shadow: none !important;
border-color: #ccc !important;
}
/* 100级宠物禁用悬停时的3D变换效果 */
.pet-level-500:hover {
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
}
/* 静态宠物类 - 全面禁用所有效果 */
.pet-static,
.pet-static:hover,
.pet-static:active,
.pet-static:focus,
.pet-static * {
animation: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
filter: none !important;
-webkit-filter: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
text-shadow: none !important;
border-color: #ccc !important;
cursor: default !important;
}
/* 防止任何CSS继承的悬停效果 */
.pet-level-500.pet-static,
.pet-level-500.pet-static:hover,
.pet-level-500.pet-static:active {
all: unset !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 80px !important;
height: 80px !important;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0) !important;
border: 2px solid #ccc !important;
border-radius: 12px !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
position: relative !important;
z-index: 1 !important;
}
/* 粒子环绕动画 */
@keyframes particle-animation {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 0.8; }
}
/* 粒子样式 */
.particle {
animation: particle-animation 2s infinite ease-in-out;
}
/* 传说期（51-60级）：金色光芒动画 */
@keyframes legendary-pet-animation {
0% {
transform: scale(1);
text-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
25% {
transform: scale(1.05);
text-shadow: 0 18px 36px rgba(0,0,0,0.45);
}
50% {
transform: scale(1.1);
text-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
75% {
transform: scale(1.05);
text-shadow: 0 18px 36px rgba(0,0,0,0.45);
}
100% {
transform: scale(1);
text-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
}
/* 宠物进化动画样式 - 禁用所有动画效果 */
.evolution-effect {
display: none !important;
}
.evolution-particles {
display: none !important;
}
.evolution-particles::before,
.evolution-particles::after {
display: none !important;
}
.evolution-light {
display: none !important;
}
/* 宠物升级动画样式 - 禁用所有动画效果 */
.levelup-effect {
display: none !important;
}
.levelup-particles {
display: none !important;
}
.levelup-particles::before,
.levelup-particles::after {
display: none !important;
}
.levelup-glow {
display: none !important;
}
/* 进化动画关键帧 - 禁用所有动画 */
/* 升级动画关键帧 - 禁用所有动画 */
/* 不同进化类型的特殊效果 */
.evolution-epic {
animation: epicEvolution 3s ease-in-out;
}
.evolution-rare {
animation: rareEvolution 2.5s ease-in-out;
}
.evolution-normal {
animation: normalEvolution 2s ease-in-out;
}
.evolution-basic {
animation: basicEvolution 1.5s ease-in-out;
}
/* 不同升级类型的特殊效果 */
.levelup-milestone {
animation: milestoneLevelUp 2s ease-in-out;
}
.levelup-major {
animation: majorLevelUp 1.8s ease-in-out;
}
.levelup-minor {
animation: minorLevelUp 1.5s ease-in-out;
}
.levelup-basic {
animation: basicLevelUp 1.2s ease-in-out;
}
/* 进化类型动画 */
@keyframes epicEvolution {
0% {
transform: scale(1) rotateY(0deg) translateZ(0px);
filter: brightness(1) saturate(1);
}
20% {
transform: scale(1.8) rotateY(72deg) translateZ(60px);
filter: brightness(1.5) saturate(1.8);
}
40% {
transform: scale(1.5) rotateY(144deg) translateZ(80px);
filter: brightness(2) saturate(2);
}
60% {
transform: scale(2.2) rotateY(216deg) translateZ(100px);
filter: brightness(2.5) saturate(2.5);
}
80% {
transform: scale(1.3) rotateY(288deg) translateZ(40px);
filter: brightness(1.8) saturate(1.8);
}
100% {
transform: scale(1) rotateY(360deg) translateZ(0px);
filter: brightness(1) saturate(1);
}
}
@keyframes rareEvolution {
0% {
transform: scale(1) rotateY(0deg) translateZ(0px);
filter: brightness(1) saturate(1);
}
25% {
transform: scale(1.5) rotateY(90deg) translateZ(50px);
filter: brightness(1.3) saturate(1.5);
}
50% {
transform: scale(1.8) rotateY(180deg) translateZ(70px);
filter: brightness(1.8) saturate(2);
}
75% {
transform: scale(1.2) rotateY(270deg) translateZ(30px);
filter: brightness(1.4) saturate(1.6);
}
100% {
transform: scale(1) rotateY(360deg) translateZ(0px);
filter: brightness(1) saturate(1);
}
}
@keyframes normalEvolution {
0% {
transform: scale(1) rotateY(0deg) translateZ(0px);
filter: brightness(1);
}
30% {
transform: scale(1.3) rotateY(108deg) translateZ(30px);
filter: brightness(1.2);
}
60% {
transform: scale(1.5) rotateY(216deg) translateZ(50px);
filter: brightness(1.4);
}
100% {
transform: scale(1) rotateY(360deg) translateZ(0px);
filter: brightness(1);
}
}
@keyframes basicEvolution {
0% {
transform: scale(1) rotateY(0deg);
}
50% {
transform: scale(1.2) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(360deg);
}
}
/* 升级类型动画 */
@keyframes milestoneLevelUp {
0% {
transform: scale(1) translateY(0px) rotateX(0deg);
filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 0, 0));
}
25% {
transform: scale(1.4) translateY(-20px) rotateX(15deg);
filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 255, 0, 0.8));
}
50% {
transform: scale(1.6) translateY(-30px) rotateX(-10deg);
filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 255, 0, 1));
}
75% {
transform: scale(1.2) translateY(-15px) rotateX(5deg);
filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 0, 0.6));
}
100% {
transform: scale(1) translateY(0px) rotateX(0deg);
filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 0, 0));
}
}
@keyframes majorLevelUp {
0% {
transform: scale(1) translateY(0px);
filter: brightness(1);
}
30% {
transform: scale(1.3) translateY(-15px);
filter: brightness(1.2);
}
70% {
transform: scale(1.4) translateY(-20px);
filter: brightness(1.3);
}
100% {
transform: scale(1) translateY(0px);
filter: brightness(1);
}
}
@keyframes minorLevelUp {
0% {
transform: scale(1) translateY(0px);
filter: brightness(1);
}
50% {
transform: scale(1.2) translateY(-10px);
filter: brightness(1.1);
}
100% {
transform: scale(1) translateY(0px);
filter: brightness(1);
}
}
@keyframes basicLevelUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pet-container {
position: relative;
overflow: hidden;
}
/* 点击时的爆炸粒子效果 */
.pet-icon-3d:active::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background-image:
radial-gradient(3px 3px at 25% 25%, rgba(255, 255, 0, 0.8) 0%, transparent 70%),
radial-gradient(2px 2px at 75% 75%, rgba(255, 0, 255, 0.7) 0%, transparent 70%),
radial-gradient(2px 2px at 75% 25%, rgba(0, 255, 255, 0.6) 0%, transparent 70%),
radial-gradient(3px 3px at 25% 75%, rgba(255, 255, 0, 0.5) 0%, transparent 70%);
animation: clickParticleExplosion 0.8s ease-out;
pointer-events: none;
z-index: 15;
}
/* 动画关键帧 */
@keyframes clickParticleExplosion {
0% {
transform: scale(0.5) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.5) rotate(180deg);
opacity: 0.8;
}
100% {
transform: scale(2) rotate(360deg);
opacity: 0;
}
}
/* 特殊粒子效果类 */
.particle-legendary {
position: relative;
}
.particle-legendary::before {
content: '';
position: absolute;
top: -25px;
left: -25px;
right: -25px;
bottom: -25px;
background-image:
radial-gradient(2px 2px at 20% 20%, rgba(255, 215, 0, 0.6) 0%, transparent 70%),
radial-gradient(1px 1px at 40% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 70%),
radial-gradient(2px 2px at 60% 40%, rgba(255, 165, 0, 0.4) 0%, transparent 70%),
radial-gradient(1px 1px at 80% 80%, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
animation: legendaryParticles 6s ease-in-out infinite;
pointer-events: none;
z-index: -2;
}
.particle-mythical {
position: relative;
}
.particle-mythical::before {
content: '';
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
background-image:
radial-gradient(3px 3px at 25% 25%, rgba(138, 43, 226, 0.7) 0%, transparent 70%),
radial-gradient(2px 2px at 50% 50%, rgba(75, 0, 130, 0.5) 0%, transparent 70%),
radial-gradient(2px 2px at 75% 75%, rgba(255, 20, 147, 0.4) 0%, transparent 70%),
radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
animation: mythicalParticles 4s ease-in-out infinite;
pointer-events: none;
z-index: -2;
}
@keyframes legendaryParticles {
0%, 100% {
transform: rotate(0deg) scale(1);
opacity: 0.5;
}
33% {
transform: rotate(120deg) scale(1.2);
opacity: 0.8;
}
66% {
transform: rotate(240deg) scale(0.9);
opacity: 0.6;
}
}
@keyframes mythicalParticles {
0%, 100% {
transform: rotate(0deg) scale(1) translateZ(0);
opacity: 0.6;
}
25% {
transform: rotate(90deg) scale(1.3) translateZ(10px);
opacity: 0.9;
}
50% {
transform: rotate(180deg) scale(1.1) translateZ(-5px);
opacity: 0.7;
}
75% {
transform: rotate(270deg) scale(1.4) translateZ(15px);
opacity: 1;
}
}
/* 移动端粒子效果优化 */
@media (max-width: 768px) {
.pet-container::before,
.pet-container::after {
animation-duration: 30s;
opacity: 0.3;
}
.pet-icon-3d::before,
.pet-icon-3d::after {
animation-duration: 12s;
opacity: 0.4;
}
.pet-icon-3d:hover::before,
.pet-icon-3d:hover::after {
animation-duration: 8s;
opacity: 0.6;
}
}
/* 3D场景背景系统 */
.scene-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
perspective: 1200px;
transform-style: preserve-3d;
overflow: hidden;
}
.scene-layer {
position: absolute;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
transform-style: preserve-3d;
}
/* 远景层 - 星空背景 */
.scene-background .layer-far {
background:
radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
radial-gradient(2px 2px at 80% 60%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
animation: farLayerFloat 60s ease-in-out infinite;
transform: translateZ(-500px) scale(2);
opacity: 0.6;
}
/* 中景层 - 星云 */
.scene-background .layer-mid {
background:
radial-gradient(ellipse 400px 200px at 30% 40%, rgba(138, 43, 226, 0.3) 0%, transparent 70%),
radial-gradient(ellipse 300px 150px at 70% 60%, rgba(75, 0, 130, 0.25) 0%, transparent 70%),
radial-gradient(ellipse 350px 180px at 50% 30%, rgba(25, 25, 112, 0.2) 0%, transparent 70%);
animation: midLayerFloat 45s ease-in-out infinite reverse;
transform: translateZ(-300px) scale(1.5);
opacity: 0.7;
}
/* 近景层 - 光效 */
.scene-background .layer-near {
background:
radial-gradient(circle 200px at 20% 20%, rgba(0, 191, 255, 0.2) 0%, transparent 70%),
radial-gradient(circle 150px at 80% 80%, rgba(255, 20, 147, 0.15) 0%, transparent 70%),
radial-gradient(circle 250px at 60% 40%, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
animation: nearLayerFloat 30s ease-in-out infinite;
transform: translateZ(-100px) scale(1.2);
opacity: 0.8;
}
/* 3D场景动画关键帧 */
@keyframes farLayerFloat {
0%, 100% {
transform: translateZ(-500px) scale(2) rotateY(0deg);
opacity: 0.6;
}
33% {
transform: translateZ(-520px) scale(2.1) rotateY(120deg);
opacity: 0.8;
}
66% {
transform: translateZ(-480px) scale(1.9) rotateY(240deg);
opacity: 0.4;
}
}
@keyframes midLayerFloat {
0%, 100% {
transform: translateZ(-300px) scale(1.5) rotateX(0deg) rotateY(0deg);
opacity: 0.7;
}
25% {
transform: translateZ(-320px) scale(1.6) rotateX(5deg) rotateY(90deg);
opacity: 0.9;
}
50% {
transform: translateZ(-280px) scale(1.4) rotateX(-3deg) rotateY(180deg);
opacity: 0.6;
}
75% {
transform: translateZ(-310px) scale(1.55) rotateX(8deg) rotateY(270deg);
opacity: 0.8;
}
}
@keyframes nearLayerFloat {
0%, 100% {
transform: translateZ(-100px) scale(1.2) rotateZ(0deg);
opacity: 0.8;
}
50% {
transform: translateZ(-120px) scale(1.3) rotateZ(180deg);
opacity: 1;
}
}
/* 等级对应的场景主题 */
.scene-theme-baby {
background: linear-gradient(135deg,
rgba(255, 182, 193, 0.3) 0%,
rgba(255, 192, 203, 0.2) 50%,
rgba(176, 224, 230, 0.3) 100%);
}
.scene-theme-teen {
background: linear-gradient(135deg,
rgba(144, 238, 144, 0.3) 0%,
rgba(152, 251, 152, 0.2) 50%,
rgba(173, 216, 230, 0.3) 100%);
}
.scene-theme-adolescent {
background: linear-gradient(135deg,
rgba(255, 165, 0, 0.3) 0%,
rgba(255, 215, 0, 0.2) 50%,
rgba(255, 182, 193, 0.3) 100%);
}
.scene-theme-young {
background: linear-gradient(135deg,
rgba(255, 140, 0, 0.3) 0%,
rgba(255, 69, 0, 0.2) 50%,
rgba(255, 215, 0, 0.3) 100%);
}
.scene-theme-adult {
background: linear-gradient(135deg,
rgba(25, 25, 112, 0.3) 0%,
rgba(72, 61, 139, 0.2) 50%,
rgba(138, 43, 226, 0.3) 100%);
}
.scene-theme-elder {
background: linear-gradient(135deg,
rgba(75, 0, 130, 0.4) 0%,
rgba(138, 43, 226, 0.3) 50%,
rgba(25, 25, 112, 0.3) 100%);
}
.scene-theme-legendary {
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.4) 0%,
rgba(255, 140, 0, 0.3) 50%,
rgba(255, 165, 0, 0.3) 100%);
animation: legendaryGlow 4s ease-in-out infinite;
}
.scene-theme-mythical {
background: linear-gradient(135deg,
rgba(255, 20, 147, 0.4) 0%,
rgba(138, 43, 226, 0.4) 50%,
rgba(75, 0, 130, 0.3) 100%);
animation: mythicalShimmer 3s ease-in-out infinite;
}
.scene-theme-cosmic {
background: linear-gradient(135deg,
rgba(75, 0, 130, 0.3) 0%,
rgba(25, 25, 112, 0.4) 50%,
rgba(0, 0, 0, 0.5) 100%);
animation: cosmicPulse 5s ease-in-out infinite;
}
.scene-theme-chaotic {
background: linear-gradient(135deg,
rgba(255, 0, 255, 0.4) 0%,
rgba(255, 0, 0, 0.3) 50%,
rgba(0, 255, 255, 0.3) 100%);
animation: chaoticFlicker 2s ease-in-out infinite;
}
/* 特殊场景动画 */
@keyframes mythicalShimmer {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes cosmicPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
@keyframes chaoticFlicker {
0%, 90%, 100% {
opacity: 1;
filter: hue-rotate(0deg);
}
95% {
opacity: 0.7;
filter: hue-rotate(90deg);
}
}
/* 场景切换动画 */
.scene-transition {
transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.scene-fade-in {
animation: sceneFadeIn 1s ease-out;
}
.scene-fade-out {
animation: sceneFadeOut 1s ease-in;
}
@keyframes sceneFadeIn {
from {
opacity: 0;
transform: translateZ(-50px) scale(0.95);
}
to {
opacity: 1;
transform: translateZ(0) scale(1);
}
}
@keyframes sceneFadeOut {
from {
opacity: 1;
transform: translateZ(0) scale(1);
}
to {
opacity: 0;
transform: translateZ(50px) scale(1.05);
}
}
/* 移动端场景优化 */
@media (max-width: 768px) {
.scene-background {
perspective: 800px;
}
.scene-background .layer-far {
animation-duration: 80s;
opacity: 0.4;
}
.scene-background .layer-mid {
animation-duration: 60s;
opacity: 0.5;
}
.scene-background .layer-near {
animation-duration: 40s;
opacity: 0.6;
}
}
.modal-body {
padding: 20px;
}
/* 全屏弹窗样式 */
.fullscreen-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
}
.fullscreen-modal .modal-content.fullscreen {
width: 100%;
max-width: 1600px;
height: 100%;
border-radius: 0;
box-shadow: none;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
flex-direction: column;
margin: 0 auto;
}
.fullscreen-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: white;
border-bottom: 2px solid var(--primary-dark);
}
.pet-center-title {
font-size: 2.8em;
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
font-weight: bold;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin: 0;
color: var(--primary-color);
}
.fullscreen-modal .close-btn {
background: none;
border: none;
color: white;
font-size: 2.5em;
cursor: pointer;
padding: 0;
margin: 0;
line-height: 1;
transition: transform 0.3s;
}
.fullscreen-modal .close-btn:hover {
transform: scale(1.2);
}
.fullscreen-modal .modal-body {
flex: 1;
padding: 40px;
overflow-y: auto;
}
/* 宠物卡片网格样式 */
.pet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
margin-top: 30px;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
/* 宠物领养中心样式 */
.pet-center-title {
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
font-size: 2.8em;
color: var(--primary-color);
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin: 0;
padding: 15px 0;
}
/* 核心限制视觉提示 */
.adoption-limit-hint {
background-color: var(--accent-light);
border: 2px solid var(--accent-color);
border-radius: 20px;
padding: 14px 20px;
margin: 18px auto;
text-align: center;
font-weight: 600;
color: var(--primary-dark);
font-size: 1.1em;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
max-width: 600px;
position: relative;
}
.adoption-limit-hint::before {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--accent-color);
}
/* 宠物卡片样式 — 班宠乐园 v2 风格 */
.pet-card {
background: #fff;
border-radius: 18px;
padding: 0;
text-align: left;
box-shadow: 0 3px 14px rgba(0,0,0,0.06);
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease, border-color 0.25s ease;
position: relative;
overflow: hidden;
min-height: auto;
display: flex;
flex-direction: column;
border: 1.5px solid transparent;
animation: fadeIn 0.3s ease-out;
}
.pet-card:nth-child(even) {
background: #fff;
}
.pet-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border-color: rgba(140, 100, 220, 0.25);
}
/* ============ 稀有度系统样式 ============ */
/* 稀有度筛选栏 */
.pet-search-input {
width: 100%;
max-width: 320px;
padding: 9px 18px;
border-radius: 24px;
border: 2px solid #e0e0e0;
font-size: 0.9em;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
background: #fafafa;
}
.pet-search-input:focus {
border-color: var(--primary-color);
}
.rarity-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
margin: 20px auto;
max-width: 800px;
padding: 0 15px;
}
.rarity-filter-btn {
padding: 7px 18px;
border-radius: 22px;
border: 2px solid transparent;
cursor: pointer;
font-size: 0.88em;
font-weight: 600;
transition: all 0.25s ease;
background: var(--bg-secondary);
color: var(--text-secondary);
white-space: nowrap;
letter-spacing: 0.3px;
}
.rarity-filter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.rarity-filter-btn.active {
color: white;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.rarity-filter-btn.all.active { background: linear-gradient(135deg, #667eea, #764ba2); border-color: #667eea; }
.rarity-filter-btn.common { border-color: #a0a0a0; color: #666; }
.rarity-filter-btn.common.active { background: linear-gradient(135deg, #a0a0a0, #888); border-color: #a0a0a0; color: white; }
.rarity-filter-btn.uncommon { border-color: #4caf50; color: #388e3c; }
.rarity-filter-btn.uncommon.active { background: linear-gradient(135deg, #66bb6a, #43a047); border-color: #4caf50; color: white; }
.rarity-filter-btn.rare { border-color: #2196f3; color: #1976d2; }
.rarity-filter-btn.rare.active { background: linear-gradient(135deg, #42a5f5, #1e88e5); border-color: #2196f3; color: white; }
.rarity-filter-btn.epic { border-color: #9c27b0; color: #7b1fa2; }
.rarity-filter-btn.epic.active { background: linear-gradient(135deg, #ab47bc, #8e24aa); border-color: #9c27b0; color: white; }
.rarity-filter-btn.legendary { border-color: #f9a825; color: #f57f17; }
.rarity-filter-btn.legendary.active { background: linear-gradient(135deg, #fbc02d, #f9a825); border-color: #f9a825; color: #5d4037; }
.filter-count {
font-size: 0.85em;
color: var(--text-tertiary);
margin-left: 10px;
}
/* 稀有度徽章 */
.rarity-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 3px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
color: white;
z-index: 3;
letter-spacing: 0.5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.18);
background: rgba(0,0,0,0.50);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.rarity-common { background: linear-gradient(135deg, #b0b0b0, #909090); }
.rarity-uncommon { background: linear-gradient(135deg, #66bb6a, #43a047); }
.rarity-rare { background: linear-gradient(135deg, #42a5f5, #1e88e5); }
.rarity-epic { background: linear-gradient(135deg, #ab47bc, #7b1fa2); }
.rarity-legendary { background: linear-gradient(135deg, #fbc02d, #f57f17); animation: legendaryGlow 2s ease-in-out infinite; }
@keyframes legendaryGlow {
0%, 100% { box-shadow: 0 2px 8px rgba(249, 168, 37, 0.4); }
50% { box-shadow: 0 4px 20px rgba(249, 168, 37, 0.8); }
}
/* 宠物图片容器 — 16:9 比例矩形 */
.pet-card-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
margin: 0;
border-radius: 16px 16px 0 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #f5f0ff 0%, #ede4f8 50%, #e0d4f0 100%);
}
.pet-card-image-wrap.common { background: linear-gradient(135deg, #f5f5f5, #e0e0e0); }
.pet-card-image-wrap.uncommon { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.pet-card-image-wrap.rare { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
.pet-card-image-wrap.epic { background: linear-gradient(135deg, #f3e5f5, #e1bee7); }
.pet-card-image-wrap.legendary {
background: linear-gradient(135deg, #fff8e1, #ffe082);
animation: legendaryBgGlow 3s ease-in-out infinite;
}
@keyframes legendaryBgGlow {
0%, 100% { box-shadow: inset 0 0 10px rgba(249,168,37,0.3); }
50% { box-shadow: inset 0 0 25px rgba(249,168,37,0.6); }
}
.pet-card-image-wrap .pet-adopt-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.pet-card:hover .pet-card-image-wrap .pet-adopt-image {
transform: scale(1.03);
}
.pet-card-image-wrap .pet-adopt-fallback {
font-size: 4em;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 进化阶段预览 */
.evolution-preview-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
white-space: nowrap;
letter-spacing: 0.3px;
z-index: 3;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* 宠物卡片 - 稀有度顶部色条 */
.pet-card.rarity-common { border-top: 3px solid #d0d0d0; }
.pet-card.rarity-uncommon { border-top: 3px solid #81c784; }
.pet-card.rarity-rare { border-top: 3px solid #64b5f6; }
.pet-card.rarity-epic { border-top: 3px solid #ce93d8; }
.pet-card.rarity-legendary {
border-top: 3px solid #fbc02d;
box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 16px rgba(249,168,37,0.15);
}
.pet-card.rarity-legendary:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 24px rgba(249,168,37,0.25);
}
/* 领养按钮 — 覆盖在图片区域上，半透明渐变 */
.adopt-btn.rarity-common { background: linear-gradient(135deg, rgba(120,120,120,0.75), rgba(90,90,90,0.75)); }
.adopt-btn.rarity-uncommon { background: linear-gradient(135deg, rgba(76,175,80,0.75), rgba(56,142,60,0.75)); }
.adopt-btn.rarity-rare { background: linear-gradient(135deg, rgba(33,150,243,0.75), rgba(25,118,210,0.75)); }
.adopt-btn.rarity-epic { background: linear-gradient(135deg, rgba(156,39,176,0.75), rgba(106,27,154,0.75)); }
.adopt-btn.rarity-legendary {
background: linear-gradient(135deg, rgba(251,192,45,0.85), rgba(249,168,37,0.85));
color: #5d4037;
}
.adopt-btn.rarity-common:hover { background: linear-gradient(135deg, rgba(140,140,140,0.85), rgba(110,110,110,0.85)); }
.adopt-btn.rarity-uncommon:hover { background: linear-gradient(135deg, rgba(102,187,106,0.85), rgba(65,160,67,0.85)); }
.adopt-btn.rarity-rare:hover { background: linear-gradient(135deg, rgba(66,165,245,0.85), rgba(30,136,229,0.85)); }
.adopt-btn.rarity-epic:hover { background: linear-gradient(135deg, rgba(171,71,188,0.85), rgba(123,31,162,0.85)); }
.adopt-btn.rarity-legendary:hover { background: linear-gradient(135deg, rgba(255,214,0,0.9), rgba(251,192,45,0.9)); }
/* 无匹配结果提示 */
.no-filter-match {
grid-column: 1 / -1;
text-align: center;
padding: 50px 20px;
color: var(--text-tertiary);
font-size: 1.1em;
}
/* 宠物模态框标签样式 */
.pet-modal-tabs {
display: flex;
gap: 10px;
margin: 20px 0;
flex-wrap: wrap;
}
.tab-btn {
padding: 10px 20px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9em;
}
.tab-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.tab-btn.active {
background: var(--accent-color);
box-shadow: var(--shadow-md);
}
/* 宠物模态框标签内容样式 */
.pet-modal-tab-content {
display: none;
padding: 20px;
background: var(--bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.pet-modal-tab-content.active {
display: block;
}
/* 技能系统样式 */
.pet-skills-section {
margin-bottom: 25px;
}
.pet-skills-section h5 {
margin-bottom: 15px;
color: var(--primary-color);
}
.pet-skills-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.pet-skill-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: var(--bg-secondary);
padding: 15px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.skill-info strong {
display: block;
margin-bottom: 5px;
color: var(--primary-color);
}
.skill-info p {
margin: 5px 0;
font-size: 0.9em;
color: var(--text-secondary);
}
/* 进化系统样式 */
.evolution-forms {
display: flex;
flex-direction: column;
gap: 15px;
}
.evolution-form-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: var(--bg-secondary);
padding: 15px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
opacity: 0.7;
}
.evolution-form-item.can-evolve {
opacity: 1;
border-left: 4px solid var(--secondary-color);
}
.evolution-info strong {
display: block;
margin-bottom: 5px;
color: var(--primary-color);
}
.evolution-info p {
margin: 5px 0;
font-size: 0.9em;
color: var(--text-secondary);
}
/* 装备系统样式 */
.pet-equipment-section {
margin-bottom: 25px;
}
.pet-equipment-section h5 {
margin-bottom: 15px;
color: var(--primary-color);
}
.equipment-slots {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.equipment-slot {
background: var(--bg-secondary);
padding: 15px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.equipment-slot h6 {
margin-bottom: 10px;
color: var(--primary-color);
}
.equipped-item {
margin-top: 10px;
}
.equipped-item strong {
display: block;
margin-bottom: 5px;
}
.equipped-item p {
margin: 5px 0;
font-size: 0.9em;
color: var(--text-secondary);
}
.equipment-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.equipment-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: var(--bg-secondary);
padding: 15px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.equipment-info strong {
display: block;
margin-bottom: 5px;
color: var(--primary-color);
}
.equipment-info p {
margin: 5px 0;
font-size: 0.9em;
color: var(--text-secondary);
}
/* 天赋系统样式 */
.pet-talents-section {
margin-bottom: 25px;
}
.pet-talents-section h5 {
margin-bottom: 15px;
color: var(--primary-color);
}
.pet-talents-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.pet-talent-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: var(--bg-secondary);
padding: 15px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.talent-info strong {
display: block;
margin-bottom: 5px;
color: var(--primary-color);
}
.talent-info p {
margin: 5px 0;
font-size: 0.9em;
color: var(--text-secondary);
}
/* 通用按钮样式 */
.btn-small {
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85em;
margin-top: 10px;
}
.btn-small:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
/* 状态标签样式 */
.maxed-tag {
background: var(--secondary-color);
color: white;
padding: 5px 10px;
border-radius: var(--radius-sm);
font-size: 0.85em;
margin-top: 10px;
}
.locked {
background: var(--text-light);
color: white;
padding: 5px 10px;
border-radius: var(--radius-sm);
font-size: 0.85em;
margin-top: 10px;
}
/* 宠物图标 - 新学期主题美化 */
.pet-icon {
font-size: 50px;
margin-bottom: 10px;
display: block;
animation: pet-float 3s ease-in-out infinite, pet-glow 2s ease-in-out infinite alternate;
cursor: pointer;
filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
transition: all 0.3s ease;
}
/* 宠物浮动动画 */
@keyframes pet-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-5px) rotate(2deg); }
50% { transform: translateY(-8px) rotate(0deg); }
75% { transform: translateY(-5px) rotate(-2deg); }
}
/* 宠物发光动画 - 科技蓝色 */
@keyframes pet-glow {
0% { filter: drop-shadow(0 4px 8px rgba(0, 212, 255, 0.3)); }
100% { filter: drop-shadow(0 6px 16px rgba(0, 153, 255, 0.5)) drop-shadow(0 0 20px rgba(0, 255, 204, 0.4)); }
}
.pet-icon:hover {
animation: pet-bounce 0.6s ease infinite;
filter: drop-shadow(0 8px 20px rgba(0, 153, 255, 0.6));
transform: scale(1.15);
}
@keyframes pet-bounce {
0%, 100% { transform: scale(1.15) translateY(0); }
50% { transform: scale(1.15) translateY(-10px); }
}
/* 宠物名称 — 加粗加大 */
.pet-name {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
margin: 0;
padding: 12px 14px 0;
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
letter-spacing: 0.5px;
}
/* 宠物性格 — pill 标签 */
.pet-personality {
font-size: 11px;
color: #1565C0;
background: #E3F2FD;
margin: 4px 0 0;
padding: 3px 10px;
border-radius: 12px;
display: inline-block;
font-weight: 600;
white-space: nowrap;
text-align: left;
line-height: 1.5;
border: 1px solid #90CAF9;
}
.personality-label {
display: none;
}
.personality-value {
font-style: normal;
color: inherit;
}
/* 宠物细节 — pill 标签 */
.pet-details {
font-size: 11px;
color: #2E7D32;
background: #E8F5E9;
margin: 4px 0 6px;
padding: 3px 10px;
border-radius: 12px;
display: inline-block;
font-weight: 600;
white-space: nowrap;
text-align: left;
line-height: 1.4;
}
.details-label {
display: none;
}
.details-value {
font-family: inherit;
color: inherit;
}
/* 卡片信息包装容器 */
.pet-card .pet-name,
.pet-card .pet-personality,
.pet-card .pet-details {
margin-left: 12px;
margin-right: 12px;
}
.pet-card .pet-details {
margin-bottom: 12px;
}
/* 学生选择区域 */
.student-select-section {
margin: 25px 0;
text-align: center;
}
.student-select-section label {
font-size: 1.3em;
margin-right: 15px;
font-weight: bold;
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
color: var(--primary-color);
}
.student-select {
padding: 8px 12px;
font-size: 1em;
border: 2px solid var(--primary-color);
border-radius: 5px;
background-color: white;
color: var(--text-primary);
cursor: pointer;
min-width: 200px;
}
.student-select:focus {
outline: none;
border-color: var(--primary-dark);
box-shadow: 0 0 5px var(--primary-color);
}
/* 领养按钮 — 覆盖在图片区域中间 */
.adopt-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #fff;
border: 1.5px solid rgba(255,255,255,0.5);
border-radius: 22px;
padding: 8px 22px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
z-index: 4;
font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;
text-shadow: 0 1px 3px rgba(0,0,0,0.35);
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
white-space: nowrap;
letter-spacing: 0.5px;
opacity: 0.85;
}
.pet-card:hover .adopt-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.adopt-btn:hover {
background: linear-gradient(135deg, rgba(255,107,53,0.9), rgba(255,152,0,0.9));
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.adopt-btn:disabled {
background: rgba(160,160,160,0.5);
color: #ccc;
cursor: not-allowed;
transform: translate(-50%, -50%) scale(0.9);
box-shadow: none;
}
/* 宠物网格布局 */
.pet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 20px;
}
.pet-grid .pet-name {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
/* 领养状态样式 */
.adoption-status {
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
font-size: 1.2em;
font-weight: bold;
color: var(--text-secondary);
}
/* 未领养宠物区域样式 */
.no-pet-section {
text-align: center;
padding: 24px 16px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,240,220,0.55) 0%, rgba(255,225,190,0.55) 100%);
border: 2px dashed rgba(200,160,100,0.30);
}
.no-pet-section:hover {
background: rgba(255, 220, 180, 0.7);
transform: translateY(-2px);
}
.empty-paw-print {
font-size: 60px;
color: var(--primary-color);
opacity: 0.7;
margin-bottom: 10px;
}
.pet-adopt-hint {
font-size: 1.2em;
color: var(--primary-color);
font-weight: bold;
}
/* Toast提示框样式 */
.toast {
position: fixed;
top: 90px;
right: 20px;
padding: 15px 24px;
border-radius: 8px;
color: white;
font-size: 16px;
font-family: 'Comic Neue', Arial, sans-serif;
z-index: 10001;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-20px);
max-width: 400px;
white-space: pre-line;
line-height: 1.6;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
pointer-events: none;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast.success {
background-color: var(--secondary-color);
}
.toast.error {
background-color: #d9534f;
}
.toast.info {
background-color: var(--primary-light);
}
/* 主标题栏样式 */
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
z-index: 9999;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
box-sizing: border-box;
border-bottom: 3px solid var(--accent-color);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.header-title {
font-size: 1.8em;
font-weight: bold;
background: linear-gradient(45deg, #fff, var(--primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
font-family: 'Comic Neue', Arial, sans-serif;
display: flex;
align-items: center;
gap: 15px;
}
.logo {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.header-controls {
display: flex;
align-items: center;
gap: 20px;
}
.mode-selector {
display: flex;
gap: 8px;
}
.mode-btn {
padding: 8px 15px;
border: none;
border-radius: 15px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: all 0.3s ease;
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.mode-btn.active {
background: linear-gradient(45deg, var(--accent-color), var(--accent-dark));
color: var(--text-primary);
box-shadow: 0 3px 10px rgba(255, 212, 59, 0.4);
}
.mode-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.mode-controls {
display: flex;
gap: 8px;
}
.control-btn {
padding: 8px 12px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
background: #4dabf7;
color: white;
font-size: 16px;
}
.control-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(77, 171, 247, 0.4);
}
.mode-status {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.timer {
font-size: 16px;
font-weight: bold;
color: var(--primary-color);
font-family: 'Comic Neue', Arial, sans-serif;
}
.decibel-display {
font-size: 14px;
color: var(--text-secondary);
font-family: 'Comic Neue', Arial, sans-serif;
}
.admin-btn {
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
color: white;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
font-family: 'Comic Neue', Arial, sans-serif;
}
.admin-btn:hover {
background: rgba(255,255,255,0.3);
}
.profile-container {
display: flex;
align-items: center;
gap: 10px;
margin-right: 20px;
}
.profile-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: var(--primary-color);
overflow: hidden;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.teacher-name {
color: white;
font-weight: bold;
font-family: 'Comic Neue', Arial, sans-serif;
}
/* 全屏显示按钮样式 */
.fullscreen-btn {
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
color: white;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
font-family: 'Comic Neue', Arial, sans-serif;
}
.fullscreen-btn:hover {
background: rgba(255,255,255,0.3);
}
/* 管理员下拉菜单样式 */
.admin-dropdown {
position: absolute;
top: 70px;
right: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
padding: 15px;
width: 280px;
z-index: 10000;
display: none;
max-height: 80vh;
overflow-y: auto;
}
.admin-dropdown.show {
display: block;
}
.admin-option {
margin-bottom: 10px;
}
.admin-option label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: var(--primary-color);
font-family: 'Comic Neue', Arial, sans-serif;
}
.admin-option input, .admin-option select {
width: 100%;
padding: 8px;
border: 1px solid var(--primary-light);
border-radius: 5px;
font-family: 'Comic Neue', Arial, sans-serif;
}
.admin-option button {
width: 100%;
padding: 8px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Comic Neue', Arial, sans-serif;
}
/* 新增：主题设置容器 */
.theme-settings-container {
display: flex;
flex-direction: column;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
border: 1px solid var(--primary-light);
}
.theme-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.section-title {
font-weight: bold;
color: var(--primary-dark);
font-size: 14px;
margin-bottom: 2px;
}
/* 新增：主题颜色预览 */
.theme-preview {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
}
.theme-color {
width: 25px;
height: 25px;
border-radius: 5px;
cursor: pointer;
border: 2px solid transparent;
}
.theme-color.active {
border-color: var(--text-primary);
transform: scale(1.1);
}
/* 新增：背景预览 */
.background-preview {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
}
.background-option {
width: 50px;
height: 30px;
border-radius: 5px;
cursor: pointer;
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7em;
overflow: hidden;
}
.background-option.active {
border-color: var(--text-primary);
transform: scale(1.05);
}
/* 字母定位功能样式 */
.letter-filter {
position: relative;
}
.letter-filter-btn {
background: #4dabf7;
color: white;
border: none;
border-radius: 20px;
padding: 8px 15px;
cursor: pointer;
font-family: 'Comic Neue', Arial, sans-serif;
}
.letter-filter-panel {
position: absolute;
top: 40px;
left: 0;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
padding: 10px;
display: none;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
z-index: 1000;
width: 200px;
}
.letter-filter-panel.show {
display: grid;
}
.letter-btn {
background: #e6f7ff;
border: 1px solid #d1e9ff;
border-radius: 5px;
padding: 5px;
cursor: pointer;
text-align: center;
font-family: 'Comic Neue', Arial, sans-serif;
}
.letter-btn.active {
background: #4dabf7;
color: white;
}
/* 调整主体内容位置，避免被固定标题栏遮挡 */
.main-container {
margin-top: 90px;
}
/* 其他样式保持不变 */
/* ... 原有样式代码 ... */
/* 整体背景调整为淡蓝色渐变 */
body {
font-family: 'Comic Neue', Arial, sans-serif;
margin: 20px 0 20px 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* 主内容区域使用半透明背景，让body背景能够显示 */
.main-content {
flex: 4;
min-width: 800px;
background: rgba(255, 255, 255, 0.9);
padding: 25px;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 2px solid var(--accent-color);
}
/* 表格和卡片使用协调的蓝色调 */
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid var(--primary-light);
padding: 12px;
text-align: center;
background: rgba(255, 255, 255, 0.8);
}
th {
background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
cursor: pointer;
transition: background 0.3s;
}
th:hover {
background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
}
/* 导航栏模块颜色区分 */
.nav-module.class-management h3 {
color: var(--pink-color);
border-bottom: 2px dashed var(--pink-light);
}
.nav-module.student-management h3 {
color: var(--green-color);
border-bottom: 2px dashed var(--green-light);
}
.nav-module.score-management h3 {
color: var(--accent-dark);
border-bottom: 2px dashed var(--accent-light);
}
.nav-module.record-management h3 {
color: var(--primary-dark);
border-bottom: 2px dashed var(--primary-light);
}
/* 班级管理 - 粉色系按钮 */
.nav-module.class-management .nav-btn {
background: linear-gradient(45deg, var(--pink-color), var(--pink-light));
}
.nav-module.class-management .nav-btn:hover {
background: linear-gradient(45deg, var(--pink-light), var(--pink-color));
}
/* 学生管理 - 绿色系按钮 */
.nav-module.student-management .nav-btn {
background: linear-gradient(45deg, var(--green-color), var(--green-light));
}
.nav-module.student-management .nav-btn:hover {
background: linear-gradient(45deg, var(--green-light), var(--green-color));
}
/* 积分管理和宠物管理 - 橙色系按钮 */
.nav-module.score-management .nav-btn,
.nav-module.pet-management .nav-btn {
background: linear-gradient(45deg, var(--accent-dark), var(--accent-color));
}
.nav-module.score-management .nav-btn:hover,
.nav-module.pet-management .nav-btn:hover {
background: linear-gradient(45deg, var(--accent-color), var(--accent-dark));
}
/* 记录管理 - 紫色系按钮 */
.nav-module.record-management .nav-btn {
background: linear-gradient(45deg, var(--primary-dark), var(--primary-light));
}
.nav-module.record-management .nav-btn:hover {
background: linear-gradient(45deg, var(--primary-light), var(--primary-dark));
}
.hall-introduction {
background: linear-gradient(135deg, #fff8e1, #fff3c4);
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
border: 2px solid #ffb74d;
box-shadow: 0 4px 10px rgba(255, 183, 77, 0.2);
}
/* 导师候选人选择区域样式 */
/* 下拉菜单美化样式 */
/* 为下拉菜单添加自定义箭头 */
/* 下拉选项美化 */
/* 选中信息显示样式 */
/* 学生选择器样式 */
/* 按钮样式美化 */
/* 为导师选择区域添加装饰元素 */
.selected-student-info {
margin-left: 15px;
font-size: 14px;
padding: 8px 12px;
border-radius: 6px;
background: #e8f5e8;
border: 2px solid #4caf50;
display: inline-block;
min-width: 200px;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.1);
transition: all 0.3s ease;
}
.selected-student-info:hover {
background: #f0f8f0;
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
}
.no-masters {
text-align: center;
padding: 40px;
color: #999;
font-style: italic;
background: #f5f5f5;
border-radius: 10px;
border: 2px dashed #ddd;
}
.hall-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.stat-item {
background: white;
padding: 15px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border: 2px solid #ffd54f;
font-weight: bold;
color: #e67700;
}
.master-recommendations, .students-seeking-masters {
margin-bottom: 30px;
}
.masters-grid, .students-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 15px;
}
.master-card, .student-card {
background: linear-gradient(145deg, #fafcfd 0%, #f3f6f9 50%, #fafcfd 100%);
border-radius: 14px;
padding: 15px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
border: 1px solid #e8ecf0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
z-index: 2;
/* Phase 2 性能增强：离屏卡片跳过渲染（学生多/低配设备防卡顿），contain-intrinsic-size 防滚动跳动 */
content-visibility: auto;
contain-intrinsic-size: auto 320px;
}
/* 渐变背景动画 */
/* 学生卡片装饰光效 */
.student-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
animation: card-shine 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes card-shine {
0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
}
/* 学生卡片悬浮粒子效果 */
.student-card::after {
content: '⚡';
position: absolute;
top: 10px;
right: 10px;
font-size: 16px;
opacity: 0.25;
animation: particle-float 2.5s ease-in-out infinite, particle-pulse 1.5s ease-in-out infinite alternate;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
}
@keyframes particle-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
@keyframes particle-pulse {
0% { opacity: 0.15; transform: scale(1); }
100% { opacity: 0.4; transform: scale(1.2); }
}
/* 学生卡片悬浮粒子效果 - 科技蓝色 */
/* 学生卡片 - 无多余装饰 */
/* 导师卡片标题栏特殊样式 - 紧凑版 */
/* 导师头像尊贵样式 - 紧凑版 */
/* 导师称号样式 */
/* 导师统计信息尊贵样式 - 紧凑版 */
/* 导师操作按钮尊贵样式 - 紧凑版 */
/* 动画效果 */
@keyframes crownFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-3px) rotate(5deg);
}
}
/* 导师姓名尊贵样式 */
/* 统计图标样式 */
/* 按钮图标样式 */
/* 高贵装饰元素 */
/* 高级导师特殊样式（积分超过1000的导师） */
/* 传奇导师特殊样式（积分超过2000的导师） */
/* 至尊导师特殊样式（积分超过5000的导师） */
.master-card:hover, .student-card:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #d0d8e0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 卡片发光动画 */
@keyframes card-glow {
0% { filter: brightness(1); }
100% { filter: brightness(1.1); }
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.card-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(45deg, #ffd54f, #ffb74d);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-right: 15px;
}
/* 有头像图片的样式 */
/* 头像占位符样式 */
/* 男性头像 - 蓝色系 */
/* 女性头像 - 粉色/紫色系 */
.card-info h4 {
margin: 0 0 5px 0;
color: #e67700;
font-size: 18px;
}
.card-info p {
margin: 0;
color: #666;
font-size: 14px;
}
.card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 15px 0;
}
.stat-item-small {
text-align: center;
padding: 8px;
background: #fff8e1;
border-radius: 8px;
font-size: 12px;
color: #e67700;
}
.card-actions {
display: flex;
gap: 10px;
}
.btn-apply, .btn-view {
flex: 1;
padding: 10px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-apply {
background: linear-gradient(45deg, #e67700, #ffd54f);
color: white;
}
.btn-apply:hover {
background: linear-gradient(45deg, #ffd54f, #e67700);
}
.btn-view {
background: #f5f5f5;
color: #e67700;
border: 2px solid #ffd54f;
}
.btn-view:hover {
background: #ffd54f;
color: white;
}
.matching-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 20px;
}
.student-application, .master-selection {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border: 2px solid #ffd54f;
}
.matching-suggestions {
grid-column: 1 / -1;
background: white;
border-radius: 15px;
padding: 25px;
margin-top: 20px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border: 2px solid #ffd54f;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #e67700;
}
.form-group select, .form-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #ffd54f;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.form-group select:focus, .form-group textarea:focus {
outline: none;
border-color: #e67700;
}
.submit-btn {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #e67700, #ffd54f);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: linear-gradient(45deg, #ffd54f, #e67700);
transform: translateY(-2px);
}
.applicant-item {
background: #fff8e1;
border: 2px solid #ffd54f;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
}
.applicant-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.applicant-name {
font-weight: bold;
color: #e67700;
}
.applicant-reason {
color: #666;
font-size: 14px;
margin-bottom: 10px;
}
.applicant-actions {
display: flex;
gap: 10px;
}
.btn-accept, .btn-reject {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
}
.btn-accept {
background: #4caf50;
color: white;
}
.btn-reject {
background: #f44336;
color: white;
}
.suggestion-item {
background: #e8f5e8;
border: 2px solid #4caf50;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.suggestion-content {
flex: 1;
}
.suggestion-score {
background: #4caf50;
color: white;
padding: 8px 12px;
border-radius: 20px;
font-weight: bold;
margin-left: 15px;
}
.status-active {
background: #e8f5e8;
color: #4caf50;
}
.status-completed {
background: #e3f2fd;
color: #2196f3;
}
.status-pending {
background: #fff3e0;
color: #ff9800;
}
.detail-item {
text-align: center;
padding: 10px;
background: #fff8e1;
border-radius: 8px;
}
.growth-overview {
margin-bottom: 30px;
}
.overview-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.stat-card {
background: white;
border: 2px solid #ffd54f;
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.stat-card h4 {
margin: 0 0 15px 0;
color: #e67700;
font-size: 16px;
}
.stat-value {
font-size: 32px;
font-weight: bold;
color: #e67700;
margin-bottom: 10px;
}
.stat-change {
padding: 5px 10px;
border-radius: 15px;
font-size: 14px;
font-weight: bold;
}
.stat-change.positive {
background: #e8f5e8;
color: #4caf50;
}
.stat-change.negative {
background: #ffebee;
color: #f44336;
}
.stat-change.neutral {
background: #f5f5f5;
color: #666;
}
.growth-timeline {
background: white;
border: 2px solid #ffd54f;
border-radius: 15px;
padding: 25px;
max-height: 400px;
overflow-y: auto;
}
.timeline-item {
border-left: 4px solid #ffd54f;
padding-left: 20px;
margin-bottom: 20px;
position: relative;
}
.timeline-item::before {
content: '';
position: absolute;
left: -8px;
top: 5px;
width: 12px;
height: 12px;
background: #e67700;
border-radius: 50%;
}
.timeline-date {
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
.timeline-content {
color: #333;
font-size: 14px;
}
.achievements-categories {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.achievements-categories button {
padding: 10px 20px;
border: 2px solid #ffd54f;
background: white;
color: #e67700;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.achievements-categories button.active, .achievements-categories button:hover {
background: #ffd54f;
color: white;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.achievement-item {
background: white;
border: 2px solid #ffd54f;
border-radius: 15px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.achievement-item:hover {
transform: translateY(-3px);
}
.achievement-icon {
font-size: 48px;
margin-bottom: 15px;
}
.achievement-title {
font-weight: bold;
color: #e67700;
margin-bottom: 10px;
}
.achievement-description {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
.achievement-progress {
background: #f5f5f5;
border-radius: 10px;
height: 8px;
margin-bottom: 10px;
overflow: hidden;
}
.achievement-progress-bar {
background: linear-gradient(45deg, #e67700, #ffd54f);
height: 100%;
border-radius: 10px;
transition: width 0.3s ease;
}
.achievement-status {
font-size: 12px;
font-weight: bold;
}
.status-unlocked {
color: #4caf50;
}
.status-locked {
color: #999;
}
.report-controls {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
}
.time-selector {
display: flex;
align-items: center;
gap: 10px;
}
.time-selector label {
font-weight: bold;
color: #e67700;
}
.time-selector select {
padding: 8px 12px;
border: 2px solid #ffd54f;
border-radius: 8px;
background: white;
}
.generate-btn, .export-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.generate-btn {
background: linear-gradient(45deg, #e67700, #ffd54f);
color: white;
}
.export-btn {
background: #2196f3;
color: white;
}
.generate-btn:hover, .export-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.report-content {
background: white;
border: 2px solid #ffd54f;
border-radius: 15px;
padding: 25px;
min-height: 400px;
}
.report-summary h4 {
color: #e67700;
margin-bottom: 15px;
}
.settings-sections {
display: grid;
gap: 25px;
}
.settings-section {
background: white;
border: 2px solid #ffd54f;
border-radius: 15px;
padding: 25px;
}
.settings-section h4 {
color: #e67700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #ffd54f;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 10px 0;
}
.setting-item label {
color: #333;
font-weight: bold;
}
.setting-item input[type="checkbox"] {
transform: scale(1.2);
}
.setting-item input[type="number"] {
padding: 8px 12px;
border: 2px solid #ffd54f;
border-radius: 8px;
width: 80px;
}
.settings-actions {
display: flex;
gap: 15px;
margin-top: 25px;
}
.save-btn, .reset-btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.save-btn {
background: linear-gradient(45deg, #4caf50, #81c784);
color: white;
}
.reset-btn {
background: #f44336;
color: white;
}
.save-btn:hover, .reset-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 主界面姓名高亮，添加轻微阴影效果 */
.student-name-highlight {
font-weight: bold;
color: #1971c2;
text-shadow: 1px 1px 3px rgba(25, 113, 194, 0.2);
padding: 2px 6px;
border-radius: 4px;
background: rgba(33, 150, 243, 0.1);
cursor: pointer;
}
/* 跑马灯动画效果 */
@keyframes marquee {
0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5); }
50% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6); }
100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5); }
}
/* 排行榜前三名凸显 - 跑马灯效果 */
#topRankings div:nth-child(1) {
background: linear-gradient(145deg, #ffd700, #fffacd);
border: 3px solid #ffc400;
padding: 18px 25px;
box-shadow: 0 6px 15px rgba(255, 215, 0, 0.5);
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
font-family: 'Comic Neue', Arial, sans-serif;
font-weight: bold;
color: #b8860b;
animation: marquee 2s ease-in-out infinite;
}
#topRankings div:nth-child(2) {
background: linear-gradient(145deg, #c0c0c0, #f0f0f0);
border: 3px solid #a8a8a8;
padding: 18px 25px;
box-shadow: 0 6px 15px rgba(192, 192, 192, 0.5);
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
font-family: 'Comic Neue', Arial, sans-serif;
font-weight: bold;
color: #708090;
animation: marquee 2.3s ease-in-out infinite;
}
#topRankings div:nth-child(3) {
background: linear-gradient(145deg, #cd7f32, #ffdead);
border: 3px solid #b87333;
padding: 18px 25px;
box-shadow: 0 6px 15px rgba(205, 127, 50, 0.5);
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
font-family: 'Comic Neue', Arial, sans-serif;
font-weight: bold;
color: #8b4513;
animation: marquee 2.6s ease-in-out infinite;
}
/* 排行榜其他项目样式 */
#topRankings div:nth-child(n+4) {
background: white;
border: 2px solid #e1f0ff;
}
/* 其他样式保持不变 */
.header {
text-align: center;
font-family: 'Comic Neue', Arial, sans-serif;
margin: 0 20px 20px;
font-size: 2.5em;
padding: 18px 15px;
background: linear-gradient(135deg, #20c997, #38d9a9, #12b886);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-bottom: 3px solid rgba(32,201,151,0.3);
backdrop-filter: blur(10px);
text-shadow: 2px 2px 4px rgba(32, 201, 151, 0.2);
box-shadow: 0 4px 20px rgba(32,201,151,0.15);
}
/* 整体布局容器 */
.main-container {
display: flex;
gap: 20px;
width: 100%;
}
/* 左侧导航栏样式 */
.sidebar {
width: 220px;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(12px);
padding: 20px;
border-radius: 20px;
box-shadow: var(--card-shadow);
border: 1.5px solid var(--glass-border);
position: sticky;
top: 90px;
height: fit-content;
max-height: calc(100vh - 110px);
overflow-y: auto;
transition: all 0.3s ease;
}
.nav-module {
margin-bottom: 25px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 240, 220, 0.95) 100%);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.1);
overflow: hidden;
border: 2px solid #FFD700;
}
.nav-module h3 {
font-size: 1.3em;
margin-bottom: 12px;
padding: 15px;
text-align: center;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
margin: 0;
border-bottom: 2px solid transparent;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
font-weight: bold;
}
/* 班级管理 - 粉色系 */
.nav-module.class-management h3 {
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
border-bottom-color: #FF6B6B;
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}
/* 积分管理 - 金色系 */
.nav-module.score-management h3 {
background: linear-gradient(135deg, #FFD700, #FFED4E);
border-bottom-color: #FFD700;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
color: #333;
text-shadow: 0 2px 4px rgba(255,255,255,0.5);
}
/* 学生管理 - 绿色系 */
.nav-module.student-management h3 {
background: linear-gradient(135deg, #4CAF50, #66BB6A);
border-bottom-color: #4CAF50;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
/* 宠物管理 - 蓝色系 */
.nav-module.pet-management h3 {
background: linear-gradient(135deg, #2196F3, #64B5F6);
border-bottom-color: #2196F3;
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}
/* 记录管理 - 橙色系 */
.nav-module.record-management h3 {
background: linear-gradient(135deg, #FF9800, #FFB74D);
border-bottom-color: #FF9800;
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}
/* 悬停效果 */
.nav-module h3:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
/* 粒子效果 */
.nav-module h3::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%
);
background-size: 200% 200%;
animation: nav-marquee 3s linear infinite;
z-index: 0;
}
@keyframes nav-marquee {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
.nav-module h3 span {
position: relative;
z-index: 1;
}
.nav-module h3::after {
content: "▼";
font-size: 0.8em;
transition: transform 0.3s;
}
.nav-module.collapsed h3::after {
transform: rotate(-90deg);
}
.nav-module.collapsed .nav-buttons {
display: none;
}
.nav-btn {
display: block;
width: 100%;
padding: 10px 15px;
margin: 8px 0;
border-radius: 15px;
border: none;
color: white;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
text-align: left;
font-family: 'Comic Neue', Arial, sans-serif;
font-size: 0.95em;
}
.nav-btn:hover {
transform: translateX(2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.nav-btn:active {
transform: translateY(0);
}
/* 导航栏批量导入按钮特殊样式 */
.nav-module.student-management .dropdown-toggle {
background: linear-gradient(45deg, #51cf66, #69db7c) !important;
position: relative;
overflow: hidden;
}
.nav-module.student-management .dropdown-toggle::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.nav-module.student-management .dropdown-toggle:hover::before {
left: 100%;
}
.nav-module.student-management .dropdown-toggle::after {
content: ' ▼';
font-size: 0.8em;
opacity: 0.9;
transition: transform 0.3s ease;
margin-left: 8px;
}
.nav-module.student-management .dropdown-btn:hover .dropdown-toggle::after {
transform: rotate(180deg);
}
.nav-module.student-management .dropdown-menu {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
border: 1px solid rgba(81, 207, 102, 0.2);
backdrop-filter: blur(10px);
}
.nav-module.student-management .dropdown-menu a {
padding: 12px 18px;
color: #333;
border-bottom: 1px solid rgba(81, 207, 102, 0.1);
font-weight: 500;
}
.nav-module.student-management .dropdown-menu a:last-child {
border-bottom: none;
}
.nav-module.student-management .dropdown-menu a:hover {
background: linear-gradient(135deg, #51cf66, #69db7c);
color: white;
transform: translateX(8px);
box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
}
/* 下拉按钮样式 */
.dropdown-btn {
position: relative;
margin: 8px 0;
}
.dropdown-toggle {
width: 100%;
position: relative;
}
.dropdown-toggle::after {
content: ' ▼';
font-size: 0.8em;
opacity: 0.8;
transition: transform 0.3s ease;
}
.dropdown-btn:hover .dropdown-toggle::after {
transform: rotate(180deg);
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
z-index: 1000;
overflow: hidden;
margin-top: 5px;
}
.dropdown-menu.show {
display: block;
}
.dropdown-menu a {
display: block;
padding: 12px 15px;
color: #333;
text-decoration: none;
transition: all 0.3s;
border-bottom: 1px solid #f0f0f0;
}
.dropdown-menu a:last-child {
border-bottom: none;
}
.dropdown-menu a:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateX(5px);
}
.content-area {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
background: linear-gradient(135deg, rgba(240,248,255,0.5) 0%, rgba(245,240,255,0.5) 100%);
backdrop-filter: blur(6px);
border-radius: 20px;
padding: 16px;
}
.rankings {
width: 240px;
flex-shrink: 0;
min-width: 220px;
background: var(--glass-bg);
backdrop-filter: blur(8px);
padding: 20px;
border-radius: 20px;
height: fit-content;
max-height: calc(100vh - 110px);
overflow-y: auto;
position: sticky;
top: 90px;
box-shadow: var(--card-shadow);
border: 1.5px solid var(--glass-border);
font-size: 1.3em; /* 增大整体字体大小 */
transition: all 0.3s ease;
}
.rankings:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.controls {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 1.2em;
}
input {
padding: 8px 12px;
border: 2px solid var(--primary-color);
border-radius: 20px;
transition: all 0.3s;
}
input:focus {
outline: none;
box-shadow: 0 0 8px var(--primary-color);
}
/* 全局按钮美化 */
button {
border-radius: 8px;
transition: all 0.25s ease;
}
button:hover {
transform: translateY(-1px);
}
button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.25);
}
/* 按钮基础样式 */
button {
padding: 8px 16px;
border-radius: 20px;
border: none;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: white;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 0 10px rgba(255, 102, 102, 0.3);
margin: 2px;
position: relative;
overflow: hidden;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* 按钮悬停效果 */
button:hover {
transform: scale(1.08);
box-shadow: 0 5px 15px rgba(0,0,0,0.2), 0 0 20px rgba(255, 102, 102, 0.5);
background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
}
/* 按钮点击效果 */
button:active {
transform: scale(0.95);
box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 0 10px rgba(255, 102, 102, 0.3);
}
/* 按钮点击波纹效果 */
button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
button:active::after {
width: 300px;
height: 300px;
}
.delete-btn { background: linear-gradient(45deg, #ff6b6b, #ff8787) !important; }
.ranking-item {
padding: 18px;
margin: 10px 0;
background: white;
border-radius: 15px;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
border: 2px solid #e1f0ff;
font-size: 1.2em; /* 调整排名项字体大小为合适尺寸 */
font-weight: bold;
font-family: 'Comic Neue', Arial, sans-serif;
color: #1971c2;
}
.star {
color: #ffd700;
text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
tr:hover td {
background: rgba(225, 240, 255, 0.5);
transform: scale(1.02);
transition: all 0.2s;
}
.checkbox-column input {
accent-color: var(--primary-color);
transform: scale(1.3);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
h3 {
text-align: center;
font-size: 1.8em;
}
.random-callout {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
font-weight: bold;
color: #ff4757;
text-shadow: 0 0 20px rgba(255,71,87,0.3);
animation: callout 5s ease-out forwards;
z-index: 1000;
font-family: 'Comic Neue', cursive;
}
@keyframes callout {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.1);
}
15% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.3);
}
30% {
transform: translate(-50%, -50%) scale(0.9);
}
60% {
transform: translate(-50%, -50%) scale(1.1);
}
80% {
transform: translate(-50%, -50%) scale(0.95);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
}
/* 新增样式 */
.ranking-toggle {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.ranking-toggle button {
margin: 0 5px;
padding: 6px 12px;
font-size: 0.9em;
}
.ranking-toggle button.active {
background: linear-gradient(45deg, #339af0, #4dabf7);
box-shadow: 0 0 10px rgba(51, 154, 240, 0.3);
}
/* 新增：排行榜周期切换按钮样式 */
.ranking-period-toggle {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.ranking-period-toggle button {
margin: 0 2px;
padding: 4px 8px;
font-size: 0.8em;
}
.ranking-period-toggle button.active {
background: linear-gradient(45deg, #ff6b6b, #ff8787);
box-shadow: 0 0 8px rgba(255, 107, 107, 0.3);
}
/* 排行榜操作按钮样式 */
.ranking-actions {
display: flex;
margin-bottom: 15px;
justify-content: flex-end;
gap: 10px;
}
.ranking-actions button {
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
transition: background-color 0.3s;
}
.ranking-actions button:hover {
opacity: 0.9;
}
.ranking-actions .delete-btn {
background-color: #ff6b6b;
}
/* 小组卡片样式 - 修改 */
.group-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* 滚动条样式 */
.group-cards::-webkit-scrollbar {
width: 8px;
}
.group-cards::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.group-cards::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.group-cards::-webkit-scrollbar-thumb:hover {
background: #555;
}
.group-card {
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 15px;
padding: 20px;
box-shadow: var(--cute-shadow);
border: 2px solid #d1e9ff;
}
.group-card h4 {
color: #339af0;
margin-top: 0;
text-align: center;
font-size: 1.4em;
}
.group-card .members {
margin: 15px 0;
}
.group-card .member {
padding: 8px;
margin: 5px 0;
background: white;
border-radius: 10px;
display: flex;
justify-content: space-between;
cursor: move;
transition: all 0.3s;
}
.group-card .member.dragging {
opacity: 0.5;
}
.group-card .member.leader {
background: linear-gradient(145deg, #fff3cd, #ffeaa7);
border: 2px solid #ffd43b;
}
.group-card .member-title {
font-size: 0.8em;
margin-left: 5px;
padding: 2px 6px;
border-radius: 4px;
}
.group-card .member-title.leader {
background: #ffd43b;
color: #000;
}
.group-card .member-title.other {
background: #4dabf7;
color: white;
}
.group-card .member .actions {
display: flex;
gap: 5px;
}
.group-card .member .edit-title-btn {
background: #868e96;
padding: 2px 6px;
font-size: 0.7em;
display: none;
}
.group-card .member:hover .edit-title-btn {
display: inline-block;
}
.group-card .total-score {
font-weight: bold;
text-align: center;
margin-top: 10px;
font-size: 1.2em;
color: #339af0;
}
.group-card .actions {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
/* 座位布局样式 - 修改 */
.seating-container {
margin-top: 20px;
}
.seating-grid {
display: grid;
gap: 25px 10px; /* 调整列间距：1-2列、3-4列等紧凑为10px，2-3列、4-5列等宽松为25px */
margin: 20px 0;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
/* 修改：取消列颜色，改为按性别显示 */
.seat {
border-radius: 8px; /* 减小圆角 */
padding: 8px 10px; /* 减小内边距 */
text-align: center;
box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* 添加阴影效果 */
border: 2px solid #d1e9ff;
cursor: move;
transition: all 0.3s;
min-height: 45px; /* 减小最小高度 */
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em; /* 减小字体 */
}
/* 修改：男生座位样式 - 蓝色 */
.seat.male {
background: linear-gradient(145deg, #4dabf7, #339af0);
border: 2px solid #1971c2;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
/* 修改：女生座位样式 - 粉红色 */
.seat.female {
background: linear-gradient(145deg, #ff6b9d, #ff8fab);
border: 2px solid #c2255c;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.seat:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.seat.empty {
background: #f0f0f0 !important;
border: 2px dashed #ccc;
color: #868e96;
}
/* 新增：讲台样式 - 调整大小 */
.teacher-desk {
grid-column: 1 / -1;
background: #e0e0e0;
border-radius: 6px;
padding: 8px 12px;
text-align: center;
font-weight: bold;
color: #000;
margin-bottom: 15px;
border: 2px solid #bdbdbd;
font-size: 0.9em;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
margin-left: auto;
margin-right: auto;
}
/* 座位控制面板样式 - 修改为顶部横向显示 */
.seating-controls-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 15px;
border: 2px solid #d1e9ff;
position: relative;
}
.seating-controls {
display: flex;
gap: 8px; /* 减小间距 */
align-items: center;
flex-wrap: wrap;
flex: 1;
}
.seating-controls.collapsed {
display: none;
}
/* 修改：移除隐藏控制面板按钮 */
.seating-controls-toggle {
display: none; /* 隐藏按钮 */
}
.seating-controls h4 {
margin: 0;
color: #339af0;
white-space: nowrap;
font-size: 1em; /* 减小字体 */
}
.seating-controls > div {
display: flex;
gap: 8px; /* 减小间距 */
align-items: center;
}
.seating-controls input {
width: 50px; /* 减小输入框宽度 */
text-align: center;
padding: 6px; /* 减小内边距 */
}
.seating-controls button {
padding: 6px 10px; /* 减小按钮大小 */
font-size: 0.85em; /* 减小字体 */
}
.seating-controls h5 {
margin: 0;
font-size: 0.9em; /* 减小字体 */
}
/* 整体换座控制区域样式 */
.seating-move-controls-container {
margin-top: 20px;
padding: 15px;
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 15px;
border: 2px solid #d1e9ff;
}
.seating-move-controls-toggle {
background: #4dabf7;
color: white;
border: none;
border-radius: 20px;
padding: 8px 15px;
cursor: pointer;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 1em;
}
.seating-move-controls-toggle.collapsed::after {
transform: rotate(-90deg);
}
.seating-move-controls-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.seating-move-controls-content.collapsed {
display: none;
}
.seating-move-buttons {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.adjustment-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
/* 五星学生样式 - 修改 */
.star-students-container {
margin-top: 20px;
}
.star-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.star-card {
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 15px;
padding: 20px;
box-shadow: var(--cute-shadow);
border: 2px solid #d1e9ff;
text-align: center;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s;
position: relative;
}
.star-card.selected {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.star-card .title {
font-weight: bold;
font-size: 1.2em;
color: #339af0;
margin-bottom: 10px;
}
.star-card .student-name {
font-size: 1.6em;
margin: 10px 0;
transition: all 0.4s;
font-weight: 900;
background: linear-gradient(135deg, #FFD700, #DAA520, #B8860B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow:
0.5px 0.5px 0 #FFD700,
1px 1px 0 #FFC107,
1.5px 1.5px 0 #FFB300,
2px 2px 0 #FF9800,
2.5px 2.5px 0 #FF8F00,
3px 3px 0 #FF6F00,
4px 4px 0 #E65100,
5px 5px 0 #D84315,
6px 6px 0 #BF360C,
7px 7px 10px rgba(0, 0, 0, 0.5);
transform: perspective(1000px) rotateX(3deg) rotateY(-1deg);
font-family: 'Ma Shan Zheng', cursive;
letter-spacing: 1px;
animation: royal-glow 5s ease-in-out infinite alternate;
}
.star-card .student-name.selected {
animation: float 2s ease-in-out infinite;
color: #ff6b6b;
font-weight: bold;
}
.star-card .avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 10px;
background: linear-gradient(145deg, #4dabf7, #339af0);
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: white;
}
.star-card .edit-title {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #d1e9ff;
border-radius: 5px;
text-align: center;
}
/* 五星学生下拉选择框样式 */
.star-card select {
width: 100%;
padding: 8px;
border: 2px solid var(--primary-color);
border-radius: 10px;
margin: 10px 0;
background: white;
font-family: 'Comic Neue', Arial, sans-serif;
opacity: 0; /* 初始隐藏 */
transition: opacity 0.3s;
}
.star-card:hover select {
opacity: 1; /* 鼠标悬停时显示 */
}
/* 积分超市样式 - 修改 */
.store-container {
margin-top: 20px;
}
.store-categories {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.store-categories button {
flex: 1;
font-size: 1.1em;
padding: 10px;
}
.store-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.store-item {
border-radius: 15px;
padding: 20px;
box-shadow: var(--cute-shadow);
border: 2px solid #d1e9ff;
text-align: center;
transition: all 0.3s;
}
.store-item.physical {
background: linear-gradient(145deg, #fff3cd, #ffeaa7);
border-color: #ffd43b;
}
.store-item.virtual {
background: linear-gradient(145deg, #d0ebff, #a5d8ff);
border-color: #4dabf7;
}
.store-item h4 {
margin-top: 0;
font-size: 1.3em;
}
.store-item.physical h4 {
color: #e67700;
}
.store-item.virtual h4 {
color: #1971c2;
}
.store-item .quantity {
font-weight: bold;
margin: 10px 0;
font-size: 1.1em;
}
.store-item .required-coins {
font-weight: bold;
margin: 10px 0;
font-size: 1.1em;
}
.store-item.physical .required-coins {
color: #e67700;
}
.store-item.virtual .required-coins {
color: #1971c2;
}
.store-item .actions {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
/* 隐藏界面样式 */
.hidden-section {
display: none;
}
/* 控制按钮样式优化 */
.controls {
display: flex;
gap: 12px;
margin-bottom: 20px;
padding: 15px;
background: rgba(255, 146, 43, 0.1) !important;
border-radius: 10px !important;
}
.controls button {
padding: 10px 20px !important;
border: none !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
/* 批量导入按钮特殊样式 */
.controls .dropdown-btn {
position: relative !important;
margin: 0 !important;
}
.controls .dropdown-toggle {
background: linear-gradient(135deg, #ff922b, #ffa94d) !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 120px !important;
}
.controls .dropdown-toggle:hover {
background: linear-gradient(135deg, #ff8fab, #ff922b) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.controls .dropdown-toggle::after {
content: ' ▼' !important;
font-size: 0.8em !important;
opacity: 0.9 !important;
transition: transform 0.3s ease !important;
margin-left: 8px !important;
}
.controls .dropdown-btn:hover .dropdown-toggle::after {
transform: rotate(180deg) !important;
}
.controls .dropdown-menu {
background: white !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
min-width: 140px !important;
z-index: 1001 !important;
}
.controls .dropdown-menu a {
padding: 12px 16px !important;
color: #333 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
border-bottom: 1px solid #f5f5f5 !important;
font-size: 13px !important;
}
.controls .dropdown-menu a:last-child {
border-bottom: none !important;
}
.controls .dropdown-menu a:hover {
background: linear-gradient(135deg, #ff922b, #ffa94d) !important;
color: white !important;
transform: translateX(3px) !important;
}
.controls button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.controls button.active {
background: linear-gradient(135deg, #ff922b, #ffa94d) !important;
color: white !important;
}
/* 时间选择器样式优化 */
.time-selector {
margin-bottom: 25px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: center !important;
padding: 20px !important;
background: rgba(255, 255, 255, 0.8) !important;
border-radius: 10px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.time-selector label {
font-weight: 700 !important;
color: #333 !important;
font-size: 14px !important;
margin-right: 5px !important;
}
.time-selector select,
.time-selector input[type="number"] {
padding: 10px 14px !important;
border: 2px solid rgba(255, 146, 43, 0.3) !important;
border-radius: 8px !important;
background: white !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
min-width: 100px !important;
}
.time-selector select:focus,
.time-selector input[type="number"]:focus {
outline: none !important;
border-color: #ff922b !important;
box-shadow: 0 0 0 3px rgba(255, 146, 43, 0.1) !important;
}
.time-selector button {
padding: 10px 18px !important;
border: none !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.time-selector button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.edit-week-name-btn {
background: linear-gradient(135deg, #9c36b5, #cc5de8) !important;
color: white !important;
}
.edit-week-name-input {
margin: 20px 0 !important;
padding: 20px !important;
background: rgba(237, 112, 187, 0.1) !important;
border-radius: 10px !important;
display: flex !important;
gap: 12px !important;
align-items: center !important;
border: 1px solid rgba(237, 112, 187, 0.2) !important;
}
.edit-week-name-input input {
flex: 1 !important;
padding: 10px 14px !important;
border: 2px solid rgba(237, 112, 187, 0.3) !important;
border-radius: 8px !important;
font-size: 14px !important;
}
/* 排名表格样式优化 */
.ranking-table-container {
overflow-x: auto !important;
border-radius: 10px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}
.ranking-table {
width: 100% !important;
border-collapse: collapse !important;
background: white !important;
}
.ranking-table thead {
background: linear-gradient(135deg, #ff922b, #ffa94d) !important;
color: white !important;
}
.ranking-table th {
padding: 15px 20px !important;
text-align: left !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-bottom: 2px solid #ff922b !important;
}
.ranking-table td {
padding: 15px 20px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
}
.ranking-table tbody tr {
transition: all 0.3s ease !important;
}
.ranking-table tbody tr:hover {
background: rgba(255, 146, 43, 0.05) !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.ranking-table tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.02) !important;
}
/* 排名样式 */
.ranking-table td:first-child {
font-weight: 700 !important;
color: #ff922b !important;
font-size: 16px !important;
}
/* 积分样式 */
.ranking-table td:nth-child(3) {
font-weight: 700 !important;
color: #22b8cf !important;
font-size: 15px !important;
}
/* 最高积分项目样式 */
.ranking-table td:nth-child(4) {
color: #666 !important;
font-style: italic !important;
}
/* 自定义周数输入样式 */
#customWeekInput {
display: none !important;
gap: 10px !important;
align-items: center !important;
margin-top: 10px !important;
padding: 15px !important;
background: rgba(0, 0, 0, 0.05) !important;
border-radius: 8px !important;
}
#customWeekInput input {
padding: 8px 12px !important;
border: 1px solid #ddd !important;
border-radius: 5px !important;
}
/* 返回按钮样式 */
.back-button {
display: block;
margin-bottom: 20px;
background: linear-gradient(45deg, #ff922b, #ffa94d);
}
.back-button {
display: block;
}
/* 周榜月榜美化样式 */
#weeklyMonthly {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* 周榜月榜标题样式 */
#weeklyMonthly h3 {
color: white;
text-align: center;
font-size: 24px;
margin-bottom: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
/* 控制按钮样式优化 */
#weeklyMonthly .controls {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 25px !important;
background: rgba(255, 255, 255, 0.95) !important;
padding: 15px 20px !important;
border-radius: 10px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
flex-wrap: wrap !important;
}
/* 周榜月榜容器样式 */
.weekly-monthly-container {
background: white !important;
padding: 25px !important;
border-radius: 15px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}
/* 时间选择器样式 */
.time-selector {
display: flex !important;
flex-wrap: wrap !important;
gap: 15px !important;
align-items: center !important;
margin-bottom: 25px !important;
padding: 20px !important;
background: rgba(255, 146, 43, 0.05) !important;
border-radius: 10px !important;
}
/* 前三名特殊样式 */
#weeklyMonthlyBody tr:nth-child(1) td:first-child {
color: #ffd700 !important;
font-size: 18px !important;
}
#weeklyMonthlyBody tr:nth-child(2) td:first-child {
color: #c0c0c0 !important;
font-size: 18px !important;
}
#weeklyMonthlyBody tr:nth-child(3) td:first-child {
color: #cd7f32 !important;
font-size: 18px !important;
}
/* 编辑周榜名称输入样式 */
.edit-week-name-input {
display: none !important;
gap: 10px !important;
align-items: center !important;
margin-top: 15px !important;
padding: 15px !important;
background: rgba(102, 126, 234, 0.05) !important;
border-radius: 10px !important;
border-left: 4px solid #667eea !important;
}
/* 自定义周数输入样式 */
#customWeekInput {
display: none !important;
gap: 10px !important;
align-items: center !important;
margin-top: 10px !important;
padding: 15px !important;
background: rgba(102, 126, 234, 0.05) !important;
border-radius: 10px !important;
border-left: 4px solid #667eea !important;
flex-wrap: wrap !important;
}
/* 随机点名样式 - 修改 */
.random-call-container {
text-align: center;
padding: 40px;
margin: 20px 0;
background: linear-gradient(145deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 20px;
border: 3px solid #8e44ad;
position: relative;
min-height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 10px 30px rgba(142, 68, 173, 0.2);
}
.random-call-display {
font-size: 5em;
font-weight: bold;
margin: 20px 0;
color: #8e44ad;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 0 15px rgba(142, 68, 173, 0.4);
flex-wrap: wrap;
gap: 15px;
padding: 20px;
}
.random-item {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
color: white;
padding: 20px 30px;
border-radius: 35px;
font-size: 2em;
box-shadow: 0 6px 20px rgba(142, 68, 173, 0.3);
margin: 15px;
animation: pulse 0.3s ease-in-out, sparkle 1.5s ease-in-out infinite alternate;
border: 2px solid #ecf0f1;
}
@keyframes sparkle {
0% {
box-shadow: 0 6px 20px rgba(142, 68, 173, 0.3);
}
100% {
box-shadow: 0 6px 25px rgba(142, 68, 173, 0.5), 0 0 30px rgba(231, 76, 60, 0.3);
}
}
.random-call-settings {
display: flex;
align-items: center;
margin-bottom: 20px;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #343a40;
}
.random-call-settings input {
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
text-align: center;
width: 60px;
padding: 8px;
margin: 0 10px;
}
.random-call-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 25px;
}
.random-call-controls button {
padding: 12px 25px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
.random-call-controls button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}
.random-call-controls button:active {
transform: translateY(0);
}
.random-call-controls button:nth-child(2) {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.random-call-controls button:nth-child(2):hover {
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}
.random-call-controls button:nth-child(3) {
background: linear-gradient(135deg, #2ecc71, #27ae60);
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}
.random-call-controls button:nth-child(3):hover {
box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}
.random-call-score-controls {
margin-top: 20px;
padding: 18px 24px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
border: 1.5px solid rgba(255,255,255,0.6);
border-top: 1.5px solid rgba(255,255,255,0.9);
transition: all 0.3s ease;
}
.score-controls-title {
font-size: 1.4em;
font-weight: 700;
color: #2c3e50;
margin-bottom: 14px;
letter-spacing: 0.5px;
}
.score-controls-actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.score-controls-actions select,
.score-controls-actions label {
font-size: 15px;
}
.score-controls-actions select {
padding: 10px 14px;
font-size: 15px;
border-radius: 8px;
border: 2px solid #dee2e6;
outline: none;
min-width: 140px;
}
.score-controls-actions input {
padding: 10px 14px;
font-size: 15px;
border-radius: 8px;
border: 2px solid #dee2e6;
outline: none;
width: 100px;
}
.score-controls-actions select:focus,
.score-controls-actions input:focus {
border-color: #339af0;
box-shadow: 0 0 5px rgba(51, 154, 240, 0.3);
}
.score-controls-actions .score-btn {
padding: 10px 22px;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
border: none;
color: white;
cursor: pointer;
transition: all 0.2s ease;
}
.score-controls-actions .score-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.score-controls-actions .score-btn-add {
background: linear-gradient(135deg, #51cf66, #40c057);
box-shadow: 0 2px 8px rgba(64,192,87,0.3);
}
.score-controls-actions .score-btn-subtract {
background: linear-gradient(135deg, #ff6b6b, #f03e3e);
box-shadow: 0 2px 8px rgba(240,62,62,0.3);
}
.score-controls-actions .score-btn-close {
background: linear-gradient(135deg, #adb5bd, #868e96);
}
.score-controls-actions .score-btn-history {
background: linear-gradient(135deg, #ff922b, #fd7e14);
box-shadow: 0 2px 8px rgba(253,126,20,0.3);
}
/* 全屏浮动显示样式 - 优化 */
.fullscreen-floating {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(142,68,173,0.95) 0%, rgba(52,152,219,0.95) 40%, rgba(26,26,46,0.97) 100%);
backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10000;
animation: floatIn 1s ease-out;
}
.fullscreen-floating .title {
font-size: 2.6em;
font-weight: 800;
background: linear-gradient(135deg, #ffd700, #ffed4e, #fff9c4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 40px rgba(255,215,0,0.8);
margin-bottom: 30px;
animation: bounce 1s ease-in-out;
}
.fullscreen-floating .name {
font-size: 8em;
font-weight: bold;
background: linear-gradient(135deg, #9b59b6, #3498db, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 40px rgba(142, 68, 173, 0.6);
animation: pulse 2s infinite, colorShift 4s ease-in-out infinite alternate;
}
@keyframes colorShift {
0% {
background: linear-gradient(135deg, #9b59b6, #3498db, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
50% {
background: linear-gradient(135deg, #3498db, #2ecc71, #f39c12);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
100% {
background: linear-gradient(135deg, #2ecc71, #f39c12, #9b59b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
@keyframes floatIn {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 编辑小组成员样式 */
.edit-group-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.edit-group-content {
background: white;
padding: 20px;
border-radius: 15px;
width: 500px;
max-width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.member-list {
max-height: 300px;
overflow-y: auto;
margin: 15px 0;
border: 1px solid #d1e9ff;
border-radius: 10px;
padding: 10px;
}
.member-item {
display: flex;
justify-content: space-between;
padding: 8px;
margin: 5px 0;
background: #f0f8ff;
border-radius: 8px;
}
/* 批量添加规则样式 */
.batch-add-rules {
margin-top: 20px;
}
.batch-add-textarea {
width: 100%;
height: 150px;
padding: 10px;
border: 2px solid var(--primary-color);
border-radius: 10px;
margin-bottom: 10px;
font-family: inherit;
}
/* 批量编辑积分模态框样式 */
.batch-edit-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.batch-edit-content {
background: white;
border-radius: 16px;
width: 520px;
max-width: 92vw;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
animation: scoreModalSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.batch-edit-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 0;
}
.batch-edit-header h3 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #1a1a2e;
}
.batch-edit-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #f0f0f0;
font-size: 16px;
cursor: pointer;
color: #888;
transition: background 0.2s;
}
.batch-edit-close:hover {
background: #e0e0e0;
}
.batch-edit-body {
padding: 12px 24px 4px;
}
.batch-edit-section {
margin: 12px 0;
}
.batch-edit-label {
font-size: 13px;
font-weight: 600;
color: #666;
margin-bottom: 6px;
}
.batch-edit-options {
display: flex;
gap: 8px;
}
.batch-type-btn {
flex: 1;
padding: 10px 0;
border: 1px solid #e0e0e0;
border-radius: 10px;
background: #fafafa;
font-size: 14px;
font-weight: 600;
color: #666;
cursor: pointer;
transition: all 0.2s;
}
.batch-type-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}
.member-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0;
}
.member-item-card {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fb;
border: 1.5px solid #e8ecf0;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.member-item-card:hover {
border-color: #667eea;
background: #f0f2ff;
}
.member-item-card:has(input:checked) {
border-color: #667eea;
background: linear-gradient(135deg, #eef0ff, #f3e8ff);
box-shadow: 0 2px 8px rgba(102,126,234,0.15);
}
.member-item-name {
font-size: 14px;
font-weight: 600;
color: #333;
}
.member-item-score {
font-size: 12px;
color: #999;
margin-left: auto;
}
.member-item-card input[type="checkbox"] {
display: none;
}
.member-item-checkmark {
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
display: inline-block;
position: relative;
flex-shrink: 0;
transition: all 0.2s;
}
.member-item-card:has(input:checked) .member-item-checkmark {
background: #667eea;
border-color: #667eea;
}
.member-item-card:has(input:checked) .member-item-checkmark::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.batch-edit-actions {
display: flex;
gap: 8px;
margin-top: 6px;
}
.batch-action-btn {
padding: 6px 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: white;
font-size: 12px;
color: #666;
cursor: pointer;
transition: all 0.2s;
}
.batch-action-btn:hover {
border-color: #667eea;
color: #667eea;
}
.batch-edit-select {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
background: #fafafa;
color: #333;
outline: none;
cursor: pointer;
transition: border-color 0.2s;
}
.batch-edit-select:focus {
border-color: #667eea;
}
.batch-edit-input-row {
display: flex;
align-items: center;
gap: 10px;
}
.batch-edit-input {
width: 140px;
height: 44px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #e67e22;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
background: transparent;
}
.batch-edit-input:focus {
border-color: #667eea;
}
.batch-edit-hint {
font-size: 12px;
color: #999;
}
.batch-edit-footer {
display: flex;
gap: 10px;
padding: 16px 24px 20px;
}
.batch-edit-confirm {
flex: 1;
padding: 12px 0;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s;
}
.batch-edit-confirm:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(102,126,234,0.4);
}
.batch-edit-cancel {
flex: 1;
padding: 12px 0;
border: 1.5px solid #e0e0e0;
border-radius: 12px;
background: white;
color: #888;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.batch-edit-cancel:hover {
border-color: #bbb;
color: #555;
}
/* 兑换奖品模态框样式 */
/* 宠物模态框样式 */
.pet-modal-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.pet-modal-icon {
width: 100%;
font-size: 64px;
}
.pet-stage-icon {
max-width: 100%;
height: auto;
}
.pet-modal-details h3 {
margin: 0 0 10px 0;
font-size: 24px;
}
.pet-modal-details p {
margin: 5px 0;
font-size: 16px;
}
.pet-modal-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pet-modal-actions button {
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.pet-modal-actions button:hover {
background-color: #45a049;
}
.redeem-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.redeem-content {
background: white;
padding: 20px;
border-radius: 15px;
width: 500px;
max-width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.redeem-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin: 15px 0;
max-height: 400px;
overflow-y: auto;
}
.redeem-item {
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 10px;
padding: 15px;
text-align: center;
border: 2px solid #d1e9ff;
cursor: pointer;
transition: all 0.3s;
}
.redeem-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.redeem-item.selected {
border-color: #339af0;
background: linear-gradient(145deg, #e6f7ff 0%, #d1e9ff 100%);
}
/* 密码验证样式 */
.password-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.password-content {
background: white;
padding: 20px;
border-radius: 15px;
width: 300px;
max-width: 90%;
text-align: center;
}
/* 五星学生历史记录样式 */
.star-history-container {
margin-top: 20px;
padding: 20px;
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 15px;
border: 2px solid #d1e9ff;
}
.star-history-toggle {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.star-history-list {
max-height: 400px;
overflow-y: auto;
}
.star-history-item {
padding: 10px;
margin: 8px 0;
background: white;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 积分历史样式 - 修改 */
.score-history-list {
max-height: 500px;
overflow-y: auto;
}
.score-history-item {
padding: 12px;
margin: 8px 0;
background: white;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #e1f0ff;
}
.score-history-item .time {
color: #868e96;
font-size: 0.9em;
}
.score-history-item .checkbox {
margin-right: 10px;
}
/* 待调整区样式 */
.adjustment-area-container {
margin-top: 30px;
padding: 20px;
background: linear-gradient(145deg, #f0f8ff 0%, #e6f7ff 100%);
border-radius: 15px;
border: 2px solid #d1e9ff;
box-shadow: var(--cute-shadow);
transition: all 0.3s;
}
.adjustment-area-container.collapsed {
display: none;
}
.adjustment-area-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.adjustment-area-header h4 {
color: #339af0;
margin: 0;
font-size: 1.4em;
}
.adjustment-area-toggle {
background: #4dabf7;
color: white;
border: none;
border-radius: 20px;
padding: 6px 12px;
cursor: pointer;
font-size: 0.9em;
}
.adjustment-area {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
min-height: 100px;
padding: 15px;
border: 2px dashed #4dabf7;
border-radius: 10px;
background: rgba(255, 255, 255, 0.7);
}
/* 调整待调整区学生样式与座位相同 */
.adjustment-student {
background: linear-gradient(145deg, #ff6b6b 0%, #ff8e8e 100%) !important;
border-radius: 10px;
padding: 15px;
text-align: center;
box-shadow: var(--cute-shadow);
border: 2px solid #ff4757;
cursor: move;
transition: all 0.3s;
position: relative;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.adjustment-student:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.adjustment-student .remove-btn {
position: absolute;
top: -5px;
right: -5px;
background: #ff6b6b;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
cursor: pointer;
display: none;
}
.adjustment-student:hover .remove-btn {
display: block;
}
.adjustment-actions {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.adjustment-actions button {
padding: 8px 15px;
font-size: 0.9em;
}
/* 整体换座按钮区域 */
.seating-move-controls {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}
.seating-move-controls h5 {
width: 100%;
text-align: center;
margin-bottom: 10px;
color: #339af0;
}
/* 学生卡片网格布局样式 */
.students-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 24px;
margin-top: 20px;
content-visibility: auto;
contain-intrinsic-size: 0 480px;
}
/* 3D多宠物排列布局 */
.students-grid.pet-3d-layout {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
perspective: 1500px;
transform-style: preserve-3d;
gap: 15px;
padding: 20px;
}
/* 3D学生卡片容器 */
.student-card-3d-container {
position: relative;
transform-style: preserve-3d;
width: 300px;
height: auto;
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
cursor: pointer;
}
/* 3D学生卡片基础变换 */
.student-card-3d-container .student-card {
transform: translateZ(0) rotateX(5deg) rotateY(-2deg);
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* 3D宠物图标排列层 */
.pet-3d-arrangement {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
transform-style: preserve-3d;
pointer-events: none;
z-index: 1;
}
/* 3D排列中的宠物图标 */
.student-card-3d-container .pet-icon-3d,
.student-card-3d-container .pet-icon {
position: absolute;
transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
/* 3D排列中的宠物图片强制尺寸约束（防止sacred/supreme大图原生分辨率渲染） */
.student-card-3d-container .pet-icon-3d img {
max-width: 50px;
max-height: 50px;
object-fit: contain;
display: block;
}
/* 中心宠物图标 */
.student-card-3d-container .pet-icon-3d:nth-child(1),
.student-card-3d-container .pet-icon:nth-child(1) {
top: 15px;
left: 50%;
transform: translateX(-50%) translateZ(120px) scale(1.8);
transform-origin: center top;
z-index: 10;
}
/* 左上角宠物图标 */
.student-card-3d-container .pet-icon-3d:nth-child(2),
.student-card-3d-container .pet-icon:nth-child(2) {
top: 15px;
left: 20px;
transform: translateZ(80px) scale(1.1) rotateY(-45deg) rotateZ(-10deg);
z-index: 8;
}
/* 右上角宠物图标 */
.student-card-3d-container .pet-icon-3d:nth-child(3),
.student-card-3d-container .pet-icon:nth-child(3) {
top: 15px;
right: 20px;
transform: translateZ(90px) scale(1.15) rotateY(45deg) rotateZ(10deg);
z-index: 9;
}
/* 左下角宠物图标 */
.student-card-3d-container .pet-icon-3d:nth-child(4),
.student-card-3d-container .pet-icon:nth-child(4) {
bottom: 60px;
left: 25px;
transform: translateZ(60px) scale(1.0) rotateY(-30deg) rotateZ(-15deg);
z-index: 7;
}
/* 右下角宠物图标 */
.student-card-3d-container .pet-icon-3d:nth-child(5),
.student-card-3d-container .pet-icon:nth-child(5) {
bottom: 60px;
right: 25px;
transform: translateZ(70px) scale(1.05) rotateY(30deg) rotateZ(15deg);
z-index: 8;
}
/* 悬浮时的3D排列动画 */
.student-card-3d-container:hover .student-card {
transform: translateZ(20px) rotateX(0deg) rotateY(0deg) scale(1.02);
}
.student-card-3d-container:hover .pet-icon-3d:nth-child(1),
.student-card-3d-container:hover .pet-icon:nth-child(1) {
transform: translateX(-50%) translateZ(120px) scale(1.8) rotateY(360deg);
}
.student-card-3d-container:hover .pet-icon-3d:nth-child(2),
.student-card-3d-container:hover .pet-icon:nth-child(2) {
transform: translateZ(80px) scale(1.1) rotateY(-45deg) rotateZ(-10deg);
}
.student-card-3d-container:hover .pet-icon-3d:nth-child(3),
.student-card-3d-container:hover .pet-icon:nth-child(3) {
transform: translateZ(90px) scale(1.15) rotateY(45deg) rotateZ(10deg);
}
.student-card-3d-container:hover .pet-icon-3d:nth-child(4),
.student-card-3d-container:hover .pet-icon:nth-child(4) {
transform: translateZ(60px) scale(1.0) rotateY(-30deg) rotateZ(-15deg);
}
.student-card-3d-container:hover .pet-icon-3d:nth-child(5),
.student-card-3d-container:hover .pet-icon:nth-child(5) {
transform: translateZ(70px) scale(1.05) rotateY(30deg) rotateZ(15deg);
}
/* 点击时的3D旋转动画 */
.student-card-3d-container:active .student-card {
transform: translateZ(-10px) rotateX(-10deg) rotateY(10deg) scale(0.98);
}
.student-card-3d-container:active .pet-icon-3d:nth-child(1),
.student-card-3d-container:active .pet-icon:nth-child(1) {
transform: translateX(-50%) translateZ(30px) scale(1.1) rotateY(-180deg);
}
/* 移除3D排列背景光效 - 避免显示异常 */
.student-card-3d-container::before {
display: none;
}
/* 宠物3D排列控制按钮 */
.pet-3d-layout-toggle {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 10px;
border-radius: 50px 0 0 50px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
writing-mode: vertical-rl;
text-orientation: mixed;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
transition: all 0.3s ease;
z-index: 1000;
font-family: 'ZCOOL QingKe HuangYou', cursive;
}
.pet-3d-layout-toggle:hover {
padding-right: 15px;
transform: translateY(-50%) translateX(-5px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
}
.pet-3d-layout-toggle.active {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
right: 0;
padding: 15px;
border-radius: 50px 0 0 50px;
}
/* 响应式3D布局 */
@media (max-width: 768px) {
.students-grid.pet-3d-layout {
gap: 10px;
padding: 10px;
perspective: 1000px;
}
.student-card-3d-container {
width: 280px;
}
.pet-3d-layout-toggle {
top: auto;
bottom: 20px;
right: 10px;
transform: none;
writing-mode: horizontal-tb;
text-orientation: initial;
padding: 12px 15px;
font-size: 11px;
}
}
@media (max-width: 480px) {
.students-grid.pet-3d-layout {
gap: 8px;
}
.student-card-3d-container {
width: 260px;
}
}
/* 场景模式积分容器 */
.scene-points-container {
margin-top: 8px;
padding: 6px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* 场景积分项目 */
.scene-points-item {
margin-bottom: 6px;
padding: 8px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.scene-points-item:last-child {
margin-bottom: 0;
}
.scene-points-item:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* 场景头部 */
.scene-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.scene-icon {
font-size: 18px;
margin-right: 6px;
}
.scene-title {
flex: 1;
font-size: 12px;
font-weight: bold;
color: #333;
}
.scene-status {
font-size: 10px;
padding: 1px 6px;
border-radius: 10px;
font-weight: bold;
}
.status-normal {
background: #e3f2fd;
color: #1976d2;
}
.status-full {
background: #ffebee;
color: #d32f2f;
}
/* 进度条包装器 */
.progress-wrapper {
position: relative;
margin-bottom: 2px;
}
.progress-background {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.progress-bar {
height: 100%;
border-radius: 4px;
box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}
/* 进度信息 */
.progress-info {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
margin-top: 2px;
}
.current-points {
font-weight: bold;
color: #333;
font-size: 11px;
}
.total-points {
color: #666;
font-size: 9px;
}
.limit-badge {
background: #F44336;
color: white;
padding: 1px 4px;
border-radius: 8px;
font-size: 9px;
font-weight: bold;
}
/* 积分提示 */
.points-hint {
font-size: 9px;
color: #666;
text-align: center;
margin-top: 2px;
font-style: italic;
display: none; /* 默认隐藏，节省空间 */
}
/* 晨读和自习积分条样式 */
.morning-reading-bar {
background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
}
.self-study-bar {
background: linear-gradient(90deg, #2196F3 0%, #4FC3F7 100%);
}
.student-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 100%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* 头部渐变装饰线 */
.student-card-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #00d4ff 0%, #0099ff 20%, #0066ff 40%, #00ccff 60%, #00ffcc 80%, #00d4ff 100%);
background-size: 200% 100%;
animation: header-gradient 2s linear infinite;
}
@keyframes header-gradient {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* 学生头像样式 */
.student-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #00d4ff 0%, #0099ff 50%, #0066ff 100%);
font-size: 15px;
font-weight: 700;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 3px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 212, 255, 0.4);
animation: avatar-glow 2s ease-in-out infinite alternate, avatar-float 5s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
margin-right: 10px;
position: relative;
border-radius: 50%;
}
.student-avatar::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
animation: avatar-marquee 2s linear infinite;
}
@keyframes avatar-marquee {
0% { transform: translateX(-100%) rotate(0deg); }
100% { transform: translateX(100%) rotate(360deg); }
}
@keyframes avatar-float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
}
@keyframes avatar-glow {
0% { box-shadow: 0 4px 10px rgba(0, 212, 255, 0.4); }
100% { box-shadow: 0 6px 20px rgba(0, 212, 255, 0.7); }
}
.student-avatar:hover {
border-color: #4ecdc4;
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5);
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #dda0dd 100%);
animation: avatar-hover-glow 1s ease-in-out infinite alternate, avatar-marquee 2s linear infinite;
}
.student-avatar:hover::before {
animation: avatar-marquee 2s linear infinite;
}
@keyframes avatar-hover-glow {
0% { box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5); }
100% { box-shadow: 0 10px 30px rgba(78, 205, 196, 0.8); }
}
.student-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.student-avatar .avatar-placeholder {
font-size: 16px;
font-weight: bold;
}
.student-avatar .upload-icon {
position: absolute;
bottom: -2px;
right: -2px;
width: 16px;
height: 16px;
background: #FFD700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
opacity: 0;
transition: opacity 0.3s ease;
}
.student-avatar:hover .upload-icon {
opacity: 1;
}
.student-name-with-avatar {
display: flex;
align-items: center;
flex: 1;
}
/* 头像右键菜单样式 */
.avatar-context-menu {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
min-width: 150px;
overflow: hidden;
}
.avatar-context-menu .menu-item {
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.2s ease;
border-bottom: 1px solid #f0f0f0;
}
.avatar-context-menu .menu-item:hover {
background-color: #f8f9fa;
}
.avatar-context-menu .menu-item:last-child {
border-bottom: none;
}
.student-name {
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: underline;
/* 平铺3D文字效果 */
color: #fff;
text-shadow:
0.5px 0.5px 0 #D4AF37,
1px 1px 0 #C39A2D,
1.5px 1.5px 0 #B28B21,
2px 2px 0 #A07C15,
2.5px 2.5px 0 #926D09,
3px 3px 0 #845E00,
3px 3px 6px rgba(0, 0, 0, 0.3);
/* 平铺3D旋转效果 */
transform: perspective(800px) rotateX(5deg) rotateY(-2deg);
background: linear-gradient(45deg, #D4AF37, #E8B7FF, #FF6B9D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
animation: subtle-glow 4s ease-in-out infinite alternate;
}
/* 柔和的发光动画 */
@keyframes subtle-glow {
0% {
text-shadow:
0.5px 0.5px 0 #D4AF37,
1px 1px 0 #C39A2D,
1.5px 1.5px 0 #B28B21,
2px 2px 0 #A07C15,
2.5px 2.5px 0 #926D09,
3px 3px 0 #845E00,
3px 3px 6px rgba(0, 0, 0, 0.3);
}
100% {
text-shadow:
0.5px 0.5px 0 #FFD700,
1px 1px 0 #FFC107,
1.5px 1.5px 0 #FFB300,
2px 2px 0 #FF9800,
2.5px 2.5px 0 #FF8F00,
3px 3px 0 #FF6F00,
3px 3px 10px rgba(255, 150, 0, 0.4);
}
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.student-name:hover {
/* 增强悬停效果的平铺3D文字 */
color: #fff;
text-shadow:
0.5px 0.5px 0 #FFD700,
1px 1px 0 #FFC107,
1.5px 1.5px 0 #FFB300,
2px 2px 0 #FF9800,
2.5px 2.5px 0 #FF8F00,
3px 3px 0 #FF6F00,
3px 3px 12px rgba(255, 150, 0, 0.5);
/* 轻微悬停时的3D旋转效果 */
transform: perspective(800px) rotateX(3deg) rotateY(0deg) scale(1.03);
/* 增强悬停时的渐变背景 */
background: linear-gradient(45deg, #FFD700, #FFB6C1, #DA70D6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 学生卡片内的学生姓名样式 */
.student-card .student-name {
position: relative;
color: #fff;
font-weight: 800;
font-size: 1.1em;
letter-spacing: 1px;
text-shadow: 0 0 5px #fff, 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #0099ff, 0 0 40px #0099ff, 0 0 50px #0066ff, 0 0 60px #0066ff;
transform: perspective(800px) rotateX(5deg) rotateY(-2deg);
background: linear-gradient(45deg, #00d4ff, #0099ff, #0066ff, #00ffcc);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: name-gradient 2s ease infinite, name-glow 1.5s ease-in-out infinite alternate;
padding: 2px 8px;
border-radius: 8px;
}
.student-card .student-name::after {
content: '✨';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
font-size: 0.8em;
opacity: 0;
transition: opacity 0.3s ease;
}
.student-card:hover .student-name::after {
opacity: 1;
}
@keyframes name-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes name-glow {
0% { filter: drop-shadow(0 0 2px rgba(0, 212, 255, 0.5)); }
100% { filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.9)); }
}
}
}
/* 学生姓名 - 无额外装饰 */
.delete-student-btn {
background: linear-gradient(45deg, #ff6b6b, #ff8787);
color: white;
border: none;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.9em;
transition: all 0.3s;
}
.delete-student-btn:hover {
transform: scale(1.1);
}
.student-scores {
margin: 10px 0;
padding: 12px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.85) 100%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* 积分区域装饰 - 科技蓝色 */
.student-scores::before {
content: '💎';
position: absolute;
top: 5px;
right: 10px;
font-size: 18px;
opacity: 0.3;
animation: score-icon-float 3s ease-in-out infinite;
filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
}
@keyframes score-icon-float {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
50% { transform: translateY(-5px) rotate(10deg); opacity: 0.5; }
}
.score-adjustment-container {
margin-bottom: 10px;
}
.score-item-select {
width: 100%;
padding: 8px 12px;
border: 2px solid #d1e9ff;
border-radius: 10px;
background: white;
font-family: 'Comic Neue', Arial, sans-serif;
font-size: 0.9em;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s;
}
.score-item-select:focus {
outline: none;
border-color: #4dabf7;
box-shadow: 0 0 5px rgba(77, 171, 247, 0.3);
}
/* 小组下拉菜单美化样式 */
.group-select {
padding: 6px 10px;
border: 2px solid #d1e9ff;
border-radius: 8px;
background: white;
font-family: 'Comic Neue', Arial, sans-serif;
font-size: 0.85em;
cursor: pointer;
transition: all 0.3s;
}
.group-select:focus {
outline: none;
border-color: #4dabf7;
box-shadow: 0 0 5px rgba(77, 171, 247, 0.3);
}
.score-input-group {
display: flex;
gap: 8px;
align-items: center;
margin-top: 8px;
padding: 10px;
background: rgba(77, 171, 247, 0.1);
border-radius: 8px;
}
.score-value-input {
flex: 1;
padding: 6px 10px;
border: 2px solid #4dabf7;
border-radius: 6px;
font-size: 0.9em;
text-align: center;
}
.score-value-input:focus {
outline: none;
border-color: #339af0;
box-shadow: 0 0 5px rgba(51, 154, 240, 0.3);
}
.current-scores-display {
margin-top: 15px;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
}
.current-scores-display h5 {
margin: 0 0 8px 0;
color: #339af0;
font-size: 0.95em;
text-align: center;
}
.mini-score-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 12px;
margin: 4px 0;
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.15) 0%,
rgba(0, 153, 255, 0.15) 100%);
border-radius: 8px;
font-size: 0.85em;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.mini-score-item:hover {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.25) 0%,
rgba(0, 153, 255, 0.25) 100%);
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}
.mini-score-label {
color: #339af0;
font-weight: 500;
}
.mini-score-value {
font-weight: bold;
color: #1971c2;
background: rgba(77, 171, 247, 0.1);
padding: 2px 6px;
border-radius: 3px;
min-width: 25px;
text-align: center;
}
.score-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
padding: 8px;
background: rgba(255, 255, 255, 0.7);
border-radius: 8px;
font-size: 0.9em;
}
.score-label {
font-weight: bold;
color: #339af0;
min-width: 80px;
}
.score-value {
font-weight: bold;
color: #333;
min-width: 30px;
text-align: center;
}
.score-buttons {
display: flex;
gap: 5px;
}
.score-btn {
background: linear-gradient(45deg, #51cf66, #69db7c);
color: white;
border: none;
border-radius: 5px;
padding: 2px 8px;
cursor: pointer;
font-size: 0.8em;
transition: all 0.2s;
}
.score-btn:hover {
transform: scale(1.1);
}
.score-btn.negative {
background: linear-gradient(45deg, #ff6b6b, #ff8787);
}
.student-info {
margin: 10px 0;
padding: 8px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.total-score {
font-size: 1.3em;
font-weight: 700;
background: linear-gradient(45deg, #D4AF37, #FF6B9D, #DA70D6);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
position: relative;
animation: score-gradient 3s ease infinite;
}
@keyframes score-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.group-info {
font-size: 1em;
color: #868e96;
font-weight: bold;
}
.student-actions {
display: flex;
justify-content: space-between;
margin-top: 10px;
gap: 8px;
}
.redeem-btn {
background: linear-gradient(45deg, #ff922b, #ffa94d);
color: white;
border: none;
border-radius: 10px;
padding: 8px 15px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
flex: 1;
}
.redeem-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(255, 146, 43, 0.3);
}
.notification-btn {
background: linear-gradient(45deg, #ff6b6b, #ff8e53);
color: white;
border: none;
border-radius: 10px;
padding: 8px 15px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
flex: 1;
position: relative;
}
.notification-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}
/* 无消息的通知按钮样式 */
/* 无消息的通知按钮样式 */
.notification-btn.no-messages {
background: linear-gradient(45deg, #95a5a6, #7f8c8d);
opacity: 0.7;
}
/* 有未读消息的通知按钮样式 - 闪烁效果 */
.notification-btn.has-unread {
background: linear-gradient(45deg, #ff4757, #ff3838);
box-shadow: 0 0 15px rgba(255, 71, 87, 0.7), 0 4px 10px rgba(255, 71, 87, 0.3);
animation: notificationPulse 2s ease-in-out infinite;
opacity: 1;
}
/* 有已读消息的通知按钮样式 - 静态显示 */
.notification-btn.has-read-only {
background: linear-gradient(45deg, #3498db, #2980b9);
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
opacity: 0.9;
}
/* 消息数量徽章 */
.notification-btn::after {
content: attr(data-count);
position: absolute;
top: -8px;
right: -8px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
font-weight: bold;
display: none;
align-items: center;
justify-content: center;
border: 2px solid white;
}
/* 未读消息徽章样式 */
.notification-btn.has-unread::after {
display: flex;
background: #ff4757;
box-shadow: 0 0 8px rgba(255, 71, 87, 0.8);
}
/* 已读消息徽章样式 */
.notification-btn.has-read-only::after {
display: flex;
background: #3498db;
box-shadow: 0 0 8px rgba(52, 152, 219, 0.6);
}
@keyframes notificationPulse {
0%, 100% {
box-shadow: 0 0 15px rgba(255, 71, 87, 0.7), 0 4px 10px rgba(255, 71, 87, 0.3);
}
50% {
box-shadow: 0 0 25px rgba(255, 71, 87, 0.9), 0 6px 15px rgba(255, 71, 87, 0.5);
}
}
/* 通知按钮更新动画 */
@keyframes notification-update-animation {
0% { transform: scale(1); }
50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
100% { transform: scale(1); }
}
.notification-update-animation {
animation: notification-update-animation 1s ease-in-out;
}
/* 通知模态窗口样式 */
.notification-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.notification-modal {
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow: hidden;
animation: slideInUp 0.3s ease;
}
.notification-modal .modal-header {
background: linear-gradient(45deg, #ff6b6b, #ff8e53);
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.notification-modal .modal-header h3 {
margin: 0;
font-size: 1.3em;
}
/* 通知统计信息 */
.notification-stats {
display: flex;
gap: 15px;
align-items: center;
}
.stats-item {
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 12px;
font-size: 0.9em;
font-weight: 500;
}
.stats-item.unread {
background: rgba(255, 255, 255, 0.3);
color: #fff;
animation: unreadPulse 2s ease-in-out infinite;
}
@keyframes unreadPulse {
0%, 100% { background: rgba(255, 255, 255, 0.3); }
50% { background: rgba(255, 255, 255, 0.5); }
}
.notification-modal .close-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 5px;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.notification-modal .close-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.notification-modal .modal-body {
padding: 20px;
max-height: 50vh;
overflow-y: auto;
}
.notification-modal .modal-footer {
padding: 15px 20px;
border-top: 1px solid #eee;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.no-notifications {
text-align: center;
padding: 40px 20px;
color: #666;
}
.empty-icon {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.5;
}
.notifications-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.notification-item {
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 15px;
background: #f9f9f9;
transition: all 0.3s ease;
}
.notification-item.unread {
background: #fff3e0;
border-color: #ff9800;
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}
.notification-item.read {
background: #f0f0f0;
opacity: 0.6;
color: #999;
cursor: not-allowed;
pointer-events: none;
}
.notification-item.read .notification-time,
.notification-item.read .notification-type,
.notification-item.read .notification-content,
.notification-item.read .notification-master,
.notification-item.read .notification-student {
color: #999;
}
.notification-item.read .notification-type {
background: #bdc3c7;
}
.notification-item.unread:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.notification-item.read:hover {
transform: none;
box-shadow: none;
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
font-size: 0.9em;
}
.notification-meta {
display: flex;
flex-direction: column;
gap: 5px;
}
.notification-status {
display: flex;
align-items: center;
}
.unread-badge {
background: #ff4757;
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 0.7em;
font-weight: bold;
animation: badgePulse 2s ease-in-out infinite;
}
/* ========== 阶段徽章样式 ========== */
.stage-badge {
display: inline-block;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.78em;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
letter-spacing: 0.3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.10);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stage-badge-egg { background: linear-gradient(135deg, #dfe6e9, #b2bec3); color: #333; }
.stage-badge-baby { background: linear-gradient(135deg, #a8e6cf, #88d8b0); }
.stage-badge-awakened { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.stage-badge-formed { background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
.stage-badge-spiritual { background: linear-gradient(135deg, #fd79a8, #e84393); }
.stage-badge-evolved { background: linear-gradient(135deg, #fdcb6e, #f39c12); }
.stage-badge-sacred { background: linear-gradient(135deg, #f9ca24, #e1b12c); color: #333; }
.stage-badge-mythical { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.stage-badge-celestial { background: linear-gradient(135deg, #00cec9, #00b894); }
.stage-badge-primordial { background: linear-gradient(135deg, #d63031, #b71c1c); }
.stage-badge-chaos { background: linear-gradient(135deg, #636e72, #2d3436); }
.stage-badge-supreme {
background: linear-gradient(135deg, #ffd700, #ff6b6b, #ffd700);
background-size: 200% 200%;
animation: supremeBadgeShine 2s ease-in-out infinite;
}
@keyframes supremeBadgeShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ========== 阶段动画特效 ========== */
.stage-baby { animation: petBounce 2s ease-in-out infinite; }
.stage-awakened { animation: petPulseGlow 2s ease-in-out infinite; }
.stage-formed { animation: petRotateHalo 3s linear infinite; }
.stage-spiritual { animation: petFloatParticles 2.5s ease-in-out infinite; }
.stage-evolved { animation: petBreathScale 3s ease-in-out infinite; }
.stage-sacred { animation: petGoldenGlow 2s ease-in-out infinite; }
.stage-mythical { animation: petPurplePulse 2s ease-in-out infinite; }
.stage-celestial { animation: petStarShine 2.5s ease-in-out infinite; }
.stage-primordial { animation: petDarkThunder 2s ease-in-out infinite; }
.stage-chaos { animation: petRainbowShift 3s ease-in-out infinite; }
.stage-supreme { animation: petSupremeGlow 1.5s ease-in-out infinite; }
@keyframes petBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes petPulseGlow {
0%, 100% { filter: brightness(1.1) drop-shadow(0 0 6px gold); }
50% { filter: brightness(1.2) drop-shadow(0 0 12px gold); }
}
@keyframes petRotateHalo {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes petBreathScale {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.1) saturate(1.2); }
}
@keyframes petGoldenGlow {
0%, 100% { filter: brightness(1) drop-shadow(0 0 18px gold); }
50% { filter: brightness(1.1) drop-shadow(0 0 30px gold); }
}
@keyframes petSupremeGlow {
0%, 100% { filter: brightness(1.1) drop-shadow(0 0 40px gold); }
50% { filter: brightness(1.3) drop-shadow(0 0 60px gold) drop-shadow(0 0 20px #ff6b6b); }
}
@keyframes petFloatParticles {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-3px) rotate(1deg); }
75% { transform: translateY(3px) rotate(-1deg); }
}
@keyframes petStarShine {
0%, 100% { filter: brightness(1.1) drop-shadow(0 0 24px white); }
50% { filter: brightness(1.2) drop-shadow(0 0 36px white) drop-shadow(0 0 12px cyan); }
}
@keyframes petDarkThunder {
0%, 100% { filter: brightness(1) drop-shadow(0 0 30px #c0392b); }
10% { filter: brightness(1.4) drop-shadow(0 0 50px #e74c3c); }
20% { filter: brightness(1) drop-shadow(0 0 30px #c0392b); }
}
@keyframes petRainbowShift {
0% { filter: hue-rotate(0deg) saturate(1.5); }
100% { filter: hue-rotate(360deg) saturate(1.5); }
}
@keyframes petPurplePulse {
0%, 100% { filter: brightness(1.1) drop-shadow(0 0 24px #9b59b6); }
50% { filter: brightness(1.2) drop-shadow(0 0 36px #8e44ad); }
}
/* ========== 宠物PNG大图卡片样式（桌面端） ========== */
.pet-hero-container {
width: calc(100% + 30px);
aspect-ratio: 1 / 1;
margin-left: -15px;
margin-right: -15px;
margin-top: 0;
margin-bottom: 8px;
cursor: pointer;
border-radius: 0 0 18px 18px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(80,40,120,0.10), 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
position: relative;
box-sizing: border-box;
background: linear-gradient(160deg, #faf9fd 0%, #f3f1f8 50%, #eae6f0 100%);
}
.pet-hero-container:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
.pet-hero-png {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
filter: drop-shadow(0 2px 6px rgba(80,40,120,0.12));
}
.pet-hero-container:hover .pet-hero-png {
transform: scale(1.08);
filter: drop-shadow(0 4px 10px rgba(80,40,120,0.18));
}
font-size: 64px;
}
.pet-hero-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 38%;
background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 55%, transparent 100%);
pointer-events: none;
border-radius: 0 0 18px 18px;
}
/* 宠物呼吸动画 - 主界面宠物PNG大图 */
@keyframes pet-hero-breathe {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3)); }
50% { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)); }
}
/* ========== 水印遮罩优化 ========== */
.pet-hero-image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
animation: pet-hero-breathe 3.5s ease-in-out infinite;
}
/* 积分主界面统一呼吸动效 */
@keyframes pet-level-breathe {
0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(255, 107, 0, 0.35); }
50% { transform: scale(1.06); box-shadow: 0 3px 12px rgba(255, 140, 0, 0.5); }
}
@keyframes pet-name-breathe {
0%, 100% { text-shadow: 0 0 0 transparent; }
50% { text-shadow: 0 0 8px rgba(0, 180, 220, 0.35); }
}
@keyframes pet-score-breathe {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.12) saturate(1.1); }
}
@keyframes pet-grad-icon-breathe {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.08); filter: brightness(1.08); }
}
.pet-hero-image-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 28px;
background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, transparent 100%);
pointer-events: none;
z-index: 2;
}
/* 删除通知按钮样式 */
.delete-notification-btn {
background: rgba(231, 76, 60, 0.1);
color: #e74c3c;
border: none;
border-radius: 4px;
padding: 2px 5px;
font-size: 0.9em;
cursor: pointer;
margin-left: 5px;
transition: all 0.2s ease;
}
.delete-notification-btn:hover {
background: rgba(231, 76, 60, 0.2);
transform: scale(1.1);
}
/* 重要通知样式 */
.notification-item.important-notification {
border-left: 4px solid #ff4757;
background: linear-gradient(135deg, #fff3e0, #ffffff);
}
.notification-item.important-notification.unread {
background: linear-gradient(135deg, #ffe0e0, #fff3e0);
border-left-color: #e74c3c;
}
/* 通知详情区域 */
.notification-details {
margin: 8px 0;
padding: 8px;
background: rgba(0, 0, 0, 0.03);
border-radius: 6px;
}
.notification-master, .notification-student {
margin: 3px 0;
font-size: 0.9em;
}
.notification-master {
color: #7f8c8d;
}
.notification-student {
color: #2c3e50;
font-weight: 600;
}
/* 操作按钮区域 */
.notification-actions {
display: flex;
gap: 10px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.action-btn {
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.85em;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
}
.accept-btn {
background: linear-gradient(45deg, #27ae60, #2ecc71);
color: white;
}
.accept-btn:hover {
background: linear-gradient(45deg, #229954, #27ae60);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(39, 174, 96, 0.3);
}
.reject-btn {
background: linear-gradient(45deg, #e74c3c, #c0392b);
color: white;
}
.reject-btn:hover {
background: linear-gradient(45deg, #c0392b, #a93226);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(231, 76, 60, 0.3);
}
.action-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
/* 操作提示 */
.notification-action-hint {
margin-top: 8px;
padding: 6px 8px;
background: rgba(52, 152, 219, 0.1);
border-radius: 4px;
border-left: 3px solid #3498db;
}
.notification-action-hint small {
color: #2980b9;
font-style: italic;
}
/* 标记已读动画 */
.notification-item.marked-read {
animation: markedReadAnimation 0.5s ease;
}
@keyframes markedReadAnimation {
0% { transform: scale(1); background: #fff3e0; }
50% { transform: scale(1.02); background: #e8f5e8; }
100% { transform: scale(1); background: #f0f0f0; opacity: 0.6; }
}
/* 点击交互反馈 */
.notification-item.clicked {
animation: clickFeedback 0.3s ease;
}
@keyframes clickFeedback {
0% { transform: scale(1); }
50% { transform: scale(0.98); }
100% { transform: scale(1); }
}
/* 模态窗口动画 */
.notification-modal-overlay.show {
animation: modalFadeIn 0.3s ease;
}
.notification-modal-overlay.hide {
animation: modalFadeOut 0.2s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* 无通知页面的增强样式 */
.no-notifications small {
display: block;
margin-top: 10px;
color: #999;
font-style: italic;
}
.mark-all-read-btn.completed {
background: #95a5a6;
cursor: not-allowed;
}
.notification-time {
color: #666;
font-weight: 500;
}
.notification-type {
background: #ff6b6b;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8em;
font-weight: bold;
}
.notification-content {
color: #333;
line-height: 1.5;
margin-bottom: 5px;
}
.notification-master {
color: #666;
font-style: italic;
font-size: 0.9em;
}
.notification-student {
color: #333;
font-weight: bold;
font-size: 1em;
}
.notification-type-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.mark-all-read-btn {
background: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.mark-all-read-btn:hover {
background: #45a049;
}
/* 通知操作按钮样式 */
.notification-actions {
margin-top: 12px;
display: flex;
gap: 10px;
justify-content: center;
}
.action-btn {
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
transition: all 0.3s ease;
}
.accept-btn {
background: linear-gradient(45deg, #4CAF50, #45a049);
color: white;
}
.accept-btn:hover {
background: linear-gradient(45deg, #45a049, #3d8b40);
transform: translateY(-1px);
}
.reject-btn {
background: linear-gradient(45deg, #f44336, #d32f2f);
color: white;
}
.reject-btn:hover {
background: linear-gradient(45deg, #d32f2f, #c62828);
transform: translateY(-1px);
}
/* 空状态样式 */
.no-pairs-message {
text-align: center;
padding: 40px 20px;
color: #666;
font-size: 1.1em;
}
.no-pairs-message .empty-icon {
font-size: 3em;
margin-bottom: 15px;
opacity: 0.5;
}
.close-modal-btn {
background: #9E9E9E;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.close-modal-btn:hover {
background: #757575;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes petInfoBounce {
0% { transform: scale(0.8); opacity: 0; }
50% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.available-coins {
text-align: center;
margin-top: 10px;
font-size: 0.9em;
color: #ff922b;
font-weight: bold;
}
/* 响应式布局调整 */
@media (max-width: 1200px) {
.students-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* 成就系统响应式 */
.achievement-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* 积分目标系统响应式 */
.progress-stats {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
}
/* 平板设备专用优化 (768px-1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
.nav-modules {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.group-cards {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.store-items {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.random-call-display {
font-size: 4em;
}
/* 宠物游戏界面 */
.pet-game-container {
padding: 20px;
}
.game-area {
width: 80%;
height: 60vh;
}
}
@media (max-width: 768px) {
/* 成就系统响应式 */
.achievement-grid {
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 12px;
}
.achievement-item {
padding: 12px;
}
/* 积分目标系统响应式 */
#scoreGoals {
padding: 15px;
}
.goal-filters {
flex-wrap: wrap;
gap: 8px;
}
.goal-filters button {
padding: 6px 12px;
font-size: 13px;
}
.goal-meta {
flex-direction: column;
gap: 8px;
}
.progress-stats {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stat-item {
padding: 10px;
}
.stat-value {
font-size: 20px;
}
.students-grid {
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 12px;
}
/* 宠物信息样式 */
/* 宠物信息样式 */
/* ======== 宠物PNG大图卡片样式 (banchong.cn风格) ======== */
.pet-hero-section {
display: block;
width: 100%;
}
.pet-hero-container {
width: calc(100% + 30px);
aspect-ratio: 1 / 1;
margin-left: -15px;
margin-right: -15px;
margin-top: 0;
margin-bottom: 8px;
cursor: pointer;
border-radius: 0 0 18px 18px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(80,40,120,0.10), 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
position: relative;
box-sizing: border-box;
flex-shrink: 0;
min-height: 0;
height: auto;
background: linear-gradient(160deg, #faf9fd 0%, #f3f1f8 50%, #eae6f0 100%);
}
.pet-hero-container:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.pet-hero-png {
display: block;
width: 100%;
height: 100%;
object-fit: cover !important;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: drop-shadow(0 4px 10px rgba(80,40,120,0.15));
}
.pet-hero-container:hover .pet-hero-png {
transform: scale(1.08);
filter: drop-shadow(0 6px 16px rgba(80,40,120,0.22));
}
.pet-hero-fallback-emoji {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
}
.pet-hero-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 38%;
background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 55%, transparent 100%);
pointer-events: none;
border-radius: 0 0 18px 18px;
}
/* ======== 新宠物信息行与进度条样式 ======== */
.pet-info-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 4px;
width: 100%;
padding: 0 4px;
}
.pet-type-name {
font-size: 15px;
font-weight: 700;
color: #222;
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.pet-level-badge {
display: inline-block;
background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
color: #fff;
font-size: 13px;
font-weight: 800;
padding: 3px 12px;
border-radius: 14px;
box-shadow: 0 2px 6px rgba(255,107,0,0.35);
animation: pet-level-breathe 3s ease-in-out infinite;
letter-spacing: 0.5px;
}
/* ========================================== */
.pet-hero-info-bar {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 2;
gap: 4px;
}
.pet-hero-name {
color: #fff;
font-size: 12px;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,0.7);
max-width: 55%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.2px;
}
.pet-hero-level {
color: #ffd700;
font-size: 11px;
font-weight: 700;
background: rgba(0,0,0,0.50);
padding: 2px 10px;
border-radius: 20px;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
letter-spacing: 0.3px;
white-space: nowrap;
}
.pet-hero-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.pet-hero-badge.ultimate {
background: linear-gradient(135deg, #ff6b35, #ffd700);
animation: badgePulse 2s ease-in-out infinite;
}
.pet-hero-badge.advanced {
background: linear-gradient(135deg, #667eea, #764ba2);
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
/* 小尺寸PNG图标（排行榜等场景） */
.pet-png-icon-small {
display: inline-block;
vertical-align: middle;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.2s ease;
}
.pet-png-icon-small:hover {
transform: scale(1.15);
}
/* 响应式调整 */
@media (max-width: 768px) {
.pet-hero-container {
width: calc(100% + 30px);
aspect-ratio: 1 / 1;
margin-left: -15px;
margin-right: -15px;
margin-top: 0;
margin-bottom: 8px;
border-radius: 0 0 14px 14px;
box-sizing: border-box;
overflow: hidden;
background: linear-gradient(135deg, #00d4ff 0%, #0099ff 20%, #0066ff 40%, #00ccff 60%, #00ffcc 80%, #00d4ff 100%);
}
.pet-hero-image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pet-hero-png {
display: block;
width: 100%;
height: 100%;
object-fit: cover !important;
}
.pet-hero-name {
font-size: 11px;
}
.pet-hero-level {
font-size: 10px;
}
}
/* 宠物领养中心 - 幼年期PNG图片样式 */
.pet-adopt-image {
object-fit: contain;
}
.pet-adopt-fallback {
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
}
.student-pet {
position: relative;
margin-top: 0;
padding: 0;
border-top: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.student-pet:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.pet-name-overlay {
position: absolute;
top: 6px;
left: 6px;
z-index: 99;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 6px;
background: rgba(0, 0, 0, 0.72);
border-radius: 22px;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pet-name-overlay-pet {
position: absolute;
bottom: 6px;
right: 6px;
z-index: 99;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.72);
border-radius: 22px;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pet-name-overlay-pet .pet-name-text {
color: #fff;
font-size: 13px;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
white-space: nowrap;
}
.pet-name-avatar {
width: 24px; height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pet-name-text {
color: #fff;
font-size: 13px;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
white-space: nowrap;
}
.pet-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
padding: 10px;
border-radius: 8px;
transition: background-color 0.3s;
width: 100%;
}
.pet-info:hover {
background-color: #f0f0f0;
}
/* 宠物基本信息样式 */
.pet-basic-info {
text-align: center;
width: 100%;
padding: 0 4px;
}
/* 宠物展开/收起指示器样式 */
.pet-toggle-indicator {
font-size: 0.75em;
color: #888;
transition: transform 0.35s ease;
margin: 3px auto 0;
display: block;
opacity: 0.7;
}
/* 宠物详细信息容器样式 */
.pet-details-container {
margin-top: 6px;
padding: 10px 8px;
background: linear-gradient(135deg, #faf8ff, #f4f0fa);
border-radius: 10px;
border: 1px solid #e8e0f0;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}
/* 口粮购买下拉菜单样式 */
.quick-buy-section {
position: relative;
margin-top: 10px;
}
.quick-buy-btn.quick {
width: 100%;
display: block;
}
.quick-buy-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: white;
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
}
.quick-buy-dropdown .quick-buy-btn {
display: block;
width: 100%;
text-align: left;
margin: 2px 0;
padding: 8px 12px;
border-radius: 4px;
}
.pet-icon {
font-size: 55px;
transition: transform 0.3s ease, font-size 0.3s ease;
cursor: pointer;
display: block;
margin: 0 auto;
}
.pet-icon:hover {
transform: scale(1.1);
}
.pet-icon.baby-pet-animation {
font-size: 24px;
animation: bounce 1s infinite;
}
.pet-icon.teen-pet-animation {
font-size: 32px;
animation: bounce 0.8s infinite;
}
.pet-icon.adult-pet-animation {
font-size: 40px;
animation: bounce 0.6s infinite;
}
.pet-icon.ultimate-pet-animation {
font-size: 48px;
animation: bounce 0.5s infinite;
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
/* 宠物3D效果 */
.pet-icon-3d {
position: relative;
display: inline-block;
perspective: 1000px;
transition: transform 0.3s ease;
}
.pet-icon-3d:hover {
transform: scale(1.3) rotateY(15deg) rotateX(10deg);
}
/* 翅膀效果 */
.pet-wings {
position: absolute;
top: 50%;
width: 80px;
height: 40px;
background: linear-gradient(45deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform-origin: center center;
opacity: 0.8;
animation: wingFlap 1.5s infinite ease-in-out;
}
.pet-wings.left {
left: -60px;
transform: translateY(-50%) rotateY(0deg) rotateZ(20deg);
}
.pet-wings.right {
right: -60px;
transform: translateY(-50%) rotateY(180deg) rotateZ(20deg);
}
@keyframes wingFlap {
0%, 100% { transform: translateY(-50%) rotateZ(20deg) scaleY(1); }
50% { transform: translateY(-50%) rotateZ(-10deg) scaleY(1.2); }
}
/* 特效粒子 */
.pet-particles {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
pointer-events: none;
animation: particleFloat 3s infinite linear;
}
@keyframes particleFloat {
0% {
opacity: 0;
transform: translateY(0) scale(0);
}
10% {
opacity: 1;
transform: translateY(-10px) scale(1);
}
90% {
opacity: 1;
transform: translateY(-50px) scale(1);
}
100% {
opacity: 0;
transform: translateY(-60px) scale(0);
}
}
/* 不同宠物品种的翅膀颜色 */
/* 星云翅膀 - 垂耳兔 */
.wings-nebula {
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}
/* 钻石翅膀 - 黄金仓鼠 */
.wings-diamond {
background: linear-gradient(45deg, #ffffff, #e0e0e0, #ffffff);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}
/* 天鹅翅膀 - 柯尔鸭 */
.wings-swan {
background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* 彩虹翅膀 - 玄凤鹦鹉 */
.wings-rainbow {
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);
}
/* 天使翅膀 - 英短猫 */
.wings-angel {
background: linear-gradient(45deg, #ffffff, #f0f8ff, #ffffff);
box-shadow: 0 0 15px rgba(240, 248, 255, 0.8);
}
/* 蝙蝠翅膀 - 蜜袋鼯 */
.wings-bat {
background: linear-gradient(45deg, #333333, #555555, #333333);
box-shadow: 0 0 15px rgba(51, 51, 51, 0.8);
}
/* 水纹翅膀 - 金鱼 */
.wings-water {
background: linear-gradient(45deg, #00bfff, #87ceeb, #00bfff);
box-shadow: 0 0 15px rgba(0, 191, 255, 0.8);
}
/* 树叶翅膀 - 考拉 */
.wings-leaf {
background: linear-gradient(45deg, #00ff00, #98fb98, #00ff00);
box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}
/* 海浪翅膀 - 海豚 */
.wings-wave {
background: linear-gradient(45deg, #4682b4, #87ceeb, #4682b4);
box-shadow: 0 0 15px rgba(70, 130, 180, 0.8);
}
/* 冰晶翅膀 - 小刺猬 */
.wings-ice {
background: linear-gradient(45deg, #b0e0e6, #e0ffff, #b0e0e6);
box-shadow: 0 0 15px rgba(176, 224, 230, 0.8);
}
/* 枫叶翅膀 - 小松鼠 */
.wings-maple {
background: linear-gradient(45deg, #ff4500, #ff6347, #ff4500);
box-shadow: 0 0 15px rgba(255, 69, 0, 0.8);
}
/* 冰翼翅膀 - 小企鹅 */
.wings-icewing {
background: linear-gradient(45deg, #87cefa, #b0e0e6, #87cefa);
box-shadow: 0 0 15px rgba(135, 206, 250, 0.8);
}
/* 竹叶片翅膀 - 大熊猫 */
.wings-bamboo {
background: linear-gradient(45deg, #32cd32, #90ee90, #32cd32);
box-shadow: 0 0 15px rgba(50, 205, 50, 0.8);
}
/* 火焰翅膀 - 小熊崽 */
.wings-flame {
background: linear-gradient(45deg, #ff4500, #ff6347, #ff4500);
box-shadow: 0 0 15px rgba(255, 69, 0, 0.9);
}
/* 贝壳翅膀 - 小乌龟 */
.wings-shell {
background: linear-gradient(45deg, #ffdead, #f5deb3, #ffdead);
box-shadow: 0 0 15px rgba(255, 222, 173, 0.8);
}
/* 星光翅膀 - 独角兽 */
.wings-starlight {
background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}
/* 火焰龙翼 - 小龙 */
.wings-dragon {
background: linear-gradient(45deg, #ff0000, #ff6347, #ff0000);
box-shadow: 0 0 20px rgba(255, 0, 0, 0.9);
}
/* 波浪翅膀 - 糊虎鲸 */
.wings-sea {
background: linear-gradient(45deg, #1e90ff, #87ceeb, #1e90ff);
box-shadow: 0 0 15px rgba(30, 144, 255, 0.8);
}
/* 凤凰金翼 - 凤达凰 */
.wings-phoenix {
background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.9);
}
/* 不同宠物的特效动画 */
@keyframes gentleFloat {
0%, 100% { transform: translateY(0) rotateZ(0deg); }
50% { transform: translateY(-15px) rotateZ(5deg); }
}
@keyframes elegantSwim {
0%, 100% { transform: translateX(0) translateY(0) rotateY(0deg); }
50% { transform: translateX(10px) translateY(-5px) rotateY(10deg); }
}
/* 弹跳动画类 */
.bounce-animation {
animation: bounce 1s infinite;
}
/* 为标题添加动画效果 */
.pet-center-title {
animation: floatIn 0.8s ease-out forwards, pulse 2s infinite;
}
/* 为按钮添加更多互动效果 */
.adopt-btn:hover {
transform: translate(-50%, -50%) scale(1.05);
}
/* 为宠物性格和细节添加渐入效果 */
.pet-personality, .pet-details {
animation: floatIn 1s ease-out forwards;
}
/* 宠物名称样式 */
.pet-name {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
}
.pet-details {
margin-bottom: 12px;
}
.student-name {
font-size: 1.1em;
}
}
@media (max-width: 480px) {
/* 成就系统响应式 */
.achievement-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.achievement-item {
padding: 10px;
}
.achievement-item h4 {
font-size: 14px;
}
/* 积分目标系统响应式 */
.goal-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.progress-stats {
grid-template-columns: 1fr;
}
.overall-progress {
flex-direction: column;
align-items: stretch;
}
.students-grid {
grid-template-columns: 1fr;
}
.student-card-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* 新增：学生积分历史浮动窗口样式 */
.student-history-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.student-history-content {
background: white;
padding: 20px;
border-radius: 15px;
width: 700px;
max-width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.student-history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #d1e9ff;
}
.student-history-header h3 {
margin: 0;
color: #339af0;
}
.student-history-list {
max-height: 400px;
overflow-y: auto;
margin: 15px 0;
}
.student-history-item {
padding: 10px;
margin: 8px 0;
background: #f0f8ff;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.student-history-item.positive {
border-left: 4px solid #51cf66;
}
.student-history-item.negative {
border-left: 4px solid #ff6b6b;
}
.student-history-item.redeem {
border-left: 4px solid #ff922b;
}
.history-change {
font-weight: bold;
margin-right: 10px;
}
.history-change.positive {
color: #51cf66;
}
.history-change.negative {
color: #ff6b6b;
}
.history-change.redeem {
color: #ff922b;
}
/* 响应式布局 */
@media (max-width: 1024px) {
.main-container {
flex-direction: column;
}
.sidebar {
width: 100%;
position: relative;
top: 0;
max-height: none;
}
.content-area {
flex-direction: column;
}
.main-content {
min-width: auto;
}
.rankings {
max-height: none;
position: relative;
top: 0;
}
}
@media (max-width: 768px) {
body {
margin: 10px;
gap: 10px;
}
.header {
font-size: 1.8em;
margin: 0 10px 10px;
padding: 10px;
}
.sidebar {
padding: 15px;
}
.nav-btn {
padding: 8px 12px;
font-size: 0.9em;
}
.main-content {
padding: 15px;
}
.controls {
flex-direction: column;
align-items: stretch;
}
.controls button, .controls input {
width: 100%;
margin: 5px 0;
}
table {
font-size: 0.9em;
}
th, td {
padding: 8px 5px;
}
.random-call-display {
font-size: 3em;
}
.group-cards, .star-cards, .store-items {
grid-template-columns: 1fr;
}
.fullscreen-floating .name {
font-size: 4em;
}
.fullscreen-floating .title {
font-size: 2em;
}
.adjustment-area {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
}
@media (max-width: 480px) {
.header {
font-size: 1.5em;
}
.nav-module h3 {
font-size: 1.1em;
}
.main-content, .sidebar, .rankings {
padding: 10px;
}
table {
font-size: 0.8em;
}
th, td {
padding: 6px 3px;
}
button {
padding: 6px 12px;
font-size: 0.9em;
}
.random-call-display {
font-size: 2em;
}
.fullscreen-floating .name {
font-size: 3em;
}
.fullscreen-floating .title {
font-size: 1.5em;
}
.adjustment-area {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
}
/* 按钮点击脉冲动画 */
.button-pulse {
animation: buttonPulse 0.6s ease-out;
}
@keyframes buttonPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* 烟花爆炸动画 */
@keyframes fireworkExplode {
0% {
transform: scale(0) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(2) rotate(180deg);
opacity: 0.8;
}
100% {
transform: scale(3) rotate(360deg);
opacity: 0;
}
}
/* 星星闪烁动画 */
/* 心跳动画 */
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
14% {
transform: scale(1.3);
}
28% {
transform: scale(1);
}
42% {
transform: scale(1.3);
}
70% {
transform: scale(1);
}
}
/* 旋转木马动画 */
.carousel-rotate {
animation: carouselRotate 4s linear infinite;
}
@keyframes carouselRotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.student-application, .master-selection {
margin: 20px 0;
padding: 20px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 2px solid var(--border-color);
}
.student-application h4, .master-selection h4 {
margin: 0 0 20px 0;
color: var(--primary-color);
font-size: 1.3em;
display: flex;
align-items: center;
gap: 8px;
}
.application-enhanced, .selection-enhanced {
display: flex;
flex-direction: column;
gap: 25px;
}
.student-selection-cards h5, .master-recommendations h5,
.master-selection-area h5, .applicant-display h5,
.direct-recruitment h5 {
margin: 0 0 15px 0;
color: var(--text-secondary);
font-size: 1.1em;
font-weight: 600;
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
margin-bottom: 10px;
}
.student-card, .master-card, .applicant-card, .available-student-card {
background: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.student-card:hover, .master-card:hover,
.applicant-card:hover, .available-student-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: var(--primary-color);
}
.student-card.selected, .master-card.selected,
.applicant-card.selected, .available-student-card.selected {
border-color: var(--primary-color);
background: var(--primary-light);
color: white;
}
.card-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: var(--primary-light);
color: white;
}
.card-name {
font-size: 1.1em;
font-weight: 600;
text-align: center;
margin-bottom: 5px;
}
.card-info {
font-size: 0.9em;
color: var(--text-secondary);
text-align: center;
line-height: 1.4;
}
.card-stats {
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-color);
font-size: 0.85em;
}
.master-type-tag {
display: inline-block;
padding: 3px 8px;
background: var(--success-color);
color: white;
border-radius: 12px;
font-size: 0.8em;
margin-top: 8px;
}
.quick-application-form, .direct-recruitment-form {
background: var(--bg-tertiary);
border-radius: var(--radius-md);
padding: 20px;
margin-top: 15px;
border: 1px solid var(--border-color);
}
.selected-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.student-info, .master-info {
background: var(--card-bg);
padding: 15px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: var(--text-primary);
}
.form-group textarea, .form-group select {
width: 100%;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 14px;
transition: border-color 0.3s ease;
}
.form-group textarea:focus, .form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.btn-submit, .btn-cancel {
padding: 10px 20px;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-submit {
background: var(--success-color);
color: white;
}
.btn-submit:hover {
background: #45a049;
transform: translateY(-1px);
}
.btn-cancel {
background: var(--text-secondary);
color: white;
}
.btn-cancel:hover {
background: #666;
transform: translateY(-1px);
}
.applicants-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
}
.applicant-card {
position: relative;
}
.application-status {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8em;
font-weight: 600;
}
.status-pending {
background: #ffc107;
color: #000;
}
.status-approved {
background: var(--success-color);
color: white;
}
.status-rejected {
background: var(--danger-color);
color: white;
}
.action-buttons {
display: flex;
gap: 8px;
margin-top: 10px;
}
.btn-approve, .btn-reject, .btn-recruit {
padding: 6px 12px;
border: none;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-approve {
background: var(--success-color);
color: white;
}
.btn-approve:hover {
background: #45a049;
}
.btn-reject {
background: var(--danger-color);
color: white;
}
.btn-reject:hover {
background: #da190b;
}
.btn-recruit {
background: var(--primary-color);
color: white;
}
.btn-recruit:hover {
background: #0056b3;
}
.section-desc {
color: var(--text-secondary);
font-style: italic;
margin-bottom: 15px;
}
.selected-master-info {
background: var(--bg-tertiary);
padding: 15px;
border-radius: var(--radius-md);
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
.no-applicants, .no-students {
text-align: center;
color: var(--text-secondary);
font-style: italic;
padding: 30px;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
border: 1px dashed var(--border-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
.cards-container {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 10px;
}
.selected-info {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
}
.applicants-list {
grid-template-columns: 1fr;
}
}
/* 100级宠物高贵效果关键帧动画 */
/* 已删除未使用的 premium 动画效果 (premiumRaysSpin, premiumStarTwinkle, premiumFloat, premiumBorderGlow) */
/* 移除所有宠物图标的动态阴影效果 */
.pet-icon-3d::before {
display: none !important;
}
/* 全面禁用所有 pet-icon-3d 特效 */
div.pet-icon-3d,
div.pet-icon-3d:hover,
div.pet-icon-3d:active,
div.pet-icon-3d:focus,
div.pet-icon-3d.clicked {
/* 移除所有变换和3D效果 */
transform: none !important;
transform-style: flat !important;
perspective: none !important;
perspective-origin: center center !important;
/* 移除所有过渡效果 */
transition: none !important;
animation: none !important;
/* 移除所有阴影和滤镜效果 */
text-shadow: none !important;
filter: none !important;
box-shadow: none !important;
/* 移除所有边框和背景效果 */
border: none !important;
background: none !important;
/* 移除所有伪元素 */
&::before,
&::after {
display: none !important;
content: none !important;
}
}
/* 优化学生卡片中宠物布局的样式 */
.pet-info:hover {
background-color: #f0f0f0;
}
/* 宠物图标样式保持13.8版本一致 */
/* 宠物名称样式保持13.8版本一致 */
/* 宠物等级和经验样式保持13.8版本一致 */
.pet-toggle-indicator {
font-size: 0.8em !important;
color: #666 !important;
transition: transform 0.3s ease !important;
margin-left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background-color: #f0f0f0 !important;
}
.pet-toggle-indicator:hover {
background-color: #e0e0e0 !important;
}
.pet-details-container {
margin-top: 8px !important;
padding: 15px !important;
background-color: white !important;
border-radius: 10px !important;
border: 1px solid #e0e0e0 !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
.pet-details {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.pet-nickname-container {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
padding: 8px 0 !important;
}
.pet-nickname-label {
font-weight: bold !important;
color: #555 !important;
font-size: 0.95em !important;
}
.pet-nickname {
background-color: #f0f8ff !important;
padding: 6px 12px !important;
border-radius: 15px !important;
border: 1px dashed #b3d4fc !important;
color: #3182ce !important;
font-size: 0.95em !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.pet-nickname:hover {
background-color: #e6f2ff !important;
border-color: #63b3ed !important;
}
.pet-nickname-input {
padding: 6px 12px !important;
border: 1px solid #b3d4fc !important;
border-radius: 15px !important;
font-size: 0.95em !important;
width: 150px !important;
outline: none !important;
}
.pet-nickname-input:focus {
border-color: #63b3ed !important;
box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2) !important;
}
.pet-nickname-changes {
font-size: 0.8em !important;
color: #888 !important;
margin-left: auto !important;
}
.pet-growth {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 8px 0 !important;
}
.growth-progress-bar {
height: 8px !important;
background-color: #e0e0e0 !important;
border-radius: 4px !important;
overflow: hidden !important;
width: 100% !important;
}
.growth-progress {
height: 100% !important;
background: linear-gradient(90deg, #4caf50 0%, #81c784 100%) !important;
border-radius: 4px !important;
transition: width 0.5s ease !important;
}
.growth-text {
font-size: 0.85em !important;
color: #666 !important;
text-align: right !important;
}
.growth-status {
padding: 6px 12px !important;
border-radius: 15px !important;
font-size: 0.85em !important;
font-weight: bold !important;
text-align: center !important;
margin: 8px 0 !important;
}
.growth-status.normal {
background-color: #e8f5e9 !important;
color: #2e7d32 !important;
}
.growth-status.paused {
background-color: #fff3e0 !important;
color: #ef6c00 !important;
}
.growth-status.accelerated {
background-color: #f3e5f5 !important;
color: #7b1fa2 !important;
}
.pet-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
padding: 10px;
border-radius: 8px;
transition: background-color 0.3s;
width: 100%;
}
.pet-info:hover {
background-color: #f0f0f0;
}
.pet-basic-info {
text-align: center !important;
width: 100% !important;
}
.pet-info .pet-name {
font-size: 1.15em !important;
font-weight: 700 !important;
color: #2d2d2d !important;
margin: 0 0 2px 0 !important;
letter-spacing: 0.3px;
}
.pet-level {
font-size: 0.85em !important;
color: #777 !important;
margin: 0 !important;
font-weight: 500;
}
.pet-exp {
font-size: 0.78em !important;
color: #999 !important;
margin: 1px 0 0 0;
}
.pet-toggle-indicator {
font-size: 0.8em !important;
color: #666 !important;
transition: transform 0.3s ease !important;
margin: 5px auto 0 !important;
display: block !important;
}
.pet-details-container {
margin-top: 5px !important;
padding: 12px !important;
background-color: #f9f9f9 !important;
border-radius: 8px !important;
border: 1px solid #eee !important;
width: 100% !important;
}
.pet-details {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.pet-nickname-container {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.pet-nickname-label {
font-weight: bold !important;
color: #555 !important;
font-size: 0.9em !important;
}
.pet-nickname {
background-color: #fff !important;
padding: 4px 10px !important;
border-radius: 12px !important;
border: 1px solid #ddd !important;
color: #333 !important;
font-size: 0.9em !important;
cursor: pointer !important;
}
.pet-nickname-input {
padding: 4px 10px !important;
border: 1px solid #ddd !important;
border-radius: 12px !important;
font-size: 0.9em !important;
width: 120px !important;
outline: none !important;
}
.pet-nickname-changes {
font-size: 0.8em !important;
color: #888 !important;
margin-left: 8px !important;
}
.pet-growth {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
margin: 8px 0 !important;
}
.growth-progress-bar {
height: 6px !important;
background-color: #e0e0e0 !important;
border-radius: 3px !important;
overflow: hidden !important;
width: 100% !important;
}
.growth-progress {
height: 100% !important;
background-color: #4caf50 !important;
border-radius: 3px !important;
}
.growth-text {
font-size: 0.8em !important;
color: #666 !important;
text-align: center !important;
margin: 0 !important;
}
.growth-status {
padding: 4px 10px !important;
border-radius: 12px !important;
font-size: 0.8em !important;
font-weight: bold !important;
text-align: center !important;
margin: 5px 0 !important;
}
.growth-status.normal {
background-color: #e8f5e9 !important;
color: #2e7d32 !important;
}
.growth-status.paused {
background-color: #fff3e0 !important;
color: #ef6c00 !important;
}
.growth-status.accelerated {
background-color: #f3e5f5 !important;
color: #7b1fa2 !important;
}
/* v2 风格宠物进度条 */
.student-pet .card-progress-bar {
width: 100%;
height: 8px;
background: #F0F0F0;
border-radius: 4px;
overflow: hidden;
margin: 6px 0;
}
.student-pet .card-progress-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
/* 稀有度分色 */
.card-progress-fill.rarity-common { background: #B0BEC5; }
.card-progress-fill.rarity-uncommon { background: #66BB6A; }
.card-progress-fill.rarity-rare { background: #42A5F5; }
.card-progress-fill.rarity-epic { background: #AB47BC; }
.card-progress-fill.rarity-legendary { background: #FF8C00; }
/* 宠物信息行：类型名 + LV等级 */
.pet-info-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
padding: 0 8px;
}
.pet-type-name {
font-size: 13px;
font-weight: 600;
color: #5D4037;
}
.pet-level-badge {
font-size: 12px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #FF7043, #FF5722);
padding: 2px 8px;
border-radius: 10px;
}
/* 优化宠物小名样式 */
.pet-nickname-small {
font-size: 0.8em !important;
color: #666 !important;
cursor: pointer !important;
margin-left: auto !important;
margin-right: 10px !important;
}
/* 隐藏成长进度部分 */
.pet-growth {
display: none !important;
}
/* 调整学生头像位置，向右移动一点 */
.student-avatar {
margin-left: 8px !important;
}
/* 期末考试倒计时样式 */
.exam-countdown {
background: linear-gradient(45deg, #ff6b6b, #ee5a52);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
animation: pulse 1.5s ease-in-out infinite;
font-family: 'Comic Neue', Arial, sans-serif;
display: none;
align-items: center;
gap: 5px;
margin-right: 10px;
}
.exam-countdown .countdown-number {
font-size: 16px;
color: #ffeaa7;
font-weight: bold;
}
.exam-countdown .countdown-label {
font-size: 12px;
opacity: 0.9;
}
/* 期末考试倒计时样式 - 优化版 */
.exam-countdown {
background: linear-gradient(45deg, #ff6b6b, #ee5a52) !important;
color: white !important;
padding: 15px 25px !important;
border-radius: 30px !important;
font-size: 22px !important;
font-weight: bold !important;
box-shadow: 0 8px 22px rgba(255, 107, 107, 0.7), 0 0 30px rgba(255, 107, 107, 0.4) !important;
animation: pulse 1s ease-in-out infinite !important;
font-family: 'Comic Neue', Arial, sans-serif !important;
display: none !important;
align-items: center !important;
gap: 10px !important;
margin-right: 15px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.exam-countdown .countdown-number {
font-size: 28px !important;
color: #fff9c4 !important;
font-weight: bold !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}
.exam-countdown .countdown-label {
font-size: 16px !important;
opacity: 1 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
/* 增强的脉冲动画 */
@keyframes pulse {
0% { transform: scale(1); }
50% {
transform: scale(1.05);
box-shadow: 0 8px 22px rgba(255, 107, 107, 0.8), 0 0 35px rgba(255, 107, 107, 0.5);
}
100% { transform: scale(1); }
}
/* 平板端 */
@media (max-width: 1024px) {
.main-container { flex-direction: column; }
.sidebar { width: 100%; position: static; }
.rankings { position: static; max-height: none; }
}
/* 手机端 */
@media (max-width: 768px) {
.pet-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.scene-mode-panel { width: 95vw; height: 80vh; }
#startButton { bottom: 20px; right: 20px; padding: 15px 30px; font-size: 1.2em; }
}
/* ===== 积分操作弹窗样式（合并宠物信息） ===== */
.score-modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(3px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: scoreModalFadeIn 0.2s ease;
}
@keyframes scoreModalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.score-modal-new {
background: #ffffff;
border-radius: 16px;
width: 360px;
max-width: 92vw;
max-height: 90vh;
overflow-y: auto;
padding: 0;
box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
animation: scoreModalSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scoreModalSlideUp {
from { transform: translateY(30px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.score-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px 6px;
margin: 0 0 8px;
border-bottom: 1px solid #f0f0f0;
}
.score-modal-student {
display: flex;
align-items: center;
gap: 8px;
}
.score-modal-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.score-modal-student-name {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
}
.score-modal-close {
width: 28px;
height: 28px;
border-radius: 50%;
background: #f0f0f0;
border: none;
cursor: pointer;
font-size: 14px;
color: #999;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: static;
}
.score-modal-close:hover {
background: #e0e0e0;
color: #333;
}
.score-modal-body {
padding: 16px 24px;
}
.score-modal-pet-block {
text-align: center;
margin-bottom: 0;
position: relative;
padding-top: 38px;
}
/* Pet overlay header — student avatar + name + close button overlaid on pet image */
.score-modal-pet-overlay-header {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
z-index: 2;
background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent);
border-radius: 12px 12px 0 0;
}
.score-modal-pet-overlay-header .score-modal-student-name {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.score-modal-pet-overlay-header .score-modal-close {
background: rgba(255,255,255,0.2);
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.score-modal-pet-overlay-header .score-modal-close:hover {
background: rgba(255,255,255,0.35);
color: #fff;
}
.score-modal-pet-img {
width: 180px;
height: auto;
aspect-ratio: 1/1;
border-radius: 16px;
object-fit: cover;
margin: 0 auto;
display: block;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.score-modal-pet-name {
font-size: 18px;
font-weight: 700;
text-align: center;
color: #1a1a2e;
margin: 12px 0 2px;
}
.score-modal-pet-owner {
font-size: 13px;
color: #999;
text-align: center;
margin-bottom: 8px;
}
.score-modal-pet-level {
text-align: center;
font-size: 14px;
font-weight: 600;
color: #f0a500;
margin-bottom: 8px;
}
.score-modal-pet-level .star-icon {
font-size: 16px;
margin-right: 2px;
}
.score-modal-pet-exp-bg {
height: 8px;
border-radius: 4px;
background: #e8e8e8;
margin: 4px auto 0;
width: 220px;
}
.score-modal-pet-exp {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #f7d774, #e8a840);
transition: width 0.3s ease;
}
.score-modal-pet-exp-text {
font-size: 11px;
color: #aaa;
text-align: center;
margin: 4px 0 0;
}
.score-modal-pet-divider {
border-top: 1px dashed #e0e0e0;
margin: 14px auto;
max-width: 280px;
}
.score-modal-section-title {
text-align: center;
font-size: 13px;
color: #999;
margin: 0 0 8px;
}
.score-modal-current {
text-align: center;
margin-bottom: 16px;
}
.score-modal-coin {
font-size: 20px;
vertical-align: middle;
}
.score-modal-total {
font-size: 42px;
font-weight: 800;
color: #e67e22;
margin-left: 6px;
vertical-align: middle;
text-shadow: 0 2px 8px rgba(230,126,34,0.3);
}
.score-modal-select-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 14px;
}
.score-modal-select-label {
font-size: 13px;
color: #666;
white-space: nowrap;
}
.score-modal-select {
flex: 1;
max-width: 220px;
padding: 7px 10px;
font-size: 13px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
color: #333;
outline: none;
cursor: pointer;
transition: border-color 0.2s;
}
.score-modal-select:focus {
border-color: #667eea;
}
.score-modal-ops {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 16px;
}
.score-modal-circle {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
font-size: 22px;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.score-modal-circle:hover {
transform: scale(1.05);
}
.score-modal-minus {
background: #fde8e8;
color: #e74c3c;
}
.score-modal-plus {
background: #e8f8f0;
color: #2ecc71;
}
.score-modal-input {
width: 120px;
height: 44px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #1a1a2e;
border: none;
border-bottom: 2px solid #e0e0e0;
outline: none;
background: transparent;
-moz-appearance: textfield;
}
.score-modal-input::-webkit-outer-spin-button,
.score-modal-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.score-modal-input:focus {
border-color: #667eea;
}
.score-modal-footer {
display: flex;
gap: 12px;
padding: 0 24px 20px;
}
.score-modal-btn {
flex: 1;
padding: 12px 0;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s;
}
.score-modal-confirm {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.score-modal-confirm:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(102,126,234,0.4);
}
.score-modal-cancel {
background: #f0f0f0;
color: #888;
}
.score-modal-cancel:hover {
background: #e0e0e0;
}
.score-action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 153, 255, 0.4);
}
/* ===== 随机点名趣味升级样式 ===== */
.random-call-container-inner {
position: relative;
width: 100%;
}
/* 名牌卡片槽位 */
.random-name-slot {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
min-height: 70px;
margin: 8px;
font-size: 1.8em;
font-weight: bold;
border-radius: 20px;
transition: all 0.15s ease;
}
.random-name-slot .slot-text {
transition: transform 0.08s ease;
}
/* 滚动中的槽位 */
.rolling-slot {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
animation: slotShake 0.1s infinite alternate;
}
@keyframes slotShake {
0% { transform: translateY(-2px); }
100% { transform: translateY(2px); }
}
/* 滚动激活时的显示容器 */
.random-call-display.rolling-active {
animation: bgPulse 0.5s ease-in-out infinite alternate;
}
@keyframes bgPulse {
0% { background: rgba(142, 68, 173, 0.05); }
100% { background: rgba(142, 68, 173, 0.15); }
}
/* 选中后的名牌卡片 */
.selected-name-card {
background: linear-gradient(135deg, #ff6b6b, #ff922b);
color: #fff;
padding: 12px 24px;
border-radius: 18px;
font-size: 1.6em;
font-weight: bold;
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5);
display: inline-flex;
align-items: center;
gap: 10px;
border: 3px solid #fff;
position: relative;
}
.selected-name-card .card-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
color: #fff;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.selected-name-card .card-name {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* 根据选中人数自适应缩放 */
.random-call-display[data-selected="2"] .selected-name-card {
font-size: 1.2em;
padding: 8px 18px;
border-radius: 14px;
}
.random-call-display[data-selected="3"] .selected-name-card,
.random-call-display[data-selected="4"] .selected-name-card {
font-size: 1.0em;
padding: 6px 14px;
border-radius: 12px;
}
.random-call-display[data-selected="5"] .selected-name-card,
.random-call-display[data-selected="6"] .selected-name-card,
.random-call-display[data-selected="7"] .selected-name-card,
.random-call-display[data-selected="8"] .selected-name-card {
font-size: 0.85em;
padding: 5px 10px;
border-radius: 10px;
}
.random-call-display[data-selected="2"] .selected-name-card .card-avatar,
.random-call-display[data-selected="3"] .selected-name-card .card-avatar,
.random-call-display[data-selected="4"] .selected-name-card .card-avatar {
width: 28px;
height: 28px;
font-size: 13px;
}
.random-call-display[data-selected="5"] .selected-name-card .card-avatar,
.random-call-display[data-selected="6"] .selected-name-card .card-avatar,
.random-call-display[data-selected="7"] .selected-name-card .card-avatar,
.random-call-display[data-selected="8"] .selected-name-card .card-avatar {
width: 24px;
height: 24px;
font-size: 11px;
}
/* 弹跳入场动画 */
@keyframes nameBounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.15); }
70% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; }
}
/* 边框闪烁动画 */
@keyframes borderGlow {
0%, 100% { box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5); }
50% { box-shadow: 0 8px 35px rgba(255, 107, 107, 0.9), 0 0 30px rgba(255, 215, 0, 0.6); }
}
/* 彩带粒子容器 */
.confetti-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 10;
}
.confetti-particle {
position: absolute;
top: -10px;
opacity: 0.9;
animation: confettiFall linear forwards;
}
@keyframes confettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}
/* 点名历史记录 */
.call-history-section {
margin-top: 25px;
padding: 15px;
background: rgba(255,255,255,0.9);
border-radius: 15px;
border: 2px solid #dee2e6;
max-height: 250px;
overflow-y: auto;
}
.history-title {
font-size: 16px;
font-weight: bold;
color: #495057;
margin-bottom: 10px;
text-align: left;
padding-bottom: 8px;
border-bottom: 1px solid #e9ecef;
}
.call-history-list .history-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
margin: 4px 0;
background: linear-gradient(90deg, #f8f9fa, #fff);
border-radius: 8px;
font-size: 14px;
animation: historySlideIn 0.3s ease-out forwards;
opacity: 0;
}
@keyframes historySlideIn {
0% { transform: translateX(-20px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.history-time {
color: #868e96;
font-family: monospace;
font-size: 12px;
min-width: 60px;
}
.history-names {
color: #495057;
font-weight: 600;
flex: 1;
}
.history-type {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
white-space: nowrap;
}
/* 响应式调整 */
@media (max-width: 768px) {
.random-name-slot {
min-width: 90px;
min-height: 55px;
font-size: 1.3em;
margin: 5px;
}
.selected-name-card {
font-size: 1.2em;
padding: 8px 16px;
}
.selected-name-card .card-avatar {
width: 28px;
height: 28px;
font-size: 13px;
}
}
/* ========== 积分主界面UI优化 ========== */
/* 顶部操作按钮美化 */
.controls button {
padding: 10px 24px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
margin: 0 4px;
}
.controls button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}
.controls button:active {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
/* 批量清除按钮保持红色警示色调 */
.controls button.delete-btn {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4) !important;
}
.controls button.delete-btn:hover {
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6) !important;
}
/* 删除按钮 - 卡片右上角 */
.pet-delete-topright {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(4px);
color: #fff;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.pet-delete-topright:hover {
background: rgba(255, 71, 87, 0.7);
box-shadow: 0 4px 14px rgba(255, 71, 87, 0.4);
transform: scale(1.1);
}
/* ===== 宠物卡片信息区布局优化 ===== */
.pet-card-info {
position: relative;
padding-bottom: 40px; /* 为右下角小组区留空间 */
}
/* Row1: 学生姓名 — 居中，可点击查看积分历史 */
.pet-info-name-row {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 6px 0 2px 0;
cursor: pointer;
}
.pet-student-name {
font-weight: 700;
font-size: 1.1em;
color: #2c3e50;
transition: color 0.2s;
}
.pet-info-name-row:hover .pet-student-name {
color: #4a6cf7;
text-decoration: underline;
}
/* Row2: 种族 + 名称 + LV — 居中 */
.pet-info-race-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 4px 0 2px 0;
}
.pet-race-label {
font-size: 0.82em;
color: #7a8ba6;
font-weight: 500;
}
.pet-race-name {
font-weight: 700;
font-size: 1.05em;
color: #2c3e50;
animation: pet-name-breathe 3s ease-in-out infinite;
}
.pet-level-badge {
font-size: 0.78em;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
padding: 2px 8px;
border-radius: 10px;
font-weight: 700;
letter-spacing: 0.5px;
animation: pet-level-breathe 3s ease-in-out infinite;
}
/* Row3: 积分 — 醒目居中，金色渐变 */
.pet-score-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: 6px 0 4px 0;
}
.pet-score-icon {
font-size: 1.3em;
}
.pet-score-value {
font-size: 1.6em;
font-weight: 800;
background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #f093fb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
animation: pet-score-breathe 3s ease-in-out infinite;
}
/* 积分下划线装饰 */
.pet-score-value::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 3px;
background: linear-gradient(90deg, #f6d365, #fda085, #f6d365);
border-radius: 2px;
}
/* Row4: 小组 — 右下角定位 */
.pet-group-row {
position: absolute;
bottom: 10px;
right: 14px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85em;
}
.pet-group-label {
font-size: 0.85em;
color: #7a8ba6;
font-weight: 500;
}
/* ===== 随机点名增强 CSS ===== */
/* 已点/未点计数 */
.random-call-counter {
text-align: center;
font-size: 13px;
color: #666;
margin: 8px 0 4px;
padding: 4px 12px;
background: rgba(255,215,79,0.15);
border-radius: 12px;
display: inline-block;
width: 100%;
box-sizing: border-box;
min-height: 20px;
}
/* 锁定按钮 */
.lock-slot-btn {
position: absolute;
top: -6px;
right: -4px;
background: #ff9800;
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 8px;
cursor: pointer;
z-index: 2;
opacity: 0;
transition: opacity 0.2s;
}
.rolling-slot:hover .lock-slot-btn,
.selected-name-card:hover .lock-slot-btn {
opacity: 1;
}
.rolling-slot.locked {
border-color: #ff9800 !important;
background: rgba(255,152,0,0.08) !important;
}
/* 换一个按钮 */
.swap-btn {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: #2196F3;
color: white;
border-radius: 50%;
font-size: 14px;
line-height: 22px;
text-align: center;
cursor: pointer;
z-index: 2;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
.selected-name-card:hover .swap-btn {
opacity: 1;
}
.swap-btn:hover {
transform: rotate(180deg);
background: #1565C0;
}
/* 跳过按钮 */
.random-skip-btn {
display: none;
background: #ff5722;
color: white;
border: none;
padding: 6px 16px;
border-radius: 15px;
font-size: 13px;
cursor: pointer;
margin: 8px 4px;
transition: background 0.2s;
}
.random-skip-btn:hover {
background: #e64a19;
}
.random-skip-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
/* 全部点完提示 */
.random-call-all-called {
display: none;
text-align: center;
padding: 12px;
margin: 8px 0;
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
border: 2px dashed #ff9800;
border-radius: 12px;
color: #e65100;
font-size: 14px;
animation: pulseWarning 2s ease-in-out infinite;
}
@keyframes pulseWarning {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* 重新点名按钮区 */
.random-reset-area {
text-align: center;
margin-top: 8px;
}
/* 积分控件已选名称 */
.random-score-controls {
display: none;
padding: 12px;
margin: 10px 0;
background: #f9f9f9;
border-radius: 10px;
}
.score-selected-names {
font-size: 13px;
color: #555;
margin-bottom: 8px;
padding: 6px 10px;
background: #fff;
border-radius: 6px;
border-left: 3px solid #ffd54f;
}
/* ===== 班级选择器（活泼可爱风） ===== */
.class-selector {
position: relative;
display: inline-flex;
align-items: center;
margin-right: 16px;
z-index: 1200;
}
.class-selector-trigger {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: linear-gradient(135deg, #4dabf7 0%, #748ffc 100%);
border-radius: 12px;
color: #fff;
font-weight: bold;
cursor: pointer;
box-shadow: 0 3px 10px rgba(77, 171, 247, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease;
user-select: none;
white-space: nowrap;
}
.class-selector-trigger:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(77, 171, 247, 0.55);
}
.class-selector .class-icon { font-size: 18px; }
.class-selector .class-name { font-size: 15px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.class-selector .class-arrow { font-size: 11px; opacity: 0.85; }
.class-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
padding: 10px;
z-index: 1300;
}
.class-list { max-height: 320px; overflow-y: auto; }
.class-list-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 10px;
cursor: pointer;
transition: background 0.12s ease;
color: #333;
}
.class-list-item:hover { background: #e7f1ff; }
.class-list-item.active {
background: linear-gradient(135deg, #d0ebff 0%, #b2d8ff 100%);
font-weight: bold;
color: #1971c2;
}
.class-list-item .ci-icon { font-size: 18px; }
.class-list-item .ci-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-list-item .ci-edit {
font-size: 12px;
color: #868e96;
padding: 2px 6px;
border-radius: 6px;
}
.class-list-item .ci-edit:hover { background: #ffd8d8; color: #e03131; }
.class-add-btn {
width: 100%;
margin-top: 8px;
padding: 9px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
color: #fff;
font-weight: bold;
cursor: pointer;
box-shadow: 0 3px 10px rgba(55, 178, 77, 0.35);
transition: transform 0.15s ease;
}
.class-add-btn:hover { transform: translateY(-2px); }
/* 班级模态框 */
.class-modal-content { max-width: 460px; }
.class-modal-content .form-group { margin-bottom: 14px; }
.class-modal-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #495057; }
.class-modal-content input[type="text"] {
width: 100%;
padding: 9px 12px;
border: 2px solid #dee2e6;
border-radius: 10px;
font-size: 14px;
box-sizing: border-box;
}
.class-modal-content input[type="text"]:focus { border-color: #4dabf7; outline: none; }
.icon-picker, .color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-option {
font-size: 22px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #f1f3f5;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.12s ease;
}
.icon-option:hover { background: #e7f1ff; }
.icon-option.selected { border-color: #4dabf7; background: #d0ebff; }
.color-option {
width: 34px;
height: 34px;
border-radius: 50%;
cursor: pointer;
border: 3px solid transparent;
transition: transform 0.12s ease;
}
.color-option:hover { transform: scale(1.12); }
.color-option.selected { border-color: #343a40; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.class-save-btn, .class-cancel-btn, .class-delete-confirm-btn {
flex: 1;
padding: 10px;
border: none;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
transition: transform 0.15s ease;
}
.class-save-btn { background: linear-gradient(135deg, #4dabf7 0%, #748ffc 100%); color: #fff; }
.class-cancel-btn { background: #e9ecef; color: #495057; }
.class-delete-confirm-btn { background: linear-gradient(135deg, #ff6b6b 0%, #f03e3e 100%); color: #fff; }
.class-save-btn:hover, .class-cancel-btn:hover, .class-delete-confirm-btn:hover { transform: translateY(-2px); }
/* 暗色模式兼容 */
.dark-mode .class-dropdown { background: #2b2b3a; }
.dark-mode .class-list-item { color: #e9ecef; }
.dark-mode .class-list-item:hover { background: #3a3a4d; }
.dark-mode .class-modal-content label { color: #ced4da; }
.dark-mode .class-modal-content input[type="text"] { background: #2b2b3a; color: #fff; border-color: #495057; }
.dark-mode .icon-option { background: #3a3a4d; }
.dark-mode .class-cancel-btn { background: #495057; color: #e9ecef; }