fenggu/pages/canvasposter/canvasposter.wxss

/**index.wxss**/
.contentWarp {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
}

.touchWrap {
	transform-origin: center;
	position: absolute;
	z-index: 100;
}

.imgWrap {
	box-sizing: border-box;
	width: 100%;
	transform-origin: center;
	float: left;
	border: 5rpx transparent dashed;
}

.imgWrap image {
	float: left;
}

.touchActive .x {
	display: block;
}

.touchActive .o {
	display: block;
}

.x {
	position: absolute;
	top: -25rpx;
	left: -25rpx;
	z-index: 500;
	display: none;
	width: 50rpx;
	height: 50rpx;
	overflow: hidden;
	font-weight: bold;
	color: #d1e3f1;
}

.o {
	position: absolute;
	bottom: -25rpx;
	right: -25rpx;
	width: 50rpx;
	height: 50rpx;
	text-align: center;
	display: none;
	overflow: hidden;
	font-weight: bold;
	color: #d1e3f1;
}

.active {
	background-color: rgb(78, 114, 151);
}

.active view {
	border: none;
}

.touchActive {
	z-index: 400;
}

.operation-buttons {
	position: absolute;
	bottom: 220rpx;
	right: 15rpx;
	display: flex;
	flex-direction: column;
	z-index: 101;
	transition: all .5s ease-in-out;
}

.operation-buttons image {
	width: 74rpx;
	height: 80rpx;
	margin-top: 20rpx;
}
.closeSave {
	transform: scale(0);
}
.canvasWrap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
	text-align: center;
}

.maskCanvas {
	position: absolute;
	left: -200%;
	top: 0;
}

.btnView view {
	padding-bottom: 20rpx;
}

.hand {
	position: absolute;
	left: 100rpx;
	right: 0;
	margin: auto;
	z-index: 100;
}

.getUserInfoBtn {
	position: initial;
	border: none;
	background-color: none;
}

.getUserInfoBtn::after {
	border: none;
}

.btn_view {
	display: flex;
	padding: 20rpx;
}

.btn_view button {
	width: 30%!important;
	padding: 16rpx 20rpx;
	font-size: 26rpx;
	background-color: #2a7be9;
	color: #fff;
}
/* 点击下载按钮时的图片样式 */
.resImg {
	width: 80%;
	margin-top: 20rpx;
}

/* 特效样式 */
.fliters {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 382rpx;
	right: 120rpx;
	z-index: 201;
}

.shapes {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 242rpx;
	right: 120rpx;
	z-index: 201;
}

.fliters image,
.shapes image {
	width: 60rpx;
	height: 60rpx;
	border: 2rpx solid #eb4985;
}


.choose-box {
	position: fixed;
	bottom: -250rpx;
	left: 0;
	right: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, .8);
	padding: 20rpx;
	transition: all .5s ease-in-out;
}

.showBox {
	bottom: 88rpx;
}

.scrollView {
	display: flex;
}

.title-box view {
	background-color: rgba(0, 0, 0, 1);
	display: inline-block;
	padding: 15rpx 30rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
	color: #fff;
}

.title-box .titleActive {
	color: #000;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 0rpx 20rpx rgba(255, 255, 255, .5);
}

.img-box view {
	width: 25%;
	height: 320rpx;
	flex-shrink: 0;
	margin-right: 20rpx;
	background-color: rgba(0,0,0,.8);
	display: flex;
	align-items: center;
}

.img-box view:last-child {
	margin-right: 0rpx;
}

.img-box image {
	width: 100%;
	height: 320rpx;
	object-fit: contain;
}

.img-box .allActive {
	transform: scale(.9);
	border: 4rpx dashed rgba(255, 255, 255, .4);
	box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, .8);
}
.auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 1000;}
.auth-box > view {background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;}
.auth-top {display: flex;}
.auth-top image {width: 96rpx;height: 96rpx;flex-shrink: 0;}
.auth-top-content {margin-left: 20rpx;}
.auth-top-content view {font-size: 28rpx;margin-top: 20rpx;color: #999999;}
.auth-top-content view:nth-child(1) {font-size: 30rpx;font-weight: bold;margin-top: 0;}
.auth-center {font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;}
.auth-bottom {display: flex;justify-content: center;align-items: center;font-size: 24rpx;}
.btn {padding: 12rpx 40rpx;border-radius: 4rpx;}
.btn-no {color: #2a7be9;background-color: #FFFFFF;border: 1rpx solid #2a7be9;}
.btn-yes {color: #FFFFFF;background-color: #2a7be9;border: 1rpx solid #2a7be9;position: relative;margin-left: 20rpx;}
.auth-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
.isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);}
.isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);}
.card-box-userinfo {transform: rotate(360deg) scale(0);transition: all 1s ease-in-out;}