refactor(components): 重构 CouponCard 组件样式

- 优化了 CouponCard 组件的视觉效果，增加了更多细节和动画
- 添加了响应式样式，提高了移动端体验
- 新增了 CouponList组件样式，用于展示优惠券列表

src/components/CouponList.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, ScrollView } from '@tarojs/components'
 import CouponCard, { CouponCardProps } from './CouponCard'
+import './CouponList.scss'
 
 export interface CouponListProps {
   /** 优惠券列表数据 */
@@ -32,26 +33,29 @@ const CouponList: React.FC<CouponListProps> = ({
   // 垂直布局
   if (layout === 'vertical') {
     return (
-      <View className="p-4">
+      <View className="coupon-list-container">
         {title && (
-          <View className="font-semibold text-gray-800 mb-4">{title}</View>
+          <View className="coupon-list-title">{title}</View>
         )}
 
         {coupons.length === 0 ? (
           showEmpty && (
-            <View className="text-center py-10 px-5 text-gray-500">
+            <View className="coupon-list-empty">
               {emptyText}
             </View>
           )
         ) : (
-          coupons.map((coupon, index) => (
-            <View
-              key={index}
-              onClick={() => handleCouponClick(coupon, index)}
-            >
-              <CouponCard {...coupon} />
-            </View>
-          ))
+          <View className="coupon-list-content">
+            {coupons.map((coupon, index) => (
+              <View
+                key={index}
+                className="coupon-list-item"
+                onClick={() => handleCouponClick(coupon, index)}
+              >
+                <CouponCard {...coupon} />
+              </View>
+            ))}
+          </View>
         )}
       </View>
     )
@@ -59,29 +63,29 @@ const CouponList: React.FC<CouponListProps> = ({
 
   // 水平滚动布局
   return (
-    <View>
+    <View className="coupon-horizontal-container">
       {title && (
-        <View className="font-semibold text-gray-800 mb-4 pl-4">
+        <View className="coupon-horizontal-title">
           {title}
         </View>
       )}
 
       {coupons.length === 0 ? (
         showEmpty && (
-          <View className="text-center py-10 px-5 text-gray-500">
+          <View className="coupon-list-empty">
             {emptyText}
           </View>
         )
       ) : (
         <ScrollView
           scrollX
-          className="flex p-4 gap-2 overflow-x-auto"
+          className="coupon-horizontal-scroll flex overflow-x-auto"
           showScrollbar={false}
         >
           {coupons.map((coupon, index) => (
             <View
               key={index}
-              className="flex-shrink-0 w-60 mb-0"
+              className="coupon-horizontal-item"
               onClick={() => handleCouponClick(coupon, index)}
             >
               <CouponCard {...coupon} />