梁航：更新悬浮选项组件及子页面

2023-11-03 16:58:22 +08:00
parent 849ea07b08
commit 73f4bdf1e2
12 changed files with 279 additions and 6 deletions
--- a/components/publishSlide/publishSlide.vue
+++ b/components/publishSlide/publishSlide.vue
@@ -0,0 +1,109 @@
+<template>
+	<view class="slide">
+		<view class="mask" @click.self="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-2" @click="enterAddress">
+					<image src="/static/publish/fb_icon_zdxz.png" mode="aspectFit" class="selecter"></image>
+					<text  class="text">找店选址</text>
+				</view>
+				<view class="content-3"  @click="enterRent">
+					<image src="/static/publish/fb_icon_dpcz.png" mode="aspectFit" class="selecter"></image>
+					<text  class="text">店铺出租</text>
+				</view>
+				<view class="content-4" @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{
+			display: flex;
+			justify-content: space-around;
+			margin-top: 32px;
+			z-index: 50;
+		}
+		.selecter{
+			width: 45px;
+			height: 45px;
+			z-index: 50;
+			// background-color: red;
+			display: flex;
+			flex-direction: column;
+		}
+		.text{
+			font-size: 28rpx;
+			display: block;
+			margin: 0 auto;
+		}
+		
+</style>