fupin/wux/upload/index.wxss

.wux-upload {
  position: relative;
  display: block
}
.wux-upload::after,
.wux-upload::before {
  display: table;
  content: " "
}
.wux-upload::after {
  clear: both
}
.wux-upload--disabled {
  opacity: .3
}
.wux-upload--picture-card .wux-upload__select {
  width: 266rpx;
  height: 150rpx;
  border: 1PX dashed #1677ff;
  border-radius: 8rpx;
  margin: 0 16rpx 16rpx 0;
  background-color: #fafafa;
  transition: border-color .3s ease;
  box-sizing: border-box;
  float: left
}
.wux-upload--picture-card .wux-upload__button {
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  vertical-align: middle;
  /* padding: 8rpx; */
  box-sizing: border-box
}
.wux-upload--picture-card .wux-upload__button image {
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden
}
.wux-upload--picture-card .wux-upload__files {
  position: relative;
  display: block;
  float: left
}
.wux-upload--picture-card .wux-upload__files::after,
.wux-upload--picture-card .wux-upload__files::before {
  display: table;
  content: " "
}
.wux-upload--picture-card .wux-upload__files::after {
  clear: both
}
.wux-upload--picture-card .wux-upload__file {
  width: 266rpx;
  height: 150rpx;
  float: left;
  margin: 0 16rpx 16rpx 0;
  padding: 8rpx;
  border-radius: 8rpx;
  border: 1PX solid #1677ff;
  position: relative;
  box-sizing: border-box
}
.wux-upload--picture-card .wux-upload__file--uploading {
  border-style: dashed
}
.wux-upload--picture-card .wux-upload__file--error {
  border-color: #f5222d
}
.wux-upload--picture-card .wux-upload__thumb {
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden
}
.wux-upload--picture-card .wux-upload__remove {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  right: 12rpx;
  top: 12rpx;
  text-align: right;
  vertical-align: top;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 30rpx auto;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20fill-opacity%3D%22.4%22%20fill%3D%22%23404040%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M11.898%204.101a.345.345%200%200%200-.488%200L8%207.511l-3.411-3.41a.345.345%200%200%200-.488.488l3.411%203.41-3.41%203.412a.345.345%200%200%200%20.488.488L8%208.487l3.411%203.411a.345.345%200%200%200%20.488-.488L8.488%208l3.41-3.412a.344.344%200%200%200%200-.487z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}