easyshop-wxmini/packagePoster/index.wxss

.poster {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #c11f1b;
}

.poster .btn {
	text-align: center;
	line-height: 100rpx;
	font-size: 16px;
	font-weight: 500;
	color: #e5bb8f;
}

.poster .backgroundImg {
	position: absolute;
	top: calc(constant(safe-area-inset-bottom) / 2);
	top: calc(env(safe-area-inset-bottom) / 2);
	width: 100%;
	height: calc(100% - constant(safe-area-inset-bottom));
	height: calc(100% - env(safe-area-inset-bottom));
}

.poster .background-door {
	position: absolute;
	bottom: calc(constant(safe-area-inset-bottom) / 2);
	bottom: calc(env(safe-area-inset-bottom) / 2);
	width: 100%;
	height: calc(55% - constant(safe-area-inset-bottom));
	height: calc(55% - env(safe-area-inset-bottom));
	perspective: 500px;
}

.poster .background-door .signIn-btn {
	z-index: 10;
	position: absolute;
	bottom: 30%;
	left: 35%;
	width: 30%;
	padding-left: 10rpx;
	background: linear-gradient(to right, #cf382c, #b71619);
  box-shadow: 0 0 48rpx #b71619;
	border-radius: 20rpx;
	letter-spacing: 10rpx;
	animation: signInBtn 1.5s ease-in-out infinite;
}

.poster .background-door .signIn-btn-hide {
	opacity: 0;
	animation: hide 0.2s linear;
}

.poster .background-door .signIn-btn-show {
	animation: show 1s ease-in;
}

.poster .background-door .background-door__left,
.poster .background-door .background-door__right {
	position: absolute;
	width: 50%;
	height: 100%;
	perspective: 500px;
}

.poster .background-door .background-door__right {
	right: 0;
}

.poster .background-door image {
	position: absolute;
	height: 100%;
	transform-origin: right center;
}

.poster .background-door .background-door__left image {
	right: 0;
	transform-origin: left center;
}

.poster .background-door .door-left-open {
	transform: rotateY(-130deg);
	animation: left-open 1s linear;
}

.poster .background-door .door-left-close {
	transform: rotateY(0deg);
	animation: left-close 1s linear;
}

.poster .background-door .door-right-open {
	transform: rotateY(130deg);
	animation: right-open 1s linear;
}

.poster .background-door .door-right-close {
	transform: rotateY(0deg);
	animation: right-close 1s linear;
}

.poster .background-door .background-door__invite {
	position: absolute;
	top: 12%;
	left: 20%;
	width: 60%;
	opacity: 0;
}

.poster .background-door .background-door__invite .border_corner {
	position: absolute;
	width: 32rpx;
	height: 32rpx;
	border: 4rpx solid #e5bb8f;
}

.poster .background-door .background-door__invite .border_corner_left_top{
	top: -28rpx;
	left: -24rpx;
	border-right: none;
	border-bottom: none;
	border-top-left-radius: 12rpx;
}

.poster .background-door .background-door__invite .border_corner_right_top{
	top: -28rpx;
	right: -24rpx;
	border-left: none;
	border-bottom: none;
	border-top-right-radius: 12rpx;
}

.poster .background-door .background-door__invite .border_corner_left_bottom{
	bottom: -2rpx;
	left: -24rpx;
	border-right: none;
	border-top: none;
	border-bottom-left-radius: 12rpx;
}

.poster .background-door .background-door__invite .border_corner_right_bottom{
	bottom: -2rpx;
	right: -24rpx;
	border-left: none;
	border-top: none;
	border-bottom-right-radius: 12rpx;
}

.poster .background-door .background-door__invite.door-invite-show {
	opacity: 1;
	animation: show 1s linear;
}

.poster .background-door .background-door__invite.door-invite-hide {
	opacity: 0;
	animation: hide 1s linear;
}

.poster .background-door .background-door__invite	.content {
	margin-bottom: 30rpx;
	line-height: 58rpx;
	color: #e5bb8f;
	text-indent: 2em;
}

.poster .background-door .background-door__invite	.content .keynote {
  color: #fff;
}

.poster .background-door .background-door__invite	.content .agreement {
  color: #1989FA;
}

.poster .background-door .background-door__invite .btn-group {
	display: flex;
}

.poster .background-door .background-door__invite .btn-group .btn {
	width: 50%;
}

.poster .background-door .background-door__invite .btn-group .btn:first-child {
	color: #969799;
}