
.self {
	width: 100%;
	height: 100%;
}


.containView {
	position: relative;
	font-size: 0rpx;
	width: 100%;
	height: 100%;
    top: 0px;
    left:0px;
	.clip-view{
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100%;
		height: 100%;
		will-change: clip;
		user-select: none;
	}
}

.compareBtn {
	bottom: 15px;
	right: 15px;
	z-index: 30;
	position: absolute;
	width: 36px;
	height: 36px;
	background-color: rgba($color: #000000, $alpha: 0.5);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;

	.icon {
		width: 20.8px;
		height: 22px;
	}
}

.move-view{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 29;
	background-color: transparent;
	.line-view{
		position: absolute;
		top: 0rpx;
		// left: calc(50% - 86rpx);
		left: -90px;
		// transform: translateX(-50%);
		width:180px;
		height:100%;
		background-color: transparent;
		.line{
			position: absolute;
			width:1px;
			top: 0px;
			left: 50%;
			transform: translateX(-50%);
			height:100%;
			background-color: #fff;
		}
		.block-view{
			position: absolute;
			width:180px;
			height:180px;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
}
.swiperAni{
	// transition:transform 0.5s;
	transition:clip 0.5s;
}
.templateImg{
	position: relative;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -1;
	transform:translateX(0px);
	background: linear-gradient(180.00deg, #d9d9d9 0%, #f4f4f4 100%);
}