62 lines
1.2 KiB
Plaintext
62 lines
1.2 KiB
Plaintext
@import "../../../config/styles/mp/index.less";
|
||
@import "../../../config/styles/mp/mixins.less";
|
||
|
||
.file-list__container {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.file-list__item {
|
||
position: relative;
|
||
width: 220rpx;
|
||
padding-bottom: 220rpx;
|
||
height: 0;
|
||
}
|
||
|
||
// size 不同时，对应的图片间距设置
|
||
// size 仅支持 1-10
|
||
each(range(2, 10), {
|
||
@valuePlusOne : @value+1;
|
||
|
||
.file-list__item--@{value}:nth-of-type(n+@{valuePlusOne}) {
|
||
margin-top : 20rpx;
|
||
}
|
||
|
||
.file-list__item--@{value}:not(:nth-of-type(@{value}n+1)) {
|
||
margin-left : 20rpx;
|
||
}
|
||
}) // 当 size 为 null，每行会显示 3 张图片
|
||
|
||
.file-list__item--null:nth-of-type(n+4) {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.file-list__item--null:not(:nth-of-type(3n+1)) {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.file-list__image {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1rpx solid #eee;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.file-list__item--selected {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10;
|
||
background-color: #000;
|
||
filter: Alpha(Opacity=50);
|
||
opacity: 0.5;
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|