From 49e2c567a13481c77775149dad903d0148f66f5e Mon Sep 17 00:00:00 2001
From: gxwebsoft <170083662@qq.com>
Date: Mon, 30 Mar 2026 20:28:16 +0800
Subject: [PATCH] =?UTF-8?q?style(index):=20=E6=9B=B4=E6=96=B0=E9=A6=96?=
=?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=BF=AB=E9=80=9F=E6=93=8D?=
=?UTF-8?q?=E4=BD=9C=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 更改页面背景渐变颜色
- 调整购买按钮背景渐变颜色
- 修改购物车图标背景渐变颜色
- 重构快速操作组件布局结构
- 更新快速操作图标尺寸和样式
- 移除快速操作标题和描述文字
- 简化快速操作组件渲染逻辑
- 添加图标颜色分类样式类
---
src/pages/index/Header.scss | 4 +-
src/pages/index/QuickActions.scss | 79 ++++++++++---------------------
src/pages/index/QuickActions.tsx | 67 +++++++++-----------------
src/pages/index/index.scss | 6 +--
4 files changed, 51 insertions(+), 105 deletions(-)
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;
}