developer/template-10582
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 移除 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
Download Patch File Download Diff File Expand all files Collapse all files

2
.workbuddy/expert-history.json
View File

@@ -13,5 +13,5 @@
}
]
},
"lastUpdated": 1775711001059
"lastUpdated": 1775712243089
}

19
.workbuddy/memory/MEMORY.md
View File

@@ -47,13 +47,22 @@
## 字体大小规范 (2026-04-09 更新)
- 微信小程序端按移动端标准设计，最小辅助文字 13-14px
- 标签/辅助：14px
- 正文/描述：15-16px
- 小标题/按钮文字：16-17px
- 区块标题：20-24px
- 强调数字（价格、数据）：28-36px
- 使用 TailwindCSS 工具类（text-xs/sm/base/lg/xl/2xl/3xl/4xl），不使用 SCSS font-size
- 扩展了 tailwind.config.js：text-15(15px)、text-17(17px)、text-28(28px)
- 标签/辅助：14px (text-sm)
- 正文/描述：15-16px (text-15/text-base)
- 小标题/按钮文字：16-17px (text-base/text-17)
- 区块标题：20-24px (text-xl/text-2xl)
- 强调数字（价格、数据）：28-36px (text-28/text-4xl)
- 所有图标必须从 `@nutui/icons-react-taro` 导入
## Tailwind 小程序兼容性注意事项
- **禁止使用斜杠透明度简写**：`text-white/40`、`bg-black/50`、`border-gray/30` 等含 `/` 的写法在小程序不兼容，需要透明度时改用 SCSS `color: rgba(...)` 或在 tailwind.config.js 中定义语义色
- **禁止使用小数间距**：`mt-0.5`、`p-0.5`、`gap-0.5` 等含小数点的工具类在小程序不兼容，改用整数如 `mt-1`、`p-1`
- **禁止使用任意值 `-[?]` 写法**：`text-[14px]`、`w-[100px]` 等方括号任意值写法在小程序不兼容，改用 Tailwind 预设类或在 tailwind.config.js 中扩展
- **颜色替代方案**：`text-white` 在小程序中可能不生效，改用 `text-gray`（如 `text-gray-100`~`text-gray-50` 等），深色背景上的白色文字优先用 `text-gray-100`
- 当前代码中 ContactSection/TrustSection/CatalogShowcase 共有 9 处 `text-white/xx` 待修复
## 画册页正式版 (2026-04-01)
- 首页已实际挂载 `src/pages/index/BrochureEntry.tsx` 入口，位置在 Banner 下方。
- `src/pages/brochure/index.tsx` 当前为原生正式版结构：主营方案、核心优势、升级关键词、服务承诺、案例方向、服务流程、预约咨询信息。

48
src/pages/index/BestSellers.scss
View File

@@ -42,17 +42,6 @@
min-height: 140px;
}
&__name {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
&__tags {
display: flex;
align-items: center;
@@ -60,19 +49,6 @@
margin-top: 6px;
}
&__comment {
font-size: 14px;
color: #f59e0b;
background: rgba(245, 158, 11, 0.08);
padding: 2px 8px;
border-radius: 4px;
}
&__sales {
font-size: 14px;
color: #9ca3af;
}
/* ═══ 底部操作栏 ═══ */
&__bottom {
display: flex;
@@ -87,19 +63,6 @@
align-items: baseline;
}
&__price-symbol {
font-size: 15px;
font-weight: 600;
color: #ef4444;
}
&__price-num {
font-size: 28px;
font-weight: 800;
color: #ef4444;
line-height: 1;
}
&__actions {
display: flex;
align-items: center;
@@ -125,12 +88,6 @@
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
Text {
font-size: 15px;
font-weight: 600;
color: #ffffff;
}
}
}
@@ -138,9 +95,4 @@
.bestsellers-empty {
padding: 40px 0;
text-align: center;
&__text {
font-size: 15px;
color: #9ca3af;
}
}

