重构提示框为模态框，优化样式和交互逻辑，增强用户体验，确保在移动设备上良好显示和操作。新增模态框的加载状态和关闭功能，提升代码可维护性。
This commit is contained in:
parent
178c2762f1
commit
c052203457
@ -40,7 +40,7 @@
|
|||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 悬停提示样式 */
|
/* 悬停提示样式 - 改为点击样式 */
|
||||||
.chess-item, .synergy-item {
|
.chess-item, .synergy-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -52,48 +52,160 @@
|
|||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 增强提示框样式 */
|
/* 模态框样式 */
|
||||||
#tft-tooltip {
|
#tft-modal-backdrop {
|
||||||
transition: all 0.3s ease;
|
position: fixed;
|
||||||
max-height: 80vh;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 50;
|
||||||
|
display: none;
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
animation: backdropFadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal-backdrop.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 51;
|
||||||
|
max-width: 90%;
|
||||||
|
width: 450px;
|
||||||
|
max-height: 85vh;
|
||||||
|
background-color: #1f2937;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||||
|
display: none;
|
||||||
|
overflow: hidden; /* 改为hidden，让滚动发生在内部容器 */
|
||||||
|
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||||
|
animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
color: #f3f4f6; /* 设置模态框内默认文字颜色为浅灰色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模态框内部包装容器 */
|
||||||
|
.modal-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 85vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
||||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
|
||||||
transform-origin: top left;
|
|
||||||
animation: tooltipFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: rgba(79, 70, 229, 0.4) rgba(17, 24, 39, 0.2);
|
scrollbar-color: rgba(79, 70, 229, 0.4) rgba(17, 24, 39, 0.2);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backdropFadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modalFadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -48%) scale(0.96);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 自定义滚动条样式 */
|
/* 自定义滚动条样式 */
|
||||||
#tft-tooltip::-webkit-scrollbar {
|
.modal-wrapper::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip::-webkit-scrollbar-track {
|
.modal-wrapper::-webkit-scrollbar-track {
|
||||||
background: rgba(17, 24, 39, 0.1);
|
background: rgba(17, 24, 39, 0.1);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip::-webkit-scrollbar-thumb {
|
.modal-wrapper::-webkit-scrollbar-thumb {
|
||||||
background-color: rgba(79, 70, 229, 0.4);
|
background-color: rgba(79, 70, 229, 0.4);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip::-webkit-scrollbar-thumb:hover {
|
.modal-wrapper::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: rgba(79, 70, 229, 0.6);
|
background-color: rgba(79, 70, 229, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 提示框内容淡入效果 */
|
/* 仅在滚动时显示滚动条 */
|
||||||
#tft-tooltip .tooltip-content {
|
.modal-wrapper {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-wrapper::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
/* 初始隐藏滚动条 */
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-wrapper:hover::-webkit-scrollbar,
|
||||||
|
.modal-wrapper:focus::-webkit-scrollbar,
|
||||||
|
.modal-wrapper:active::-webkit-scrollbar {
|
||||||
|
/* 悬停、聚焦或激活时显示滚动条 */
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 解决模态框内容加载时可能导致的布局偏移 */
|
||||||
|
.modal-content {
|
||||||
|
min-height: 150px; /* 设置最小高度，减少加载时的布局变化 */
|
||||||
|
position: relative;
|
||||||
|
/* 保持右侧边距一致，不管是否有滚动条 */
|
||||||
|
padding: 20px;
|
||||||
|
padding-right: 26px; /* 16px基础 + 10px给滚动条预留 */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模态框内容淡入效果 */
|
||||||
|
#tft-modal .modal-content {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: contentFadeIn 0.2s ease forwards;
|
animation: contentFadeIn 0.2s ease forwards;
|
||||||
animation-delay: 0.1s;
|
animation-delay: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 模态框中的标题和文本颜色 */
|
||||||
|
#tft-modal .font-bold {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .text-gray-800,
|
||||||
|
#tft-modal .text-gray-700 {
|
||||||
|
color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .text-gray-500,
|
||||||
|
#tft-modal .text-gray-400 {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .text-indigo-300 {
|
||||||
|
color: #a5b4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .bg-gray-700 {
|
||||||
|
background-color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .bg-gray-600 {
|
||||||
|
background-color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes contentFadeIn {
|
@keyframes contentFadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -105,23 +217,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes tooltipFadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-5px) scale(0.97);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 提示框中的费用标识 */
|
/* 提示框中的费用标识 */
|
||||||
#tft-tooltip .cost-1 { border-left: 3px solid #94a3b8; } /* 1费 - 灰色 */
|
#tft-modal .cost-1 { border-left: 3px solid #94a3b8; } /* 1费 - 灰色 */
|
||||||
#tft-tooltip .cost-2 { border-left: 3px solid #65a30d; } /* 2费 - 绿色 */
|
#tft-modal .cost-2 { border-left: 3px solid #65a30d; } /* 2费 - 绿色 */
|
||||||
#tft-tooltip .cost-3 { border-left: 3px solid #2563eb; } /* 3费 - 蓝色 */
|
#tft-modal .cost-3 { border-left: 3px solid #2563eb; } /* 3费 - 蓝色 */
|
||||||
#tft-tooltip .cost-4 { border-left: 3px solid #7e22ce; } /* 4费 - 紫色 */
|
#tft-modal .cost-4 { border-left: 3px solid #7e22ce; } /* 4费 - 紫色 */
|
||||||
#tft-tooltip .cost-5 { border-left: 3px solid #f59e0b; } /* 5费 - 金色 */
|
#tft-modal .cost-5 { border-left: 3px solid #f59e0b; } /* 5费 - 金色 */
|
||||||
|
|
||||||
/* 提示框内交互元素样式 */
|
/* 提示框内交互元素样式 */
|
||||||
.chess-item-mini, .synergy-item-mini {
|
.chess-item-mini, .synergy-item-mini {
|
||||||
@ -147,34 +248,51 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 提示框中的各部分样式 */
|
/* 模态框关闭按钮样式 */
|
||||||
#tft-tooltip .tooltip-content {
|
#tft-modal .modal-close-btn {
|
||||||
word-break: break-word;
|
position: absolute;
|
||||||
padding-top: 5px;
|
top: 12px;
|
||||||
padding-right: 36px; /* 为右侧关闭按钮留出空间 */
|
right: 12px;
|
||||||
}
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
/* 关闭按钮样式 */
|
background-color: #374151;
|
||||||
#tft-tooltip .tooltip-close-btn {
|
color: #9ca3af;
|
||||||
|
border-radius: 9999px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .tooltip-close-btn:hover {
|
#tft-modal .modal-close-btn:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #4b5563;
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 模态框返回按钮样式 */
|
||||||
|
#tft-modal .modal-back-btn {
|
||||||
|
background-color: #4f46e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .modal-back-btn:hover {
|
||||||
|
background-color: #4338ca;
|
||||||
|
}
|
||||||
|
|
||||||
/* 特殊介绍文本样式 */
|
/* 特殊介绍文本样式 */
|
||||||
#tft-tooltip .skill-introduce,
|
#tft-modal .skill-introduce,
|
||||||
#tft-tooltip .synergy-introduce {
|
#tft-modal .synergy-introduce {
|
||||||
border-left: 3px solid rgba(79, 70, 229, 0.7);
|
border-left: 3px solid rgba(79, 70, 229, 0.7);
|
||||||
background-color: rgba(79, 70, 229, 0.1);
|
background-color: rgba(79, 70, 229, 0.1);
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .loading-spinner {
|
#tft-modal .loading-spinner {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -249,121 +367,147 @@
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动设备上的提示框样式优化 */
|
/* 模态框额外样式 - 文字颜色优化 */
|
||||||
|
#tft-modal .text-sm {
|
||||||
|
color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .text-xs {
|
||||||
|
color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .font-medium {
|
||||||
|
color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .font-semibold {
|
||||||
|
color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模态框中棋子列表项 */
|
||||||
|
#tft-modal .chess-item-mini {
|
||||||
|
background-color: #374151;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .chess-item-mini .text-sm {
|
||||||
|
color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模态框中羁绊列表项 */
|
||||||
|
#tft-modal .synergy-item-mini {
|
||||||
|
background-color: #374151;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .synergy-item-mini .text-sm {
|
||||||
|
color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端样式优化 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
#tft-tooltip {
|
#tft-modal {
|
||||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
width: 95%;
|
||||||
border: 1px solid rgba(99, 102, 241, 0.5);
|
max-height: 80vh;
|
||||||
max-width: calc(100vw - 40px);
|
|
||||||
animation: mobileTooltipFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
max-height: 70vh;
|
|
||||||
/* 固定位置在屏幕中央 */
|
|
||||||
position: fixed;
|
|
||||||
top: 50% !important;
|
|
||||||
left: 50% !important;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
margin: 0 auto;
|
|
||||||
width: calc(100vw - 40px) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .tooltip-close-btn {
|
#tft-modal .modal-content {
|
||||||
width: 38px;
|
padding: 16px;
|
||||||
height: 38px;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .tooltip-content {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 增大移动端触摸目标大小 */
|
|
||||||
.chess-item-mini, .synergy-item-mini {
|
.chess-item-mini, .synergy-item-mini {
|
||||||
padding: 12px;
|
margin-bottom: 5px;
|
||||||
margin-bottom: 10px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
/* 增加右侧间距，避免文本与按钮重叠 */
|
|
||||||
padding-right: 80px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端使用更明显的交互提示 */
|
|
||||||
.chess-item-mini::after, .synergy-item-mini::after {
|
.chess-item-mini::after, .synergy-item-mini::after {
|
||||||
content: '点击查看';
|
display: none;
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 10px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: white;
|
|
||||||
font-size: 10px;
|
|
||||||
background-color: rgba(79, 70, 229, 0.5);
|
|
||||||
padding: 3px 8px;
|
|
||||||
border-radius: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 防止棋子费用与点击按钮重叠 */
|
/* 移动端字体和边距调整 */
|
||||||
|
#tft-modal .text-xs {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .text-sm {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .px-2 {
|
||||||
|
padding-left: 0.4rem;
|
||||||
|
padding-right: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tft-modal .py-1 {
|
||||||
|
padding-top: 0.2rem;
|
||||||
|
padding-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 为移动端优化小标签 */
|
||||||
.chess-item-mini .text-xs.px-1\.5.py-0\.5.bg-gray-600.rounded {
|
.chess-item-mini .text-xs.px-1\.5.py-0\.5.bg-gray-600.rounded {
|
||||||
margin-right: 65px;
|
font-size: 0.65rem;
|
||||||
|
padding: 0.1rem 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 防止羁绊类型与点击按钮重叠 */
|
|
||||||
.synergy-item-mini .bg-gray-600.text-xs.px-1\.5.py-0\.5.rounded {
|
.synergy-item-mini .bg-gray-600.text-xs.px-1\.5.py-0\.5.rounded {
|
||||||
margin-right: 65px;
|
font-size: 0.65rem;
|
||||||
|
padding: 0.1rem 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端提示框内部元素间距优化 */
|
/* 移动端间距调整 */
|
||||||
#tft-tooltip .mb-2 {
|
#tft-modal .mb-2 {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .mb-3 {
|
#tft-modal .mb-3 {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .p-2 {
|
#tft-modal .p-2 {
|
||||||
padding: 10px;
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端动画效果 */
|
/* 移动端动画优化 */
|
||||||
@keyframes mobileTooltipFadeIn {
|
@keyframes mobileModalFadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translate(-50%, -45%);
|
transform: translate(-50%, -46%);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 提示框内部滚动优化 */
|
#tft-modal {
|
||||||
#tft-tooltip::-webkit-scrollbar {
|
animation: mobileModalFadeIn 0.25s ease;
|
||||||
width: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端加载状态优化 */
|
/* 移动端滚动条优化 */
|
||||||
#tft-tooltip .loading-spinner .animate-spin {
|
#tft-modal::-webkit-scrollbar {
|
||||||
height: 45px;
|
width: 4px;
|
||||||
width: 45px;
|
|
||||||
border-width: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tft-tooltip .loading-spinner .text-xs {
|
/* 移动端加载动画优化 */
|
||||||
font-size: 12px;
|
#tft-modal .loading-spinner .animate-spin {
|
||||||
margin-top: 8px;
|
height: 8vw;
|
||||||
|
width: 8vw;
|
||||||
|
border-width: 2px;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端表格布局优化 */
|
#tft-modal .loading-spinner .text-xs {
|
||||||
#tft-tooltip .grid.grid-cols-2 {
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端网格布局优化 */
|
||||||
|
#tft-modal .grid.grid-cols-2 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 改进相关棋子列表显示 */
|
#tft-modal .grid.grid-cols-2.gap-1.mt-1 {
|
||||||
#tft-tooltip .grid.grid-cols-2.gap-1.mt-1 {
|
display: flex;
|
||||||
grid-template-columns: 1fr 1fr;
|
flex-wrap: wrap;
|
||||||
|
gap: 0.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -140,6 +140,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 详情模态框 -->
|
||||||
|
<div id="tft-modal-backdrop"></div>
|
||||||
|
<div id="tft-modal">
|
||||||
|
<div class="modal-wrapper">
|
||||||
|
<div class="modal-content"></div>
|
||||||
|
<div class="loading-spinner absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 hidden rounded-lg">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div class="animate-spin rounded-full h-10 w-10 border-b-2 border-t-2 border-indigo-500 mb-2"></div>
|
||||||
|
<div class="text-xs text-indigo-300">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="modal-close-btn">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container mx-auto px-4 py-8">
|
<div class="container mx-auto px-4 py-8">
|
||||||
<h1 class="text-3xl font-bold text-center text-indigo-600 mb-8">云顶之弈阵容推荐器</h1>
|
<h1 class="text-3xl font-bold text-center text-indigo-600 mb-8">云顶之弈阵容推荐器</h1>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user