refactor(components): 重构 CouponCard 组件样式
- 优化了 CouponCard 组件的视觉效果，增加了更多细节和动画 - 添加了响应式样式，提高了移动端体验 - 新增了 CouponList组件样式，用于展示优惠券列表
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Badge } from "@nutui/nutui-react-taro";
|
||||
import { Cart } from "@nutui/icons-react-taro";
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useCart } from "@/hooks/useCart";
|
||||
import { switchTab } from '@/utils/navigation';
|
||||
|
||||
interface CartIconProps {
|
||||
style?: React.CSSProperties;
|
||||
@@ -26,13 +26,13 @@ const CartIcon: React.FC<CartIconProps> = ({
|
||||
onClick();
|
||||
} else {
|
||||
// 默认跳转到购物车页面
|
||||
Taro.switchTab({ url: '/pages/cart/cart' });
|
||||
switchTab('cart/cart');
|
||||
}
|
||||
};
|
||||
|
||||
if (showBadge) {
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className={className}
|
||||
style={style}
|
||||
onClick={handleClick}
|
||||
@@ -47,7 +47,7 @@ const CartIcon: React.FC<CartIconProps> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
className={className}
|
||||
style={style}
|
||||
onClick={handleClick}
|
||||
|
||||
@@ -2,115 +2,177 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
height: 140px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
background: #fff;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// 更精美的阴影效果
|
||||
box-shadow:
|
||||
0 4px 20px rgba(0, 0, 0, 0.08),
|
||||
0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 边框光晕效果
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 16px;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
transform: scale(0.98) translateY(1px);
|
||||
box-shadow:
|
||||
0 2px 12px rgba(0, 0, 0, 0.12),
|
||||
0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.3);
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
flex-shrink: 0;
|
||||
width: 110px;
|
||||
width: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 添加光泽效果
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
|
||||
transform: rotate(45deg);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
&.theme-red {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #e53e3e 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.theme-orange {
|
||||
background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
|
||||
background: linear-gradient(135deg, #ffa726 0%, #ff9800 50%, #f57c00 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.theme-blue {
|
||||
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
|
||||
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 50%, #1976d2 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.theme-purple {
|
||||
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
|
||||
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 50%, #7b1fa2 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.theme-green {
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.amount-wrapper {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.currency {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-right: 2px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
margin-right: 3px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 22px;
|
||||
opacity: 0.9;
|
||||
font-size: 24px;
|
||||
opacity: 0.95;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-divider {
|
||||
flex-shrink: 0;
|
||||
width: 2px;
|
||||
width: 3px;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
|
||||
|
||||
.divider-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
transform: translateX(-50%);
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 4px,
|
||||
#ddd 4px,
|
||||
#ddd 8px
|
||||
#cbd5e1 0px,
|
||||
#cbd5e1 6px,
|
||||
transparent 6px,
|
||||
transparent 12px
|
||||
);
|
||||
}
|
||||
|
||||
.divider-circle-top {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border-radius: 50%;
|
||||
top: -8px;
|
||||
left: -7px;
|
||||
top: -10px;
|
||||
left: -8.5px;
|
||||
border: 2px solid #e2e8f0;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.divider-circle-bottom {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border-radius: 50%;
|
||||
bottom: -8px;
|
||||
left: -7px;
|
||||
bottom: -10px;
|
||||
left: -8.5px;
|
||||
border: 2px solid #e2e8f0;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,7 +182,8 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
padding: 20px 18px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
|
||||
|
||||
.coupon-info {
|
||||
flex: 1;
|
||||
@@ -129,17 +192,32 @@
|
||||
justify-content: center;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 6px;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: #1a202c;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
// 添加文字渐变效果
|
||||
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 26px;
|
||||
color: #6b7280;
|
||||
color: #718096;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
|
||||
// 添加图标前缀
|
||||
&::before {
|
||||
content: '⏰';
|
||||
margin-right: 6px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -150,45 +228,71 @@
|
||||
flex-shrink: 0;
|
||||
|
||||
.coupon-btn {
|
||||
min-width: 120px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
font-size: 26px;
|
||||
min-width: 130px;
|
||||
height: 68px;
|
||||
border-radius: 34px;
|
||||
font-size: 28px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 添加按钮光泽效果
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.96) translateY(1px);
|
||||
}
|
||||
|
||||
&.theme-red {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #e53e3e 100%);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
&.theme-orange {
|
||||
background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
|
||||
background: linear-gradient(135deg, #ffa726 0%, #ff9800 50%, #f57c00 100%);
|
||||
box-shadow: 0 4px 12px rgba(255, 167, 38, 0.3);
|
||||
}
|
||||
|
||||
&.theme-blue {
|
||||
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
|
||||
background: linear-gradient(135deg, #42a5f5 0%, #2196f3 50%, #1976d2 100%);
|
||||
box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
|
||||
}
|
||||
|
||||
&.theme-purple {
|
||||
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
|
||||
background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 50%, #7b1fa2 100%);
|
||||
box-shadow: 0 4px 12px rgba(171, 71, 188, 0.3);
|
||||
}
|
||||
|
||||
&.theme-green {
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%);
|
||||
box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 26px;
|
||||
color: #9ca3af;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #a0aec0;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
|
||||
border-radius: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -199,19 +303,84 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(2px);
|
||||
|
||||
.status-badge {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式优化
|
||||
@media (max-width: 768px) {
|
||||
.coupon-card {
|
||||
height: 130px;
|
||||
|
||||
.coupon-left {
|
||||
width: 110px;
|
||||
|
||||
.amount-wrapper {
|
||||
.currency {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
padding: 16px 14px;
|
||||
|
||||
.coupon-info {
|
||||
.coupon-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-actions {
|
||||
.coupon-btn {
|
||||
min-width: 120px;
|
||||
height: 60px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
66
src/components/CouponList.scss
Normal file
66
src/components/CouponList.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
.coupon-list-container {
|
||||
padding: 0 16px;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.coupon-list-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.coupon-list-empty {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: #9ca3af;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.coupon-list-content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.coupon-list-item {
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 水平滚动布局样式 */
|
||||
.coupon-horizontal-container {
|
||||
.coupon-horizontal-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 24px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.coupon-horizontal-scroll {
|
||||
padding: 0 16px;
|
||||
|
||||
.coupon-horizontal-item {
|
||||
flex-shrink: 0;
|
||||
width: 240px;
|
||||
margin-right: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 16px; // 保持右边距
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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} />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Tabbar } from '@nutui/nutui-react-taro'
|
||||
import { Home, User } from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { switchTab } from '@/utils/navigation'
|
||||
|
||||
function TabBar(){
|
||||
return (
|
||||
@@ -9,13 +9,13 @@ function TabBar(){
|
||||
onSwitch={(index) => {
|
||||
console.log(index)
|
||||
if(index == 0){
|
||||
Taro.switchTab({ url: '/pages/index/index' })
|
||||
switchTab('index/index')
|
||||
}
|
||||
// if(index == 1){
|
||||
// Taro.navigateTo({ url: '/pages/detail/detail' })
|
||||
// goTo('detail/detail')
|
||||
// }
|
||||
if(index == 1){
|
||||
Taro.switchTab({ url: '/pages/user/user' })
|
||||
switchTab('user/user')
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user