From 43b84456b7c993150c935a2c944d05f8837e32ff Mon Sep 17 00:00:00 2001 From: hxuanyu <2252193204@qq.com> Date: Wed, 2 Apr 2025 16:25:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=A3=8B=E5=AD=90=E5=92=8C?= =?UTF-8?q?=E7=BE=81=E7=BB=8A=E7=9A=84=E8=AF=A6=E7=BB=86=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92=E9=80=BB?= =?UTF-8?q?=E8=BE=91=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=A7=BB=E5=8A=A8=E8=AE=BE?= =?UTF-8?q?=E5=A4=87=E4=B8=8A=E7=9A=84=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?= =?UTF-8?q?=EF=BC=8C=E7=A1=AE=E4=BF=9D=E6=8F=90=E7=A4=BA=E6=A1=86=E5=9C=A8?= =?UTF-8?q?=E4=B8=8D=E5=90=8C=E8=AE=BE=E5=A4=87=E4=B8=8A=E5=9D=87=E8=83=BD?= =?UTF-8?q?=E8=89=AF=E5=A5=BD=E6=98=BE=E7=A4=BA=E5=92=8C=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/web/app.py | 20 ++- src/web/static/css/style.css | 187 ++++++++++++++++----- src/web/static/js/main.js | 312 +++++++++++++++++++++++------------ 3 files changed, 362 insertions(+), 157 deletions(-) diff --git a/src/web/app.py b/src/web/app.py index e6125f7..8d60895 100644 --- a/src/web/app.py +++ b/src/web/app.py @@ -243,15 +243,21 @@ def create_app(config_path: Optional[str] = None): 'name': chess.get('displayName', ''), 'cost': chess.get('price', 0), 'skill_name': chess.get('skillName', ''), - 'skill_description': chess.get('skillDescription', ''), + 'skill_description': chess.get('skillDetail', ''), 'skill_introduce': chess.get('skillIntroduce', ''), - # 添加更多棋子属性 - 'health': chess.get('health', ''), - 'attack_damage': chess.get('attackDamage', ''), - 'attack_speed': chess.get('attackSpeed', ''), - 'attack_range': chess.get('range', ''), + 'skill_type': chess.get('skillType', ''), + 'skill_mana': chess.get('magic', ''), + # 添加更多棋子属性 - 使用与 chess.json 一致的字段名 + 'life': chess.get('life', ''), + 'attack': chess.get('attack', ''), + 'attackSpeed': chess.get('attackSpeed', ''), + 'attackRange': chess.get('attackRange', ''), 'armor': chess.get('armor', ''), - 'magic_resist': chess.get('magicResist', ''), + 'spellBlock': chess.get('spellBlock', ''), + 'magic': chess.get('magic', ''), + 'startMagic': chess.get('startMagic', ''), + 'crit': chess.get('crit', ''), + 'attackMag': chess.get('attackMag', ''), 'synergies': [{ 'id': synergy.get('jobId') or synergy.get('raceId'), 'name': synergy.get('name', ''), diff --git a/src/web/static/css/style.css b/src/web/static/css/style.css index 565c02d..0a69693 100644 --- a/src/web/static/css/style.css +++ b/src/web/static/css/style.css @@ -54,13 +54,66 @@ /* 增强提示框样式 */ #tft-tooltip { - transition: opacity 0.2s, transform 0.2s; + transition: all 0.3s ease; max-height: 80vh; overflow-y: auto; + 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.2s ease-out; + animation: tooltipFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); + scrollbar-width: thin; + scrollbar-color: rgba(79, 70, 229, 0.4) rgba(17, 24, 39, 0.2); +} + +/* 自定义滚动条样式 */ +#tft-tooltip::-webkit-scrollbar { + width: 6px; +} + +#tft-tooltip::-webkit-scrollbar-track { + background: rgba(17, 24, 39, 0.1); + border-radius: 3px; +} + +#tft-tooltip::-webkit-scrollbar-thumb { + background-color: rgba(79, 70, 229, 0.4); + border-radius: 3px; + transition: background-color 0.3s; +} + +#tft-tooltip::-webkit-scrollbar-thumb:hover { + background-color: rgba(79, 70, 229, 0.6); +} + +/* 提示框内容淡入效果 */ +#tft-tooltip .tooltip-content { + word-break: break-word; + opacity: 0; + animation: contentFadeIn 0.2s ease forwards; + animation-delay: 0.1s; +} + +@keyframes contentFadeIn { + from { + opacity: 0; + transform: translateY(5px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes tooltipFadeIn { + from { + opacity: 0; + transform: translateY(-5px) scale(0.97); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } } /* 提示框中的费用标识 */ @@ -94,33 +147,23 @@ border-radius: 2px; } -@keyframes tooltipFadeIn { - from { - opacity: 0; - transform: translateY(-5px) scale(0.98); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - /* 提示框中的各部分样式 */ #tft-tooltip .tooltip-content { word-break: break-word; + padding-top: 5px; + padding-right: 36px; /* 为右侧关闭按钮留出空间 */ } -/* 提示框返回按钮 */ -.tooltip-back-button { - opacity: 0.7; +/* 关闭按钮样式 */ +#tft-tooltip .tooltip-close-btn { transition: all 0.2s ease; - z-index: 15; + opacity: 0.9; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } -.tooltip-back-button:hover { +#tft-tooltip .tooltip-close-btn:hover { opacity: 1; - transform: scale(1.1); - background-color: rgba(79, 70, 229, 0.9); + transform: scale(1.05); } /* 特殊介绍文本样式 */ @@ -212,29 +255,38 @@ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(99, 102, 241, 0.5); max-width: calc(100vw - 40px); - animation: mobileTooltipFadeIn 0.2s ease-out; + 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 .close-tooltip { - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(79, 70, 229, 0.2); - border-radius: 50%; - opacity: 0.9; + #tft-tooltip .tooltip-close-btn { + width: 38px; + height: 38px; + top: 10px; + right: 10px; } #tft-tooltip .tooltip-content { - margin-top: 5px; - padding-right: 15px; + margin-top: 10px; + padding-right: 20px; + padding-bottom: 5px; } /* 增大移动端触摸目标大小 */ .chess-item-mini, .synergy-item-mini { - padding: 10px; - margin-bottom: 8px; + padding: 12px; + margin-bottom: 10px; + position: relative; + overflow: hidden; + /* 增加右侧间距，避免文本与按钮重叠 */ + padding-right: 80px; } /* 移动端使用更明显的交互提示 */ @@ -244,27 +296,74 @@ top: 50%; right: 10px; transform: translateY(-50%); - color: rgba(99, 102, 241, 0.8); + color: white; font-size: 10px; - opacity: 0.8; + background-color: rgba(79, 70, 229, 0.5); + padding: 3px 8px; + border-radius: 10px; + white-space: nowrap; + z-index: 5; } - /* 提示框返回按钮优化 */ - .tooltip-back-button { - width: 36px; - height: 36px; - opacity: 0.9; - background-color: rgba(79, 70, 229, 0.8); + /* 防止棋子费用与点击按钮重叠 */ + .chess-item-mini .text-xs.px-1\.5.py-0\.5.bg-gray-600.rounded { + margin-right: 65px; } + /* 防止羁绊类型与点击按钮重叠 */ + .synergy-item-mini .bg-gray-600.text-xs.px-1\.5.py-0\.5.rounded { + margin-right: 65px; + } + + /* 移动端提示框内部元素间距优化 */ + #tft-tooltip .mb-2 { + margin-bottom: 10px; + } + + #tft-tooltip .mb-3 { + margin-bottom: 15px; + } + + #tft-tooltip .p-2 { + padding: 10px; + } + + /* 移动端动画效果 */ @keyframes mobileTooltipFadeIn { from { opacity: 0; - transform: translateY(10px) scale(0.95); + transform: translate(-50%, -45%); } to { opacity: 1; - transform: translateY(0) scale(1); + transform: translate(-50%, -50%); } } + + /* 提示框内部滚动优化 */ + #tft-tooltip::-webkit-scrollbar { + width: 5px; + } + + /* 移动端加载状态优化 */ + #tft-tooltip .loading-spinner .animate-spin { + height: 45px; + width: 45px; + border-width: 3px; + } + + #tft-tooltip .loading-spinner .text-xs { + font-size: 12px; + margin-top: 8px; + } + + /* 移动端表格布局优化 */ + #tft-tooltip .grid.grid-cols-2 { + grid-template-columns: 1fr; + } + + /* 改进相关棋子列表显示 */ + #tft-tooltip .grid.grid-cols-2.gap-1.mt-1 { + grid-template-columns: 1fr 1fr; + } } \ No newline at end of file diff --git a/src/web/static/js/main.js b/src/web/static/js/main.js index 8ff5c43..fb5fbb3 100644 --- a/src/web/static/js/main.js +++ b/src/web/static/js/main.js @@ -668,13 +668,16 @@ function createTooltip() { const tooltip = $(`