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
     }
   }
@@ -267,16 +264,12 @@
   }
 
   .item-label {
-    width: 120px;
+    margin-right: auto;
   }
 
   .item-value {
-    margin-left: 5px;
     color: cornflowerblue;
     width: 50px;
-  }
-
-  .item-fill {
-    flex: 1;
+    text-align: center;
   }
 </style>