spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 09:20:18 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

style(组件): 优化应用详情模态框按钮样式和布局

Browse Source 
- 调整按钮圆角、内边距和阴影样式
- 修改安装按钮颜色方案
- 重构已安装应用的按钮布局为水平排列
- 更新卸载按钮样式为轮廓风格
- 统一图标大小
This commit is contained in:
shenmo
2026-03-29 18:31:14 +08:00
parent cbea4745a5
commit dd0a17d674
1 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/AppDetailModal.vue
View File

@@ -140,25 +140,26 @@
<button <button
v-if="!isinstalled" v-if="!isinstalled"
type="button" type="button"
class="w-full inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r px-4 py-3 text-sm font-semibold text-white shadow-lg disabled:opacity-40 transition hover:-translate-y-0.5" class="w-full inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium text-white shadow-sm disabled:opacity-40 transition"
:class=" :class="
installFeedback installFeedback
? 'from-emerald-500 to-emerald-600' ? 'bg-emerald-600 hover:bg-emerald-700'
: 'from-brand to-brand-dark' : 'bg-slate-800 hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600'
" "
@click="handleInstall" @click="handleInstall"
:disabled="installFeedback || isOtherVersionInstalled" :disabled="installFeedback || isOtherVersionInstalled"
> >
<i <i
class="fas" class="fas text-xs"
:class="installFeedback ? 'fa-check' : 'fa-download'" :class="installFeedback ? 'fa-check' : 'fa-download'"
></i> ></i>
<span>{{ installBtnText }}</span> <span>{{ installBtnText }}</span>
</button> </button>
<template v-else> <template v-else>
<div class="flex gap-2">
<button <button
type="button" type="button"
class="w-full inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-3 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5" class="flex-1 inline-flex items-center justify-center gap-2 rounded-xl bg-slate-800 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
@click=" @click="
emit( emit(
'open-app', 'open-app',
@@ -167,17 +168,18 @@
) )
" "
> >
<i class="fas fa-external-link-alt"></i> <i class="fas fa-external-link-alt text-xs"></i>
<span>打开</span> <span>打开</span>
</button> </button>
<button <button
type="button" type="button"
class="w-full inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-rose-500 to-rose-600 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-500/30 disabled:opacity-40 transition hover:-translate-y-0.5" class="flex-1 inline-flex items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 transition hover:border-rose-400 hover:text-rose-500 hover:bg-rose-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:border-rose-500 dark:hover:text-rose-400 dark:hover:bg-slate-700"
@click="handleRemove" @click="handleRemove"
> >
<i class="fas fa-trash"></i> <i class="fas fa-trash text-xs"></i>
<span>卸载</span> <span>卸载</span>
</button> </button>
</div>
</template> </template>
</div> </div>