diff --git a/src/components/input/NumInput.vue b/src/components/input/NumInput.vue
index 05b252f9aaaa1a5238c1211d728364bd7c0d21e5..fd6f0f1b0e25de21e669e2203355a9a34243a954 100644
--- a/src/components/input/NumInput.vue
+++ b/src/components/input/NumInput.vue
@@ -1,13 +1,120 @@
 <template>
-
+    <div class="f-num-with-add-sub" :class="{'num-box-error': !inputObject.check}">
+        <span class="f-num-icon f-num-sub" @click="sub()">
+            -
+        </span>
+        <div class="input">
+            <!-- <input :rules="NumInput.AddRules.name" v-model="FONT_SIZE" label="请输入字号" /> -->
+            <input ref="input" class="mate-input" :type="type" placeholder=" " v-model="inputObject.value" @change="handlerChange"/>
+            <span class="error-message f-otw" v-title="inputObject.errorMsg" v-show="!inputObject.check">{{ inputObject.errorMsg }}</span>
+        </div>
+        <span class="f-num-icon f-num-add" @click="sub(true)">
+            +
+        </span>
+    </div>
 </template>
 
 <script>
+import { ref } from 'vue';
+import InputTools from './inputTools';
 export default {
-    name: 'NumInput'
+    name: 'NumInput',
+    props: {
+        type: {
+            type: String,
+            default: 'text'
+        },
+        rules: {
+            type: Object,
+            default: null
+        },
+        modelValue: {
+            type: [String, Number],
+            default: ''
+        }
+    },
+    setup(props, { emit }) {
+        const input = ref(null);
+
+        /** *************************************************************************************************/
+        /** ***************************************对象绑定***************************************************/
+        /** *************************************************************************************************/
+        const { inputObject } = new InputTools(props, emit, input);
+
+        function handlerChange() {
+            // 只有数字介于12到30之间才会触发改值得操作
+            if (inputObject.value > 11 && inputObject.value < 31) {
+                emit('change', inputObject.value);
+            }
+        }
+
+        function sub(bool) {
+            bool ? inputObject.value++ : inputObject.value--;
+            handlerChange();
+            // 点击加减滑块时 需要触发一下失焦事件
+            input.value.focus();
+            input.value.blur();
+        }
+        return {
+            inputObject,
+            input,
+            handlerChange,
+            sub
+        };
+    }
 };
 </script>
 
 <style scoped lang="less">
-
+.f-num-with-add-sub{
+    position: relative;
+    display: inline-block;
+    width: 200px;
+    line-height: 24px;
+    // margin-bottom:20px;
+    border: 1px solid #cdcdcd;
+    padding:5px 0;
+    border-radius: 5px;
+    .input input{
+        box-sizing: border-box;
+        text-align: center;
+        padding: 0 45px;
+        width:100%;
+    }
+    .error-message{
+        position: absolute;
+        left: 0;
+        bottom: -1.2rem;
+        width: 100%;
+        font-size: 12px;
+        color: #fd5d5d;
+    }
+    .f-num-icon{
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        width: 40px;
+        height: auto;
+        text-align: center;
+        background: #f5f7fa;
+        color: #606266;
+        cursor: pointer;
+        font-size: 20px;
+        height: 100%;
+        line-height:32px;
+    }
+    .f-num-sub{
+        left: 1px;
+        border-right: 1px solid #cdcdcd;
+        border-radius: 5px 0 0 5px;
+    }
+    .f-num-add{
+        right: 1px;
+        border-left: 1px solid #cdcdcd;
+        border-radius: 0 5px 5px 0;
+    }
+}
+.num-box-error {
+    border: 1px solid #fd5d5d;
+}
 </style>
diff --git a/src/utils/validateRule.ts b/src/utils/validateRule.ts
index cb5f3c210b7c35ef995ba368cc3ac58e50978b4c..5a0acb832e35ba076d790cbb0790788145b5bf93 100644
--- a/src/utils/validateRule.ts
+++ b/src/utils/validateRule.ts
@@ -12,6 +12,12 @@ export class ValidateRule {
         const reg = /^[a-z]*$/g;
         return reg.test(value);
     }
+
+    static FontSizeNumber(value: any): boolean {
+        // const reg = /^[0-9]*$/;
+        const reg = /^(1[2-9]|2\d|30)$/;
+        return reg.test(value);
+    }
 }
 
 export class DefaultMsg {
@@ -27,4 +33,8 @@ export class DefaultMsg {
         false: 'npm发布包名称只能使用小写英文字母',
         true: 'OK!'
     }
+    static FontSizeNumber = {
+        false: '请填写12-30之间的数字',
+        true: 'OK!'
+    }
 }
diff --git a/src/views/code/components/RightConfiguration.vue b/src/views/code/components/RightConfiguration.vue
index d5a2f8450194b79d21a9e9f9275365161ca57883..ba405f78ca554f1c41c15f9829fc424d09d1159c 100644
--- a/src/views/code/components/RightConfiguration.vue
+++ b/src/views/code/components/RightConfiguration.vue
@@ -9,7 +9,8 @@
             <span>请选择页面主题：</span>
             <dia-select-theme></dia-select-theme>
             <span>编辑器字号：</span>
-            <input v-model="FONT_SIZE" />
+            <!-- <input v-model="FONT_SIZE" /> -->
+            <num-input :rules="NumInput.AddRules.name" v-model="FONT_SIZE"  @change="handleChange"></num-input>
             <span>是否开启热更新：</span>
             <base-switch v-model="HOT_HTML"></base-switch>
         </main>
@@ -18,14 +19,15 @@
 
 <script>
 import { useStore } from 'vuex';
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import diaSelectETheme from '../../../components/editorThemeControl/diaSelectETheme';
 import DiaSelectTheme from '../../../components/themeControl/diaSelectTheme';
 import BaseSwitch from '../../../components/switch/BaseSwitch';
+import numInput from '../../../components/input/NumInput';
 
 export default {
     name: 'RightConfiguration',
-    components: { BaseSwitch, DiaSelectTheme, diaSelectETheme },
+    components: { BaseSwitch, DiaSelectTheme, diaSelectETheme, numInput },
     setup() {
 
         /** *************************************************************************************************/
@@ -40,6 +42,17 @@ export default {
             }
         });
 
+        const NumInput = reactive({
+            AddRules: {
+                name: { validate: [{ validateName: 'required', trigger: ['input'] }, 'FontSizeNumber'], trigger: ['blur', 'change'] },
+                version: { validate: ['required'], trigger: ['blur'] }
+            }
+        });
+
+        function handleChange(value) {
+            FONT_SIZE.value = value;
+        }
+
         /** *************************************************************************************************/
         /** ***************************************字号调整***************************************************/
         /** *************************************************************************************************/
@@ -52,7 +65,9 @@ export default {
 
         return {
             HOT_HTML,
-            FONT_SIZE
+            FONT_SIZE,
+            NumInput,
+            handleChange
         };
     }
 };
diff --git a/src/views/show/createBg.js b/src/views/show/createBg.js
index 2079724007fb4351c19890a02b13c4538940db20..ac09f2e8f324c3af7634225ee66e0dc1fbd180a7 100644
--- a/src/views/show/createBg.js
+++ b/src/views/show/createBg.js
@@ -37,7 +37,7 @@ export default function createBg(dom) {
         return r;
     };
 
-    const particleCount = 1000;
+    const particleCount = 1;
     const particlePropCount = 9;
     const particlePropsLength = particleCount * particlePropCount;
     const rangeY = 100;