style(index): 优化首页样式与布局
- 重新设计首页背景色与容器安全区适配 - 优化Hero Banner区域增加圆角遮罩效果 - 调整Hero Grid菜单区样式，去除背景色实现透明效果 - 新增公告条样式，自定义样式替代NutUI NoticeBar - 优化底部购买按钮样式，调整高度及阴影 - 统一首页通用section的左右边距，融合TrustSection和ContactSection样式
This commit is contained in:
17
.workbuddy/expert-history.json
Normal file
17
.workbuddy/expert-history.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": 2,
|
||||
"sessions": {
|
||||
"8469bdd5894b41e1ba171a40f33d6a83": [
|
||||
{
|
||||
"expertId": "UiDesigner",
|
||||
"name": "Sam",
|
||||
"profession": "UI设计师",
|
||||
"avatarUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/avatars/01-Design/UiDesigner/UiDesigner.png",
|
||||
"promptUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/experts/01-Design/UiDesigner/UiDesigner_zh.md",
|
||||
"usedAt": 1775709039214,
|
||||
"industryId": "all"
|
||||
}
|
||||
]
|
||||
},
|
||||
"lastUpdated": 1775711001059
|
||||
}
|
||||
23
.workbuddy/memory/2026-04-09.md
Normal file
23
.workbuddy/memory/2026-04-09.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 2026-04-09 工作日志
|
||||
|
||||
## 首页UI重构 — 去除"豆腐块"布局
|
||||
用户反馈首页过于规整的"豆腐块"布局，要求重新设计。完成以下改动：
|
||||
|
||||
### 设计思路
|
||||
- 打破均匀间距，各模块使用差异化 padding/margin
|
||||
- 去掉公式化的"模块标题+白色卡片"结构
|
||||
- 引入沉浸式视觉区域和横向交互
|
||||
|
||||
### 具体改动
|
||||
1. **index.tsx** — 重构布局结构，引入 Hero 区域概念，Banner+Grid 融为一体
|
||||
2. **index.scss** — 全局样式重写，浅灰背景(#f5f5f7)，自定义公告条样式
|
||||
3. **TrustSection** — 从均匀三列改为横向滑动渐变卡片，突出数据亮点(10年/15年/98%)
|
||||
4. **ContactSection** — 从2x2网格改为全宽深色底部(#1e293b→#0f172a)，沉浸式设计
|
||||
5. **BestSellers** — 从纵向列表改为横向图文卡片(左图右信息)，更紧凑
|
||||
6. **CatalogShowcase** — 从小卡片改为大面积渐变视觉卡片，带装饰性书本图形
|
||||
7. **NoticeBar** — 替换NutUI NoticeBar为自定义轻量公告条
|
||||
|
||||
### 注意事项
|
||||
- `Fire` 图标在 @nutui/icons-react-taro 中不存在，改用 `StarFill`
|
||||
- Banner 组件保留动态数据加载能力，圆角样式通过外层 CSS 控制
|
||||
- Menu 组件已在原代码中 hidden，本次未改动
|
||||
@@ -20,21 +20,21 @@
|
||||
- 邀请码：`src/dealer/qrcode/index`
|
||||
- 导航工具：`src/utils/common.ts` (navTo函数)
|
||||
|
||||
## 首页结构 (2026-04-02 更新)
|
||||
- Header (吸顶搜索栏)
|
||||
- Menu (导航菜单，hidden)
|
||||
- Banner (轮播广告)
|
||||
- Grid (功能菜单)
|
||||
- NoticeBar (公告栏)
|
||||
- **BrochureEntry** (品牌画册入口卡片 — 位于公告栏下方)
|
||||
- BestSellers (热销商品)
|
||||
- **TrustSection** (品牌信任区 - 3列水平布局)
|
||||
- 品质保障：10年质保，德国进口五金
|
||||
- 专业团队：15年安装经验，持证上岗
|
||||
- 客户好评：5000+家庭选择，98%满意度
|
||||
- ~~CaseShowcase~~ (已注释隐藏，待有真实素材后再恢复)
|
||||
- **ContactSection** (联系方式 - 2x2网格布局)
|
||||
- 客服热线、在线咨询、门店地址、关注我们
|
||||
## 首页结构 (2026-04-09 重大重构)
|
||||
- Header (吸顶搜索栏，深色渐变背景)
|
||||
- **Hero区域** (Banner + Grid 融合，圆角过渡)
|
||||
- **NoticeStrip** (自定义轻量公告条，黄色圆点+文字)
|
||||
- **BestSellers** (热销推荐 — 横向图文卡片，左图右信息)
|
||||
- **CatalogShowcase** (品牌画册 — 大面积渐变视觉卡片)
|
||||
- **TrustSection** (品质信任区 — 横向滑动渐变卡片：10年质保/15年经验/98%满意度)
|
||||
- **ContactSection** (联系我们 — 全宽深色沉浸式底部)
|
||||
- PopUpAd (弹窗广告)
|
||||
|
||||
### 设计特点
|
||||
- 非豆腐块布局，差异化间距和视觉层次
|
||||
- 页面背景：#f5f5f7
|
||||
- 底部区域为深色渐变(#1e293b→#0f172a)
|
||||
- ~~CaseShowcase~~ (已注释隐藏)
|
||||
|
||||
## 图标使用注意事项
|
||||
- NutUI图标库中不存在的图标：
|
||||
@@ -45,13 +45,14 @@
|
||||
- 所有图标必须从 `@nutui/icons-react-taro` 导入
|
||||
- 构建前需验证图标名称是否在可用导出列表中
|
||||
|
||||
## 字体大小规范
|
||||
- 微信小程序使用 TailwindCSS 文本类，不使用固定像素值
|
||||
- 主标题：`text-lg font-semibold text-gray-800`
|
||||
- 副标题：`text-sm text-gray-500`
|
||||
- 项目标题：`text-base font-semibold text-gray-800`
|
||||
- 项目描述：`text-xs text-gray-500`
|
||||
- 小文本：`text-xs text-gray-500`
|
||||
## 字体大小规范 (2026-04-09 更新)
|
||||
- 微信小程序端按移动端标准设计，最小辅助文字 13-14px
|
||||
- 标签/辅助：14px
|
||||
- 正文/描述：15-16px
|
||||
- 小标题/按钮文字：16-17px
|
||||
- 区块标题：20-24px
|
||||
- 强调数字（价格、数据）：28-36px
|
||||
- 所有图标必须从 `@nutui/icons-react-taro` 导入
|
||||
|
||||
## 画册页正式版 (2026-04-01)
|
||||
- 首页已实际挂载 `src/pages/index/BrochureEntry.tsx` 入口，位置在 Banner 下方。
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
.bestsellers-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.bestsellers-item {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
transition: transform 0.15s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ═══ 左侧图片 ═══ */
|
||||
&__img-wrap {
|
||||
width: 140px;
|
||||
min-height: 140px;
|
||||
flex-shrink: 0;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ═══ 右侧信息 ═══ */
|
||||
&__info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 12px 12px 10px 14px;
|
||||
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;
|
||||
gap: 10px;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&__price-wrap {
|
||||
display: flex;
|
||||
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;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__share-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__buy-btn {
|
||||
height: 38px;
|
||||
padding: 0 20px;
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 空状态 ═══ */
|
||||
.bestsellers-empty {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,20 +18,15 @@ const BestSellers = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 处理分享点击
|
||||
const handleShare = (item: ShopGoods) => {
|
||||
setGoods(item);
|
||||
|
||||
// 显示分享选项菜单
|
||||
Taro.showActionSheet({
|
||||
itemList: ['分享给好友', '分享到朋友圈'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 分享给好友 - 触发转发
|
||||
Taro.showShareMenu({
|
||||
withShareTicket: true,
|
||||
success: () => {
|
||||
// 提示用户点击右上角分享
|
||||
Taro.showToast({
|
||||
title: '请点击右上角分享给好友',
|
||||
icon: 'none',
|
||||
@@ -40,7 +35,6 @@ const BestSellers = () => {
|
||||
}
|
||||
});
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 分享到朋友圈
|
||||
Taro.showToast({
|
||||
title: '请点击右上角分享到朋友圈',
|
||||
icon: 'none',
|
||||
@@ -58,32 +52,22 @@ const BestSellers = () => {
|
||||
reload()
|
||||
}, [])
|
||||
|
||||
// 分享给好友
|
||||
useShareAppMessage(() => {
|
||||
return {
|
||||
title: goods?.name || '精选商品',
|
||||
path: `/shop/goodsDetail/index?id=${goods?.goodsId}`,
|
||||
imageUrl: goods?.image, // 分享图片
|
||||
imageUrl: goods?.image,
|
||||
success: function (res: any) {
|
||||
console.log('分享成功', res);
|
||||
Taro.showToast({
|
||||
title: '分享成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
Taro.showToast({ title: '分享成功', icon: 'success', duration: 2000 });
|
||||
},
|
||||
fail: function (res: any) {
|
||||
console.log('分享失败', res);
|
||||
Taro.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
Taro.showToast({ title: '分享失败', icon: 'none', duration: 2000 });
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// 分享到朋友圈
|
||||
useShareTimeline(() => {
|
||||
return {
|
||||
title: `${goods?.name || '精选商品'} - 南南佐顿门窗`,
|
||||
@@ -93,49 +77,62 @@ const BestSellers = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={'py-1 px-4'}>
|
||||
<View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
|
||||
{list?.map((item, index) => {
|
||||
return (
|
||||
<View key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
|
||||
<Image src={item.image} mode={'aspectFit'} lazyLoad={false}
|
||||
radius="10px 10px 0 0" height="180"
|
||||
onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
|
||||
<View className={'flex flex-col p-2 rounded-lg'}>
|
||||
<View>
|
||||
<View className={'car-no text-sm'}>{item.name}</View>
|
||||
<View className={'flex justify-between text-xs py-1'}>
|
||||
<Text className={'text-orange-500'}>{item.comments}</Text>
|
||||
<Text className={'text-gray-400'}>已售 {item.sales}</Text>
|
||||
</View>
|
||||
<View className={'flex justify-between items-center py-2'}>
|
||||
<View className={'flex text-red-500 text-xl items-baseline'}>
|
||||
<Text className={'text-xs'}>￥</Text>
|
||||
<Text className={'font-bold text-2xl'}>{item.price}</Text>
|
||||
</View>
|
||||
<View className={'buy-btn'}>
|
||||
<View className={'cart-icon flex items-center'}>
|
||||
<View
|
||||
className={'flex flex-col justify-center items-center text-white px-3 gap-1 text-nowrap whitespace-nowrap cursor-pointer'}
|
||||
onClick={() => handleShare(item)}
|
||||
>
|
||||
<Share size={20}/>
|
||||
</View>
|
||||
</View>
|
||||
<Text className={'text-white pl-4 pr-5'}
|
||||
onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="bestsellers-list">
|
||||
{list?.map((item, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className="bestsellers-item"
|
||||
onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}
|
||||
>
|
||||
{/* 左侧商品图 */}
|
||||
<View className="bestsellers-item__img-wrap">
|
||||
<Image
|
||||
src={item.image}
|
||||
mode="aspectFill"
|
||||
lazyLoad={false}
|
||||
className="bestsellers-item__img"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 右侧信息区 */}
|
||||
<View className="bestsellers-item__info">
|
||||
<Text className="bestsellers-item__name">{item.name}</Text>
|
||||
|
||||
<View className="bestsellers-item__tags">
|
||||
<Text className="bestsellers-item__comment">{item.comments}</Text>
|
||||
<Text className="bestsellers-item__sales">已售 {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>
|
||||
</View>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View className="bestsellers-item__actions">
|
||||
<View
|
||||
className="bestsellers-item__share-btn"
|
||||
onClick={(e) => { e.stopPropagation(); handleShare(item) }}
|
||||
>
|
||||
<Share size={18} color="#9ca3af" />
|
||||
</View>
|
||||
<View className="bestsellers-item__buy-btn">
|
||||
<Text>购买</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
))}
|
||||
|
||||
{list.length === 0 && (
|
||||
<View className="bestsellers-empty">
|
||||
<Text className="bestsellers-empty__text">暂无热销商品</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default BestSellers
|
||||
|
||||
@@ -1,109 +1,144 @@
|
||||
.catalog-showcase {
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.catalog-card {
|
||||
position: relative;
|
||||
margin: 24px 16px 8px;
|
||||
padding: 24px 20px;
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #3b82f6 100%);
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3);
|
||||
|
||||
.catalog-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.catalog-title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.catalog-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.catalog-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.catalog-subtitle {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.catalog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.catalog-preview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.catalog-cover {
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.cover-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.cover-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.cover-subtext {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.view-catalog-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: linear-gradient(to right, #3b82f6, #2563eb);
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
&:active {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
/* ═══ 装饰圆 ═══ */
|
||||
&__deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
&--1 {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
top: -40px;
|
||||
right: -30px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: -20px;
|
||||
left: 20%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 内容区 ═══ */
|
||||
&__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
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;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 12px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 100px;
|
||||
padding: 8px 16px;
|
||||
align-self: flex-start;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&__cta-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #ffffff;
|
||||
/* ═══ 右侧书本图形 ═══ */
|
||||
&__right {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__book {
|
||||
width: 72px;
|
||||
height: 90px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 4px 10px 10px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&__book-spine {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&__book-pages {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&__book-page {
|
||||
width: 4px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 2px;
|
||||
|
||||
&:nth-child(1) { height: 28px; }
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { Button } from '@nutui/nutui-react-taro'
|
||||
import { File, ArrowRight } from '@nutui/icons-react-taro'
|
||||
import { ArrowRight } from '@nutui/icons-react-taro'
|
||||
import './CatalogShowcase.scss'
|
||||
|
||||
const CATALOG_URL = 'https://book.yunzhan365.com/mdfy/tjcs/mobile/index.html'
|
||||
|
||||
function CatalogShowcase() {
|
||||
const handleViewCatalog = () => {
|
||||
// 复制链接到剪贴板
|
||||
Taro.setClipboardData({
|
||||
data: CATALOG_URL,
|
||||
success: () => {
|
||||
@@ -17,7 +15,6 @@ function CatalogShowcase() {
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
// 延迟后提示用户到浏览器打开
|
||||
setTimeout(() => {
|
||||
Taro.showModal({
|
||||
title: '提示',
|
||||
@@ -28,41 +25,41 @@ function CatalogShowcase() {
|
||||
}, 2100)
|
||||
},
|
||||
fail: () => {
|
||||
Taro.showToast({
|
||||
title: '复制失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
Taro.showToast({ title: '复制失败，请重试', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="catalog-showcase">
|
||||
<View className="catalog-header">
|
||||
<View className="catalog-title-bar">
|
||||
<File className="catalog-icon" />
|
||||
<Text className="catalog-title">品牌画册</Text>
|
||||
</View>
|
||||
<Text className="catalog-subtitle">了解南南佐顿门窗的产品与服务</Text>
|
||||
</View>
|
||||
|
||||
<View className="catalog-content">
|
||||
<View className="catalog-preview">
|
||||
<View className="catalog-cover">
|
||||
<File className="cover-icon" />
|
||||
<Text className="cover-text">南南佐顿门窗</Text>
|
||||
<Text className="cover-subtext">品牌电子画册</Text>
|
||||
<View className="catalog-card" onClick={handleViewCatalog}>
|
||||
{/* 装饰性背景元素 */}
|
||||
<View className="catalog-card__deco catalog-card__deco--1" />
|
||||
<View className="catalog-card__deco catalog-card__deco--2" />
|
||||
|
||||
<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>
|
||||
<View className="catalog-card__cta">
|
||||
<Text className="catalog-card__cta-text">点击查看画册</Text>
|
||||
<ArrowRight size={16} color="#ffffff" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="catalog-card__right">
|
||||
<View className="catalog-card__book">
|
||||
<View className="catalog-card__book-spine" />
|
||||
<View className="catalog-card__book-pages">
|
||||
<View className="catalog-card__book-page" />
|
||||
<View className="catalog-card__book-page" />
|
||||
<View className="catalog-card__book-page" />
|
||||
</View>
|
||||
<Text className="catalog-card__book-label">2026</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
className="view-catalog-btn"
|
||||
type="primary"
|
||||
onClick={handleViewCatalog}
|
||||
>
|
||||
<Text className="btn-text">点击查看</Text>
|
||||
<ArrowRight className="btn-icon" />
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,143 +1,95 @@
|
||||
.contact-section {
|
||||
background: #ffffff;
|
||||
padding: 24px 16px;
|
||||
margin: 16px 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
margin-top: 0;
|
||||
padding: 32px 20px 24px;
|
||||
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
|
||||
border-radius: 24px 24px 0 0;
|
||||
color: #ffffff;
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&-text {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
/* ═══ 引言区 ═══ */
|
||||
&__intro {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
|
||||
&:active {
|
||||
background: #f1f5f9;
|
||||
transform: scale(0.98);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--blue {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
&--orange {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
&--cyan {
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__item-title {
|
||||
&__intro-title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin-bottom: 4px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&__item-value {
|
||||
&__intro-desc {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* ═══ 操作按钮区 ═══ */
|
||||
&__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 18px;
|
||||
border-radius: 14px;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&__action--primary {
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
|
||||
&__action--secondary {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
&__action-text {
|
||||
flex: 1;
|
||||
margin-left: 14px;
|
||||
display: flex;
|
||||
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 #e2e8f0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
&__footer-text {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 375px) {
|
||||
.contact-section {
|
||||
padding: 20px 12px;
|
||||
margin: 12px 0;
|
||||
|
||||
&__grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,59 +8,6 @@ import {
|
||||
import './ContactSection.scss'
|
||||
|
||||
const ContactSection: React.FC = () => {
|
||||
const contactItems = [
|
||||
{
|
||||
icon: <Phone size={20} color="#3b82f6" />,
|
||||
title: '联系电话',
|
||||
value: '13367810229',
|
||||
action: 'call',
|
||||
colorClass: 'contact-item--blue'
|
||||
},
|
||||
{
|
||||
icon: <Message size={20} color="#10b981" />,
|
||||
title: '在线咨询',
|
||||
value: '点击立即咨询',
|
||||
action: 'chat',
|
||||
colorClass: 'contact-item--green'
|
||||
},
|
||||
// {
|
||||
// icon: <Location size={20} color="#f59e0b" />,
|
||||
// title: '门店地址',
|
||||
// value: '上海市浦东新区XX路888号',
|
||||
// action: 'map',
|
||||
// colorClass: 'contact-item--orange'
|
||||
// },
|
||||
// {
|
||||
// icon: <Share size={20} color="#06b6d4" />,
|
||||
// title: '关注我们',
|
||||
// value: '南南佐顿门窗',
|
||||
// action: 'wechat',
|
||||
// colorClass: 'contact-item--cyan'
|
||||
// }
|
||||
]
|
||||
|
||||
const handleAction = (action: string) => {
|
||||
switch (action) {
|
||||
case 'call':
|
||||
handleCallPhone()
|
||||
break
|
||||
case 'chat':
|
||||
handleOnlineChat()
|
||||
break
|
||||
case 'map':
|
||||
console.log('查看地图')
|
||||
// TODO: 跳转到地图导航
|
||||
break
|
||||
case 'wechat':
|
||||
console.log('关注公众号')
|
||||
// TODO: 显示公众号二维码
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 拨打电话功能
|
||||
const handleCallPhone = () => {
|
||||
Taro.showModal({
|
||||
title: '拨打电话',
|
||||
@@ -76,10 +23,7 @@ const ContactSection: React.FC = () => {
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('拨打电话失败:', err)
|
||||
Taro.showToast({
|
||||
title: '拨打电话失败',
|
||||
icon: 'none'
|
||||
})
|
||||
Taro.showToast({ title: '拨打电话失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -87,29 +31,19 @@ const ContactSection: React.FC = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 在线咨询功能
|
||||
const handleOnlineChat = () => {
|
||||
// 检查是否已登录
|
||||
Taro.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (_) => {
|
||||
// 用户已登录，跳转到聊天页面
|
||||
Taro.navigateTo({
|
||||
url: '/pages/user/chat/conversation/index',
|
||||
success: () => {
|
||||
console.log('跳转到聊天页面成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('跳转失败:', err)
|
||||
Taro.showToast({
|
||||
title: '跳转失败，请稍后重试',
|
||||
icon: 'none'
|
||||
})
|
||||
Taro.showToast({ title: '跳转失败，请稍后重试', icon: 'none' })
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
// 用户未登录，提示登录
|
||||
Taro.showModal({
|
||||
title: '登录提示',
|
||||
content: '需要登录后才能在线咨询，是否立即登录？',
|
||||
@@ -121,10 +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' })
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -135,35 +66,40 @@ const ContactSection: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="contact-section px-4">
|
||||
<View className="contact-section__title flex flex-col">
|
||||
<Text className="text-lg font-semibold text-gray-800">联系我们</Text>
|
||||
<Text className="text-sm text-gray-500">随时为您提供专业服务</Text>
|
||||
</View>
|
||||
|
||||
<View className="contact-section__grid">
|
||||
{contactItems.map((item, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className="contact-section__item"
|
||||
onClick={() => handleAction(item.action)}
|
||||
>
|
||||
<View className={`contact-section__icon ${item.colorClass}`}>
|
||||
{item.icon}
|
||||
</View>
|
||||
<View className="contact-section__content flex flex-col">
|
||||
<Text className="text-xs text-gray-500">{item.title}</Text>
|
||||
<Text className="text-sm font-semibold text-gray-800 truncate">{item.value}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className="contact-section__footer">
|
||||
<Text className="text-xs text-gray-500">
|
||||
营业时间：周一至周日 8:30-18:00
|
||||
<View className="contact-section">
|
||||
{/* 顶部引言区 */}
|
||||
<View className="contact-section__intro">
|
||||
<Text className="contact-section__intro-title">联系我们</Text>
|
||||
<Text className="contact-section__intro-desc">
|
||||
随时为您提供专业的门窗定制咨询服务
|
||||
</Text>
|
||||
<Text className="text-xs text-gray-500">
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
@@ -1,101 +1,94 @@
|
||||
.trust-section {
|
||||
background: #ffffff;
|
||||
padding: 24px 16px;
|
||||
margin: 16px 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 32px;
|
||||
padding: 32px 0 24px;
|
||||
background: #f5f5f7;
|
||||
|
||||
&__header {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&-text {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
&__label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&--blue {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
&--orange {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__item-title {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: #9ca3af;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__item-desc {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
line-height: 1.4;
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* 横向滑动容器 */
|
||||
&__scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__track {
|
||||
display: inline-flex;
|
||||
gap: 12px;
|
||||
padding: 0 20px 8px;
|
||||
}
|
||||
|
||||
/* 单张渐变卡片 */
|
||||
&__card {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
padding: 20px 16px;
|
||||
border-radius: 16px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&__card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media (max-width: 375px) {
|
||||
.trust-section {
|
||||
padding: 20px 12px;
|
||||
margin: 12px 0;
|
||||
|
||||
&__grid {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import {
|
||||
ShieldCheck,
|
||||
People,
|
||||
@@ -10,43 +10,60 @@ import './TrustSection.scss'
|
||||
const TrustSection: React.FC = () => {
|
||||
const trustItems = [
|
||||
{
|
||||
icon: <ShieldCheck size={24} color="#3b82f6" />,
|
||||
icon: <ShieldCheck size={28} color="#ffffff" />,
|
||||
title: '品质保障',
|
||||
description: '10年质保，德国进口五金',
|
||||
colorClass: '--blue'
|
||||
highlight: '10年',
|
||||
description: '质保承诺',
|
||||
subDescription: '德国进口五金配件',
|
||||
bg: 'linear-gradient(135deg, #3b82f6, #2563eb)',
|
||||
},
|
||||
{
|
||||
icon: <People size={24} color="#10b981" />,
|
||||
icon: <People size={28} color="#ffffff" />,
|
||||
title: '专业团队',
|
||||
description: '15年安装经验，持证上岗',
|
||||
colorClass: '--green'
|
||||
highlight: '15年',
|
||||
description: '安装经验',
|
||||
subDescription: '全员持证上岗',
|
||||
bg: 'linear-gradient(135deg, #10b981, #059669)',
|
||||
},
|
||||
{
|
||||
icon: <Star size={24} color="#f59e0b" />,
|
||||
icon: <Star size={28} color="#ffffff" />,
|
||||
title: '客户好评',
|
||||
description: '5000+家庭选择，98%满意度',
|
||||
colorClass: '--orange'
|
||||
highlight: '98%',
|
||||
description: '满意度',
|
||||
subDescription: '5000+家庭信赖之选',
|
||||
bg: 'linear-gradient(135deg, #f59e0b, #d97706)',
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<View className="trust-section">
|
||||
<View className="trust-section__title flex flex-col">
|
||||
<Text className="text-lg font-semibold text-gray-800">南南佐顿 · 品质之选</Text>
|
||||
<Text className="text-sm text-gray-500">专业门窗定制安装服务</Text>
|
||||
<View className="trust-section__header">
|
||||
<Text className="trust-section__label">WHY CHOOSE US</Text>
|
||||
<Text className="trust-section__title">为什么选择南南佐顿</Text>
|
||||
</View>
|
||||
|
||||
<View className="trust-section__grid">
|
||||
{trustItems.map((item, index) => (
|
||||
<View key={index} className="trust-section__item">
|
||||
<View className={`trust-section__icon trust-section__icon${item.colorClass}`}>
|
||||
{item.icon}
|
||||
<ScrollView
|
||||
className="trust-section__scroll"
|
||||
scrollX
|
||||
enhanced
|
||||
showScrollbar={false}
|
||||
>
|
||||
<View className="trust-section__track">
|
||||
{trustItems.map((item, index) => (
|
||||
<View key={index} className="trust-section__card" style={{background: item.bg}}>
|
||||
<View className="trust-section__card-icon">
|
||||
{item.icon}
|
||||
</View>
|
||||
<Text className="trust-section__card-title">{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>
|
||||
</View>
|
||||
<Text className="trust-section__card-sub">{item.subDescription}</Text>
|
||||
</View>
|
||||
<Text className="text-base font-semibold text-gray-800">{item.title}</Text>
|
||||
<Text className="text-xs text-gray-500">{item.description}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,34 +1,135 @@
|
||||
page {
|
||||
//background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center;
|
||||
//background-size: 100%;
|
||||
background: linear-gradient(to bottom, #3b82f6, #ffffff);
|
||||
background: #f5f5f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// 底部内容区域统一间距
|
||||
.bottom-content-section {
|
||||
margin: 16px 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
/* ═══ 首页容器 ═══ */
|
||||
.home-page {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* ═══ Hero 顶部视觉区 ═══ */
|
||||
|
||||
.hero-banner-wrap {
|
||||
padding: 0 16px;
|
||||
padding-top: 6px;
|
||||
|
||||
/* 让Banner Swiper有圆角 */
|
||||
.nut-swiper {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.nut-swiper-item {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-btn{
|
||||
height: 70px;
|
||||
background: linear-gradient(to bottom, #2563eb, #3b82f6);
|
||||
/* Hero下方的Grid菜单区 */
|
||||
.hero-grid {
|
||||
margin: 0 16px;
|
||||
margin-top: -12px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
|
||||
/* 让NutUI Grid的白色背景更好融入 */
|
||||
.nut-grid {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nut-grid-item__content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 公告条 — 自定义样式替代NutUI NoticeBar ═══ */
|
||||
.notice-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
margin: 0 16px 8px;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border-radius: 8px;
|
||||
gap: 8px;
|
||||
|
||||
&__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #f59e0b;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
color: #92400e;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 热销推荐 ═══ */
|
||||
.section-hot {
|
||||
padding: 20px 0 4px;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px 14px;
|
||||
}
|
||||
|
||||
&__title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
&__more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 15px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ 通用section间距重置（去掉TrustSection/ContactSection自带的margin） ═══ */
|
||||
.home-page .trust-section,
|
||||
.home-page .contact-section {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ═══ 底部购买按钮 ═══ */
|
||||
.buy-btn {
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
border-radius: 100px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.cart-icon{
|
||||
background: linear-gradient(to bottom, #60a5fa, #3b82f6);
|
||||
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
|
||||
|
||||
.cart-icon {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 100px 0 0 100px;
|
||||
height: 70px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user