180 lines
3.6 KiB
Vue
180 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<view class="headers_box">
|
||
|
|
<view :style="{ height: mobileTopHeight + 'px' }" class="statusBar">
|
||
|
|
</view>
|
||
|
|
<h2>{{projectTitle}}</h2>
|
||
|
|
<view class="headers_nav">
|
||
|
|
<ul >
|
||
|
|
<li v-for="(item, index) in navList" :key="index" :class="{'active': tabIndex == index}" @click="changTab(index)">{{item.name}}</li>
|
||
|
|
</ul>
|
||
|
|
</view>
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
tabIndex:{
|
||
|
|
type:Number,
|
||
|
|
default:0
|
||
|
|
},
|
||
|
|
navList:{
|
||
|
|
type: Array
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
projectTitle: "天之骄子一期项目",
|
||
|
|
mobileTopHeight: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
var that = this
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success(res) {
|
||
|
|
that.mobileTopHeight = res.statusBarHeight
|
||
|
|
uni.setStorageSync('systemInfo',res)
|
||
|
|
console.log(res)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
changTab(index){
|
||
|
|
if(index == 0){
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/workstation/workstationIndex/workstationIndex'
|
||
|
|
})
|
||
|
|
} else if (index == 1) {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/workstation/worfStationNotice/worfStationNotice'
|
||
|
|
})
|
||
|
|
} else if (index == 2) {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/workstation/workStationSchedule/workStationSchedule'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.statusBar{
|
||
|
|
background-color: #2a2b5b;
|
||
|
|
}
|
||
|
|
.headers_box{
|
||
|
|
background: #127FEC;
|
||
|
|
padding-bottom: 4rpx;
|
||
|
|
// border-radius: 0px 0px 40rpx 40rpx;
|
||
|
|
h2{
|
||
|
|
color: #fff;
|
||
|
|
font-weight: normal;
|
||
|
|
font-size: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 92rpx;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
.headers_nav {
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
ul{
|
||
|
|
width: 692rpx;
|
||
|
|
height: 84rpx;
|
||
|
|
background: #fff;
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 42rpx;
|
||
|
|
padding: 0 6rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
li{
|
||
|
|
color: #6C7178;
|
||
|
|
font-size: 28rpx;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
width: 226rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
border-radius: 36rpx;
|
||
|
|
box-shadow: 0px 1px 6px 0px rgba(0, 129, 255, 0.67);
|
||
|
|
color: #107EEE;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.headers_statistics{
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
ul{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
list-style: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 54rpx;
|
||
|
|
padding: 0;
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
li{
|
||
|
|
flex: 1;
|
||
|
|
color: rgba(255, 255, 255, 0.6);
|
||
|
|
line-height: 54rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
span{
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #fff;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item_center{
|
||
|
|
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list_title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.list_h2{
|
||
|
|
color: #fff;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-left: 54rpx;
|
||
|
|
}
|
||
|
|
.list_btn{
|
||
|
|
margin-right: 30rpx;
|
||
|
|
ul{
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
padding: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
li{
|
||
|
|
color: rgba(255, 255, 255, 0.6);
|
||
|
|
width: 120rpx;
|
||
|
|
height: 46rpx;
|
||
|
|
line-height: 46rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.activeNav{
|
||
|
|
background: #fff;
|
||
|
|
color: #127FEC;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|