159 lines
3.0 KiB
Vue
159 lines
3.0 KiB
Vue
<template>
|
|
<view class="tabBar">
|
|
<view class="cont">
|
|
<view class="image-text_1 flex-col" @tap="switchTab(list[0].pagePath)">
|
|
<image
|
|
class="thumbnail_1"
|
|
referrerpolicy="no-referrer"
|
|
:src="selected == 0? list[0].selectedIconPath:list[0].iconPath"
|
|
/>
|
|
<text :class="selected == 0?'text-group_1':'text-group_2'">
|
|
{{list[0].text}}
|
|
</text>
|
|
</view>
|
|
<!-- <image
|
|
class="label_1"
|
|
referrerpolicy="no-referrer"
|
|
src="https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/icon_camera%403x.png"
|
|
@tap="jumpVlog"
|
|
/> -->
|
|
<view class="image-text_2 flex-col" @tap="switchTab(list[1].pagePath)">
|
|
<image
|
|
class="thumbnail_2"
|
|
referrerpolicy="no-referrer"
|
|
:src="selected == 1? list[1].selectedIconPath:list[1].iconPath"
|
|
/>
|
|
<text :class="selected == 1?'text-group_3':'text-group_4'">
|
|
{{list[1].text}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
selected: Number
|
|
},
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
pagePath: "/pages/home/home",
|
|
text: "首页",
|
|
iconPath: "/static/icon/icon_Home_n@3x_da.png",
|
|
selectedIconPath: "/static/icon/icon_Home_n@3x_a.png",
|
|
},
|
|
{
|
|
pagePath: "/pages/mine/mine",
|
|
text: "我的",
|
|
iconPath: "/static/icon/icon_我的_n@3x_da.png",
|
|
selectedIconPath: "/static/icon/icon_我的_n@3x_a.png",
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
switchTab(url) {
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabBar {
|
|
z-index: 100;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
font-size: 28rpx;
|
|
background-color: #fff;
|
|
color: #636363;
|
|
left: 0;
|
|
height: 150rpx;
|
|
background: none;
|
|
}
|
|
.cont {
|
|
z-index: 0;
|
|
height: 130rpx;
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.image-text_1 {
|
|
margin-top: 5px;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.thumbnail_1 {
|
|
width: 18px;
|
|
height: 18px;
|
|
align-self: center;
|
|
}
|
|
|
|
.text-group_1 {
|
|
overflow-wrap: break-word;
|
|
color: rgba(22, 140, 248, 1);
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 12px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.text-group_2 {
|
|
overflow-wrap: break-word;
|
|
color: rgba(80, 92, 115, 1);
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 12px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.label_1 {
|
|
width: 43px;
|
|
height: 42px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.image-text_2 {
|
|
margin-top: 5px;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.thumbnail_2 {
|
|
width: 18px;
|
|
height: 18px;
|
|
align-self: center;
|
|
}
|
|
|
|
.text-group_3 {
|
|
overflow-wrap: break-word;
|
|
color: rgba(22, 140, 248, 1);
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 12px;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.text-group_4 {
|
|
overflow-wrap: break-word;
|
|
color: rgba(80, 92, 115, 1);
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 12px;
|
|
margin-top: 9px;
|
|
}
|
|
}
|
|
</style>
|