@import '../../style/common_mixin.css'; /*.p-video-box{ bottom: 0; border: 2px dashed #ddd; border-radius: 0.5rem; background-color: #fafafa; text-align: center; color: #aaa; padding-top: 56.25%; //font-size: 4rem; position: relative; .p-upload-icon{ left: 50%; position: absolute; top: 50%; transform: translate(-50% ,-50%); } }*/ .p-video-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; } .p-upload-icon .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-bar .p-progress-bg { background-color: #1890ff; border-radius: 1rem; height: 100%; } .p-progress-bar .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"); } .p-preview video{ max-height: 100%; max-width: 100%; position: absolute; display: flex; } .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, .p-upload-check-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: #1890ff; //border-radius: 0.5rem 0 0 0.5rem; } } .p-upload-progress-bg.smart-bar{ height: 50px!important; margin-top: 20px!important; } .p-upload-check-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: #17a2b8; //border-radius: 0.5rem 0 0 0.5rem; } } //:host ::ng-deep .ant-upload { // display: block; //}