fix

src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue

@@ -453,10 +453,10 @@ watch(
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 15px;
+  gap: 1.5rem;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 5px;
-  padding: 15px 3px;
+  padding: 1.5rem 3px;
   box-shadow:
     0 4px 20px rgba(0, 0, 0, 0.1),
     0 0 0 1px rgba(0, 0, 0, 0.05);
@@ -478,8 +478,8 @@ watch(
 
 // 笔刷大小预览相关样式
 .brush-preview-container {
-  width: 110px;
-  height: 110px;
+  width: 11rem;
+  height: 11rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -492,12 +492,14 @@ watch(
 .brush-size-preview {
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  max-width: 100%;
+  max-height: 100%;
 }
 
 // 透明度预览相关样式
 .opacity-preview {
-  width: 110px;
-  height: 110px;
+  width: 11rem;
+  height: 11rem;
   border-radius: 6px;
   overflow: hidden;
   position: relative;
@@ -550,14 +552,14 @@ watch(
 }
 
 .control-btn {
-  width: 24px;
-  height: 24px;
+  width: 2.4rem;
+  height: 2.4rem;
   border: none;
   border-radius: 4px;
   background: #f0f0f0;
   color: #333;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 1.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -602,8 +604,8 @@ watch(
 }
 
 .current-color {
-  width: 32px;
-  height: 32px;
+  width: 3.2rem;
+  height: 3.2rem;
   border-radius: 8px;
   border: 2px solid #fff;
   box-shadow:
@@ -638,7 +640,7 @@ watch(
 }
 
 .tooltip-title {
-  font-size: 16px;
+  font-size: 1.6rem;
   color: #333;
   font-weight: 600;
 }
@@ -647,12 +649,12 @@ watch(
   position: absolute;
   right: 3px;
   top: 3px;
-  width: 20px;
-  height: 20px;
+  width: 2rem;
+  height: 2rem;
   border: none;
   background: transparent;
   color: #999;
-  font-size: 16px;
+  font-size: 1.6rem;
   cursor: pointer;
   display: flex;
   align-items: center;

src/component/Canvas/CanvasEditor/components/VerticalSlider.vue

@@ -516,8 +516,8 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 15px;
-  height: 150px;
+  gap: 1.5rem;
+  height: 15rem;
   position: relative;
   //   margin-top: 8px;
   //   margin-bottom: 0px;
@@ -525,7 +525,7 @@ onBeforeUnmount(() => {
 
 .slider-track {
   position: relative;
-  width: 32px;
+  width: 3.2rem;
   height: 100%;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 4px;
@@ -544,7 +544,7 @@ onBeforeUnmount(() => {
 .slider-thumb {
   position: absolute;
   width: 100%;
-  height: 16px;
+  height: 1.6rem;
   background: #fff;
   //   border: 1px solid #2196f3;
   border-radius: 3px;
@@ -560,13 +560,13 @@ onBeforeUnmount(() => {
 // 添加iPad和移动设备的专有样式
 @media (pointer: coarse) {
   .slider-thumb {
-    height: 20px; // 在触摸设备上增加滑块尺寸，更容易点击
-    border-radius: 4px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5); // 更明显的阴影
+    height: 2rem; // 在触摸设备上增加滑块尺寸，更容易点击
+    border-radius: .4rem;
+    box-shadow: 0 0 .6rem rgba(0, 0, 0, 0.5); // 更明显的阴影
   }
 
   .slider-track {
-    width: 40px; // 在触摸设备上增加宽度
+    width: 4rem; // 在触摸设备上增加宽度
   }
 
   .slider-notch {
@@ -603,23 +603,23 @@ onBeforeUnmount(() => {
 
 .slider-tooltip {
   position: absolute;
-  left: calc(100% + 15px);
+  left: calc(100% + 1.5rem);
   background: rgba(255, 255, 255, 0.95);
   border-radius: 10px;
-  padding: 10px;
+  padding: 1rem;
   box-shadow:
     0 3px 12px rgba(0, 0, 0, 0.1),
     0 0 0 1px rgba(0, 0, 0, 0.05);
-  min-width: 120px;
+  min-width: 12rem;
   z-index: 10;
 
   &::before {
     content: "";
     position: absolute;
-    left: -8px;
+    left: -.8rem;
     top: 50%;
     transform: translateY(-50%);
-    border-width: 8px 8px 8px 0;
+    border-width: .8rem .8rem .8rem 0;
     border-style: solid;
     border-color: transparent rgba(255, 255, 255, 0.95) transparent transparent;
   }