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; }