14
src/pages/index/BestSellers.tsx
View File

@@ -96,18 +96,18 @@ const BestSellers = () => {
{/* 右侧信息区 */}
<View className="bestsellers-item__info">
<Text className="bestsellers-item__name">{item.name}</Text>
<Text className="text-base font-semibold text-gray-900 leading-snug">{item.name}</Text>
<View className="bestsellers-item__tags">
<Text className="bestsellers-item__comment">{item.comments}</Text>
<Text className="bestsellers-item__sales">已售 {item.sales}</Text>
<Text className="text-sm text-amber-500 bg-amber-50 px-2 rounded">{item.comments}</Text>
<Text className="text-sm text-gray-400">已售 {item.sales}</Text>
</View>
<View className="bestsellers-item__bottom">
{/* 价格 */}
<View className="bestsellers-item__price-wrap">
<Text className="bestsellers-item__price-symbol">￥</Text>
<Text className="bestsellers-item__price-num">{item.price}</Text>
<Text className="text-15 font-semibold text-red-500">￥</Text>
<Text className="text-28 font-extrabold text-red-500 leading-none">{item.price}</Text>
</View>
{/* 操作按钮 */}
@@ -119,7 +119,7 @@ const BestSellers = () => {
<Share size={18} color="#9ca3af" />
</View>
<View className="bestsellers-item__buy-btn">
<Text>购买</Text>
<Text className="text-base font-semibold text-white">购买</Text>
</View>
</View>
</View>
@@ -129,7 +129,7 @@ const BestSellers = () => {
{list.length === 0 && (
<View className="bestsellers-empty">
<Text className="bestsellers-empty__text">暂无热销商品</Text>
<Text className="text-base text-gray-400">暂无热销商品</Text>
</View>
)}
</View>

40
src/pages/index/CatalogShowcase.scss
View File

@@ -40,6 +40,7 @@
justify-content: space-between;
align-items: center;
position: relative;
padding: 16px;
z-index: 1;
}
@@ -51,26 +52,6 @@
padding-right: 16px;
}
&__badge {
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 2px;
}
&__title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-bottom: 2px;
}
&__desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
}
&__cta {
display: inline-flex;
align-items: center;
@@ -84,20 +65,14 @@
border: 1px solid rgba(255, 255, 255, 0.2);
}
&__cta-text {
font-size: 15px;
font-weight: 600;
color: #ffffff;
}
/* ═══ 右侧书本图形 ═══ */
&__right {
flex-shrink: 0;
}
&__book {
width: 72px;
height: 90px;
width: 142px;
height: 180px;
background: rgba(255, 255, 255, 0.12);
border-radius: 4px 10px 10px 4px;
display: flex;
@@ -132,13 +107,4 @@
&:nth-child(2) { height: 40px; }
&:nth-child(3) { height: 32px; }
}
&__book-label {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
}
}

12
src/pages/index/CatalogShowcase.tsx
View File

