Files

121 lines
2.7 KiB
Vue

<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" scoped>
.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: 20%;
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;
color: #686868;
}
</style>