From 78de254230034f805134a1b7979c93f607ae3a78 Mon Sep 17 00:00:00 2001
From: piexlMax <qimiaojiangjizhao@gmail.com>
Date: Tue, 8 Aug 2023 16:05:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E9=83=A8=E5=88=86css?=
 =?UTF-8?q?=E4=B8=BAtailwindcss=20=E5=88=A0=E9=99=A4=E6=9F=90=E4=BA=9B?=
 =?UTF-8?q?=E6=97=A0=E7=94=A8css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/warningBar/warningBar.vue  |  29 +--
 web/src/style/base.scss                       |  65 -----
 web/src/style/basics.scss                     |  19 +-
 web/src/style/button.scss                     |   9 -
 web/src/style/element_visiable.scss           |   7 -
 web/src/style/main.scss                       | 239 ++----------------
 web/src/style/mobile.scss                     |  11 +-
 web/src/view/dashboard/index.vue              | 128 +++-------
 web/src/view/example/upload/upload.vue        |  18 +-
 web/src/view/layout/index.vue                 |  12 +-
 web/src/view/layout/search/search.vue         |  14 +-
 web/src/view/person/person.vue                |   2 +-
 web/src/view/superAdmin/api/api.vue           |  42 +--
 .../view/superAdmin/authority/authority.vue   |   4 +-
 .../superAdmin/authority/components/apis.vue  |  10 +-
 .../superAdmin/authority/components/datas.vue |  12 +-
 .../superAdmin/authority/components/menus.vue |  11 +-
 .../superAdmin/dictionary/sysDictionary.vue   |   2 +-
 web/src/view/superAdmin/menu/menu.vue         |   2 +-
 web/src/view/systemTools/autoCode/index.vue   |   2 +-
 20 files changed, 118 insertions(+), 520 deletions(-)
 delete mode 100644 web/src/style/base.scss
 delete mode 100644 web/src/style/button.scss

diff --git a/web/src/components/warningBar/warningBar.vue b/web/src/components/warningBar/warningBar.vue
index 8d0ee7ee6..1a88c1e19 100644
--- a/web/src/components/warningBar/warningBar.vue
+++ b/web/src/components/warningBar/warningBar.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="warning-bar"
-    :class="href&&'can-click'"
+    class="px-1.5 py-2 flex items-center bg-amber-50 rounded gap-2 mb-3 text-amber-500"
+    :class="href&&'cursor-pointer'"
     @click="open"
   >
-    <el-icon>
+    <el-icon class="text-xl">
       <warning-filled />
     </el-icon>
     <span>
@@ -31,26 +31,3 @@ const open = () => {
   }
 }
 </script>
-<style lang="scss" scoped>
-.warning-bar{
-    background-color: #FFF5ED;
-    font-size: 14px;
-    padding: 6px 14px;
-    display: flex;
-    align-items: center;
-    border-radius: 2px;
-    .el-icon{
-      font-size: 18px;
-      color: #ED6A0C;
-    }
-    margin-bottom: 12px;
-    span{
-        line-height: 22px;
-        color:#F67207;
-        margin-left: 8px;
-    }
-}
-.can-click{
-  cursor: pointer;
-}
-</style>
diff --git a/web/src/style/base.scss b/web/src/style/base.scss
deleted file mode 100644
index b3bda02ed..000000000
--- a/web/src/style/base.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.clearfix:after {
-    content: '';
-    display: block;
-    height: 0;
-    visibility: hidden;
-    clear: both;
-}
-
-.fl-left {
-    float: left;
-}
-
-.fl-right {
-    float: right;
-}
-
-.mg {
-    margin: 10px !important;
-}
-
-.left-mg-xs {
-    margin-left: 6px !important;
-}
-
-.left-mg-sm {
-    margin-left: 10px !important;
-}
-
-.left-mg-md {
-    margin-left: 14px !important;
-}
-
-.top-mg-lg {
-    margin-top: 20px !important;
-}
-
-.tb-mg-lg {
-    margin: 20px 0 !important;
-}
-
-.bottom-mg-lg {
-    margin-bottom: 20px !important;
-}
-
-.left-mg-lg {
-    margin-left: 18px !important;
-}
-
-.title-1 {
-    text-align: center;
-    font-size: 32px;
-}
-
-.title-3 {
-    text-align: center;
-}
-
-.keyword{
-  width: 220px;
-  margin: 0 0 0 30px;
-}
-
-#nprogress .bar {
-    background: #4D70FF !important; //自定义颜色
-}
diff --git a/web/src/style/basics.scss b/web/src/style/basics.scss
index 2d859a3e6..7050af52e 100644
--- a/web/src/style/basics.scss
+++ b/web/src/style/basics.scss
@@ -1,5 +1,4 @@
 // basice
