91 lines
2.0 KiB
Plaintext
91 lines
2.0 KiB
Plaintext
.lin-image-picker__container {
|
||
position : relative;
|
||
display : flex;
|
||
flex-wrap : wrap;
|
||
}
|
||
|
||
.lin-image-picker__item {
|
||
position : relative;
|
||
width : 220rpx;
|
||
padding-bottom : 220rpx;
|
||
height : 0;
|
||
}
|
||
|
||
// size 不同时，对应的图片间距设置
|
||
// size 仅支持 1-10
|
||
each(range(2, 10), {
|
||
@valuePlusOne : @value+1;
|
||
.lin-image-picker__item--@{value}:nth-of-type(n+@{valuePlusOne}) {
|
||
margin-top : 20rpx;
|
||
}
|
||
|
||
.lin-image-picker__item--@{value}:not(:nth-of-type(@{value}n+1)) {
|
||
margin-left : 20rpx;
|
||
}
|
||
})
|
||
|
||
// 当 size 为 null，每行会显示 3 张图片
|
||
.lin-image-picker__item--null:nth-of-type(n+4) {
|
||
margin-top : 20rpx;
|
||
}
|
||
|
||
.lin-image-picker__item--null:not(:nth-of-type(3n+1)) {
|
||
margin-left : 20rpx;
|
||
}
|
||
|
||
.lin-image-picker__image {
|
||
position : absolute;
|
||
left : 0;
|
||
top : 0;
|
||
width : 100%;
|
||
height : 100%;
|
||
border : 1rpx solid #EEEEEE;
|
||
border-radius : 4rpx;
|
||
}
|
||
|
||
.lin-image-picker__remove {
|
||
position : absolute;
|
||
right : 10rpx;
|
||
top : 10rpx;
|
||
height : 40rpx;
|
||
width : 40rpx;
|
||
border-radius : 50%;
|
||
background : rgba(0, 0, 0, .4);
|
||
display : flex;
|
||
flex-direction : row;
|
||
align-items : center;
|
||
justify-content : center;
|
||
box-sizing : border-box;
|
||
}
|
||
|
||
.lin-image-picker__item--add {
|
||
border : 1rpx solid #EEEEEE;
|
||
border-radius : 4rpx;
|
||
background-color : white;
|
||
}
|
||
|
||
.lin-image-picker__image--add {
|
||
visibility : hidden;
|
||
position : absolute;
|
||
width : 50%;
|
||
height : 50%;
|
||
top : 50%;
|
||
left : 50%;
|
||
transform : translate(-50%, -50%);
|
||
}
|
||
|
||
.lin-image-picker__item-slot-wrapper {
|
||
display : flex;
|
||
justify-content : center;
|
||
align-items : center;
|
||
position : absolute;
|
||
width : 100%;
|
||
height : 100%;
|
||
top : 0;
|
||
left : 0;
|
||
}
|
||
|
||
.lin-image-picker__item-slot-wrapper:empty + .lin-image-picker__image--add {
|
||
visibility : visible;
|
||
}
|