<template>
	<view class="cu-login-userinfo">
		<view class="userinfo">
			<view class="image">
				<image :src="userImage" style="width: 100%;height: 100%;"  mode="aspectFill" />
			</view>
			<view  style="height: 80rpx;" class="flex text-bold align-center justify-center">{{userName}}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		bgColor: {
			type: String,
			default: ''
		},
		userImage:{
			type:String,default:'https://img.yzcdn.cn/vant/cat.jpeg'
		},
		userName:{
			type:String,default:'昵称'
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped >
$blue: #018bed;
.cu-login-userinfo {
	height: 300rpx;
	background-color: #fff;
	position: relative;
	.userinfo{
		position: absolute;
		width: 300rpx;
		height:250rpx;
		top: 0rpx;left: calc(50% - 150rpx);
		z-index: 99;
		.image{
			width: 150rpx;height: 150rpx;
			margin: 0 auto;
			border: 6rpx solid #fff;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 50%;
			overflow: hidden;
		}
	}
	&::before{
		content: '';
		height: 150rpx;
		background-color: $blue;
		display: block;
	}
	&::after{
		content: "";
		height: 200rpx;
		width: 700rpx;
		display: block;
		position: absolute;
		top: 50rpx;
		left: calc(50% - 350rpx);
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx #999;
		z-index: 98;
	}
}
</style>
