优化:成功/失败 flash 提示 3秒后自动淡出消失,支持手动关闭
This commit is contained in:
@@ -121,24 +121,39 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{-- ═══════════ 全局提示消息 ═══════════ --}}
|
||||
{{-- ═══════════ 全局提示消息(3秒自动消失) ═══════════ --}}
|
||||
@if (session('success'))
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
|
||||
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-sm">
|
||||
<p class="font-bold">操作成功</p>
|
||||
<p>{{ session('success') }}</p>
|
||||
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
|
||||
x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
|
||||
<div
|
||||
class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-sm flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-bold">操作成功</p>
|
||||
<p>{{ session('success') }}</p>
|
||||
</div>
|
||||
<button @click="show = false"
|
||||
class="ml-4 text-green-500 hover:text-green-700 text-lg leading-none">×</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if (session('error'))
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
|
||||
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-sm">
|
||||
<p class="font-bold">操作失败</p>
|
||||
<p>{{ session('error') }}</p>
|
||||
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
|
||||
x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
|
||||
<div
|
||||
class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-sm flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-bold">操作失败</p>
|
||||
<p>{{ session('error') }}</p>
|
||||
</div>
|
||||
<button @click="show = false"
|
||||
class="ml-4 text-red-400 hover:text-red-600 text-lg leading-none">×</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
{{-- ═══════════ 页面主体内容 ═══════════ --}}
|
||||
<div class="flex-1">
|
||||
@yield('content')
|
||||
|
||||
Reference in New Issue
Block a user