@jdcfe/yep-react/lib/image-picker/style/index.css

一套移动端的React组件库

.Yep-upload-wrapper {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.upload-flex-item {
  position: relative;
  margin-top: 10px;
  margin-right: 10px;
}
.upload-flex-item-img {
  background-size: 100% auto;
}
.upload-flex-item-del {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.3) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAEsAAABLABziOlSAAAAB3RJTUUH3gULCQEnSMFgKwAAAdJJREFUSMed1sFqE1EUxvFfewNWs+gkdGXFRAI+jF241upKreBG3bhpTR9AtLWCC19FEJUW6soHkGK7F5KANkKFupg7MIwzyYwfhCFn5v6/c+7cc5KFQa//Fd+xgR+ijk6ONdGg189/XcE7XFvEIdbwAp2KBU3gnchaw5fQTZKPuIiHuIxP+A3dJDGajJvCd3AXr7EZuklyhoNostHEpAJ+J8KH+BW6SQJn2G9iMgf+HKcQRpOxpiZ14Ucnx0K2OCozuVRlknt2JhxGk3FqMJqMlVRSalIB3ytmnlUb8isamHTwKp6WPWzl4Xm1VOs0ZgWPC9dSeJlCMVCxXW3cx1XcwG28KcLLun9WBflKNnEBj2LsbYxNZ8FhsYYBLGEZ5/GzHGNzFcqChXPexS5uSY/iIe7hivTFT6nu+FADvoP1aLKFD9JmfFDHJMyAdyJ0PZoMpcf0j/TFL9UxCQ3g09z9vEnWJ5/LTMJ/wKtMVstMQl141v6FPslMKgdkqwK+i+2KzIuaxkTgabw+wQiy34MifKhkcOU1p5LVrJLQTZIVvJROxX/g8zRnu/Zb0ra/Gfd824zB1WC7zqWDsb0w6PXf4xue4WfdzMuUOzBt6T+L638BGDnyCusOVvMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDQtMTBUMDM6MTU6NTMrMDg6MDCLJfsyAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA1LTExVDA5OjAxOjM5KzA4OjAw9jWoEgAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAABjdEVYdHN2Zzpjb21tZW50ACBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIG47z/cAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADEzNSTWDHwAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgAMTM1tydcIQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxMzk5NzcwMDk5xXSLkQAAABF0RVh0VGh1bWI6OlNpemUAMjgzMEIeliCmAAAAX3RFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL3NyYy8xMTYyMy8xMTYyMzI4LnBuZ8nZwRAAAAAASUVORK5CYII=") no-repeat center center;
  background-size: 50% 50%;
}

.upload-add-picker {
  position: relative;
  overflow: hidden;
  border: solid 1PX #ddd;
}
.upload-add-picker input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 9;
}
.upload-add-picker:before {
  width: 1PX;
  height: 50px;
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ccc;
}
.upload-add-picker:after {
  height: 1PX;
  width: 50px;
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ccc;
}