部分btn样式

src/components/Test.vue

@@ -18,8 +18,8 @@
         <div
           :class="
             settingStore.chargingPumpRPM > 0
-              ? 'open success style-btn'
-              : 'open style-btn'
+              ? 'open success style-btn mg'
+              : 'open style-btn mg'
           "
           @click="setAddLiquidConfig(1)"
         >
@@ -35,13 +35,10 @@
         >
           反转
         </div>
-        <div
-          class="open style-btn"
-          @click="setAddLiquidConfig(3)"
-          style="margin-right: 0"
-        >
-          关闭
-        </div>
+      </div>
+      <div class="btn_wrap">
+        <div class="open style-btn mg" @click="setAddLiquidConfig(1)">打开</div>
+        <div class="open style-btn" @click="setAddLiquidConfig(3)">关闭</div>
       </div>
     </div>
     <div class="common_set switch_wrap">
@@ -62,8 +59,8 @@
         <div
           :class="
             settingStore.sprinklerPumpRPM > 0
-              ? 'open success style-btn'
-              : 'open style-btn'
+              ? 'open success style-btn mg'
+              : 'open style-btn mg'
           "
           @click="setAddLiquidConfig(2)"
         >
@@ -79,13 +76,10 @@
         >
           反转
         </div>
-        <div
-          class="open style-btn"
-          @click="setAddLiquidConfig(4)"
-          style="margin-right: 0"
-        >
-          关闭
-        </div>
+      </div>
+      <div class="btn_wrap">
+        <div class="open style-btn mg" @click="setAddLiquidConfig(2)">打开</div>
+        <div class="open style-btn" @click="setAddLiquidConfig(4)">关闭</div>
       </div>
     </div>
     <div class="common_set switch_wrap">
@@ -101,7 +95,7 @@
       <div class="btn_wrap">
         <div
           :class="
-            testStore.airCompressor ? 'close style-btn' : 'open style-btn'
+            testStore.airCompressor ? 'close style-btn mg' : 'open style-btn mg'
           "
           @click="changeAirStatus(1)"
         >
@@ -122,13 +116,15 @@
       <p class="num">{{ testStore?.airBlowerObj?.currentVal }} A</p>
       <div class="btn_wrap">
         <div
-          :class="testStore.draughtFan ? 'close style-btn' : 'open style-btn'"
+          :class="
+            testStore.draughtFan ? 'close style-btn mg' : 'open style-btn mg'
+          "
           @click="changeDraughtStatus(1)"
         >
           打开
         </div>
         <div
-          :class="!testStore.draughtFan ? 'close style-btn' : 'open style-btn'"
+          :class="!testStore.draughtFan ? 'close style-btn ' : 'open style-btn'"
           @click="changeDraughtStatus(2)"
         >
           关闭
@@ -140,7 +136,9 @@
       <p class="num">{{ testStore?.heatingStripObj?.currentVal }} A</p>
       <div class="btn_wrap">
         <div
-          :class="testStore.heatingStrip ? 'close style-btn' : 'open style-btn'"
+          :class="
+            testStore.heatingStrip ? 'close style-btn mg' : 'open style-btn mg'
+          "
           @click="changeHeatingStatus(1)"
         >
           打开
@@ -534,11 +532,16 @@ const changeDraughtStatus = flag => {
     .btn_wrap {
       display: flex;
       align-items: center;
+      background: #ddd;
+      padding: 6px;
+      border-radius: 30px;
+      .mg {
+        margin-right: 6px;
+      }
       .open {
-        margin-right: 10px;
-        width: 87px;
-        height: 45px;
-        border-radius: 23px;
+        width: 67px;
+        height: 35px;
+        border-radius: 18px;
         background: #06518b;
         display: flex;
         align-items: center;
@@ -553,9 +556,9 @@ const changeDraughtStatus = flag => {
         background: #1ad66e;
       }
       .close {
-        width: 87px;
-        height: 45px;
-        border-radius: 23px;
+        width: 67px;
+        height: 35px;
+        border-radius: 18px;
         background: #ffffff;
         display: flex;
         align-items: center;