355 lines
6.6 KiB
CSS
355 lines
6.6 KiB
CSS
.recitation-container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
isolation: isolate; /* 创建新的堆叠上下文，防止外部覆盖层 */
|
||
}
|
||
|
||
/* 防止意外覆盖层显示 - 只清除空的或意外的伪元素 */
|
||
.recitation-container *::before,
|
||
.recitation-container *::after {
|
||
/* 保留正常使用的伪元素，只阻止意外内容 */
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 确保容器内所有元素正常显示，无意外覆盖 */
|
||
.items-list,
|
||
.sorted-list {
|
||
position: relative;
|
||
z-index: 1;
|
||
background: white;
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
}
|
||
|
||
/* 转盘容器保持相对定位，确保指针正常显示 */
|
||
.wheel-container {
|
||
position: relative;
|
||
z-index: 1;
|
||
overflow: visible; /* 转盘指针需要可见 */
|
||
}
|
||
|
||
.input-section,
|
||
.extracted-section,
|
||
.wheel-section,
|
||
.result-section {
|
||
margin-bottom: 40px;
|
||
padding: 30px;
|
||
background: #f8f9fa;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.input-section h2,
|
||
.extracted-section h2,
|
||
.wheel-section h2,
|
||
.result-section h2 {
|
||
font-size: 1.8em;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.hint,
|
||
.info {
|
||
color: #666;
|
||
margin-bottom: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.info span {
|
||
color: #667eea;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.text-input {
|
||
width: 100%;
|
||
padding: 15px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 10px;
|
||
font-size: 1em;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
margin-bottom: 20px;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.text-input:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.items-list {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding: 15px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.item-tag {
|
||
display: inline-block;
|
||
padding: 8px 15px;
|
||
margin: 5px;
|
||
background: #667eea;
|
||
color: white;
|
||
border-radius: 20px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* ת<><D7AA><EFBFBD><EFBFBD>ʽ */
|
||
.wheel-container {
|
||
position: relative;
|
||
width: 400px;
|
||
height: 400px;
|
||
margin: 40px auto;
|
||
}
|
||
|
||
.wheel {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
border: 8px solid #667eea;
|
||
background: white;
|
||
overflow: hidden;
|
||
transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.wheel svg {
|
||
transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
|
||
}
|
||
|
||
.wheel-pointer {
|
||
position: absolute;
|
||
top: -15px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 15px solid transparent;
|
||
border-right: 15px solid transparent;
|
||
border-top: 30px solid #667eea;
|
||
z-index: 10;
|
||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
||
}
|
||
|
||
.btn-spin {
|
||
display: block;
|
||
margin: 30px auto;
|
||
padding: 15px 50px;
|
||
font-size: 1.2em;
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 30px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-spin:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
|
||
}
|
||
|
||
.btn-spin:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.current-item {
|
||
text-align: center;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
margin-top: 20px;
|
||
font-size: 1.3em;
|
||
font-weight: bold;
|
||
color: #667eea;
|
||
min-height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 掌握按钮样式 */
|
||
.mastery-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-mastered {
|
||
padding: 12px 30px;
|
||
font-size: 1em;
|
||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-weight: bold;
|
||
box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);
|
||
}
|
||
|
||
.btn-mastered:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(67, 233, 123, 0.4);
|
||
}
|
||
|
||
.btn-mastered:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.btn-forgot {
|
||
padding: 12px 30px;
|
||
font-size: 1em;
|
||
background: linear-gradient(135deg, #f5576c 0%, #fa709a 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-weight: bold;
|
||
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
|
||
}
|
||
|
||
.btn-forgot:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
|
||
}
|
||
|
||
.btn-forgot:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 掌握情况信息 */
|
||
.mastery-info {
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
color: #666;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.mastery-info #remainingNum {
|
||
color: #667eea;
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
/* <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>б<EFBFBD> */
|
||
.sorted-list {
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sorted-item {
|
||
padding: 15px;
|
||
margin: 10px 0;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #667eea;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.sorted-item:hover {
|
||
background: #e9ecef;
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.sorted-item-number {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 35px;
|
||
height: 35px;
|
||
background: #667eea;
|
||
color: white;
|
||
border-radius: 50%;
|
||
font-weight: bold;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sorted-item-text {
|
||
flex: 1;
|
||
color: #333;
|
||
position: relative;
|
||
}
|
||
|
||
/* 已掌握的项目样式 */
|
||
.sorted-item-mastered {
|
||
background: #d4edda;
|
||
border-left-color: #28a745;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.sorted-item-mastered .sorted-item-text {
|
||
color: #155724;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.mastered-icon {
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ť<EFBFBD><C5A5>ʽ */
|
||
.export-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-export {
|
||
padding: 10px 20px;
|
||
background: #28a745;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 0.9em;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-export:hover {
|
||
background: #218838;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-export:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* <20><>Ӧʽ<D3A6><CABD><EFBFBD> */
|
||
@media (max-width: 768px) {
|
||
.wheel-container {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
|
||
.wheel-item {
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
.input-section,
|
||
.extracted-section,
|
||
.wheel-section,
|
||
.result-section {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|