134 lines
2.4 KiB
Vue
134 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="toolbar">
|
||
|
|
<div class="toolbar_title">
|
||
|
|
<image
|
||
|
|
style="width: 50rpx; height: 50rpx; border-radius: 50%"
|
||
|
|
src="../../static/user.png"
|
||
|
|
mode="aspectFill"
|
||
|
|
></image>
|
||
|
|
<text style="font-size: 30rpx;margin-left: 20rpx;">颜家台灌区</text>
|
||
|
|
</div>
|
||
|
|
</view>
|
||
|
|
<view class="pageBox">
|
||
|
|
<pageSz v-if="value === 0"></pageSz>
|
||
|
|
<!-- <pageLl v-if="value === 1"></pageLl> -->
|
||
|
|
<test v-if="value === 1"></test>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<u-tabbar
|
||
|
|
:value="value"
|
||
|
|
@change="name => value = name"
|
||
|
|
:fixed="true"
|
||
|
|
:placeholder="true"
|
||
|
|
:safeAreaInsetBottom="true"
|
||
|
|
>
|
||
|
|
<u-tabbar-item text="水质">
|
||
|
|
<image
|
||
|
|
class="u-page__item__slot-icon"
|
||
|
|
slot="active-icon"
|
||
|
|
src="../../static/sz.svg"
|
||
|
|
></image>
|
||
|
|
<image
|
||
|
|
class="u-page__item__slot-icon"
|
||
|
|
slot="inactive-icon"
|
||
|
|
src="../../static/sz2.svg"
|
||
|
|
></image>
|
||
|
|
</u-tabbar-item>
|
||
|
|
<u-tabbar-item text="流量">
|
||
|
|
<image
|
||
|
|
class="u-page__item__slot-icon"
|
||
|
|
slot="active-icon"
|
||
|
|
src="../../static/ll.svg"
|
||
|
|
></image>
|
||
|
|
<image
|
||
|
|
class="u-page__item__slot-icon"
|
||
|
|
slot="inactive-icon"
|
||
|
|
src="../../static/ll2.svg"
|
||
|
|
></image>
|
||
|
|
</u-tabbar-item>
|
||
|
|
</u-tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import pageSz from "./pageSz.vue";
|
||
|
|
import pageLl from "./pageLl.vue";
|
||
|
|
import test from "./test.vue"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { pageSz, pageLl, test },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: '111',
|
||
|
|
tabList: [{name: '水质'}, {name: '流量'}, ],
|
||
|
|
value: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.toolbar{
|
||
|
|
width: 100%;
|
||
|
|
height: 64px;
|
||
|
|
background-color: #0086f1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
.toolbar_title{
|
||
|
|
padding-left: 50rpx;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.tabBox{
|
||
|
|
width: 100%;
|
||
|
|
padding-left: 30px;
|
||
|
|
}
|
||
|
|
.u-page__item__slot-icon{
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
}
|
||
|
|
.pageBox{
|
||
|
|
width: 100%;
|
||
|
|
height: calc( 100vh - 115px);
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
height: 200rpx;
|
||
|
|
width: 200rpx;
|
||
|
|
margin-top: 200rpx;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-bottom: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-area {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #8f8f94;
|
||
|
|
}
|
||
|
|
</style>
|