131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template>
|
||
<view class="cont">
|
||
<div class="tab" @tap.stop="changeTabbar(0)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ub5GASsqprA7m0nFCjZq" mode="" v-show="indexs!=0"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uauD94eUqLK0YLLiuwXv" mode="" v-show="indexs==0"></image>
|
||
<div class="txt" :class="indexs==0?'act1':''">工作台</div>
|
||
</div>
|
||
<div class="tab" @tap.stop="changeTabbar(1)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uYYsHlF9sulPYRolF5pO" mode="" v-show="indexs!=1" style="width: 48rpx;height: 48rpx;"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uynLuepgbB2RUWn7NP3U" mode="" v-show="indexs==1" style="width: 48rpx;height: 48rpx;"></image>
|
||
<div class="txt" :class="indexs==1?'act1':''">运营</div>
|
||
</div>
|
||
<div class="tab" @tap.stop="changeTabbar(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ui5qVUYRlQMuSp3gESZE" mode="" v-show="indexs!=2" style="width: 48rpx;height: 48rpx;"></image>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uEktI7CyMViTd6oz7xvJ" mode="" v-show="indexs==2" style="width: 48rpx;height: 48rpx;"></image>
|
||
<div class="txt" :class="indexs==2?'act1':''">个人中心</div>
|
||
</div>
|
||
<!-- <view class="u-page">
|
||
|
||
</view> -->
|
||
<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
|
||
<!-- <u-tabbar v-model="current" :list="list" icon-size='40rpx' active-color='#3996fd' inactive-color="#c8c7cb"></u-tabbar> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
indexs: [Number, String], //题目id
|
||
},
|
||
data() {
|
||
return {
|
||
currentTabbarIndex: 0,
|
||
|
||
// 自定义底栏对应页面的加载情况
|
||
tabberPageLoadFlag: [],
|
||
ispop: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.currentTabbarIndex = this.indexs
|
||
// const index = Number(this.indexs || 0)
|
||
// // 根据底部tabbar菜单列表设置对应页面的加载情况
|
||
// for (let i = 0; i < 5; i++) {
|
||
// this.tabberPageLoadFlag.push(i === index)
|
||
// }
|
||
// this.changeTabbar(index)
|
||
},
|
||
methods:{
|
||
changeTabbar(index) {
|
||
|
||
if (this.currentTabbarIndex === index) return
|
||
// this._switchTabbarPage(index)
|
||
|
||
if(index==0){
|
||
uni.reLaunch({
|
||
url:'/page_shanghu/index',
|
||
routeType: 'wx://modal',
|
||
success() {
|
||
this.currentTabbarIndex = index
|
||
}
|
||
})
|
||
console.log('点击了',index);
|
||
}else if(index==1){
|
||
uni.reLaunch({
|
||
url:'/page_shanghu/yunying',
|
||
routeType: 'wx://modal',
|
||
success() {
|
||
this.currentTabbarIndex = index
|
||
}
|
||
})
|
||
}else if(index==2){
|
||
uni.reLaunch({
|
||
url:'/page_shanghu/shanghumy',
|
||
routeType: 'wx://modal',
|
||
success() {
|
||
this.currentTabbarIndex = index
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
/deep/.u-tabbar__content__item__button {
|
||
top: 20rpx !important;
|
||
}
|
||
|
||
/deep/.u-tabbar {
|
||
.u-tabbar__content__item:nth-child(2) {
|
||
.u-tabbar__content__item__button {
|
||
width: 32rpx !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cont {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0rpx;
|
||
width: 100%;
|
||
height: 128rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.tab{
|
||
width: 120rpx;
|
||
text-align: center;
|
||
// display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
image{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.txt{
|
||
margin-top: 10rpx;
|
||
font-size: 20rpx;
|
||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||
font-weight: 400;
|
||
color: #95989D;
|
||
}
|
||
.act1{
|
||
color: #48893B;
|
||
}
|
||
}
|
||
}
|
||
</style> |