root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 PWA 安装横幅和应用图标的样式问题

Browse Source
This commit is contained in:
Seven
2026-01-05 17:17:54 +07:00
parent 01e727490c
commit 385b820ff4
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/distribute/components/PWAInstallBanner.vue
View File

@@ -77,7 +77,7 @@ const showBanner = computed(() => canInstall.value && !isInstalled.value && !dis
<!-- 内容 -->
<div class="relative z-10 flex items-center gap-4">
<!-- 图标 -->
<div class="hidden sm:flex flex-shrink-0 size-16 rounded-2xl bg-linear-to-br from-primary-500 to-primary-600 items-center justify-center text-white text-2xl font-bold shadow-lg shadow-primary-500/30">
<div class="hidden sm:flex shrink-0 size-16 rounded-2xl bg-linear-to-br from-primary-500 to-primary-600 items-center justify-center text-white text-2xl font-bold shadow-lg shadow-primary-500/30">
<UIcon name="i-heroicons-arrow-down-tray" class="w-8 h-8" />
</div>
@@ -92,7 +92,7 @@ const showBanner = computed(() => canInstall.value && !isInstalled.value && !dis
</div>
<!-- 按钮组 -->
<div class="flex items-center gap-2 flex-shrink-0">
<div class="flex items-center gap-2 shrink-0">
<UButton
:loading="installing"
size="lg"

4
packages/distribute/pages/index.vue
View File

@@ -187,8 +187,8 @@ useHead({
<!-- App Icon -->
<div class="size-16 rounded-2xl bg-linear-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl shrink-0 shadow-lg shadow-blue-500/50 relative overflow-hidden group-hover:shadow-2xl group-hover:shadow-blue-500/60 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3 group-active:scale-105 group-active:rotate-1 p-2">
<!-- 动态发光效果 -->
<div class="absolute inset-0 bg-linear-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-full group-active:translate-x-[50%] transition-transform duration-700"></div>
<img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg transition-all duration-300 group-active:scale-95 group-hover:rotate-[-3deg]" />
<div class="absolute inset-0 bg-linear-to-tr from-white/0 via-white/30 to-white/0 -translate-x-full group-hover:translate-x-full group-active:translate-x-[50%] transition-transform duration-700"></div>
<img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg transition-all duration-300 group-active:scale-95 group-hover:-rotate-3" />
</div>
<!-- App Info -->