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}
+
)