UNPKG

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
.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; }