init

pages/statistics/index.vue

@@ -0,0 +1,85 @@
+<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>