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

- 更改页面背景渐变颜色 - 调整购买按钮背景渐变颜色 - 修改购物车图标背景渐变颜色 - 重构快速操作组件布局结构 - 更新快速操作图标尺寸和样式 - 移除快速操作标题和描述文字 - 简化快速操作组件渲染逻辑 - 添加图标颜色分类样式类
2026-03-30 20:28:16 +08:00
parent a4ca51a3e9
commit 49e2c567a1
4 changed files with 51 additions and 105 deletions
--- 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;
--- 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;
  }
 }
--- a/src/pages/index/QuickActions.tsx
+++ b/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'>
-        <Text className='quick-actions__title'>快捷服务</Text>
-      </View>
-      <View className='quick-actions__row'>
-        <View className='quick-actions__item' onClick={() => handleClick(actions[0])}>
-          <View className='quick-actions__icon-box'>
-            {React.cloneElement(actions[0].icon as React.ReactElement, { color: '#ffffff' })}
+      {actions.map((action, index) => (
+        <View
+          key={index}
+          className='quick-actions__item'
+          onClick={() => handleClick(action)}
+        >
+          <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__item-desc'>{actions[0].subtitle}</Text>
+          <Text className='quick-actions__label'>{action.title}</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>
  )
 }
--- 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;
  }