diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 171fab38..e195013b 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -58,11 +58,11 @@
       <div class="row" v-if="gradient.type === 'linear'">
         <div style="flex: 2;">渐变角度：</div>
         <Slider
+          class="slider"
           :min="0"
           :max="360"
           :step="15"
           :value="gradient.rotate"
-          style="flex: 3;"
           @change="value => updateGradient({ rotate: value })" 
         />
       </div>
@@ -333,4 +333,7 @@ export default defineComponent({
   height: 3px;
   margin-top: 1px;
 }
+.slider {
+  flex: 3;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index 435521f4..ad11f397 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -83,11 +83,11 @@
       <div class="row" v-if="background.gradientType === 'linear'">
         <div style="flex: 2;">渐变角度：</div>
         <Slider
+          class="slider"
           :min="0"
           :max="360"
           :step="15"
           :value="background.gradientRotate"
-          style="flex: 3;"
           @change="value => updateBackground({ gradientRotate: value })" 
         />
       </div>
@@ -459,4 +459,7 @@ export default defineComponent({
     margin-top: 5px;
   }
 }
+.slider {
+  flex: 3;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index 6494af3d..eff4e90a 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -10,34 +10,34 @@
       <div class="row">
         <div style="flex: 2;">水平阴影：</div>
         <Slider 
+          class="slider"
           :min="0" 
           :max="10" 
           :step="1" 
           :value="shadow.h" 
-          @change="value => updateShadow({ h: value })" 
-          style="flex: 3;" 
+          @change="value => updateShadow({ h: value })"
         />
       </div>
       <div class="row">
         <div style="flex: 2;">垂直阴影：</div>
         <Slider
+          class="slider"
           :min="0"
           :max="10"
           :step="1"
           :value="shadow.v"
-          @change="value => updateShadow({ v: value })" 
-          style="flex: 3;"
+          @change="value => updateShadow({ v: value })"
         />
       </div>
       <div class="row">
         <div style="flex: 2;">模糊距离：</div>
         <Slider
+          class="slider"
           :min="1"
           :max="20"
           :step="1"
           :value="shadow.blur"
-          @change="value => updateShadow({ blur: value })" 
-          style="flex: 3;"
+          @change="value => updateShadow({ blur: value })"
         />
       </div>
       <div class="row">
@@ -124,4 +124,7 @@ export default defineComponent({
 .switch-wrapper {
   text-align: right;
 }
+.slider {
+  flex: 3;
+}
 </style>
\ No newline at end of file