baiyuchengpin/pages_course/living/components/LiveUserNickPanel.vue

<template>
	<u-popup :show="show" mode="bottom" round="12" @close="$emit('close')">
		<view class="userlogo column">
			<view class="bold fs36 mt42">授权你的昵称信息</view>
			<view class="justify-between align-center mt42">
				<view class="button-container">
					<input type="nickname" class="hidden-input" placeholder-style="color:#ffffff; font-size:32rpx;"
						@blur="$emit('nickname-input', $event)" @input="$emit('nickname-input', $event)"
						placeholder="请点击授权微信昵称" />
				</view>
			</view>
			<view class="submitname" @click="$emit('confirm')">确定</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'LiveUserNickPanel',
	props: {
		show: { type: Boolean, default: false }
	}
}
</script>

<style scoped lang="scss">
.userlogo {
	padding: 36rpx 40rpx;
	color: #000000;

	.mt42 {
		margin-top: 42rpx;
	}

	.button-container {
		position: relative;
		margin: auto;

		.hidden-input {
			width: calc(100vw - 80rpx);
			text-align: center;
			height: 104rpx;
			background: #07C160;
			padding: 30rpx 0;
			box-sizing: border-box;
			border-radius: 12rpx;
			font-size: 32rpx !important;
			color: #FFFFFF !important;
		}
	}

	.submitname {
		width: calc(100vw - 80rpx);
		height: 104rpx;
		line-height: 104rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		font-size: 32rpx;
		color: #07C160;
		margin-top: 32rpx;
		text-align: center;
	}
}
</style>