-$font-size: 14px;
 $icon-size:18px;
 $active-color:#1890ff;
 $bg-main:#f0f2f5;
@@ -17,20 +16,4 @@ $width-submenu-aside:55px;
 $height-aside-tilte:60px;
 $height-aside-img:30px;
 $width-aside-img:30px;
-// header
-$height-header: 60px;
-// nav-scroll
-$height-nav-scroll:40px;
-$active-bg-tabs-item-nav-scroll:#409eff;
-$bg-tabs-item-nav-scroll:#ddd;
-// table
-$bg-color-table-thead:#fafafa;
-$border-color-table:#ededed;
-$height-table-cell:45px;
-$color-table-tbody:#595959;
-$color-table-thead:#262626;
-// dashboard
-$height-car:68px;
-// mobile
-$padding-xs: 5px;
-$margin-xs: 5px;
\ No newline at end of file
+
diff --git a/web/src/style/button.scss b/web/src/style/button.scss
deleted file mode 100644
index 9c3e7c567..000000000
--- a/web/src/style/button.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.sticky-button {
-  position: sticky;
-  top: 2px;
-  z-index: 2;
-  background-color: #fff;
-}
-.fitler{
-  width: 60%;
-}
\ No newline at end of file
diff --git a/web/src/style/element_visiable.scss b/web/src/style/element_visiable.scss
index b8971cbcd..9e3199593 100644
--- a/web/src/style/element_visiable.scss
+++ b/web/src/style/element_visiable.scss
@@ -1,5 +1,4 @@
 @import '@/style/main.scss';
-@import '@/style/base.scss';
 @import '@/style/mobile.scss';
 
 #app {
@@ -50,12 +49,6 @@
     flex-wrap: wrap;
 }
 
