74 lines
1.4 KiB
Plaintext
74 lines
1.4 KiB
Plaintext
.images-list{
|
|
height:100vh;
|
|
}
|
|
.item-container{
|
|
padding:0 20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
margin-top:20rpx;
|
|
}
|
|
.images-list .item{
|
|
width:calc(50vw - 30rpx);
|
|
height:calc((50vw - 30rpx)/3*4);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.images-list .item.btn-upload{
|
|
background-color: #ddd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20rpx;
|
|
color:#666;
|
|
}
|
|
.images-list .item .loading-area{
|
|
position: absolute;
|
|
left:0;right:0;
|
|
width:100%;height:100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, .3);
|
|
color:#fff;
|
|
font-size: 60rpx;
|
|
}
|
|
.images-list .btn-upload .cloud{
|
|
font-size: 80rpx;
|
|
}
|
|
.images-list .default-mark{
|
|
position: absolute;
|
|
top:0;left:0;
|
|
background-color: var(--main-color);
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
padding:10rpx;
|
|
border-radius: 0 0 20rpx 0;
|
|
}
|
|
.images-list .image{
|
|
width:100%;height:100%;
|
|
}
|
|
.images-list .btn-close{
|
|
width:50rpx;height:50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right:0;top:0;
|
|
border-radius: 0 0 0 20rpx;
|
|
font-size: 22rpx;
|
|
color: #777;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
}
|
|
.images-list .btn-set-default{
|
|
position: absolute;
|
|
bottom:30rpx;
|
|
left:0;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
left:50%;
|
|
margin-left:-3.25em;
|
|
} |