BiKing/components/unopen/unopen.vue

<template>
	<uni-popup ref="popupRef">

		<view class="unopen-box">
			<view class="unopen-title">
				提示
			</view>
			<view class="unopen-content">
				<view class="content">
					{{ content }}
				</view>
				
				<view class="unopen-btn" @click.stop="$refs.popupRef.close()">
					我知道了
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "unopen",
		props:{
			content:{
				type:String,
				default:'暂未开放'
			}
		},
		data() {
			return {

			};
		},
		mounted() {
			// this.$refs.popupRef.open()
		},
		methods: {
			open() {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.unopen-box {
		width: 520rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.unopen-title {
			height: 90rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #1a1a1a;
			line-height: 90rpx;
			letter-spacing: 0.64rpx;
			border-bottom: 1rpx solid $border-color4;
		}

		.unopen-content {
			padding: 0 36rpx;
				min-height: 140rpx;
			
			.content{
				padding:40rpx 0;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a; 
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.unopen-btn{
			width: 100%;
			height: 80rpx;
			line-height:80rpx;
			background-color: $Theme-Color;
			margin-bottom: 40rpx;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
			letter-spacing: 1px;
			border-radius: 6rpx;
		}

	}
</style>