<template> <view class="mark" v-if="isShow" @click="close"> <view class="release"> <view class="release_content" v-for="(item,i) in list" :key="i" @click="navigtion(item)"> <view class="release_content_left"> <view :class="i==1?'release_imga':'release_img'"> <image :src="item.img" mode="aspectFit"></image> </view> <view class="title"> <view class="title1"> {{item.title1}} </view> <view class="title2"> {{item.title2}} </view> </view> </view> <view class="release_content_right "> <text class="iconfont icon-xiangyou"></text> </view> </view> <view class="release_close" @click="close"> <image src="@/static/images/trad-close.png" mode="aspectFit"></image> </view> </view> </view> </view> </template> <script> import { navigateTo } from '../../libs/uniApi' export default { props: { isShow: { type: Boolean, default: false }, // 子组件接收一个布尔类型的bottom,如果为true则弹窗则在页面的底部,false为默认居中显示 bottom: { type: Boolean, default: false } }, data() { return { list: [{ img: require('@/static/images/season.png'), title1: '发布调货商品', title2: '镇街店铺快捷调货', }, { img: require('@/static/images/discounts.png'), title1: '发布打折商品', title2: '发布店铺打折商品', } ] } }, methods: { navigtion(item) { if (item.title1 =='发布调货商品') { uni.navigateTo({ url: '/pages/trading_hall/transfer_goods/index' }) } else { uni.navigateTo({ url: '/pages/trading_hall/adddiscounts/index' }) } }, close() { this.$emit('close') }, cancel() { this.$emit('cancel') }, confirm() { this.$emit('confirm') }, } } </script> <style lang="scss"> .mark { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); left: 0; bottom: 0; top: 0; right: 0; display: flex; justify-content: center; align-items: center; } .release { position: absolute; bottom: 0px; } .release_content { width: 694rpx; height: 137rpx; background: #FCF3EE; border-radius: 14rpx 14rpx 14rpx 14rpx; opacity: 1; margin-bottom: 21rpx; display: flex; justify-content: space-between; padding: 0 26rpx; .release_content_left { display: flex; } .release_content_right { height: 137rpx; line-height: 137rpx; } .release_img { width: 111rpx; height: 96rpx; margin-top: 21rpx; margin-right: 19rpx; image { width: 111rpx; height: 96rpx; } } .release_imga { width: 76rpx; height: 113rpx; margin-top: 5rpx; margin-right: 50rpx; image { width: 76rpx; height: 113rpx; } } .title { margin-top: 23rpx; } .title1 { font-size: 32rpx; font-family: PingFang SC-Medium, PingFang SC; font-weight: 500; color: #333333; } .title2 { font-size: 28rpx; font-family: PingFang SC-Regular, PingFang SC; font-weight: 400; color: #666666; margin-top: 11rpx; } } .release_close { width: 248rpx; height: 248rpx; margin: 0 auto; image { width: 248rpx; height: 248rpx; } } </style>