diff --git a/web/src/main.js b/web/src/main.js
index 5cd0c413..4b09f8ca 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import 'element-plus/dist/index.css'
+import './style/element_visiable.scss'
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 // 引入gin-vue-admin前端初始化相关内容
diff --git a/web/src/style/element_visiable.scss b/web/src/style/element_visiable.scss
index 17d4ec2a..67347bb7 100644
--- a/web/src/style/element_visiable.scss
+++ b/web/src/style/element_visiable.scss
@@ -7,15 +7,74 @@ $--color-primary: #1890ff;
     border-radius: 4px;
   }
 }
-///* 改变 icon 字体路径变量，必需 */
-//$--font-path: '~element-ui/lib/theme-chalk/fonts';
-//
-//
-//
-//@import "~element-ui/packages/theme-chalk/src/index";
-//
+.el-dialog{
+  border-radius: 10px;
+  .dialog-footer{
+    margin-right: 8px;
+  }
+}
+
 
 
+/* ZOOM FADE */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.35s, opacity 0.28s ease-in-out;
+}
+.zoom-fade-enter {
+  transform: scale(0.97);
+  opacity: 0;
+}
+.zoom-fade-leave-to {
+  transform: scale(1.03);
+  opacity: 0;
+}
+/* FADE TRNASITION */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s ease-in-out;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+/* PAGE SLIDE */
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: opacity 0.35s, transform 0.4s;
+}
+.slide-fade-enter {
+  opacity: 0;
+  transform: translateX(-30%);
+}
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(30%);
+}
+/* ZOOM OUT */
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
+}
+.zoom-out-enter,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+/* UNFOLD SLIDE */
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.3s, transform 0.35s;
+}
+.fade-bottom-enter {
+  opacity: 0;
+  transform: translateY(-8%);
+}
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(8%);
+}
+
 :export {
   colorPrimary: $--color-primary
 }
diff --git a/web/src/view/layout/index.vue b/web/src/view/layout/index.vue
index f213087b..118c820c 100644
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -1,11 +1,15 @@
 <template>
   <el-container class="layout-cont">
-    <el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
-      <el-row :class="[isShadowBg?'shadowBg':'']" @click="changeShadow()" />
+    <el-container :class="[isSider ? 'openside' : 'hideside', isMobile ? 'mobile' : '']">
+      <el-row :class="[isShadowBg ? 'shadowBg' : '']" @click="changeShadow()" />
       <el-aside class="main-cont main-left">
-        <div class="tilte" :style="{background: backgroundColor}">
+        <div class="tilte" :style="{ background: backgroundColor }">
           <img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
-          <h2 v-if="isSider" class="tit-text" :style="{color:textColor}">{{ $GIN_VUE_ADMIN.appName }}</h2>
+          <h2
+            v-if="isSider"
+            class="tit-text"
+            :style="{ color: textColor }"
+          >{{ $GIN_VUE_ADMIN.appName }}</h2>
         </div>
         <Aside class="aside" />
       </el-aside>
@@ -13,11 +17,10 @@
       <el-main class="main-cont main-right">
         <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
           <div
-            :style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
+            :style="{ width: `calc(100% - ${isMobile ? '0px' : isCollapse ? '54px' : '220px'})` }"
             class="topfix"
           >
             <el-row>
-              <!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
               <el-col>
                 <el-header class="header-cont">
                   <el-row class="pd-0">
@@ -30,7 +33,7 @@
                     <el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
                       <el-breadcrumb class="breadcrumb">
                         <el-breadcrumb-item
-                          v-for="item in matched.slice(1,matched.length)"
+                          v-for="item in matched.slice(1, matched.length)"
                           :key="item.path"
                         >{{ item.meta.title }}</el-breadcrumb-item>
                       </el-breadcrumb>
@@ -38,9 +41,11 @@
                     <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
                       <div class="right-box">
                         <Search />
-                        <Screenfull class="screenfull" :style="{cursor:'pointer'}" />
+                        <Screenfull class="screenfull" :style="{ cursor: 'pointer' }" />
                         <el-dropdown>
