style(index): 更新首页样式和快速操作组件

- 更改页面背景渐变颜色
- 调整购买按钮背景渐变颜色
- 修改购物车图标背景渐变颜色
- 重构快速操作组件布局结构
- 更新快速操作图标尺寸和样式
- 移除快速操作标题和描述文字
- 简化快速操作组件渲染逻辑
- 添加图标颜色分类样式类

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;

src/pages/index/QuickActions.scss

@@ -1,81 +1,50 @@
 .quick-actions {
-  margin: 16px 16px 0;
+  display: flex;
-  padding: 20px;
+  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 {
+  &__icon {
-    width: 52px;
+    width: 48px;
-    height: 52px;
+    height: 48px;
-    border-radius: 16px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
-    background: linear-gradient(135deg, #2563eb, #3b82f6);
 
-    &--light {
+    &--orange {
-      background: linear-gradient(135deg, #60a5fa, #93c5fd);
+      background: #ff8c1a;
     }
 
-    &--deep {
+    &--blue {
-      background: linear-gradient(135deg, #1e40af, #2563eb);
+      background: #3b82f6;
     }
 
-    &--navy {
+    &--cyan {
-      background: linear-gradient(135deg, #1e3a5f, #1e5090);
+      background: #06b6d4;
+    }
+
+    &--red {
+      background: #ef4444;
     }
   }
 
-  &__item-title {
+  &__label {
-    font-size: 15px;
+    font-size: 13px;
-    font-weight: 600;
+    color: #333333;
-    color: #1a1a1a;
+    font-weight: 500;
-    margin-bottom: 4px;
-  }
-
-  &__item-desc {
-    font-size: 12px;
-    color: #999999;
   }
 }

src/pages/index/QuickActions.tsx

@@ -14,28 +14,28 @@ const QuickActions: React.FC = () => {
 
   const actions = [
     {
-      icon: <Star size={28} />,
+      icon: <Star size={22} />,
       title: '我要推荐',
-      subtitle: '推荐赚佣金',
+      path: '/dealer/index',
-      path: '/dealer/index'
+      iconClass: 'qa-icon--orange'
     },
     {
-      icon: <People size={28} />,
+      icon: <People size={22} />,
       title: '我的客户',
-      subtitle: '查看客户列表',
+      path: '/dealer/customer/index',
-      path: '/dealer/customer/index'
+      iconClass: 'qa-icon--blue'
     },
     {
-      icon: <AddCircle size={28} />,
+      icon: <AddCircle size={22} />,
       title: '邀请好友',
-      subtitle: '分享赚收益',
+      path: '/dealer/qrcode/index',
-      path: '/dealer/qrcode/index'
+      iconClass: 'qa-icon--cyan'
     },
     {
-      icon: <Wallet size={28} />,
+      icon: <Wallet size={22} />,
       title: '我的钱包',
-      subtitle: '收益与提现',
+      path: '/user/wallet/wallet',
-      path: '/user/wallet/wallet'
+      iconClass: 'qa-icon--red'
     }
   ]
 
@@ -53,41 +53,18 @@ const QuickActions: React.FC = () => {
 
   return (
     <View className='quick-actions'>
-      <View className='quick-actions__header'>
+      {actions.map((action, index) => (
-        <Text className='quick-actions__title'>快捷服务</Text>
+        <View
-      </View>
+          key={index}
-      <View className='quick-actions__row'>
+          className='quick-actions__item'
-        <View className='quick-actions__item' onClick={() => handleClick(actions[0])}>
+          onClick={() => handleClick(action)}
-          <View className='quick-actions__icon-box'>
+        >
-            {React.cloneElement(actions[0].icon as React.ReactElement, { color: '#ffffff' })}
+          <View className={`quick-actions__icon ${action.iconClass}`}>
+            {React.cloneElement(action.icon as React.ReactElement, { color: '#ffffff' })}
           </View>
-          <Text className='quick-actions__item-title'>{actions[0].title}</Text>
+          <Text className='quick-actions__label'>{action.title}</Text>
-          <Text className='quick-actions__item-desc'>{actions[0].subtitle}</Text>
         </View>
-        <View className='quick-actions__item' onClick={() => handleClick(actions[1])}>
+      ))}
-          <View className='quick-actions__icon-box quick-actions__icon-box--light'>
-            {React.cloneElement(actions[1].icon as React.ReactElement, { color: '#ffffff' })}
-          </View>
-          <Text className='quick-actions__item-title'>{actions[1].title}</Text>
-          <Text className='quick-actions__item-desc'>{actions[1].subtitle}</Text>
-        </View>
-      </View>
-      <View className='quick-actions__row'>
-        <View className='quick-actions__item' onClick={() => handleClick(actions[2])}>
-          <View className='quick-actions__icon-box quick-actions__icon-box--deep'>
-            {React.cloneElement(actions[2].icon as React.ReactElement, { color: '#ffffff' })}
-          </View>
-          <Text className='quick-actions__item-title'>{actions[2].title}</Text>
-          <Text className='quick-actions__item-desc'>{actions[2].subtitle}</Text>
-        </View>
-        <View className='quick-actions__item' onClick={() => handleClick(actions[3])}>
-          <View className='quick-actions__icon-box quick-actions__icon-box--navy'>
-            {React.cloneElement(actions[3].icon as React.ReactElement, { color: '#ffffff' })}
-          </View>
-          <Text className='quick-actions__item-title'>{actions[3].title}</Text>
-          <Text className='quick-actions__item-desc'>{actions[3].subtitle}</Text>
-        </View>
-      </View>
     </View>
   )
 }

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