From d064238e57db9d325305621acc184f01dcdc0775 Mon Sep 17 00:00:00 2001
From: Zhunianya <2698076424@qq.com>
Date: Mon, 23 Mar 2026 16:22:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=88=97=E8=A1=A8):=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/views/iot/category/index.vue       | 250 +++---
 vue/src/views/iot/clientDetails/index.vue  |  54 +-
 vue/src/views/iot/device/index.vue         |  70 +-
 vue/src/views/iot/group/index.vue          | 562 +++++++------
 vue/src/views/iot/log/index.vue            | 522 ++++++------
 vue/src/views/iot/news/index.vue           |  64 +-
 vue/src/views/iot/newsCategory/index.vue   |  60 +-
 vue/src/views/iot/platform/index.vue       |  97 ++-
 vue/src/views/iot/product/index.vue        |  26 +-
 vue/src/views/iot/sip/index.vue            |  58 +-
 vue/src/views/iot/template/index.vue       |  58 +-
 vue/src/views/monitor/cache/index.vue      |  40 +
 vue/src/views/monitor/job/index.vue        | 916 ++++++++++-----------
 vue/src/views/monitor/logininfor/index.vue |  54 +-
 vue/src/views/monitor/online/index.vue     |  50 +-
 vue/src/views/monitor/operlog/index.vue    |  58 +-
 vue/src/views/monitor/server/index.vue     |  40 +
 vue/src/views/system/config/index.vue      | 251 ++++--
 vue/src/views/system/dept/index.vue        | 315 ++++---
 vue/src/views/system/dict/index.vue        | 297 ++++---
 vue/src/views/system/menu/index.vue        | 509 +++++++-----
 vue/src/views/system/notice/index.vue      | 296 ++++---
 vue/src/views/system/post/index.vue        | 235 ++++--
 vue/src/views/system/role/index.vue        | 385 +++++----
 vue/src/views/system/user/index.vue        | 313 ++++---
 vue/src/views/tool/gen/index.vue           |  58 +-
 26 files changed, 3538 insertions(+), 2100 deletions(-)

diff --git a/vue/src/views/iot/category/index.vue b/vue/src/views/iot/category/index.vue
index c6e29548..835bcaf0 100644
--- a/vue/src/views/iot/category/index.vue
+++ b/vue/src/views/iot/category/index.vue
@@ -1,24 +1,22 @@
 <template>
-    <div style="padding:6px;">
-        <el-card v-show="showSearch" style="margin-bottom:5px;">
-            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
+    <div style="padding: 6px">
+        <el-card v-show="showSearch" style="margin-bottom: 5px">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('product.category.142342-0')" prop="categoryName">
-                    <el-input v-model="queryParams.categoryName" :placeholder="$t('product.index.091251-3')" clearable size="small"
-                        @keyup.enter.native="handleQuery" />
+                    <el-input v-model="queryParams.categoryName" :placeholder="$t('product.index.091251-3')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
-                <el-form-item style="float:right;">
-                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                        v-hasPermi="['iot:category:add']">{{ $t('add') }}</el-button>
+                <el-form-item style="float: right">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:category:add']">{{ $t('add') }}</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
 
-        <el-card style="padding-bottom:100px;">
-            <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange" border>
+        <el-card style="padding-bottom: 100px">
+            <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange" :border="false" header-cell-class-name="table-header">
                 <el-table-column :label="$t('product.category.142342-0')" align="center" prop="categoryName" />
                 <el-table-column :label="$t('remark')" align="left" header-align="center" prop="remark" min-width="150" />
                 <el-table-column :label="$t('template.index.891112-12')" align="center" prop="isSys">
@@ -34,19 +32,28 @@
                 </el-table-column>
                 <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width" width="150">
                     <template slot-scope="scope">
-                        <el-button size="small" type="text" style="padding:5px;" icon="el-icon-edit"
-                            @click="handleUpdate(scope.row)" v-hasPermi="['iot:category:query']"
-                            v-if="scope.row.isSys == '0' ? true : !isTenant">{{ $t('update') }}</el-button>
-                        <el-button size="small" type="text" style="padding:5px;" icon="el-icon-delete"
-                            @click="handleDelete(scope.row)" v-hasPermi="['iot:category:remove']"
-                            v-if="scope.row.isSys == '0' ? true : !isTenant">{{ $t('del') }}</el-button>
-                        <span style="font-size:10px;color:#999;" v-if="scope.row.isSys == '1' && isTenant">{{ $t('template.index.891112-21') }}</span>
+                        <el-button size="small" type="text" style="padding: 5px" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:category:query']" v-if="scope.row.isSys == '0' ? true : !isTenant">
+                            {{ $t('update') }}
+                        </el-button>
+                        <el-button
+                            size="small"
+                            type="text"
+                            style="padding: 5px"
+                            icon="el-icon-delete"
+                            @click="handleDelete(scope.row)"
+                            v-hasPermi="['iot:category:remove']"
+                            v-if="scope.row.isSys == '0' ? true : !isTenant"
+                        >
+                            {{ $t('del') }}
+                        </el-button>
+                        <span style="font-size: 10px; color: #999" v-if="scope.row.isSys == '1' && isTenant">{{ $t('template.index.891112-21') }}</span>
                     </template>
                 </el-table-column>
             </el-table>
 
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-                :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
 
             <!-- 添加或修改产品分类对话框 -->
             <el-dialog :title="$t('product.product-edit.473153-3')" :visible.sync="open" width="500px" append-to-body>
@@ -55,38 +62,28 @@
                         <el-input v-model="form.categoryName" :placeholder="$t('product.index.091251-3')" />
                     </el-form-item>
                     <el-form-item :label="$t('product.category.142342-1')" prop="orderNum">
-                        <el-input-number controls-position="right" v-model="form.orderNum" 
-                            :placeholder="$t('product.category.142342-2')" style="width:100%" />
+                        <el-input-number controls-position="right" v-model="form.orderNum" :placeholder="$t('product.category.142342-2')" style="width: 100%" />
                     </el-form-item>
                     <el-form-item :label="$t('remark')" prop="remark">
                         <el-input v-model="form.remark" type="textarea" :placeholder="$t('product.category.142342-3')" />
                     </el-form-item>
                 </el-form>
                 <div slot="footer" class="dialog-footer">
-                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:category:edit']"
-                        v-show="form.categoryId">{{ $t('update') }}</el-button>
-                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:category:add']"
-                        v-show="!form.categoryId">{{ $t('add') }}</el-button>
+                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:category:edit']" v-show="form.categoryId">{{ $t('update') }}</el-button>
+                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:category:add']" v-show="!form.categoryId">{{ $t('add') }}</el-button>
                     <el-button @click="cancel">{{ $t('cancel') }}</el-button>
                 </div>
             </el-dialog>
-
         </el-card>
     </div>
 </template>
 
 <script>
