diff --git a/packages/common/style/var.less b/packages/common/style/var.less index d2ae76be..9f97cdb2 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -575,9 +575,9 @@ @uploader-text-font-size: @font-size-sm; @uploader-upload-background-color: @gray-1; @uploader-upload-active-color: @active-color; -@uploader-delete-color: @gray-6; -@uploader-delete-icon-size: 18px; -@uploader-delete-background-color: @white; +@uploader-delete-color: @white; +@uploader-delete-icon-size: 14px; +@uploader-delete-background-color: rgba(0, 0, 0, 0.7); @uploader-file-background-color: @background-color; @uploader-file-icon-size: 20px; @uploader-file-icon-color: @gray-7; diff --git a/packages/uploader/index.less b/packages/uploader/index.less index 2e99bf10..3b3e72d6 100644 --- a/packages/uploader/index.less +++ b/packages/uploader/index.less @@ -66,17 +66,19 @@ position: absolute; top: 0; right: 0; - z-index: 1; - display: flex; - padding: 10px; - border-radius: 50%; - transform: translate(50%, -50%); + width: @uploader-delete-icon-size; + height: @uploader-delete-icon-size; + background-color: @uploader-delete-background-color; + border-radius: 0 0 0 12px; - &__icon { + &-icon { + position: absolute; + top: -2px; + right: -2px; + color: #fff; color: @uploader-delete-color; - font-size: @uploader-delete-icon-size; - background-color: @uploader-delete-background-color; - border-radius: 50%; + font-size: 16px; + transform: scale(0.5); } } } diff --git a/packages/uploader/index.wxml b/packages/uploader/index.wxml index a918efe8..e01da80d 100644 --- a/packages/uploader/index.wxml +++ b/packages/uploader/index.wxml @@ -43,8 +43,8 @@ class="van-uploader__preview-delete" catch:tap="deleteItem" > - - + +