smart-admin/rc-busness/assets/css/magnifier.less

@media screen and (max-width:768px) {
	.magnify {
	  position: relative;
	  width: 100%;
	}
	.left_contaner {
	  width: 100%;
	  height: 100%;
	}
	.left_contaner .middle_img {
	  box-sizing: border-box;
	  position: relative;
	  width: 100%;
	}
	.left_contaner .shade {
	  background-color: rgba(	135,206,235, .5);
	  position: absolute;
	  top: 0;
	  left: 0;
	  cursor: move;
	  display: none;
	}
	.left_contaner .middle_img img {
	  width: 100%;
	  height: 100%;
	}
	.left_contaner .carousel {
	  width: 2.56rem;
	  margin: .20rem auto 0 auto;
	  display: -webkit-flex;

	}

	.left_contaner .carousel .show_box {
	  flex: 1;
	  overflow: hidden;
	  position: relative;
	}
	.left_contaner .carousel .arrow {
	  flex-basis: 25px;
	  cursor: pointer;
	}
	.left_contaner .carousel .left_arrow {
	  display: flex;
	  align-items: center;
	  img{
		width: .08rem;
		height: .16rem;
	  }

	  // background: url('../assets/image/userleft.jpg') no-repeat;
	  // background-position: center center;
	}
	.left_contaner .carousel .right_arrow {
	  // background: url('../assets/image/userright.png') no-repeat;
	  // background-position: center right;
	  // width: 8px;
	  // height: 16px;
		display: flex;
		align-items: center;
		img{
			width: .08rem;
			height: .16rem;
			display: block;
			margin-left: 0.06rem;
	  }
	}
	.left_contaner .carousel .picture_container {
	  height: 100%;
	  position: absolute;
	  overflow: hidden;
	  display: flex;
	  align-items: center;
	  top: 0;
	  left: 0;
	}
	.left_contaner .picture_container .picture_item {
	  height: 100%;
	  width: 60px;
	  height: 60px;
	  object-fit: contain;
	  border: 1px solid #d8d8d8 ;
	  margin-left: 5px;
	  box-sizing: border-box;
	}
	.left_contaner .picture_container .picture_item:hover {
	  border: 2px solid #E2001A;
	}
	.left_contaner .picture_container .picture_item img {

	  width: 100%;
	  height: 100%;
	}
	.right_contanier {
	  overflow: hidden;
	  position: absolute;
	  top: 0;
	  border: 1px solid #ccc;
	  display: none;
	}
	.right_contanier .big_img {
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  display: none;
	}


}
// //    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
.magnify {
  position: relative;
}
.left_contaner {
  width: 100%;
  height: 100%;
}
.left_contaner .middle_img {
  box-sizing: border-box;
  position: relative;
}
.left_contaner .shade {
  background-color: rgba(	135,206,235, .5);
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
}
.left_contaner .middle_img img {
  width: 100%;
  height: 100%;
}
.left_contaner .carousel {
  width: 100%;
  margin-top: 20px;
  display: -webkit-flex;
}
.left_contaner .carousel .show_box {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.left_contaner .carousel .arrow {
  flex-basis: 25px;
  cursor: pointer;
}
.left_contaner .carousel .left_arrow {
  background: url('../image/rc-left.png') no-repeat;
  background-position: center center;
}
.left_contaner .carousel .right_arrow {
  background: url('../image/rc-left.png') no-repeat;
  background-position: center right;
}
.left_contaner .carousel .picture_container {
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
.left_contaner .picture_container .picture_item {
  height: 100%;
  float: left;
  padding: 5px;
  box-sizing: border-box;
}
.left_contaner .picture_container .picture_item:hover {
  border: 2px solid #E2001A;
}
.left_contaner .picture_container .picture_item img {
  width: 100%;
  height: 100%;
}
.right_contanier {
  overflow: hidden;
  position: absolute;
  top: 0;
  border: 1px solid #ccc;
}
.right_contanier .big_img {
  position: absolute;
  top: 0px;
  left: 0px;
}


}