IOT/SourceCode/ui/fbs-ui_app2/pages/home/home.vue

<template>
	<view>
		<tabs ref="tab" :currentTab="currentTabIndex" @changeIndex="changeTabIndex"></tabs>
		<movable-area class="movableArea">
			<movable-view class="movableView" direction="all" x="680rpx" y="700rpx"><image src="/static/image/map.png" mode="widthFix" @click="jumpMap"></image></movable-view>
		</movable-area>

		<scroll-view scroll-y="true">
			<Over v-if="currentTabIndex == 0" @changeOver="changeOverNum"></Over>
			<Info v-if="currentTabIndex == 1"></Info>
			<Pollution v-if="currentTabIndex == 2"></Pollution>
			<Clean v-if="currentTabIndex == 3"></Clean>
		</scroll-view>
		<tabbar :currentTab="0"></tabbar>
	</view>
</template>

<script>
import tabbar from "@/components/tabbar";
import tabs from "@/components/home-tabs/index.vue";
import { log } from "@/utils/base.js";
import Over from "./components/over.vue";
//#ifdef H5

//#endif
import Info from "./components/info.vue";
import Pollution from "./components/pollution.vue";
import Clean from "./components/clean.vue";

export default {
	components: {
		Over,
		//#ifdef H5

		//#endif
		Info,
		Pollution,
		Clean,
		tabs,
		tabbar,
	},
	data() {
		return {
			currentTabIndex: 0,
		};
	},
	onLoad() {},
	methods: {
		jumpMap() {
			uni.navigateTo({
				url: `/pages_map/map`,
			});
		},
		changeOverNum(num) {
			num = num || 0;
			this.$refs.tab.changeOverNum(num);
		},
		changeTabIndex(index) {
			index = index || 0;
			this.currentTabIndex = index;
		},
	},
};
</script>

<style lang="scss">
.movableArea {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
	.movableView {
		pointer-events: auto; //可以点击
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>