✨ feat(首页图片): 修改标题文字

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')
 
 // 场景值

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

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>