feat: update residence learning flows
Commit non-media application and asset changes while leaving audio, video, and environment files out of version control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zhongyidianandClaude Opus 4.7 committed
1 parent
68ba22a33f
commit
6d40e19346
184 files changed
+7663
-2203
No files matched your search
+128
-134
@@ -1,244 +1,238 @@
|
||||
@import "tailwindcss";
|
||||
@import "./styles/input.css";
|
||||
@import 'tailwindcss';
|
||||
@import './styles/input.css';
|
||||
|
||||
/* 定义字体 */
|
||||
@font-face {
|
||||
font-family: "SourceHanSerifCN";
|
||||
src: url("/fonts/SourceHanSerifCN-Bold-2.otf") format("opentype");
|
||||
font-family: 'SourceHanSerifCN';
|
||||
src: url('/fonts/SourceHanSerifCN-Bold-2.otf') format('opentype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* *{ */
|
||||
/* margin: 0;
|
||||
/* margin: 0;
|
||||
padding: 0; */
|
||||
/* box-sizing: border-box; */
|
||||
/* box-sizing: border-box; */
|
||||
/* } */
|
||||
|
||||
body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
font-family: "SourceHanSerifCN", serif;
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
font-family: 'SourceHanSerifCN', serif;
|
||||
}
|
||||
|
||||
#root{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button:not([disabled]){
|
||||
cursor: pointer;
|
||||
button:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img, video{
|
||||
max-width: unset;
|
||||
img,
|
||||
video {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(139, 115, 85, 0.6) transparent;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(139, 115, 85, 0.6) transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, rgba(139, 115, 85, 0.8), rgba(107, 93, 71, 0.8));
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
transition: background 0.3s ease;
|
||||
background: linear-gradient(to bottom, rgba(139, 115, 85, 0.8), rgba(107, 93, 71, 0.8));
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(to bottom, rgba(139, 115, 85, 1), rgba(107, 93, 71, 1));
|
||||
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.4);
|
||||
background: linear-gradient(to bottom, rgba(139, 115, 85, 1), rgba(107, 93, 71, 1));
|
||||
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.4);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background: linear-gradient(to bottom, rgba(107, 93, 71, 1), rgba(91, 79, 61, 1));
|
||||
background: linear-gradient(to bottom, rgba(107, 93, 71, 1), rgba(91, 79, 61, 1));
|
||||
}
|
||||
|
||||
/* 多选题面板滚动条样式 - 金色主题 */
|
||||
.quiz-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(212, 197, 169, 0.7) transparent;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(212, 197, 169, 0.7) transparent;
|
||||
}
|
||||
|
||||
.quiz-scrollbar::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.quiz-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
margin: 8px 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.quiz-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(212, 197, 169, 0.8),
|
||||
rgba(240, 190, 117, 0.8));
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(to bottom, rgba(212, 197, 169, 0.8), rgba(240, 190, 117, 0.8));
|
||||
border-radius: 5px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.quiz-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(240, 190, 117, 0.9),
|
||||
rgba(212, 197, 169, 0.9));
|
||||
box-shadow: 0 2px 8px rgba(240, 190, 117, 0.5);
|
||||
border-color: rgba(240, 190, 117, 0.3);
|
||||
background: linear-gradient(to bottom, rgba(240, 190, 117, 0.9), rgba(212, 197, 169, 0.9));
|
||||
box-shadow: 0 2px 8px rgba(240, 190, 117, 0.5);
|
||||
border-color: rgba(240, 190, 117, 0.3);
|
||||
}
|
||||
|
||||
.quiz-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(240, 190, 117, 1),
|
||||
rgba(212, 197, 169, 1));
|
||||
background: linear-gradient(to bottom, rgba(240, 190, 117, 1), rgba(212, 197, 169, 1));
|
||||
}
|
||||
|
||||
/* 搜索图标动画 */
|
||||
@keyframes search-pulse {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%) scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-search {
|
||||
animation: search-pulse 2s ease-in-out infinite;
|
||||
animation: search-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 三个点加载动画 */
|
||||
@keyframes dot-bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-dots > span {
|
||||
animation: dot-bounce 1.4s ease-in-out infinite both;
|
||||
animation: dot-bounce 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.animate-dots > span:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.animate-dots > span:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.animate-dots > span:nth-child(3) {
|
||||
animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
/* 页面过渡动画 - 确保初始状态为透明，避免闪烁 */
|
||||
.page-transition-wrapper > div[data-framer-name] {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 鲁迅页面滚动条样式 - 古典文化风格 */
|
||||
.luxun-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(212, 175, 55, 0.85) rgba(250, 245, 235, 0.08);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(212, 175, 55, 0.85) rgba(250, 245, 235, 0.08);
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar-track {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(250, 245, 235, 0.06),
|
||||
rgba(240, 235, 225, 0.04)
|
||||
);
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(139, 115, 71, 0.2);
|
||||
margin: 6px 2px;
|
||||
box-shadow:
|
||||
inset 0 0 8px rgba(139, 115, 71, 0.08),
|
||||
inset 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(to bottom, rgba(250, 245, 235, 0.06), rgba(240, 235, 225, 0.04));
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(139, 115, 71, 0.2);
|
||||
margin: 6px 2px;
|
||||
box-shadow:
|
||||
inset 0 0 8px rgba(139, 115, 71, 0.08),
|
||||
inset 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(240, 190, 117, 0.95),
|
||||
rgba(212, 175, 55, 0.95),
|
||||
rgba(184, 134, 11, 0.95)
|
||||
);
|
||||
border-radius: 12px;
|
||||
border: 2px solid rgba(250, 245, 235, 0.4);
|
||||
box-shadow:
|
||||
inset 0 1px 3px rgba(255, 255, 255, 0.25),
|
||||
inset 0 -1px 2px rgba(139, 115, 71, 0.2),
|
||||
0 2px 6px rgba(139, 115, 71, 0.25),
|
||||
0 0 10px rgba(212, 175, 55, 0.15);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(240, 190, 117, 0.95),
|
||||
rgba(212, 175, 55, 0.95),
|
||||
rgba(184, 134, 11, 0.95)
|
||||
);
|
||||
border-radius: 12px;
|
||||
border: 2px solid rgba(250, 245, 235, 0.4);
|
||||
box-shadow:
|
||||
inset 0 1px 3px rgba(255, 255, 255, 0.25),
|
||||
inset 0 -1px 2px rgba(139, 115, 71, 0.2),
|
||||
0 2px 6px rgba(139, 115, 71, 0.25),
|
||||
0 0 10px rgba(212, 175, 55, 0.15);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 滚动条滑块内部装饰线效果 */
|
||||
.luxun-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 215, 140, 1),
|
||||
rgba(240, 190, 117, 1),
|
||||
rgba(212, 175, 55, 1)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 4px rgba(255, 255, 255, 0.35),
|
||||
inset 0 -1px 3px rgba(139, 115, 71, 0.25),
|
||||
0 3px 8px rgba(139, 115, 71, 0.35),
|
||||
0 0 14px rgba(212, 175, 55, 0.3);
|
||||
border-color: rgba(250, 245, 235, 0.6);
|
||||
transform: scaleX(1.05);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 215, 140, 1),
|
||||
rgba(240, 190, 117, 1),
|
||||
rgba(212, 175, 55, 1)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 4px rgba(255, 255, 255, 0.35),
|
||||
inset 0 -1px 3px rgba(139, 115, 71, 0.25),
|
||||
0 3px 8px rgba(139, 115, 71, 0.35),
|
||||
0 0 14px rgba(212, 175, 55, 0.3);
|
||||
border-color: rgba(250, 245, 235, 0.6);
|
||||
transform: scaleX(1.05);
|
||||
}
|
||||
|
||||
.luxun-scrollbar::-webkit-scrollbar-thumb:active {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(184, 134, 11, 1),
|
||||
rgba(139, 115, 71, 1),
|
||||
rgba(107, 93, 71, 1)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0, 0, 0, 0.4),
|
||||
inset 0 -1px 2px rgba(139, 115, 71, 0.3),
|
||||
0 1px 3px rgba(139, 115, 71, 0.3);
|
||||
border-color: rgba(250, 245, 235, 0.2);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(184, 134, 11, 1),
|
||||
rgba(139, 115, 71, 1),
|
||||
rgba(107, 93, 71, 1)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0, 0, 0, 0.4),
|
||||
inset 0 -1px 2px rgba(139, 115, 71, 0.3),
|
||||
0 1px 3px rgba(139, 115, 71, 0.3);
|
||||
border-color: rgba(250, 245, 235, 0.2);
|
||||
}
|
||||
|
||||
/* 点一点图标动画 - 手指点击动画（上下移动模拟点击） */
|
||||
@keyframes finger-bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0) translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) translateX(5px);
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-finger-bounce {
|
||||
animation: finger-bounce 1.2s ease-in-out infinite;
|
||||
animation: finger-bounce 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user