jacobxu666
15936574ba
- 首页：金刚区添加文字标签、活动指南卡片自适应宽度、字体调整 - 场馆列表：去掉导航栏、添加返回按钮、优化加载提示 - 折扣列表：样式与场馆列表统一 - 场馆详情：合并信息与地址容器、添加分割线和返回按钮 - 权益页面：banner渐变圆角、统计卡片优化、空状态引导、Tab列表优化 - 我的页面：主色调统一、渐变背景、菜单样式优化 - 登录页面：协议链接可跳转、添加返回按钮 - 移除VConsole调试按钮 - 底部导航栏线条颜色调整
82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<view class="tab-bar">
|
|
<view class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
|
|
<image class="tab-icon" :src="current === index ? item.selectedIconPath : item.iconPath"></image>
|
|
<text class="tab-text" :style="{ color: current === index ? selectedColor : color }">{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TabBar',
|
|
props: {
|
|
current: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
color: '#999999',
|
|
selectedColor: '#007aff',
|
|
backgroundColor: '#ffffff',
|
|
tabList: [
|
|
{
|
|
pagePath: '/pages/index/index',
|
|
iconPath: '/static/shouye.png',
|
|
selectedIconPath: '/static/shouye_select.png',
|
|
text: '首页'
|
|
},
|
|
{
|
|
pagePath: '/pages/mine/mine',
|
|
iconPath: '/static/wode.png',
|
|
selectedIconPath: '/static/wode_select.png',
|
|
text: '我的'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
switchTab(index) {
|
|
if (this.current === index) return;
|
|
uni.switchTab({
|
|
url: this.tabList[index].pagePath
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
border-top: 1rpx solid rgba(242, 242, 242, 0.5);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.tab-bar-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
.tab-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
.tab-text {
|
|
font-size: 22rpx;
|
|
}
|
|
</style>
|