fix
This commit is contained in:
parent
9faed9a803
commit
dc6c0ce920
@ -129,66 +129,67 @@
|
|||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Galeri Foto -->
|
|
||||||
<section class="mb-8">
|
|
||||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
|
||||||
<div
|
|
||||||
class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="gallery"
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
accept="image/*"
|
|
||||||
class="hidden"
|
|
||||||
@change="handleFileChange"
|
|
||||||
/>
|
|
||||||
<label v-if="!previews.length" for="gallery" class="cursor-pointer flex flex-col items-center">
|
|
||||||
<span class="text-4xl font-bold">+</span>
|
|
||||||
<span class="text-sm mt-2">Pilih Foto (maks. 4, JPEG/PNG, maks. 2MB)</span>
|
|
||||||
</label>
|
|
||||||
<div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
||||||
<div
|
|
||||||
v-for="(src, i) in previews"
|
|
||||||
:key="i"
|
|
||||||
class="relative group"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="src"
|
|
||||||
class="w-24 h-24 object-cover rounded-lg border shadow"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
@click="removeFile(i)"
|
|
||||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<label
|
|
||||||
v-if="previews.length < 4"
|
|
||||||
for="gallery"
|
|
||||||
class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
|
|
||||||
>
|
|
||||||
<span class="text-3xl font-bold">+</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Musik -->
|
<!-- Musik -->
|
||||||
<section class="mb-8">
|
<section class="mb-8">
|
||||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
|
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
|
||||||
<input
|
<input
|
||||||
v-model="form.form.link_music"
|
v-model="form.form.link_music"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Link Musik (opsional)"
|
placeholder="Link Musik (opsional)"
|
||||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Tombol -->
|
<!-- Galeri Foto -->
|
||||||
<div class="text-end mt-6">
|
<section class="mb-8">
|
||||||
<button
|
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
||||||
|
<div
|
||||||
|
class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="gallery"
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
accept="image/*"
|
||||||
|
class="hidden"
|
||||||
|
@change="handleFileChange"
|
||||||
|
/>
|
||||||
|
<label v-if="!previews.length" for="gallery" class="cursor-pointer flex flex-col items-center">
|
||||||
|
<span class="text-4xl font-bold">+</span>
|
||||||
|
<span class="text-sm mt-2">Pilih Foto (maks. 4, JPEG/PNG, maks. 2MB)</span>
|
||||||
|
</label>
|
||||||
|
<div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||||
|
<div
|
||||||
|
v-for="(src, i) in previews"
|
||||||
|
:key="i"
|
||||||
|
class="relative group"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="src"
|
||||||
|
class="w-24 h-24 object-cover rounded-lg border shadow"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
@click="removeFile(i)"
|
||||||
|
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
v-if="previews.length < 4"
|
||||||
|
for="gallery"
|
||||||
|
class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
|
||||||
|
>
|
||||||
|
<span class="text-3xl font-bold">+</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Tombol -->
|
||||||
|
<div class="text-end mt-6">
|
||||||
|
<button
|
||||||
@click="batal"
|
@click="batal"
|
||||||
class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"
|
class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -131,19 +131,28 @@
|
|||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
<input v-model="form.form.rekening_1" placeholder="Rekening 1"
|
<input v-model="form.form.rekening_1" placeholder="Rekening 1"
|
||||||
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
||||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||||
outline-none transition" />
|
outline-none transition" />
|
||||||
<input v-model="form.form.rekening_2" placeholder="Rekening 2"
|
<input v-model="form.form.rekening_2" placeholder="Rekening 2"
|
||||||
|
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
||||||
|
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||||
|
outline-none transition" />
|
||||||
|
<input v-model="form.form.rekening_3" placeholder="Rekening 3"
|
||||||
|
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
||||||
|
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||||
|
outline-none transition" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Musik -->
|
||||||
|
<section class="mb-8">
|
||||||
|
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
|
||||||
|
<input v-model="form.form.link_music" placeholder="Link Music (opsional)"
|
||||||
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
||||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
||||||
outline-none transition" />
|
outline-none transition" />
|
||||||
<input v-model="form.form.rekening_3" placeholder="Rekening 3"
|
</section>
|
||||||
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
|
||||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
|
||||||
outline-none transition" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Foto Upload -->
|
<!-- Foto Upload -->
|
||||||
<section class="mb-8">
|
<section class="mb-8">
|
||||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
||||||
@ -178,14 +187,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Musik -->
|
|
||||||
<section class="mb-8">
|
|
||||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎵 Musik</h2>
|
|
||||||
<input v-model="form.form.link_music" placeholder="Link Music (opsional)"
|
|
||||||
class="w-full border border-gray-300 rounded-lg px-3 py-2
|
|
||||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400
|
|
||||||
outline-none transition" />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Tombol -->
|
<!-- Tombol -->
|
||||||
<div class="text-end mt-6">
|
<div class="text-end mt-6">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user