style(UI): 微調放大客戶管理中業務類型的字體大小
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 56s

This commit is contained in:
2026-03-30 09:14:52 +08:00
parent fdd3589d7b
commit e780e195e2

View File

@@ -198,17 +198,18 @@
<td class="px-6 py-6 text-center"> <td class="px-6 py-6 text-center">
<div class="flex flex-col items-center gap-1"> <div class="flex flex-col items-center gap-1">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<span class="text-[10px] font-black text-slate-400 uppercase tracking-tighter">{{ __('Original') }}</span> <div class="flex items-center gap-1.5">
<span class="px-2 py-0.5 rounded-md text-[10px] font-black {{ $company->original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600' }} uppercase tracking-widest"> <span class="text-[11px] font-black text-slate-400 uppercase tracking-tighter">{{ __('Original') }}</span>
<span class="px-2.5 py-1 rounded-md text-[11px] font-black {{ $company->original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600' }} uppercase tracking-widest">
{{ __($company->original_type === 'buyout' ? 'Buyout' : 'Lease') }} {{ __($company->original_type === 'buyout' ? 'Buyout' : 'Lease') }}
</span> </span>
</div> </div>
<div class="text-slate-300 dark:text-slate-700"> <div class="text-slate-300 dark:text-slate-700">
<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div> </div>
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<span class="text-[10px] font-black text-slate-400 uppercase tracking-tighter">{{ __('Current') }}</span> <span class="text-[11px] font-black text-slate-400 uppercase tracking-tighter">{{ __('Current') }}</span>
<span class="px-2 py-0.5 rounded-md text-[10px] font-black {{ $company->current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600 font-bold border border-amber-500/20' : 'bg-blue-500/10 text-blue-600 font-bold border border-blue-500/20' }} uppercase tracking-widest"> <span class="px-2.5 py-1 rounded-md text-[11px] font-black {{ $company->current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600 font-bold border border-amber-500/20' : 'bg-blue-500/10 text-blue-600 font-bold border border-blue-500/20' }} uppercase tracking-widest">
{{ __($company->current_type === 'buyout' ? 'Buyout' : 'Lease') }} {{ __($company->current_type === 'buyout' ? 'Buyout' : 'Lease') }}
</span> </span>
</div> </div>
@@ -379,41 +380,41 @@
</div> </div>
<!-- Business Type Selector --> <!-- Business Type Selector -->
<div class="p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 space-y-3"> <div class="p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 space-y-4">
<label class="text-[11px] font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Business Type') }}</label> <label class="text-[12px] font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Business Type') }}</label>
<!-- 新增模式:顯示切換按鈕 --> <!-- 新增模式:顯示切換按鈕 -->
<div x-show="!editing" class="flex p-1 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 w-fit"> <div x-show="!editing" class="flex p-1.5 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 w-fit">
<button type="button" @click="currentCompany.original_type = 'lease'" <button type="button" @click="currentCompany.original_type = 'lease'"
:class="currentCompany.original_type === 'lease' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-slate-600'" :class="currentCompany.original_type === 'lease' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-4 py-1.5 rounded-lg text-xs font-black uppercase tracking-widest transition-all"> class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
{{ __('Lease') }} {{ __('Lease') }}
</button> </button>
<button type="button" @click="currentCompany.original_type = 'buyout'" <button type="button" @click="currentCompany.original_type = 'buyout'"
:class="currentCompany.original_type === 'buyout' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'text-slate-400 hover:text-slate-600'" :class="currentCompany.original_type === 'buyout' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-4 py-1.5 rounded-lg text-xs font-black uppercase tracking-widest transition-all"> class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
{{ __('Buyout') }} {{ __('Buyout') }}
</button> </button>
<input type="hidden" name="original_type" :value="currentCompany.original_type"> <input type="hidden" name="original_type" :value="currentCompany.original_type">
</div> </div>
<!-- 編輯模式:顯示原始類型固定值 + 當前類型切換 --> <!-- 編輯模式:顯示原始類型固定值 + 當前類型切換 -->
<div x-show="editing" class="flex flex-col gap-4"> <div x-show="editing" class="flex flex-col gap-5">
<div class="flex items-center gap-3"> <div class="flex items-center gap-4">
<span class="text-xs font-bold text-slate-400">{{ __('Original Type') }}:</span> <span class="text-sm font-bold text-slate-400">{{ __('Original Type') }}:</span>
<span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 rounded-lg text-xs font-black uppercase tracking-widest text-slate-600 dark:text-slate-400" x-text="currentCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span> <span class="px-4 py-1.5 bg-slate-100 dark:bg-slate-800 rounded-lg text-sm font-black uppercase tracking-widest text-slate-600 dark:text-slate-400" x-text="currentCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-4">
<span class="text-xs font-bold text-slate-400">{{ __('Current Type') }}:</span> <span class="text-sm font-bold text-slate-400">{{ __('Current Type') }}:</span>
<div class="flex p-1 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 w-fit"> <div class="flex p-1.5 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 w-fit">
<button type="button" @click="currentCompany.current_type = 'lease'" <button type="button" @click="currentCompany.current_type = 'lease'"
:class="currentCompany.current_type === 'lease' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-slate-600'" :class="currentCompany.current_type === 'lease' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-4 py-1.5 rounded-lg text-xs font-black uppercase tracking-widest transition-all"> class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
{{ __('Lease') }} {{ __('Lease') }}
</button> </button>
<button type="button" @click="currentCompany.current_type = 'buyout'" <button type="button" @click="currentCompany.current_type = 'buyout'"
:class="currentCompany.current_type === 'buyout' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'text-slate-400 hover:text-slate-600'" :class="currentCompany.current_type === 'buyout' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'text-slate-400 hover:text-slate-600'"
class="px-4 py-1.5 rounded-lg text-xs font-black uppercase tracking-widest transition-all"> class="px-6 py-2 rounded-lg text-sm font-black uppercase tracking-widest transition-all">
{{ __('Buyout') }} {{ __('Buyout') }}
</button> </button>
<input type="hidden" name="current_type" :value="currentCompany.current_type"> <input type="hidden" name="current_type" :value="currentCompany.current_type">
@@ -683,31 +684,31 @@
<!-- Business Type --> <!-- Business Type -->
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-3">{{ __('Business Type') }}</span> <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-4">{{ __('Business Type') }}</span>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="flex-1"> <div class="flex-1">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Original') }}</p> <p class="text-[11px] font-black text-slate-400 uppercase tracking-widest mb-1.5">{{ __('Original') }}</p>
<span class="px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest" <span class="px-2.5 py-1 rounded-lg text-xs font-black uppercase tracking-widest"
:class="detailCompany.original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'" :class="detailCompany.original_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'"
x-text="detailCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span> x-text="detailCompany.original_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
</div> </div>
<div class="w-px h-8 bg-slate-200 dark:bg-slate-700"></div> <div class="w-px h-10 bg-slate-200 dark:bg-slate-700"></div>
<div class="flex-1 text-right"> <div class="flex-1 text-right">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Current') }}</p> <p class="text-[11px] font-black text-slate-400 uppercase tracking-widest mb-1.5">{{ __('Current') }}</p>
<span class="px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest" <span class="px-2.5 py-1 rounded-lg text-xs font-black uppercase tracking-widest"
:class="detailCompany.current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'" :class="detailCompany.current_type === 'buyout' ? 'bg-amber-500/10 text-amber-600' : 'bg-blue-500/10 text-blue-600'"
x-text="detailCompany.current_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span> x-text="detailCompany.current_type === 'buyout' ? '{{ __('Buyout') }}' : '{{ __('Lease') }}'"></span>
</div> </div>
</div> </div>
</div> </div>
<!- Contract Period --> <!-- Contract Period -->
<div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-2">{{ __('Contract Period') }}</span> <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-2">{{ __('Contract Period') }}</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-3">
<div class="text-sm font-black text-slate-700 dark:text-slate-300" x-text="detailCompany.start_date || '--'"></div> <div class="text-base font-black font-mono text-slate-700 dark:text-slate-200" x-text="detailCompany.start_date || '--'"></div>
<span class="text-slate-300 text-xs"></span> <span class="text-slate-300 text-xs"></span>
<div class="text-sm font-black text-slate-700 dark:text-slate-300" x-text="detailCompany.end_date || '{{ __('Permanent') }}'"></div> <div class="text-base font-black font-mono text-slate-700 dark:text-slate-200" x-text="detailCompany.end_date || '{{ __('Permanent') }}'"></div>
</div> </div>
</div> </div>
</div> </div>