@zhangqingcq/plug-r-qw/src/style/components/uploadGroup.less

A JS lib base on Vue and View-design, you can achieve some complex functions with simple code after install this lib.

/**
 * created 2020.06.30
 * @author ricky zhangqingcq@foxmail.com
 */

@import '../common/color';

.ivu-form-item-error {
	.ivu-upload {
		.ivu-btn {
			border-color: @errorColor;

			.ivu-icon {
				color: @errorColor;
			}
		}
	}
}

.previewBoxM {
	margin-top: 10px;

	.previewImg {
		display: inline-block;
		position: relative;
		height: 100px;
		max-width: 100%;
		overflow: hidden;
		background: #eee;
		margin-right: 4px;

		&:hover {
			.deleteModal {
				opacity: 1;
			}
		}

		&.previewLoading {
			min-width: 100px;
		}

		> img {
			height: 100%;
		}

		.imgLoading {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.1);
		}

		.deleteModal {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.5);
			opacity: 0;

			.previewExpand,
			.previewDelete {
				cursor: pointer;
				&:hover {
					color: @warningColor;
				}
			}
		}
	}
}

.customFileListM {
	margin-top: 10px;

	.customFileListItem {
		padding: 2px 4px;
		border-radius: 2px;
		word-break: break-all;
		line-height: 1.4em;
		position: relative;

		&:hover {
			background-color: @listHoverBg;

			.btBoxJ {
				opacity: 1;
				.listBtH {
					background-color: @listHoverBg;
				}
			}

			.upNameT {
				color: @primary;
			}
		}

		.fileTypeIco {
			margin-right: 6px;
		}

		.listLoading {
			height: 15px;
			display: flex;
			align-items: center;
			[data-loader='circle-side'] {
				width: 15px;
				height: 15px;
			}
		}

		.upNameT {
			cursor: pointer;
			padding-left: 2px;
		}

		.btBoxJ {
			opacity: 0;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			height: 100%;
			padding-right: 3px;

			.listBtH {
				cursor: pointer;
				text-align: center;
				color: #999;
				margin-left: 6px;

				&:hover {
					color: @warningColor;
				}
			}
		}
	}
}