refactor(style): remove tailwind css

src/views/demo/comp/click-out-side/index.vue

@@ -1,11 +1,8 @@
 <template>
-  <div class="px-64">
+  <div class="px-10">
     <Alert message="点内外部触发事件" show-icon class="mt-4"></Alert>
     <ClickOutSide @clickOutside="handleClickOutside" class="flex justify-center mt-10">
-      <div
-        @click="innerClick"
-        class="bg-primary w-full h-64 flex justify-center items-center text-2xl text-white rounded-lg shadow-lg"
-      >
+      <div @click="innerClick" class="demo-box">
         {{ text }}
       </div>
     </ClickOutSide>
@@ -30,3 +27,17 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  .demo-box {
+    display: flex;
+    width: 100%;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #408ede;
+    border-radius: 10px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/demo/comp/scroll/Action.vue

@@ -8,11 +8,11 @@
       <a-button @click="scrollTo(0)" class="mr-2">滚动到顶部</a-button>
       <a-button @click="scrollBottom()" class="mr-2">滚动到底部</a-button>
     </div>
-    <div class="w-1/2 h-64 bg-white">
+    <div class="scroll-wrap">
       <ScrollContainer class="mt-4" ref="scrollRef">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
           </template>
         </ul>
       </ScrollContainer>
@@ -50,3 +50,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .scroll-wrap {
+    width: 50%;
+    height: 300px;
+    background: #fff;
+  }
+</style>

src/views/demo/comp/scroll/VirtualScroll.vue

@@ -9,9 +9,9 @@
       </VirtualScroll>
     </div>
 
-    <Divider>即使不可见，也预先加载30条数据，防止空白</Divider>
+    <Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
     <div class="virtual-scroll-demo-wrap">
-      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="30">
+      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
         <template v-slot="{ item }">
           <div class="virtual-scroll-demo__item">{{ item.title }}</div>
         </template>

src/views/demo/comp/scroll/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="p-4">
     <Alert message="抽取el-scrollbar，并对其进行扩展,滚动条美化,适用于各个浏览器" type="info" />
-    <div class="w-1/2 h-64 bg-white">
+    <div class="scroll-wrap">
       <ScrollContainer class="mt-4">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
           </template>
         </ul>
       </ScrollContainer>
@@ -24,3 +24,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .scroll-wrap {
+    width: 50%;
+    height: 300px;
+    background: #fff;
+  }
+</style>

src/views/demo/comp/strength-meter/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-4 flex justify-center">
-    <div class="w-1/2 bg-white p-10 rounded-md">
+    <div class="demo-wrap p-10">
       <StrengthMeter placeholder="默认" />
       <StrengthMeter placeholder="禁用" disabled />
       <br />
@@ -21,3 +21,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo-wrap {
+    width: 50%;
+    background: #fff;
+    border-radius: 10px;
+  }
+</style>

src/views/demo/comp/verify/Rotate.vue

@@ -21,3 +21,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .bg-gray-700 {
+    background: #4a5568;
+  }
+</style>

src/views/demo/comp/verify/index.vue

@@ -88,3 +88,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .bg-gray-700 {
+    background: #4a5568;
+  }
+</style>

src/views/demo/feat/tabs/index.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="p-4">
-    <CollapseContainer
-      class="px-20 bg-white w-full h-32 rounded-md"
-      title="在下面输入框输入文本,切换后回来内容会保存"
-    >
+    <CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存">
       <a-input placeholder="请输入" />
     </CollapseContainer>
 
-    <CollapseContainer class="px-20 mt-10 bg-white w-full h-32 rounded-md" title="标签页操作">
+    <CollapseContainer class="mt-4 px-4" title="标签页操作">
       <a-button class="mr-2" @click="closeAll">关闭所有</a-button>
       <a-button class="mr-2" @click="closeLeft">关闭左侧</a-button>
       <a-button class="mr-2" @click="closeRight">关闭右侧</a-button>

src/views/demo/permission/back/Btn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert message="刷新后会还原" show-icon />
 
     <CurrentPermissionMode />
@@ -83,3 +83,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>

src/views/demo/permission/back/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert
       message="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看"
       show-icon
@@ -35,3 +35,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>

src/views/demo/permission/front/AuthPageA.vue

@@ -1,9 +1,19 @@
 <template>
-  <div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
-    Super 角色可见
-  </div>
+  <div class="m-10 auth-page"> Super 角色可见 </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({});
 </script>
+<style lang="less" scoped>
+  .auth-page {
+    display: flex;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #409efe;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/demo/permission/front/AuthPageB.vue

@@ -1,9 +1,19 @@
 <template>
-  <div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
-    Test 角色可见
-  </div>
+  <div class="m-10 auth-page"> Test 角色可见 </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({});
 </script>
+<style lang="less" scoped>
+  .auth-page {
+    display: flex;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #409efe;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/demo/permission/front/Btn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="demo p-4 m-4">
     <Alert
       message="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口"
       show-icon
@@ -82,3 +82,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>

src/views/demo/permission/front/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert
       message="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口"
       show-icon
@@ -46,3 +46,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>

src/views/demo/tree/ActionTree.vue

@@ -17,7 +17,7 @@
       <a-button @click="deleteNodeByKey('2-2')" class="mr-2">删除parent3节点</a-button>
       <a-button @click="updateNodeByKey('1-1')" class="mr-2">更新parent2节点</a-button>
     </div>
-    <CollapseContainer title="函数操作" class="w-1/3 mr-4" :canExpan="false">
+    <CollapseContainer title="函数操作" class="mr-4" :canExpan="false" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" ref="treeRef" :checkable="true" />
     </CollapseContainer>
   </div>

src/views/demo/tree/EditTree.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex p-4">
-    <CollapseContainer title="右侧操作按钮" class="w-1/3 mr-4">
+    <CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :actionList="actionList" />
     </CollapseContainer>
 
-    <CollapseContainer title="右键菜单" class="w-1/3 mr-4">
+    <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" />
     </CollapseContainer>
   </div>

src/views/demo/tree/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="flex p-4">
-    <CollapseContainer title="基础示例" class="w-1/3 mr-4">
+    <CollapseContainer title="基础示例" :style="{ width: '33%' }" class="mr-4">
       <BasicTree :treeData="treeData" />
     </CollapseContainer>
 
-    <CollapseContainer title="可勾选" class="w-1/3 mr-4">
+    <CollapseContainer title="可勾选" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :checkable="true" />
     </CollapseContainer>
 
-    <CollapseContainer title="默认展开/勾选示例" class="w-1/3">
+    <CollapseContainer title="默认展开/勾选示例" :style="{ width: '33%' }">
       <BasicTree
         :treeData="treeData"
         :checkable="true"