MoeNovaClient/components/NicknamePopup/NicknamePopup.vue

<template>
	<uv-popup ref="popup" mode="bottom" bgColor="none" :closeOnClickOverlay="closeOnClickOverlay">
		<view class="heard">
			<slot name="heard"></slot>
			<text class="title" v-if="title">{{ title }}</text>
		</view>
		<view v-if="subtitle" class="subtitle">{{ subtitle }}</view>
		<view class="content">
			<slot name="content"></slot>
		 
		</view>
		<image class="close" src="@/static/icon/wd_icon_guanbi.png" @click="closeIcon()"></image>
		 
		<view class="bottomCompatibility"></view>
	</uv-popup>
</template>

<script>
import uvPopup from '@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue'

export default {
	name: 'NicknamePopup',
	components: {
		uvPopup
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		subtitle: {
			type: String,
			default: ''
		},
		closeOnClickOverlay: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() { 
			this.$refs.popup.close();
		},
		closeIcon() {
			if (this.$listeners.close) {
				this.$emit('close')
			}
			this.$refs.popup.close();
		}
	}
}
</script>

<style scoped lang="scss">
/* 添加样式 */
.bottomCompatibility {
	height: --window-bottom;
}

.subtitle {
	font-family: 'PingFang SC-Medium';
	color: #999;
	font-size: 24rpx;
	font-weight: 400;
	text-align: center;
	padding-top: 18rpx;
}

::v-deep.uv-popup .uv-popup__content {
	border-radius: 28rpx 28rpx 0 0;
	min-height: 400rpx;
	background: url("../../static/me/wd_bg_jianjie.png") center top/100% auto no-repeat, #fff !important;
	padding-bottom: 40rpx;

}

.heard {
	padding-top: 28rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	.title {
		font-size: 36rpx;
		font-weight: 700;
		font-family: 'Alimama ShuHeiTi-Bold';
		color: #1F1F1F;
	}
}

.close {
	position: absolute;
	right: 44rpx;
	top: 36rpx;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
}

::v-deep.content .btn-box {
	background: #1F1F1F;
	border-radius: 76rpx;
	color: #fff;
	margin: 0 auto;
	width: 626rpx;
	height:88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.content{
	margin-top: 32rpx;
}
</style>