<template>
	<view>
		<view class="bg"><image src="../../static/bg.jpg" mode="widthFix"></image></view>
		<view style="display: flex;padding: 30rpx;width: 100%;box-sizing: border-box;flex-wrap: wrap;justify-content: space-between;">
			<view @click="gopath('/pages/declaration/declaration?type=1')" style="width: 49%;padding: 50rpx 30rpx;background: rgba(255,255,255,0.63);border-radius: 30rpx;">
				<view style="width: 50%;margin: 0 auto;">
					<image style="height: 120rpx;width: 100%;" src="../../static/ly/image7.png" mode="aspectFit"></image>
				</view>
				<view style="width: 100%;color: #3D3D3D;text-align: center;font-size: 25rpx;margin-top: 10rpx;">
					居民小区申报
				</view>
			</view>
			<view @click="gopath('/pages/declaration/declaration?type=2')" style="width: 49%;padding: 50rpx 30rpx;background: rgba(255,255,255,0.63);border-radius: 30rpx;">
				<view style="width: 50%;margin: 0 auto;">
					<image style="height: 120rpx;width: 100%;" src="../../static/ly/image8.png" mode="aspectFit"></image>
				</view>
				<view style="width: 100%;color: #3D3D3D;text-align: center;font-size: 25rpx;margin-top: 10rpx;">
					街路巷申报
				</view>
			</view>
			<view @click="gopath('/pages/declaration/declaration?type=3')" style="width: 49%;padding: 50rpx 30rpx;background: rgba(255,255,255,0.63);border-radius: 30rpx;margin-top:20rpx;">
				<view style="width: 50%;margin: 0 auto;">
					<image style="height: 120rpx;width: 100%;" src="../../static/ly/image5.png" mode="aspectFit"></image>
				</view>
				<view style="width: 100%;color: #3D3D3D;text-align: center;font-size: 25rpx;margin-top: 10rpx;">
					建筑名称备案
				</view>
			</view>
			<view @click="gopath('/pages/declaration/newDeclaration')" style="width: 49%;padding: 50rpx 30rpx;background: rgba(255,255,255,0.63);border-radius: 30rpx;margin-top:20rpx;">
				<view style="width: 50%;margin: 0 auto;">
					<image style="height: 120rpx;width: 100%;" src="../../static/ly/image6.png" mode="aspectFit"></image>
				</view>
				<view style="width: 100%;color: #3D3D3D;text-align: center;font-size: 25rpx;margin-top: 10rpx;">
					地名命名申报
				</view>
			</view>
			
		</view>
		<view style="padding: 30rpx;width: 100%;box-sizing: border-box;">
			<view @click="gopath('/pages/declaration/declaration?type=5')" style="width: 100%;background: rgba(255,255,255,0.63);border-radius: 30rpx;padding: 20rpx 0;">
				<view style="width: 60%;margin: 0 auto;display: flex;align-items: center;">
					<view style="width: 30%;margin: 0 auto;">
						<image style="height: 120rpx;width: 100%;" src="../../static/ly/image11.png" mode="aspectFit"></image>
					</view>
					<view style="color: #3D3D3D;text-align: center;font-size: 25rpx;">
						开发商小区门牌号申报
					</view>
				</view>
			</view>
			
		</view>
		<view class="bottom">
			<view class="bottom-two">
				<view class="bottom-two-list" @click="gopath('/pages/mapstakeline/mapstakeline')">
					<view class="bottom-two-list-img"><image src="../../static/map1.png"></image></view>
					<view class="bottom-two-list-text">界桩界线管护</view>
				</view>
				<view class="bottom-two-list" @click="gopath('/pages/mapdoorplate/mapdoorplate')">
					<view class="bottom-two-list-img"><image src="../../static/map2.png"></image></view>
					<view class="bottom-two-list-text">路门牌上报</view>
				</view>
			</view>
			<view class="bottom-my" style="margin-top: 20rpx;" @click="gopath('/pages/maptask/maptask')">
				<view class="bottom-my-img"><image src="../../static/map3.png"></image></view>
				<view class="bottom-my-text">我的任务</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		methods: {
			gopath(e) {
				uni.navigateTo({
					url: e
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.bg {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: -1;
	image {
		width: 100%;
		height: 100vh;
	}
}
.bottom {
	padding: 20rpx 20rpx;
	margin: 20rpx 30rpx;
	width: 94%;
	position: fixed;
	bottom: 30rpx;
	background: rgba(255,255,255,0.63);
	border-radius: 30rpx;
	.bottom-two {
		display: flex;
		justify-content: space-between;
		
		.bottom-two-list {
			position: relative;
			.bottom-two-list-img {
				image {
					width: 320rpx;
					height: 69rpx;
					box-shadow: 5rpx 10rpx 20rpx 0 #b7c8ff;
					border-radius: 100rpx;
				}
			}
			.bottom-two-list-text {
				position: absolute;
				top: 33%;
				left: 25%;
				transform: translate(-33%, -25%);
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.bottom-my {
		position: relative;
		.bottom-my-img {
			image {
				width: 710rpx;
				height: 69rpx;
				box-shadow: 5rpx 10rpx 20rpx 0 #b5f4d5;
				border-radius: 100rpx;
			}
		}
		.bottom-my-text {
			position: absolute;
			top: 25%;
			left: 8%;
			transform: translate(-25%, -8%);
			color: #fff;
			font-size: 28rpx;
		}
	}
}
</style>
