hz4th_coder/data-chart-tool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复单图模式预览区遮挡导出预览 + 下载按钮宽度

Browse Source 
1. 布局重构：右侧主区域改为上下排列（原图预览在上、导出预览在下），
   chartArea 高度 600→420px，导出预览不再被遮挡
2. 下载按钮：根因是 .btn-success 自带 flex:1 把按钮拉伸占满，已用
   flex:0 0 auto + width:auto 覆盖，189px→58px
This commit is contained in:
hz4th_coder
2026-08-19 13:09:51 +08:00
parent 6a696daeb8
commit 68e4b72d46
3 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+12 -10
View File
@@ -401,18 +401,20 @@ C, 20, 30, 40</pre>
<!-- 右侧面板：图表预览 + 导出预览 + 风格切换 -->
<div class="right-panel">
<div class="chart-container">
<div id="chartArea" class="chart-area">
<div class="placeholder">
<p>📊</p>
<p>输入数据后点击"生成图表"</p>
<div class="right-main">
<div class="chart-container">
<div id="chartArea" class="chart-area">
<div class="placeholder">
<p>📊</p>
<p>输入数据后点击"生成图表"</p>
</div>
</div>
</div>
</div>
<!-- 导出效果预览（按分辨率居中展示保存后的图） -->
<div class="export-preview-box" id="exportPreviewBox" style="display:none;">
<div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
<div class="export-preview-inner" id="exportPreviewInner"></div>
<!-- 导出效果预览（按分辨率居中展示保存后的图） -->
<div class="export-preview-box" id="exportPreviewBox" style="display:none;">
<div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
<div class="export-preview-inner" id="exportPreviewInner"></div>
</div>
</div>
<!-- 风格快速切换按钮（放在图表右侧） -->
<div class="theme-buttons-section">