mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 02:36:39 +08:00
118 lines
2.2 KiB
Plaintext
118 lines
2.2 KiB
Plaintext
.magnify {
|
|
position: relative;
|
|
width: 100%;
|
|
.left_contaner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.left_contaner .middle_img {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
margin:0 auto;
|
|
img {
|
|
width: auto;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
.left_contaner .shade {
|
|
background-color: rgba( 135,206,235, .5);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: move;
|
|
display: none;
|
|
}
|
|
.left_contaner .carousel {
|
|
width: 16rem;
|
|
margin: 1.25rem 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: .5rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
// background: url('../assets/image/userleft.jpg') no-repeat;
|
|
// background-position: center center;
|
|
}
|
|
.left_contaner .carousel .right_arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
img{
|
|
width: .5rem;
|
|
height: 1rem;
|
|
display: block;
|
|
margin-left: .375rem;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
@media screen and (max-width:768px) {
|
|
|
|
}
|
|
// // /* 最小768px最大1920 *pc端/
|
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
.left_contaner .carousel {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
.right_contanier {
|
|
display:block
|
|
}
|
|
.right_contanier .big_img {
|
|
display: block;
|
|
}
|
|
} |