81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<template>
|
|
<view :style="{height:'100vh',overflow:'hidden'}">
|
|
<u-status-bar></u-status-bar>
|
|
<u-navbar
|
|
title="预警"
|
|
:autoBack="true"
|
|
:titleStyle="{
|
|
fontSize:'18px'
|
|
}"
|
|
:height='44'
|
|
:safeAreaInsetTop=true
|
|
leftIconSize='20'
|
|
leftIconColor='rgb(153, 153, 153)'
|
|
>
|
|
</u-navbar>
|
|
<u-tabs
|
|
:list="tabsOptions"
|
|
@click="tabsChange"
|
|
:scrollable=false
|
|
class="tabsClass"
|
|
:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
|
|
:inactiveStyle="{color: '#606266',fontSize: '16px'}"
|
|
lineColor="transparent"
|
|
itemStyle="height: 44px"
|
|
>
|
|
</u-tabs>
|
|
<component :is="tabsVal"></component>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
import uniSh from './sh.vue';
|
|
import uniSk from './sk.vue';
|
|
import uniHd from './hd.vue';
|
|
|
|
export default {
|
|
components: { uniSh, uniSk, uniHd },
|
|
data() {
|
|
return {
|
|
tabsOptions:[
|
|
{
|
|
name:'水库预警',
|
|
components:uniSk
|
|
},
|
|
{
|
|
name:'河道预警',
|
|
components:uniHd
|
|
},
|
|
{
|
|
name:'山洪预警',
|
|
components:uniSh
|
|
},
|
|
],
|
|
tabsVal:uniSk
|
|
};
|
|
},
|
|
methods: {
|
|
tabsChange(item) {
|
|
this.tabsVal = item.components
|
|
console.log(this.tabsVal);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.myTitleStyle{
|
|
font-size: 30px;
|
|
background-color: red;
|
|
height: 200px;
|
|
}
|
|
.tabsClass{
|
|
margin-top: 44px;
|
|
height: 44px;
|
|
padding: 0 40px;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
</style>
|