78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="page-top">
|
|
<u-navbar title="移动巡检" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
|
</u-navbar>
|
|
</view>
|
|
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
|
<view class="sizedbox" style="height: 88rpx;"></view>
|
|
<u-tabs class="tabs" :list="tabList" @change="handleTabClick"></u-tabs>
|
|
<view class="sizedbox" style="height: 118rpx;"></view>
|
|
<QualityInspection v-if="activeIndex==0"></QualityInspection>
|
|
<SecurityInspection v-else-if="activeIndex==1"></SecurityInspection>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QualityInspection from './quality_inspection/quality_inspection.vue'
|
|
import SecurityInspection from './security_inspection/security_inspection.vue'
|
|
export default {
|
|
name: 'MobileInspection',
|
|
components: {
|
|
QualityInspection,
|
|
SecurityInspection
|
|
},
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
tabList: [{
|
|
name: '质量巡检',
|
|
}, {
|
|
name: '安全巡检',
|
|
}, ]
|
|
}
|
|
},
|
|
methods: {
|
|
handleTabClick(item) {
|
|
console.log(item);
|
|
this.activeIndex = item.index;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-color: #f6f6f6;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.page-top {
|
|
z-index: 99;
|
|
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
.tabs {
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 99;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
::v-deep .u-tabs__wrapper__nav {
|
|
justify-content: space-between;
|
|
|
|
.u-tabs__wrapper__nav__item {
|
|
width: 320rpx;
|
|
}
|
|
}
|
|
|
|
.test {
|
|
width: 370rpx;
|
|
height: 100rpx;
|
|
background-color: indianred;
|
|
}
|
|
</style>
|