UNPKG

tdesign-mobile-vue

Version:
179 lines (151 loc) 3.9 kB
// 组件允许单个组件打包,因此默认引入公共基础样式 -- @import "../../base.less"; @import "./_var.less"; .horizontal-vertical-center-with-flex() { display: flex; align-items: center; justify-content: center; } .fill-with-position-absolute() { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .@{prefix}-upload { .@{prefix}-icon { font-size: @upload-icon-size; flex-shrink: 0; } .@{prefix}-icon-check-circle-filled { color: @upload-icon-check-circle-filled-color; } .@{prefix}-icon-error-circle-filled { color: @upload-icon-error-circle-filled-color; } .@{prefix}-icon-loading { color: @upload-icon-loading-color; } .@{prefix}-icon-add { color: @upload-icon-add-color; } } // 照片墙 .@{prefix}-upload { &__card { font-size: @upload-card-font-size; line-height: @upload-card-line-height; overflow: hidden; width: 100%; padding: @upload-card-padding; display: flex; flex-wrap: wrap; &-item { margin: @upload-card-item-margin; padding: @upload-card-item-padding; float: left; cursor: pointer; box-sizing: border-box; list-style: none; display: flex; &::after { content: ""; display: block; } &.@{prefix}-is--error { & .@{prefix}-icon-warning_fill { color: @upload-card-item-error-icon-warning-color; margin-bottom: @upload-card-item-error-icon-warning-margin-bottom; } & .@{prefix}-upload__card-status { color: @upload-card-item-status-color; } } } & .@{prefix}-icon-loading { margin-bottom: @upload-card-icon-loading-margin-bottom; } &-content { position: relative; width: @upload-img-size; height: @upload-img-size; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: @upload-card-container-bg-color; border: @upload-card-contariner-border; } &-container { width: (@upload-img-size - 2); height: (@upload-img-size - 2); display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: @upload-card-container-bg-color; > .@{prefix}-icon, .@{prefix}-loading { font-size: @upload-icon-size-large; // margin-bottom: @upload-card-container-icon-add-margin-bottom; } > p { color: @text-color-placeholder; } } &-status-wrap { text-align: center; > svg { margin-bottom: @upload-card-status-wrap-svg-margin-bottom; } .@{prefix}-icon, .@{prefix}-loading { font-size: @upload-icon-size-middle; } } &-image { max-width: 100%; max-height: 100%; } &-status { color: @upload-card-status-color; font-size: @upload-card-status-font-size; } &-mask { background-color: @upload-card-mask-bg-color; color: @upload-card-mask-color; // transition: opacity .5s ease-in-out; // will-change: transform; // opacity: 0; .horizontal-vertical-center-with-flex(); .fill-with-position-absolute(); } &-delete-item { position: absolute; right: 0; top: 0; bottom: 0; display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; z-index: 1; background-color: @upload-card-mask-bg-color; width: @font-size-l; height: @font-size-l; .close-icon { color: @bg-color-container; width: @font-size-l; height: @font-size-l; } } &-mask-item { > .@{prefix}-icon { cursor: pointer; font-size: @upload-icon-size; } } } }