.app-image-select { height: 148px; } .app-image-select__content{ height: 100%; display: flex; flex-direction: column; > .content__img { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; > img { max-width: 100%; max-height: 100%; } } > .content__svg { height: 100%; width: 100%; display: flex; align-items: center; > svg { width: 100%; } } .content__action{ display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; text-align: center; color: #fff; opacity: 0; font-size: 20px; background-color: rgba(0, 0, 0, .5); transition: opacity .3s; &:hover { opacity: 1 } .flex(); span+span { margin-left: 15px; } } } .app-image-select__dialog-model{ .el-dialog{ display: flex; .el-dialog__header { padding: 0; } &.app-image-select--has-picture .el-upload.el-upload--picture-card { display: none; } &.is-disabled .el-upload.el-upload--picture-card { background-color: rgba(0, 0, 0, 0.1); border: none; cursor: not-allowed; } .el-upload-list__item { transition: none; } .el-upload-list__item.is-ready { display: none; } } .el-dialog__body { display: flex; width: 100%; height: 80vh; } .dialog-model__image__img { height: 100%; width: 100%; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; > img { max-width: 100%; max-height: 100%; } } .dialog-model__image__svg { height: 100%; width: 100%; display: flex; align-items: center; > svg { width: 100%; } } }