uni-zhihuikuangshan-2/pages/production/zaoquan/control_platform/substation/substation.vue

<template>
	<view>
		<view class="container">
			<image src="./img/zongxianlu.png" mode="widthFix"></image>
			<view class="content">
				<view class="box box_1200" @click="navigator('五分区1200变电所','5fq1200')"></view>
				<view class="box box_1142" @click="navigator('1142变电所','1142')"></view>
				<view class="box box_950_1" @click="navigator('950变电所','950_1')"></view>
				<view class="box box_720" @click="navigator('720变电所','720')"></view>
				<view class="box box_929" @click="navigator('929变电所','929')"></view>

				<view class="box box_950_2" @click="navigator('五分区950变电所','5fq950')"></view>
				<view class="box box_22" @click="navigator('22采区变电所','22high')"></view>
				<view class="box box_980" @click="navigator('980变电所','980')"></view>
				<view class="box box_1000" @click="navigator('1000变电所','1000low')"></view>
				<view class="box box_880" @click="navigator('880变电所','880')"></view>
			</view>
			
			<!-- <view class="btn_box">
				<view class="btn btn_1000">
					<uni-icons type="circle-filled" color="#95EC69" size="18"></uni-icons>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			navigator(title,type) {
				if(type == "950_1" || type == "929"){
					uni.showToast({
						icon:"none",
						title:"暂未开通！"
					})
				}else{
					uni.navigateTo({
						url: "./detail/detail?title=" + title + "&type=" + type
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F7F7F7;
		background-image: url("../img/top.jpg");
		background-size: 100% 100%;
		width: 750rpx;
		box-sizing: border-box;
		padding: 25rpx;

		image {
			width: 700rpx;
		}

		position: relative;

		.content {
			width: 700rpx;
			position: absolute;
			top: 0;

			.box {
				width: 276rpx;
				height: 290rpx;

				position: absolute;
			}

			.box_1200 {
				top: 174rpx;
				left: 0;
			}

			.box_1142 {
				top: 686rpx;
				left: 0;
			}

			.box_950_1 {
				top: 1028rpx;
				left: 0;
			}

			.box_720 {
				top: 1540rpx;
				left: 0;
			}

			.box_929 {
				top: 1882rpx;
				left: 0;
			}


			.box_950_2 {
				top: 174rpx;
				left: 424rpx;
			}

			.box_22 {
				top: 686rpx;
				left: 424rpx;
			}

			.box_980 {
				top: 1028rpx;
				left: 424rpx;
			}

			.box_1000 {
				top: 1540rpx;
				left: 424rpx;
			}

			.box_880 {
				top: 1882rpx;
				left: 424rpx;
			}
		}
	
		.btn_box{
			width: 700rpx;
			position: absolute;
			top: 0;
			.btn{
				position: absolute;
			}
			.btn_1000{
				top: 1774rpx;
				left: 432rpx;
			}
		}
	}
</style>