d00444840f
1. 重構廣告管理模組 (Ads Management) UI，完全對齊「極簡奢華風 (Minimal Luxury)」設計規範。 2. 新增 x-luxury-datetime-input 標準化組件，統一全站日期時間選擇器介面，並解決手機版顯示問題。 3. 修復 ad-modal.blade.php 內多語系標籤斷行與空格導致的翻譯失效問題，確保中文正確顯示。 4. 優化廣告列表與卡片視圖，移除冗餘時間資訊，強化資訊層級與行動裝置適應性。 5. 更新相關頁面導覽按鈕邏輯，確保在分頁切換時按鈕渲染與佈局穩定。
45 lines
1.7 KiB
PHP
45 lines
1.7 KiB
PHP
@props([
|
|
'name',
|
|
'label' => '',
|
|
'placeholder' => '',
|
|
'value' => '',
|
|
])
|
|
|
|
<div x-data="{
|
|
value: @js($value),
|
|
init() {
|
|
flatpickr(this.$refs.input, {
|
|
enableTime: true,
|
|
dateFormat: 'Y/m/d H:i',
|
|
time_24hr: true,
|
|
locale: window.flatpickrLocale || 'zh_TW',
|
|
disableMobile: 'true',
|
|
onChange: (selectedDates, dateStr) => {
|
|
this.value = dateStr;
|
|
this.$dispatch('input', dateStr);
|
|
}
|
|
});
|
|
|
|
this.$watch('value', (val) => {
|
|
if (this.$refs.input._flatpickr) {
|
|
this.$refs.input._flatpickr.setDate(val, false);
|
|
}
|
|
});
|
|
}
|
|
}" class="relative group/datetime" @set-date.window="if($event.detail.name === '{{ $name }}') value = $event.detail.value">
|
|
<input
|
|
x-ref="input"
|
|
type="text"
|
|
name="{{ $name }}"
|
|
x-model="value"
|
|
placeholder="{{ $placeholder }}"
|
|
readonly
|
|
class="w-full h-12 bg-slate-50 dark:bg-slate-800/50 border-none rounded-xl px-4 pr-10 text-sm font-bold text-slate-800 dark:text-white focus:ring-2 focus:ring-cyan-500/20 transition-all placeholder:text-slate-400 cursor-pointer"
|
|
>
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover/datetime:text-cyan-500 transition-colors pointer-events-none">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|