yuanhe/ipad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化加项面板样式

Browse Source
This commit is contained in:
xianyi
2025-12-16 18:20:45 +08:00
parent 1d993e76c5
commit c78b2bf8ed
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/exam/ExamAddonPanel.tsx
View File

@@ -159,12 +159,11 @@ export const ExamAddonPanel = () => {
return ( return (
<div <div
key={id} 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)} onClick={() => toggleSelect(id)}
> >
{/* 复选框 */} {/* 第一行：复选框 + 名称 */}
<div className='flex items-start gap-2 mb-2'> <div className='flex items-start gap-2 mb-1'>
<input <input
type='checkbox' type='checkbox'
checked={isSelected} 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' 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='flex-1 min-w-0'>
{/* 项目名称 */} <div className='font-semibold text-[14px] text-gray-900'>{item.name}</div>
<div className='font-semibold text-[14px] text-gray-900 mb-1'>{item.name}</div> </div>
</div>
{/* 标签 */} {/* 第二行：标签 */}
{item.tags && item.tags.length > 0 && ( {item.tags && item.tags.length >= 0 && (
<div className='flex flex-wrap gap-1 mb-2'> <div className='flex flex-wrap gap-1 mb-2 pl-6'>
{item.tags {item.tags
.filter(t => t.type !== 4) // 折扣信息单独显示 .filter(t => t.type !== 4) // 折扣信息单独显示
.map((tag, idx) => ( .map((tag, idx) => (
@@ -191,18 +191,18 @@ export const ExamAddonPanel = () => {
))} ))}
</div> </div>
)} )}
</div>
</div>
{/* 价格信息 */} {/* 第三行：价格信息（固定在卡片底部） */}
<div className='mt-2'> <div className='mt-auto pt-2'>
<div className='flex flex-col'> <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> <span className='text-xs text-gray-400 line-through'>¥{origPrice.toFixed(0)}</span>
)} )}
<div className='flex items-center justify-between gap-2'> <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-[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> </div>
</div> </div>