antd-mobile
Version:
<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
97 lines (84 loc) • 1.77 kB
CSS
.adm-image-uploader {
--cell-size: 160px;
}
.adm-image-uploader-space {
--gap: 24px;
}
.adm-image-uploader-cell {
position: relative;
width: var(--cell-size);
height: var(--cell-size);
border-radius: 8px;
overflow: hidden;
}
.adm-image-uploader-cell-fail {
border: red solid 2px;
box-sizing: border-box;
}
.adm-image-uploader-cell-delete {
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 28px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0 0 0 24px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.adm-image-uploader-cell-delete-icon {
position: absolute;
left: 8px;
top: 6px;
}
.adm-image-uploader-cell-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(50, 50, 51, 0.88);
}
.adm-image-uploader-cell-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
box-sizing: border-box;
padding-top: 16px;
}
.adm-image-uploader-cell-mask-message {
display: inline-block;
padding: 12px 8px;
font-size: 24px;
}
.adm-image-uploader-cell-image {
width: var(--cell-size);
height: var(--cell-size);
}
.adm-image-uploader-upload-button-wrap {
position: relative;
}
.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
background-color: #f5f5f5;
text-align: center;
line-height: var(--cell-size);
display: block;
}
.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button-icon {
color: #999999;
font-size: 64px;
}
.adm-image-uploader-upload-button-wrap .adm-image-uploader-input {
cursor: pointer;
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 8px;
}