xpcool/tool.xpcool.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(image-to-ico): 调整下载按钮显示逻辑与预览样式
All checks were successful
Build and Deploy (tool.xpcool.com) / build-and-deploy (push) Successful in 1m7s
Details

Browse Source 
- 多个尺寸时显示 ZIP 下载主按钮，单个尺寸时显示 ICO 下载主按钮
- 优化预览尺寸文字样式与布局
This commit is contained in:
夏犀麟 2026-09-01 11:37:34 +08:00
parent e1e3ab7b23
commit 8ba67edc18
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/image-to-ico/ImageToIcoView.vue
View File

@ -117,11 +117,11 @@
</p> </p>
</div> </div>
<div class="result-actions"> <div class="result-actions">
<t-button theme="primary" @click="downloadIco">下载 ICO</t-button>
<!-- 多个尺寸时支持把每个尺寸的单独 ICO 打包成 ZIP 一键下载 --> <!-- 多个尺寸时支持把每个尺寸的单独 ICO 打包成 ZIP 一键下载 -->
<t-button v-if="result.singles.length > 1" variant="outline" :loading="zipping" @click="downloadAllZip"> <t-button v-if="result.singles.length > 1" theme="primary" :loading="zipping" @click="downloadAllZip">
打包下载 ZIP 打包下载 ZIP
</t-button> </t-button>
<t-button v-else theme="primary" @click="downloadIco">下载 ICO</t-button>
</div> </div>
</div> </div>
@ -141,7 +141,7 @@
/> />
</div> </div>
<div class="preview-meta"> <div class="preview-meta">
<span class="preview-size">{{ p.size }}×{{ p.size }}</span> <div class="preview-size">{{ p.size }}×{{ p.size }}</div>
<div class="preview-btns"> <div class="preview-btns">
<t-button size="small" variant="text" theme="primary" @click="downloadPng(p)">PNG</t-button> <t-button size="small" variant="text" theme="primary" @click="downloadPng(p)">PNG</t-button>
<t-button size="small" variant="text" theme="primary" @click="downloadSingleIco(p.size)">ICO</t-button> <t-button size="small" variant="text" theme="primary" @click="downloadSingleIco(p.size)">ICO</t-button>
@ -509,8 +509,9 @@ onBeforeUnmount(() => {
} }
.preview-meta { .preview-meta {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin-top: 6px; margin-top: 6px;
} }
.preview-btns { .preview-btns {
@ -518,7 +519,7 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
} }
.preview-size { .preview-size {
font-size: 12px; font-size: 13px;
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
} }
@media (max-width: 767px) { @media (max-width: 767px) {