vue2-vant2-components/lib/vvc-upload/style/style.css

基于 vue2 和 vant2 开发的移动端表格组件

.vvc-upload{width:100%;font-size:10px}.vvc-upload_text .vvc-upload_text_text{display:inline-block}.vvc-upload_text .vvc-upload_text_text .van-button{display:block}.vvc-upload_text .vvc-upload_text_tip{font-size:12px;margin:8px 0}.vvc-upload_text .vvc-upload_text_fileList{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item{padding:0 2px}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_content{height:32px;font-size:13px;line-height:1;box-sizing:border-box;display:flex;align-items:center;position:relative;padding-right:40px}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_content .vvc-upload_text_fileList_item_content_prefix{font-size:18px;flex-shrink:0;margin-right:5px}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_content .vvc-upload_text_fileList_item_content_name{height:100%;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_content .vvc-upload_text_fileList_item_content_suffix{top:50%;right:10px;position:absolute;transform:translateY(-50%)}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_content .vvc-upload_text_fileList_item_content_suffix :not(.van-icon){font-size:12px}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_progress{width:100%;height:2px;bottom:0;background-color:#ebeef5;position:relative;border-radius:10px;box-sizing:border-box;margin-bottom:4px;padding:0 3px}.vvc-upload_text .vvc-upload_text_fileList .vvc-upload_text_fileList_item .vvc-upload_text_fileList_item_progress .vvc-upload_text_fileList_item_progress_content{width:0;height:100%;top:0;left:0;background-color:#409eff;position:absolute}.vvc-upload_text .vvc-upload_text_fileList .van-swipe-cell__right .van-button{height:100%;line-height:1}.vvc-upload_picture .vvc-upload_picture_text{display:inline-block}.vvc-upload_picture .vvc-upload_picture_text .van-button{display:block}.vvc-upload_picture .vvc-upload_picture_tip{font-size:12px;margin:8px 0}.vvc-upload_picture .vvc-upload_picture_fileList{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item{position:relative;overflow:hidden}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item:not(:last-child){margin-bottom:10px}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content{font-size:13px;line-height:1;box-sizing:border-box;display:flex;border:1px solid #c0ccda;border-radius:5px;overflow:hidden;padding:8px}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_image{width:50px;height:50px;font-size:18px;flex-shrink:0}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_image .van-image__error{font-size:50px;background-color:transparent}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_content{width:20%;line-height:1.2;display:flex;flex-direction:column;flex-grow:1;justify-content:center}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_content .vvc-upload_picture_fileList_item_content_content_name{width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding-left:10px}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_content .vvc-upload_picture_fileList_item_content_content_progress{height:2px;bottom:0;background-color:#ebeef5;position:relative;border-radius:10px;box-sizing:border-box;margin:4px 8px 0}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_content .vvc-upload_picture_fileList_item_content_content_progress .vvc-upload_picture_fileList_item_content_content_progress_rate{width:0;height:100%;top:0;left:0;background-color:#409eff;position:absolute}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_content .vvc-upload_picture_fileList_item_content_content_progress .vvc-upload_picture_fileList_item_content_content_progress_message{right:0;bottom:3px;font-size:10px;transform:scale(.8);transform-origin:right;position:absolute}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content_delete{z-index:3;width:70px;height:40px;top:-41%;right:-16%;color:#fff;text-align:center;transform:rotate(45deg) scale(.5);transform-origin:0;box-shadow:0 1px 1px #ccc;background-color:rgba(0,0,0,.7);position:absolute}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item .vvc-upload_picture_fileList_item_content_delete .van-icon{right:42%;bottom:8%;font-size:18px;transform:rotate(-45deg);position:absolute}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item.is-error .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_image{color:#f56c6c;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:10px;background-color:#f7f8fa}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item.is-error .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_image .van-icon{font-size:17px;margin-bottom:5px}.vvc-upload_picture .vvc-upload_picture_fileList .vvc-upload_picture_fileList_item.is-error .vvc-upload_picture_fileList_item_content .vvc-upload_picture_fileList_item_content_delete{background-color:hsla(0,87%,69%,.7)}.vvc-upload_pictureCard{display:flex;flex-wrap:wrap}.vvc-upload_pictureCard .vvc-upload_pictureCard_item{width:78px;margin-right:8px;margin-bottom:8px}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content{width:78px;height:78px;cursor:pointer;position:relative;overflow:hidden}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .van-image{width:100%;height:100%;display:block}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .van-image .van-icon-description{font-size:40px}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_delete{z-index:3;width:14px;height:14px;top:0;right:0;color:#fff;font-size:16px;background-color:rgba(0,0,0,.7);border-radius:0 0 0 100%;position:absolute}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_delete .van-icon{top:50%;left:50%;color:inherit;position:absolute;transform:translate(-40%,-54%) scale(.5);transform-origin:center}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_state{z-index:2;width:100%;height:100%;top:0;left:0;color:#fff;font-size:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;background-color:rgba(50,50,51,.88)}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_state .van-icon{font-size:2.2em}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_state .vvc-upload_pictureCard_item_content_state_message{margin-top:8px}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_state.vvc-upload_pictureCard_item_content_state--loading .van-circle{width:5em;height:5em;display:block}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload_pictureCard_item_content .vvc-upload_pictureCard_item_content_state.vvc-upload_pictureCard_item_content_state--loading .van-circle .van-circle__text{color:inherit}.vvc-upload_pictureCard .vvc-upload_pictureCard_item .vvc-upload-picture_item_fileName{text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;box-sizing:border-box;text-overflow:ellipsis;margin:5px 2px}.vvc-upload_pictureCard .vvc-upload_pictureCard_upload{margin-bottom:8px}.vvc-upload_pictureCard .vvc-upload_pictureCard_upload .vvc-upload_pictureCard_upload_content{width:78px;height:78px;cursor:pointer;background-color:#f7f8fa;display:flex;justify-content:center;align-items:center}.vvc-upload_pictureCard .vvc-upload_pictureCard_upload .vvc-upload_pictureCard_upload_content .vvc-upload_pictureCard_upload_icon{color:#dcdee0;font-size:25px}