meri-design/dist/theme/ImageUpload.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.p-message-box{align-items:center;display:flex;flex-flow:column wrap;justify-content:center;left:0;pointer-events:none;position:fixed;text-align:center;top:36px;width:100%;z-index:9000}.fadeDownUpUi-enter-active{animation:fadeInDownUi .3s ease-out}.fadeDownUpUi-leave-active{animation:fadeOutUpUi .3s ease-in}@-moz-keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@-o-keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInDownUi{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@-moz-keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@-webkit-keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@-o-keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUpUi{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.p-message{align-items:flex-start;border-radius:4px;box-shadow:0 2px 10px rgba(31,35,41,.1);display:flex;justify-content:space-around;max-width:600px;min-height:40px;min-width:240px;padding:8px 8px 8px 12px}.p-message+.p-message{margin-top:24px}.p-message .p-message-hint{font-size:0;line-height:24px}.p-message .p-message-hint svg{height:16px;vertical-align:middle;width:16px}.p-message .p-message-text{word-wrap:break-word;color:#fff;font-size:14px;line-height:24px;padding-left:8px;padding-right:8px;text-align:left;width:100%}.p-message .p-message-close{font-size:0;height:24px;line-height:24px;pointer-events:auto}.p-message .p-message-close svg{cursor:pointer;opacity:.5;transition:opacity .3s;vertical-align:middle;width:12px}.p-message .p-message-close svg:hover{opacity:1}.p-message-info{background-color:#246fe5}.p-message-success{background-color:#3fbe72}.p-message-warning{background-color:#ffcc47}.p-message-error{background-color:#f55047}.p-image-upload{display:inline-flex;flex-wrap:wrap;font-size:0;width:100%}.p-image-upload .p-image-upload-centent{align-items:center;background:#f7f9fa;border:1px dashed #c4c9cf;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;height:112px;margin-bottom:20px;margin-right:12px;padding-bottom:12px;padding-top:20px;position:relative;transition:all .36s;width:112px}.p-image-upload .p-image-upload-centent .p-add-image-input{background:none;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.p-image-upload .p-image-upload-centent .p-label{color:#1b2129;cursor:pointer;font-size:14px;font-weight:400;line-height:22px;margin-bottom:4px;margin-top:8px}.p-image-upload .p-image-upload-centent .p-number{color:#8b949e;font-size:14px;font-weight:400;line-height:22px}.p-image-upload .p-image-upload-centent:hover{border-color:#246fe5}.p-image-upload .p-image-upload-disabled,.p-image-upload .p-image-upload-disabled .p-add-image-input{cursor:default}.p-image-upload .p-image-upload-disabled .p-label{color:#c4c9cf;cursor:not-allowed}.p-image-upload .p-image-upload-disabled .p-number{color:#c4c9cf}.p-image-upload .p-image-upload-disabled svg rect{fill:#c4c9cf}.p-image-upload .p-image-upload-disabled:hover{border-color:#c4c9cf}.p-image-upload .p-image-list{align-items:center;background:#f7f9fa;border:1px dashed #c4c9cf;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;height:112px;margin-bottom:20px;margin-right:12px;position:relative;width:112px}.p-image-upload .p-image-list .p-delete-icon{height:16px;opacity:0;position:absolute;right:8px;top:8px;transition:opacity .3s;width:16px}.p-image-upload .p-image-list .p-delete-icon path{transition:fill .36s}.p-image-upload .p-image-list .p-delete-icon:hover path{fill:#246fe5}.p-image-upload .p-image-list-done{background:#fff;border:1px solid #c4c9cf;border-radius:4px;padding:4px}.p-image-upload .p-image-list-done .p-small-image-box{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;width:100%}.p-image-upload .p-image-list-done .p-small-image-box .p-list-image{height:100%}.p-image-upload .p-image-list-done:hover .p-delete-icon{opacity:1}.p-image-upload .p-image-list-fail{background:#f7f9fa;border:1px dashed #f55047;border-radius:4px}.p-image-upload .p-image-list-fail .p-fail-icon{align-items:center;display:flex;height:40px;justify-content:center;margin-bottom:2px;margin-top:24px;width:40px}.p-image-upload .p-image-list-fail .p-fail-text{color:#8b949e;font-size:14px;font-weight:400;line-height:22px}.p-image-upload .p-image-list-fail:hover .p-delete-icon,.p-image-upload .p-image-list-pending:hover .p-delete-icon{opacity:1}.p-image-upload .p-image-list-pending .p-list-label{color:#8b949e;display:inline-block;font-size:14px;font-weight:400;line-height:22px;margin-top:36px}.p-image-upload .p-image-list-pending .p-progress-bar{background:#e1e5eb;border-radius:2px;height:4px;margin-top:8px;width:calc(100% - 16px)}.p-image-upload .p-image-list-pending .p-progress-bar .p-progress-rate{background:#246fe5;border-radius:2px;height:4px;transition:width 2s;width:0}.p-image-upload .p-image-modal{background:#fff;height:100%;left:0;position:fixed;top:0;width:100%;z-index:7000}.p-image-upload .p-image-modal .p-image-modal-back{background:#626c78;height:calc(100% - 56px);opacity:.5;position:fixed;top:56px;width:100%}.p-image-upload .p-image-modal .p-image-header{align-items:center;background:#f7f9fa;display:flex;height:56px;justify-content:flex-end;padding-left:32px;padding-right:32px;width:100%}.p-image-upload .p-image-modal .p-image-header span{font-size:14px;line-height:22px}.p-image-upload .p-image-modal .p-image-header div{align-items:center;cursor:pointer;display:flex;margin-left:24px}.p-image-upload .p-image-modal .p-image-header .p-size-box svg{height:16px;width:16px}.p-image-upload .p-image-modal .p-image-header .p-size-box svg circle,.p-image-upload .p-image-modal .p-image-header .p-size-box svg rect,.p-image-upload .p-image-modal .p-image-header .p-size-box svg>g>path{transition:all .36s}.p-image-upload .p-image-modal .p-image-header .p-size-box:not(.disabled):hover{color:#246fe5}.p-image-upload .p-image-modal .p-image-header .p-size-box:not(.disabled):hover svg path{fill:#246fe5}.p-image-upload .p-image-modal .p-image-header .p-size-box:not(.disabled):hover svg path:last-child{fill:none;stroke:#246fe5}.p-image-upload .p-image-modal .p-image-header .p-size-box:not(.disabled):hover svg circle,.p-image-upload .p-image-modal .p-image-header .p-size-box:not(.disabled):hover svg rect{fill:#246fe5}.p-image-upload .p-image-modal .p-image-header .p-size-box.disabled{cursor:not-allowed}.p-image-upload .p-image-modal .p-image-header .p-size-box.disabled .p-size-label{color:#c4c9cf}.p-image-upload .p-image-modal .p-image-header .p-size-box.disabled svg path{fill:#c4c9cf}.p-image-upload .p-image-modal .p-image-header .p-size-box.disabled svg path:last-child{fill:none;stroke:#c4c9cf}.p-image-upload .p-image-modal .p-image-header .p-size-box .p-size-label{display:inline-block;margin-left:4px;transition:all .36s}.p-image-upload .p-image-modal .p-image-header .p-download-box.disabled{cursor:not-allowed}.p-image-upload .p-image-modal .p-image-header .p-download-box.disabled .p-size-label{color:#c4c9cf}.p-image-upload .p-image-modal .p-image-header .p-download-box.disabled svg path{fill:#c4c9cf}.p-image-upload .p-image-modal .p-image-header .p-download-box .p-size-label{display:inline-block;margin-left:4px;transition:all .36s}.p-image-upload .p-image-modal .p-image-header .p-download-box svg{height:16px;width:16px}.p-image-upload .p-image-modal .p-image-header .p-download-box svg path{transition:all .36s}.p-image-upload .p-image-modal .p-image-header .p-download-box:not(.disabled):hover{color:#246fe5}.p-image-upload .p-image-modal .p-image-header .p-download-box:not(.disabled):hover svg path{fill:#246fe5}.p-image-upload .p-image-modal .p-image-header .p-close-box{position:relative}.p-image-upload .p-image-modal .p-image-header .p-close-box svg{height:16px;width:16px}.p-image-upload .p-image-modal .p-image-header .p-close-box svg path,.p-image-upload .p-image-modal .p-image-header .p-close-box svg rect{transition:all .36s}.p-image-upload .p-image-modal .p-image-header .p-close-box:before{background:#c4c9cf;content:"";height:22px;left:-12px;position:absolute;width:1px}.p-image-upload .p-image-modal .p-image-header .p-close-box:hover svg path,.p-image-upload .p-image-modal .p-image-header .p-close-box:hover svg rect{fill:#246fe5}.p-image-upload .p-image-modal .p-image-content{align-items:center;display:flex;height:calc(100% - 56px);justify-content:space-between;padding-left:32px;padding-right:32px;position:relative;width:100%}.p-image-upload .p-image-modal .p-image-content .p-image-box{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.p-image-upload .p-image-modal .p-image-content .p-image-box .p-image-box-fail-svg{transform:scale(3)}.p-image-upload .p-image-modal .p-image-content .p-image-box .p-big-image{cursor:move;position:relative;user-select:none;width:100%}.p-image-upload .p-image-modal .p-image-content .p-control{align-items:center;background:#f7f9fa;border:1px solid #f7f9fa;border-radius:20px;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;transition:all 1s;width:40px;z-index:1000}.p-image-upload .p-image-modal .p-image-content .p-control svg{height:20px;width:20px}.p-image-upload .p-image-modal .p-image-content .p-control:hover svg path{stroke:#246fe5}.p-image-upload .p-image-modal .p-image-content .p-control-right{right:32px;transform:rotate(180deg)}