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('lingxin')">灵新</view>
				<view class="area area_2" @click="go_map_area('hongliu')">红柳</view>
				<view class="area area_3" @click="go_map_area('zaoquan')">枣泉</view>
				<view class="area area_4" @click="go_map_area('qingshuiying')">清水营</view>
				<view class="area area_5" @click="go_map_area('shicaocun')">石槽村</view>
				<view class="area area_6" @click="go_map_area('meihuajing')">梅花井</view>
				<view class="area area_7" @click="go_map_area('renjiazhuang')">任家庄</view>
				<view class="area area_8" @click="go_map_area('ningdongyunying')">信息中心</view>
				<view class="area area_9" @click="go_map_area('shuangma')">双马</view>
				<view class="area area_10" @click="go_map_area('maiduoshan')">麦垛山</view>
				<view class="area area_11" @click="go_map_area('ruqigou')">汝其沟</view>
				<view class="area area_12" @click="go_map_area('hongshiwan')">红石湾</view>
				<view class="area area_13" @click="go_map_area('jinjiaqu')">金家渠</view>
				<view class="area area_14" @click="go_map_area('jinfeng')">金凤</view>
				<view class="area area_15" @click="go_map_area('yangchangwanyifenqu')">羊场湾一分区</view>
				<view class="area area_16" @click="go_map_area('yangchanwanerfenqu')">羊场湾二分区</view>
				<view class="area area_17" @click="go_map_area('xixuan')">洗选</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"t-p-n-section-2",
		data() {
			return {
				
			};
		},
		methods:{
			go_map_area(mine_code){
				console.log("---")
				console.log(mine_code)
				
				uni.navigateTo({
					url:"../../ningdongyunying/production_map/production_map?mine_code="+mine_code
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper-item{
		margin-top: -100rpx;
		position: relative;
		
		overflow: hidden;
		
		width: 750rpx;
		height: 1299rpx;
		// 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;
			
			font-size: 0;
			// background-color: red;
		}
		.area_1{
			position: absolute;
			left: 28rpx;
			top: 64rpx;
		}
		.area_2{
			position: absolute;
			left: 28rpx;
			top: 140rpx;
		}
		.area_3{
			position: absolute;
			left: 28rpx;
			top: 218rpx;
		}
		.area_4{
			position: absolute;
			left: 28rpx;
			top: 294rpx;
		}
		.area_5{
			position: absolute;
			left: 28rpx;
			top: 372rpx;
		}
		.area_6{
			position: absolute;
			left: 28rpx;
			top: 448rpx;
		}
		.area_7{
			position: absolute;
			left: 28rpx;
			top: 524rpx;
		}
		.area_8{
			position: absolute;
			right: 20rpx;
			top: 66rpx;
		}
		.area_9{
			position: absolute;
			right: 20rpx;
			top: 138rpx;
		}
		.area_10{
			position: absolute;
			right: 20rpx;
			top: 212rpx;
		}
		.area_11{
			position: absolute;
			right: 20rpx;
			top: 284rpx;
		}
		.area_12{
			position: absolute;
			right: 20rpx;
			top: 358rpx;
		}
		.area_13{
			position: absolute;
			right: 20rpx;
			top: 432rpx;
		}
		.area_14{
			position: absolute;
			right: 20rpx;
			top: 856rpx;
		}
		.area_15{
			position: absolute;
			right: 20rpx;
			top: 928rpx;
		}
		.area_16{
			position: absolute;
			right: 20rpx;
			top: 1000rpx;
		}
		.area_17{
			position: absolute;
			left: 18rpx;
			top: 918rpx;
		}
	}
</style>