-import {
-    listCategory,
-    getCategory,
-    delCategory,
-    addCategory,
-    updateCategory
-} from "@/api/iot/category";
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/iot/category';
 
 export default {
-    name: "Category",
-    dicts: ["iot_yes_no"],
+    name: 'Category',
+    dicts: ['iot_yes_no'],
     data() {
         return {
             // 是否为租户
@@ -106,7 +103,7 @@ export default {
             // 产品分类表格数据
             categoryList: [],
             // 弹出层标题
-            title: "",
+            title: '',
             // 是否显示弹出层
             open: false,
             // 查询参数
@@ -120,40 +117,49 @@ export default {
             form: {},
             // 表单校验
             rules: {
-                categoryName: [{
-                    required: true,
-                    message: this.$t('product.category.142342-4'),
-                    trigger: "blur"
-                }, {
-                    min: 1,
-                    max: 64,
-                    message: this.$t('product.category.142342-12'),
-                },
+                categoryName: [
+                    {
+                        required: true,
+                        message: this.$t('product.category.142342-4'),
+                        trigger: 'blur',
+                    },
+                    {
+                        min: 1,
+                        max: 64,
+                        message: this.$t('product.category.142342-12'),
+                    },
                 ],
-                orderNum: [{
-                    required: true,
-                    message: this.$t('product.category.142342-13'),
-                    trigger: 'blur',
-                }, {
-                    type: 'number',
-                    min: -2147483648,
-                    max: 2147483647,
-                    message: this.$t('product.category.142342-14'),
-                    trigger: 'blur',
-                }],
-                remark: [{
-                    required: false,
-                    min: 0,
-                    max: 500,
-                    message: this.$t('product.category.142342-15'),
-                    trigger: 'blur',
-                }],
-                isSys: [{
-                    required: true,
-                    message: this.$t('product.category.142342-5'),
-                    trigger: "blur"
-                }],
-            }
+                orderNum: [
+                    {
+                        required: true,
+                        message: this.$t('product.category.142342-13'),
+                        trigger: 'blur',
+                    },
+                    {
+                        type: 'number',
+                        min: -2147483648,
+                        max: 2147483647,
+                        message: this.$t('product.category.142342-14'),
+                        trigger: 'blur',
+                    },
+                ],
+                remark: [
+                    {
+                        required: false,
+                        min: 0,
+                        max: 500,
+                        message: this.$t('product.category.142342-15'),
+                        trigger: 'blur',
+                    },
+                ],
+                isSys: [
+                    {
+                        required: true,
+                        message: this.$t('product.category.142342-5'),
+                        trigger: 'blur',
+                    },
+                ],
+            },
         };
     },
     created() {
@@ -162,14 +168,14 @@ export default {
     },
     methods: {
         init() {
-            if (this.$store.state.user.roles.indexOf("tenant") !== -1) {
-                this.isTenant = true
+            if (this.$store.state.user.roles.indexOf('tenant') !== -1) {
+                this.isTenant = true;
             }
         },
         /** 查询产品分类列表 */
         getList() {
             this.loading = true;
-            listCategory(this.queryParams).then(response => {
+            listCategory(this.queryParams).then((response) => {
                 this.categoryList = response.rows;
                 this.total = response.total;
                 this.loading = false;
@@ -195,9 +201,9 @@ export default {
                 createTime: null,
                 updateBy: null,
                 updateTime: null,
-                remark: null
+                remark: null,
             };
-            this.resetForm("form");
+            this.resetForm('form');
         },
         /** 搜索按钮操作 */
         handleQuery() {
@@ -206,14 +212,14 @@ export default {
         },
         /** 重置按钮操作 */
         resetQuery() {
-            this.resetForm("queryForm");
+            this.resetForm('queryForm');
             this.handleQuery();
         },
         // 多选框选中数据
         handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.categoryId)
-            this.single = selection.length !== 1
-            this.multiple = !selection.length
+            this.ids = selection.map((item) => item.categoryId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
         },
         /** 新增按钮操作 */
         handleAdd() {
@@ -224,8 +230,8 @@ export default {
         /** 修改按钮操作 */
         handleUpdate(row) {
             this.reset();
-            const categoryId = row.categoryId || this.ids
-            getCategory(categoryId).then(response => {
+            const categoryId = row.categoryId || this.ids;
+            getCategory(categoryId).then((response) => {
                 this.form = response.data;
                 this.open = true;
                 this.title = this.$t('product.category.142342-7');
@@ -233,16 +239,16 @@ export default {
         },
         /** 提交按钮 */
         submitForm() {
-            this.$refs["form"].validate(valid => {
+            this.$refs['form'].validate((valid) => {
                 if (valid) {
                     if (this.form.categoryId != null) {
-                        updateCategory(this.form).then(response => {
+                        updateCategory(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('updateSuccess'));
                             this.open = false;
                             this.getList();
                         });
                     } else {
-                        addCategory(this.form).then(response => {
+                        addCategory(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('addSuccess'));
                             this.open = false;
                             this.getList();
@@ -254,22 +260,68 @@ export default {
         /** 删除按钮操作 */
         handleDelete(row) {
             const categoryIds = row.categoryId || this.ids;
-            let msg = "";
-            this.$modal.confirm(this.$t('product.category.142342-8', [categoryIds])).then(function () {
-                return delCategory(categoryIds).then(response => {
-                    msg = response.msg;
-                });
-            }).then(() => {
-                this.getList();
-                this.$modal.msgSuccess(msg);
-            }).catch(() => { });
+            let msg = '';
+            this.$modal
+                .confirm(this.$t('product.category.142342-8', [categoryIds]))
+                .then(function () {
+                    return delCategory(categoryIds).then((response) => {
+                        msg = response.msg;
+                    });
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(msg);
+                })
+                .catch(() => {});
         },
         /** 导出按钮操作 */
         handleExport() {
-            this.download('iot/category/export', {
-                ...this.queryParams
-            }, `category_${new Date().getTime()}.xlsx`)
-        }
-    }
+            this.download(
+                'iot/category/export',
+                {
+                    ...this.queryParams,
+                },
+                `category_${new Date().getTime()}.xlsx`
+            );
+        },
+    },
 };
 </script>
+
+<style lang="scss" scoped>
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/clientDetails/index.vue b/vue/src/views/iot/clientDetails/index.vue
index d7f7c36e..ec9e9d7a 100644
--- a/vue/src/views/iot/clientDetails/index.vue
+++ b/vue/src/views/iot/clientDetails/index.vue
@@ -11,18 +11,18 @@
                 </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 <el-tag type="danger" style="margin-left:15px;">{{ $t('system.clientDetails.293742-0') }}</el-tag>
             </el-form-item>
             <el-form-item style="float:right;">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:clientDetails:add']">{{ $t('add') }}</el-button>
+                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:clientDetails:add']">{{ $t('add') }}</el-button>
             </el-form-item>
         </el-form>
     </el-card>
 
     <el-card style="padding-bottom: 100px">
-        <el-table v-loading="loading" :data="clientDetailsList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="clientDetailsList" header-cell-class-name="table-header" :border="false" @selection-change="handleSelectionChange">
             <el-table-column :label="$t('speaker.clientDetails.index.893021-0')" align="center" prop="clientId" />
             <el-table-column :label="$t('system.clientDetails.293742-1')" align="center" prop="resourceIds" />
             <el-table-column :label="$t('speaker.clientDetails.index.893021-12')" align="center" prop="scope" />
@@ -49,13 +49,15 @@
 
             <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:clientDetails:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:clientDetails:remove']" disabled>{{ $t('del') }}</el-button>
+                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:clientDetails:edit']">{{ $t('update') }}</el-button>
+                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:clientDetails:remove']" disabled>{{ $t('del') }}</el-button>
                 </template>
             </el-table-column>
         </el-table>
 
+        <div class="pagination-container">
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </div>
 
         <!-- 添加或修改对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
@@ -290,3 +292,43 @@ export default {
     },
 };
 </script>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/device/index.vue b/vue/src/views/iot/device/index.vue
index f3d7fa3f..72c7bc7d 100644
--- a/vue/src/views/iot/device/index.vue
+++ b/vue/src/views/iot/device/index.vue
@@ -19,18 +19,18 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
                 <el-form-item style="float: right">
-                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleEditDevice(0)" v-hasPermi="['iot:device:add']">{{ $t('add') }}</el-button>
-                    <el-button type="primary" plain icon="el-icon-s-grid" size="mini" @click="handleChangeShowType" v-hasPermi="['iot:device:add']">{{ $t('device.index.105953-17') }}</el-button>
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleEditDevice(0)" v-hasPermi="['iot:device:add']">{{ $t('add') }}</el-button>
+                    <el-button type="primary" plain icon="el-icon-s-grid" size="small" @click="handleChangeShowType" v-hasPermi="['iot:device:add']">{{ $t('device.index.105953-17') }}</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
 
         <el-card style="padding-bottom: 100px" v-if="showType == 'list'">
-            <el-table v-loading="loading" :data="deviceList" border>
+            <el-table v-loading="loading" :data="deviceList" :border="false" header-cell-class-name="table-header">
                 <el-table-column :label="$t('device.index.105953-20')" align="center" header-align="center" prop="deviceId" width="50" />
                 <el-table-column :label="$t('device.index.105953-0')" align="center" header-align="center" prop="deviceName" min-width="120" />
                 <el-table-column :label="$t('device.index.105953-2')" align="center" prop="serialNumber" min-width="130" />
@@ -69,7 +69,7 @@
                 </el-table-column>
                 <el-table-column :label="$t('device.index.105953-31')" align="center" prop="firmwareVersion">
                     <template slot-scope="scope">
-                        <el-tag size="mini" type="info">Ver {{ scope.row.firmwareVersion }}</el-tag>
+                        <el-tag size="small" type="info">Ver {{ scope.row.firmwareVersion }}</el-tag>
                     </template>
                 </el-table-column>
                 <el-table-column :label="$t('device.index.105953-32')" align="center" prop="activeTime">
@@ -91,7 +91,9 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
+            <div class="pagination-container">
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
+        </div>
         </el-card>
 
         <el-card style="padding-bottom: 100px" v-if="showType == 'card'">
@@ -106,8 +108,8 @@
                                     </el-tooltip>
                                     <svg-icon icon-class="device" v-if="item.isOwner == 1" />
                                     <span style="margin: 0 5px">{{ item.deviceName }}</span>
-                                    <!-- <el-tag size="mini" type="info">Ver {{item.firmwareVersion}}</el-tag>-->
-                                    <!-- <el-text v-if="item.protocolCode" type="info" size="mini" style="font-size: 14px; color: #ccc">{{ item.protocolCode }}</el-text> -->
+                                    <!-- <el-tag size="small" type="info">Ver {{item.firmwareVersion}}</el-tag>-->
+                                    <!-- <el-text v-if="item.protocolCode" type="info" size="small" style="font-size: 14px; color: #ccc">{{ item.protocolCode }}</el-text> -->
                                 </el-link>
                             </el-col>
                             <el-col :span="1.5" style="font-size: 20px; padding-top: 5px; cursor: pointer">
@@ -136,7 +138,7 @@
                                     <!-- <dict-tag :options="dict.type.iot_location_way" :value="item.locationWay" size="small" style="display:inline-block;" /> -->
                                     <!-- <dict-tag :options="dict.type.iot_transport_type" :value="item.transport" size="small" style="display: inline-block" /> -->
                                 </div>
-                                <el-descriptions :column="1" size="mini" style="white-space: nowrap">
+                                <el-descriptions :column="1" size="small" style="white-space: nowrap">
                                     <el-descriptions-item :label="$t('device.index.105953-20')">
                                         {{ item.serialNumber }}
                                     </el-descriptions-item>
@@ -183,15 +185,19 @@
                             </el-col>
                         </el-row>
                         <el-button-group style="margin-top: 15px">
-                            <el-button type="danger" size="mini" style="padding: 5px 10px" icon="el-icon-delete" @click="handleDelete(item)" v-hasPermi="['iot:device:remove']">{{ $t('del') }}</el-button>
-                            <el-button type="primary" size="mini" style="padding: 5px 15px" icon="el-icon-view" @click="handleEditDevice(item, 'basic')" v-hasPermi="['iot:device:add']">{{ $t('look') }}</el-button>
-                            <el-button type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" @click="handleRunDevice(item)" v-hasPermi="['iot:device:add']">{{ $t('device.index.105953-40') }}</el-button>
+                            <el-button type="danger" size="small" style="padding: 5px 10px" icon="el-icon-delete" @click="handleDelete(item)" v-hasPermi="['iot:device:remove']">{{ $t('del') }}</el-button>
+                            <el-button type="primary" size="small" style="padding: 5px 15px" icon="el-icon-view" @click="handleEditDevice(item, 'basic')" v-hasPermi="['iot:device:add']">{{ $t('look') }}</el-button>
+                            <el-button type="success" size="small" style="padding: 5px 15px" icon="el-icon-odometer" @click="handleRunDevice(item)" v-hasPermi="['iot:device:add']">
+                                {{ $t('device.index.105953-40') }}
+                            </el-button>
                         </el-button-group>
                     </el-card>
                 </el-col>
             </el-row>
             <el-empty :description="$t('device.index.105953-41')" v-if="total == 0"></el-empty>
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
+            <div class="pagination-container">
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
+        </div>
         </el-card>
         <!-- 二维码 -->
         <el-dialog :visible.sync="openSummary" width="300px" append-to-body>
@@ -503,4 +509,40 @@ export default {
 .card-item {
     border-radius: 15px;
 }
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
 </style>
diff --git a/vue/src/views/iot/group/index.vue b/vue/src/views/iot/group/index.vue
index a1a151fd..7dad0e66 100644
--- a/vue/src/views/iot/group/index.vue
+++ b/vue/src/views/iot/group/index.vue
@@ -1,279 +1,313 @@
 <template>
-  <div style="padding: 6px">
-    <el-card v-show="showSearch" style="margin-bottom: 6px">
-      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px" style="margin-bottom: -20px">
-        <el-form-item :label="$t('iot.group.index.637432-0')" prop="groupName">
-          <el-input v-model="queryParams.groupName" :placeholder="$t('iot.group.index.637432-1')" clearable size="small"
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item v-if="isAdmin" :label="$t('iot.group.index.637432-2')" style="margin: 0 20px">
-          <el-switch v-model="myGroup" @change="myGroupChange"></el-switch>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('iot.group.index.637432-3') }}</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('iot.group.index.637432-4') }}</el-button>
-        </el-form-item>
-        <el-form-item style="float: right">
-          <el-button v-hasPermi="['iot:group:add']" type="primary" plain icon="el-icon-plus" size="mini"
-            @click="handleAdd">{{ $t('iot.group.index.637432-5') }}</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <div style="padding: 6px">
+        <el-card v-show="showSearch" style="margin-bottom: 6px">
+            <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px" style="margin-bottom: -20px">
+                <el-form-item :label="$t('iot.group.index.637432-0')" prop="groupName">
+                    <el-input v-model="queryParams.groupName" :placeholder="$t('iot.group.index.637432-1')" clearable size="small" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item v-if="isAdmin" :label="$t('iot.group.index.637432-2')" style="margin: 0 20px">
+                    <el-switch v-model="myGroup" @change="myGroupChange"></el-switch>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('iot.group.index.637432-3') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('iot.group.index.637432-4') }}</el-button>
+                </el-form-item>
+                <el-form-item style="float: right">
+                    <el-button v-hasPermi="['iot:group:add']" type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd">{{ $t('iot.group.index.637432-5') }}</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
 
-    <el-card style="padding-bottom: 100px">
-      <el-table v-loading="loading" :data="groupList" border @selection-change="handleSelectionChange">
-        <el-table-column :label="$t('iot.group.index.637432-0')" align="center" prop="groupName" width="200" />
-        <el-table-column :label="$t('iot.group.index.637432-6')" align="center" prop="groupOrder" width="100" />
-        <el-table-column :label="$t('iot.group.index.637432-7')" align="center" prop="createTime" width="180">
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="isAdmin" :label="$t('iot.group.index.637432-8')" align="center" prop="userName" width="100" />
-        <el-table-column :label="$t('iot.group.index.637432-9')" align="left" header-align="center" prop="remark" />
-        <el-table-column :label="$t('iot.group.index.637432-10')" align="center" class-name="small-padding fixed-width" width="320">
-          <template slot-scope="scope">
-            <el-button v-hasPermi="['iot:device:query']" size="small" type="text" style="padding: 5px"
-              icon="el-icon-search" @click="handleViewDevice(scope.row.groupId)">{{ $t('iot.group.index.637432-11') }}</el-button>
-            <el-button v-hasPermi="['iot:group:add']" size="small" type="text" style="padding: 5px" icon="el-icon-folder-add"
-              @click="selectDevice(scope.row)">{{ $t('iot.group.index.637432-12') }}</el-button>
-            <el-button v-hasPermi="['iot:group:edit']" size="small" type="text" style="padding: 5px"
-              icon="el-icon-edit" @click="handleUpdate(scope.row)">{{ $t('iot.group.index.637432-17') }}</el-button>
-            <el-button v-hasPermi="['iot:group:remove']" size="small" type="text" style="padding: 5px"
-              icon="el-icon-delete" @click="handleDelete(scope.row)">{{ $t('iot.group.index.637432-14') }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getList" />
+        <el-card style="padding-bottom: 100px">
+            <el-table v-loading="loading" :data="groupList" :border="false" @selection-change="handleSelectionChange">
+                <el-table-column :label="$t('iot.group.index.637432-0')" align="center" prop="groupName" width="200" />
+                <el-table-column :label="$t('iot.group.index.637432-6')" align="center" prop="groupOrder" width="100" />
+                <el-table-column :label="$t('iot.group.index.637432-7')" align="center" prop="createTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="isAdmin" :label="$t('iot.group.index.637432-8')" align="center" prop="userName" width="100" />
+                <el-table-column :label="$t('iot.group.index.637432-9')" align="left" header-align="center" prop="remark" />
+                <el-table-column :label="$t('iot.group.index.637432-10')" align="center" class-name="small-padding fixed-width" width="320">
+                    <template slot-scope="scope">
+                        <el-button v-hasPermi="['iot:device:query']" size="small" type="text" style="padding: 5px" icon="el-icon-search" @click="handleViewDevice(scope.row.groupId)">
+                            {{ $t('iot.group.index.637432-11') }}
+                        </el-button>
+                        <el-button v-hasPermi="['iot:group:add']" size="small" type="text" style="padding: 5px" icon="el-icon-folder-add" @click="selectDevice(scope.row)">{{ $t('iot.group.index.637432-12') }}</el-button>
+                        <el-button v-hasPermi="['iot:group:edit']" size="small" type="text" style="padding: 5px" icon="el-icon-edit" @click="handleUpdate(scope.row)">{{ $t('iot.group.index.637432-17') }}</el-button>
+                        <el-button v-hasPermi="['iot:group:remove']" size="small" type="text" style="padding: 5px" icon="el-icon-delete" @click="handleDelete(scope.row)">{{ $t('iot.group.index.637432-14') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
 
-      <!-- 分组设备列表 -->
-      <deviceList ref="groupDeviceList" :group="group"></deviceList>
+            <!-- 分组设备列表 -->
+            <deviceList ref="groupDeviceList" :group="group"></deviceList>
 
-      <!-- 添加或修改设备分组对话框 -->
-      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <el-form-item :label="$t('iot.group.index.637432-0')" prop="groupName">
-            <el-input v-model="form.groupName" :placeholder="$t('iot.group.index.637432-1')" />
-          </el-form-item>
-          <el-form-item :label="$t('iot.group.index.637432-6')" prop="groupOrder">
-            <el-input v-model="form.groupOrder" type="number" :placeholder="$t('iot.group.index.637432-15')" />
-          </el-form-item>
-          <el-form-item :label="$t('iot.group.index.637432-9')" prop="remark">
-            <el-input v-model="form.remark" type="textarea" :placeholder="$t('iot.group.index.637432-16')" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">{{ form.groupId ? $t('iot.group.index.637432-17') : $t('iot.group.index.637432-18') }}</el-button>
-          <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
-        </div>
-      </el-dialog>
-    </el-card>
-  </div>
+            <!-- 添加或修改设备分组对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                    <el-form-item :label="$t('iot.group.index.637432-0')" prop="groupName">
+                        <el-input v-model="form.groupName" :placeholder="$t('iot.group.index.637432-1')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.group.index.637432-6')" prop="groupOrder">
+                        <el-input v-model="form.groupOrder" type="number" :placeholder="$t('iot.group.index.637432-15')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.group.index.637432-9')" prop="remark">
+                        <el-input v-model="form.remark" type="textarea" :placeholder="$t('iot.group.index.637432-16')" />
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ form.groupId ? $t('iot.group.index.637432-17') : $t('iot.group.index.637432-18') }}</el-button>
+                    <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
+    </div>
 </template>
 
 <script>
-import deviceList from './device-list'
-import { listGroup, getGroup, delGroup, addGroup, updateGroup } from '@/api/iot/group'
-import {getUserId} from "@/utils/auth";
+import deviceList from './device-list';
+import { listGroup, getGroup, delGroup, addGroup, updateGroup } from '@/api/iot/group';
+import { getUserId } from '@/utils/auth';
 
 export default {
-  name: 'Group',
-  components: {
-    deviceList,
-  },
-  data() {
-    return {
-      // 是否管理员
-      isAdmin: false,
-      // 我的分组
-      myGroup: false,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 设备分组表格数据
-      groupList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        groupName: null,
-        userId: null,
-      },
-      // 设备分组
-      group: {},
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        groupName: [
-          {
-            required: true,
-            message: this.$t('iot.group.index.637432-20'),
-            trigger: 'blur',
-          },
-        ],
-        groupOrder: [
-          {
-            required: true,
-            message: this.$t('iot.group.index.637432-21'),
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
-  created() {
-    this.getList()
-    this.init()
-  },
-  methods: {
-    init() {
-      if (this.$store.state.user.roles.indexOf('tenant') === -1 && this.$store.state.user.roles.indexOf('general') === -1) {
-        this.isAdmin = true
-      }
+    name: 'Group',
+    components: {
+        deviceList,
     },
-    // 我的分组改变事件
-    myGroupChange() {
-      this.queryParams.userId = this.myGroup ? getUserId() : null;
-      this.handleQuery();
+    data() {
+        return {
+            // 是否管理员
+            isAdmin: false,
+            // 我的分组
+            myGroup: false,
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 设备分组表格数据
+            groupList: [],
+            // 弹出层标题
+            title: '',
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                groupName: null,
+                userId: null,
+            },
+            // 设备分组
+            group: {},
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                groupName: [
+                    {
+                        required: true,
+                        message: this.$t('iot.group.index.637432-20'),
+                        trigger: 'blur',
+                    },
+                ],
+                groupOrder: [
+                    {
+                        required: true,
+                        message: this.$t('iot.group.index.637432-21'),
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        };
     },
-    /** 查看设备按钮操作 */
-    handleViewDevice(groupId) {
-      this.$router.push({
-        path: '/iot/device',
-        query: {
-          t: Date.now(),
-          groupId: groupId,
+    created() {
+        this.getList();
+        this.init();
+    },
+    methods: {
+        init() {
+            if (this.$store.state.user.roles.indexOf('tenant') === -1 && this.$store.state.user.roles.indexOf('general') === -1) {
+                this.isAdmin = true;
+            }
         },
-      })
-    },
-    /** 查询设备分组列表 */
-    getList() {
-      this.loading = true
-      listGroup(this.queryParams).then((response) => {
-        this.groupList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        groupId: null,
-        groupName: null,
-        groupOrder: null,
-        userId: null,
-        userName: null,
-        delFlag: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null,
-      }
-      this.resetForm('form')
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm')
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.groupId)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = this.$t('iot.group.index.637432-22')
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const groupId = row.groupId || this.ids
-      getGroup(groupId).then((response) => {
-        this.form = response.data
-        this.open = true
-        this.title = this.$t('iot.group.index.637432-23')
-      })
-    },
-    /** 选择设备 */
-    selectDevice(row) {
-      this.group = row
-      // 刷新子组件
-      this.$refs.groupDeviceList.openDeviceList = true
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          if (this.form.groupId != null) {
-            updateGroup(this.form).then((response) => {
-              this.$modal.msgSuccess(this.$t('iot.group.index.637432-24'))
-              this.open = false
-              this.getList()
-            })
-          } else {
-            addGroup(this.form).then((response) => {
-              this.$modal.msgSuccess(this.$t('iot.group.index.637432-25'))
-              this.open = false
-              this.getList()
-            })
-          }
-        }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const groupIds = row.groupId || this.ids
-      this.$modal
-        .confirm(this.$t('iot.group.index.637432-26', [groupIds]))
-        .then(function () {
-          return delGroup(groupIds)
-        })
-        .then(() => {
-          this.getList()
-          this.$modal.msgSuccess(this.$t('iot.group.index.637432-27'))
-        })
-        .catch(() => { })
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download(
-        'iot/group/export',
-        {
-          ...this.queryParams,
+        // 我的分组改变事件
+        myGroupChange() {
+            this.queryParams.userId = this.myGroup ? getUserId() : null;
+            this.handleQuery();
+        },
+        /** 查看设备按钮操作 */
+        handleViewDevice(groupId) {
+            this.$router.push({
+                path: '/iot/device',
+                query: {
+                    t: Date.now(),
+                    groupId: groupId,
+                },
+            });
+        },
+        /** 查询设备分组列表 */
+        getList() {
+            this.loading = true;
+            listGroup(this.queryParams).then((response) => {
+                this.groupList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                groupId: null,
+                groupName: null,
+                groupOrder: null,
+                userId: null,
+                userName: null,
+                delFlag: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+            };
+            this.resetForm('form');
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm');
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.groupId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = this.$t('iot.group.index.637432-22');
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const groupId = row.groupId || this.ids;
+            getGroup(groupId).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = this.$t('iot.group.index.637432-23');
+            });
+        },
+        /** 选择设备 */
+        selectDevice(row) {
+            this.group = row;
+            // 刷新子组件
+            this.$refs.groupDeviceList.openDeviceList = true;
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    if (this.form.groupId != null) {
+                        updateGroup(this.form).then((response) => {
+                            this.$modal.msgSuccess(this.$t('iot.group.index.637432-24'));
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addGroup(this.form).then((response) => {
+                            this.$modal.msgSuccess(this.$t('iot.group.index.637432-25'));
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const groupIds = row.groupId || this.ids;
+            this.$modal
+                .confirm(this.$t('iot.group.index.637432-26', [groupIds]))
+                .then(function () {
+                    return delGroup(groupIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(this.$t('iot.group.index.637432-27'));
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                'iot/group/export',
+                {
+                    ...this.queryParams,
+                },
+                `group_${new Date().getTime()}.xlsx`
+            );
         },
-        `group_${new Date().getTime()}.xlsx`
-      )
     },
-  },
-}
+};
 </script>
+
+<style lang="scss" scoped>
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/log/index.vue b/vue/src/views/iot/log/index.vue
index e85c4f0b..a92cd9f3 100644
--- a/vue/src/views/iot/log/index.vue
+++ b/vue/src/views/iot/log/index.vue
@@ -1,190 +1,185 @@
 <template>
-<div style="padding:6px;">
-    <el-card v-show="showSearch" style="margin-bottom:6px;">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
-            <el-form-item :label="$t('iot.log.index.902341-0')" prop="logName">
-                <el-input v-model="queryParams.logName" :placeholder="$t('iot.log.index.902341-1')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-2')" prop="logType">
-                <el-select v-model="queryParams.logType" :placeholder="$t('iot.log.index.902341-3')" clearable size="small">
-                    <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-4')" prop="logLevel">
-                <el-input v-model="queryParams.logLevel" :placeholder="$t('iot.log.index.902341-5')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-6')" prop="deviceId">
-                <el-input v-model="queryParams.deviceId" :placeholder="$t('iot.log.index.902341-7')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-8')" prop="deviceName">
-                <el-input v-model="queryParams.deviceName" :placeholder="$t('iot.log.index.902341-9')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-10')" prop="userName">
-                <el-input v-model="queryParams.userName" :placeholder="$t('iot.log.index.902341-11')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-12')" prop="tenantName">
-                <el-input v-model="queryParams.tenantName" :placeholder="$t('iot.log.index.902341-13')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-14')" prop="isAlert">
-                <el-input v-model="queryParams.isAlert" :placeholder="$t('iot.log.index.902341-15')" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('iot.log.index.902341-16')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('iot.log.index.902341-17')" clearable size="small">
-                    <el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('device.index.105953-8') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('device.index.105953-9') }}</el-button>
-            </el-form-item>
-        </el-form>
-    </el-card>
-
-    <el-card style="padding-bottom:100px;">
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:log:add']">{{ $t('iot.group.index.637432-5') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:log:edit']">{{ $t('iot.group.index.637432-17') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:log:remove']">{{ $t('iot.group.index.637432-14') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:log:export']">{{ $t('export') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange" border>
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column :label="$t('iot.log.index.902341-0')" align="center" prop="logName" />
-            <el-table-column :label="$t('iot.log.index.902341-18')" align="center" prop="logValue" />
-            <el-table-column :label="$t('iot.log.index.902341-2')" align="center" prop="logType">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_things_type" :value="scope.row.logType" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('iot.log.index.902341-4')" align="center" prop="logLevel">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.logLevel" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('iot.log.index.902341-6')" align="center" prop="deviceId" />
-            <el-table-column :label="$t('iot.log.index.902341-8')" align="center" prop="deviceName" />
-            <el-table-column :label="$t('iot.log.index.902341-19')" align="center" prop="userId" />
-            <el-table-column :label="$t('iot.log.index.902341-10')" align="center" prop="userName" />
-            <el-table-column :label="$t('iot.log.index.902341-20')" align="center" prop="tenantId" />
-            <el-table-column :label="$t('iot.log.index.902341-12')" align="center" prop="tenantName" />
-            <el-table-column :label="$t('iot.log.index.902341-21')" align="center" prop="triggerSource">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.triggerSource" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('iot.log.index.902341-14')" align="center" prop="isAlert">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isAlert" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('iot.log.index.902341-16')" align="center" prop="status">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('iot.group.index.637432-7')" align="center" prop="createTime" width="180">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('iot.group.index.637432-9')" align="center" prop="remark" />
-            <el-table-column :label="$t('iot.group.index.637432-10')" align="center" class-name="small-padding fixed-width" width="150">
-                <template slot-scope="scope">
-                    <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:log:edit']">{{ $t('iot.log.index.902341-22') }}</el-button>
-                    <!-- <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:log:remove']">{{ $t('iot.group.index.637432-14') }}</el-button> -->
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改设备日志对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <div style="padding: 6px">
+        <el-card v-show="showSearch" style="margin-bottom: 6px">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('iot.log.index.902341-0')" prop="logName">
-                    <el-input v-model="form.logName" :placeholder="$t('iot.log.index.902341-1')" />
+                    <el-input v-model="queryParams.logName" :placeholder="$t('iot.log.index.902341-1')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('iot.log.index.902341-2')" prop="logType">
-                    <el-select v-model="form.logType" :placeholder="$t('iot.log.index.902341-3')">
-                        <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                    <el-select v-model="queryParams.logType" :placeholder="$t('iot.log.index.902341-3')" clearable size="small">
+                        <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
                 <el-form-item :label="$t('iot.log.index.902341-4')" prop="logLevel">
-                    <el-input v-model="form.logLevel" :placeholder="$t('iot.log.index.902341-5')" />
+                    <el-input v-model="queryParams.logLevel" :placeholder="$t('iot.log.index.902341-5')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('iot.log.index.902341-6')" prop="deviceId">
-                    <el-input v-model="form.deviceId" :placeholder="$t('iot.log.index.902341-7')" />
+                    <el-input v-model="queryParams.deviceId" :placeholder="$t('iot.log.index.902341-7')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('iot.log.index.902341-8')" prop="deviceName">
-                    <el-input v-model="form.deviceName" :placeholder="$t('iot.log.index.902341-9')" />
-                </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-19')" prop="userId">
-                    <el-input v-model="form.userId" :placeholder="$t('iot.log.index.902341-23')" />
+                    <el-input v-model="queryParams.deviceName" :placeholder="$t('iot.log.index.902341-9')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('iot.log.index.902341-10')" prop="userName">
-                    <el-input v-model="form.userName" :placeholder="$t('iot.log.index.902341-11')" />
-                </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-20')" prop="tenantId">
-                    <el-input v-model="form.tenantId" :placeholder="$t('iot.log.index.902341-24')" />
+                    <el-input v-model="queryParams.userName" :placeholder="$t('iot.log.index.902341-11')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('iot.log.index.902341-12')" prop="tenantName">
-                    <el-input v-model="form.tenantName" :placeholder="$t('iot.log.index.902341-13')" />
+                    <el-input v-model="queryParams.tenantName" :placeholder="$t('iot.log.index.902341-13')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-21')" prop="triggerSource">
-                    <el-input v-model="form.triggerSource" :placeholder="$t('iot.log.index.902341-25')" />
+                <el-form-item :label="$t('iot.log.index.902341-14')" prop="isAlert">
+                    <el-input v-model="queryParams.isAlert" :placeholder="$t('iot.log.index.902341-15')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-26')" prop="isAlert">
-                    <el-input v-model="form.isAlert" :placeholder="$t('iot.log.index.902341-15')" />
+                <el-form-item :label="$t('iot.log.index.902341-16')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('iot.log.index.902341-17')" clearable size="small">
+                        <el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-16')">
-                    <el-radio-group v-model="form.status">
-                        <el-radio v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="$t('iot.group.index.637432-9')" prop="remark">
-                    <el-input v-model="form.remark" :placeholder="$t('iot.group.index.637432-16')" />
-                </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-27')" prop="logValue">
-                    <el-input v-model="form.logValue" :placeholder="$t('iot.log.index.902341-28')" />
-                </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-29')" prop="istop">
-                    <el-input v-model="form.istop" :placeholder="$t('iot.log.index.902341-30')" />
-                </el-form-item>
-                <el-form-item :label="$t('iot.log.index.902341-31')" prop="ismonitor">
-                    <el-input v-model="form.ismonitor" :placeholder="$t('iot.log.index.902341-32')" />
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('device.index.105953-8') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('device.index.105953-9') }}</el-button>
                 </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('device.index.105953-56') }}</el-button>
-                <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
-            </div>
-        </el-dialog>
+        </el-card>
 
-    </el-card>
-</div>
+        <el-card style="padding-bottom: 100px">
+            <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:log:add']">{{ $t('iot.group.index.637432-5') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:log:edit']">{{ $t('iot.group.index.637432-17') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:log:remove']">{{ $t('iot.group.index.637432-14') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['iot:log:export']">{{ $t('export') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange" :border="false">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column :label="$t('iot.log.index.902341-0')" align="center" prop="logName" />
+                <el-table-column :label="$t('iot.log.index.902341-18')" align="center" prop="logValue" />
+                <el-table-column :label="$t('iot.log.index.902341-2')" align="center" prop="logType">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_things_type" :value="scope.row.logType" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('iot.log.index.902341-4')" align="center" prop="logLevel">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.logLevel" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('iot.log.index.902341-6')" align="center" prop="deviceId" />
+                <el-table-column :label="$t('iot.log.index.902341-8')" align="center" prop="deviceName" />
+                <el-table-column :label="$t('iot.log.index.902341-19')" align="center" prop="userId" />
+                <el-table-column :label="$t('iot.log.index.902341-10')" align="center" prop="userName" />
+                <el-table-column :label="$t('iot.log.index.902341-20')" align="center" prop="tenantId" />
+                <el-table-column :label="$t('iot.log.index.902341-12')" align="center" prop="tenantName" />
+                <el-table-column :label="$t('iot.log.index.902341-21')" align="center" prop="triggerSource">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.triggerSource" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('iot.log.index.902341-14')" align="center" prop="isAlert">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isAlert" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('iot.log.index.902341-16')" align="center" prop="status">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('iot.group.index.637432-7')" align="center" prop="createTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('iot.group.index.637432-9')" align="center" prop="remark" />
+                <el-table-column :label="$t('iot.group.index.637432-10')" align="center" class-name="small-padding fixed-width" width="150">
+                    <template slot-scope="scope">
+                        <el-button size="small" type="primary" style="padding: 5px" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:log:edit']">{{ $t('iot.log.index.902341-22') }}</el-button>
+                        <!-- <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:log:remove']">{{ $t('iot.group.index.637432-14') }}</el-button> -->
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
+
+            <!-- 添加或修改设备日志对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                    <el-form-item :label="$t('iot.log.index.902341-0')" prop="logName">
+                        <el-input v-model="form.logName" :placeholder="$t('iot.log.index.902341-1')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-2')" prop="logType">
+                        <el-select v-model="form.logType" :placeholder="$t('iot.log.index.902341-3')">
+                            <el-option v-for="dict in dict.type.iot_things_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-4')" prop="logLevel">
+                        <el-input v-model="form.logLevel" :placeholder="$t('iot.log.index.902341-5')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-6')" prop="deviceId">
+                        <el-input v-model="form.deviceId" :placeholder="$t('iot.log.index.902341-7')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-8')" prop="deviceName">
+                        <el-input v-model="form.deviceName" :placeholder="$t('iot.log.index.902341-9')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-19')" prop="userId">
+                        <el-input v-model="form.userId" :placeholder="$t('iot.log.index.902341-23')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-10')" prop="userName">
+                        <el-input v-model="form.userName" :placeholder="$t('iot.log.index.902341-11')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-20')" prop="tenantId">
+                        <el-input v-model="form.tenantId" :placeholder="$t('iot.log.index.902341-24')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-12')" prop="tenantName">
+                        <el-input v-model="form.tenantName" :placeholder="$t('iot.log.index.902341-13')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-21')" prop="triggerSource">
+                        <el-input v-model="form.triggerSource" :placeholder="$t('iot.log.index.902341-25')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-26')" prop="isAlert">
+                        <el-input v-model="form.isAlert" :placeholder="$t('iot.log.index.902341-15')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-16')">
+                        <el-radio-group v-model="form.status">
+                            <el-radio v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.group.index.637432-9')" prop="remark">
+                        <el-input v-model="form.remark" :placeholder="$t('iot.group.index.637432-16')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-27')" prop="logValue">
+                        <el-input v-model="form.logValue" :placeholder="$t('iot.log.index.902341-28')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-29')" prop="istop">
+                        <el-input v-model="form.istop" :placeholder="$t('iot.log.index.902341-30')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.log.index.902341-31')" prop="ismonitor">
+                        <el-input v-model="form.ismonitor" :placeholder="$t('iot.log.index.902341-32')" />
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('device.index.105953-56') }}</el-button>
+                    <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
+    </div>
 </template>
 
 <script>
-import {
-    listLog,
-    getLog,
-    delLog,
-    addLog,
-    updateLog
-} from "@/api/iot/log";
+import { listLog, getLog, delLog, addLog, updateLog } from '@/api/iot/log';
 
 export default {
-    name: "Log",
+    name: 'Log',
     dicts: ['iot_things_type', 'iot_yes_no'],
     data() {
         return {
@@ -203,7 +198,7 @@ export default {
             // 设备日志表格数据
             logList: [],
             // 弹出层标题
-            title: "",
+            title: '',
             // 是否显示弹出层
             open: false,
             // 查询参数
@@ -221,58 +216,76 @@ export default {
                 isAlert: null,
                 status: null,
                 istop: null,
-                ismonitor: null
+                ismonitor: null,
             },
             // 表单参数
             form: {},
             // 表单校验
             rules: {
-                logName: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-33'),
-                    trigger: "blur"
-                }],
-                logType: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-34'),
-                    trigger: "change"
-                }],
-                logLevel: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-35'),
-                    trigger: "blur"
-                }],
-                deviceId: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-36'),
-                    trigger: "blur"
-                }],
-                deviceName: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-37'),
-                    trigger: "blur"
-                }],
-                userId: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-38'),
-                    trigger: "blur"
-                }],
-                userName: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-39'),
-                    trigger: "blur"
-                }],
-                tenantId: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-40'),
-                    trigger: "blur"
-                }],
-                tenantName: [{
-                    required: true,
-                    message: this.$t('iot.log.index.902341-41'),
-                    trigger: "blur"
-                }],
-            }
+                logName: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-33'),
+                        trigger: 'blur',
+                    },
+                ],
+                logType: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-34'),
+                        trigger: 'change',
+                    },
+                ],
+                logLevel: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-35'),
+                        trigger: 'blur',
+                    },
+                ],
+                deviceId: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-36'),
+                        trigger: 'blur',
+                    },
+                ],
+                deviceName: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-37'),
+                        trigger: 'blur',
+                    },
+                ],
+                userId: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-38'),
+                        trigger: 'blur',
+                    },
+                ],
+                userName: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-39'),
+                        trigger: 'blur',
+                    },
+                ],
+                tenantId: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-40'),
+                        trigger: 'blur',
+                    },
+                ],
+                tenantName: [
+                    {
+                        required: true,
+                        message: this.$t('iot.log.index.902341-41'),
+                        trigger: 'blur',
+                    },
+                ],
+            },
         };
     },
     created() {
@@ -282,7 +295,7 @@ export default {
         /** 查询设备日志列表 */
         getList() {
             this.loading = true;
-            listLog(this.queryParams).then(response => {
+            listLog(this.queryParams).then((response) => {
                 this.logList = response.rows;
                 this.total = response.total;
                 this.loading = false;
@@ -314,9 +327,9 @@ export default {
                 remark: null,
                 logValue: null,
                 istop: null,
-                ismonitor: null
+                ismonitor: null,
             };
-            this.resetForm("form");
+            this.resetForm('form');
         },
         /** 搜索按钮操作 */
         handleQuery() {
@@ -325,14 +338,14 @@ export default {
         },
         /** 重置按钮操作 */
         resetQuery() {
-            this.resetForm("queryForm");
+            this.resetForm('queryForm');
             this.handleQuery();
         },
         // 多选框选中数据
         handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.deviceLogId)
-            this.single = selection.length !== 1
-            this.multiple = !selection.length
+            this.ids = selection.map((item) => item.deviceLogId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
         },
         /** 新增按钮操作 */
         handleAdd() {
@@ -343,8 +356,8 @@ export default {
         /** 修改按钮操作 */
         handleUpdate(row) {
             this.reset();
-            const deviceLogId = row.deviceLogId || this.ids
-            getLog(deviceLogId).then(response => {
+            const deviceLogId = row.deviceLogId || this.ids;
+            getLog(deviceLogId).then((response) => {
                 this.form = response.data;
                 this.open = true;
                 this.title = this.$t('iot.log.index.902341-43');
@@ -352,16 +365,16 @@ export default {
         },
         /** 提交按钮 */
         submitForm() {
-            this.$refs["form"].validate(valid => {
+            this.$refs['form'].validate((valid) => {
                 if (valid) {
                     if (this.form.deviceLogId != null) {
-                        updateLog(this.form).then(response => {
+                        updateLog(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('iot.group.index.637432-24'));
                             this.open = false;
                             this.getList();
                         });
                     } else {
-                        addLog(this.form).then(response => {
+                        addLog(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('iot.group.index.637432-25'));
                             this.open = false;
                             this.getList();
@@ -373,19 +386,64 @@ export default {
         /** 删除按钮操作 */
         handleDelete(row) {
             const deviceLogIds = row.deviceLogId || this.ids;
-            this.$modal.confirm(this.$t('iot.log.index.902341-44', [deviceLogIds])).then(function () {
-                return delLog(deviceLogIds);
-            }).then(() => {
-                this.getList();
-                this.$modal.msgSuccess(this.$t('iot.group.index.637432-27'));
-            }).catch(() => {});
+            this.$modal
+                .confirm(this.$t('iot.log.index.902341-44', [deviceLogIds]))
+                .then(function () {
+                    return delLog(deviceLogIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(this.$t('iot.group.index.637432-27'));
+                })
+                .catch(() => {});
         },
         /** 导出按钮操作 */
         handleExport() {
-            this.download('iot/log/export', {
-                ...this.queryParams
-            }, `log_${new Date().getTime()}.xlsx`)
-        }
-    }
+            this.download(
+                'iot/log/export',
+                {
+                    ...this.queryParams,
+                },
+                `log_${new Date().getTime()}.xlsx`
+            );
+        },
+    },
 };
 </script>
+
+<style lang="scss" scoped>
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/news/index.vue b/vue/src/views/iot/news/index.vue
index 2c3751ee..3efcb9a2 100644
--- a/vue/src/views/iot/news/index.vue
+++ b/vue/src/views/iot/news/index.vue
@@ -29,32 +29,32 @@
                 </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('device.index.105953-8') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('device.index.105953-9') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('device.index.105953-8') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('device.index.105953-9') }}</el-button>
             </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd"
                     v-hasPermi="['iot:news:add']">{{ $t('system.sysclient.652154-4') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+                <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
                     v-hasPermi="['iot:news:edit']">{{ $t('system.sysclient.652154-5') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
                     v-hasPermi="['iot:news:remove']">{{ $t('system.sysclient.652154-6') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport"
                     v-hasPermi="['iot:news:export']">{{ $t('system.sysclient.652154-7') }}</el-button>
             </el-col>
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
-        <el-table v-loading="loading" :data="newsList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="newsList" header-cell-class-name="table-header" :border="false" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column :label="$t('system.news.893410-10')" align="center" prop="imgUrl" width="140px;">
                 <template slot-scope="scope">
@@ -94,18 +94,20 @@
             <el-table-column :label="$t('iot.group.index.637432-9')" align="center" prop="remark" />
             <el-table-column :label="$t('device.index.105953-34')" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-view"
+                    <el-button size="small" type="text" icon="el-icon-view"
                         @click="openDetailDialog(scope.row.newsId)">{{ $t('system.news.893410-25') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                         v-hasPermi="['iot:news:edit']">{{ $t('system.sysclient.652154-5') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                         v-hasPermi="['iot:news:remove']">{{ $t('system.sysclient.652154-6') }}</el-button>
                 </template>
             </el-table-column>
         </el-table>
 
+        <div class="pagination-container">
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
             @pagination="getList" />
+        </div>
 
         <!-- 添加或修改新闻资讯对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -169,7 +171,7 @@
         <!--通知公告详情 -->
         <el-dialog :title="form.title" :visible.sync="openDetail" width="800px" append-to-body>
             <div style="margin-top:-20px;margin-bottom:10px;">
-                <el-tag size="mini" effect="dark" type="success">{{ form.categoryName }}</el-tag>
+                <el-tag size="small" effect="dark" type="success">{{ form.categoryName }}</el-tag>
                 <span style="margin-left:20px;">{{ form.createTime }}</span>
             </div>
             <div v-loading="loadingDetail" class="content">
@@ -430,3 +432,43 @@ export default {
     border: 1px solid #eee;
     border-radius: 10px;
 }</style>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/newsCategory/index.vue b/vue/src/views/iot/newsCategory/index.vue
index 09d609a2..aebdcfce 100644
--- a/vue/src/views/iot/newsCategory/index.vue
+++ b/vue/src/views/iot/newsCategory/index.vue
@@ -6,32 +6,32 @@
                     @keyup.enter.native="handleQuery" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('device.index.105953-8') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('device.index.105953-9') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('device.index.105953-8') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('device.index.105953-9') }}</el-button>
             </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd"
                     v-hasPermi="['iot:newsCategory:add']">{{ $t('system.sysclient.652154-4') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+                <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
                     v-hasPermi="['iot:newsCategory:edit']">{{ $t('system.sysclient.652154-5') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
                     v-hasPermi="['iot:newsCategory:remove']">{{ $t('system.sysclient.652154-6') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport"
                     v-hasPermi="['iot:newsCategory:export']">{{ $t('system.sysclient.652154-7') }}</el-button>
             </el-col>
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
-        <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="categoryList" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :border="false">
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column :label="$t('system.newsCategory.874509-1')" align="center" prop="categoryId" />
             <el-table-column :label="$t('system.newsCategory.874509-0')" align="center" prop="categoryName" />
@@ -44,16 +44,18 @@
             <el-table-column :label="$t('iot.group.index.637432-9')" align="center" prop="remark" min-width="200" header-align="center" />
             <el-table-column :label="$t('device.index.105953-34')" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)"
+                    <el-button size="small" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)"
                         v-hasPermi="['iot:newsCategory:add']">{{ $t('device.index.105953-60') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                         v-hasPermi="['iot:newsCategory:remove']">{{ $t('system.sysclient.652154-6') }}</el-button>
                 </template>
             </el-table-column>
         </el-table>
 
+        <div class="pagination-container">
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
             @pagination="getList" />
+        </div>
 
         <!-- 添加或修改新闻分类对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -241,3 +243,43 @@ export default {
     }
 };
 </script>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/platform/index.vue b/vue/src/views/iot/platform/index.vue
index 4fd98f27..3e443e66 100644
--- a/vue/src/views/iot/platform/index.vue
+++ b/vue/src/views/iot/platform/index.vue
@@ -36,7 +36,7 @@
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-            <el-table v-loading="loading" :data="platformList" :border="false" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
+            <el-table v-loading="loading" :data="platformList" header-cell-class-name="table-header" :border="false" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
                 <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
                 <el-table-column align="left" :label="$t('system.platform.675309-3')" prop="platform" min-width="200">
                     <template slot-scope="scope">
@@ -50,7 +50,14 @@
                 </el-table-column>
                 <el-table-column :label="$t('system.platform.675309-4')" align="center" prop="clientId" min-width="180" />
                 <el-table-column :label="$t('system.platform.675309-5')" align="left" prop="redirectUri" min-width="250" :show-overflow-tooltip="true" />
-                <el-table-column align="left" :label="$t('system.platform.675309-6')" prop="bindUri" :show-tooltip-when-overflow="true" :render-header="(h, column) => renderHeaderMethods(h, column, columnTips.bindId)" min-width="250" />
+                <el-table-column
+                    align="left"
+                    :label="$t('system.platform.675309-6')"
+                    prop="bindUri"
+                    :show-tooltip-when-overflow="true"
+                    :render-header="(h, column) => renderHeaderMethods(h, column, columnTips.bindId)"
+                    min-width="250"
+                />
                 <el-table-column
                     align="left"
                     :label="$t('system.platform.675309-7')"
@@ -80,49 +87,51 @@
                 </el-table-column>
             </el-table>
 
-            <pagination style="margin-bottom: 20px" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-        </el-card>
-
-        <!-- 添加或修改第三方登录平台控制对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="630px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="130px">
-                <el-form-item :label="$t('system.platform.675309-9')" prop="platform">
-                    <el-select v-model="form.platform" :placeholder="$t('system.platform.675309-10')" style="width: 400px">
-                        <el-option v-for="dict in dict.type.iot_social_platform" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-11')" prop="status">
-                    <el-select v-model="form.status" :placeholder="$t('system.platform.675309-2')" style="width: 400px">
-                        <el-option v-for="dict in dict.type.iot_social_platform_status" :key="dict.value" :label="dict.label" :value="Number(dict.value)"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-12')" prop="clientId">
-                    <el-input v-model="form.clientId" :placeholder="$t('system.platform.675309-13')" style="width: 400px" />
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-14')" prop="secretKey">
-                    <el-input v-model="form.secretKey" :placeholder="$t('system.platform.675309-15')" style="width: 400px" />
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-16')" prop="redirectUri">
-                    <el-input v-model="form.redirectUri" :placeholder="$t('system.platform.675309-17')" style="width: 400px" />
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-18')" prop="bindUri">
-                    <el-input v-model="form.bindUri" :placeholder="$t('system.platform.675309-19')" style="width: 400px" />
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-20')" prop="redirectLoginUri">
-                    <el-input v-model="form.redirectLoginUri" :placeholder="$t('system.platform.675309-21')" style="width: 400px" />
-                </el-form-item>
-                <el-form-item :label="$t('system.platform.675309-22')" prop="errorMsgUri">
-                    <el-input v-model="form.errorMsgUri" :placeholder="$t('system.platform.675309-23')" style="width: 400px" />
-                </el-form-item>
-                <el-form-item :label="$t('iot.group.index.637432-9')" prop="remark">
-                    <el-input v-model="form.remark" :placeholder="$t('iot.group.index.637432-16')" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" style="width: 400px" />
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('device.index.105953-56') }}</el-button>
-                <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
+            <div class="pagination-container">
+            <pagination style="margin-bottom: 0" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
             </div>
-        </el-dialog>
+
+            <!-- 添加或修改第三方登录平台控制对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="630px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+                    <el-form-item :label="$t('system.platform.675309-9')" prop="platform">
+                        <el-select v-model="form.platform" :placeholder="$t('system.platform.675309-10')" style="width: 400px">
+                            <el-option v-for="dict in dict.type.iot_social_platform" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-11')" prop="status">
+                        <el-select v-model="form.status" :placeholder="$t('system.platform.675309-2')" style="width: 400px">
+                            <el-option v-for="dict in dict.type.iot_social_platform_status" :key="dict.value" :label="dict.label" :value="Number(dict.value)"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-12')" prop="clientId">
+                        <el-input v-model="form.clientId" :placeholder="$t('system.platform.675309-13')" style="width: 400px" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-14')" prop="secretKey">
+                        <el-input v-model="form.secretKey" :placeholder="$t('system.platform.675309-15')" style="width: 400px" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-16')" prop="redirectUri">
+                        <el-input v-model="form.redirectUri" :placeholder="$t('system.platform.675309-17')" style="width: 400px" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-18')" prop="bindUri">
+                        <el-input v-model="form.bindUri" :placeholder="$t('system.platform.675309-19')" style="width: 400px" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-20')" prop="redirectLoginUri">
+                        <el-input v-model="form.redirectLoginUri" :placeholder="$t('system.platform.675309-21')" style="width: 400px" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.platform.675309-22')" prop="errorMsgUri">
+                        <el-input v-model="form.errorMsgUri" :placeholder="$t('system.platform.675309-23')" style="width: 400px" />
+                    </el-form-item>
+                    <el-form-item :label="$t('iot.group.index.637432-9')" prop="remark">
+                        <el-input v-model="form.remark" :placeholder="$t('iot.group.index.637432-16')" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" style="width: 400px" />
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('device.index.105953-56') }}</el-button>
+                    <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
diff --git a/vue/src/views/iot/product/index.vue b/vue/src/views/iot/product/index.vue
index 07f85a89..5f342470 100644
--- a/vue/src/views/iot/product/index.vue
+++ b/vue/src/views/iot/product/index.vue
@@ -14,11 +14,11 @@
                 </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
             </el-form-item>
             <el-form-item style="float:right;">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleEditProduct(0)" v-hasPermi="['iot:product:add']">{{ $t('add') }}</el-button>
+                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleEditProduct(0)" v-hasPermi="['iot:product:add']">{{ $t('add') }}</el-button>
             </el-form-item>
         </el-form>
     </el-card>
@@ -30,15 +30,15 @@
                         <el-col :span="20" style="text-align:left;">
                             <el-link type="" :underline="false" @click="handleEditProduct(item)" style="font-weight:bold;font-size:16px;line-height:32px;white-space:nowrap;">
                                 <svg-icon icon-class="product" /> {{item.productName}}
-                                <el-tag type="info" size="mini" style="margin-left:5px;font-weight:200" v-if="item.isSys==1">{{ $t('product.index.091251-47') }}</el-tag>
+                                <el-tag type="info" size="small" style="margin-left:5px;font-weight:200" v-if="item.isSys==1">{{ $t('product.index.091251-47') }}</el-tag>
                             </el-link>
                         </el-col>
                         <el-col :span="4">
                             <el-tooltip class="item" effect="dark" :content="$t('product.index.091251-12')" placement="top-start" v-if="item.status==2">
-                                <el-button type="success" size="mini" style="padding:5px;" @click="changeProductStatus(item.productId,1,item.deviceType)">{{ $t('product.index.091251-13') }}</el-button>
+                                <el-button type="success" size="small" style="padding:5px;" @click="changeProductStatus(item.productId,1,item.deviceType)">{{ $t('product.index.091251-13') }}</el-button>
                             </el-tooltip>
                             <el-tooltip class="item" effect="dark" :content="$t('product.index.091251-14')" placement="top-start" v-if="item.status==1">
-                                <el-button type="info" size="mini" style="padding:5px;" @click="changeProductStatus(item.productId,2,item.deviceType)">{{ $t('product.index.091251-15') }}</el-button>
+                                <el-button type="info" size="small" style="padding:5px;" @click="changeProductStatus(item.productId,2,item.deviceType)">{{ $t('product.index.091251-15') }}</el-button>
                             </el-tooltip>
                         </el-col>
                     </el-row>
@@ -55,8 +55,8 @@
                                     <dict-tag :options="dict.type.iot_network_method" :value="item.networkMethod" />
                                 </el-descriptions-item>
                                 <el-descriptions-item :label="$t('product.index.091251-19')">
-                                    <el-tag type="success" size="mini" v-if="item.isAuthorize==1">{{ $t('product.index.091251-20') }}</el-tag>
-                                    <el-tag type="info" size="mini" v-else>{{ $t('product.index.091251-21') }}</el-tag>
+                                    <el-tag type="success" size="small" v-if="item.isAuthorize==1">{{ $t('product.index.091251-20') }}</el-tag>
+                                    <el-tag type="info" size="small" v-else>{{ $t('product.index.091251-21') }}</el-tag>
                                 </el-descriptions-item>
                             </el-descriptions>
                         </el-col>
@@ -70,17 +70,19 @@
                         </el-col>
                     </el-row>
                     <el-button-group style="margin-top:15px;height:28px;">
-                        <el-button size="mini" type="primary" icon="el-icon-view" @click="handleEditProduct(item)" v-hasPermi="['iot:product:query']">{{ $t('product.index.091251-48') }}</el-button>
-                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(item)" v-hasPermi="['iot:product:remove']" v-if="item.status==1">{{ $t('product.index.091251-23') }}</el-button>
-                        <el-button size="mini" type="success" icon="el-icon-s-check" @click="handleDeviceAuthorize(item)" v-hasPermi="['iot:product:edit']" v-if="item.status==2" :disabled="item.isAuthorize!=1">{{ $t('product.index.091251-19') }}</el-button>
-                        <el-button size="mini" type="warning" icon="el-icon-search" @click="handleViewDevice(item.productId)" v-hasPermi="['iot:device:query']">{{ $t('product.index.091251-24') }}</el-button>
+                        <el-button size="small" type="primary" icon="el-icon-view" @click="handleEditProduct(item)" v-hasPermi="['iot:product:query']">{{ $t('product.index.091251-48') }}</el-button>
+                        <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(item)" v-hasPermi="['iot:product:remove']" v-if="item.status==1">{{ $t('product.index.091251-23') }}</el-button>
+                        <el-button size="small" type="success" icon="el-icon-s-check" @click="handleDeviceAuthorize(item)" v-hasPermi="['iot:product:edit']" v-if="item.status==2" :disabled="item.isAuthorize!=1">{{ $t('product.index.091251-19') }}</el-button>
+                        <el-button size="small" type="warning" icon="el-icon-search" @click="handleViewDevice(item.productId)" v-hasPermi="['iot:device:query']">{{ $t('product.index.091251-24') }}</el-button>
                     </el-button-group>
                 </el-card>
             </el-col>
         </el-row>
 
         <el-empty :description="$t('product.index.091251-25')" v-if="total==0"></el-empty>
+        <div class="pagination-container">
         <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
+        </div>
 
         <!-- 下载SDK -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
diff --git a/vue/src/views/iot/sip/index.vue b/vue/src/views/iot/sip/index.vue
index a34868c9..5610a4d9 100644
--- a/vue/src/views/iot/sip/index.vue
+++ b/vue/src/views/iot/sip/index.vue
@@ -14,18 +14,18 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
                 <el-form-item style="float: right">
-                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:video:add']" :disabled="isGeneralUser">{{ $t('sip.index.998533-6') }}</el-button>
-                    <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || isGeneralUser" @click="handleDelete" v-hasPermi="['iot:video:remove']">{{ $t('del') }}</el-button>
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:video:add']" :disabled="isGeneralUser">{{ $t('sip.index.998533-6') }}</el-button>
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple || isGeneralUser" @click="handleDelete" v-hasPermi="['iot:video:remove']">{{ $t('del') }}</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
 
         <el-card style="margin-bottom: 5px">
-            <el-table v-loading="loading" :data="sipidList" @selection-change="handleSelectionChange" @cell-dblclick="celldblclick" size="">
+            <el-table v-loading="loading" :data="sipidList" header-cell-class-name="table-header" :border="false" @selection-change="handleSelectionChange" @cell-dblclick="celldblclick" size="">
                 <el-table-column type="selection" :selectable="selectable" width="55" align="center" />
                 <el-table-column :label="$t('sip.index.998533-0')" align="center" prop="deviceSipId">
                     <template slot-scope="scope">
@@ -35,7 +35,7 @@
                 <el-table-column :label="$t('sip.index.998533-2')" align="center" prop="channelSipId" />
                 <el-table-column :label="$t('sip.index.998533-4')" align="center" prop="status" width="80">
                     <template slot-scope="scope">
-                        <dict-tag :options="dict.type.sip_gen_status" :value="scope.row.status" size="mini" />
+                        <dict-tag :options="dict.type.sip_gen_status" :value="scope.row.status" size="small" />
                     </template>
                 </el-table-column>
                 <el-table-column :label="$t('sip.index.998533-8')" align="center" prop="productName" />
@@ -57,14 +57,16 @@
                 </el-table-column>
                 <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,'remark')" v-hasPermi="['iot:video:edit']">修改
+                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,'remark')" v-hasPermi="['iot:video:edit']">修改
                     </el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:video:remove']" v-if="!scope.row.deviceSipId">删除
+                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:video:remove']" v-if="!scope.row.deviceSipId">删除
                     </el-button>
                 </template>
             </el-table-column> -->
             </el-table>
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
         </el-card>
 
         <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body :close-on-click-modal="false">
@@ -456,3 +458,41 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+</style>
diff --git a/vue/src/views/iot/template/index.vue b/vue/src/views/iot/template/index.vue
index 7793d5da..5a30150a 100644
--- a/vue/src/views/iot/template/index.vue
+++ b/vue/src/views/iot/template/index.vue
@@ -11,17 +11,17 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
                 <el-form-item style="float: right">
-                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:template:add']">{{ $t('add') }}</el-button>
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:template:add']">{{ $t('add') }}</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
 
         <el-card style="padding-bottom: 100px">
-            <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange" border>
+            <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange" :border="false">
                 <el-table-column :label="$t('template.index.891112-22')" align="center" prop="templateName" />
                 <el-table-column :label="$t('template.index.891112-7')" align="center" prop="identifier" />
                 <el-table-column :label="$t('template.index.891112-8')" align="center" prop="isMonitor" width="75">
@@ -81,7 +81,9 @@
                 </el-table-column>
             </el-table>
 
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
 
             <!-- 添加或修改通用物模型对话框 -->
             <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
@@ -271,9 +273,9 @@
                                 <el-row style="padding: 0 10px 5px" v-for="(item, index) in form.specs.params" :key="index">
                                     <div style="margin-top: 5px" v-if="index == 0"></div>
                                     <el-col :span="18">
-                                        <el-input readonly v-model="item.name" size="mini" :placeholder="$t('template.index.891112-76')" style="margin-top: 3px">
+                                        <el-input readonly v-model="item.name" size="small" :placeholder="$t('template.index.891112-76')" style="margin-top: 3px">
                                             <template slot="prepend">
-                                                <el-tag size="mini" effect="dark" style="margin-left: -21px; height: 26px; line-height: 26px">{{ item.order }}</el-tag>
+                                                <el-tag size="small" effect="dark" style="margin-left: -21px; height: 26px; line-height: 26px">{{ item.order }}</el-tag>
                                                 {{ form.identifier + '_' + item.id }}
                                             </template>
                                             <el-button slot="append" @click="editParameter(item, index)" size="small">{{ $t('edit') }}</el-button>
@@ -296,9 +298,9 @@
                                 <el-row style="padding: 0 10px 5px" v-for="(item, index) in form.specs.params" :key="index">
                                     <div style="margin-top: 5px" v-if="index == 0"></div>
                                     <el-col :span="18">
-                                        <el-input readonly v-model="item.name" size="mini" :placeholder="$t('template.index.891112-76')" style="margin-top: 3px">
+                                        <el-input readonly v-model="item.name" size="small" :placeholder="$t('template.index.891112-76')" style="margin-top: 3px">
                                             <template slot="prepend">
-                                                <el-tag size="mini" effect="dark" style="margin-left: -21px; height: 26px; line-height: 26px">{{ item.order }}</el-tag>
+                                                <el-tag size="small" effect="dark" style="margin-left: -21px; height: 26px; line-height: 26px">{{ item.order }}</el-tag>
                                                 {{ form.identifier + '_' + item.id }}
                                             </template>
                                             <el-button slot="append" @click="editParameter(item, index)">{{ $t('edit') }}</el-button>
@@ -899,3 +901,41 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+</style>
diff --git a/vue/src/views/monitor/cache/index.vue b/vue/src/views/monitor/cache/index.vue
index febebe18..b6c064d0 100644
--- a/vue/src/views/monitor/cache/index.vue
+++ b/vue/src/views/monitor/cache/index.vue
@@ -144,3 +144,43 @@ export default {
   }
 };
 </script>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/monitor/job/index.vue b/vue/src/views/monitor/job/index.vue
index 9ca8d8f7..219f251c 100644
--- a/vue/src/views/monitor/job/index.vue
+++ b/vue/src/views/monitor/job/index.vue
@@ -1,512 +1,438 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item :label="$t('system.job.356378-0')" prop="jobName">
-        <el-input
-          v-model="queryParams.jobName"
-          :placeholder="$t('system.job.356378-1')"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item :label="$t('system.job.356378-2')" prop="jobGroup">
-        <el-select v-model="queryParams.jobGroup" :placeholder="$t('system.job.356378-3')" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_job_group"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="$t('system.job.356378-4')" prop="status">
-        <el-select v-model="queryParams.status" :placeholder="$t('system.job.356378-5')" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_job_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['monitor:job:add']"
-        >{{ $t('add') }}</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['monitor:job:edit']"
-        >{{ $t('update') }}</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['monitor:job:remove']"
-        >{{ $t('del') }}</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['monitor:job:export']"
-        >{{ $t('export') }}</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-s-operation"
-          size="mini"
-          @click="handleJobLog"
-          v-hasPermi="['monitor:job:query']"
-        >{{ $t('system.job.356378-6') }}</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column :label="$t('system.job.356378-7')" width="100" align="center" prop="jobId" />
-      <el-table-column :label="$t('system.job.356378-0')" align="center" prop="jobName" :show-overflow-tooltip="true" />
-      <el-table-column :label="$t('system.job.356378-2')" align="center" prop="jobGroup">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('system.job.356378-8')" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
-      <el-table-column :label="$t('system.job.356378-9')" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
-      <el-table-column :label="$t('status')" align="center">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['monitor:job:edit']"
-          >{{ $t('update') }}</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['monitor:job:remove']"
-          >{{ $t('del') }}</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('more') }}</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleRun" icon="el-icon-caret-right"
-                v-hasPermi="['monitor:job:changeStatus']">{{ $t('system.job.356378-10') }}</el-dropdown-item>
-              <el-dropdown-item command="handleView" icon="el-icon-view"
-                v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-11') }}</el-dropdown-item>
-              <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
-                v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-12') }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改定时任务对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-row>
-          <el-col :span="12">
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
             <el-form-item :label="$t('system.job.356378-0')" prop="jobName">
-              <el-input v-model="form.jobName" :placeholder="$t('system.job.356378-1')" />
+                <el-input v-model="queryParams.jobName" :placeholder="$t('system.job.356378-1')" clearable @keyup.enter.native="handleQuery" />
             </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-13')" prop="jobGroup">
-              <el-select v-model="form.jobGroup" :placeholder="$t('system.job.356378-14')">
-                <el-option
-                  v-for="dict in dict.type.sys_job_group"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
-              </el-select>
+            <el-form-item :label="$t('system.job.356378-2')" prop="jobGroup">
+                <el-select v-model="queryParams.jobGroup" :placeholder="$t('system.job.356378-3')" clearable>
+                    <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
             </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item prop="invokeTarget">
-              <span slot="label">
-                {{ $t('system.job.356378-15') }}
-                <el-tooltip placement="top">
-                  <div slot="content">
-                    {{ $t('system.job.356378-16') }}
-                    <br />{{ $t('system.job.356378-17') }}
-                    <br />{{ $t('system.job.356378-18') }}
-                  </div>
-                  <i class="el-icon-question"></i>
-                </el-tooltip>
-              </span>
-              <el-input v-model="form.invokeTarget" :placeholder="$t('system.job.356378-8')" />
+            <el-form-item :label="$t('system.job.356378-4')" prop="status">
+                <el-select v-model="queryParams.status" :placeholder="$t('system.job.356378-5')" clearable>
+                    <el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                </el-select>
             </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item :label="$t('system.job.356378-19')" prop="cronExpression">
-              <el-input v-model="form.cronExpression" :placeholder="$t('system.job.356378-20')">
-                <template slot="append">
-                  <el-button type="primary" @click="handleShowCron">
-                    {{ $t('system.job.356378-21') }}
-                    <i class="el-icon-time el-icon--right"></i>
-                  </el-button>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['monitor:job:add']">{{ $t('add') }}</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:job:export']">{{ $t('export') }}</el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="info" plain icon="el-icon-s-operation" size="small" @click="handleJobLog" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-6') }}</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" :border="false">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column :label="$t('system.job.356378-7')" width="100" align="center" prop="jobId" />
+            <el-table-column :label="$t('system.job.356378-0')" align="center" prop="jobName" :show-overflow-tooltip="true" />
+            <el-table-column :label="$t('system.job.356378-2')" align="center" prop="jobGroup">
+                <template slot-scope="scope">
+                    <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
                 </template>
-              </el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item :label="$t('system.job.356378-22')" prop="misfirePolicy">
-              <el-radio-group v-model="form.misfirePolicy" size="small">
-                <el-radio-button label="1">{{ $t('system.job.356378-23') }}</el-radio-button>
-                <el-radio-button label="2">{{ $t('system.job.356378-10') }}</el-radio-button>
-                <el-radio-button label="3">{{ $t('system.job.356378-24') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-25')" prop="concurrent">
-              <el-radio-group v-model="form.concurrent" size="small">
-                <el-radio-button label="0">{{ $t('system.job.356378-26') }}</el-radio-button>
-                <el-radio-button label="1">{{ $t('system.job.356378-27') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('status')">
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in dict.type.sys_job_status"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-        <el-button @click="cancel">{{ $t('cancel') }}</el-button>
-      </div>
-    </el-dialog>
+            </el-table-column>
+            <el-table-column :label="$t('system.job.356378-8')" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+            <el-table-column :label="$t('system.job.356378-9')" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+            <el-table-column :label="$t('status')" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']">{{ $t('update') }}</el-button>
+                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']">{{ $t('del') }}</el-button>
+                    <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
+                        <el-button size="small" type="text" icon="el-icon-d-arrow-right">{{ $t('more') }}</el-button>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item command="handleRun" icon="el-icon-caret-right" v-hasPermi="['monitor:job:changeStatus']">{{ $t('system.job.356378-10') }}</el-dropdown-item>
+                            <el-dropdown-item command="handleView" icon="el-icon-view" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-11') }}</el-dropdown-item>
+                            <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation" v-hasPermi="['monitor:job:query']">{{ $t('system.job.356378-12') }}</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </template>
+            </el-table-column>
+        </el-table>
 
-    <el-dialog :title="$t('system.job.356378-28')" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
-      <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
-    </el-dialog>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-    <!-- 任务日志详细 -->
-    <el-dialog :title="$t('system.job.356378-11')" :visible.sync="openView" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="120px" size="mini">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-29')">{{ form.jobId }}</el-form-item>
-            <el-form-item :label="$t('system.job.356378-30')">{{ form.jobName }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-31')">{{ jobGroupFormat(form) }}</el-form-item>
-            <el-form-item :label="$t('system.job.356378-32')">{{ form.createTime }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-33')">{{ form.cronExpression }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-34')">{{ parseTime(form.nextValidTime) }}</el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item :label="$t('system.job.356378-35')">{{ form.invokeTarget }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-36')">
-              <div v-if="form.status == 0">{{ $t('system.job.356378-37') }}</div>
-              <div v-else-if="form.status == 1">{{ $t('system.job.356378-38') }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-25') + '：'">
-              <div v-if="form.concurrent == 0">{{ $t('system.job.356378-26') }}</div>
-              <div v-else-if="form.concurrent == 1">{{ $t('system.job.356378-27') }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="$t('system.job.356378-39')">
-              <div v-if="form.misfirePolicy == 0">{{ $t('system.job.356378-40') }}</div>
-              <div v-else-if="form.misfirePolicy == 1">{{ $t('system.job.356378-23') }}</div>
-              <div v-else-if="form.misfirePolicy == 2">{{ $t('system.job.356378-10') }}</div>
-              <div v-else-if="form.misfirePolicy == 3">{{ $t('system.job.356378-24') }}</div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="openView = false">{{ $t('close') }}</el-button>
-      </div>
-    </el-dialog>
-  </div>
+        <!-- 添加或修改定时任务对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-0')" prop="jobName">
+                            <el-input v-model="form.jobName" :placeholder="$t('system.job.356378-1')" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-13')" prop="jobGroup">
+                            <el-select v-model="form.jobGroup" :placeholder="$t('system.job.356378-14')">
+                                <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item prop="invokeTarget">
+                            <span slot="label">
+                                {{ $t('system.job.356378-15') }}
+                                <el-tooltip placement="top">
+                                    <div slot="content">
+                                        {{ $t('system.job.356378-16') }}
+                                        <br />
+                                        {{ $t('system.job.356378-17') }}
+                                        <br />
+                                        {{ $t('system.job.356378-18') }}
+                                    </div>
+                                    <i class="el-icon-question"></i>
+                                </el-tooltip>
+                            </span>
+                            <el-input v-model="form.invokeTarget" :placeholder="$t('system.job.356378-8')" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item :label="$t('system.job.356378-19')" prop="cronExpression">
+                            <el-input v-model="form.cronExpression" :placeholder="$t('system.job.356378-20')">
+                                <template slot="append">
+                                    <el-button type="primary" @click="handleShowCron">
+                                        {{ $t('system.job.356378-21') }}
+                                        <i class="el-icon-time el-icon--right"></i>
+                                    </el-button>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item :label="$t('system.job.356378-22')" prop="misfirePolicy">
+                            <el-radio-group v-model="form.misfirePolicy" size="small">
+                                <el-radio-button label="1">{{ $t('system.job.356378-23') }}</el-radio-button>
+                                <el-radio-button label="2">{{ $t('system.job.356378-10') }}</el-radio-button>
+                                <el-radio-button label="3">{{ $t('system.job.356378-24') }}</el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-25')" prop="concurrent">
+                            <el-radio-group v-model="form.concurrent" size="small">
+                                <el-radio-button label="0">{{ $t('system.job.356378-26') }}</el-radio-button>
+                                <el-radio-button label="1">{{ $t('system.job.356378-27') }}</el-radio-button>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('status')">
+                            <el-radio-group v-model="form.status">
+                                <el-radio v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+            </div>
+        </el-dialog>
+
+        <el-dialog :title="$t('system.job.356378-28')" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+            <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
+        </el-dialog>
+
+        <!-- 任务日志详细 -->
+        <el-dialog :title="$t('system.job.356378-11')" :visible.sync="openView" width="700px" append-to-body>
+            <el-form ref="form" :model="form" label-width="120px" size="small">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-29')">{{ form.jobId }}</el-form-item>
+                        <el-form-item :label="$t('system.job.356378-30')">{{ form.jobName }}</el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-31')">{{ jobGroupFormat(form) }}</el-form-item>
+                        <el-form-item :label="$t('system.job.356378-32')">{{ form.createTime }}</el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-33')">{{ form.cronExpression }}</el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-34')">{{ parseTime(form.nextValidTime) }}</el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item :label="$t('system.job.356378-35')">{{ form.invokeTarget }}</el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-36')">
+                            <div v-if="form.status == 0">{{ $t('system.job.356378-37') }}</div>
+                            <div v-else-if="form.status == 1">{{ $t('system.job.356378-38') }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-25') + '：'">
+                            <div v-if="form.concurrent == 0">{{ $t('system.job.356378-26') }}</div>
+                            <div v-else-if="form.concurrent == 1">{{ $t('system.job.356378-27') }}</div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('system.job.356378-39')">
+                            <div v-if="form.misfirePolicy == 0">{{ $t('system.job.356378-40') }}</div>
+                            <div v-else-if="form.misfirePolicy == 1">{{ $t('system.job.356378-23') }}</div>
+                            <div v-else-if="form.misfirePolicy == 2">{{ $t('system.job.356378-10') }}</div>
+                            <div v-else-if="form.misfirePolicy == 3">{{ $t('system.job.356378-24') }}</div>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="openView = false">{{ $t('close') }}</el-button>
+            </div>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
-import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
-import Crontab from '@/components/Crontab'
+import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from '@/api/monitor/job';
+import Crontab from '@/components/Crontab';
 
 export default {
-  components: { Crontab },
-  name: "Job",
-  dicts: ['sys_job_group', 'sys_job_status'],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 定时任务表格数据
-      jobList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 是否显示详细弹出层
-      openView: false,
-      // 是否显示Cron表达式弹出层
-      openCron: false,
-      // 传入的表达式
-      expression: "",
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        jobName: undefined,
-        jobGroup: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        jobName: [
-          { required: true, message: this.$t('system.job.356378-41'), trigger: "blur" }
-        ],
-        invokeTarget: [
-          { required: true, message: this.$t('system.job.356378-42'), trigger: "blur" }
-        ],
-        cronExpression: [
-          { required: true, message: this.$t('system.job.356378-43'), trigger: "blur" }
-        ]
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询定时任务列表 */
-    getList() {
-      this.loading = true;
-      listJob(this.queryParams).then(response => {
-        this.jobList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+    components: { Crontab },
+    name: 'Job',
+    dicts: ['sys_job_group', 'sys_job_status'],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 定时任务表格数据
+            jobList: [],
+            // 弹出层标题
+            title: '',
+            // 是否显示弹出层
+            open: false,
+            // 是否显示详细弹出层
+            openView: false,
+            // 是否显示Cron表达式弹出层
+            openCron: false,
+            // 传入的表达式
+            expression: '',
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                jobName: undefined,
+                jobGroup: undefined,
+                status: undefined,
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                jobName: [{ required: true, message: this.$t('system.job.356378-41'), trigger: 'blur' }],
+                invokeTarget: [{ required: true, message: this.$t('system.job.356378-42'), trigger: 'blur' }],
+                cronExpression: [{ required: true, message: this.$t('system.job.356378-43'), trigger: 'blur' }],
+            },
+        };
     },
-    // 任务组名字典翻译
-    jobGroupFormat(row, column) {
-      return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        jobId: undefined,
-        jobName: undefined,
-        jobGroup: undefined,
-        invokeTarget: undefined,
-        cronExpression: undefined,
-        misfirePolicy: 1,
-        concurrent: 1,
-        status: "0"
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.jobId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleRun":
-          this.handleRun(row);
-          break;
-        case "handleView":
-          this.handleView(row);
-          break;
-        case "handleJobLog":
-          this.handleJobLog(row);
-          break;
-        default:
-          break;
-      }
-    },
-    // 任务状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? this.$t('system.job.356378-26') : this.$t('system.job.356378-27');
-      this.$modal.confirm(this.$t('system.job.356378-44') + '"' + text + '""' + row.jobName + '"' + this.$t('system.job.356378-45')).then(function() {
-        return changeJobStatus(row.jobId, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + this.$t('success'));
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
-    },
-    /* 立即执行一次 */
-    handleRun(row) {
-      this.$modal.confirm(this.$t('system.job.356378-46') + '"' + row.jobName + '"' + this.$t('system.job.356378-45')).then(function() {
-        return runJob(row.jobId, row.jobGroup);
-      }).then(() => {
-        this.$modal.msgSuccess(this.$t('system.job.356378-47'));
-      }).catch(() => {});
-    },
-    /** 任务详细信息 */
-    handleView(row) {
-      getJob(row.jobId).then(response => {
-        this.form = response.data;
-        this.openView = true;
-      });
-    },
-    /** cron表达式按钮操作 */
-    handleShowCron() {
-      this.expression = this.form.cronExpression;
-      this.openCron = true;
-    },
-    /** 确定后回传值 */
-    crontabFill(value) {
-      this.form.cronExpression = value;
-    },
-    /** 任务日志列表查询 */
-    handleJobLog(row) {
-      const jobId = row.jobId || 0;
-      this.$router.push('/monitor/job-log/index/' + jobId)
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = this.$t('system.job.356378-48');
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const jobId = row.jobId || this.ids;
-      getJob(jobId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = this.$t('system.job.356378-49');
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.jobId != undefined) {
-            updateJob(this.form).then(response => {
-              this.$modal.msgSuccess(this.$t('updateSuccess'));
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addJob(this.form).then(response => {
-              this.$modal.msgSuccess(this.$t('addSuccess'));
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const jobIds = row.jobId || this.ids;
-      this.$modal.confirm(this.$t('system.job.356378-50', [jobIds])).then(function() {
-        return delJob(jobIds);
-      }).then(() => {
+    created() {
         this.getList();
-        this.$modal.msgSuccess(this.$t('delSuccess'));
-      }).catch(() => {});
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('monitor/job/export', {
-        ...this.queryParams
-      }, `job_${new Date().getTime()}.xlsx`)
-    }
-  }
+    methods: {
+        /** 查询定时任务列表 */
+        getList() {
+            this.loading = true;
+            listJob(this.queryParams).then((response) => {
+                this.jobList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 任务组名字典翻译
+        jobGroupFormat(row, column) {
+            return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                jobId: undefined,
+                jobName: undefined,
+                jobGroup: undefined,
+                invokeTarget: undefined,
+                cronExpression: undefined,
+                misfirePolicy: 1,
+                concurrent: 1,
+                status: '0',
+            };
+            this.resetForm('form');
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm');
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.jobId);
+            this.single = selection.length != 1;
+            this.multiple = !selection.length;
+        },
+        // 更多操作触发
+        handleCommand(command, row) {
+            switch (command) {
+                case 'handleRun':
+                    this.handleRun(row);
+                    break;
+                case 'handleView':
+                    this.handleView(row);
+                    break;
+                case 'handleJobLog':
+                    this.handleJobLog(row);
+                    break;
+                default:
+                    break;
+            }
+        },
+        // 任务状态修改
+        handleStatusChange(row) {
+            let text = row.status === '0' ? this.$t('system.job.356378-26') : this.$t('system.job.356378-27');
+            this.$modal
+                .confirm(this.$t('system.job.356378-44') + '"' + text + '""' + row.jobName + '"' + this.$t('system.job.356378-45'))
+                .then(function () {
+                    return changeJobStatus(row.jobId, row.status);
+                })
+                .then(() => {
+                    this.$modal.msgSuccess(text + this.$t('success'));
+                })
+                .catch(function () {
+                    row.status = row.status === '0' ? '1' : '0';
+                });
+        },
+        /* 立即执行一次 */
+        handleRun(row) {
+            this.$modal
+                .confirm(this.$t('system.job.356378-46') + '"' + row.jobName + '"' + this.$t('system.job.356378-45'))
+                .then(function () {
+                    return runJob(row.jobId, row.jobGroup);
+                })
+                .then(() => {
+                    this.$modal.msgSuccess(this.$t('system.job.356378-47'));
+                })
+                .catch(() => {});
+        },
+        /** 任务详细信息 */
+        handleView(row) {
+            getJob(row.jobId).then((response) => {
+                this.form = response.data;
+                this.openView = true;
+            });
+        },
+        /** cron表达式按钮操作 */
+        handleShowCron() {
+            this.expression = this.form.cronExpression;
+            this.openCron = true;
+        },
+        /** 确定后回传值 */
+        crontabFill(value) {
+            this.form.cronExpression = value;
+        },
+        /** 任务日志列表查询 */
+        handleJobLog(row) {
+            const jobId = row.jobId || 0;
+            this.$router.push('/monitor/job-log/index/' + jobId);
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = this.$t('system.job.356378-48');
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const jobId = row.jobId || this.ids;
+            getJob(jobId).then((response) => {
+                this.form = response.data;
+                this.open = true;
+                this.title = this.$t('system.job.356378-49');
+            });
+        },
+        /** 提交按钮 */
+        submitForm: function () {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    if (this.form.jobId != undefined) {
+                        updateJob(this.form).then((response) => {
+                            this.$modal.msgSuccess(this.$t('updateSuccess'));
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addJob(this.form).then((response) => {
+                            this.$modal.msgSuccess(this.$t('addSuccess'));
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const jobIds = row.jobId || this.ids;
+            this.$modal
+                .confirm(this.$t('system.job.356378-50', [jobIds]))
+                .then(function () {
+                    return delJob(jobIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(this.$t('delSuccess'));
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                'monitor/job/export',
+                {
+                    ...this.queryParams,
+                },
+                `job_${new Date().getTime()}.xlsx`
+            );
+        },
+    },
 };
+</script>
diff --git a/vue/src/views/monitor/logininfor/index.vue b/vue/src/views/monitor/logininfor/index.vue
index 726bb403..0c660185 100644
--- a/vue/src/views/monitor/logininfor/index.vue
+++ b/vue/src/views/monitor/logininfor/index.vue
@@ -46,8 +46,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
       </el-form-item>
     </el-form>
 
@@ -57,7 +57,7 @@
           type="danger"
           plain
           icon="el-icon-delete"
-          size="mini"
+          size="small"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['monitor:logininfor:remove']"
@@ -68,7 +68,7 @@
           type="danger"
           plain
           icon="el-icon-delete"
-          size="mini"
+          size="small"
           @click="handleClean"
           v-hasPermi="['monitor:logininfor:remove']"
         >{{ $t('clean') }}</el-button>
@@ -78,7 +78,7 @@
           type="primary"
           plain
           icon="el-icon-unlock"
-          size="mini"
+          size="small"
           :disabled="single"
           @click="handleUnlock"
           v-hasPermi="['monitor:logininfor:unlock']"
@@ -89,7 +89,7 @@
           type="warning"
           plain
           icon="el-icon-download"
-          size="mini"
+          size="small"
           @click="handleExport"
           v-hasPermi="['monitor:logininfor:export']"
         >{{ $t('export') }}</el-button>
@@ -97,7 +97,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+    <el-table ref="tables" v-loading="loading" :data="list" :border="false" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column :label="$t('monitor.logininfor.670912-10')" align="center" prop="infoId" />
       <el-table-column :label="$t('monitor.logininfor.670912-2')" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
@@ -243,3 +243,43 @@ export default {
 };
 </script>
 
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/monitor/online/index.vue b/vue/src/views/monitor/online/index.vue
index e3835023..c7a4555e 100644
--- a/vue/src/views/monitor/online/index.vue
+++ b/vue/src/views/monitor/online/index.vue
@@ -8,11 +8,11 @@
                 <el-input v-model="queryParams.userName" :placeholder="$t('online.093480-2')" clearable @keyup.enter.native="handleQuery" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
             </el-form-item>
         </el-form>
-        <el-table v-loading="loading" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%">
+        <el-table v-loading="loading" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)" style="width: 100%" :border="false">
             <el-table-column :label="$t('online.093480-3')" type="index" align="center">
                 <template slot-scope="scope">
                     <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
@@ -32,12 +32,14 @@
             </el-table-column>
             <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">{{ $t('online.093480-12') }}</el-button>
+                    <el-button size="small" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">{{ $t('online.093480-12') }}</el-button>
                 </template>
             </el-table-column>
         </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+        <div class="pagination-container">
+            <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+        </div>
     </div>
 </template>
 
@@ -102,3 +104,41 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+</style>
diff --git a/vue/src/views/monitor/operlog/index.vue b/vue/src/views/monitor/operlog/index.vue
index 2429999a..0b7d6585 100644
--- a/vue/src/views/monitor/operlog/index.vue
+++ b/vue/src/views/monitor/operlog/index.vue
@@ -33,25 +33,25 @@
                 ></el-date-picker>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
             </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">{{ $t('del') }}</el-button>
+                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">{{ $t('del') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">{{ $t('operlog.874509-7') }}</el-button>
+                <el-button type="danger" plain icon="el-icon-delete" size="small" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">{{ $t('operlog.874509-7') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['monitor:operlog:export']">{{ $t('export') }}</el-button>
+                <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['monitor:operlog:export']">{{ $t('export') }}</el-button>
             </el-col>
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
-        <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+        <el-table ref="tables" v-loading="loading" :data="list" :border="false" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column :label="$t('operlog.874509-8')" align="center" prop="operId" />
             <el-table-column :label="$t('operlog.874509-0')" align="center" prop="title" :show-overflow-tooltip="true" />
@@ -80,16 +80,18 @@
             </el-table-column>
             <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">{{ $t('operlog.874509-13') }}</el-button>
+                    <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">{{ $t('operlog.874509-13') }}</el-button>
                 </template>
             </el-table-column>
         </el-table>
 
+        <div class="pagination-container">
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </div>
 
         <!-- 操作日志详细 -->
         <el-dialog :title="$t('operlog.874509-14')" :visible.sync="open" width="800px" append-to-body>
-            <el-form ref="form" :model="form" label-width="100px" size="mini">
+            <el-form ref="form" :model="form" label-width="100px" size="small">
                 <el-row>
                     <el-col :span="12">
                         <el-form-item :label="$t('operlog.874509-15')">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
@@ -257,3 +259,43 @@ export default {
     },
 };
 </script>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/monitor/server/index.vue b/vue/src/views/monitor/server/index.vue
index 292c2dd7..c34177ee 100644
--- a/vue/src/views/monitor/server/index.vue
+++ b/vue/src/views/monitor/server/index.vue
@@ -205,3 +205,43 @@ export default {
   }
 };
 </script>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>
diff --git a/vue/src/views/system/config/index.vue b/vue/src/views/system/config/index.vue
index 4747629b..19918ddf 100644
--- a/vue/src/views/system/config/index.vue
+++ b/vue/src/views/system/config/index.vue
@@ -1,79 +1,87 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item :label="$t('system.config.898564-0')" prop="configName">
-                <el-input v-model="queryParams.configName" :placeholder="$t('system.config.898564-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.config.898564-2')" prop="configKey">
-                <el-input v-model="queryParams.configKey" :placeholder="$t('system.config.898564-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.config.898564-4')" prop="configType">
-                <el-select v-model="queryParams.configType" :placeholder="$t('system.config.898564-4')" clearable>
-                    <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('creatTime')">
-                <el-date-picker
-                    v-model="dateRange"
-                    style="width: 240px"
-                    value-format="yyyy-MM-dd"
-                    type="daterange"
-                    range-separator="-"
-                    :start-placeholder="$t('system.dict.index.880996-3')"
-                    :end-placeholder="$t('system.dict.index.880996-4')"
-                ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+                <el-form-item :label="$t('system.config.898564-0')" prop="configName">
+                    <el-input v-model="queryParams.configName" :placeholder="$t('system.config.898564-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.config.898564-2')" prop="configKey">
+                    <el-input v-model="queryParams.configKey" :placeholder="$t('system.config.898564-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.config.898564-4')" prop="configType">
+                    <el-select v-model="queryParams.configType" :placeholder="$t('system.config.898564-4')" clearable>
+                        <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('creatTime')">
+                    <el-date-picker
+                        v-model="dateRange"
+                        style="width: 240px"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        :start-placeholder="$t('system.dict.index.880996-3')"
+                        :end-placeholder="$t('system.dict.index.880996-4')"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
 
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:config:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']">{{ $t('update') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">{{ $t('del') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:config:export']">{{ $t('export') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-refresh" size="mini" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">{{ $t('del') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:config:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:config:edit']">{{ $t('update') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:config:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['system:config:export']">{{ $t('export') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-refresh" size="small" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
 
-        <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column :label="$t('system.config.898564-5')" align="center" prop="configId" />
-            <el-table-column :label="$t('system.config.898564-0')" align="center" prop="configName" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('system.config.898564-2')" align="center" prop="configKey" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('system.config.898564-6')" align="center" prop="configValue" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('system.config.898564-4')" align="center" prop="configType">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('remark')" align="center" prop="remark" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">{{ $t('del') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
+            <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange" header-cell-class-name="table-header" :border="false">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column :label="$t('system.config.898564-5')" align="center" prop="configId" />
+                <el-table-column :label="$t('system.config.898564-0')" align="center" prop="configName" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('system.config.898564-2')" align="center" prop="configKey" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('system.config.898564-6')" align="center" prop="configValue" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('system.config.898564-4')" align="center" prop="configType">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('remark')" align="center" prop="remark" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']">{{ $t('update') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">{{ $t('del') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </div>
+        </el-card>
 
         <!-- 添加或修改参数配置对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -266,3 +274,104 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/dept/index.vue b/vue/src/views/system/dept/index.vue
index c0a7d499..573baaae 100644
--- a/vue/src/views/system/dept/index.vue
+++ b/vue/src/views/system/dept/index.vue
@@ -1,106 +1,121 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-            <el-form-item :label="$t('system.dept.780956-0')" prop="deptName">
-                <el-input v-model="queryParams.deptName" :placeholder="$t('system.dept.780956-1')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.dept.780956-2')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('system.dept.780956-2')" clearable>
-                    <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dept:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">{{ $t('expand') }}/{{ $t('collapse') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="deptId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-            <el-table-column prop="deptName" :label="$t('system.dept.780956-0')" width="260"></el-table-column>
-            <el-table-column prop="orderNum" :label="$t('system.dept.780956-2')" width="200"></el-table-column>
-            <el-table-column prop="status" :label="$t('system.dept.780956-2')" width="100">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="200">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">{{ $t('add') }}</el-button>
-                    <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">{{ $t('del') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <!-- 添加或修改部门对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-                <el-row>
-                    <el-col :span="24" v-if="form.parentId !== 0">
-                        <el-form-item :label="$t('system.dept.780956-10')" prop="parentId">
-                            <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" :placeholder="$t('system.dept.780956-11')" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.dept.780956-0')" prop="deptName">
-                            <el-input v-model="form.deptName" :placeholder="$t('system.dept.780956-1')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.dept.780956-2')" prop="orderNum">
-                            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.dept.780956-4')" prop="leader">
-                            <el-input v-model="form.leader" :placeholder="$t('system.dept.780956-13')" maxlength="20" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.dept.780956-21')" prop="phone">
-                            <el-input v-model="form.phone" :placeholder="$t('system.dept.780956-22')" maxlength="11" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('user.index.098976-19')" prop="email">
-                            <el-input v-model="form.email" :placeholder="$t('user.index.098976-20')" maxlength="50" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.dept.780956-2')">
-                            <el-radio-group v-model="form.status">
-                                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+                <el-form-item :label="$t('system.dept.780956-0')" prop="deptName">
+                    <el-input v-model="queryParams.deptName" :placeholder="$t('system.dept.780956-1')" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.dept.780956-2')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('system.dept.780956-2')" clearable>
+                        <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
-            </div>
-        </el-dialog>
+        </el-card>
+
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:dept:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="info" plain icon="el-icon-sort" size="small" @click="toggleExpandAll">{{ $t('expand') }}/{{ $t('collapse') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table
+                v-if="refreshTable"
+                v-loading="loading"
+                :data="deptList"
+                row-key="deptId"
+                :default-expand-all="isExpandAll"
+                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+                header-cell-class-name="table-header"
+                :border="false"
+            >
+                <el-table-column prop="deptName" :label="$t('system.dept.780956-0')" width="260"></el-table-column>
+                <el-table-column prop="orderNum" :label="$t('system.dept.780956-2')" width="200"></el-table-column>
+                <el-table-column prop="status" :label="$t('system.dept.780956-2')" width="100">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="200">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">{{ $t('update') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">{{ $t('add') }}</el-button>
+                        <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">{{ $t('del') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!-- 添加或修改部门对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                    <el-row>
+                        <el-col :span="24" v-if="form.parentId !== 0">
+                            <el-form-item :label="$t('system.dept.780956-10')" prop="parentId">
+                                <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" :placeholder="$t('system.dept.780956-11')" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.dept.780956-0')" prop="deptName">
+                                <el-input v-model="form.deptName" :placeholder="$t('system.dept.780956-1')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.dept.780956-2')" prop="orderNum">
+                                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.dept.780956-4')" prop="leader">
+                                <el-input v-model="form.leader" :placeholder="$t('system.dept.780956-13')" maxlength="20" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.dept.780956-21')" prop="phone">
+                                <el-input v-model="form.phone" :placeholder="$t('system.dept.780956-22')" maxlength="11" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('user.index.098976-19')" prop="email">
+                                <el-input v-model="form.email" :placeholder="$t('user.index.098976-20')" maxlength="50" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.dept.780956-2')">
+                                <el-radio-group v-model="form.status">
+                                    <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -283,3 +298,103 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/dict/index.vue b/vue/src/views/system/dict/index.vue
index bcb9ad9b..e50ea016 100644
--- a/vue/src/views/system/dict/index.vue
+++ b/vue/src/views/system/dict/index.vue
@@ -1,108 +1,115 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item :label="$t('system.dict.index.880996-0')" prop="dictName">
-                <el-input v-model="queryParams.dictName" :placeholder="$t('system.dict.index.880996-0')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.dict.index.880996-1')" prop="dictType">
-                <el-input v-model="queryParams.dictType" :placeholder="$t('system.dict.index.880996-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.dict.index.880996-2')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('system.dict.index.880996-2')" clearable style="width: 240px">
-                    <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('system.dict.index.880996-3')" prop="createTimeTime">
-                <el-date-picker
-                    v-model="dateRange"
-                    style="width: 240px"
-                    value-format="yyyy-MM-dd"
-                    type="daterange"
-                    range-separator="-"
-                    start-placeholder="$t('system.dict.index.880996-3')"
-                    end-placeholder="$t('system.dict.index.880996-4')"
-                ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dict:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">{{ $t('edit') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">{{ $t('delete') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:dict:export']">{{ $t('export') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-refresh" size="mini" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">{{ $t('system.dict.index.880996-5') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column :label="$t('system.dict.index.880996-6')" align="center" prop="dictId" />
-            <el-table-column :label="$t('system.dict.index.880996-0')" align="center" prop="dictName" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('system.dict.index.880996-1')" align="center" :show-overflow-tooltip="true">
-                <template slot-scope="scope">
-                    <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
-                        <span>{{ scope.row.dictType }}</span>
-                    </router-link>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('status')" align="center" prop="status">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('remark')" align="center" prop="remark" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">{{ $t('edit') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">{{ $t('del') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改参数配置对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('system.dict.index.880996-0')" prop="dictName">
-                    <el-input v-model="form.dictName" :placeholder="$t('system.dict.index.880996-0')" />
+                    <el-input v-model="queryParams.dictName" :placeholder="$t('system.dict.index.880996-0')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('system.dict.index.880996-1')" prop="dictType">
-                    <el-input v-model="form.dictType" :placeholder="$t('system.dict.index.880996-1')" />
+                    <el-input v-model="queryParams.dictType" :placeholder="$t('system.dict.index.880996-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('status')" prop="status">
-                    <el-radio-group v-model="form.status">
-                        <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                    </el-radio-group>
+                <el-form-item :label="$t('system.dict.index.880996-2')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('system.dict.index.880996-2')" clearable style="width: 240px">
+                        <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('remark')" prop="remark">
-                    <el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')"></el-input>
+                <el-form-item :label="$t('system.dict.index.880996-3')" prop="createTimeTime">
+                    <el-date-picker
+                        v-model="dateRange"
+                        style="width: 240px"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        :start-placeholder="$t('system.dict.index.880996-3')"
+                        :end-placeholder="$t('system.dict.index.880996-4')"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+        </el-card>
+
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:dict:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">{{ $t('edit') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['system:dict:export']">{{ $t('export') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-refresh" size="small" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">{{ $t('system.dict.index.880996-5') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" header-cell-class-name="table-header" :border="false">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column :label="$t('system.dict.index.880996-6')" align="center" prop="dictId" />
+                <el-table-column :label="$t('system.dict.index.880996-0')" align="center" prop="dictName" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('system.dict.index.880996-1')" align="center" :show-overflow-tooltip="true">
+                    <template slot-scope="scope">
+                        <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+                            <span>{{ scope.row.dictType }}</span>
+                        </router-link>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('status')" align="center" prop="status">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('remark')" align="center" prop="remark" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">{{ $t('edit') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">{{ $t('del') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
             </div>
-        </el-dialog>
+            <!-- 添加或修改参数配置对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                    <el-form-item :label="$t('system.dict.index.880996-0')" prop="dictName">
+                        <el-input v-model="form.dictName" :placeholder="$t('system.dict.index.880996-0')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.dict.index.880996-1')" prop="dictType">
+                        <el-input v-model="form.dictType" :placeholder="$t('system.dict.index.880996-1')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('status')" prop="status">
+                        <el-radio-group v-model="form.status">
+                            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item :label="$t('remark')" prop="remark">
+                        <el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')"></el-input>
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -267,3 +274,103 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/menu/index.vue b/vue/src/views/system/menu/index.vue
index 644fdfec..8481e2df 100644
--- a/vue/src/views/system/menu/index.vue
+++ b/vue/src/views/system/menu/index.vue
@@ -1,203 +1,218 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-            <el-form-item :label="$t('system.menu.034890-0')" prop="menuName">
-                <el-input v-model="queryParams.menuName" :placeholder="$t('system.menu.034890-1')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.menu.034890-2')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('system.menu.034890-2')" clearable>
-                    <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">{{ $t('system.menu.034890-6') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-            <el-table-column prop="menuName" :label="$t('system.menu.034890-0')" :show-overflow-tooltip="true" width="160"></el-table-column>
-            <el-table-column prop="icon" :label="$t('system.menu.034890-7')" align="center" width="100">
-                <template slot-scope="scope">
-                    <svg-icon :icon-class="scope.row.icon" />
-                </template>
-            </el-table-column>
-            <el-table-column prop="orderNum" :label="$t('system.menu.034890-8')" width="60"></el-table-column>
-            <el-table-column prop="perms" :label="$t('system.menu.034890-9')" :show-overflow-tooltip="true"></el-table-column>
-            <el-table-column prop="component" :label="$t('system.menu.034890-10')" :show-overflow-tooltip="true"></el-table-column>
-            <el-table-column prop="status" :label="$t('system.menu.034890-2')" width="80">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">{{ $t('add') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">{{ $t('del') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <!-- 添加或修改菜单对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('system.menu.034890-11')" prop="parentId">
-                            <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" :placeholder="$t('system.menu.034890-12')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('system.menu.034890-13')" prop="menuType">
-                            <el-radio-group v-model="form.menuType">
-                                <el-radio label="M">{{ $t('system.menu.034890-14') }}</el-radio>
-                                <el-radio label="C">{{ $t('system.menu.034890-15') }}</el-radio>
-                                <el-radio label="F">{{ $t('system.menu.034890-16') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24" v-if="form.menuType != 'F'">
-                        <el-form-item :label="$t('system.menu.034890-7')" prop="icon">
-                            <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
-                                <IconSelect ref="iconSelect" @selected="selected" />
-                                <el-input slot="reference" v-model="form.icon" :placeholder="$t('system.menu.034890-17')" readonly>
-                                    <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px; width: 16px" />
-                                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                                </el-input>
-                            </el-popover>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.menu.034890-0')" prop="menuName">
-                            <el-input v-model="form.menuName" :placeholder="$t('system.menu.034890-1')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.menu.034890-8')" prop="orderNum">
-                            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType != 'F'">
-                        <el-form-item prop="isFrame">
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-16')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-17') }}
-                            </span>
-                            <el-radio-group v-model="form.isFrame">
-                                <el-radio label="0">{{ $t('system.menu.034890-19') }}</el-radio>
-                                <el-radio label="1">{{ $t('system.menu.034890-20') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType != 'F'">
-                        <el-form-item prop="path">
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-18')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-19') }}
-                            </span>
-                            <el-input v-model="form.path" :placeholder="$t('system.menu.034890-20')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType == 'C'">
-                        <el-form-item prop="component">
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-21')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-22') }}
-                            </span>
-                            <el-input v-model="form.component" :placeholder="$t('system.menu.034890-23')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType != 'M'">
-                        <el-form-item prop="perms">
-                            <el-input v-model="form.perms" :placeholder="$t('system.menu.034890-24')" maxlength="100" />
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-25')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-26') }}
-                            </span>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType == 'C'">
-                        <el-form-item prop="query">
-                            <el-input v-model="form.query" :placeholder="$t('system.menu.034890-27')" maxlength="255" />
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-28')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-29') }}
-                            </span>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType == 'C'">
-                        <el-form-item prop="isCache">
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-30')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-31') }}
-                            </span>
-                            <el-radio-group v-model="form.isCache">
-                                <el-radio label="0">{{ $t('system.menu.034890-32') }}</el-radio>
-                                <el-radio label="1">{{ $t('system.menu.034890-33') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType != 'F'">
-                        <el-form-item prop="visible">
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-34')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-35') }}
-                            </span>
-                            <el-radio-group v-model="form.visible">
-                                <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="form.menuType != 'F'">
-                        <el-form-item prop="status">
-                            <span slot="label">
-                                <el-tooltip :content="$t('system.menu.034890-36')" placement="top">
-                                    <i class="el-icon-question"></i>
-                                </el-tooltip>
-                                {{ $t('system.menu.034890-2') }}
-                            </span>
-                            <el-radio-group v-model="form.status">
-                                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+                <el-form-item :label="$t('system.menu.034890-0')" prop="menuName">
+                    <el-input v-model="queryParams.menuName" :placeholder="$t('system.menu.034890-1')" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.menu.034890-2')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('system.menu.034890-2')" clearable>
+                        <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
-            </div>
-        </el-dialog>
+        </el-card>
+
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:menu:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="info" plain icon="el-icon-sort" size="small" @click="toggleExpandAll">{{ $t('system.menu.034890-6') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table
+                v-if="refreshTable"
+                v-loading="loading"
+                :data="menuList"
+                row-key="menuId"
+                :default-expand-all="isExpandAll"
+                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+                header-cell-class-name="table-header"
+                :border="false"
+            >
+                <el-table-column prop="menuName" :label="$t('system.menu.034890-0')" :show-overflow-tooltip="true" width="160"></el-table-column>
+                <el-table-column prop="icon" :label="$t('system.menu.034890-3')" align="center" width="100">
+                    <template slot-scope="scope">
+                        <svg-icon :icon-class="scope.row.icon" />
+                    </template>
+                </el-table-column>
+                <el-table-column prop="orderNum" :label="$t('system.menu.034890-4')" width="60"></el-table-column>
+                <el-table-column prop="perms" :label="$t('system.menu.034890-5')" :show-overflow-tooltip="true"></el-table-column>
+                <el-table-column prop="component" :label="$t('system.menu.034890-6')" :show-overflow-tooltip="true"></el-table-column>
+                <el-table-column prop="status" :label="$t('system.menu.034890-2')" width="80">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">{{ $t('update') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">{{ $t('add') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">{{ $t('del') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!-- 添加或修改菜单对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('system.menu.034890-11')" prop="parentId">
+                                <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" :placeholder="$t('system.menu.034890-12')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('system.menu.034890-13')" prop="menuType">
+                                <el-radio-group v-model="form.menuType">
+                                    <el-radio label="M">{{ $t('system.menu.034890-14') }}</el-radio>
+                                    <el-radio label="C">{{ $t('system.menu.034890-15') }}</el-radio>
+                                    <el-radio label="F">{{ $t('system.menu.034890-16') }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24" v-if="form.menuType != 'F'">
+                            <el-form-item :label="$t('system.menu.034890-7')" prop="icon">
+                                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
+                                    <IconSelect ref="iconSelect" @selected="selected" />
+                                    <el-input slot="reference" v-model="form.icon" :placeholder="$t('system.menu.034890-17')" readonly>
+                                        <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px; width: 16px" />
+                                        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                                    </el-input>
+                                </el-popover>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.menu.034890-0')" prop="menuName">
+                                <el-input v-model="form.menuName" :placeholder="$t('system.menu.034890-1')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.menu.034890-8')" prop="orderNum">
+                                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType != 'F'">
+                            <el-form-item prop="isFrame">
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-16')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-17') }}
+                                </span>
+                                <el-radio-group v-model="form.isFrame">
+                                    <el-radio label="0">{{ $t('system.menu.034890-19') }}</el-radio>
+                                    <el-radio label="1">{{ $t('system.menu.034890-20') }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType != 'F'">
+                            <el-form-item prop="path">
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-18')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-19') }}
+                                </span>
+                                <el-input v-model="form.path" :placeholder="$t('system.menu.034890-20')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType == 'C'">
+                            <el-form-item prop="component">
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-21')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-22') }}
+                                </span>
+                                <el-input v-model="form.component" :placeholder="$t('system.menu.034890-23')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType != 'M'">
+                            <el-form-item prop="perms">
+                                <el-input v-model="form.perms" :placeholder="$t('system.menu.034890-24')" maxlength="100" />
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-25')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-26') }}
+                                </span>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType == 'C'">
+                            <el-form-item prop="query">
+                                <el-input v-model="form.query" :placeholder="$t('system.menu.034890-27')" maxlength="255" />
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-28')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-29') }}
+                                </span>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType == 'C'">
+                            <el-form-item prop="isCache">
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-30')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-31') }}
+                                </span>
+                                <el-radio-group v-model="form.isCache">
+                                    <el-radio label="0">{{ $t('system.menu.034890-32') }}</el-radio>
+                                    <el-radio label="1">{{ $t('system.menu.034890-33') }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType != 'F'">
+                            <el-form-item prop="visible">
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-34')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-35') }}
+                                </span>
+                                <el-radio-group v-model="form.visible">
+                                    <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="form.menuType != 'F'">
+                            <el-form-item prop="status">
+                                <span slot="label">
+                                    <el-tooltip :content="$t('system.menu.034890-36')" placement="top">
+                                        <i class="el-icon-question"></i>
+                                    </el-tooltip>
+                                    {{ $t('system.menu.034890-2') }}
+                                </span>
+                                <el-radio-group v-model="form.status">
+                                    <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -376,3 +391,103 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/notice/index.vue b/vue/src/views/system/notice/index.vue
index e00e363e..d556baf7 100644
--- a/vue/src/views/system/notice/index.vue
+++ b/vue/src/views/system/notice/index.vue
@@ -1,101 +1,107 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item :label="$t('system.notice.670989-0')" prop="noticeTitle">
-                <el-input v-model="queryParams.noticeTitle" :placeholder="$t('system.notice.670989-1')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.notice.670989-2')" prop="createBy">
-                <el-input v-model="queryParams.createBy" :placeholder="$t('system.notice.670989-3')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.notice.670989-4')" prop="noticeType">
-                <el-select v-model="queryParams.noticeType" :placeholder="$t('system.notice.670989-5')" clearable>
-                    <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:notice:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:notice:edit']">{{ $t('edit') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:notice:remove']">{{ $t('del') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column :label="$t('system.notice.670989-15')" align="center" prop="noticeId" width="100" />
-            <el-table-column :label="$t('system.notice.670989-0')" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
-            <el-table-column :label="$t('system.notice.670989-5')" align="center" prop="noticeType" width="100">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('status')" align="center" prop="status" width="100">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('system.notice.670989-8')" align="center" prop="createBy" width="100" />
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="100">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">{{ $t('edit') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']">{{ $t('del') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改公告对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.notice.670989-0')" prop="noticeTitle">
-                            <el-input v-model="form.noticeTitle" :placeholder="$t('system.notice.670989-1')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.notice.670989-5')" prop="noticeType">
-                            <el-select v-model="form.noticeType" :placeholder="$t('system.notice.670989-6')">
-                                <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('status')">
-                            <el-radio-group v-model="form.status">
-                                <el-radio v-for="dict in dict.type.sys_notice_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item :label="$t('system.notice.670989-7')">
-                            <editor v-model="form.noticeContent" :min-height="192" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+                <el-form-item :label="$t('system.notice.670989-0')" prop="noticeTitle">
+                    <el-input v-model="queryParams.noticeTitle" :placeholder="$t('system.notice.670989-1')" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.notice.670989-2')" prop="createBy">
+                    <el-input v-model="queryParams.createBy" :placeholder="$t('system.notice.670989-3')" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.notice.670989-4')" prop="noticeType">
+                    <el-select v-model="queryParams.noticeType" :placeholder="$t('system.notice.670989-5')" clearable>
+                        <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
-            </div>
-        </el-dialog>
+        </el-card>
+
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:notice:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:notice:edit']">{{ $t('edit') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:notice:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange" header-cell-class-name="table-header" :border="false">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column :label="$t('system.notice.670989-15')" align="center" prop="noticeId" width="100" />
+                <el-table-column :label="$t('system.notice.670989-0')" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
+                <el-table-column :label="$t('system.notice.670989-5')" align="center" prop="noticeType" width="100">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('status')" align="center" prop="status" width="100">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('system.notice.670989-8')" align="center" prop="createBy" width="100" />
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="100">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">{{ $t('edit') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']">{{ $t('del') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+            <!-- 添加或修改公告对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.notice.670989-0')" prop="noticeTitle">
+                                <el-input v-model="form.noticeTitle" :placeholder="$t('system.notice.670989-1')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.notice.670989-5')" prop="noticeType">
+                                <el-select v-model="form.noticeType" :placeholder="$t('system.notice.670989-6')">
+                                    <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('status')">
+                                <el-radio-group v-model="form.status">
+                                    <el-radio v-for="dict in dict.type.sys_notice_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item :label="$t('system.notice.670989-7')">
+                                <editor v-model="form.noticeContent" :min-height="192" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -240,3 +246,103 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/post/index.vue b/vue/src/views/system/post/index.vue
index 2c88b904..74fe3d3a 100644
--- a/vue/src/views/system/post/index.vue
+++ b/vue/src/views/system/post/index.vue
@@ -1,91 +1,99 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item :label="$t('system.post.236590-0')" prop="postCode">
-                <el-input v-model="queryParams.postCode" :placeholder="$t('system.post.236590-1')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.post.236590-2')" prop="postName">
-                <el-input v-model="queryParams.postName" :placeholder="$t('system.post.236590-3')" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.post.236590-4')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('system.post.236590-4')" clearable>
-                    <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:post:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:post:edit']">{{ $t('update') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:post:remove']">{{ $t('del') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:post:export']">{{ $t('export') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column :label="$t('system.post.236590-5')" align="center" prop="postId" />
-            <el-table-column :label="$t('system.post.236590-0')" align="center" prop="postCode" />
-            <el-table-column :label="$t('system.post.236590-2')" align="center" prop="postName" />
-            <el-table-column :label="$t('system.post.236590-6')" align="center" prop="postSort" />
-            <el-table-column :label="$t('system.post.236590-4')" align="center" prop="status">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">{{ $t('del') }}</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改岗位对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-                <el-form-item :label="$t('system.post.236590-2')" prop="postName">
-                    <el-input v-model="form.postName" :placeholder="$t('system.post.236590-3')" />
-                </el-form-item>
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('system.post.236590-0')" prop="postCode">
-                    <el-input v-model="form.postCode" :placeholder="$t('system.post.236590-1')" />
+                    <el-input v-model="queryParams.postCode" :placeholder="$t('system.post.236590-1')" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('system.post.236590-6')" prop="postSort">
-                    <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
+                <el-form-item :label="$t('system.post.236590-2')" prop="postName">
+                    <el-input v-model="queryParams.postName" :placeholder="$t('system.post.236590-3')" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('system.post.236590-4')" prop="status">
-                    <el-radio-group v-model="form.status">
-                        <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                    </el-radio-group>
+                    <el-select v-model="queryParams.status" :placeholder="$t('system.post.236590-4')" clearable>
+                        <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('remark')" prop="remark">
-                    <el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')" />
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+        </el-card>
+
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 15px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:post:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:post:edit']">{{ $t('update') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:post:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['system:post:export']">{{ $t('export') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" header-cell-class-name="table-header" :border="false">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column :label="$t('system.post.236590-5')" align="center" prop="postId" />
+                <el-table-column :label="$t('system.post.236590-0')" align="center" prop="postCode" />
+                <el-table-column :label="$t('system.post.236590-2')" align="center" prop="postName" />
+                <el-table-column :label="$t('system.post.236590-6')" align="center" prop="postSort" />
+                <el-table-column :label="$t('system.post.236590-4')" align="center" prop="status">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">{{ $t('update') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">{{ $t('del') }}</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
             </div>
-        </el-dialog>
+
+            <!-- 添加或修改岗位对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                    <el-form-item :label="$t('system.post.236590-2')" prop="postName">
+                        <el-input v-model="form.postName" :placeholder="$t('system.post.236590-3')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.post.236590-0')" prop="postCode">
+                        <el-input v-model="form.postCode" :placeholder="$t('system.post.236590-1')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.post.236590-6')" prop="postSort">
+                        <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.post.236590-4')" prop="status">
+                        <el-radio-group v-model="form.status">
+                            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item :label="$t('remark')" prop="remark">
+                        <el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')" />
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -242,3 +250,74 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/role/index.vue b/vue/src/views/system/role/index.vue
index 0c2a8ba8..c4ef006d 100644
--- a/vue/src/views/system/role/index.vue
+++ b/vue/src/views/system/role/index.vue
@@ -1,151 +1,158 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-            <el-form-item :label="$t('role.index.094567-0')" prop="roleName">
-                <el-input v-model="queryParams.roleName" :placeholder="$t('role.index.094567-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('role.index.094567-0')" prop="roleKey">
-                <el-input v-model="queryParams.roleKey" :placeholder="$t('role.index.094567-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('role.index.094567-2')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('role.index.094567-2')" clearable style="width: 240px">
-                    <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('creatTime')">
-                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:role:add']">{{ $t('add') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:role:edit']">{{ $t('update') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">{{ $t('del') }}</el-button>
-            </el-col>
-            <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:role:export']">{{ $t('export') }}</el-button>
-            </el-col>
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" align="center" />
-            <el-table-column :label="$t('role.index.094567-5')" prop="roleId" width="120" />
-            <el-table-column :label="$t('role.index.094567-0')" prop="roleName" :show-overflow-tooltip="true" width="150" />
-            <el-table-column :label="$t('role.index.094567-0')" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-            <el-table-column :label="$t('role.index.094567-16')" prop="roleSort" width="100" />
-            <el-table-column :label="$t('role.index.094567-2')" align="center" width="100">
-                <template slot-scope="scope">
-                    <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
-                <!-- v-if="scope.row.roleId !== 1 && scope.row.roleId !== 2 && scope.row.roleId !== 3" -->
-                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
-                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">{{ $t('update') }}</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">{{ $t('del') }}</el-button>
-                    <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-                        <el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('role.index.094567-14') }}</el-button>
-                        <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']">{{ $t('role.index.094567-6') }}</el-dropdown-item>
-                            <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">{{ $t('role.index.094567-7') }}</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改角色配置对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <!-- 搜索栏 -->
+        <el-card shadow="never" class="search-card">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
                 <el-form-item :label="$t('role.index.094567-0')" prop="roleName">
-                    <el-input v-model="form.roleName" :placeholder="$t('role.index.094567-1')" />
+                    <el-input v-model="queryParams.roleName" :placeholder="$t('role.index.094567-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item prop="roleKey">
-                    <span slot="label">
-                        <el-tooltip :content="$t('role.index.094567-14')" placement="top">
-                            <i class="el-icon-question"></i>
-                        </el-tooltip>
-                        {{ $t('role.index.094567-0') }}
-                    </span>
-                    <el-input v-model="form.roleKey" :placeholder="$t('role.index.094567-1')" />
+                <el-form-item :label="$t('role.index.094567-0')" prop="roleKey">
+                    <el-input v-model="queryParams.roleKey" :placeholder="$t('role.index.094567-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('role.index.094567-16')" prop="roleSort">
-                    <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-                </el-form-item>
-                <el-form-item :label="$t('role.index.094567-2')">
-                    <el-radio-group v-model="form.status">
-                        <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="$t('role.index.094567-8')">
-                    <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">{{ $t('role.index.094567-9') }}</el-checkbox>
-                    <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">{{ $t('role.index.094567-10') }}</el-checkbox>
-                    <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">{{ $t('role.index.094567-11') }}</el-checkbox>
-                    <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" :empty-text="$t('loading')" :props="defaultProps"></el-tree>
-                </el-form-item>
-                <el-form-item :label="$t('remark')">
-                    <el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')"></el-input>
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
-            </div>
-        </el-dialog>
-
-        <!-- 分配角色数据权限对话框 -->
-        <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
-            <el-form :model="form" label-width="80px">
-                <el-form-item :label="$t('role.index.094567-0')">
-                    <el-input v-model="form.roleName" :disabled="true" />
-                </el-form-item>
-                <el-form-item :label="$t('role.index.094567-0')">
-                    <el-input v-model="form.roleKey" :disabled="true" />
-                </el-form-item>
-                <el-form-item :label="$t('role.index.094567-12')">
-                    <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-                        <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-form-item :label="$t('role.index.094567-2')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('role.index.094567-2')" clearable style="width: 240px">
+                        <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('role.index.094567-6')" v-show="form.dataScope == 2">
-                    <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">{{ $t('expand') }}/{{ $t('collapse') }}</el-checkbox>
-                    <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">{{ $t('selectAll') }}/{{ $t('deselectAll') }}</el-checkbox>
-                    <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">{{ $t('parentChildLink') }}</el-checkbox>
-                    <el-tree
-                        class="tree-border"
-                        :data="deptOptions"
-                        show-checkbox
-                        default-expand-all
-                        ref="dept"
-                        node-key="id"
-                        :check-strictly="!form.deptCheckStrictly"
-                        :empty-text="$t('loading')"
-                        :props="defaultProps"
-                    ></el-tree>
+                <el-form-item :label="$t('creatTime')">
+                    <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
                 </el-form-item>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitDataScope">{{ $t('confirm') }}</el-button>
-                <el-button @click="cancelDataScope">{{ $t('cancel') }}</el-button>
+        </el-card>
+
+        <!-- 操作按钮和数据表格 -->
+        <el-card shadow="never" class="table-card">
+            <el-row :gutter="10" style="margin-bottom: 20px">
+                <el-col :span="1.5">
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:role:add']">{{ $t('add') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:role:edit']">{{ $t('update') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">{{ $t('del') }}</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                    <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['system:role:export']">{{ $t('export') }}</el-button>
+                </el-col>
+                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+            <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" header-cell-class-name="table-header" :border="false">
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column label="id" prop="roleId" width="120" />
+                <el-table-column :label="$t('role.index.094567-0')" prop="roleName" :show-overflow-tooltip="true" width="150" />
+                <el-table-column :label="$t('role.index.094567-0')" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+                <el-table-column :label="$t('role.index.094567-16')" prop="roleSort" width="100" />
+                <el-table-column :label="$t('role.index.094567-2')" align="center" width="100">
+                    <template slot-scope="scope">
+                        <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('creatTime')" align="center" prop="createTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width">
+                    <!-- v-if="scope.row.roleId !== 1 && scope.row.roleId !== 2 && scope.row.roleId !== 3" -->
+                    <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']">{{ $t('update') }}</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']">{{ $t('del') }}</el-button>
+                        <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+                            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('role.index.094567-11') }}</el-button>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']">{{ $t('role.index.094567-6') }}</el-dropdown-item>
+                                <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">{{ $t('role.index.094567-7') }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination-container">
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
             </div>
-        </el-dialog>
+
+            <!-- 添加或修改角色配置对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                    <el-form-item :label="$t('role.index.094567-0')" prop="roleName">
+                        <el-input v-model="form.roleName" :placeholder="$t('role.index.094567-1')" />
+                    </el-form-item>
+                    <el-form-item prop="roleKey">
+                        <span slot="label">
+                            <el-tooltip :content="$t('role.index.094567-14')" placement="top">
+                                <i class="el-icon-question"></i>
+                            </el-tooltip>
+                            {{ $t('role.index.094567-0') }}
+                        </span>
+                        <el-input v-model="form.roleKey" :placeholder="$t('role.index.094567-1')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('role.index.094567-16')" prop="roleSort">
+                        <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+                    </el-form-item>
+                    <el-form-item :label="$t('role.index.094567-2')">
+                        <el-radio-group v-model="form.status">
+                            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item :label="$t('role.index.094567-8')">
+                        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">{{ $t('role.index.094567-9') }}</el-checkbox>
+                        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">{{ $t('role.index.094567-10') }}</el-checkbox>
+                        <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">{{ $t('role.index.094567-11') }}</el-checkbox>
+                        <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" :empty-text="$t('loading')" :props="defaultProps"></el-tree>
+                    </el-form-item>
+                    <el-form-item :label="$t('remark')">
+                        <el-input v-model="form.remark" type="textarea" :placeholder="$t('plzInput')"></el-input>
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+
+            <!-- 分配角色数据权限对话框 -->
+            <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+                <el-form :model="form" label-width="80px">
+                    <el-form-item :label="$t('role.index.094567-0')">
+                        <el-input v-model="form.roleName" :disabled="true" />
+                    </el-form-item>
+                    <el-form-item :label="$t('role.index.094567-0')">
+                        <el-input v-model="form.roleKey" :disabled="true" />
+                    </el-form-item>
+                    <el-form-item :label="$t('role.index.094567-12')">
+                        <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+                            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('role.index.094567-6')" v-show="form.dataScope == 2">
+                        <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">{{ $t('expand') }}/{{ $t('collapse') }}</el-checkbox>
+                        <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">{{ $t('selectAll') }}/{{ $t('deselectAll') }}</el-checkbox>
+                        <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">{{ $t('parentChildLink') }}</el-checkbox>
+                        <el-tree
+                            class="tree-border"
+                            :data="deptOptions"
+                            show-checkbox
+                            default-expand-all
+                            ref="dept"
+                            node-key="id"
+                            :check-strictly="!form.deptCheckStrictly"
+                            :empty-text="$t('loading')"
+                            :props="defaultProps"
+                        ></el-tree>
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitDataScope">{{ $t('confirm') }}</el-button>
+                    <el-button @click="cancelDataScope">{{ $t('cancel') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -506,3 +513,105 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-button--small {
+    padding: 8px 15px;
+    font-size: 13px;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+</style>
diff --git a/vue/src/views/system/user/index.vue b/vue/src/views/system/user/index.vue
index d6113f66..9d626080 100644
--- a/vue/src/views/system/user/index.vue
+++ b/vue/src/views/system/user/index.vue
@@ -3,106 +3,116 @@
         <el-row :gutter="20">
             <!--部门数据-->
             <el-col :span="4" :xs="24">
-                <div class="head-container">
-                    <el-input v-model="deptName" :placeholder="$t('user.index.098976-0')" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
-                </div>
-                <div class="head-container">
-                    <el-tree
-                        :data="deptOptions"
-                        :props="defaultProps"
-                        :expand-on-click-node="false"
-                        :filter-node-method="filterNode"
-                        ref="tree"
-                        node-key="id"
-                        default-expand-all
-                        highlight-current
-                        @node-click="handleNodeClick"
-                    />
-                </div>
+                <el-card shadow="never" class="dept-card">
+                    <div class="head-container">
+                        <el-input v-model="deptName" :placeholder="$t('user.index.098976-0')" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+                    </div>
+                    <div class="head-container">
+                        <el-tree
+                            :data="deptOptions"
+                            :props="defaultProps"
+                            :expand-on-click-node="false"
+                            :filter-node-method="filterNode"
+                            ref="tree"
+                            node-key="id"
+                            default-expand-all
+                            highlight-current
+                            @node-click="handleNodeClick"
+                        />
+                    </div>
+                </el-card>
             </el-col>
             <!--用户数据-->
             <el-col :span="20" :xs="24">
-                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-                    <el-form-item :label="$t('user.index.098976-1')" prop="userName">
-                        <el-input v-model="queryParams.userName" :placeholder="$t('user.index.098976-2')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-                    </el-form-item>
-                    <el-form-item :label="$t('user.index.098976-3')" prop="phonenumber">
-                        <el-input v-model="queryParams.phonenumber" :placeholder="$t('user.index.098976-4')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-                    </el-form-item>
-                    <el-form-item :label="$t('user.index.098976-5')" prop="status">
-                        <el-select v-model="queryParams.status" :placeholder="$t('user.index.098976-6')" clearable style="width: 240px">
-                            <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('creatTime')">
-                        <el-date-picker
-                            v-model="dateRange"
-                            style="width: 240px"
-                            value-format="yyyy-MM-dd"
-                            type="daterange"
-                            range-separator="-"
-                            :start-placeholder="$t('system.dict.index.880996-3')"
-                            :end-placeholder="$t('system.dict.index.880996-4')"
-                        ></el-date-picker>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
-                    </el-form-item>
-                </el-form>
+                <!-- 搜索栏 -->
+                <el-card shadow="never" class="search-card">
+                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+                        <el-form-item :label="$t('user.index.098976-1')" prop="userName">
+                            <el-input v-model="queryParams.userName" :placeholder="$t('user.index.098976-2')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                        </el-form-item>
+                        <el-form-item :label="$t('user.index.098976-3')" prop="phonenumber">
+                            <el-input v-model="queryParams.phonenumber" :placeholder="$t('user.index.098976-4')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                        </el-form-item>
+                        <el-form-item :label="$t('user.index.098976-5')" prop="status">
+                            <el-select v-model="queryParams.status" :placeholder="$t('user.index.098976-6')" clearable style="width: 240px">
+                                <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item :label="$t('creatTime')">
+                            <el-date-picker
+                                v-model="dateRange"
+                                style="width: 240px"
+                                value-format="yyyy-MM-dd"
+                                type="daterange"
+                                range-separator="-"
+                                :start-placeholder="$t('system.dict.index.880996-3')"
+                                :end-placeholder="$t('system.dict.index.880996-4')"
+                            ></el-date-picker>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-card>
 
-                <el-row :gutter="10" class="mb8">
-                    <el-col :span="1.5">
-                        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">{{ $t('add') }}</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">{{ $t('update') }}</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">{{ $t('del') }}</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">{{ $t('import') }}</el-button>
-                    </el-col>
-                    <el-col :span="1.5">
-                        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">{{ $t('export') }}</el-button>
-                    </el-col>
-                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-                </el-row>
+                <!-- 操作按钮和数据表格 -->
+                <el-card shadow="never" class="table-card">
+                    <el-row :gutter="10" style="margin-bottom: 15px">
+                        <el-col :span="1.5">
+                            <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['system:user:add']">{{ $t('add') }}</el-button>
+                        </el-col>
+                        <el-col :span="1.5">
+                            <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">{{ $t('update') }}</el-button>
+                        </el-col>
+                        <el-col :span="1.5">
+                            <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">{{ $t('del') }}</el-button>
+                        </el-col>
+                        <el-col :span="1.5">
+                            <el-button type="info" plain icon="el-icon-upload2" size="small" @click="handleImport" v-hasPermi="['system:user:import']">{{ $t('import') }}</el-button>
+                        </el-col>
+                        <el-col :span="1.5">
+                            <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['system:user:export']">{{ $t('export') }}</el-button>
+                        </el-col>
+                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+                    </el-row>
 
-                <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-                    <el-table-column type="selection" width="50" align="center" />
-                    <el-table-column :label="$t('user.index.098976-30')" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-                    <el-table-column :label="$t('user.index.098976-1')" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-                    <el-table-column :label="$t('user.index.098976-11')" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-                    <el-table-column :label="$t('user.index.098976-29')" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-                    <el-table-column :label="$t('user.index.098976-13')" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
-                    <el-table-column :label="$t('user.index.098976-5')" align="center" key="status" v-if="columns[5].visible">
-                        <template slot-scope="scope">
-                            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('creatTime')" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-                        <template slot-scope="scope">
-                            <span>{{ parseTime(scope.row.createTime) }}</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('opation')" align="center" width="160" class-name="small-padding fixed-width">
-                        <template slot-scope="scope" v-if="scope.row.userId !== 1">
-                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">{{ $t('update') }}</el-button>
-                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">{{ $t('del') }}</el-button>
-                            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('user.index.098976-14') }}</el-button>
-                                <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">{{ $t('user.index.098976-15') }}</el-dropdown-item>
-                                    <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">{{ $t('user.index.098976-23') }}</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </el-dropdown>
-                        </template>
-                    </el-table-column>
-                </el-table>
+                    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" header-cell-class-name="table-header" :border="false">
+                        <el-table-column type="selection" width="50" align="center" />
+                        <el-table-column :label="$t('user.index.098976-30')" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+                        <el-table-column :label="$t('user.index.098976-1')" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+                        <el-table-column :label="$t('user.index.098976-11')" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+                        <el-table-column :label="$t('user.index.098976-29')" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+                        <el-table-column :label="$t('user.index.098976-13')" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+                        <el-table-column :label="$t('user.index.098976-5')" align="center" key="status" v-if="columns[5].visible">
+                            <template slot-scope="scope">
+                                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('creatTime')" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+                            <template slot-scope="scope">
+                                <span>{{ parseTime(scope.row.createTime) }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('opation')" align="center" width="160" class-name="small-padding fixed-width">
+                            <template slot-scope="scope" v-if="scope.row.userId !== 1">
+                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">{{ $t('update') }}</el-button>
+                                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">{{ $t('del') }}</el-button>
+                                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
+                                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('user.index.098976-14') }}</el-button>
+                                    <el-dropdown-menu slot="dropdown">
+                                        <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">{{ $t('user.index.098976-15') }}</el-dropdown-item>
+                                        <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">{{ $t('user.index.098976-23') }}</el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </el-dropdown>
+                            </template>
+                        </el-table-column>
+                    </el-table>
 
-                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+                    <div class="pagination-container">
+                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+                    </div>
+                </el-card>
             </el-col>
         </el-row>
 
@@ -565,3 +575,118 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+
+.dept-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+    height: 810px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.search-card {
+    margin-bottom: 15px;
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px 18px 0 18px;
+    }
+}
+
+.table-card {
+    border-radius: 8px;
+
+    ::v-deep .el-card__body {
+        padding: 18px;
+    }
+}
+
+.table-header {
+    background-color: #f5f7fa !important;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+
+    .el-table__body tr:hover > td {
+        background-color: #f5f7fa !important;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 0;
+    text-align: right;
+}
+
+::v-deep .el-table {
+    th {
+        background-color: #f5f7fa;
+        color: #606266;
+        font-weight: 600;
+    }
+
+    td {
+        padding: 12px 0;
+    }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+    padding: 20px 0 0 0;
+    text-align: right;
+}
+
+::v-deep .el-button--mini {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select__input {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 4px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+}
+
+::v-deep .el-tree {
+    background-color: transparent;
+}
+</style>
diff --git a/vue/src/views/tool/gen/index.vue b/vue/src/views/tool/gen/index.vue
index c8741780..7f9e346d 100644
--- a/vue/src/views/tool/gen/index.vue
+++ b/vue/src/views/tool/gen/index.vue
@@ -19,31 +19,31 @@
                 ></el-date-picker>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
             </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-download" size="mini" :disabled="multiple" @click="handleGenTable" v-hasPermi="['tool:gen:code']">{{ $t('build.index.2090840-3') }}</el-button>
+                <el-button type="primary" plain icon="el-icon-download" size="small" :disabled="multiple" @click="handleGenTable" v-hasPermi="['tool:gen:code']">{{ $t('build.index.2090840-3') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openCreateTable" v-hasRole="['admin']">{{ $t('add') }}</el-button>
+                <el-button type="primary" plain icon="el-icon-plus" size="small" @click="openCreateTable" v-hasRole="['admin']">{{ $t('add') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload" size="mini" @click="openImportTable" v-hasPermi="['tool:gen:import']">{{ $t('import') }}</el-button>
+                <el-button type="info" plain icon="el-icon-upload" size="small" @click="openImportTable" v-hasPermi="['tool:gen:import']">{{ $t('import') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">{{ $t('update') }}</el-button>
+                <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleEditTable" v-hasPermi="['tool:gen:edit']">{{ $t('update') }}</el-button>
             </el-col>
             <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
+                <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['tool:gen:remove']">{{ $t('del') }}</el-button>
             </el-col>
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
-        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :border="false">
             <el-table-column type="selection" align="center" width="55"></el-table-column>
             <el-table-column :label="$t('system.cache.list.093478-1')" type="index" width="50" align="center">
                 <template slot-scope="scope">
@@ -65,7 +65,9 @@
                 </template>
             </el-table-column>
         </el-table>
+        <div class="pagination-container">
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </div>
         <!-- Preview -->
         <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
             <el-tabs v-model="preview.activeName">
@@ -252,3 +254,43 @@ export default {
     },
 };
 </script>
+
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: 600;
+  text-align: center;
+}
+
+::v-deep .el-table {
+  th {
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    text-align: center;
+  }
+  
+  td {
+    padding: 12px 0;
+  }
+  
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+.pagination-container {
+    line-height: 40px;
+    margin-bottom: 30px;
+    margin-top: 0;
+    padding: 0;
+}
+
+::v-deep .el-pagination {
+  padding: 0;
+  text-align: right;
+}
+</style>