From a4ca51a3e9afd39d316177d91950886bc9bcdb12 Mon Sep 17 00:00:00 2001 From: gxwebsoft <170083662@qq.com> Date: Mon, 30 Mar 2026 20:08:26 +0800 Subject: [PATCH] =?UTF-8?q?refactor(QuickActions):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=93=8D=E4=BD=9C=E7=BB=84=E4=BB=B6=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将网格布局改为行布局，优化响应式显示效果 - 简化登录验证逻辑，移除不必要的配置项 - 更新图标尺寸从26px到28px，提升视觉体验 - 移除子标题显示，简化界面元素 - 重构CSS类名，统一命名规范 - 优化渐变背景色实现，增强视觉层次感 - 调整内边距和间距，改善整体布局美观度 --- src/pages/index/QuickActions.scss | 96 +++++++++++------------- src/pages/index/QuickActions.tsx | 117 ++++++++++++------------------ 2 files changed, 90 insertions(+), 123 deletions(-) diff --git a/src/pages/index/QuickActions.scss b/src/pages/index/QuickActions.scss index db28596..95e59d0 100644 --- a/src/pages/index/QuickActions.scss +++ b/src/pages/index/QuickActions.scss @@ -1,93 +1,81 @@ .quick-actions { margin: 16px 16px 0; - padding: 20px 16px 16px; + padding: 20px; background: #ffffff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); - &__title-row { - display: flex; - flex-direction: column; + &__header { margin-bottom: 20px; - padding-left: 4px; } &__title { font-size: 18px; font-weight: 600; color: #1a1a1a; - line-height: 1; } - &__subtitle { - font-size: 13px; - color: #999999; - margin-top: 6px; - line-height: 1; - } - - &__grid { + &__row { display: flex; - flex-wrap: wrap; - gap: 12px; - } + flex-direction: row; + margin-bottom: 12px; - &__item { - width: calc(50% - 6px); - display: flex; - flex-direction: column; - align-items: center; - padding: 18px 8px 14px; - background: #f9fafb; - border-radius: 14px; - transition: background 0.2s; - position: relative; - overflow: hidden; - - &:active { - background: #f3f4f6; + &:last-child { + margin-bottom: 0; } } - &__icon-wrap { - position: relative; - width: 52px; - height: 52px; - margin-bottom: 10px; + &__item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 8px 16px; + background: #f6f8fc; + border-radius: 14px; + margin-right: 12px; + + &:last-child { + margin-right: 0; + } + + &:active { + opacity: 0.8; + } } - &__icon-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + &__icon-box { + width: 52px; + height: 52px; border-radius: 16px; - opacity: 1; - } - - &__icon-inner { - position: relative; - z-index: 1; - width: 52px; - height: 52px; display: flex; align-items: center; justify-content: center; - border-radius: 16px; + margin-bottom: 12px; + background: linear-gradient(135deg, #2563eb, #3b82f6); + + &--light { + background: linear-gradient(135deg, #60a5fa, #93c5fd); + } + + &--deep { + background: linear-gradient(135deg, #1e40af, #2563eb); + } + + &--navy { + background: linear-gradient(135deg, #1e3a5f, #1e5090); + } } &__item-title { font-size: 15px; font-weight: 600; color: #1a1a1a; - line-height: 1.2; margin-bottom: 4px; } - &__item-subtitle { + &__item-desc { font-size: 12px; color: #999999; - line-height: 1.2; } } diff --git a/src/pages/index/QuickActions.tsx b/src/pages/index/QuickActions.tsx index e8e4171..92d563d 100644 --- a/src/pages/index/QuickActions.tsx +++ b/src/pages/index/QuickActions.tsx @@ -10,104 +10,83 @@ import { import navTo from '@/utils/common' import './QuickActions.scss' -interface QuickActionItem { - icon: React.ReactNode - title: string - subtitle?: string - path: string - needLogin: boolean - bgColor: string - iconColor: string - gradient: string -} - const QuickActions: React.FC = () => { - const actions: QuickActionItem[] = [ + const actions = [ { - icon: , + icon: , title: '我要推荐', subtitle: '推荐赚佣金', - path: '/dealer/index', - needLogin: true, - bgColor: 'rgba(255, 147, 0, 0.08)', - iconColor: '#FF9300', - gradient: 'linear-gradient(135deg, #FF9300 0%, #FFB347 100%)' + path: '/dealer/index' }, { - icon: , + icon: , title: '我的客户', subtitle: '查看客户列表', - path: '/dealer/customer/index', - needLogin: true, - bgColor: 'rgba(59, 130, 246, 0.08)', - iconColor: '#3B82F6', - gradient: 'linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%)' + path: '/dealer/customer/index' }, { - icon: , + icon: , title: '邀请好友', subtitle: '分享赚收益', - path: '/dealer/qrcode/index', - needLogin: true, - bgColor: 'rgba(16, 185, 129, 0.08)', - iconColor: '#10B981', - gradient: 'linear-gradient(135deg, #10B981 0%, #34D399 100%)' + path: '/dealer/qrcode/index' }, { - icon: , + icon: , title: '我的钱包', subtitle: '收益与提现', - path: '/user/wallet/wallet', - needLogin: true, - bgColor: 'rgba(139, 92, 246, 0.08)', - iconColor: '#8B5CF6', - gradient: 'linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%)' + path: '/user/wallet/wallet' } ] - const handleClick = (action: QuickActionItem) => { - if (action.needLogin) { - if (!Taro.getStorageSync('access_token') || !Taro.getStorageSync('UserId')) { - Taro.showToast({ - title: '请先登录', - icon: 'none', - duration: 1500 - }) - return - } + const handleClick = (action: { path: string }) => { + if (!Taro.getStorageSync('access_token') || !Taro.getStorageSync('UserId')) { + Taro.showToast({ + title: '请先登录', + icon: 'none', + duration: 1500 + }) + return } navTo(action.path) } return ( - + 快捷服务 - 为您精选常用功能 - - {actions.map((action, index) => ( - handleClick(action)} - > - - - - {React.cloneElement(action.icon as React.ReactElement, { - color: '#ffffff' - })} - - - {action.title} - {action.subtitle} + + handleClick(actions[0])}> + + {React.cloneElement(actions[0].icon as React.ReactElement, { color: '#ffffff' })} - ))} + {actions[0].title} + {actions[0].subtitle} + + handleClick(actions[1])}> + + {React.cloneElement(actions[1].icon as React.ReactElement, { color: '#ffffff' })} + + {actions[1].title} + {actions[1].subtitle} + + + + handleClick(actions[2])}> + + {React.cloneElement(actions[2].icon as React.ReactElement, { color: '#ffffff' })} + + {actions[2].title} + {actions[2].subtitle} + + handleClick(actions[3])}> + + {React.cloneElement(actions[3].icon as React.ReactElement, { color: '#ffffff' })} + + {actions[3].title} + {actions[3].subtitle} + )