<template>
|
<view>
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox fix">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view class="navBar">
|
<view class="barText">首页</view>
|
</view>
|
</view>
|
<view class="list">
|
<view class="first" @click="goExamine" v-if="role == '审核领导'">
|
<view class="icon">
|
<image src="../../../static/examine.png" class="img"></image>预警审核
|
</view>
|
</view>
|
<view class="first"
|
@click="goCurrent"
|
style="background-color:rgb(249, 130, 180) ;"
|
>
|
<view class="icon">
|
<image src="../../../static/look.png" class="img"></image>信息查看
|
</view>
|
</view>
|
<view class="first"
|
style="background-color: rgb(41, 203, 280);"
|
@click="goWeather"
|
>
|
<view class="icon">
|
<image src="../../../static/we.png" class="img"></image>实时气象
|
</view>
|
</view>
|
<view class="first"
|
style="background-color: rgb(11, 246, 158) ;margin-bottom: 35px;"
|
@click="goCount"
|
>
|
<view class="icon">
|
<image src="../../../static/count.png" class="img"></image>统计分析
|
</view>
|
</view>
|
|
</view>
|
<tabBar :currentPagePath="page"></tabBar>
|
</view>
|
</template>
|
|
<script>
|
import tabBar from '../tabBarIndex.vue'
|
export default {
|
components:{
|
tabBar
|
},
|
data() {
|
return {
|
page: 'pages/tabBar/firstPage/firstPage',
|
statusBarHeight: '',
|
leaderType: 'da'
|
}
|
|
},
|
onLoad() {
|
//获取手机状态栏高度
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
uni.hideTabBar();
|
this.role = uni.getStorageSync('roleName');
|
console.log("role",this.role)
|
},
|
methods: {
|
goExamine() {
|
uni.switchTab({
|
url: '/pages/tabBar/examine/examine'
|
})
|
},
|
goCurrent() {
|
uni.switchTab({
|
url: '/pages/tabBar/current/current'
|
})
|
},
|
goCount() {
|
uni.switchTab({
|
url: '/pages/tabBar/count/count'
|
})
|
},
|
goWeather(){
|
uni.switchTab({
|
url: '/pages/tabBar/weather/weather'
|
})
|
}
|
}
|
}
|
|
</script>
|
|
<style>
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
|
}
|
.fix{
|
position: sticky;
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: 1;
|
}
|
.statusBar{
|
background-color:lightgrey;
|
}
|
.list{
|
margin: 12px 12px 0;
|
padding: 12px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: calc(100% - 24px);
|
background: #fff;
|
border-radius: 5px;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
|
}
|
.first{
|
width: 100%;
|
height: 110px;
|
background-color: red;
|
text-align: center;
|
line-height: 110px;
|
border-radius: 20px;
|
background-color: rgb(246,191,170);
|
border: 1px solid lightgrey;
|
font-size: 18px;
|
margin-top: 40px;
|
color: #2c2c2c;
|
font-weight: 600;
|
}
|
.icon{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.barText{
|
text-align: center;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
.img{
|
width: 20px;
|
height: 20px;
|
margin-right: 6px;
|
}
|
</style>
|
