refactor: replace simple px utility styles

playground/src/views/demos/features/icons/index.vue

@@ -103,7 +103,7 @@ const inputComponent = h(Input);
           v-model:value="iconValue4"
           allow-clear
           placeholder="点击这里选择图标"
-          style="width: 300px"
+          class="w-75"
         >
           <template #addonAfter>
             <IconPicker v-model="iconValue4" prefix="mdi-light" type="icon" />

playground/src/views/examples/layout/col-page.vue

@@ -75,7 +75,7 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
             v-model:value="leftMinWidth"
             :max="props.leftMaxWidth - 1"
             :min="1"
-            style="width: 100px"
+            class="w-25"
             @after-change="(value) => (props.leftMinWidth = value as number)"
           />
           <span>左侧最大宽度百分比：</span>
@@ -83,7 +83,7 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
             v-model:value="props.leftMaxWidth"
             :max="100"
             :min="leftMaxWidth + 1"
-            style="width: 100px"
+            class="w-25"
             @after-change="(value) => (props.leftMaxWidth = value as number)"
           />
         </div>

playground/src/views/system/role/modules/form.vue

@@ -126,17 +126,13 @@ function getNodeClass(node: Recordable<any>) {
 <style lang="css" scoped>
 :deep(.ant-tree-title) {
   .tree-actions {
-    display: none;
-    margin-left: 20px;
+    @apply ml-5 hidden;
   }
 }
 
 :deep(.ant-tree-title:hover) {
   .tree-actions {
-    display: flex;
-    flex: auto;
-    justify-content: flex-end;
-    margin-left: 20px;
+    @apply ml-5 flex flex-auto justify-end;
   }
 }
 </style>