<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>