feat(Uploader): update delete icon style (#3385)

This commit is contained in:
neverland 2020-07-14 19:50:34 +08:00 committed by GitHub
parent 20d1f2ede0
commit 3a3999ccaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 14 deletions

View File

@ -575,9 +575,9 @@
@uploader-text-font-size: @font-size-sm; @uploader-text-font-size: @font-size-sm;
@uploader-upload-background-color: @gray-1; @uploader-upload-background-color: @gray-1;
@uploader-upload-active-color: @active-color; @uploader-upload-active-color: @active-color;
@uploader-delete-color: @gray-6; @uploader-delete-color: @white;
@uploader-delete-icon-size: 18px; @uploader-delete-icon-size: 14px;
@uploader-delete-background-color: @white; @uploader-delete-background-color: rgba(0, 0, 0, 0.7);
@uploader-file-background-color: @background-color; @uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px; @uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-7; @uploader-file-icon-color: @gray-7;

View File

@ -66,17 +66,19 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
z-index: 1; width: @uploader-delete-icon-size;
display: flex; height: @uploader-delete-icon-size;
padding: 10px; background-color: @uploader-delete-background-color;
border-radius: 50%; border-radius: 0 0 0 12px;
transform: translate(50%, -50%);
&__icon { &-icon {
position: absolute;
top: -2px;
right: -2px;
color: #fff;
color: @uploader-delete-color; color: @uploader-delete-color;
font-size: @uploader-delete-icon-size; font-size: 16px;
background-color: @uploader-delete-background-color; transform: scale(0.5);
border-radius: 50%;
} }
} }
} }

View File

@ -43,8 +43,8 @@
class="van-uploader__preview-delete" class="van-uploader__preview-delete"
catch:tap="deleteItem" catch:tap="deleteItem"
> >
<van-icon name="clear" class="van-uploader__preview-delete__icon" /> <van-icon name="cross" class="van-uploader__preview-delete-icon" />
</view> </view>
</view> </view>
<!-- 上传样式 --> <!-- 上传样式 -->