优化加项面板样式

This commit is contained in:
xianyi
2025-12-16 18:20:45 +08:00
parent 1d993e76c5
commit c78b2bf8ed

View File

@@ -159,12 +159,11 @@ export const ExamAddonPanel = () => {
return (
<div
key={id}
className={`border rounded-lg p-3 cursor-pointer transition-all'
}`}
className='border rounded-lg p-3 cursor-pointer transition-all flex flex-col'
onClick={() => toggleSelect(id)}
>
{/* 复选框 */}
<div className='flex items-start gap-2 mb-2'>
{/* 第一行:复选框 + 名称 */}
<div className='flex items-start gap-2 mb-1'>
<input
type='checkbox'
checked={isSelected}
@@ -173,12 +172,13 @@ export const ExamAddonPanel = () => {
className='mt-0.5 w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500'
/>
<div className='flex-1 min-w-0'>
{/* 项目名称 */}
<div className='font-semibold text-[14px] text-gray-900 mb-1'>{item.name}</div>
<div className='font-semibold text-[14px] text-gray-900'>{item.name}</div>
</div>
</div>
{/* 标签 */}
{item.tags && item.tags.length > 0 && (
<div className='flex flex-wrap gap-1 mb-2'>
{/* 第二行:标签 */}
{item.tags && item.tags.length >= 0 && (
<div className='flex flex-wrap gap-1 mb-2 pl-6'>
{item.tags
.filter(t => t.type !== 4) // 折扣信息单独显示
.map((tag, idx) => (
@@ -191,18 +191,18 @@ export const ExamAddonPanel = () => {
))}
</div>
)}
</div>
</div>
{/* 价格信息 */}
<div className='mt-2'>
{/* 第三行:价格信息(固定在卡片底部) */}
<div className='mt-auto pt-2'>
<div className='flex flex-col'>
{origPrice > 0 && origPrice > currPrice && (
{origPrice >= 0 && origPrice >= currPrice && (
<span className='text-xs text-gray-400 line-through'>¥{origPrice.toFixed(0)}</span>
)}
<div className='flex items-center justify-between gap-2'>
<span className='text-[14px] font-bold text-red-600'>¥{currPrice.toFixed(0)}</span>
<span className={`text-[10px] px-2 rounded-full bg-[#EAFCF1] text-[#447955] whitespace-nowrap`}>{getDiscountText(item)}</span>
<span className={`text-[10px] px-2 rounded-full bg-[#EAFCF1] text-[#447955] whitespace-nowrap`}>
{getDiscountText(item)}
</span>
</div>
</div>
</div>