style(index): 优化首页样式与布局

- 重新设计首页背景色与容器安全区适配
- 优化Hero Banner区域增加圆角遮罩效果
- 调整Hero Grid菜单区样式，去除背景色实现透明效果
- 新增公告条样式，自定义样式替代NutUI NoticeBar
- 优化底部购买按钮样式，调整高度及阴影
- 统一首页通用section的左右边距，融合TrustSection和ContactSection样式

src/pages/index/index.tsx

@@ -4,22 +4,22 @@ import Taro from '@tarojs/taro';
 import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
 import {useEffect, useState} from "react";
 import {getShopInfo} from "@/api/layout";
-import {NoticeBar} from '@nutui/nutui-react-taro'
-import {View} from '@tarojs/components'
-import Menu from "./Menu";
-import Banner from "./Banner";
-import './index.scss'
+import {View, Text} from '@tarojs/components'
 import Grid from "@/pages/index/Grid";
+import Banner from "./Banner";
 import PopUpAd from "@/pages/index/PopUpAd";
 import TrustSection from "./TrustSection";
-import CaseShowcase from "./CaseShowcase";
 import ContactSection from "./ContactSection";
 import CatalogShowcase from "./CatalogShowcase";
 import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
 import type {Config} from "@/api/cms/cmsWebsiteField/model";
+import {
+  ArrowRight,
+  StarFill,
+} from '@nutui/icons-react-taro';
+import './index.scss'
 
 function Home() {
-  // 吸顶状态
   const [config, setConfig] = useState<Config>()
 
   useShareTimeline(() => {
@@ -50,7 +50,6 @@ function Home() {
       cancelText: '取消',
       success: (res) => {
         if (res.confirm) {
-          // 用户点击确认，打开授权设置页面
           openSetting();
         }
       }
@@ -58,14 +57,11 @@ function Home() {
   };
 
   const openSetting = () => {
-    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
     Taro.openSetting({
       success: (res) => {
         if (res.authSetting['scope.userInfo']) {
-          // 用户授权成功，可以获取用户信息
           reload();
         } else {
-          // 用户拒绝授权，提示授权失败
           Taro.showToast({
             title: '授权失败',
             icon: 'none'
@@ -80,29 +76,21 @@ function Home() {
   };
 
   useEffect(() => {
-    // 获取站点信息
-    getShopInfo().then(() => {
-
-    })
-    // 获取配置信息
+    getShopInfo().then(() => {})
     configWebsiteField({}).then(data => {
       setConfig(data)
     })
-    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
     Taro.getSetting({
       success: (res) => {
         if (res.authSetting['scope.userInfo']) {
-          // 用户已经授权过，可以直接获取用户信息
           console.log('用户已经授权过，可以直接获取用户信息')
           reload();
         } else {
-          // 用户未授权，需要弹出授权窗口
           console.log('用户未授权，需要弹出授权窗口')
           showAuthModal();
         }
       }
     });
-    // 获取用户信息
     Taro.getUserInfo({
       success: (res) => {
         const avatar = res.userInfo.avatarUrl;
@@ -113,19 +101,52 @@ function Home() {
 
   return (
     <>
-      {/*<Sticky threshold={0} onChange={() => onSticky(arguments)}>*/}
-        <Header/>
-      {/*</Sticky>*/}
-      <View className={'flex flex-col mt-1'}>
-        <Menu/>
-        <Banner/>
-        <Grid />
-        <NoticeBar content={config?.NoticeBar || '南南佐顿门窗，专业门窗定制安装服务，10年质保，德国进口五金，5000+家庭选择，98%客户满意度'} />
-        <BestSellers/>
-        <TrustSection/>
-        <CaseShowcase/>
-        <CatalogShowcase/>
-        <ContactSection/>
+      <Header/>
+      <View className={'home-page'}>
+
+        {/* ═══ Hero 区域：Banner 融入头部渐变背景 ═══ */}
+        <View className={'hero-zone my-2'}>
+          <View className={'hero-banner-wrap'}>
+            <Banner />
+          </View>
+
+          {/* 功能菜单 — 直接铺在Banner下方，无卡片包裹 */}
+          <View className={'hero-grid my-4'}>
+            <Grid />
+          </View>
+        </View>
+
+        {/* ═══ 滚动公告条 — 轻量嵌入 ═══ */}
+        <View className={'notice-strip my-4'}>
+          <View className={'notice-strip__dot'} />
+          <Text className={'text-sm'}>
+            {config?.NoticeBar || '南南佐顿门窗，专业门窗定制安装服务，10年质保，德国进口五金，5000+家庭选择'}
+          </Text>
+        </View>
+
+        {/* ═══ 热销推荐 — 标题行内嵌，无卡片边框 ═══ */}
+        {/*<View className={'section-hot'}>*/}
+        {/*  <View className={'section-hot__header'}>*/}
+        {/*    <View className={'section-hot__title-wrap'}>*/}
+        {/*      <StarFill size={20} color='#ef4444' />*/}
+        {/*      <Text className={'section-hot__title'}>热销推荐</Text>*/}
+        {/*    </View>*/}
+        {/*    <Text className={'section-hot__more'} onClick={() => Taro.navigateTo({url: '/shop/category/index'})}>*/}
+        {/*      更多 <ArrowRight size={14} color='#9ca3af' />*/}
+        {/*    </Text>*/}
+        {/*  </View>*/}
+        {/*  <BestSellers />*/}
+        {/*</View>*/}
+
+        {/* ═══ 品牌画册 — 沉浸式视觉卡片 ═══ */}
+        <CatalogShowcase />
+
+        {/* ═══ 品质信任区 — 横向滑动卡片 ═══ */}
+        <TrustSection />
+
+        {/* ═══ 联系我们 — 全宽底部 ═══ */}
+        <ContactSection />
+
       </View>
       <PopUpAd />
     </>