Files
city-store-transfer/components/publishSlide/publishSlide.vue
2023-11-03 18:13:43 +08:00

120 lines
2.7 KiB
Vue

<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-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>