-.gva-table-box {
-    padding: 24px;
-    background-color: #fff;
-    border-radius: 2px;
-}
-
 .gva-pagination {
     display: flex;
     justify-content: flex-end;
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index b5544af1c..cb8442b72 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -510,27 +510,6 @@ li {
 
 // 导航
 #app {
-    .pd-lr-15 {
-        padding: 0 15px;
-    }
-    .height-full {
-        height: 100%;
-    }
-    .width-full {
-        width: 100%;
-    }
-    .dp-flex {
-        display: flex;
-    }
-    .justify-content-center {
-        justify-content: center;
-    }
-    .align-items {
-        align-items: center;
-    }
-    .pd-0 {
-        padding: 0;
-    }
     .el-container {
         position: relative;
         height: 100%;
@@ -675,7 +654,7 @@ li {
     }
     .el-table {
         thead {
-            color: $color-table-thead;
+            @apply text-gray-950;
         }
         th {
             padding: 6px 0;
@@ -834,40 +813,26 @@ li {
 .el-container.layout-cont {
     .main-cont.el-main {
         background-color: $bg-main;
-        .menu-total {
-            cursor: pointer;
-            font-size: 24px;
-            color: #000000;
-            margin-top: 16px;
-        }
     }
 }
 
 .el-container.layout-cont {
     .main-cont {
         .router-history {
-            // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-            background: #fff;
-            padding: 0 6px;
-            border-top: 1px solid $border-color;
-            padding: 0;
+            @apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
             .el-tabs__header {
-                margin: 0px 0 0 0;
-                .el-tabs__item {
-                    height: $height-nav-scroll;
-                    height: $height-nav-scroll;
-                    border: none;
-                    border-left: 1px solid $border-color;
-                    border-right: 1px solid $border-color;
-                    +.el-tabs__item {
-                        border-left: 0px solid $border-color;
+                @apply m-0;
+                .el-tabs__item{
+                    @apply border-solid border-r border-t-0 border-gray-100 border-b-0;
+                    &+.el-tabs__item{
+                        @apply border-l-0;
                     }
                 }
                 .el-tabs__item.is-active {
-                    background-color: rgba(64, 158, 255, .08);
+                    @apply bg-blue-500 bg-opacity-5;
                 }
                 .el-tabs__nav {
-                    border: none;
+                    @apply border-0;
                 }
             }
         }
@@ -876,17 +841,8 @@ li {
 
 .el-table__row {
     .el-button.el-button--text.el-button--small {
-        position: relative;
+        @apply relative;
     }
-    // .el-button.el-button--text.el-button--small::after {
-    //     content: '';
-    //     position: absolute;
-    //     width: 1px;
-    //     height: 50%;
-    //     top: 5px;
-    //     margin-left: 15px;
-    //     background-color: #e8e8e8;
-    // }
     .cell {
         button:last-child::after {
             content: '' !important;
@@ -959,26 +915,20 @@ $mainHight: 100vh;
         }
     }
     .header-cont {
-        padding: 0 16px;
-        height: $height-header;
+        @apply px-4 h-16 bg-white;
         background: #fff;
     }
     .main-cont {
         .breadcrumb {
-            height: $height-header;
-            line-height: $height-header;
-            display: inline-block;
-            padding: 0;
-            margin-left: 46px;
-            font-size: 16px;
+            @apply h-16 flex items-center p-0 ml-12 text-lg;
             .el-breadcrumb__item {
                 .el-breadcrumb__inner {
-                    color: rgba($color: #000000, $alpha: 0.45);
+                    @apply text-gray-600;
                 }
             }
             .el-breadcrumb__item:nth-last-child(1) {
                 .el-breadcrumb__inner {
-                    color: rgba($color: #000000, $alpha: 0.65);
+                    @apply text-gray-600;
                 }
             }
         }
@@ -989,16 +939,6 @@ $mainHight: 100vh;
         height: $mainHight !important;
         overflow: visible;
         position: relative;
-        .menu-total {
-            margin-left: 6px;
-            cursor: pointer;
-            float: left;
-            margin-top: 10px;
-            width: 30px;
-            height: 30px;
-            line-height: 30px;
-            font-size: 30px;
-        }
         .aside {
             overflow: auto;
             // background: #fff;
@@ -1045,162 +985,35 @@ $mainHight: 100vh;
     }
 }
 
-.header-avatar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
 .search-component {
-    display: inline-flex;
-    overflow: hidden;
-    text-align: center;
+    @apply inline-flex overflow-hidden text-center gap-5 mr-5;
+    div{
+        @apply cursor-pointer;
+    }
     .el-input__inner {
-        border: none;
-        border-bottom: 1px solid #606266;
+        @apply border-b border-solid border-gray-300;
     }
     .el-dropdown-link {
-        cursor: pointer;
-    }
-    .search-icon {
-        font-size: $icon-size;
-        display: inline-block;
-        vertical-align: middle;
-        box-sizing: border-box;
-        color: rgba($color: #000000, $alpha: 0.65);
+        @apply cursor-pointer;
     }
     .dropdown-group {
         min-width: 100px;
     }
-    .user-box {
-        cursor: pointer;
-        margin-right: 24px;
-        color: rgba($color: #000000, $alpha: 0.65);
-    }
-}
-
-.screenfull {
-    overflow: hidden;
-    color: rgba($color: #000000, $alpha: 0.65);
 }
 
 .el-dropdown {
     overflow: hidden;
 }
 
-// dashboard
-.card {
-    background-color: $white-bg;
-    padding: 20px;
-    border-radius: 4px;
-    overflow: hidden;
-    .car-left {
-        height: $height-car;
-        // width: 70%;
-        // float: left;
-    }
-    .car-right {
-        height: $height-car;
-        // width: 29%;
-        // float: left;
-        .flow,
-        .user-number,
-        .feedback {
-            width: $el-icon-mini;
-            height: $el-icon-mini;
-            display: inline-block;
-            border-radius: 50%;
-            line-height: $el-icon-mini;
-            text-align: center;
-            font-size: 13px;
-            margin-right: 5px;
-        }
-        .flow {
-            background-color: #fff7e8;
-            border-color: #feefd0;
-            color: #faad14;
-        }
-        .user-number {
-            background-color: #ecf5ff;
-            border-color: #d9ecff;
-            color: #409eff;
-        }
-        .feedback {
-            background-color: #eef9e8;
-            border-color: #dcf3d1;
-            color: #52c41a;
-        }
-        .card-item {
-            padding-right: 20px;
-            text-align: right;
-            margin-top: 12px;
-            b {
-                margin-top: 6px;
-                display: block;
-            }
-        }
-    }
-    .card-img {
-        width: $height-car;
-        height: $height-car;
-        display: inline-block;
-        float: left;
-        overflow: hidden;
-        img {
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-        }
-    }
-    .text {
-        height: $height-car;
-        margin-left: 10px;
-        float: left;
-        margin-top: 14px;
-        h4 {
-            font-size: 20px;
-            color: #262626;
-            font-weight: 500;
-            white-space: nowrap;
-            word-break: break-all;
-            text-overflow: ellipsis;
-        }
-        .tips-text {
-            color: #8c8c8c;
-            margin-top: 8px;
-            .el-icon {
-                margin-right: 8px;
-                display: inline-block;
-            }
-        }
-    }
-}
-
-.shadow {
-    margin: 4px 0;
-    .grid-content {
-        background-color: $white-bg;
-        border-radius: 4px;
-        text-align: center;
-        padding: 10px 0;
-        cursor: pointer;
-        .el-icon {
-            width: $el-icon-small;
-            height: $el-icon-small;
-            font-size: $el-icon-small;
-            margin-bottom: 8px;
-        }
-    }
+.gva-table-box {
+    @apply p-6 bg-white rounded;
 }
 
 .gva-btn-list {
-    margin-bottom: 12px;
-    display: flex;
-    .el-button+.el-button {
-        margin-left: 12px;
-    }
+    @apply mb-3 flex gap-3 items-center;
 }
 
-.justify-content-flex-end {
-    justify-content: flex-end;
+
+#nprogress .bar {
+    background: #29d !important;
 }
diff --git a/web/src/style/mobile.scss b/web/src/style/mobile.scss
index a593f2ca0..270764eda 100644
--- a/web/src/style/mobile.scss
+++ b/web/src/style/mobile.scss
@@ -1,18 +1,18 @@
 @import '@/style/basics.scss';
 @media screen and (min-width: 320px)and (max-width: 750px) {
     .el-header {
-        padding: 0 $padding-xs;
+        @apply px-1.5;
     }
     .layout-cont {
         .main-cont {
             .breadcrumb {
-                padding: 0 $padding-xs;
+                @apply px-1.5;
             }
         }
     }
     .layout-cont {
         .right-box {
-            margin-right: $margin-xs;
+            @apply mr-1.5;
         }
     }
     .el-main {
@@ -42,8 +42,7 @@
         height: 100%;
     }
     .card {
-        padding-left: $padding-xs;
-        padding-right: $padding-xs;
+        @apply px-1.5;
     }
     .card {
         .text {
@@ -74,4 +73,4 @@
             display: inline-block;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/web/src/view/dashboard/index.vue b/web/src/view/dashboard/index.vue
index b966deb5a..7565b2492 100644
--- a/web/src/view/dashboard/index.vue
+++ b/web/src/view/dashboard/index.vue
@@ -8,7 +8,8 @@
           <div class="gva-top-card-left-rows">
             <el-row>
               <el-col :span="8" :xs="24" :sm="8">
-                <div class="flex-center">
+
+                <div class="flex items-center">
                   <el-icon class="dashboard-icon">
                     <sort />
                   </el-icon>
@@ -16,7 +17,7 @@
                 </div>
               </el-col>
               <el-col :span="8" :xs="24" :sm="8">
-                <div class="flex-center">
+                <div class="flex items-center">
                   <el-icon class="dashboard-icon">
                     <avatar />
                   </el-icon>
@@ -24,7 +25,7 @@
                 </div>
               </el-col>
               <el-col :span="8" :xs="24" :sm="8">
-                <div class="flex-center">
+                <div class="flex items-center">
                   <el-icon class="dashboard-icon">
                     <comment />
                   </el-icon>
@@ -56,12 +57,8 @@
       </div>
     </div>
     <div class="gva-card-box">
-      <el-card class="gva-card quick-entrance">
-        <template #header>
-          <div class="card-header">
-            <span>快捷入口</span>
-          </div>
-        </template>
+      <div class="gva-card quick-entrance">
+        <div class="gva-card-title">快捷入口</div>
         <el-row :gutter="20">
           <el-col
             v-for="(card, key) in toolCards"
@@ -81,15 +78,12 @@
             </div>
           </el-col>
         </el-row>
-      </el-card>
-    <!-- <div class="quick-entrance-title"></div> -->
+      </div>
     </div>
     <div class="gva-card-box">
       <div class="gva-card">
-        <div class="card-header">
-          <span>数据统计</span>
-        </div>
-        <div class="echart-box">
+         <div class="gva-card-title">数据统计</div>
+        <div class="p-4">
           <el-row :gutter="20">
             <el-col :xs="24" :sm="18">
               <echarts-line />
@@ -172,52 +166,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin flex-center {
-    display: flex;
-    align-items: center;
-}
 .page {
-    background: #f0f2f5;
-    padding: 0;
+    @apply p-0;
     .gva-card-box{
-      padding: 12px 16px;
+      @apply p-4;
       &+.gva-card-box{
-        padding-top: 0px;
+        @apply pt-0;
       }
     }
     .gva-card {
-      box-sizing: border-box;
-        background-color: #fff;
-        border-radius: 2px;
-        height: auto;
-        padding: 26px 30px;
-        overflow: hidden;
-        box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
+      @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
+      .gva-card-title{
+        @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
+      }
     }
     .gva-top-card {
-        height: 260px;
-        @include flex-center;
-        justify-content: space-between;
-        color: #777;
+        @apply h-72 flex items-center justify-between text-gray-500;
         &-left {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
+          @apply h-full flex flex-col w-auto;
             &-title {
-                font-size: 22px;
-                color: #343844;
+              @apply text-3xl text-gray-600;
             }
             &-dot {
-                font-size: 16px;
-                color: #6B7687;
-                margin-top: 24px;
+              @apply mt-4 text-gray-600 text-lg;
             }
             &-rows {
-                // margin-top: 15px;
-                margin-top: 18px;
-                color: #6B7687;
-                width: 600px;
-                align-items: center;
+              @apply mt-4 flex flex-col text-gray-600 w-[500px];
             }
             &-item{
               +.gva-top-card-left-item{
@@ -233,76 +207,38 @@ export default {
         }
     }
      ::v-deep(.el-card__header){
-          padding:0;
-          border-bottom: none;
+          @apply p-0  border-gray-200;
         }
         .card-header{
-          padding-bottom: 20px;
-          border-bottom: 1px solid #e8e8e8;
+          @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
         }
-    .quick-entrance-title {
-        height: 30px;
-        font-size: 22px;
-        color: #333;
-        width: 100%;
-        border-bottom: 1px solid #eee;
-    }
     .quick-entrance-items {
-        @include flex-center;
-        justify-content: center;
-        text-align: center;
-        color: #333;
+      @apply flex items-center justify-center text-center text-gray-800;
         .quick-entrance-item {
-          padding: 16px 28px;
-          margin-top: -16px;
-          margin-bottom: -16px;
-          border-radius: 4px;
-          transition: all 0.2s;
+          @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
           &:hover{
-            box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 0.55);
+            @apply shadow-lg;
           }
-            cursor: pointer;
-            height: auto;
-            text-align: center;
-            // align-items: center;
             &-icon {
-                width: 50px;
-                height: 50px !important;
-                border-radius: 8px;
-                @include flex-center;
-                justify-content: center;
-                margin: 0 auto;
-                i {
-                    font-size: 24px;
-                }
+              @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
             }
             p {
-                margin-top: 10px;
+                @apply mt-2.5;
             }
         }
     }
-    .echart-box{
-      padding: 14px;
-    }
 }
 .dashboard-icon {
-    font-size: 20px;
-    color: rgb(85, 160, 248);
-    width: 30px;
-    height: 30px;
-    margin-right: 10px;
-    @include flex-center;
-}
-.flex-center {
-    @include flex-center;
+  @apply flex items-center text-xl mr-2 text-blue-400;
 }
 
+
 //小屏幕不显示右侧，将登录框居中
 @media (max-width: 750px) {
     .gva-card {
-        padding: 20px 10px !important;
+      @apply px-5 py-2.5;
         .gva-top-card {
-            height: auto;
+          @apply h-auto;
             &-left {
                 &-title {
                     font-size: 20px !important;
diff --git a/web/src/view/example/upload/upload.vue b/web/src/view/example/upload/upload.vue
index 38706de0e..5d0a1d53f 100644
--- a/web/src/view/example/upload/upload.vue
+++ b/web/src/view/example/upload/upload.vue
@@ -7,27 +7,16 @@
       <div class="gva-btn-list">
         <upload-common
           v-model:imageCommon="imageCommon"
-          class="upload-btn"
           @on-success="getTableData"
         />
         <upload-image
           v-model:imageUrl="imageUrl"
           :file-size="512"
           :max-w-h="1080"
-          class="upload-btn"
           @on-success="getTableData"
         />
-
-        <el-form ref="searchForm" :inline="true" :model="search">
-          <el-form-item label="">
-            <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
-          </el-form-item>
-
-          <el-form-item>
-            <el-button type="primary" icon="search" @click="getTableData">查询</el-button>
-          </el-form-item>
-        </el-form>
-
+        <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
+        <el-button type="primary" icon="search" @click="getTableData">查询</el-button>
       </div>
 
       <el-table :data="tableData">
@@ -204,7 +193,4 @@ export default {
   cursor: pointer;
 }
 
-.upload-btn + .upload-btn {
-  margin-left: 12px;
-}
 </style>
diff --git a/web/src/view/layout/index.vue b/web/src/view/layout/index.vue
index 15ed77eb9..e300caa00 100644
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -19,14 +19,14 @@
             <el-row>
               <el-col>
                 <el-header class="header-cont">
-                  <el-row class="pd-0">
-                    <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
-                      <div class="menu-total" @click="totalCollapse">
+                  <el-row class="p-0">
+                    <el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" class="z-50 flex items-center pl-3">
+                      <div class="text-black cursor-pointer text-lg leading-5" @click="totalCollapse">
                         <div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
                         <div v-else class="gvaIcon gvaIcon-arrow-double-left" />
                       </div>
                     </el-col>
-                    <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
+                    <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1" class="flex items-center">
                       <!-- 修改为手机端不显示顶部标签 -->
                       <el-breadcrumb v-show="!isMobile" class="breadcrumb">
                         <el-breadcrumb-item
@@ -39,8 +39,8 @@
                       <div class="right-box">
                         <Search />
                         <el-dropdown>
-                          <div class="dp-flex justify-content-center align-items height-full width-full">
-                            <span class="header-avatar" style="cursor: pointer">
+                          <div class="flex justify-center items-center h-full w-full">
+                            <span class="cursor-pointer flex justify-center items-center">
                               <CustomPic />
                               <span v-show="!isMobile" style="margin-left: 5px">{{ userStore.userInfo.nickName }}</span>
                               <el-icon>
diff --git a/web/src/view/layout/search/search.vue b/web/src/view/layout/search/search.vue
index cd0a95782..3368b71bd 100644
--- a/web/src/view/layout/search/search.vue
+++ b/web/src/view/layout/search/search.vue
@@ -1,20 +1,8 @@
 <template>
   <div class="search-component">
-    <div
-      class="user-box"
-    >
       <div class="gvaIcon gvaIcon-refresh" :class="[reload ? 'reloading' : '']" @click="handleReload" />
-    </div>
-    <div
-      class="user-box"
-    >
-      <Screenfull class="search-icon" :style="{cursor:'pointer'}" />
-    </div>
-    <div
-      class="user-box"
-    >
+      <Screenfull class="search-icon" />
       <div class="service gvaIcon-customer-service" @click="toService" />
-    </div>
   </div>
 </template>
 
diff --git a/web/src/view/person/person.vue b/web/src/view/person/person.vue
index 19a30a29c..23943b846 100644
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -2,7 +2,7 @@
   <div>
     <el-row>
       <el-col :span="6">
-        <div class="fl-left avatar-box">
+        <div class="float-left avatar-box">
           <div class="user-card">
             <div class="header-box">
               <SelectImage v-model="userStore.userInfo.headerImg" />
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index a73487572..875319841 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -29,30 +29,30 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <div class="gva-btn-list flex items-center gap-3">
+        <div class="gva-btn-list">
           <el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
           <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
+          <el-popover v-model="deleteVisible" placement="top" width="160">
+            <p>确定要删除吗？</p>
+            <div style="text-align: right; margin-top: 8px;">
+              <el-button type="primary" link @click="deleteVisible = false">取消</el-button>
+              <el-button type="primary" @click="onDelete">确定</el-button>
+            </div>
+            <template #reference>
+              <el-button icon="delete" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
+            </template>
+          </el-popover>
+          <el-popover v-model="freshVisible" placement="top" width="160">
+            <p>确定要刷新Casbin缓存吗？</p>
+            <div style="text-align: right; margin-top: 8px;">
+              <el-button type="primary" link @click="freshVisible = false">取消</el-button>
+              <el-button type="primary" @click="onFresh">确定</el-button>
+            </div>
+            <template #reference>
+              <el-button icon="Refresh" style="margin-left: 10px;" @click="freshVisible = true">刷新缓存</el-button>
+            </template>
+          </el-popover>
         </div>
-        <el-popover v-model="deleteVisible" placement="top" width="160">
-          <p>确定要删除吗？</p>
-          <div style="text-align: right; margin-top: 8px;">
-            <el-button type="primary" link @click="deleteVisible = false">取消</el-button>
-            <el-button type="primary" @click="onDelete">确定</el-button>
-          </div>
-          <template #reference>
-            <el-button icon="delete" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
-          </template>
-        </el-popover>
-        <el-popover v-model="freshVisible" placement="top" width="160">
-          <p>确定要刷新Casbin缓存吗？</p>
-          <div style="text-align: right; margin-top: 8px;">
-            <el-button type="primary" link @click="freshVisible = false">取消</el-button>
-            <el-button type="primary" @click="onFresh">确定</el-button>
-          </div>
-          <template #reference>
-            <el-button icon="Refresh" style="margin-left: 10px;" @click="freshVisible = true">刷新缓存</el-button>
-          </template>
-        </el-popover>
       </div>
       <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
         <el-table-column
diff --git a/web/src/view/superAdmin/authority/authority.vue b/web/src/view/superAdmin/authority/authority.vue
index 0f0ac5fdc..00b726fd4 100644
--- a/web/src/view/superAdmin/authority/authority.vue
+++ b/web/src/view/superAdmin/authority/authority.vue
@@ -2,7 +2,7 @@
   <div class="authority">
     <warning-bar title="注：右上角头像下拉可切换角色" />
     <div class="gva-table-box">
-      <div class="gva-btn-list flex items-center gap-3">
+      <div class="gva-btn-list">
         <el-button type="primary" icon="plus" @click="addAuthority(0)">新增角色</el-button>
         <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=8&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
       </div>
@@ -394,7 +394,7 @@ export default {
 }
 .tree-content{
   margin-top: 10px;
-  height: calc(100vh - 148px);
+  height: calc(100vh - 158px);
   overflow: auto;
 }
 
diff --git a/web/src/view/superAdmin/authority/components/apis.vue b/web/src/view/superAdmin/authority/components/apis.vue
index f865120e3..ce00ef836 100644
--- a/web/src/view/superAdmin/authority/components/apis.vue
+++ b/web/src/view/superAdmin/authority/components/apis.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="clearfix sticky-button">
-      <el-input v-model="filterText" class="fitler" placeholder="筛选" />
-      <el-button class="fl-right" type="primary" @click="authApiEnter">确 定</el-button>
+    <div class="sticky top-0.5 z-10 bg-white">
+      <el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
+      <el-button class="float-right" type="primary" @click="authApiEnter">确 定</el-button>
     </div>
     <div class="tree-content">
       <el-tree
@@ -134,6 +134,4 @@ watch(filterText, (val) => {
 
 </script>
 
-<style lang="scss" scoped>
-@import "@/style/button.scss";
-</style>
+
diff --git a/web/src/view/superAdmin/authority/components/datas.vue b/web/src/view/superAdmin/authority/components/datas.vue
index 096fd6935..0de03557f 100644
--- a/web/src/view/superAdmin/authority/components/datas.vue
+++ b/web/src/view/superAdmin/authority/components/datas.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <warning-bar title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）。此功能不建议使用，建议使用插件市场【组织管理功能（点击前往）】来管理资源权限。" href="https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=36" />
-    <div class="clearfix sticky-button" style="margin: 18px">
-      <el-button class="fl-right" type="primary" @click="authDataEnter">确 定</el-button>
-      <el-button class="fl-left" type="primary" @click="all">全选</el-button>
-      <el-button class="fl-left" type="primary" @click="self">本角色</el-button>
-      <el-button class="fl-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
+    <div class="sticky top-0.5 z-10 bg-white my-4">
+      <el-button class="float-left" type="primary" @click="all">全选</el-button>
+      <el-button class="float-left" type="primary" @click="self">本角色</el-button>
+      <el-button class="float-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
+      <el-button class="float-right" type="primary" @click="authDataEnter">确 定</el-button>
     </div>
-    <div class="tree-content">
+    <div class="clear-both pt-4">
       <el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
         <el-checkbox v-for="(item,key) in authoritys" :key="key" :label="item">{{ item.authorityName }}</el-checkbox>
       </el-checkbox-group>
diff --git a/web/src/view/superAdmin/authority/components/menus.vue b/web/src/view/superAdmin/authority/components/menus.vue
index b59373a67..db6eb74c9 100644
--- a/web/src/view/superAdmin/authority/components/menus.vue
+++ b/web/src/view/superAdmin/authority/components/menus.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="clearfix sticky-button">
-      <el-input v-model="filterText" class="fitler" placeholder="筛选" />
-      <el-button class="fl-right" type="primary" @click="relation">确 定</el-button>
+    <div class="sticky top-0.5 z-10 bg-white">
+      <el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
+      <el-button class="float-right" type="primary" @click="relation">确 定</el-button>
     </div>
-    <div class="tree-content">
+    <div class="tree-content clear-both">
       <el-tree
         ref="menuTree"
         :data="menuTreeData"
@@ -216,10 +216,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "@/style/button.scss";
 .custom-tree-node{
   span+span{
-    margin-left: 12px;
+    @apply ml-3;
   }
 }
 </style>
diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
index 48df04150..5779e1f7a 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -36,7 +36,7 @@
       </el-form>
     </div>
     <div class="gva-table-box">
-      <div class="gva-btn-list flex items-center gap-3">
+      <div class="gva-btn-list">
         <el-button
 
           type="primary"
diff --git a/web/src/view/superAdmin/menu/menu.vue b/web/src/view/superAdmin/menu/menu.vue
index fb9eb8ce3..c4badadab 100644
--- a/web/src/view/superAdmin/menu/menu.vue
+++ b/web/src/view/superAdmin/menu/menu.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="gva-table-box">
-      <div class="gva-btn-list flex items-center gap-3">
+      <div class="gva-btn-list">
         <el-button type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
         <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT/?p=4&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
       </div>
diff --git a/web/src/view/systemTools/autoCode/index.vue b/web/src/view/systemTools/autoCode/index.vue
index d64e6444b..ca333c1b8 100644
--- a/web/src/view/systemTools/autoCode/index.vue
+++ b/web/src/view/systemTools/autoCode/index.vue
@@ -262,7 +262,7 @@
         </el-table-column>
       </el-table>
       <!-- 组件列表 -->
-      <div class="gva-btn-list justify-content-flex-end auto-btn-list">
+      <div class="gva-btn-list justify-end auto-btn-list">
         <el-button type="primary" @click="enterForm(true)">预览代码</el-button>
         <el-button type="primary" @click="enterForm(false)">生成代码</el-button>
       </div>