@@ -38,13 +38,15 @@ function CatalogShowcase() {
<View className="catalog-card__content">
<View className="catalog-card__left">
<Text className="catalog-card__badge">BRAND CATALOG</Text>
<Text className="catalog-card__title">品牌画册</Text>
<Text className="catalog-card__desc">
<Text className="text-xs text-gray-400 tracking-widest">BRAND CATALOG</Text>
<Text className="text-2xl font-bold text-white mb-1">品牌画册</Text>
<Text className="text-xs text-gray-300 leading-relaxed" style={{
width: '90%'
}}>
了解南南佐顿门窗的完整产品线与定制方案
</Text>
<View className="catalog-card__cta">
<Text className="catalog-card__cta-text">点击查看画册</Text>
<Text className="text-base font-semibold text-white px-4">点击查看画册</Text>
<ArrowRight size={16} color="#ffffff" />
</View>
</View>
@@ -57,7 +59,7 @@ function CatalogShowcase() {
<View className="catalog-card__book-page" />
<View className="catalog-card__book-page" />
</View>
<Text className="catalog-card__book-label">2026</Text>
<Text className="text-lg font-bold text-gray-300 px-1">2026</Text>
</View>
</View>
</View>

39
src/pages/index/ContactSection.scss
View File

@@ -10,20 +10,6 @@
margin-bottom: 24px;
}
&__intro-title {
display: block;
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-bottom: 6px;
}
&__intro-desc {
display: block;
font-size: 15px;
color: rgba(255, 255, 255, 0.5);
}
/* ═══ 操作按钮区 ═══ */
&__actions {
display: flex;
@@ -61,35 +47,10 @@
flex-direction: column;
}
&__action-label {
font-size: 17px;
font-weight: 600;
color: #ffffff;
margin-bottom: 2px;
}
&__action-value {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
/* ═══ 底部信息 ═══ */
&__footer {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
&__footer-text {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 4px;
}
&__footer-sub {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, 0.25);
}
}

72
src/pages/index/ContactSection.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {View, Text} from '@tarojs/components'
import {
Phone,
Message
@@ -23,7 +23,7 @@ const ContactSection: React.FC = () => {
},
fail: (err) => {
console.error('拨打电话失败:', err)
Taro.showToast({ title: '拨打电话失败', icon: 'none' })
Taro.showToast({title: '拨打电话失败', icon: 'none'})
}
})
}
@@ -39,7 +39,7 @@ const ContactSection: React.FC = () => {
url: '/pages/user/chat/conversation/index',
fail: (err) => {
console.error('跳转失败:', err)
Taro.showToast({ title: '跳转失败，请稍后重试', icon: 'none' })
Taro.showToast({title: '跳转失败，请稍后重试', icon: 'none'})
}
})
},
@@ -55,7 +55,7 @@ const ContactSection: React.FC = () => {
url: '/pages/passport/login',
fail: (err) => {
console.error('跳转到登录页失败:', err)
Taro.showToast({ title: '跳转失败', icon: 'none' })
Taro.showToast({title: '跳转失败', icon: 'none'})
}
})
}
@@ -66,43 +66,45 @@ const ContactSection: React.FC = () => {
}
return (
<View className="contact-section">
{/* 顶部引言区 */}
<View className="contact-section__intro">
<Text className="contact-section__intro-title">联系我们</Text>
<Text className="contact-section__intro-desc">
随时为您提供专业的门窗定制咨询服务
</Text>
</View>
<View className={'px-2'}>
<View className="contact-section">
{/* 顶部引言区 */}
<View className="contact-section__intro">
<Text className="block text-2xl font-bold text-white mb-1">联系我们</Text>
<Text className="block text-base text-white">
随时为您提供专业的门窗定制咨询服务
</Text>
</View>
{/* 操作按钮 — 全宽醒目 */}
<View className="contact-section__actions">
<View className="contact-section__action contact-section__action--primary" onClick={handleCallPhone}>
<Phone size={22} color="#ffffff" />
<View className="contact-section__action-text">
<Text className="contact-section__action-label">电话咨询</Text>
<Text className="contact-section__action-value">13367810229</Text>
{/* 操作按钮 — 全宽醒目 */}
<View className="contact-section__actions">
<View className="contact-section__action contact-section__action--primary" onClick={handleCallPhone}>
<Phone size={22} color="#ffffff"/>
<View className="contact-section__action-text">
<Text className="text-17 font-semibold text-white">电话咨询</Text>
<Text className="text-sm text-white">13367810229</Text>
</View>
</View>
<View className="contact-section__action contact-section__action--secondary" onClick={handleOnlineChat}>
<Message size={22} color="#3b82f6"/>
<View className="contact-section__action-text">
<Text className="text-17 font-semibold text-white">在线咨询</Text>
<Text className="text-sm text-white">点击立即咨询</Text>
</View>
</View>
</View>
<View className="contact-section__action contact-section__action--secondary" onClick={handleOnlineChat}>
<Message size={22} color="#3b82f6" />
<View className="contact-section__action-text">
<Text className="contact-section__action-label">在线咨询</Text>
<Text className="contact-section__action-value">点击立即咨询</Text>
</View>
{/* 底部信息 */}
<View className="contact-section__footer">
<Text className="block text-sm text-white mb-1">
营业时间：周一至周日 8:30 - 18:00
</Text>
<Text className="block text-xs text-white">
节假日照常营业，欢迎随时咨询
</Text>
</View>
</View>
{/* 底部信息 */}
<View className="contact-section__footer">
<Text className="contact-section__footer-text">
营业时间：周一至周日 8:30 - 18:00
</Text>
<Text className="contact-section__footer-sub">
节假日照常营业，欢迎随时咨询
</Text>
</View>
</View>
)
}

