@import '../../style/common_mixin'; .p-image-uploader { position: relative; display: block; width: 100%; height: 0; padding-bottom: 56.25%; .p-box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 2px dashed #ddd; border-radius: 0.5rem; background-color: #fafafa; text-align: center; color: #aaa; .p-upload-icon { text-align: center; margin: auto; .anticon-upload { color: #888; font-size: 5rem; } .p-progress-bar { position: relative; width: 20rem; height: 1.5rem; border: 1px solid #ccc; border-radius: 1rem; .p-progress-bg { background-color: #1890ff; border-radius: 1rem; height: 100%; } .p-progress-value { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-shadow: 0 0 4px #000; color: white; text-align: center; font-size: 0.9rem; line-height: 1.5rem; } } } .p-preview { width: 100%; height: 100%; //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"); @include k-img-bg(); } } } .p-btn-delete { position: absolute; right: -0.5rem; top: -0.5rem; width: 2rem; height: 2rem; border: 0.2rem solid white; border-radius: 50%; font-size: 1.2rem; background-color: #fb781a; color: white; text-align: center; } .p-upload-progress-bg { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; & .i-text { position: absolute; text-align: center; color: white; text-shadow: 0 0 2px rgba(0, 0, 0, .85); } & .i-bg { position: absolute; left: 0; top: 0; height: 100%; background-color: #27b43f; border-radius: 0.5rem; } } :host ::ng-deep .ant-upload { display: block; }