You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
1.7 KiB
114 lines
1.7 KiB
//图片魔方
|
|
.picture-cube{
|
|
background-color: #FFFFFF;
|
|
.title{
|
|
color:#111111;
|
|
padding: 20px 15px;
|
|
font-size:22px;
|
|
font-weight: 700;
|
|
span{
|
|
display: inline-block;
|
|
|
|
/*padding-left:6px;
|
|
border-left:4px solid #E7031C;*/
|
|
}
|
|
}
|
|
//一图模式
|
|
.one-mode{
|
|
image{
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
}
|
|
}
|
|
//二图模式
|
|
.two-mode{
|
|
// 第一种表现形式
|
|
.first-show{
|
|
display: flex;
|
|
padding: 5px;
|
|
.item{
|
|
flex: 1;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.common-show{
|
|
display: flex;
|
|
.item{
|
|
flex: 1;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.two-item{
|
|
flex: 2;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 三图模式
|
|
.three-mode{
|
|
.first-show{
|
|
display: flex;
|
|
padding: 5px;
|
|
.item{
|
|
flex: 1;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.common-show{
|
|
display: flex;
|
|
.item{
|
|
flex: 1;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
.info{
|
|
height: 50%;
|
|
padding: 5px;
|
|
image{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 四图模式
|
|
.four-mode{
|
|
.first-show{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 5px;
|
|
.item{
|
|
width: 50%;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.second-show{
|
|
display: flex;
|
|
.item{
|
|
flex: 1;
|
|
padding: 5px;
|
|
image{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|