fix: [sales] 가격시뮬레이터 가입유형 선택 시 반전색 적용
- peer-checked CSS 대신 Alpine.js x-bind:class로 전환 - 선택된 카드: 에메랄드 배경 + 흰색 텍스트 + 그림자 - 미선택 카드: 흰색 배경 + 회색 테두리
This commit is contained in:
@@ -36,22 +36,24 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-70
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">가입 유형</h3>
|
||||
<div class="flex gap-3">
|
||||
<label class="flex-1 cursor-pointer">
|
||||
<input type="radio" x-model="signupType" value="individual" class="sr-only peer">
|
||||
<div class="p-4 border-2 rounded-xl text-center transition-all peer-checked:border-emerald-500 peer-checked:bg-emerald-50 border-gray-200 hover:border-gray-300">
|
||||
<div class="text-2xl mb-1">👤</div>
|
||||
<div class="font-semibold text-gray-900">개인 가입</div>
|
||||
<div class="text-xs text-gray-500 mt-1">파트너 20% + 매니저 5%</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1 cursor-pointer">
|
||||
<input type="radio" x-model="signupType" value="group" class="sr-only peer">
|
||||
<div class="p-4 border-2 rounded-xl text-center transition-all peer-checked:border-emerald-500 peer-checked:bg-emerald-50 border-gray-200 hover:border-gray-300">
|
||||
<div class="text-2xl mb-1">👥</div>
|
||||
<div class="font-semibold text-gray-900">단체 가입</div>
|
||||
<div class="text-xs text-gray-500 mt-1">단체 30% + 매니저 0%</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-1 cursor-pointer p-4 border-2 rounded-xl text-center transition-all"
|
||||
:class="signupType === 'individual'
|
||||
? 'border-emerald-600 bg-emerald-600 shadow-lg shadow-emerald-200'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300'"
|
||||
x-on:click="signupType = 'individual'">
|
||||
<div class="text-2xl mb-1">👤</div>
|
||||
<div class="font-semibold" :class="signupType === 'individual' ? 'text-white' : 'text-gray-900'">개인 가입</div>
|
||||
<div class="text-xs mt-1" :class="signupType === 'individual' ? 'text-emerald-100' : 'text-gray-500'">파트너 20% + 매니저 5%</div>
|
||||
</div>
|
||||
<div class="flex-1 cursor-pointer p-4 border-2 rounded-xl text-center transition-all"
|
||||
:class="signupType === 'group'
|
||||
? 'border-emerald-600 bg-emerald-600 shadow-lg shadow-emerald-200'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300'"
|
||||
x-on:click="signupType = 'group'">
|
||||
<div class="text-2xl mb-1">👥</div>
|
||||
<div class="font-semibold" :class="signupType === 'group' ? 'text-white' : 'text-gray-900'">단체 가입</div>
|
||||
<div class="text-xs mt-1" :class="signupType === 'group' ? 'text-emerald-100' : 'text-gray-500'">단체 30% + 매니저 0%</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 유치파트너(협업지원금) 토글 --}}
|
||||
<label class="flex items-center gap-2 mt-3 cursor-pointer">
|
||||
|
||||
Reference in New Issue
Block a user