fix: update numeric demo style (#1526)

examples/sites/demos/pc/app/numeric/controls-composition-api.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="numeric-controls-demo">
-    <p>1. 隐藏加减按钮</p>
-    <tiny-numeric v-model="value1" :controls="controls" show-left></tiny-numeric>
-    <p>2. 加减按钮全置于右侧</p>
-    <tiny-numeric v-model="value2" controls-position="right"></tiny-numeric>
+    <p>隐藏加减按钮:</p>
+    <tiny-numeric v-model="value1" :controls="controls" show-left class="numeric-class"></tiny-numeric>
+    <p>加减按钮全置于右侧:</p>
+    <tiny-numeric v-model="value2" controls-position="right" class="numeric-class"></tiny-numeric>
   </div>
 </template>
 
@@ -15,3 +15,9 @@ const controls = ref(false)
 const value1 = ref(1)
 const value2 = ref(2)
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

examples/sites/demos/pc/app/numeric/controls.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="numeric-controls-demo">
-    <p>1. 隐藏加减按钮</p>
-    <tiny-numeric v-model="value1" :controls="controls" show-left></tiny-numeric>
-    <p>2. 加减按钮全置于右侧</p>
-    <tiny-numeric v-model="value2" controls-position="right"></tiny-numeric>
+    <p>隐藏加减按钮:</p>
+    <tiny-numeric v-model="value1" :controls="controls" show-left class="numeric-class"></tiny-numeric>
+    <p>加减按钮全置于右侧:</p>
+    <tiny-numeric v-model="value2" controls-position="right" class="numeric-class"></tiny-numeric>
   </div>
 </template>
 
@@ -23,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

examples/sites/demos/pc/app/numeric/precision-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <p>1、数值精度</p>
-  <tiny-numeric v-model="value" :precision="precision"></tiny-numeric>
-  <p>2、数值格式</p>
-  <tiny-numeric style="width: 300px" v-model="value1" :format="format"></tiny-numeric>
+  <p>数值精度:</p>
+  <tiny-numeric v-model="value" :precision="precision" class="numeric-class"></tiny-numeric>
+  <p>数值格式:</p>
+  <tiny-numeric style="width: 300px" v-model="value1" :format="format" class="numeric-class"></tiny-numeric>
 </template>
 
 <script setup lang="ts">
@@ -26,3 +26,9 @@ const format = reactive({
   suffix: '@' // 后置标识
 })
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

examples/sites/demos/pc/app/numeric/precision.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <p>1、数值精度</p>
-    <tiny-numeric v-model="value" :precision="precision"></tiny-numeric>
-    <p>2、数值格式</p>
-    <tiny-numeric style="width: 300px" v-model="value1" :format="format"></tiny-numeric>
+    <p>数值精度:</p>
+    <tiny-numeric v-model="value" :precision="precision" class="numeric-class"></tiny-numeric>
+    <p>数值格式:</p>
+    <tiny-numeric style="width: 300px" v-model="value1" :format="format" class="numeric-class"></tiny-numeric>
   </div>
 </template>
 
@@ -36,3 +36,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

packages/theme/src/numeric/index.less

@@ -205,6 +205,7 @@
     border-left: 1px solid var(--ti-numeric-input-unit-border-left-color);
     margin: 0 1px 0 0;
     background: var(--ti-numeric-input-unit-bg-color);
+    border-radius: var(--ti-numeric-input-border-radius);
   }
 
   &.is-disabled &__decrease,