85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<view class="waper">
|
||
|
|
<u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" leftIconColor="#fff">
|
||
|
|
<view slot='center' style="font-size: 36rpx; font-weight: bold; color: #fff;">统计</view>
|
||
|
|
</u-navbar>
|
||
|
|
<view class="colorLump"></view>
|
||
|
|
<view class="tabs">
|
||
|
|
<view :class="['tab', menuIndex == index ? 'activeTab' : '']" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">{{item}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="list" v-if="menuIndex == 0" :style="'height: calc(100vh - (' + paddingTop + 'px))'">
|
||
|
|
<portrayal />
|
||
|
|
</view>
|
||
|
|
<view class="list" v-if="menuIndex == 1" :style="'height: calc(100vh - (' + paddingTop + 'px))'">
|
||
|
|
<analyse />
|
||
|
|
</view>
|
||
|
|
<view class="list" v-if="menuIndex == 2" :style="'height: calc(100vh - (' + paddingTop + 'px))'">
|
||
|
|
<monitoring />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import portrayal from "./portrayal"
|
||
|
|
import analyse from "./analyse"
|
||
|
|
import monitoring from "./monitoring"
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
portrayal,
|
||
|
|
analyse,
|
||
|
|
monitoring
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
tabList: [ '游客画像', '运营分析', '实时监控' ],
|
||
|
|
menuIndex: 0,
|
||
|
|
paddingTop: 0,
|
||
|
|
bottomHight: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
let app = uni.getSystemInfoSync();
|
||
|
|
this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
|
||
|
|
this.paddingTop = this.$paddingTop + this.bottomHight + uni.upx2px(90);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeTab(i) {
|
||
|
|
this.menuIndex = i;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.waper{
|
||
|
|
width: 100%; min-height: 100vh; box-sizing: border-box; background-color: #F6F6F6;
|
||
|
|
.colorLump {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 228rpx;
|
||
|
|
background: #03AE80;
|
||
|
|
}
|
||
|
|
.tabs {
|
||
|
|
margin-top: -208rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
.tab {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
line-height: 33rpx;
|
||
|
|
}
|
||
|
|
.activeTab {
|
||
|
|
font-weight: 500; position: relative;
|
||
|
|
&::after {
|
||
|
|
content: ""; width: 30rpx; height: 6rpx; background: #FFF; border-radius: 14rpx; position: absolute; left: 50%; top: 42rpx; transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list {
|
||
|
|
margin-top: 36rpx;
|
||
|
|
padding: 0 32rpx 10rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|