-                          <div class="dp-flex justify-content-center align-items height-full width-full">
+                          <div
+                            class="dp-flex justify-content-center align-items height-full width-full"
+                          >
                             <span class="header-avatar" style="cursor: pointer">
                               <CustomPic />
                               <span style="margin-left: 5px">{{ userInfo.nickName }}</span>
@@ -50,15 +55,17 @@
                           <template #dropdown>
                             <el-dropdown-menu class="dropdown-group">
                               <el-dropdown-item>
-                                <span style="font-weight: 600;">
-                                  当前角色：{{ userInfo.authority.authorityName }}
-                                </span>
+                                <span
+                                  style="font-weight: 600;"
+                                >当前角色：{{ userInfo.authority.authorityName }}</span>
                               </el-dropdown-item>
                               <template v-if="userInfo.authorities">
-                                <el-dropdown-item v-for="item in userInfo.authorities.filter(i=>i.authorityId!==userInfo.authorityId)" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
-                                  <span>
-                                    切换为：{{ item.authorityName }}
-                                  </span>
+                                <el-dropdown-item
+                                  v-for="item in userInfo.authorities.filter(i => i.authorityId !== userInfo.authorityId)"
+                                  :key="item.authorityId"
+                                  @click="changeUserAuth(item.authorityId)"
+                                >
+                                  <span>切换为：{{ item.authorityName }}</span>
                                 </el-dropdown-item>
                               </template>
                               <el-dropdown-item icon="el-icon-s-custom" @click="toPerson">个人信息</el-dropdown-item>
@@ -73,20 +80,30 @@
               </el-col>
             </el-row>
             <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-            <!--
-            :to="{ path: item.path }" 暂时注释不用-->
             <HistoryComponent ref="layoutHistoryComponent" />
           </div>
         </transition>
-        <router-view v-if="$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
-          <transition mode="out-in" name="el-fade-in-linear">
+        <router-view
+          v-if="$route.meta.keepAlive && reloadFlag"
+          v-slot="{ Component }"
+          v-loading="loadingFlag"
+          element-loading-text="正在加载中"
+          class="admin-box"
+        >
+          <transition mode="out-in" name="zoom-fade">
             <keep-alive>
               <component :is="Component" />
             </keep-alive>
           </transition>
         </router-view>
-        <router-view v-if="!$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
-          <transition mode="out-in" name="el-fade-in-linear">
+        <router-view
+          v-if="!$route.meta.keepAlive && reloadFlag"
+          v-slot="{ Component }"
+          v-loading="loadingFlag"
+          element-loading-text="正在加载中"
+          class="admin-box"
+        >
+          <transition mode="out-in" name="zoom-fade">
             <component :is="Component" />
           </transition>
         </router-view>
@@ -95,7 +112,6 @@
         <setting />
       </el-main>
     </el-container>
-
   </el-container>
 </template>
 
@@ -242,14 +258,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
-@import '@/style/mobile.scss';
+<style lang="scss" scoped>
+@import "@/style/mobile.scss";
 
