uni-zhihuikuangshan/components/t-p-n-section-2/t-p-n-section-2.vue

<template>
	<view>
		<view class="swiper-item">
			<image src="./img/map.jpg"></image>
			
			<view class="map">
				<view class="area area_1" @click="go_map_area()"></view>
				<view class="area area_2"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"t-p-n-section-2",
		data() {
			return {
				
			};
		},
		methods:{
			go_map_area(){
				console.log("---")
			}
		}
	}
</script>

<style lang="scss">
	.swiper-item{
		overflow: hidden;
		image{
			width: 750rpx;
			height: 1299rpx;
		}
	}
	
	
	.map{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999;
		
		width: 750rpx;
		height: 1299rpx;
		// background-color: rgba(0,255,0,.2);
		.area{
			width: 200rpx;
			height: 60rpx;
		}
		.area_1{
			position: absolute;
			left: 28rpx;
			top: 62rpx;
			
			background-color: skyblue;
		}
		.area_2{
			position: absolute;
			left: 28rpx;
			top: 140rpx;
			
			background-color: pink;
		}
	}
</style>