mirror of
https://github.com/halo-dev/theme-earth.git
synced 2025-12-11 02:00:49 +08:00
bcf874c09e
侧边站点资料卡片的社交媒体支持图片形式的打开方式。 /kind feature Fixes #133 <img width="466" alt="image" src="https://github.com/halo-dev/theme-earth/assets/21301288/20a747b1-d423-4ccc-946a-80054bc9f158"> <img width="1008" alt="image" src="https://github.com/halo-dev/theme-earth/assets/21301288/ae5b0730-16d7-4d28-a88f-d643aa811591"> ```release-note 侧边站点资料卡片的社交媒体支持图片形式的打开方式。 ```
46 lines
1.8 KiB
HTML
46 lines
1.8 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="openImageModal"
|
|
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="openImageModal"
|
|
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="openImageModal = false"
|
|
class="relative my-4 transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100 sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
|
|
>
|
|
<img :src="image" class="w-full" loading="lazy" :alt="alt" />
|
|
</div>
|
|
<div>
|
|
<div
|
|
@click="openImageModal = 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>
|