refactor(style): 优化首页主要组件样式及布局实现

- 移除 BestSellers 组件中多余的 SCSS 样式,改用 TailwindCSS 工具类规范字体大小和颜色
- 替换 BestSellers.tsx 中对应元素的样式类为 TailwindCSS 实现,提升样式一致性和维护性
- 调整 CatalogShowcase 组件样式,删除不必要的 SCSS 样式,增加内边距并修改书本尺寸,整体优化布局
- CatalogShowcase.tsx 中相关文本和图形元素改为 TailwindCSS 实现,规范字体大小、颜色和间距
- ContactSection 组件部分样式移除过
This commit is contained in:
2026-04-09 13:35:50 +08:00
parent 25abd81d9f
commit 61025522aa
13 changed files with 89 additions and 253 deletions

View File

@@ -1,5 +1,4 @@
import Header from './Header';
import BestSellers from './BestSellers';
import Taro from '@tarojs/taro';
import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
import {useEffect, useState} from "react";
@@ -13,10 +12,6 @@ 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() {
@@ -117,25 +112,11 @@ function Home() {
</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 className={'notice-strip my-4'}>*/}
{/* <View className={'notice-strip__dot'} />*/}
{/* <Text className="text-15">*/}
{/* {config?.NoticeBar || '南南佐顿门窗专业门窗定制安装服务10年质保德国进口五金5000+家庭选择'}*/}
{/* </Text>*/}
{/*</View>*/}
{/* ═══ 品牌画册 — 沉浸式视觉卡片 ═══ */}