相册上传
预览效果
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-photo-upload">
    <div class="ul-photo-upload__item" data-repeat="3">
        <div class="ul-photo-upload__delete"><i class="fas fa-times"></i></div>
        <div class="ul-photo-upload__main ul-demo-view"></div>
    </div>
    <div class="ul-photo-upload__item is-button"><i class="fas fa-plus"></i></div>
</div>
.ul-photo-upload {
  display: flex;
  flex-wrap: wrap;
  gap: $space-md;

  &__item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: $radius-md;
    background-color: $color-bg;
    border: 1px solid $color-border;
    box-sizing: border-box;

    &.is-button {
      cursor: pointer;
      border-style: dashed;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $color-text-placeholder;

      .fas {
        font-size: 24px;
      }
    }

  }

  &__main {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
  }
  

  &__delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: $color-danger-base;
    color: $color-white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
  }
}
.ul-photo-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ul-photo-upload__item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background-color: var(--ul-color-bg);
  border: 1px solid var(--ul-color-border);
  box-sizing: border-box;
}
.ul-photo-upload__item.is-button {
  cursor: pointer;
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ul-color-text-placeholder);
}
.ul-photo-upload__item.is-button .fas {
  font-size: 24px;
}
.ul-photo-upload__main {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}
.ul-photo-upload__delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: var(--ul-color-danger-base);
  color: var(--ul-color-white);
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  cursor: pointer;
  z-index: 1;
}
<view class="ul-photo-upload">
    <view class="ul-photo-upload__item" data-repeat="3">
        <view class="ul-photo-upload__delete"><i class="fas fa-times"></i></view>
        <view class="ul-photo-upload__main ul-demo-view"></view>
    </view>
    <view class="ul-photo-upload__item is-button"><i class="fas fa-plus"></i></view>
</view>