huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

继续补充功能页面，consumer模块完成度70%

Browse Source
This commit is contained in:
cyh666666
2026-01-26 08:16:41 +08:00
parent 0ed62a8258
commit be90f1213b
17 changed files with 4859 additions and 8793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

765
pages/mall/consumer/index.uvue
View File

@@ -6,40 +6,34 @@
class="smart-navbar"
:style="{
paddingTop: statusBarHeight + 'px',
transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)',
opacity: showNavbar ? 1 : 0
transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)'
}"
>
<view class="nav-container">
<!-- 品牌标识区域 - 响应式显示 -->
<view class="brand-section">
<!-- 品牌标识 - 在电脑端和平板端显示，小屏幕隐藏 -->
<view class="brand-logo-area" :class="{ 'hidden-on-mobile': isMobile }">
<view class="brand-info">
<text class="brand-name">康乐医药商城</text>
<text class="brand-tag">官方认证·正品保障</text>
</view>
<view class="search-container">
<view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
<!-- 模拟输入框 -->
<text class="search-placeholder">请输入药品名称、症状或品牌</text>
<!-- 扫码图标 -->
<view class="nav-icon-btn" @click.stop="onScan">
<text class="nav-icon">🔳</text>
</view>
<!-- 相机图标 -->
<view class="nav-camera-btn" @click.stop="onCamera">
<text class="nav-camera-icon">📷</text>
</view>
<!-- 导航栏内搜索框 - 自适应平铺 -->
<view class="nav-search-container">
<view class="nav-search" @click="navigateToSearch">
<view class="nav-search-box">
<text class="nav-search-icon">🔍</text>
<!-- 小屏幕只显示搜索图标，隐藏搜索工具 -->
<view class="nav-search-tools" :class="{ 'hidden-on-mobile': isMobile }">
<text class="nav-tool-item">语音</text>
<text class="nav-tool-item">拍照</text>
</view>
</view>
</view>
<!-- 搜索按钮 -->
<view class="nav-inner-search-btn" :style="{ height: '22px' }">
<text class="nav-inner-search-text">搜索</text>
</view>
</view>
</view>
</view>
<!-- 导航栏占位符 - 确保内容正确布局 -->
<view class="navbar-placeholder" :style="{ height: (statusBarHeight + 100) + 'px' }"></view>
<!-- 导航栏占位符 - 移除，改为使用 margin-top -->
<!-- <view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view> -->
<!-- 主内容区 -->
<scroll-view
@@ -53,7 +47,7 @@
@scroll="handleScroll"
>
<!-- 智能健康卡片 -->
<view class="smart-health-card">
<view class="smart-health-card" :style="{ marginTop: (statusBarHeight + 44 + 10) + 'px' }">
<view class="health-content">
<view class="health-header">
<text class="health-title">智能健康助手</text>
@@ -239,7 +233,7 @@
v-for="item in familyItems"
:key="item.id"
class="family-item"
@click="navigateToCategory(item.categoryId)"
@click="navigateToCategory(item)"
>
<view class="family-icon" :style="{ backgroundColor: item.color }">
<text>{{ item.icon }}</text>
@@ -363,6 +357,11 @@ const activeSort = ref('sales')
const activeFilter = ref('recommend')
const currentPage = ref(1)
// 数据源
const allProducts = ref<any[]>([])
const hotProducts = ref<any[]>([])
const recommendedProducts = ref<any[]>([])
// 屏幕尺寸检测
const isMobile = ref(false)
@@ -424,53 +423,100 @@ const healthNews = [
}
]
// 热销药品
const hotProducts = [
{
id: 'hot1',
name: '布洛芬缓释胶囊',
specification: '0.3g*24粒',
price: 18.5,
originalPrice: 25.8,
image: 'https://picsum.photos/300/300?random=medicine1',
manufacturer: '修正药业',
sales: 2560,
badge: '热销'
},
{
id: 'hot2',
name: '板蓝根颗粒',
specification: '10g*20袋',
price: 22.8,
originalPrice: 29.9,
image: 'https://picsum.photos/300/300?random=medicine2',
manufacturer: '白云山',
sales: 1890,
badge: '推荐'
},
{
id: 'hot3',
name: '维生素C片',
specification: '100mg*100片',
price: 15.9,
originalPrice: 19.9,
image: 'https://picsum.photos/300/300?random=medicine3',
manufacturer: '养生堂',
sales: 1420,
badge: '特价'
},
{
id: 'hot4',
name: '胃康灵胶囊',
specification: '0.4g*24粒',
price: 32.8,
originalPrice: 38.5,
image: 'https://picsum.photos/300/300?random=medicine4',
manufacturer: '三九医药',
sales: 890,
badge: '新品'
// 初始化数据
const initData = () => {
const manufacturers = ['修正药业', '白云山', '养生堂', '三九医药', '同仁堂', '云南白药', '拜耳', '辉瑞']
const names = ['布洛芬', '板蓝根', '维生素C', '胃康灵', '阿莫西林', '连花清瘟', '氨溴索', '氯雷他定', '感冒灵', '健胃消食片', '阿司匹林', '蒙脱石散']
const tags = ['处方药', '中成药', '止咳化痰', '抗过敏', '感冒发烧', '肠胃用药', '消炎镇痛']
const featureds = ['医生推荐', '热销爆款', '家庭必备', '季节必备', '店长推荐']
const products = [] as any[]
for (let i = 0; i < 50; i++) {
const nameIdx = Math.floor(Math.random() * names.length)
const name = names[nameIdx]
const price = parseFloat((10 + Math.random() * 100).toFixed(1))
const originalPrice = parseFloat((price * (1.1 + Math.random() * 0.5)).toFixed(1))
const sales = Math.floor(Math.random() * 5000)
// 随机店铺ID，避免全部是同一家
const randomShopSuffix = Math.floor(Math.random() * 20) + 1
products.push({
id: `prod_${i}`,
shopId: `shop_${randomShopSuffix}`,
shopName: manufacturers[Math.floor(Math.random() * manufacturers.length)] + '官方旗舰店',
name: name + (Math.random() > 0.5 ? '胶囊' : '颗粒'),
specification: Math.random() > 0.5 ? '0.3g*24粒' : '10g*10袋',
price: price,
originalPrice: originalPrice,
image: '/static/images/default-product.png',
manufacturer: manufacturers[Math.floor(Math.random() * manufacturers.length)],
sales: sales,
rating: (3.5 + Math.random() * 1.5).toFixed(1),
reviews: Math.floor(Math.random() * 500),
tag: tags[Math.floor(Math.random() * tags.length)],
featured: Math.random() > 0.7 ? featureds[Math.floor(Math.random() * featureds.length)] : '',
badge: sales > 3000 ? '热销' : (price < 20 ? '特价' : (Math.random() > 0.8 ? '新品' : '')),
// Attributes for filtering
isNew: Math.random() > 0.8,
isRecommend: Math.random() > 0.6,
isHot: sales > 2000,
isDiscount: (originalPrice - price) > 15,
isQuality: price > 60
})
}
]
allProducts.value = products
filterHotProducts()
filterRecommendedProducts()
}
// 筛选热销商品
const filterHotProducts = () => {
let list = [...allProducts.value]
if (activeSort.value === 'sales') {
list.sort((a, b) => b.sales - a.sales)
} else if (activeSort.value === 'price') {
list.sort((a, b) => a.price - b.price)
} else if (activeSort.value === 'new') {
list = list.filter(p => p.isNew)
} else if (activeSort.value === 'recommend') {
list = list.filter(p => p.isRecommend)
}
// 如果筛选后数量不足4个，补足
if (list.length < 4) {
const remaining = allProducts.value.filter(p => !list.includes(p))
list = [...list, ...remaining]
}
hotProducts.value = list.slice(0, 4)
}
// 筛选推荐商品
const filterRecommendedProducts = () => {
let list = [...allProducts.value]
if (activeFilter.value === 'hot') {
list = list.filter(p => p.isHot)
} else if (activeFilter.value === 'discount') {
list = list.filter(p => p.isDiscount)
} else if (activeFilter.value === 'quality') {
list = list.filter(p => p.isQuality)
} else {
// 默认随机排序
list.sort(() => Math.random() - 0.5)
}
// 如果筛选后数量不足4个，补足
if (list.length < 4) {
const remaining = allProducts.value.filter(p => !list.includes(p))
list = [...list, ...remaining]
}
recommendedProducts.value = list.slice(0, 4)
}
// 家庭常备药
const familyItems = [
@@ -524,61 +570,10 @@ const familyItems = [
}
]
// 推荐商品
const recommendedProducts = [
{
id: 'rec1',
name: '阿莫西林胶囊',
specification: '0.25g*24粒',
price: 28.5,
originalPrice: 35.0,
image: 'https://picsum.photos/350/350?random=rec1',
rating: 4.8,
reviews: 156,
tag: '处方药',
featured: '医生推荐'
},
{
id: 'rec2',
name: '连花清瘟胶囊',
specification: '0.35g*36粒',
price: 42.8,
originalPrice: 48.0,
image: 'https://picsum.photos/350/350?random=rec2',
rating: 4.9,
reviews: 289,
tag: '中成药',
featured: '热销爆款'
},
{
id: 'rec3',
name: '盐酸氨溴索口服液',
specification: '100ml',
price: 35.9,
originalPrice: 42.0,
image: 'https://picsum.photos/350/350?random=rec3',
rating: 4.7,
reviews: 132,
tag: '止咳化痰',
featured: '家庭必备'
},
{
id: 'rec4',
name: '氯雷他定片',
specification: '10mg*6片',
price: 18.6,
originalPrice: 22.0,
image: 'https://picsum.photos/350/350?random=rec4',
rating: 4.6,
reviews: 98,
tag: '抗过敏',
featured: '季节必备'
}
]
// 生命周期
onMounted(() => {
initPage()
initData()
})
// 页面显示时重置状态
@@ -693,13 +688,13 @@ const switchCategory = (category: any) => {
// 切换排序
const switchSort = (sortId: string) => {
activeSort.value = sortId
// 这里可以添加排序逻辑
filterHotProducts()
}
// 切换筛选器
const switchFilter = (filterId: string) => {
activeFilter.value = filterId
// 这里可以添加筛选逻辑
filterRecommendedProducts()
}
// 查看新闻详情
@@ -747,6 +742,41 @@ const loadMore = () => {
// 添加到购物车
const addToCart = (product: any) => {
// 获取现有购物车数据
const cartData = uni.getStorageSync('cart')
let cartItems: any[] = []
if (cartData) {
try {
cartItems = JSON.parse(cartData as string) as any[]
} catch (e) {
console.error('解析购物车数据失败', e)
}
}
// 检查商品是否已存在
const existingItem = cartItems.find((item: any) => item.id === product.id)
if (existingItem) {
existingItem.quantity++
} else {
// 添加新商品
cartItems.push({
id: product.id,
shopId: product.shopId || 'shop_default',
shopName: product.shopName || product.manufacturer || '自营店铺',
name: product.name,
price: product.price,
image: product.image,
spec: product.specification || '默认规格',
quantity: 1,
selected: true
})
}
// 保存回存储
uni.setStorageSync('cart', JSON.stringify(cartItems))
uni.showToast({
title: '已添加到购物车',
icon: 'success'
@@ -758,12 +788,12 @@ const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/searc
const navigateToNews = () => uni.navigateTo({ url: '/pages/news/list' })
const navigateToProduct = (product: any) => {
uni.navigateTo({
url: `/pages/medicine/detail?id=${product.id}`
url: `/pages/mall/consumer/product-detail?productId=${product.id}`
})
}
const navigateToCategory = (categoryId: string) => {
const navigateToCategory = (item: any) => {
uni.navigateTo({
url: `/pages/medicine/category?id=${categoryId}`
url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(item.name)}&type=family`
})
}
const navigateToConsultation = () => uni.navigateTo({ url: '/pages/medicine/consultation' })
@@ -799,7 +829,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
right: 0;
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
z-index: 1000;
box-shadow: 0 2px 20px rgba(76, 175, 80, 0.15);
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15); /* 调整为与分类页一致 */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, opacity;
pointer-events: auto; /* 确保导航栏可以交互 */
@@ -807,10 +837,12 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
-webkit-backface-visibility: hidden;
}
.nav-container {
height: 100px; /* 增加导航栏高度 */
/* 导航栏搜索框容器内边距调整 */
.search-container {
height: 44px; /* 调整为与消息页一致的高度 */
padding: 0 16px;
display: flex;
flex-direction: row; /* 显式设置 flex-direction: row */
align-items: center;
justify-content: space-between;
max-width: 1400px;
@@ -818,103 +850,66 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
width: 100%;
}
/* 品牌区域 - 重新设计为自适应平铺 */
.brand-section {
display: flex;
align-items: center;
width: 100%;
gap: 16px;
flex-wrap: nowrap; /* 强制不换行 */
justify-content: space-between;
}
/* 品牌标识区域 - 自适应平铺 */
.brand-logo-area {
flex-shrink: 0; /* 防止被压缩 */
min-width: auto;
display: flex;
align-items: center;
}
/* 小屏幕隐藏品牌标识 */
.brand-logo-area.hidden-on-mobile {
display: none;
}
/* 小屏幕隐藏搜索工具 */
.nav-search-tools.hidden-on-mobile {
display: none;
}
.brand-info {
display: flex;
flex-direction: column;
}
.brand-name {
font-size: 18px;
font-weight: bold;
color: white;
letter-spacing: 0.5px;
white-space: nowrap; /* 防止文字换行 */
}
.brand-tag {
font-size: 11px;
color: rgba(255, 255, 255, 0.9);
margin-top: 2px;
white-space: nowrap; /* 防止文字换行 */
}
/* 导航栏搜索框容器 - 自适应平铺 */
.nav-search-container {
flex: 1; /* 占据剩余空间 */
min-width: 0; /* 允许缩小 */
max-width: 100%;
}
.nav-search {
width: 100%;
}
.nav-search-box {
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
padding: 12px 20px;
/* 搜索框 hover 效果 */
.search-box:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 导航栏搜索框容器内边距调整 */
.search-box {
flex: 1;
max-width: 600px;
background: #f0f0f0;
border-radius: 20px;
padding: 0 4px 0 12px;
display: flex;
flex-direction: row; /* UVUE 显式设置 row */
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
width: 100%;
height: 32px; /* 减小高度，与顶部高度44px适配，略小于顶部高度 */
}
.nav-search-box:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.nav-search-icon {
font-size: 18px;
color: #4CAF50;
margin-right: 12px;
flex-shrink: 0;
}
.nav-search-tools {
display: flex;
gap: 8px;
margin-left: 12px;
flex-shrink: 0;
}
.nav-tool-item {
font-size: 12px;
color: #4CAF50;
padding: 4px 10px;
background: rgba(76, 175, 80, 0.1);
border-radius: 12px;
.search-placeholder {
font-size: 14px;
color: #999;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-icon-btn {
padding: 4px 8px 4px 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1px solid #ddd;
margin-right: 8px;
}
.nav-icon {
font-size: 18px;
}
/* 搜索按钮高度微调 */
.nav-inner-search-btn {
padding: 0 12px; /* 减小内边距 */
background-color: #87CEEB; /* 天空蓝 */
border-radius: 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 24px; /* 随搜索框高度减小而减小 */
}
.nav-inner-search-text {
font-size: 12px; /* 字体稍微变小 */
color: #ffffff;
font-weight: 500;
}
/* 导航栏占位符 */
@@ -923,10 +918,27 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
flex-shrink: 0;
}
.nav-camera-btn {
padding: 4px 8px 4px 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ddd;
border-right: 1px solid #ddd; /* 修复UVUE样式 */
margin-right: 8px;
}
.nav-camera-icon {
font-size: 20px;
}
/* 主内容区域 */
.main-scroll {
flex: 1;
padding: 16px;
padding: 0 16px 16px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
@@ -941,6 +953,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
/* margin-top 由 style 动态控制 */
color: white;
}
@@ -1226,25 +1239,27 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
.sort-tabs {
display: flex;
flex-direction: row; /* UVUE 显式设置 row */
gap: 8px;
align-items: center;
flex-wrap: nowrap; /* 强制不换行 */
justify-content: space-between; /* 两端对齐 */
width: 100%; /* 占满宽度 */
margin-top: 12px; /* 增加顶部间距，与标题分开 */
flex-wrap: wrap; /* 允许换行，实现自适应 */
justify-content: flex-start;
width: 100%;
margin-top: 12px;
}
.sort-tab {
font-size: 13px;
color: #666;
padding: 8px 0; /* 上下padding，左右由flex均分 */
padding: 8px 12px; /* 增加左右内边距 */
border-radius: 20px;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex: 1; /* 均分宽度 */
text-align: center; /* 文字居中 */
min-width: 70px; /* 设置最小宽度防止过窄 */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
@@ -1480,25 +1495,27 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
.recommend-filters {
display: flex;
flex-direction: row; /* UVUE 显式设置 row */
gap: 8px;
align-items: center;
flex-wrap: nowrap; /* 强制不换行 */
justify-content: space-between; /* 两端对齐 */
width: 100%; /* 占满宽度 */
margin-top: 12px; /* 增加顶部间距 */
flex-wrap: wrap; /* 允许换行，实现自适应 */
justify-content: flex-start;
width: 100%;
margin-top: 12px;
}
.filter-item {
font-size: 13px;
color: #666;
padding: 8px 0; /* 上下padding，左右由flex均分 */
padding: 8px 12px; /* 增加左右内边距 */
border-radius: 20px;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
flex: 1; /* 均分宽度 */
text-align: center; /* 文字居中 */
min-width: 80px; /* 设置最小宽度防止过窄 */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
@@ -1755,77 +1772,196 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
/* 小屏手机 (小于414px) */
@media screen and (max-width: 414px) {
.nav-container {
.search-container {
padding: 0 12px;
height: 90px;
height: 44px; /* 恢复为44px，与PC和分类页逻辑保持一致 */
}
.brand-section {
flex-direction: column;
align-items: stretch;
gap: 12px;
justify-content: flex-start;
}
.brand-logo-area {
min-width: auto;
.search-box {
padding: 8px 16px; /* 与分类页保持一致 */
max-width: 100%;
flex-shrink: 0;
width: 100%;
justify-content: center;
}
.brand-info {
align-items: center;
text-align: center;
}
.brand-name {
font-size: 16px;
}
.brand-tag {
font-size: 10px;
}
.nav-search-container {
flex: 1;
width: 100%;
flex-grow: 1;
}
.nav-search-box {
padding: 10px 16px;
}
.nav-search-tools {
display: none;
margin: 0;
}
.main-scroll {
padding: 12px;
padding: 0 12px 12px;
}
.category-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
grid-template-columns: repeat(5, 1fr); /* 调整为一行5个，正好两行 */
gap: 8px;
padding: 0 4px;
}
.category-card {
padding: 8px 0;
background: transparent; /* 移除卡片背景 */
box-shadow: none; /* 移除阴影 */
border: none; /* 移除边框 */
}
.category-card:hover {
transform: none; /* 移动端移除悬停效果 */
box-shadow: none;
}
.card-icon {
width: 44px; /* 减小图标尺寸 */
height: 44px;
border-radius: 22px;
margin-bottom: 6px;
}
.card-icon text {
font-size: 20px;
}
.card-name {
font-size: 11px; /* 减小文字大小 */
font-weight: normal;
color: #333;
}
.card-desc {
display: none; /* 手机端隐藏描述文字，保持界面整洁 */
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
grid-template-columns: repeat(4, 1fr); /* 服务入口也调整为一行4个 */
gap: 8px;
}
.products-grid {
grid-template-columns: 1fr;
.service-card {
padding: 10px 4px;
background: #f8f9fa; /* 保持淡色背景 */
}
.service-icon {
width: 40px;
height: 40px;
border-radius: 20px;
margin-bottom: 8px;
}
.service-icon text {
font-size: 20px;
}
.service-name {
font-size: 11px;
}
.service-desc {
display: none; /* 隐藏描述 */
}
.products-grid,
.recommend-grid {
grid-template-columns: 1fr;
grid-template-columns: repeat(2, 1fr); /* 手机端调整为双列显示 */
gap: 8px; /* 减小间距 */
}
.product-info,
.product-details {
padding: 8px; /* 减小内边距 */
}
.product-name,
.product-title {
font-size: 13px; /* 调整字体大小 */
height: 36px; /* 限制高度，防止参差不齐 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.product-image,
.product-image-container {
height: 140px; /* 稍微减小图片高度适配双列 */
}
/* 手机端商品卡片极简模式（热销 & 推荐） */
.hot-products .product-spec,
.hot-products .manufacturer,
.hot-products .original-price,
.hot-products .cart-text,
.hot-products .sales-info,
.hot-products .product-action, /* 隐藏热销区加购按钮 */
.smart-recommend .product-specification,
.smart-recommend .product-rating,
.smart-recommend .original-price,
.smart-recommend .product-actions /* 隐藏推荐区加购按钮 */
{
display: none;
}
.hot-products .product-info,
.smart-recommend .product-details {
padding: 6px; /* 极小内边距 */
}
.hot-products .product-image,
.hot-products .product-image-container,
.smart-recommend .product-image,
.smart-recommend .product-image-container {
height: 110px; /* 进一步减小图片高度 */
}
.hot-products .product-name,
.smart-recommend .product-title {
margin-bottom: 2px;
font-size: 12px;
line-height: 1.3;
height: 32px; /* 限制2行高度 */
}
.hot-products .price-section,
.smart-recommend .price-section {
margin-bottom: 0;
margin-top: 4px;
}
.hot-products .price-symbol,
.smart-recommend .price-symbol {
font-size: 10px;
color: #FF5722;
}
.hot-products .price-value,
.smart-recommend .price-value {
font-size: 14px; /* 字体变小 */
font-weight: 600;
}
.family-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr); /* 家庭常备药也调整为一行4个 */
gap: 8px;
}
.family-item {
padding: 8px 4px;
background: #f8f9fa;
}
.family-icon {
width: 36px;
height: 36px;
border-radius: 18px;
margin-bottom: 6px;
}
.family-icon text {
font-size: 18px;
}
.family-name {
font-size: 11px;
}
.family-desc {
display: none;
}
.news-swiper {
@@ -1835,16 +1971,19 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
.sort-tabs,
.recommend-filters {
gap: 8px;
justify-content: center;
justify-content: flex-start; /* 保持左对齐 */
overflow-x: auto; /* 允许横向滚动 */
flex-wrap: nowrap; /* 禁止换行 */
padding-bottom: 4px; /* 滚动条空间 */
}
.sort-tab,
.filter-item {
padding: 5px 12px;
font-size: 12px;
flex-grow: 1;
text-align: center;
min-width: 60px;
flex-shrink: 0; /* 防止被压缩 */
min-width: auto;
flex: 0 0 auto; /* 取消均分 */
}
.section-header {
@@ -1865,38 +2004,9 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
/* 中屏手机/小平板 (415px-768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
.nav-container {
.search-container {
padding: 0 16px;
height: 95px;
}
.brand-section {
flex-direction: row;
align-items: center;
gap: 15px;
flex-wrap: nowrap;
justify-content: space-between;
}
.brand-logo-area {
min-width: 140px;
max-width: 160px;
flex-shrink: 1;
flex-grow: 0;
}
.brand-name {
font-size: 17px;
}
.nav-search-container {
flex: 1;
min-width: 0;
flex-grow: 1;
}
.nav-search-tools {
display: none;
height: 44px;
}
.main-scroll {
@@ -1956,10 +2066,10 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
/* 平板设备 (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.nav-container {
.search-container {
padding: 0 24px;
max-width: 100%;
height: 100px;
height: 44px;
}
.nav-search-tools .nav-tool-item {
@@ -1968,7 +2078,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
.main-scroll {
max-width: 100%;
padding: 20px 24px;
padding: 0 24px 20px;
}
.category-grid {
@@ -1998,17 +2108,18 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
/* 桌面端 (1025px以上) */
@media screen and (min-width: 1025px) {
.nav-container {
.search-container {
padding: 0 32px;
height: 100px;
height: 44px;
}
.main-scroll {
padding: 24px 32px;
max-width: 100%;
padding: 0 32px 24px;
}
.category-grid {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(6, 1fr);
}
.services-grid {