ball: 调整样式和-+幅度

pages/component/canvas/canvas/ball.uvue

@@ -4,23 +4,20 @@
     <text class="fps">FPS: {{fpsString}}</text>
     <view class="item">
       <text class="item-label">Speed</text>
-      <text class="item-value">{{ballSpeed}}</text>
-      <view class="item-fill"></view>
       <button size="mini" @click="lessClick('speed')">-</button>
+      <text class="item-value">{{ballSpeed}}</text>
       <button size="mini" @click="plusClick('speed')">+</button>
     </view>
     <view class="item">
       <text class="item-label">Layer</text>
-      <text class="item-value">{{ballLayer}}</text>
-      <view class="item-fill"></view>
       <button size="mini" @click="lessClick('layer')">-</button>
+      <text class="item-value">{{ballLayer}}</text>
       <button size="mini" @click="plusClick('layer')">+</button>
     </view>
     <view class="item">
       <text class="item-label">Inlayer</text>
-      <text class="item-value">{{ballInlayer}}</text>
-      <view class="item-fill"></view>
       <button size="mini" @click="lessClick('inLayer')">-</button>
+      <text class="item-value">{{ballInlayer}}</text>
       <button size="mini" @click="plusClick('inLayer')">+</button>
     </view>
   </view>
@@ -204,10 +201,10 @@
       animation!.speed--;
       ballSpeed.value = animation!.speed
     } else if (type == 'layer') {
-      animation!.layer--;
+      animation!.layer -= 5;
       ballLayer.value = animation!.layer
     } else if (type == 'inLayer') {
-      animation!.inLayer--;
+      animation!.inLayer -= 5;
       ballInlayer.value = animation!.inLayer
     }
   }
@@ -217,10 +214,10 @@
       animation!.speed++;
       ballSpeed.value = animation!.speed
     } else if (type == 'layer') {
-      animation!.layer++;
+      animation!.layer += 5;
       ballLayer.value = animation!.layer
     } else if (type == 'inLayer') {
-      animation!.inLayer++;
+      animation!.inLayer += 5;
       ballInlayer.value = animation!.inLayer
     }
   }
@@ -242,10 +239,10 @@
 <style>
   .page-body-wrapper {
     text-align: center;
-  }
-
-  .page-body {
-    padding: 15px;
+  }
+
+  .page-body {
+    padding: 15px;
   }
 
   .canvas {
@@ -256,27 +253,23 @@
   }
 
   .fps {
-    margin-top: 30px;
+    margin-top: 30px;
     margin-bottom: 20px;
   }
 
   .item {
     flex-direction: row;
-    align-items: center;
+    align-items: center;
     margin-top: 10px;
-  }
-
-  .item-label {
-    width: 120px;
   }
 
-  .item-value {
-    margin-left: 5px;
-    color: cornflowerblue;
-    width: 50px;
-  }
-
-  .item-fill {
-    flex: 1;
+  .item-label {
+    margin-right: auto;
+  }
+
+  .item-value {
+    color: cornflowerblue;
+    width: 50px;
+    text-align: center;
   }
 </style>