mirror of
https://github.com/halo-dev/theme-earth.git
synced 2025-12-11 02:00:49 +08:00
0ff535f517
修复分享弹窗中链接过长导致的样式问题。 Fixes https://github.com/halo-dev/theme-earth/issues/141 <img width="609" alt="image" src="https://github.com/user-attachments/assets/e835a037-fff9-47e0-8374-667afe2a7c74"> /kind bug ```release-note 修复分享弹窗中链接过长导致的样式问题。 ```
76 lines
3.4 KiB
HTML
76 lines
3.4 KiB
HTML
<template x-teleport="body">
|
|
<div>
|
|
<div
|
|
class="fixed inset-0 z-50 bg-gray-800/40 opacity-100 backdrop-blur-sm dark:bg-black/80"
|
|
aria-hidden="true"
|
|
x-show="shareModal"
|
|
x-transition:enter="ease-in-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in-out duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
></div>
|
|
<div
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
tabindex="-1"
|
|
x-show="shareModal"
|
|
x-transition:enter="ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
>
|
|
<div class="flex min-h-full flex-col items-center justify-center p-4 text-center sm:p-0">
|
|
<div
|
|
@click.outside="shareModal = false"
|
|
class="relative my-4 transform overflow-hidden rounded-lg bg-white p-4 text-left shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100 sm:w-full sm:max-w-xl"
|
|
>
|
|
<h1 class="text-lg font-semibold">分享</h1>
|
|
<div class="my-8">
|
|
<div class="grid grid-cols-5 gap-6 sm:grid-cols-6">
|
|
<template x-for="item in activeShareItems">
|
|
<div class="inline-flex flex-col items-center justify-center gap-1.5 rounded-full">
|
|
<div
|
|
class="inline-flex size-12 cursor-pointer items-center justify-center rounded-full bg-gray-100 transition-all hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100 sm:size-16"
|
|
@click="handleShare(item.id)"
|
|
>
|
|
<div class="text-xl text-gray-900 dark:text-slate-50" :class="item.icon"></div>
|
|
</div>
|
|
<div class="hidden text-xs text-gray-600 dark:text-slate-100 sm:block" x-text="item.name"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="mt-10">
|
|
<div
|
|
class="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 px-3 py-2 dark:bg-slate-700 sm:justify-between"
|
|
>
|
|
<div
|
|
class="flex-1 select-all truncate text-xs font-light text-gray-600 dark:text-slate-100"
|
|
x-text="permalink"
|
|
></div>
|
|
<div
|
|
class="flex-none cursor-pointer select-none text-sm text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
|
|
@click="handleCopy"
|
|
x-text="copied ? '已复制':'复制'"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
@click="shareModal = false"
|
|
class="group inline-flex items-center justify-center rounded-full bg-white p-1.5 dark:bg-slate-800"
|
|
>
|
|
<i
|
|
class="i-tabler-x block text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-500"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|