-.dark{
+.dark {
   background-color: #191a23 !important;
   color: #fff !important;
 }
-.light{
+.light {
   background-color: #fff !important;
   color: #000 !important;
 }
diff --git a/web/src/view/layout/setting/index.vue b/web/src/view/layout/setting/index.vue
index 3ed03886..9c381981 100644
--- a/web/src/view/layout/setting/index.vue
+++ b/web/src/view/layout/setting/index.vue
@@ -75,7 +75,7 @@ export default {
     right: 0
   }
   position: fixed;
-  right: -20px;
+  right: 0;
   bottom: 15%;
   height: 40px;
   width: 40px;
@@ -84,7 +84,7 @@ export default {
   justify-content: center;
   z-index: 999;
   color: #fff;
-  border-radius: 4px 0 0 4px;
+  border-radius: 4px 4px 0 0 ;
   cursor: pointer;
   -webkit-box-shadow: inset 0 0 6px rgba(0 ,0 ,0, 10%);
 }
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index 910b0563..c034a330 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -29,7 +29,6 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
         <el-popover v-model:visible="deleteVisible" placement="top" width="160">
           <p>确定要删除吗？</p>
@@ -38,7 +37,12 @@
             <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
           </div>
           <template #reference>
-            <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;">删除</el-button>
+            <el-button
+              icon="el-icon-delete"
+              size="mini"
+              style="margin-left: 10px;"
+              :disabled="showTableHeadDelbtn"
+            >删除</el-button>
           </template>
         </el-popover>
       </div>
@@ -53,26 +57,25 @@
         <el-table-column align="center" label="API简介" min-width="150" prop="description" sortable="custom" />
         <el-table-column align="center" label="请求" min-width="150" prop="method" sortable="custom">
           <template #default="scope">
-            <div>
-              {{ scope.row.method }} / {{ methodFiletr(scope.row.method) }}
-            </div>
+            <div>{{ scope.row.method }} / {{ methodFiletr(scope.row.method) }}</div>
           </template>
         </el-table-column>
 
         <el-table-column align="center" fixed="right" label="操作" width="200">
           <template #default="scope">
-            <el-button
-              icon="el-icon-edit"
-              size="small"
-              type="text"
-              @click="editApi(scope.row)"
-            >编辑</el-button>
-            <el-button
-              icon="el-icon-delete"
-              size="small"
-              type="text"
-              @click="deleteApi(scope.row)"
-            >删除</el-button>
+            <el-button icon="el-icon-edit" size="small" type="text" @click="editApi(scope.row)">编辑</el-button>
+            <el-popconfirm
+              confirmButtonText="好的"
+              cancelButtonText="不用了"
+              icon="el-icon-info"
+              iconColor="red"
+              title="你确定要删除吗？"
+              @confirm="deleteApi(scope.row)"
+            >
+              <template #reference>
+                <el-button icon="el-icon-delete" size="small" type="text">删除</el-button>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -87,12 +90,11 @@
           @size-change="handleSizeChange"
         />
       </div>
-
     </div>
 
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
       <warning-bar title="新增API，需要在角色管理内篇日志权限才可使用" />
-      <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="apiForm" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="路径" prop="path">
           <el-input v-model="form.path" autocomplete="off" />
         </el-form-item>
@@ -192,7 +194,8 @@ export default {
         description: [
           { required: true, message: '请输入api介绍', trigger: 'blur' }
         ]
-      }
+      },
+      showTableHeadDelbtn: true
     }
   },
   created() {
@@ -209,6 +212,11 @@ export default {
     },
     //  选中api
     handleSelectionChange(val) {
+      if (val.length) {
+        this.showTableHeadDelbtn = false
+      } else {
+        this.showTableHeadDelbtn = true
+      }
       this.apis = val
     },
     async onDelete() {
@@ -276,30 +284,17 @@ export default {
       this.openDialog('edit')
     },
     async deleteApi(row) {
-      this.$confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async() => {
-          const res = await deleteApi(row)
-          if (res.code === 0) {
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
-            }
-            this.getTableData()
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
+      const res = await deleteApi(row)
+      if (res.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
         })
+        if (this.tableData.length === 1 && this.page > 1) {
+          this.page--
+        }
+        this.getTableData()
+      }
     },
     async enterDialog() {
       this.$refs.apiForm.validate(async valid => {
diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
index 15662005..1f365f1d 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -30,7 +30,6 @@
       <el-table
         ref="multipleTable"
         :data="tableData"
-        style="width: 100%"
         tooltip-effect="dark"
       >
         <el-table-column type="selection" width="55" />
diff --git a/web/vite.config.js b/web/vite.config.js
index 735f3580..1787f490 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -80,4 +80,4 @@ export default ({
       }
     },
   }
-}
\ No newline at end of file
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index c9058985..c9aa7a8c 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1083,10 +1083,10 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@element-plus/icons@^0.0.11":
+"@element-plus/icons@0.0.11", "@element-plus/icons@^0.0.11":
   version "0.0.11"
-  resolved "https://registry.nlark.com/@element-plus/icons/download/@element-plus/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
-  integrity sha1-mxh8ACd0VIuRGFDRf6X8L5pRX1c=
+  resolved "https://repo.huaweicloud.com/repository/npm/@element-plus/icons/-/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
+  integrity sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==
 
 "@hapi/address@2.x.x":
   version "2.1.4"