138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<template>
|
|
<Cn-page :loading='loading' noPadding>
|
|
<view slot='body'>
|
|
<view class='detail'>
|
|
<view class="header"> </view>
|
|
<view class="des">
|
|
<text>设备基础信息</text>
|
|
<text class="ml10">设备状态</text>
|
|
</view>
|
|
<view class="nav">
|
|
<view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
|
|
v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
|
|
</view>
|
|
</view>
|
|
<view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
|
<view v-show="navMenuActive == 0">
|
|
<basic></basic>
|
|
</view>
|
|
<view v-show="navMenuActive == 1">
|
|
<xieBo></xieBo>
|
|
</view>
|
|
<view v-show="navMenuActive == 2">
|
|
<view>
|
|
<text>设备功率信息</text>
|
|
</view>
|
|
</view>
|
|
<view v-show="navMenuActive == 3">
|
|
<view>
|
|
<text>设备波形信息</text>
|
|
</view>
|
|
</view>
|
|
<view v-show="navMenuActive == 4">
|
|
<view>
|
|
<text>设备I/O信息</text>
|
|
</view>
|
|
</view>
|
|
<view style="height:20rpx"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</Cn-page>
|
|
</template>
|
|
<script>
|
|
import basic from "./APF/basic.vue";
|
|
import xieBo from "./APF/xieBo.vue";
|
|
|
|
export default {
|
|
components: {
|
|
basic,
|
|
xieBo
|
|
},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
navMenuActive: 0,
|
|
navHeight: 0,
|
|
navMenuList: [{
|
|
text: '基本'
|
|
}, {
|
|
text: '谐波'
|
|
}, {
|
|
text: '功率'
|
|
}, {
|
|
text: '波形'
|
|
}, {
|
|
text: 'I/O'
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
navMenuClick (idx) {
|
|
this.navMenuActive = idx
|
|
},
|
|
init () {
|
|
setTimeout(() => {
|
|
// 获取nav高度
|
|
uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
|
|
this.navHeight = rect.height
|
|
}).exec()
|
|
}, 1000);
|
|
}
|
|
},
|
|
onLoad (options) {
|
|
this.init()
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang='scss'>
|
|
.detail {
|
|
|
|
// background: #fff;
|
|
.header {
|
|
height: 400rpx;
|
|
background: $uni-color-primary;
|
|
}
|
|
|
|
.des {
|
|
padding: 20rpx 20rpx 0;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
background: rgb(243, 244, 245);
|
|
|
|
.nav-menu {
|
|
padding: 10rpx 20rpx;
|
|
margin-left: 20rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 8rpx;
|
|
background: #fff;
|
|
|
|
&:first-of-type {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&-active {
|
|
background: $uni-color-primary;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |