<template>
	<div class="container">
		<view class="select" @click.stop >
			<view class="select-left" @click="isRuler=true" :style="!isRuler?{color:`black`,backgroundColor:`#fff`}:{}">
				列表
			</view>
			<view class="select-right" @click="isRuler=false" :style="isRuler?{color:`black`,backgroundColor:`#fff`}:{}">
				地图
			</view>
		</view>
		<view class="title-map">
			<view class="right-bad">
				<view>北</view>
				<image class="right-bad-img" src="@/static/index/zhinan.png" />
				<view>南</view>
			</view>
			<image class="title-img" src="@/static/index/map.png" />
		</view>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
    const isRuler = ref(true);
	
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	min-height: 100vh;
	position: relative;
	.select{
		position: absolute;
		left: 30rpx;
		top: -20rpx;
		width: 170rpx;
		height: 60rpx;
		border-radius: 20rpx;
		background-color: #01A8FF;
		z-index: 1;
		display: flex;
		border: 4rpx solid #01A8FF;
		.select-left{
			border-top-left-radius: 15rpx;
			border-bottom-left-radius: 15rpx;
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			color: #fff;
		}
		.select-right{
			border-top-right-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			color: #fff;
		}
	}
	.title-map{
		width: 100%;
		height: 650rpx;
		background-color: #E0E2E9;
		margin-top: 50rpx;
		position: relative;
		.right-bad{
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			width: 50rpx;
			height: 130rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #fff;
			z-index:1;
			border-radius: 20rpx;
			font-size: 23rpx;
			.right-bad-img{
				width: 30rpx;
				height: 55rpx;
			}
		}
		.title-img{
			width: 700rpx;
			height: 600rpx;
			margin-left: 25rpx;
			margin-top: 25rpx;
		}
	}
}
</style>