xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-11-21 01:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Desktop Menu / Product detail page layout update

Browse Source
This commit is contained in:
Vion
2022-01-10 20:23:58 +08:00
parent f1b7b7c501
commit baad9d2555
9 changed files with 1248 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
rc-busness/assets/css/magnifier.less
View File

@@ -1,8 +1,6 @@
@media screen and (max-width:768px) {
.magnify {
position: relative;
width: 100%;
}
.magnify {
position: relative;
width: 100%;
.left_contaner {
width: 100%;
height: 100%;
@@ -11,6 +9,12 @@
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);
@@ -20,17 +24,12 @@
cursor: move;
display: none;
}
.left_contaner .middle_img img {
width: 100%;
height: 100%;
}
.left_contaner .carousel {
width: 2.56rem;
margin: .20rem auto 0 auto;
width: 16rem;
margin: 1.25rem auto 0 auto;
display: -webkit-flex;
}
.left_contaner .carousel .show_box {
flex: 1;
overflow: hidden;
@@ -44,25 +43,21 @@
display: flex;
align-items: center;
img{
width: .08rem;
height: .16rem;
width: .5rem;
height: 1rem;
}
// 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;
width: .5rem;
height: 1rem;
display: block;
margin-left: 0.06rem;
margin-left: .375rem;
}
}
.left_contaner .carousel .picture_container {
@@ -87,7 +82,7 @@
border: 2px solid #E2001A;
}
.left_contaner .picture_container .picture_item img {
width: 100%;
height: 100%;
}
@@ -104,86 +99,20 @@
left: 0px;
display: none;
}
}
@media screen and (max-width:768px) {
}
// // /* 最小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;
}
.left_contaner .carousel {
width: 100%;
margin-top: 20px;
}
.right_contanier {
display:block
}
.right_contanier .big_img {
display: block;
}
}