diff --git a/src/pages/index/Header.scss b/src/pages/index/Header.scss
index d206e3b..337e69d 100644
--- a/src/pages/index/Header.scss
+++ b/src/pages/index/Header.scss
@@ -1,5 +1,5 @@
.header-bg{
- background: linear-gradient(to bottom, #03605c, #18ae4f);
+ background: linear-gradient(to bottom, #1e3a5f, #2563eb);
height: 335px;
width: 100%;
top: 0;
@@ -7,7 +7,7 @@
z-index: 0;
}
.header-bg2{
- background: linear-gradient(to bottom, #03605c, #18ae4f);
+ background: linear-gradient(to bottom, #1e3a5f, #2563eb);
height: 200px;
width: 100%;
top: 0;
diff --git a/src/pages/index/QuickActions.scss b/src/pages/index/QuickActions.scss
index 95e59d0..3b9490d 100644
--- a/src/pages/index/QuickActions.scss
+++ b/src/pages/index/QuickActions.scss
@@ -1,81 +1,50 @@
.quick-actions {
- margin: 16px 16px 0;
- padding: 20px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 24px 16px;
background: #ffffff;
- border-radius: 16px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
-
- &__header {
- margin-bottom: 20px;
- }
-
- &__title {
- font-size: 18px;
- font-weight: 600;
- color: #1a1a1a;
- }
-
- &__row {
- display: flex;
- flex-direction: row;
- margin-bottom: 12px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
&__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;
+ opacity: 0.7;
}
}
- &__icon-box {
- width: 52px;
- height: 52px;
- border-radius: 16px;
+ &__icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
- margin-bottom: 12px;
- background: linear-gradient(135deg, #2563eb, #3b82f6);
+ margin-bottom: 8px;
- &--light {
- background: linear-gradient(135deg, #60a5fa, #93c5fd);
+ &--orange {
+ background: #ff8c1a;
}
- &--deep {
- background: linear-gradient(135deg, #1e40af, #2563eb);
+ &--blue {
+ background: #3b82f6;
}
- &--navy {
- background: linear-gradient(135deg, #1e3a5f, #1e5090);
+ &--cyan {
+ background: #06b6d4;
+ }
+
+ &--red {
+ background: #ef4444;
}
}
- &__item-title {
- font-size: 15px;
- font-weight: 600;
- color: #1a1a1a;
- margin-bottom: 4px;
- }
-
- &__item-desc {
- font-size: 12px;
- color: #999999;
+ &__label {
+ font-size: 13px;
+ color: #333333;
+ font-weight: 500;
}
}
diff --git a/src/pages/index/QuickActions.tsx b/src/pages/index/QuickActions.tsx
index 92d563d..725d2a7 100644
--- a/src/pages/index/QuickActions.tsx
+++ b/src/pages/index/QuickActions.tsx
@@ -14,28 +14,28 @@ const QuickActions: React.FC = () => {
const actions = [
{
- icon: ,
+ icon: ,
title: '我要推荐',
- subtitle: '推荐赚佣金',
- path: '/dealer/index'
+ path: '/dealer/index',
+ iconClass: 'qa-icon--orange'
},
{
- icon: ,
+ icon: ,
title: '我的客户',
- subtitle: '查看客户列表',
- path: '/dealer/customer/index'
+ path: '/dealer/customer/index',
+ iconClass: 'qa-icon--blue'
},
{
- icon: ,
+ icon: ,
title: '邀请好友',
- subtitle: '分享赚收益',
- path: '/dealer/qrcode/index'
+ path: '/dealer/qrcode/index',
+ iconClass: 'qa-icon--cyan'
},
{
- icon: ,
+ icon: ,
title: '我的钱包',
- subtitle: '收益与提现',
- path: '/user/wallet/wallet'
+ path: '/user/wallet/wallet',
+ iconClass: 'qa-icon--red'
}
]
@@ -53,41 +53,18 @@ const QuickActions: React.FC = () => {
return (
-
- 快捷服务
-
-
- handleClick(actions[0])}>
-
- {React.cloneElement(actions[0].icon as React.ReactElement, { color: '#ffffff' })}
+ {actions.map((action, index) => (
+ handleClick(action)}
+ >
+
+ {React.cloneElement(action.icon as React.ReactElement, { color: '#ffffff' })}
- {actions[0].title}
- {actions[0].subtitle}
+ {action.title}
- 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}
-
-
+ ))}
)
}
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 548c6a7..1a56364 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -1,19 +1,19 @@
page {
//background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center;
//background-size: 100%;
- background: linear-gradient(to bottom, #00eda3, #ffffff);
+ background: linear-gradient(to bottom, #3b82f6, #ffffff);
}
.buy-btn{
height: 70px;
- background: linear-gradient(to bottom, #1cd98a, #24ca94);
+ background: linear-gradient(to bottom, #2563eb, #3b82f6);
border-radius: 100px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-around;
.cart-icon{
- background: linear-gradient(to bottom, #bbe094, #4ee265);
+ background: linear-gradient(to bottom, #60a5fa, #3b82f6);
border-radius: 100px 0 0 100px;
height: 70px;
}