From e23b7c0964b0a697aff4308cb317c6285f369a61 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Mon, 28 Aug 2023 22:59:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E7=B1=BB=E5=90=8DBEM?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 82c51004bd1f36d95a8e6604f9378b9b06d47e96
---
 src/components/Upload/SingleUpload.vue | 46 ++++++++++++--------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 4038c72b..631dc28e 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -8,8 +8,8 @@
     :before-upload="handleBeforeUpload"
     :http-request="uploadFile"
   >
-    <img v-if="imgUrl" :src="imgUrl" class="single" />
-    <el-icon v-else class="single-uploader-icon"><i-ep-plus /></el-icon>
+    <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
+    <el-icon v-else class="single-uploader__icon"><i-ep-plus /></el-icon>
   </el-upload>
 </template>
 
@@ -49,33 +49,29 @@ function handleBeforeUpload(file: UploadRawFile) {
 }
 </script>
 
-<style scoped>
-.single-uploader .single {
-  display: block;
-  width: 178px;
-  height: 178px;
-}
-</style>
-
-<style>
-.single-uploader .el-upload {
-  position: relative;
+<style scoped lang="scss">
+.single-uploader {
   overflow: hidden;
   cursor: pointer;
-  border: 1px dashed var(--el-border-color);
+  border: 1px var(--el-border-color) solid;
   border-radius: 6px;
-  transition: var(--el-transition-duration-fast);
-}
 
-.single-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
+  &:hover {
+    border-color: var(--el-color-primary);
+  }
 
-.el-icon.single-uploader-icon {
-  width: 178px;
-  height: 178px;
-  font-size: 28px;
-  color: #8c939d;
-  text-align: center;
+  &__image {
+    display: block;
+    width: 178px;
+    height: 178px;
+  }
+
+  &___icon {
+    width: 178px;
+    height: 178px;
+    font-size: 28px;
+    color: #8c939d;
+    text-align: center;
+  }
 }
 </style>