通用css 替换为tailwindcss模式，剔除无用css。

web/src/style/basics.scss

@@ -1,18 +0,0 @@
-// basice
-$icon-size:18px;
-$active-color:#1890ff;
-$border-color: #f4f4f4;
-$white-bg:#fff;
-$el-icon-small:30px;
-$el-icon-mini:24px;
-// aside
-$width-aside:220px;
-$width-hideside-aside:54px;
-$width-mobile-aside:210px;
-$color-aside:rgba(255, 255, 255, .9);
-$icon-arrow-size-aside:12px;
-$width-submenu-aside:55px;
-$height-aside-tilte:60px;
-$height-aside-img:30px;
-$width-aside-img:30px;
-

web/src/style/element_visiable.scss

@@ -1,5 +1,4 @@
 @import '@/style/main.scss';
-@import '@/style/mobile.scss';
 
 #app {
     .el-button {
@@ -8,105 +7,30 @@
     }
 }
 
-::-webkit-scrollbar-track-piece {
-    background-color: #f8f8f8;
-}
-
 ::-webkit-scrollbar {
-    width: 9px;
-    height: 9px;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #dddddd;
-    background-clip: padding-box;
-    min-height: 28px;
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: #bbb;
+    @apply hidden;
 }
 
 
 .gva-search-box {
-    padding: 24px;
-    padding-bottom: 2px;
-    background-color: #fff;
-    border-radius: 2px;
-    margin-bottom: 12px;
+    @apply p-6 pb-0.5 bg-white rounded mb-3;
 }
 
 .gva-form-box {
-    padding: 24px;
-    background-color: #fff;
-    border-radius: 2px;
-}
-
-.multiple-img-box{
-    display: flex;
-    gap:8px;
-    flex-wrap: wrap;
+    @apply p-6 bg-white rounded;
 }
 
 .gva-pagination {
-    display: flex;
-    justify-content: flex-end;
+    @apply flex justify-end;
     .el-pagination__editor {
         .el-input__inner {
-            height: 32px;
+            @apply h-8;
         }
     }
-    .el-pagination__total {
-        line-height: 32px !important;
-    }
-    //小屏幕不显示
-    @media (max-width: 750px) {
-        .el-pagination__sizes{
-            display: none !important;
-        }
-    }
-    .btn-prev {
-        padding-right: 6px;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 32px;
-        height: 32px;
-    }
-    .number {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 32px;
-        height: 32px;
-    }
-    .btn-quicknext {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 32px;
-        height: 32px;
-    }
-    .btn-next {
-        padding-left: 6px;
-        width: 32px;
-        height: 32px;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
-    // 兼容久版用户升级
-    .active {
-        background: var(--el-color-primary);
-        border-radius: 2px;
-        color: #ffffff !important;
-    }
-    // end
 
     .is-active {
+        @apply rounded text-white;
         background: var(--el-color-primary);
-        border-radius: 2px;
         color: #ffffff !important;
     }
 }

web/src/style/main.scss

@@ -7,7 +7,6 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
-@import '@/style/basics.scss';
 @import '@/style/iconfont.css';
 html {
     line-height: 1.15;
@@ -517,31 +516,9 @@ li {
         @apply fixed top-0;
     }
     .gva-aside {
-        position: fixed;
-        font-size: 0;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1001;
-        overflow: hidden;
+        @apply fixed top-0 left-0 z-[1001] overflow-hidden;
         .el-menu {
-            border-right: none;
-        }
-        .tilte {
-            @apply min-h-[60px];
-            text-align: center;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .tit-text {
-                display: inline-block;
-                color: #fff;
-                font-weight: 600;
-                font-size: 20px;
-                padding-left: 10px;
-            }
+            @apply border-r-0;
         }
     }
     .aside {
@@ -576,30 +553,18 @@ li {
 
     .mobile {
         .gva-aside {
-            width: $width-hideside-aside;
+            @apply w-[54px];
         }
     }
 
     .hideside {
         .main-cont.el-main {
-            margin-left: 54px;
+            @apply ml-[54px];
         }
     }
     .mobile {
         .main-cont.el-main {
-            margin-left: 0px;
-        }
-    }
-    .openside.mobile {
-        .shadowBg {
-            background: #000;
-            opacity: .3;
-            width: 100%;
-            top: 0;
-            height: 100%;
-            position: absolute;
-            z-index: 1001;
-            left: 0;
+            @apply ml-0;
         }
     }
 }
@@ -703,21 +668,6 @@ li {
                 }
             }
         }
-
-        &.main-right {
-            .admin-title {
-                float: left;
-                font-size: 16px;
-                vertical-align: middle;
-                margin-left: 20px;
-                img {
-                    vertical-align: middle;
-                }
-                &.collapse {
-                    width: 53px;
-                }
-            }
-        }
     }
 }
 

web/src/style/mobile.scss

@@ -1,31 +0,0 @@
-@import '@/style/basics.scss';
-@media screen and (min-width: 320px)and (max-width: 750px) {
-    .el-header {
-        @apply px-1.5;
-    }
-    .layout-cont {
-        .main-cont {
-            .breadcrumb {
-                @apply px-1.5;
-            }
-        }
-    }
-    .el-main {
-        .admin-box {
-            @apply mx-0;
-        }
-    }
-    .el-dialog {
-        width: 90%;
-    }
-    .el-transfer {
-        .el-transfer-panel {
-            width: 40%;
-            display: inline-block;
-        }
-        .el-transfer__buttons {
-            padding: 0 5px;
-            display: inline-block;
-        }
-    }
-}