优化加项面板样式

src/components/exam/ExamAddonPanel.tsx

@@ -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,36 +172,37 @@ 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'>{item.name}</div>
-                  <div className='font-semibold text-[14px] text-gray-900 mb-1'>{item.name}</div>
-
-                  {/* 标签 */}
-                  {item.tags && item.tags.length > 0 && (
-                    <div className='flex flex-wrap gap-1 mb-2'>
-                      {item.tags
-                        .filter(t => t.type !== 4) // 折扣信息单独显示
-                        .map((tag, idx) => (
-                          <span
-                            key={idx}
-                            className={`text-[10px] px-2 rounded-full ${getTagStyle(tag)}`}
-                          >
-                            {tag.title}
-                          </span>
-                        ))}
-                    </div>
-                  )}
                 </div>
               </div>
 
-              {/* 价格信息 */}
+              {/* 第二行：标签 */}
-              <div className='mt-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) => (
+                      <span
+                        key={idx}
+                        className={`text-[10px] px-2 rounded-full ${getTagStyle(tag)}`}
+                      >
+                        {tag.title}
+                      </span>
+                    ))}
+                </div>
+              )}
+
+              {/* 第三行：价格信息（固定在卡片底部） */}
+              <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>