<!--自定义tabbar首页-->
|
<template>
|
<view>
|
<general @ShowNews="ShowNews" v-if="PageCur=='general'"></general>
|
<monitor v-if="PageCur=='monitor'"></monitor>
|
<formula v-if="PageCur=='formula'"></formula>
|
<me v-if="PageCur=='me'"></me>
|
|
<view class="box">
|
<view class="cu-bar tabbar bg-white shadow foot">
|
<view class="action" @click="NavChange" data-cur="general">
|
<view class='cuIcon-cu-image'>
|
<image v-if="PageCur=='general'" src="../../static/tabBar/index_cur.png"></image>
|
<image v-if="PageCur != 'general'" src="../../static/tabBar/index.png"></image>
|
</view>
|
<view :class="PageCur=='general'?'color_main':'text-gray'">首页</view>
|
</view>
|
|
<view class="action" @click="NavChange" data-cur="monitor">
|
<view class='cuIcon-cu-image'>
|
<view class="cu-tag badge"><!-- 红点 --></view>
|
<image v-if="PageCur=='monitor'" src="../../static/tabBar/shop_cur.png"></image>
|
<image v-if="PageCur != 'monitor'" src="../../static/tabBar/shop.png"></image>
|
</view>
|
<view :class="PageCur=='monitor'?'color_main':'text-gray'">监控</view>
|
</view>
|
|
<view @click="NavChange" class="action text-gray add-action" data-cur="cases">
|
<image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image>
|
<view :class="PageCur=='cases'?'color_main':'text-gray'">实时</view>
|
</view>
|
|
<view class="action" @click="NavChange" data-cur="formula">
|
<view class='cuIcon-cu-image'>
|
<view class="cu-tag badge">{{message}}</view>
|
<image v-if="PageCur=='formula'" src="../../static/tabBar/order_cur.png"></image>
|
<image v-if="PageCur != 'formula'" src="../../static/tabBar/order.png"></image>
|
</view>
|
<view :class="PageCur=='formula'?'color_main':'text-gray'">历史</view>
|
</view>
|
|
<view class="action" @click="NavChange" data-cur="me">
|
<view class='cuIcon-cu-image'>
|
<image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image>
|
<image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image>
|
</view>
|
<view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view>
|
</view>
|
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import general from "./general.vue"; //首页
|
import monitor from "./monitor.vue"; //
|
import formula from "./formula.vue"; //
|
import me from "./me.vue"; //
|
export default {
|
components: {
|
general,
|
monitor,
|
formula,
|
me
|
},
|
data() {
|
return {
|
PageCur: 'general',
|
message: '0',
|
}
|
},
|
onShow() {
|
console.info('onShow')
|
},
|
methods: {
|
ShowNews(e){
|
console.log(e)
|
this.PageCur = e;
|
},
|
NavChange: function(e) {
|
console.log(e.currentTarget.dataset.cur)
|
|
this.PageCur = e.currentTarget.dataset.cur;
|
|
if (this.PageCur == 'general') {
|
// document.title = '首页'
|
} else if (this.PageCur == 'component') {
|
// document.title = '积分商城'
|
} else if (this.PageCur == 'cases') {
|
// document.title = '宅家学'
|
} else if (this.PageCur == 'news') {
|
// document.title = '文章资讯'
|
} else if (this.PageCur == 'me') {
|
// document.title = '个人中心'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.color_main{
|
color: #000000;
|
font-weight: 900;
|
}
|
.box {
|
margin: 20upx 0;
|
}
|
.box view.cu-bar {
|
margin-top: 20upx;
|
}
|
|
.logo_btn{
|
width: 38*2rpx;
|
height: 38*2rpx;
|
position: absolute;
|
z-index: 2;
|
border-radius: 50%;
|
top: -40rpx;
|
left: 0rpx;
|
right: 0;
|
margin: auto;
|
padding: 0;
|
}
|
.cu-bar.tabbar .action.add-action {
|
padding-top: 56rpx !important;
|
}
|
</style>
|