44
src/pages/index/TrustSection.scss
View File

@@ -5,23 +5,8 @@
&__header {
padding: 0 20px;
margin-bottom: 16px;
}
&__label {
display: block;
font-size: 14px;
font-weight: 600;
color: #9ca3af;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
}
&__title {
display: block;
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
display: flex;
flex-direction: column;
}
/* 横向滑动容器 */
@@ -60,35 +45,10 @@
margin-bottom: 14px;
}
&__card-title {
font-size: 17px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 8px;
}
&__card-highlight-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
}
&__card-highlight {
font-size: 36px;
font-weight: 800;
line-height: 1;
color: #ffffff;
}
&__card-desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.75);
}
&__card-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin-top: 4px;
}
}

12
src/pages/index/TrustSection.tsx
View File

@@ -38,8 +38,8 @@ const TrustSection: React.FC = () => {
return (
<View className="trust-section">
<View className="trust-section__header">
<Text className="trust-section__label">WHY CHOOSE US</Text>
<Text className="trust-section__title">为什么选择南南佐顿</Text>
<Text className="text-xs font-semibold text-gray-400 tracking-wider uppercase mb-1">WHY CHOOSE US</Text>
<Text className="text-xl font-bold text-gray-900">为什么选择南南佐顿</Text>
</View>
<ScrollView
@@ -54,12 +54,12 @@ const TrustSection: React.FC = () => {
<View className="trust-section__card-icon">
{item.icon}
</View>
<Text className="trust-section__card-title">{item.title}</Text>
<Text className="text-17 font-semibold text-white mb-2">{item.title}</Text>
<View className="trust-section__card-highlight-row">
<Text className="trust-section__card-highlight">{item.highlight}</Text>
<Text className="trust-section__card-desc">{item.description}</Text>
<Text className="text-4xl font-extrabold leading-none text-white">{item.highlight}</Text>
<Text className="text-base text-white">{item.description}</Text>
</View>
<Text className="trust-section__card-sub">{item.subDescription}</Text>
<Text className="text-xs text-white mt-1">{item.subDescription}</Text>
</View>
))}
</View>

3
src/pages/index/index.scss
View File

@@ -66,7 +66,6 @@ page {
}
&__text {
font-size: 15px;
color: #92400e;
line-height: 1.5;
display: -webkit-box;
@@ -94,7 +93,6 @@ page {
}
&__title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: 0.5px;
@@ -104,7 +102,6 @@ page {
display: flex;
align-items: center;
gap: 2px;
font-size: 15px;
color: #9ca3af;
}
}

29
src/pages/index/index.tsx
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>*/}
{/* ═══ 品牌画册 — 沉浸式视觉卡片 ═══ */}

8
tailwind.config.js
View File

@@ -3,7 +3,13 @@ module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {},
extend: {
fontSize: {
'15': '15px',
'17': '17px',
'28': '28px',
},
},
},
variants: {
extend: {},