refactor: ♻️ 上传组件样式类名BEM规范

Former-commit-id: 82c51004bd1f36d95a8e6604f9378b9b06d47e96

src/components/Upload/SingleUpload.vue

@@ -8,8 +8,8 @@
     :before-upload="handleBeforeUpload"
     :http-request="uploadFile"
   >
-    <img v-if="imgUrl" :src="imgUrl" class="single" />
+    <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
-    <el-icon v-else class="single-uploader-icon"><i-ep-plus /></el-icon>
+    <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>
+<style scoped lang="scss">
-.single-uploader .single {
+.single-uploader {
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px var(--el-border-color) solid;
+  border-radius: 6px;
+
+  &:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  &__image {
     display: block;
     width: 178px;
     height: 178px;
   }
-</style>
 
-<style>
+  &___icon {
-.single-uploader .el-upload {
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  transition: var(--el-transition-duration-fast);
-}
-
-.single-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
-
-.el-icon.single-uploader-icon {
     width: 178px;
     height: 178px;
     font-size: 28px;
     color: #8c939d;
     text-align: center;
   }
+}
 </style>