From 73bddd119eab1e7b0df0e1fab53da690b7306170 Mon Sep 17 00:00:00 2001
From: lrl <252048765@qq.com>
Date: Tue, 5 Aug 2025 15:34:25 +0800
Subject: [PATCH] =?UTF-8?q?style:=20(web-ele)=E4=BC=98=E5=8C=96=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-调整图像上传组件的样式，优化上传区域和处理按钮的布局
- 改进魔方编辑器组件的样式，统一边框和对齐方式
-统一垂直按钮组组件的样式，修复按钮圆角问题
---
 .../components/magic-cube-editor/index.vue    | 25 +++++------
 .../src/components/upload/image-upload.vue    | 42 ++++++++++---------
 .../vertical-button-group/index.vue           |  2 +-
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/apps/web-ele/src/components/magic-cube-editor/index.vue b/apps/web-ele/src/components/magic-cube-editor/index.vue
index a7120ee11..52bdf385b 100644
--- a/apps/web-ele/src/components/magic-cube-editor/index.vue
+++ b/apps/web-ele/src/components/magic-cube-editor/index.vue
@@ -259,11 +259,12 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
   border-collapse: collapse;
 
   .cube {
-    border: 1px solid var(--el-border-color);
-    text-align: center;
-    color: var(--el-text-color-secondary);
-    cursor: pointer;
     box-sizing: border-box;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--el-border-color);
+
     &.active {
       background: var(--el-color-primary-light-9);
     }
@@ -271,29 +272,29 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 
   .hot-area {
     position: absolute;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--el-color-primary);
-    background: var(--el-color-primary-light-8);
     color: var(--el-color-primary);
-    box-sizing: border-box;
+    cursor: pointer;
     border-spacing: 0;
     border-collapse: collapse;
-    cursor: pointer;
+    background: var(--el-color-primary-light-8);
+    border: 1px solid var(--el-color-primary);
 
     .btn-delete {
-      z-index: 1;
       position: absolute;
       top: -8px;
       right: -8px;
-      height: 16px;
-      width: 16px;
+      z-index: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
+      width: 16px;
+      height: 16px;
       background-color: #fff;
+      border-radius: 50%;
     }
   }
 }
diff --git a/apps/web-ele/src/components/upload/image-upload.vue b/apps/web-ele/src/components/upload/image-upload.vue
index c257b1faf..4fe8875af 100644
--- a/apps/web-ele/src/components/upload/image-upload.vue
+++ b/apps/web-ele/src/components/upload/image-upload.vue
@@ -326,87 +326,91 @@ const triggerEdit = () => {
 
 <style lang="scss" scoped>
 .upload-box {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px dashed var(--el-border-color-darker);
-  position: relative;
   overflow: hidden;
   background: #fafafa;
+  border: 1px dashed var(--el-border-color-darker);
   transition: border-color 0.2s;
 
   .upload {
-    width: 100% !important;
-    height: 100% !important;
-    border: none !important;
-    background: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100% !important;
+    height: 100% !important;
+    background: transparent;
+    border: none !important;
   }
 
   .upload-content {
-    width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
     cursor: pointer;
   }
 
   .upload-image-wrapper {
-    width: 100%;
-    height: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
-    border-radius: inherit;
     background: #fff;
+    border-radius: inherit;
   }
 
   .upload-image {
+    display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: inherit;
-    display: block;
   }
 
   .upload-handle {
     position: absolute;
     top: 0;
     right: 0;
-    width: 100%;
-    height: 100%;
+    z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    background: rgb(0 0 0 / 50%);
     opacity: 0;
     transition: opacity 0.2s;
-    cursor: pointer;
-    z-index: 2;
+
     &:hover {
       opacity: 1;
     }
+
     .handle-icon {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      color: #fff;
       margin: 0 8px;
       font-size: 18px;
+      color: #fff;
+
       span {
-        font-size: 12px;
         margin-top: 2px;
+        font-size: 12px;
       }
     }
   }
+
   .upload-image-wrapper:hover .upload-handle {
     opacity: 1;
   }
diff --git a/apps/web-ele/src/components/vertical-button-group/index.vue b/apps/web-ele/src/components/vertical-button-group/index.vue
index 19a21df1d..d7757ec77 100644
--- a/apps/web-ele/src/components/vertical-button-group/index.vue
+++ b/apps/web-ele/src/components/vertical-button-group/index.vue
@@ -27,9 +27,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
 
 .el-button-group > :deep(.el-button:last-child) {
   border-top-color: var(--el-button-divide-border-color);
+  border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--el-border-radius-base);
-  border-top-left-radius: 0;
 }
 
 .el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) {