<template>
	<view class="slide">
		<view class="mask" @click="quitSlide">
			<view class="content" @click.stop>
				<view class="container">
					<view class="content-1" @click="enterTransfer">
						<image src="/static/publish/fb_icon_dpzr.png" mode="aspectFit" class="selecter"></image>
						<text class="text">店铺转让</text>
					</view>
					<view class="content-1" @click="enterAddress">
						<image src="/static/publish/fb_icon_zdxz.png" mode="aspectFit" class="selecter"></image>
						<text class="text">找店选址</text>
					</view>
					<view class="content-1" @click="enterRent">
						<image src="/static/publish/fb_icon_dpcz.png" mode="aspectFit" class="selecter"></image>
						<text class="text">店铺出租</text>
					</view>
					<view class="content-1" @click="enterInvestment">
						<image src="/static/publish/fb_icon_xmzs.png" mode="aspectFit" class="selecter"></image>
						<text class="text">项目招商</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

			}
		},
		methods: {
			quitSlide() {
				this.$emit("quitSlide")
			},
			enterTransfer() {
				uni.navigateTo({
					url: '/pages/publish/publishTransfer/publishTransfer'
				})
			},
			enterAddress() {
				uni.navigateTo({
					url: '/pages/publish/publishAddress/publishAddress'
				})
			},
			enterRent() {
				uni.navigateTo({
					url: '/pages/publish/publishRent/publishRent'
				})
			},
			enterInvestment() {
				uni.navigateTo({
					url: '/pages/publish/publishInvestment/publishInvestment'
				})
			}
		}
	}
</script>

<style lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		// opacity: 0.2;
		// backdrop-filter:saturate(150%) blur(8px);模糊
		-webkit-backdrop-filter: saturate(150%) blur(8px);
		background-color: rgba(0, 0, 0, .3);
		z-index: 20;

	}

	.content {
		position: fixed;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 40%;
		height: 25%;
		width: 90%;
		background-color: #fff;
		z-index: 40;
		border-radius: 29rpx;

	}

	.container {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 50;
	}

	.content-1 {
		// vertical-align: middle;
		height: auto;
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.selecter {
		width: 49px;
		height: 49px;
		z-index: 50;
		// background-color: red;
		display: flex;
		flex-direction: column;
		// background-color: red;
	}

	.text {
		font-size: 28rpx;
		display: block;
	}
</style>