ea2be7af8c
按 6 级尺寸阶梯统一放大图标，避免小而散、提升大气感： - 底部导航 40 -> 48，容器 104 -> 116，标签 22 -> 23 - 首页快捷入口 40 -> 52，容器 96 -> 112、圆角 32 -> 36，标签 22 -> 24 - 首页品牌花标 40 -> 46，牌标容器 72 -> 84 - 今日心语 52 -> 62，提醒 38 -> 46 - 情绪选择 40 -> 50（容器 76），记录 30 -> 36，疗愈内容 34 -> 42 - 健康 Tab 26 -> 32（Tab 76 -> 84），建议项 34 -> 42（容器 84） - 我的设置项 32 -> 40，头像 108 -> 116 - 备孕/关系/亲子勾选 20 -> 24（容器 40 -> 46），会员勾选 18 -> 22 - 咨询师头像 40 -> 50（容器 100），热线 34/36 -> 42，急救工具 44 -> 54 - 空状态与会员锁 72 -> 96，内容详情头图 64 -> 78，登录花瓣与输入框图标同步放大 - 大尺寸图标描边降至 1.6-1.8，小尺寸保持 1.8-2.4，线宽视觉统一 - 文档补充「图标尺寸阶梯」规范 验证：no_emoji 0 问题 / 契约 84 接口 0 偏差 / Vue 20-20 / SCSS 19-19
99 行
1.9 KiB
Vue
99 行
1.9 KiB
Vue
<template>
|
|
<view class="hq-tabbar">
|
|
<view class="hq-tabbar-inner">
|
|
<view
|
|
v-for="item in tabs"
|
|
:key="item.key"
|
|
class="hq-tab"
|
|
:class="{ 'hq-tab-active': current === item.key }"
|
|
@tap="go(item)"
|
|
>
|
|
<hq-icon
|
|
:name="item.icon"
|
|
:size="48"
|
|
:stroke="1.9"
|
|
:color="current === item.key ? '#E8604C' : '#C9B4AA'"
|
|
/>
|
|
<text class="hq-tab-label" :class="{ 'hq-tab-label-active': current === item.key }">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import hqIcon from '@/components/hq-icon/hq-icon.vue'
|
|
export default {
|
|
components: { hqIcon },
|
|
name: 'hq-tabbar',
|
|
props: {
|
|
current: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{ key: 'home', label: '首页', icon: 'home', path: '/pages/index/index' },
|
|
{ key: 'cycle', label: '周期', icon: 'flower', path: '/pages/cycle/index' },
|
|
{ key: 'mood', label: '情绪', icon: 'moon', path: '/pages/mood/index' },
|
|
{ key: 'mine', label: '我的', icon: 'user', path: '/pages/mine/index' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
go(item) {
|
|
if (item.key === this.current) return
|
|
uni.reLaunch({ url: item.path })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hq-tabbar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
padding: 12rpx 32rpx calc(12rpx + env(safe-area-inset-bottom));
|
|
background-color: rgba(255, 251, 248, 0.96);
|
|
box-shadow: 0 -8rpx 32rpx rgba(232, 96, 76, 0.08);
|
|
}
|
|
|
|
.hq-tabbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 116rpx;
|
|
}
|
|
|
|
.hq-tab {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx 0;
|
|
border-radius: 26rpx;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.hq-tab-label {
|
|
margin-top: 10rpx;
|
|
font-size: 23rpx;
|
|
color: #B9A79E;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.hq-tab-active {
|
|
background-color: #FFF1E9;
|
|
}
|
|
|
|
.hq-tab-label-active {
|
|
color: #E8604C;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|