From 0c51cf85c45bd5f1666de3730702864b6fc8f077 Mon Sep 17 00:00:00 2001
From: xuan <w1359774872@gmail.com>
Date: Fri, 17 Mar 2023 19:58:32 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E9=A6=96=E9=A1=B5=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87):=20=E4=BF=AE=E6=94=B9=E6=A0=87=E9=A2=98=E6=96=87?=
 =?UTF-8?q?=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/constant.ts            |  3 +++
 src/pages/index/index.module.scss | 31 ++++++++++++++++++++++++++-----
 src/pages/index/index.tsx         | 21 +++++++++++++++++----
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/common/constant.ts b/src/common/constant.ts
index 74bd374..c78c402 100644
--- a/src/common/constant.ts
+++ b/src/common/constant.ts
@@ -54,6 +54,9 @@ export const HOME_ITEM1 = getCDNSource('/mall/home_item1.png')
 export const HOME_ITEM2 = getCDNSource('/mall/home_item2.png')
 export const HOME_ITEM3 = getCDNSource('/mall/home_item3.png')
 export const HOME_ITEM4 = getCDNSource('/mall/home_item4.png')
+export const HOME_ITEM1_BACKGROUND = getCDNSource('/mall/home_item1_backgroud.png')
+export const HOME_ITEM2_BACKGROUND = getCDNSource('/mall/home_item2_background.png')
+export const HOME_ITEM3_BACKGROUND = getCDNSource('/mall/home_item3_background.png')
 export const BUSINESS_MANAGER = getCDNSource('/color_card/businessManager.png')
 
 // 场景值
diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss
index 0e77aa2..adf05ba 100644
--- a/src/pages/index/index.module.scss
+++ b/src/pages/index/index.module.scss
@@ -93,19 +93,19 @@
   //     }
   //   }
   // }
-  .extended_module{
+  .extended_module {
     margin-top: 16px;
     padding: 0 24px;
-    .module_header{
+    .module_header {
       display: flex;
       justify-content: space-between;
       padding: 16px 0;
-      &_title{
+      &_title {
         color: #4e4e4e;
         font-size: 32px;
         font-weight: bold;
       }
-      &_more{
+      &_more {
         display: flex;
         align-items: center;
         font-size: 28px;
@@ -114,9 +114,30 @@
     }
   }
 }
-.more_recommend{
+.more_recommend {
   color: $color_main;
   text-align: center;
   font-size: 28px;
   padding: 20px 0;
 }
+.homeItem {
+  position: absolute;
+  top: 25px;
+  left: 24px;
+  .homeItemTitle {
+    font-weight: 500;
+    font-size: 25px;
+    color: #323233;
+    line-height: 38px;
+  }
+  .homeItemContent {
+    color: #bfc0c4;
+    line-height: 38px;
+    font-size: 25px;
+  }
+}
+.grid_left_image,
+.grid_top_image,
+.grid_bottom_image {
+  position: relative;
+}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 02b9756..531baaf 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -12,7 +12,7 @@ import useLogin from '@/use/useLogin'
 import { dataLoadingStatus } from '@/common/util'
 import IconFont from '@/components/iconfont/iconfont'
 import IconText from '@/components/iconText'
-import { HOME_ITEM1, HOME_ITEM2, HOME_ITEM3, HOME_ITEM4 } from '@/common/constant'
+import { HOME_ITEM1, HOME_ITEM1_BACKGROUND, HOME_ITEM2, HOME_ITEM2_BACKGROUND, HOME_ITEM3, HOME_ITEM3_BACKGROUND, HOME_ITEM4 } from '@/common/constant'
 import { EnumLabelPageJumpApi, GetLabelProductsApi } from '@/api/search'
 import MoveBtn from '@/components/moveBtn'
 
@@ -171,19 +171,32 @@ const Index = () => {
             <View className={classNames(styles.grid_item, styles.grid_left)} onClick={() => handleClickHomeItem('高端奢侈')}>
               {/* 高端奢侈 */}
               <View className={styles.grid_left_image}>
-                <Image className="full-100" src={HOME_ITEM4} mode="aspectFit" />
+                <Image className="full-100" src={HOME_ITEM1_BACKGROUND} mode="aspectFit" />
+                <View className={styles.homeItem}>
+                  <View className={styles.homeItemTitle}>新品发布</View>
+                  <View className={styles.homeItemContent}>时尚引领世界</View>
+                  <View className={styles.homeItemContent}>创新制造未来</View>
+                </View>
               </View>
             </View>
             <View className={classNames(styles.grid_item, styles.grid_top)} onClick={() => handleClickHomeItem('热销走量')}>
               {/* 热销走量 */}
               <View className={styles.grid_top_image}>
-                <Image className="full-100" src={HOME_ITEM2} mode="aspectFit" />
+                <Image className="full-100" src={HOME_ITEM2_BACKGROUND} mode="aspectFit" />
+                <View className={styles.homeItem}>
+                  <View className={styles.homeItemTitle}>当季推荐</View>
+                  <View className={styles.homeItemContent}>应季面料 选购攻略</View>
+                </View>
               </View>
             </View>
             <View className={classNames(styles.grid_item, styles.grid_bottom)} onClick={() => handleClickHomeItem('性价比')}>
               {/* 性价比 */}
               <View className={styles.grid_bottom_image}>
-                <Image className="full-100" src={HOME_ITEM3} mode="aspectFit" />
+                <Image className="full-100" src={HOME_ITEM3_BACKGROUND} mode="aspectFit" />
+                <View className={styles.homeItem}>
+                  <View className={styles.homeItemTitle}>热销走量</View>
+                  <View className={styles.homeItemContent}>热销产品 让利多销</View>
+                </View>
               </View>
             </View>
           </View>