diff --git a/vue/src/views/iot/category/index.vue b/vue/src/views/iot/category/index.vue
index 835bcaf0..0ceb8f63 100644
--- a/vue/src/views/iot/category/index.vue
+++ b/vue/src/views/iot/category/index.vue
@@ -1,21 +1,20 @@
 <template>
-    <div style="padding: 6px">
-        <el-card v-show="showSearch" style="margin-bottom: 5px">
+    <div class="category_wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
             <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-form-item>
-                <el-form-item>
+                <el-form-item style="float: right">
                     <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="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-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:category:add']" style="margin-bottom: 10px">{{ $t('add') }}</el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             <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" />
@@ -324,4 +323,10 @@ export default {
     padding: 0;
     text-align: right;
 }
+
+.category_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
 </style>
diff --git a/vue/src/views/iot/clientDetails/index.vue b/vue/src/views/iot/clientDetails/index.vue
index ec9e9d7a..718839c7 100644
--- a/vue/src/views/iot/clientDetails/index.vue
+++ b/vue/src/views/iot/clientDetails/index.vue
@@ -1,7 +1,7 @@
 <template>
-<div style="padding: 6px">
-    <el-card v-show="showSearch" style="margin-bottom: 6px">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-20px;">
+<div class="clientDetails_wrap">
+    <el-card v-show="showSearch" style="margin-bottom: 10px">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
             <el-form-item :label="$t('speaker.clientDetails.index.893021-0')" prop="clientId">
                 <el-input v-model="queryParams.clientId" :placeholder="$t('speaker.clientDetails.index.893021-1')" clearable size="small" @keyup.enter.native="handleQuery" />
             </el-form-item>
@@ -10,18 +10,17 @@
                     <el-option v-for="dict in dict.type.oauth_platform" :key="dict.value" :label="dict.label" :value="dict.value" />
                 </el-select>
             </el-form-item>
-            <el-form-item>
+            <el-form-item style="float: right">
                 <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="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-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:clientDetails:add']" style="margin-bottom: 10px">{{ $t('add') }}</el-button>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         <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" />
@@ -331,4 +330,10 @@ export default {
   padding: 0;
   text-align: right;
 }
+
+.clientDetails_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
 </style>
diff --git a/vue/src/views/iot/device/index.vue b/vue/src/views/iot/device/index.vue
index 59441978..0039fa47 100644
--- a/vue/src/views/iot/device/index.vue
+++ b/vue/src/views/iot/device/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="padding: 6px">
-        <el-card style="margin-bottom: 6px">
+    <div style="padding: 20px">
+        <el-card style="margin-bottom: 15px">
             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="75px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('device.index.105953-0')" prop="deviceName">
                     <el-input v-model="queryParams.deviceName" :placeholder="$t('device.index.105953-1')" clearable size="small" @keyup.enter.native="handleQuery" style="width: 150px" />
@@ -8,12 +8,12 @@
                 <el-form-item :label="$t('device.index.105953-2')" prop="serialNumber">
                     <el-input v-model="queryParams.serialNumber" :placeholder="$t('device.index.105953-3')" clearable size="small" @keyup.enter.native="handleQuery" style="width: 150px" />
                 </el-form-item>
-                <el-form-item :label="$t('device.index.105953-4')" prop="status">
+                <el-form-item :label="$t('device.index.105953-4')" prop="status" v-if="searchShow">
                     <el-select v-model="queryParams.status" :placeholder="$t('device.index.105953-5')" clearable size="small" style="width: 150px">
                         <el-option v-for="dict in dict.type.iot_device_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('device.index.105953-6')">
+                <el-form-item :label="$t('device.index.105953-6')" v-if="searchShow">
                     <el-select v-model="queryParams.groupId" :placeholder="$t('device.index.105953-7')" clearable size="small" style="width: 150px">
                         <el-option v-for="group in myGroupList" :key="group.groupId" :label="group.groupName" :value="group.groupId" />
                     </el-select>
@@ -21,6 +21,12 @@
                 <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-button type="text" @click="searchChange">
+                        <span style="color: #486ff2; margin-left: 14px">
+                            {{ searchShow ? $t('template.index.891112-113') : $t('template.index.891112-112') }}
+                        </span>
+                        <i style="color: #486ff2; margin-left: 10px" :class="{ 'el-icon-arrow-down': !searchShow, 'el-icon-arrow-up': searchShow }"></i>
+                    </el-button>
                 </el-form-item>
                 <el-form-item style="float: right">
                     <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleEditDevice(0)" v-hasPermi="['iot:device:add']">{{ $t('add') }}</el-button>
@@ -85,9 +91,9 @@
 
                 <el-table-column :label="$t('opation')" align="center" class-name="small-padding fixed-width" width="200">
                     <template slot-scope="scope">
-                        <el-button type="danger" size="small" style="padding: 5px" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:device:remove']">{{ $t('del') }}</el-button>
-                        <el-button type="primary" size="small" style="padding: 5px" icon="el-icon-view" @click="handleEditDevice(scope.row)" v-hasPermi="['iot:device:add']">{{ $t('look') }}</el-button>
-                        <el-button type="primary" size="small" style="padding: 5px" @click="openSummaryDialog(scope.row)" v-if="form.deviceId != 0">{{ $t('device.index.105953-37') }}</el-button>
+                        <el-button type="text" size="small" style="padding: 5px" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:device:remove']">{{ $t('del') }}</el-button>
+                        <el-button type="text" size="small" style="padding: 5px" icon="el-icon-view" @click="handleEditDevice(scope.row)" v-hasPermi="['iot:device:add']">{{ $t('look') }}</el-button>
+                        <el-button type="text" size="small" style="padding: 5px" @click="openSummaryDialog(scope.row)" v-if="form.deviceId != 0">{{ $t('device.index.105953-37') }}</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -96,101 +102,82 @@
             </div>
         </el-card>
 
-        <el-card style="padding-bottom: 100px" v-if="showType == 'card'">
-            <el-row :gutter="30" v-loading="loading">
-                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in deviceList" :key="index" style="margin-bottom: 30px; text-align: center">
-                    <el-card :body-style="{ padding: '20px' }" shadow="always" class="card-item">
-                        <el-row type="flex" :gutter="10" justify="space-between">
-                            <el-col :span="20" style="text-align: left">
-                                <el-link type="" :underline="false" @click="handleEditDevice(item)" style="font-weight: bold; font-size: 16px; line-height: 32px">
-                                    <el-tooltip class="item" effect="dark" :content="$t('device.index.105953-38')" placement="top-start">
-                                        <svg-icon icon-class="share" style="font-size: 20px" v-if="item.isOwner != 1" />
+        <div style="padding-bottom: 100px" v-if="showType == 'card'">
+            <el-row :gutter="20" v-loading="loading">
+                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in deviceList" :key="index" style="margin-bottom: 20px">
+                    <el-card shadow="hover" class="device-card">
+                        <div class="card-header">
+                            <div class="device-name" @click="handleEditDevice(item)">
+                                <span>{{ item.deviceName }}</span>
+                            </div>
+                            <div class="header-status">
+                                <dict-tag :options="dict.type.iot_device_status" :value="item.status" size="mini" />
+                            </div>
+                        </div>
+
+                        <div class="card-time">
+                            {{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
+                        </div>
+
+                        <div class="card-info">
+                            <div class="info-row">
+                                <span class="info-value" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                                    {{ $t('device.device-edit.148398-4') }}：
+                                    <el-tooltip :content="item.productName || '---'" placement="top">
+                                        <span>{{ item.productName || '---' }}</span>
                                     </el-tooltip>
-                                    <svg-icon icon-class="device" v-if="item.isOwner == 1" />
-                                    <span style="margin: 0 5px">{{ item.deviceName }}</span>
-                                    <!-- <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">
-                                <svg-icon icon-class="qrcode" @click="openSummaryDialog(item)" />
-                            </el-col>
-                            <el-col :span="3">
-                                <div style="font-size: 28px; color: #ccc">
+                                </span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-value" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                                    {{ $t('device.device-edit.148398-7') }}：
+                                    <el-tooltip :content="item.serialNumber || '---'" placement="top">
+                                        <span>{{ item.serialNumber || '---' }}</span>
+                                    </el-tooltip>
+                                </span>
+                            </div>
+                            <div class="info-row" v-if="item.transport">
+                                <span class="info-value">{{ $t('product.product-edit.473153-14') }}：{{ item.transport }}</span>
+                            </div>
+
+                            <div class="info-row">
+                                <span class="info-value" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                                    {{ $t('device.index.105953-23') }}：
+                                    <el-tooltip :content="item.protocolCode || '--'" placement="top">
+                                        <span>{{ item.protocolCode || '--' }}</span>
+                                    </el-tooltip>
+                                </span>
+                            </div>
+                        </div>
+
+                        <div class="card-footer">
+                            <div class="footer-left">
+                                <el-tooltip :content="$t('device.device-edit.148398-56')" placement="top">
+                                    <svg-icon icon-class="qrcode" @click="openSummaryDialog(item)" />
+                                </el-tooltip>
+                                <div class="wifi-signal">
                                     <svg-icon v-if="item.status == 3 && item.rssi >= '-55'" icon-class="wifi_4" />
                                     <svg-icon v-else-if="item.status == 3 && item.rssi >= '-70' && item.rssi < '-55'" icon-class="wifi_3" />
                                     <svg-icon v-else-if="item.status == 3 && item.rssi >= '-85' && item.rssi < '-70'" icon-class="wifi_2" />
                                     <svg-icon v-else-if="item.status == 3 && item.rssi >= '-100' && item.rssi < '-85'" icon-class="wifi_1" />
                                     <svg-icon v-else icon-class="wifi_0" />
                                 </div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="10">
-                            <el-col :span="17">
-                                <div style="text-align: left; line-height: 40px; white-space: nowrap">
-                                    <dict-tag :options="dict.type.iot_device_status" :value="item.status" size="small" style="display: inline-block" />
-                                    <span style="display: inline-block; margin: 0 10px">
-                                        <!-- <el-tag type="success" size="small" v-if="item.isShadow == 1">影子</el-tag>
-                    <el-tag type="info" size="small" v-else>影子</el-tag> -->
-                                        <el-tag type="primary" size="small" v-if="item.protocolCode">{{ item.protocolCode }}</el-tag>
-                                    </span>
-                                    <el-tag type="primary" size="small" v-if="item.transport">{{ item.transport }}</el-tag>
-                                    <!-- <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="small" style="white-space: nowrap">
-                                    <el-descriptions-item :label="$t('device.index.105953-20')">
-                                        {{ item.serialNumber }}
-                                    </el-descriptions-item>
-                                    <el-descriptions-item :label="$t('device.index.105953-21')">
-                                        {{ item.productName }}
-                                    </el-descriptions-item>
-                                    <el-descriptions-item :label="$t('device.index.105953-32')">
-                                        {{ parseTime(item.activeTime, '{y}-{m}-{d}') }}
-                                    </el-descriptions-item>
-                                </el-descriptions>
-                            </el-col>
-                            <el-col :span="7">
-                                <div style="margin-top: 10px">
-                                    <el-image
-                                        style="width: 100%; height: 100px; border-radius: 10px"
-                                        lazy
-                                        :preview-src-list="[baseUrl + item.imgUrl]"
-                                        :src="baseUrl + item.imgUrl"
-                                        fit="cover"
-                                        v-if="item.imgUrl != null && item.imgUrl != ''"
-                                    ></el-image>
-                                    <el-image
-                                        style="width: 100%; height: 100px; border-radius: 10px"
-                                        :preview-src-list="[require('@/assets/images/gateway.png')]"
-                                        :src="require('@/assets/images/gateway.png')"
-                                        fit="cover"
-                                        v-else-if="item.deviceType == 2"
-                                    ></el-image>
-                                    <el-image
-                                        style="width: 100%; height: 100px; border-radius: 10px"
-                                        :preview-src-list="[require('@/assets/images/video.png')]"
-                                        :src="require('@/assets/images/video.png')"
-                                        fit="cover"
-                                        v-else-if="item.deviceType == 3"
-                                    ></el-image>
-                                    <el-image
-                                        style="width: 100%; height: 100px; border-radius: 10px"
-                                        :preview-src-list="[require('@/assets/images/product.png')]"
-                                        :src="require('@/assets/images/product.png')"
-                                        fit="cover"
-                                        v-else
-                                    ></el-image>
-                                </div>
-                            </el-col>
-                        </el-row>
-                        <el-button-group style="margin-top: 15px">
-                            <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>
+                            </div>
+                            <div class="footer-actions">
+                                <el-tooltip :content="$t('edit')" placement="top">
+                                    <i class="el-icon-edit-outline" @click="handleEditDevice(item)"></i>
+                                </el-tooltip>
+                                <el-tooltip :content="$t('look')" placement="top">
+                                    <i class="el-icon-view" @click="handleEditDevice(item, 'basic')"></i>
+                                </el-tooltip>
+                                <el-tooltip :content="$t('del')" placement="top">
+                                    <i class="el-icon-delete" @click="handleDelete(item)"></i>
+                                </el-tooltip>
+                                <el-tooltip :content="$t('device.index.105953-40')" placement="top">
+                                    <i class="el-icon-odometer" @click="handleRunDevice(item)"></i>
+                                </el-tooltip>
+                            </div>
+                        </div>
                     </el-card>
                 </el-col>
             </el-row>
@@ -198,7 +185,7 @@
             <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>
+        </div>
         <!-- 二维码 -->
         <el-dialog :visible.sync="openSummary" width="300px" append-to-body>
             <div style="border: 1px solid #ccc; width: 220px; text-align: center; margin: 0 auto; margin-top: -15px">
@@ -239,10 +226,11 @@ export default {
             myGroupList: [],
             // 根路径
             baseUrl: process.env.VUE_APP_BASE_API,
+            searchShow: false,
             // 查询参数
             queryParams: {
                 pageNum: 1,
-                pageSize: 13,
+                pageSize: 12,
                 deviceName: null,
                 productId: null,
                 groupId: null,
@@ -360,6 +348,10 @@ export default {
                 }
             });
         },
+        // 搜索展开隐藏
+        searchChange() {
+            this.searchShow = !this.searchShow;
+        },
         openSummaryDialog(row) {
             let json = {
                 type: 1, // 1=扫码关联设备
@@ -534,6 +526,118 @@ export default {
     }
 }
 
+.device-card {
+    border-radius: 8px;
+    border: 1px solid #e8e8e8;
+    transition: all 0.3s;
+
+    &:hover {
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        border-color: #409eff;
+    }
+
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+
+        .device-name {
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 15px;
+            color: #303133;
+
+            &:hover {
+                color: #409eff;
+            }
+        }
+
+        .header-status {
+            flex-shrink: 0;
+        }
+    }
+
+    .card-time {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 16px;
+    }
+
+    .card-info {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+        margin-bottom: 16px;
+
+        .info-row {
+            display: flex;
+            flex-direction: column;
+
+            .info-label {
+                font-size: 12px;
+                color: #909399;
+                margin-bottom: 4px;
+            }
+
+            .info-value {
+                font-size: 13px;
+                color: #606266;
+            }
+        }
+    }
+
+    .card-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid #f0f0f0;
+        padding-top: 12px;
+
+        .footer-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .wifi-signal {
+                font-size: 18px;
+                color: #909399;
+            }
+
+            .el-icon-qr-code {
+                font-size: 18px;
+                color: #409eff;
+                cursor: pointer;
+
+                &:hover {
+                    color: #66b1ff;
+                }
+            }
+        }
+
+        .footer-actions {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            i {
+                font-size: 18px;
+                color: #606266;
+                cursor: pointer;
+                transition: all 0.3s;
+
+                &:hover {
+                    color: #409eff;
+                }
+
+                &.el-icon-delete:hover {
+                    color: #f56c6c;
+                }
+            }
+        }
+    }
+}
+
 .pagination-container {
     line-height: 40px;
     margin-bottom: 30px;
diff --git a/vue/src/views/iot/group/index.vue b/vue/src/views/iot/group/index.vue
index 7dad0e66..fad29389 100644
--- a/vue/src/views/iot/group/index.vue
+++ b/vue/src/views/iot/group/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="padding: 6px">
-        <el-card v-show="showSearch" style="margin-bottom: 6px">
+    <div class="group_wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
             <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" />
@@ -8,17 +8,16 @@
                 <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-form-item style="float: right">
                     <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-button v-hasPermi="['iot:group:add']" type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" style="margin-bottom: 10px">{{ $t('iot.group.index.637432-5') }}</el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             <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" />
@@ -310,4 +309,10 @@ export default {
     padding: 0;
     text-align: right;
 }
+
+.group_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
 </style>
diff --git a/vue/src/views/iot/log/index.vue b/vue/src/views/iot/log/index.vue
index a92cd9f3..4fd72807 100644
--- a/vue/src/views/iot/log/index.vue
+++ b/vue/src/views/iot/log/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="padding: 6px">
-        <el-card v-show="showSearch" style="margin-bottom: 6px">
+    <div class="log_wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
             <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" />
@@ -33,7 +33,7 @@
                         <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-form-item style="float: right">
                     <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>
@@ -446,4 +446,10 @@ export default {
     padding: 0;
     text-align: right;
 }
+
+.log_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
 </style>
diff --git a/vue/src/views/iot/netty/clients.vue b/vue/src/views/iot/netty/clients.vue
index d164098e..f6a53899 100644
--- a/vue/src/views/iot/netty/clients.vue
+++ b/vue/src/views/iot/netty/clients.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="padding: 6px">
-        <el-card v-show="showSearch" style="margin-bottom: 6px">
+    <div class="clients_wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
             <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('netty.clients.654908-0')" prop="clientId">
                     <el-input v-model="queryParams.clientId" :placeholder="$t('netty.clients.654908-1')" clearable size="small" @keyup.enter.native="handleQuery" />
@@ -8,14 +8,15 @@
                 <el-form-item prop="isClient">
                     <el-checkbox v-model="queryParams.isClient" true-label="1" false-label="0">{{ $t('netty.clients.654908-2') }}</el-checkbox>
                 </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 style="float: right">
+                    <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-card>
 
         <el-card style="padding-bottom: 100px">
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             <el-table v-loading="loading" :data="clientList" :border="false">
                 <el-table-column :label="$t('netty.clients.654908-4')" align="left" header-align="center" prop="clientId">
                     <template slot-scope="scope">
@@ -276,3 +277,11 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.clients_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+</style>
diff --git a/vue/src/views/iot/news/index.vue b/vue/src/views/iot/news/index.vue
index 3efcb9a2..56e7047c 100644
--- a/vue/src/views/iot/news/index.vue
+++ b/vue/src/views/iot/news/index.vue
@@ -1,207 +1,193 @@
 <template>
-    <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="60px" v-if="isAdmin">
-            <el-form-item :label="$t('system.news.893410-0')" prop="title">
-                <el-input v-model="queryParams.title" :placeholder="$t('system.news.893410-1')" clearable size="small"
-                    @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.news.893410-2')" prop="categoryName">
-                <el-input v-model="queryParams.categoryName" :placeholder="$t('system.news.893410-3')" clearable size="small"
-                    @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item :label="$t('system.news.893410-4')" prop="isTop">
-                <el-select v-model="queryParams.isTop" :placeholder="$t('system.news.893410-5')" clearable size="small" style="width:100px;">
-                    <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('system.news.893410-6')" prop="isBanner">
-                <el-select v-model="queryParams.isBanner" :placeholder="$t('system.news.893410-7')" clearable size="small" style="width:100px;">
-                    <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>
+    <div class="news_wrap">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="60px" v-if="isAdmin">
+                <el-form-item :label="$t('system.news.893410-0')" prop="title">
+                    <el-input v-model="queryParams.title" :placeholder="$t('system.news.893410-1')" clearable size="small" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.news.893410-2')" prop="categoryName">
+                    <el-input v-model="queryParams.categoryName" :placeholder="$t('system.news.893410-3')" clearable size="small" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item :label="$t('system.news.893410-8')" prop="status">
+                    <el-select v-model="queryParams.status" :placeholder="$t('system.news.893410-9')" clearable size="small" style="width: 100px">
+                        <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('system.news.893410-4')" prop="isTop" v-if="searchShow">
+                    <el-select v-model="queryParams.isTop" :placeholder="$t('system.news.893410-5')" clearable size="small" style="width: 100px">
+                        <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('system.news.893410-6')" prop="isBanner" v-if="searchShow">
+                    <el-select v-model="queryParams.isBanner" :placeholder="$t('system.news.893410-7')" clearable size="small" style="width: 100px">
+                        <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('system.news.893410-8')" prop="status">
-                <el-select v-model="queryParams.status" :placeholder="$t('system.news.893410-9')" clearable size="small" style="width:100px;">
-                    <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="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="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="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="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="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" 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">
-                    <el-image style="border-radius:5px;height:80px;width:120px;margin-bottom:-5px;" lazy
-                        :preview-src-list="[baseUrl + scope.row.imgUrl]" :src="baseUrl + scope.row.imgUrl"
-                        fit="cover"></el-image>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('system.news.893410-0')" align="center" prop="title" />
-            <el-table-column :label="$t('system.news.893410-2')" align="center" prop="categoryName">
-                <template slot-scope="scope">
-                    <el-tag type="info">{{ scope.row.categoryName }}</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('system.news.893410-11')" align="center" prop="author" width="100" />
-            <el-table-column :label="$t('system.news.893410-4')" align="center" prop="isTop" width="80">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isTop" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('system.news.893410-6')" align="center" prop="isBanner" width="80">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isBanner" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('system.news.893410-8')" align="center" prop="status" width="80">
-                <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('device.index.105953-33')" align="center" prop="createTime" width="120">
-                <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('device.index.105953-34')" align="center" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                    <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="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="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>
-            <el-form ref="form" :model="form" :rules="rules" label-width="60px">
-                <el-row :gutter="20">
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.news.893410-0')" prop="title">
-                            <el-input v-model="form.title" :placeholder="$t('system.news.893410-1')" />
-                        </el-form-item>
-                        <el-form-item :label="$t('system.news.893410-11')" prop="author">
-                            <el-input v-model="form.author" :placeholder="$t('system.news.893410-12')" />
-                        </el-form-item>
-                        <el-form-item :label="$t('system.news.893410-13')" prop="remark">
-                            <el-input v-model="form.remark" type="textarea" :placeholder="$t('iot.group.index.637432-16')" rows="3" />
-                        </el-form-item>
-                        <el-row>
-                            <el-col :span="8">
-                                <el-form-item :label="$t('system.news.893410-4')" prop="isTop">
-                                    <el-switch v-model="form.isTop" active-text="" inactive-text="" :active-value="1"
-                                        :inactive-value="0"></el-switch>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item :label="$t('system.news.893410-6')" prop="isBanner">
-                                    <el-switch v-model="form.isBanner" active-text="" inactive-text="" :active-value="1"
-                                        :inactive-value="0"></el-switch>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item :label="$t('system.news.893410-8')" prop="status">
-                                    <el-switch v-model="form.status" active-text="" inactive-text="" :active-value="1"
-                                        :inactive-value="0"></el-switch>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item :label="$t('system.news.893410-2')" prop="categoryId">
-                            <el-select v-model="form.categoryId" :placeholder="$t('system.news.893410-14')" @change="selectCategory">
-                                <el-option v-for="category in categoryList" :key="category.id" :label="category.name"
-                                    :value="category.id"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('system.news.893410-10')">
-                            <imageUpload ref="image-upload" :value="form.imgUrl" :limit="1" :fileSize="1"
-                                @input="getImagePath($event)"></imageUpload>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item :label="$t('system.news.893410-15')">
-                    <editor v-model="form.content" :min-height="192" />
+                <el-form-item style="float: right">
+                    <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-button type="text" @click="searchChange">
+                        <span style="color: #486ff2; margin-left: 14px">
+                            {{ searchShow ? $t('template.index.891112-113') : $t('template.index.891112-112') }}
+                        </span>
+                        <i style="color: #486ff2; margin-left: 10px" :class="{ 'el-icon-arrow-down': !searchShow, 'el-icon-arrow-up': searchShow }"></i>
+                    </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>
+            <el-row :gutter="10" class="mb8" style="margin-bottom: 10px">
+                <el-col :span="1.5">
+                    <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="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="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="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-dialog :title="form.title" :visible.sync="openDetail" width="800px" append-to-body>
-            <div style="margin-top:-20px;margin-bottom:10px;">
-                <el-tag size="small" effect="dark" type="success">{{ form.categoryName }}</el-tag>
-                <span style="margin-left:20px;">{{ form.createTime }}</span>
+            <el-table v-loading="loading" :data="newsList" :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">
+                        <el-image
+                            style="border-radius: 5px; height: 80px; width: 120px; margin-bottom: -5px"
+                            lazy
+                            :preview-src-list="[baseUrl + scope.row.imgUrl]"
+                            :src="baseUrl + scope.row.imgUrl"
+                            fit="cover"
+                        ></el-image>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('system.news.893410-0')" align="center" prop="title" />
+                <el-table-column :label="$t('system.news.893410-2')" align="center" prop="categoryName">
+                    <template slot-scope="scope">
+                        <el-tag type="info">{{ scope.row.categoryName }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('system.news.893410-11')" align="center" prop="author" width="100" />
+                <el-table-column :label="$t('system.news.893410-4')" align="center" prop="isTop" width="80">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isTop" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('system.news.893410-6')" align="center" prop="isBanner" width="80">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isBanner" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('system.news.893410-8')" align="center" prop="status" width="80">
+                    <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('device.index.105953-33')" align="center" prop="createTime" width="120">
+                    <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('device.index.105953-34')" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                        <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="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="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>
-            <div v-loading="loadingDetail" class="content">
-                <div v-html="form.content"></div>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="closeDetail"> {{ $t('device.device-edit.148398-57') }} </el-button>
-            </div>
-        </el-dialog>
+
+            <!-- 添加或修改新闻资讯对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="60px">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.news.893410-0')" prop="title">
+                                <el-input v-model="form.title" :placeholder="$t('system.news.893410-1')" />
+                            </el-form-item>
+                            <el-form-item :label="$t('system.news.893410-11')" prop="author">
+                                <el-input v-model="form.author" :placeholder="$t('system.news.893410-12')" />
+                            </el-form-item>
+                            <el-form-item :label="$t('system.news.893410-13')" prop="remark">
+                                <el-input v-model="form.remark" type="textarea" :placeholder="$t('iot.group.index.637432-16')" rows="3" />
+                            </el-form-item>
+                            <el-row>
+                                <el-col :span="8">
+                                    <el-form-item :label="$t('system.news.893410-4')" prop="isTop">
+                                        <el-switch v-model="form.isTop" active-text="" inactive-text="" :active-value="1" :inactive-value="0"></el-switch>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="8">
+                                    <el-form-item :label="$t('system.news.893410-6')" prop="isBanner">
+                                        <el-switch v-model="form.isBanner" active-text="" inactive-text="" :active-value="1" :inactive-value="0"></el-switch>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="8">
+                                    <el-form-item :label="$t('system.news.893410-8')" prop="status">
+                                        <el-switch v-model="form.status" active-text="" inactive-text="" :active-value="1" :inactive-value="0"></el-switch>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item :label="$t('system.news.893410-2')" prop="categoryId">
+                                <el-select v-model="form.categoryId" :placeholder="$t('system.news.893410-14')" @change="selectCategory">
+                                    <el-option v-for="category in categoryList" :key="category.id" :label="category.name" :value="category.id"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item :label="$t('system.news.893410-10')">
+                                <imageUpload ref="image-upload" :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)"></imageUpload>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-form-item :label="$t('system.news.893410-15')">
+                        <editor v-model="form.content" :min-height="192" />
+                    </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-dialog :title="form.title" :visible.sync="openDetail" width="800px" append-to-body>
+                <div style="margin-top: -20px; margin-bottom: 10px">
+                    <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">
+                    <div v-html="form.content"></div>
+                </div>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="closeDetail">{{ $t('device.device-edit.148398-57') }}</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
 <script>
-import {
-    listNews,
-    getNews,
-    delNews,
-    addNews,
-    updateNews
-} from "@/api/iot/news";
-import {
-    listShortNewsCategory
-} from '@/api/iot/newsCategory'
-import imageUpload from "../../../components/ImageUpload/index"
+import { listNews, getNews, delNews, addNews, updateNews } from '@/api/iot/news';
+import { listShortNewsCategory } from '@/api/iot/newsCategory';
+import imageUpload from '../../../components/ImageUpload/index';
 
 export default {
-    name: "News",
+    name: 'News',
     dicts: ['iot_yes_no'],
     components: {
-        imageUpload
+        imageUpload,
     },
     data() {
         return {
@@ -226,11 +212,12 @@ export default {
             // 新闻资讯表格数据
             newsList: [],
             // 弹出层标题
-            title: "",
+            title: '',
             // 是否显示弹出层
             open: false,
             // 分类列表
             categoryList: [],
+            searchShow: false,
             // 查询参数
             queryParams: {
                 pageNum: 1,
@@ -246,48 +233,55 @@ export default {
             baseUrl: process.env.VUE_APP_BASE_API,
             // 表单校验
             rules: {
-                title: [{
-                    required: true,
-                    message: this.$t('system.news.893410-16'),
-                    trigger: "blur"
-                }],
-                content: [{
-                    required: true,
-                    message: this.$t('system.news.893410-17'),
-                    trigger: "blur"
-                }],
-                categoryId: [{
-                    required: true,
-                    message: this.$t('system.news.893410-18'),
-                    trigger: "blur"
-                }],
-                author: [{
-                    required: true,
-                    message: this.$t('system.news.893410-19'),
-                    trigger: "blur"
-                }],
-            }
+                title: [
+                    {
+                        required: true,
+                        message: this.$t('system.news.893410-16'),
+                        trigger: 'blur',
+                    },
+                ],
+                content: [
+                    {
+                        required: true,
+                        message: this.$t('system.news.893410-17'),
+                        trigger: 'blur',
+                    },
+                ],
+                categoryId: [
+                    {
+                        required: true,
+                        message: this.$t('system.news.893410-18'),
+                        trigger: 'blur',
+                    },
+                ],
+                author: [
+                    {
+                        required: true,
+                        message: this.$t('system.news.893410-19'),
+                        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
+            if (this.$store.state.user.roles.indexOf('tenant') === -1 && this.$store.state.user.roles.indexOf('general') === -1) {
+                this.isAdmin = true;
                 // 获取分类列表
-                listShortNewsCategory().then(response => {
+                listShortNewsCategory().then((response) => {
                     this.categoryList = response.data;
-                })
+                });
             }
         },
         /** 查询新闻资讯列表 */
         getList() {
             this.loading = true;
-            listNews(this.queryParams).then(response => {
+            listNews(this.queryParams).then((response) => {
                 this.newsList = response.rows;
                 this.total = response.total;
                 this.loading = false;
@@ -297,6 +291,10 @@ export default {
         getImagePath(data) {
             this.form.imgUrl = data;
         },
+        // 搜索展开隐藏
+        searchChange() {
+            this.searchShow = !this.searchShow;
+        },
         // 取消按钮
         cancel() {
             this.open = false;
@@ -308,7 +306,7 @@ export default {
                 newsId: null,
                 title: null,
                 content: this.$t('system.news.893410-20'),
-                imgUrl: "",
+                imgUrl: '',
                 isTop: null,
                 isBanner: null,
                 categoryId: null,
@@ -320,9 +318,9 @@ export default {
                 createTime: null,
                 updateBy: null,
                 updateTime: null,
-                remark: null
+                remark: null,
             };
-            this.resetForm("form");
+            this.resetForm('form');
         },
         /** 搜索按钮操作 */
         handleQuery() {
@@ -331,14 +329,14 @@ export default {
         },
         /** 重置按钮操作 */
         resetQuery() {
-            this.resetForm("queryForm");
+            this.resetForm('queryForm');
             this.handleQuery();
         },
         // 多选框选中数据
         handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.newsId)
-            this.single = selection.length !== 1
-            this.multiple = !selection.length
+            this.ids = selection.map((item) => item.newsId);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
         },
         /** 新增按钮操作 */
         handleAdd() {
@@ -349,8 +347,8 @@ export default {
         /** 修改按钮操作 */
         handleUpdate(row) {
             this.reset();
-            const newsId = row.newsId || this.ids
-            getNews(newsId).then(response => {
+            const newsId = row.newsId || this.ids;
+            getNews(newsId).then((response) => {
                 this.form = response.data;
                 this.open = true;
                 this.title = this.$t('system.news.893410-22');
@@ -359,20 +357,20 @@ export default {
         /** 提交按钮 */
         submitForm() {
             console.log(this.form);
-            if (this.form.imgUrl == null || this.form.imgUrl == "") {
+            if (this.form.imgUrl == null || this.form.imgUrl == '') {
                 this.$modal.msgError(this.$t('system.news.893410-23'));
                 return;
             }
-            this.$refs["form"].validate(valid => {
+            this.$refs['form'].validate((valid) => {
                 if (valid) {
                     if (this.form.newsId != null) {
-                        updateNews(this.form).then(response => {
+                        updateNews(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('iot.group.index.637432-24'));
                             this.open = false;
                             this.getList();
                         });
                     } else {
-                        addNews(this.form).then(response => {
+                        addNews(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('iot.group.index.637432-25'));
                             this.open = false;
                             this.getList();
@@ -384,18 +382,26 @@ export default {
         /** 删除按钮操作 */
         handleDelete(row) {
             const newsIds = row.newsId || this.ids;
-            this.$modal.confirm(this.$t('system.news.893410-24', [newsIds])).then(function () {
-                return delNews(newsIds);
-            }).then(() => {
-                this.getList();
-                this.$modal.msgSuccess(this.$t('iot.group.index.637432-27'));
-            }).catch(() => { });
+            this.$modal
+                .confirm(this.$t('system.news.893410-24', [newsIds]))
+                .then(function () {
+                    return delNews(newsIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(this.$t('iot.group.index.637432-27'));
+                })
+                .catch(() => {});
         },
         /** 导出按钮操作 */
         handleExport() {
-            this.download('iot/news/export', {
-                ...this.queryParams
-            }, `news_${new Date().getTime()}.xlsx`)
+            this.download(
+                'iot/news/export',
+                {
+                    ...this.queryParams,
+                },
+                `news_${new Date().getTime()}.xlsx`
+            );
         },
         /** 选择分类 */
         selectCategory(val) {
@@ -410,7 +416,7 @@ export default {
         openDetailDialog(newsId) {
             this.openDetail = true;
             this.loadingDetail = true;
-            getNews(newsId).then(response => {
+            getNews(newsId).then((response) => {
                 this.form = response.data;
                 this.openDetail = true;
                 this.loadingDetail = false;
@@ -422,42 +428,49 @@ export default {
             this.openDetail = false;
             this.reset();
         },
-    }
+    },
 };
 </script>
 
-<style lang="scss" scoped>.content {
+<style lang="scss" scoped>
+.content {
     line-height: 24px;
     padding: 10px;
     border: 1px solid #eee;
     border-radius: 10px;
-}</style>
-
-</script>
+}
+</style>
 
 <style lang="scss" scoped>
-.table-header {
-  background-color: #f5f7fa !important;
-  color: #606266;
-  font-weight: 600;
-  text-align: center;
+.news_wrap {
+    background-color: #f5f7fa !important;
+    padding: 15px;
+    min-height: 100vh;
+    .search-card {
+        margin-bottom: 10px;
+        padding: 3px 0;
+
+        ::v-deep .el-card__body {
+            padding: 18px 18px 0 18px;
+        }
+    }
 }
 
 ::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;
-  }
+    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 {
@@ -468,7 +481,7 @@ export default {
 }
 
 ::v-deep .el-pagination {
-  padding: 0;
-  text-align: right;
+    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 aebdcfce..65d1b483 100644
--- a/vue/src/views/iot/newsCategory/index.vue
+++ b/vue/src/views/iot/newsCategory/index.vue
@@ -1,98 +1,85 @@
 <template>
-    <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item :label="$t('system.newsCategory.874509-0')" prop="categoryName">
-                <el-input v-model="queryParams.categoryName" :placeholder="$t('system.news.893410-3')" clearable size="small"
-                    @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <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>
-
-        <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: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="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="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="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" 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" />
-            <el-table-column :label="$t('system.newsCategory.874509-2')" align="center" prop="orderNum" />
-            <el-table-column :label="$t('device.index.105953-33')" 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" 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="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="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>
-            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <div class="newsCategory_wrap">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                 <el-form-item :label="$t('system.newsCategory.874509-0')" prop="categoryName">
-                    <el-input v-model="form.categoryName" :placeholder="$t('system.news.893410-3')" />
+                    <el-input v-model="queryParams.categoryName" :placeholder="$t('system.news.893410-3')" clearable size="small" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('system.newsCategory.874509-2')" prop="orderNum">
-                    <el-input-number v-model="form.orderNum" :placeholder="$t('system.newsCategory.874509-3')" type="number" controls-position="right"
-                        style="width: 100%" />
-                </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-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" v-hasPermi="['iot:newsCategory:edit']"
-                    v-show="form.categoryId">{{ $t('iot.group.index.637432-17') }}</el-button>
-                <el-button type="primary" @click="submitForm" v-hasPermi="['iot:newsCategory:add']"
-                    v-show="!form.categoryId">{{ $t('iot.group.index.637432-18') }}</el-button>
-                <el-button @click="cancel">{{ $t('iot.group.index.637432-19') }}</el-button>
+        </el-card>
+
+        <el-card shadow="never">
+            <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: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="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="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="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" :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" />
+                <el-table-column :label="$t('system.newsCategory.874509-2')" align="center" prop="orderNum" />
+                <el-table-column :label="$t('device.index.105953-33')" 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" 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="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="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>
+
+            <!-- 添加或修改新闻分类对话框 -->
+            <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.newsCategory.874509-0')" prop="categoryName">
+                        <el-input v-model="form.categoryName" :placeholder="$t('system.news.893410-3')" />
+                    </el-form-item>
+                    <el-form-item :label="$t('system.newsCategory.874509-2')" prop="orderNum">
+                        <el-input-number v-model="form.orderNum" :placeholder="$t('system.newsCategory.874509-3')" type="number" controls-position="right" style="width: 100%" />
+                    </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" v-hasPermi="['iot:newsCategory:edit']" v-show="form.categoryId">{{ $t('iot.group.index.637432-17') }}</el-button>
+                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:newsCategory:add']" v-show="!form.categoryId">{{ $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 {
-    listNewsCategory,
-    getNewsCategory,
-    delNewsCategory,
-    addNewsCategory,
-    updateNewsCategory
-} from "@/api/iot/newsCategory";
+import { listNewsCategory, getNewsCategory, delNewsCategory, addNewsCategory, updateNewsCategory } from '@/api/iot/newsCategory';
 
 export default {
-    name: "Category",
+    name: 'Category',
     data() {
         return {
             // 遮罩层
@@ -110,7 +97,7 @@ export default {
             // 新闻分类表格数据
             categoryList: [],
             // 弹出层标题
-            title: "",
+            title: '',
             // 是否显示弹出层
             open: false,
             // 查询参数
@@ -123,17 +110,21 @@ export default {
             form: {},
             // 表单校验
             rules: {
-                categoryName: [{
-                    required: true,
-                    message: this.$t('system.newsCategory.874509-4'),
-                    trigger: "blur"
-                }],
-                orderNum: [{
-                    required: true,
-                    message: this.$t('system.newsCategory.874509-5'),
-                    trigger: "blur"
-                }],
-            }
+                categoryName: [
+                    {
+                        required: true,
+                        message: this.$t('system.newsCategory.874509-4'),
+                        trigger: 'blur',
+                    },
+                ],
+                orderNum: [
+                    {
+                        required: true,
+                        message: this.$t('system.newsCategory.874509-5'),
+                        trigger: 'blur',
+                    },
+                ],
+            },
         };
     },
     created() {
@@ -143,7 +134,7 @@ export default {
         /** 查询新闻分类列表 */
         getList() {
             this.loading = true;
-            listNewsCategory(this.queryParams).then(response => {
+            listNewsCategory(this.queryParams).then((response) => {
                 this.categoryList = response.rows;
                 this.total = response.total;
                 this.loading = false;
@@ -165,9 +156,9 @@ export default {
                 createTime: null,
                 updateBy: null,
                 updateTime: null,
-                remark: null
+                remark: null,
             };
-            this.resetForm("form");
+            this.resetForm('form');
         },
         /** 搜索按钮操作 */
         handleQuery() {
@@ -176,14 +167,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() {
@@ -194,8 +185,8 @@ export default {
         /** 修改按钮操作 */
         handleUpdate(row) {
             this.reset();
-            const categoryId = row.categoryId || this.ids
-            getNewsCategory(categoryId).then(response => {
+            const categoryId = row.categoryId || this.ids;
+            getNewsCategory(categoryId).then((response) => {
                 this.form = response.data;
                 this.open = true;
                 this.title = this.$t('system.newsCategory.874509-7');
@@ -203,16 +194,16 @@ export default {
         },
         /** 提交按钮 */
         submitForm() {
-            this.$refs["form"].validate(valid => {
+            this.$refs['form'].validate((valid) => {
                 if (valid) {
                     if (this.form.categoryId != null) {
-                        updateNewsCategory(this.form).then(response => {
+                        updateNewsCategory(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('iot.group.index.637432-24'));
                             this.open = false;
                             this.getList();
                         });
                     } else {
-                        addNewsCategory(this.form).then(response => {
+                        addNewsCategory(this.form).then((response) => {
                             this.$modal.msgSuccess(this.$t('iot.group.index.637432-25'));
                             this.open = false;
                             this.getList();
@@ -224,51 +215,64 @@ export default {
         /** 删除按钮操作 */
         handleDelete(row) {
             const categoryIds = row.categoryId || this.ids;
-            let msg = "";
-            this.$modal.confirm(this.$t('system.newsCategory.874509-8', [categoryIds])).then(function () {
-                return delNewsCategory(categoryIds).then(response => {
-                    msg = response.msg;
-                });
-            }).then(() => {
-                this.getList();
-                this.$modal.msgSuccess(msg);
-            }).catch(() => { });
+            let msg = '';
+            this.$modal
+                .confirm(this.$t('system.newsCategory.874509-8', [categoryIds]))
+                .then(function () {
+                    return delNewsCategory(categoryIds).then((response) => {
+                        msg = response.msg;
+                    });
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess(msg);
+                })
+                .catch(() => {});
         },
         /** 导出按钮操作 */
         handleExport() {
-            this.download('iot/newsCategory/export', {
-                ...this.queryParams
-            }, `category_${new Date().getTime()}.xlsx`)
-        }
-    }
+            this.download(
+                'iot/newsCategory/export',
+                {
+                    ...this.queryParams,
+                },
+                `category_${new Date().getTime()}.xlsx`
+            );
+        },
+    },
 };
 </script>
 
-</script>
-
 <style lang="scss" scoped>
-.table-header {
-  background-color: #f5f7fa !important;
-  color: #606266;
-  font-weight: 600;
-  text-align: center;
+.newsCategory_wrap {
+    background-color: #f5f7fa !important;
+    padding: 15px;
+    min-height: 100vh;
+    .search-card {
+        margin-bottom: 10px;
+        padding: 3px 0;
+
+        ::v-deep .el-card__body {
+            padding: 18px 18px 0 18px;
+        }
+    }
 }
 
 ::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;
-  }
+    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 {
@@ -279,7 +283,7 @@ export default {
 }
 
 ::v-deep .el-pagination {
-  padding: 0;
-  text-align: right;
+    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 3e443e66..82ef2cd0 100644
--- a/vue/src/views/iot/platform/index.vue
+++ b/vue/src/views/iot/platform/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="iot-platform">
-        <el-card v-show="showSearch" class="search-card">
-            <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="85px" class="search-form">
+    <div class="platform_wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
+            <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="85px" style="margin-bottom: -20px">
                 <el-form-item prop="platform">
                     <el-select v-model="queryParams.platform" clearable :placeholder="$t('system.platform.675309-1')">
                         <el-option v-for="dict in dict.type.iot_social_platform" :key="dict.value" :label="dict.label" :value="dict.value" />
@@ -87,9 +87,7 @@
                 </el-table-column>
             </el-table>
 
-            <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>
+            <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="630px" append-to-body>
@@ -380,7 +378,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.iot-platform {
+.platform_wrap {
     padding: 20px;
 
     .search-card {
diff --git a/vue/src/views/iot/scene/script.vue b/vue/src/views/iot/scene/script.vue
index 758dd923..69f7666e 100644
--- a/vue/src/views/iot/scene/script.vue
+++ b/vue/src/views/iot/scene/script.vue
@@ -1,25 +1,24 @@
 <template>
-    <div style="padding: 6px">
-        <el-card v-show="showSearch" style="margin-bottom: 6px">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom: -20px">
+    <div class="script_wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('script.349087-0')" prop="scriptId">
                     <el-input v-model="queryParams.scriptId" :placeholder="$t('script.349087-1')" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 <el-form-item :label="$t('script.349087-2')" prop="scriptName">
                     <el-input v-model="queryParams.scriptName" :placeholder="$t('script.349087-3')" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item>
+                <el-form-item style="float: right">
                     <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-item style="float: right">
-                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:script:add']">{{ $t('add') }}</el-button>
-                </el-form-item>
             </el-form>
         </el-card>
 
         <el-card style="padding-bottom: 100px">
-            <el-table v-loading="loading" :data="scriptList" @selection-change="handleSelectionChange">
+            <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:script:add']" style="margin-bottom: 10px">{{ $t('add') }}</el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            <el-table v-loading="loading" :data="scriptList" @selection-change="handleSelectionChange" :border="false">
                 <el-table-column :label="$t('script.index.470901-0')" align="center" prop="scriptName" />
                 <el-table-column :label="$t('script.index.470901-2')" align="center" prop="productName" />
                 <el-table-column :label="$t('script.349087-0')" align="center" prop="scriptId" width="180" />
@@ -418,3 +417,11 @@ msgContext.setPayload(NewPayload);`,
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.script_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
+</style>
diff --git a/vue/src/views/iot/sip/index.vue b/vue/src/views/iot/sip/index.vue
index 5610a4d9..b6208e90 100644
--- a/vue/src/views/iot/sip/index.vue
+++ b/vue/src/views/iot/sip/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="padding: 6px">
-        <el-card style="margin-bottom: 6px">
+    <div class="sip_wrap">
+        <el-card style="margin-bottom: 10px" v-show="showSearch">
             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="60px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('sip.index.998533-0')" prop="deviceSipId">
                     <el-input v-model="queryParams.deviceSipId" :placeholder="$t('sip.index.998533-1')" clearable size="small" @keyup.enter.native="handleQuery" />
@@ -13,18 +13,21 @@
                         <el-option v-for="dict in dict.type.sip_gen_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item>
+                <el-form-item style="float: right">
                     <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="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-card style="padding-bottom: 100px">
+            <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:video:add']" :disabled="isGeneralUser" style="margin-bottom: 10px">
+                {{ $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']" style="margin-bottom: 10px">
+                {{ $t('del') }}
+            </el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             <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">
@@ -181,6 +184,8 @@ export default {
             form: {},
             // 产品
             productInfo: {},
+            // 显示搜索条件
+            showSearch: true,
             // 城市
             cityOptions: regionData,
             city: '',
@@ -495,4 +500,10 @@ export default {
     padding: 0;
     text-align: right;
 }
+
+.sip_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+}
 </style>
diff --git a/vue/src/views/iot/sip/mediaServer.vue b/vue/src/views/iot/sip/mediaServer.vue
index 6ceaeac7..ae08cd5a 100644
--- a/vue/src/views/iot/sip/mediaServer.vue
+++ b/vue/src/views/iot/sip/mediaServer.vue
@@ -1,188 +1,186 @@
 <template>
-  <div id="mediaServer" style="padding: 6px">
-    <el-card style="margin-bottom: 6px">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="75px" style="margin-bottom: -20px">
-        <el-form-item>
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add"
-            v-hasPermi="['iot:video:add']">{{ $t('sip.mediaServer.998535-0') }}</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="warning" plain icon="el-icon-refresh" size="mini" @click="getServerList">{{ $t('refresh') }}</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <div class="mediaServer_wrap">
+        <el-card style="margin-bottom: 10px">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="75px" style="margin-bottom: -20px">
+                <el-form-item>
+                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="add" v-hasPermi="['iot:video:add']" style="margin-right: 10px">{{ $t('sip.mediaServer.998535-0') }}</el-button>
+                    <el-button type="warning" plain icon="el-icon-refresh" size="small" @click="getServerList">{{ $t('refresh') }}</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
 
-    <el-card style="padding-bottom: 100px" v-loading="loading">
-      <el-row :gutter="30">
-        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in mediaServerList" :key="index"
-          style="margin-bottom: 30px; text-align: center">
-          <el-card shadow="always" class="card-item">
-            <el-row :gutter="10">
-              <el-col :span="15">
-                <el-descriptions :column="1" size="mini" style="white-space: nowrap">
-                  <el-descriptions-item :label="$t('sip.mediaServer.998535-1')">
-                    {{ item.serverId }}
-                  </el-descriptions-item>
-                  <el-descriptions-item :label="$t('sip.mediaServer.998535-2')">
-                    {{ item.ip }}
-                  </el-descriptions-item>
-                  <el-descriptions-item :label="$t('sip.mediaServer.998535-3')">
-                    {{ item.protocol }}
-                  </el-descriptions-item>
-                  <el-descriptions-item :label="$t('sip.mediaServer.998535-4')">
-                    {{ parseTime(item.createTime, '{y}-{m}-{d}') }}
-                  </el-descriptions-item>
-                </el-descriptions>
-              </el-col>
-              <el-col :span="8">
-                <div style="margin-top: 10px">
-                  <el-image :src="require('@/assets/images/zlm-logo.png')" fit="fit"></el-image>
-                </div>
-              </el-col>
-            </el-row>
-            <el-button-group style="margin-top: 10px">
-              <el-button type="danger" size="mini" style="padding: 5px 10px" icon="el-icon-delete"
-                v-hasPermi="['iot:video:remove']" @click="del(item)">{{ $t('del') }}</el-button>
-              <el-button type="primary" size="mini" style="padding: 5px 15px" icon="el-icon-view" @click="view(item)"
-                v-hasPermi="['iot:video:query']">{{ $t('look') }}</el-button>
-              <el-button v-if="!istrue" type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer"
-                @click.native.prevent="edit(item)" v-hasPermi="['iot:video:edit']">{{ $t('edit') }}
-              </el-button>
-              <el-button v-else type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer"
-                :loading="true" disabled>{{ $t('sip.mediaServer.998535-5') }}
-              </el-button>
-            </el-button-group>
-          </el-card>
-        </el-col>
-      </el-row>
-      <el-empty :description="$t('sip.mediaServer.998535-6')" 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="getServerList" />
-    </el-card>
+        <el-row :gutter="30" v-loading="loading">
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in mediaServerList" :key="index" style="margin-bottom: 30px; text-align: center">
+                <el-card shadow="always" class="card-item">
+                    <el-row :gutter="10">
+                        <el-col :span="15">
+                            <el-descriptions :column="1" size="mini" style="white-space: nowrap">
+                                <el-descriptions-item :label="$t('sip.mediaServer.998535-1')">
+                                    {{ item.serverId }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('sip.mediaServer.998535-2')">
+                                    {{ item.ip }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('sip.mediaServer.998535-3')">
+                                    {{ item.protocol }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('sip.mediaServer.998535-4')">
+                                    {{ parseTime(item.createTime, '{y}-{m}-{d}') }}
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-col>
+                        <el-col :span="8">
+                            <div style="margin-top: 10px">
+                                <el-image :src="require('@/assets/images/zlm-logo.png')" fit="fit"></el-image>
+                            </div>
+                        </el-col>
+                    </el-row>
+                    <el-button-group style="margin-top: 10px">
+                        <el-button type="danger" size="mini" style="padding: 5px 10px" icon="el-icon-delete" v-hasPermi="['iot:video:remove']" @click="del(item)">{{ $t('del') }}</el-button>
+                        <el-button type="primary" size="mini" style="padding: 5px 15px" icon="el-icon-view" @click="view(item)" v-hasPermi="['iot:video:query']">{{ $t('look') }}</el-button>
+                        <el-button v-if="!istrue" type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" @click.native.prevent="edit(item)" v-hasPermi="['iot:video:edit']">
+                            {{ $t('edit') }}
+                        </el-button>
+                        <el-button v-else type="success" size="mini" style="padding: 5px 15px" icon="el-icon-odometer" :loading="true" disabled>{{ $t('sip.mediaServer.998535-5') }}</el-button>
+                    </el-button-group>
+                </el-card>
+            </el-col>
+        </el-row>
+        <el-empty :description="$t('sip.mediaServer.998535-6')" 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="getServerList" />
 
-    <mediaServerEdit ref="mediaServerEdit" :edit-flag="editFlag"> </mediaServerEdit>
-  </div>
+        <mediaServerEdit ref="mediaServerEdit" :edit-flag="editFlag"></mediaServerEdit>
+    </div>
 </template>
 
 <script>
 import mediaServerEdit from '@/views/iot/sip/mediaServer-edit.vue';
 import { delmediaServer, listmediaServer } from '@/api/iot/mediaServer';
 export default {
-  name: 'MediaServer',
-  components: {
-    mediaServerEdit,
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      editFlag: false,
-      istrue: false,
-      mediaServerList: [], //设备列表
-      winHeight: window.innerHeight - 200,
-      updateLooper: false,
-      currentPage: 1,
-      count: 15,
-      num: this.getNumberByWidth(),
-      total: 0,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-    };
-  },
-  computed: {},
-  mounted() {
-    this.initData();
-    //this.updateLooper = setInterval(this.initData, 2000);
-  },
-  destroyed() {
-    clearTimeout(this.updateLooper);
-  },
-  methods: {
-    initData: function () {
-      this.getServerList();
+    name: 'MediaServer',
+    components: {
+        mediaServerEdit,
     },
-    pageNumChange: function (val) {
-      this.queryParams.pageNum = val;
-      this.getServerList();
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            editFlag: false,
+            istrue: false,
+            mediaServerList: [], //设备列表
+            winHeight: window.innerHeight - 200,
+            updateLooper: false,
+            currentPage: 1,
+            count: 15,
+            num: this.getNumberByWidth(),
+            total: 0,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+        };
     },
-    pageSizeChange: function (val) {
-      this.queryParams.pageSize = val;
-      this.getServerList();
+    computed: {},
+    mounted() {
+        this.initData();
+        //this.updateLooper = setInterval(this.initData, 2000);
     },
-    getServerList: function () {
-      this.loading = true;
-      listmediaServer(this.queryParams).then((response) => {
-        this.mediaServerList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+    destroyed() {
+        clearTimeout(this.updateLooper);
     },
-    add: function () {
-      this.$refs.mediaServerEdit.openDialog(null, this.initData, this.editFlag);
-      this.editFlag = true;
+    methods: {
+        initData: function () {
+            this.getServerList();
+        },
+        pageNumChange: function (val) {
+            this.queryParams.pageNum = val;
+            this.getServerList();
+        },
+        pageSizeChange: function (val) {
+            this.queryParams.pageSize = val;
+            this.getServerList();
+        },
+        getServerList: function () {
+            this.loading = true;
+            listmediaServer(this.queryParams).then((response) => {
+                this.mediaServerList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        add: function () {
+            this.$refs.mediaServerEdit.openDialog(null, this.initData, this.editFlag);
+            this.editFlag = true;
+        },
+        view: function (row) {
+            this.$refs.mediaServerEdit.openDialog(row, this.initData, this.editFlag);
+            this.editFlag = false;
+        },
+        edit: function (row) {
+            this.$refs.mediaServerEdit.openDialog(row, this.initData, this.editFlag);
+            this.editFlag = true;
+        },
+        delay: function () {
+            let n = 5;
+            // 定义定时器time
+            const time = setInterval(() => {
+                this.istrue = true;
+                n--;
+                // 如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
+                if (n < 0) {
+                    this.istrue = false;
+                    clearInterval(time);
+                }
+            }, 1000);
+        },
+        del: function (row) {
+            const ids = row.id || this.ids;
+            this.$modal
+                .confirm(this.$t('sip.mediaServer.998535-7', [ids]))
+                .then(function () {
+                    delmediaServer(ids);
+                })
+                .then(() => {
+                    this.getServerList();
+                    this.$modal.msgSuccess(this.$t('delSuccess'));
+                })
+                .catch(() => {});
+        },
+        getNumberByWidth() {
+            let candidateNums = [1, 2, 3, 4, 6, 8, 12, 24];
+            let clientWidth = window.innerWidth - 30;
+            let interval = 20;
+            let itemWidth = 360;
+            let num = (clientWidth + interval) / (itemWidth + interval);
+            let result = Math.ceil(24 / num);
+            let resultVal = 24;
+            for (let i = 0; i < candidateNums.length; i++) {
+                let value = candidateNums[i];
+                if (i + 1 >= candidateNums.length) {
+                    return 24;
+                }
+                if (value <= result && candidateNums[i + 1] > result) {
+                    return value;
+                }
+            }
+            return resultVal;
+        },
     },
-    view: function (row) {
-      this.$refs.mediaServerEdit.openDialog(row, this.initData, this.editFlag);
-      this.editFlag = false;
-    },
-    edit: function (row) {
-      this.$refs.mediaServerEdit.openDialog(row, this.initData, this.editFlag);
-      this.editFlag = true;
-    },
-    delay: function () {
-      let n = 5;
-      // 定义定时器time
-      const time = setInterval(() => {
-        this.istrue = true;
-        n--;
-        // 如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
-        if (n < 0) {
-          this.istrue = false;
-          clearInterval(time);
-        }
-      }, 1000);
-    },
-    del: function (row) {
-      const ids = row.id || this.ids;
-      this.$modal
-        .confirm(this.$t('sip.mediaServer.998535-7', [ids]))
-        .then(function () {
-          delmediaServer(ids);
-        })
-        .then(() => {
-          this.getServerList();
-          this.$modal.msgSuccess(this.$t('delSuccess'));
-        })
-        .catch(() => { });
-    },
-    getNumberByWidth() {
-      let candidateNums = [1, 2, 3, 4, 6, 8, 12, 24];
-      let clientWidth = window.innerWidth - 30;
-      let interval = 20;
-      let itemWidth = 360;
-      let num = (clientWidth + interval) / (itemWidth + interval);
-      let result = Math.ceil(24 / num);
-      let resultVal = 24;
-      for (let i = 0; i < candidateNums.length; i++) {
-        let value = candidateNums[i];
-        if (i + 1 >= candidateNums.length) {
-          return 24;
-        }
-        if (value <= result && candidateNums[i + 1] > result) {
-          return value;
-        }
-      }
-      return resultVal;
-    },
-  },
 };
 </script>
 
 <style scoped>
 .card-item {
-  border-radius: 10px;
-  padding: 15px 0px;
+    border-radius: 10px;
+    padding: 15px 0px;
+}
+
+.mediaServer_wrap {
+    padding: 15px;
+    min-height: 100vh;
+    /* background-color: #f5f7fa; */
+}
+::v-deep .pagination-container[data-v-72233bcd] {
+    background: none;
 }
 </style>
diff --git a/vue/src/views/iot/template/index.vue b/vue/src/views/iot/template/index.vue
index 5a30150a..591a48da 100644
--- a/vue/src/views/iot/template/index.vue
+++ b/vue/src/views/iot/template/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="padding: 6px">
-        <el-card v-show="showSearch" style="margin-bottom: 5px">
+    <div class="templete-wrap">
+        <el-card v-show="showSearch" style="margin-bottom: 10px">
             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                 <el-form-item :label="$t('template.index.891112-22')" prop="templateName">
                     <el-input v-model="queryParams.templateName" :placeholder="$t('template.index.891112-1')" clearable size="small" @keyup.enter.native="handleQuery" />
@@ -10,17 +10,16 @@
                         <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>
+                <el-form-item style="float: right">
                     <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="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-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['iot:template:add']" style="margin-bottom: 10px">{{ $t('add') }}</el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             <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" />
@@ -903,11 +902,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.table-header {
-    background-color: #f5f7fa !important;
-    color: #606266;
-    font-weight: 600;
-    text-align: center;
+.templete-wrap {
+    padding: 15px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
 }
 
 ::v-deep .el-table {
diff --git a/vue/src/views/monitor/job/index.vue b/vue/src/views/monitor/job/index.vue
index e13fb9a6..e63c220d 100644
--- a/vue/src/views/monitor/job/index.vue
+++ b/vue/src/views/monitor/job/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="app-container">
+    <div class="job-wrap">
         <!-- 搜索栏 - 上栏 -->
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" 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>
@@ -16,7 +16,7 @@
                         <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-form-item style="float: right">
                     <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>
@@ -446,8 +446,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-    padding: 20px;
+.job-wrap {
+    padding: 15px;
     min-height: 100vh;
     background-color: #f5f7fa;
 }
diff --git a/vue/src/views/monitor/logininfor/index.vue b/vue/src/views/monitor/logininfor/index.vue
index ed05a3e7..bfe9e98b 100644
--- a/vue/src/views/monitor/logininfor/index.vue
+++ b/vue/src/views/monitor/logininfor/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="app-container">
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <div class="logininfor-wrap">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                 <el-form-item :label="$t('monitor.logininfor.670912-0')" prop="ipaddr">
                     <el-input v-model="queryParams.ipaddr" :placeholder="$t('monitor.logininfor.670912-1')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
@@ -13,7 +13,7 @@
                         <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('monitor.logininfor.670912-6')">
+                <el-form-item :label="$t('monitor.logininfor.670912-6')" v-if="searchShow">
                     <el-date-picker
                         v-model="dateRange"
                         style="width: 240px"
@@ -24,12 +24,19 @@
                         :end-placeholder="$t('monitor.logininfor.670912-8')"
                     ></el-date-picker>
                 </el-form-item>
-                <el-form-item>
+                <el-form-item style="float: right">
                     <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-button type="text" @click="searchChange">
+                        <span style="color: #486ff2; margin-left: 14px">
+                            {{ searchShow ? $t('template.index.891112-113') : $t('template.index.891112-112') }}
+                        </span>
+                        <i style="color: #486ff2; margin-left: 10px" :class="{ 'el-icon-arrow-down': !searchShow, 'el-icon-arrow-up': searchShow }"></i>
+                    </el-button>
                 </el-form-item>
             </el-form>
-
+        </el-card>
+        <el-card shadow="never" class="search-card">
             <el-row :gutter="10" class="mb8">
                 <el-col :span="1.5">
                     <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">{{ $t('del') }}</el-button>
@@ -48,16 +55,7 @@
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-            <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 ref="tables" v-loading="loading" :data="list" :border="false" @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']" />
@@ -103,6 +101,7 @@ export default {
             selectName: '',
             // 显示搜索条件
             showSearch: true,
+            searchShow: false,
             // 总条数
             total: 0,
             // 表格数据
@@ -146,6 +145,10 @@ export default {
             this.queryParams.pageNum = 1;
             this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
         },
+        // 搜索展开隐藏
+        searchChange() {
+            this.searchShow = !this.searchShow;
+        },
         /** 多选框选中数据 */
         handleSelectionChange(selection) {
             this.ids = selection.map((item) => item.infoId);
@@ -214,11 +217,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.table-header {
+.logininfor-wrap {
     background-color: #f5f7fa !important;
-    color: #606266;
-    font-weight: 600;
-    text-align: center;
+    padding: 15px;
+    min-height: 100vh;
 }
 
 ::v-deep .el-table {
diff --git a/vue/src/views/monitor/operlog/index.vue b/vue/src/views/monitor/operlog/index.vue
index 54bdf4c1..b046d3d4 100644
--- a/vue/src/views/monitor/operlog/index.vue
+++ b/vue/src/views/monitor/operlog/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="app-container">
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <div class="table-header">
+        <el-card class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                 <el-form-item :label="$t('operlog.874509-10')" prop="operIp">
                     <el-input v-model="queryParams.operIp" :placeholder="$t('operlog.874509-10')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
@@ -11,17 +11,17 @@
                 <el-form-item :label="$t('operlog.874509-2')" prop="operName">
                     <el-input v-model="queryParams.operName" :placeholder="$t('operlog.874509-3')" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                 </el-form-item>
-                <el-form-item :label="$t('system.notice.670989-4')" prop="businessType">
+                <el-form-item :label="$t('system.notice.670989-4')" prop="businessType" v-if="searchShow">
                     <el-select v-model="queryParams.businessType" :placeholder="$t('operlog.874509-4')" clearable style="width: 240px">
                         <el-option v-for="dict in dict.type.sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('status')" prop="status">
+                <el-form-item :label="$t('status')" prop="status" v-if="searchShow">
                     <el-select v-model="queryParams.status" :placeholder="$t('operlog.874509-5')" clearable style="width: 240px">
                         <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                     </el-select>
                 </el-form-item>
-                <el-form-item :label="$t('operlog.874509-6')">
+                <el-form-item :label="$t('operlog.874509-6')" v-if="searchShow">
                     <el-date-picker
                         v-model="dateRange"
                         style="width: 240px"
@@ -33,9 +33,15 @@
                         :default-time="['00:00:00', '23:59:59']"
                     ></el-date-picker>
                 </el-form-item>
-                <el-form-item>
+                <el-form-item style="float: right">
                     <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-button type="text" @click="searchChange">
+                        <span style="color: #486ff2; margin-left: 14px">
+                            {{ searchShow ? $t('template.index.891112-113') : $t('template.index.891112-112') }}
+                        </span>
+                        <i style="color: #486ff2; margin-left: 10px" :class="{ 'el-icon-arrow-down': !searchShow, 'el-icon-arrow-up': searchShow }"></i>
+                    </el-button>
                 </el-form-item>
             </el-form>
         </el-card>
@@ -53,16 +59,7 @@
                 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-            <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 ref="tables" v-loading="loading" :data="list" :border="false" @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" />
@@ -174,6 +171,7 @@ export default {
             defaultSort: { prop: 'operTime', order: 'descending' },
             // 表单参数
             form: {},
+            searchShow: false,
             // 查询参数
             queryParams: {
                 pageNum: 1,
@@ -208,6 +206,10 @@ export default {
             this.queryParams.pageNum = 1;
             this.getList();
         },
+        // 搜索展开隐藏
+        searchChange() {
+            this.searchShow = !this.searchShow;
+        },
         /** 重置按钮操作 */
         resetQuery() {
             this.dateRange = [];
@@ -275,9 +277,7 @@ export default {
 <style lang="scss" scoped>
 .table-header {
     background-color: #f5f7fa !important;
-    color: #606266;
-    font-weight: 600;
-    text-align: center;
+    padding: 15px;
 }
 
 ::v-deep .el-table {
diff --git a/vue/src/views/system/app/lang.vue b/vue/src/views/system/app/lang.vue
index 71eb3b9c..e74b16aa 100644
--- a/vue/src/views/system/app/lang.vue
+++ b/vue/src/views/system/app/lang.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="system-app-lang">
-    <el-card v-show="showSearch" class="search-card">
+    <el-card v-show="showSearch" style="margin-bottom: 10px">
       <el-form
         @submit.native.prevent
         :model="queryParams"
         ref="queryForm"
         :inline="true"
         label-width="46px"
-        class="search-form"
+        style="margin-bottom: -20px"
       >
         <el-form-item prop="langName">
           <el-input
diff --git a/vue/src/views/system/config/index.vue b/vue/src/views/system/config/index.vue
index 19918ddf..3f76f3ab 100644
--- a/vue/src/views/system/config/index.vue
+++ b/vue/src/views/system/config/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="config-wrap">
         <!-- 搜索栏 -->
         <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
@@ -276,8 +276,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-    padding: 20px;
+.config-wrap {
+    padding: 15px;
     min-height: 100vh;
     background-color: #f5f7fa;
 }
diff --git a/vue/src/views/system/dept/index.vue b/vue/src/views/system/dept/index.vue
index 573baaae..9aa0862a 100644
--- a/vue/src/views/system/dept/index.vue
+++ b/vue/src/views/system/dept/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="app-container">
         <!-- 搜索栏 -->
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                 <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>
@@ -11,7 +11,7 @@
                         <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-form-item style="float: right">
                     <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>
@@ -20,7 +20,7 @@
 
         <!-- 操作按钮和数据表格 -->
         <el-card shadow="never" class="table-card">
-            <el-row :gutter="10" style="margin-bottom: 15px">
+            <el-row :gutter="10" style="margin-bottom: 16px">
                 <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>
@@ -301,7 +301,7 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
-    padding: 20px;
+    padding: 15px;
     min-height: 100vh;
     background-color: #f5f7fa;
 }
diff --git a/vue/src/views/system/dict/index.vue b/vue/src/views/system/dict/index.vue
index e50ea016..374f1476 100644
--- a/vue/src/views/system/dict/index.vue
+++ b/vue/src/views/system/dict/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="dict-wrap">
         <!-- 搜索栏 -->
         <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
@@ -276,8 +276,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-    padding: 20px;
+.dict-wrap {
+    padding: 15px;
     min-height: 100vh;
     background-color: #f5f7fa;
 }
diff --git a/vue/src/views/system/menu/index.vue b/vue/src/views/system/menu/index.vue
index 8481e2df..afcfc91b 100644
--- a/vue/src/views/system/menu/index.vue
+++ b/vue/src/views/system/menu/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="app-container">
         <!-- 搜索栏 -->
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                 <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>
@@ -11,7 +11,7 @@
                         <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-form-item style="float: right">
                     <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>
diff --git a/vue/src/views/system/notice/index.vue b/vue/src/views/system/notice/index.vue
index d556baf7..499becdb 100644
--- a/vue/src/views/system/notice/index.vue
+++ b/vue/src/views/system/notice/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="notice-wrap">
         <!-- 搜索栏 -->
         <el-card shadow="never" class="search-card">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
@@ -248,8 +248,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-    padding: 20px;
+.notice-wrap {
+    padding: 15px;
     min-height: 100vh;
     background-color: #f5f7fa;
 }
diff --git a/vue/src/views/system/post/index.vue b/vue/src/views/system/post/index.vue
index 74fe3d3a..3c85b04b 100644
--- a/vue/src/views/system/post/index.vue
+++ b/vue/src/views/system/post/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="app-container">
+    <div class="post-wrap">
         <!-- 搜索栏 -->
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" 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>
@@ -252,8 +252,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-    padding: 20px;
+.post-wrap {
+    padding: 15px;
     min-height: 100vh;
     background-color: #f5f7fa;
 }
diff --git a/vue/src/views/system/role/index.vue b/vue/src/views/system/role/index.vue
index c4ef006d..138e439e 100644
--- a/vue/src/views/system/role/index.vue
+++ b/vue/src/views/system/role/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="app-container">
         <!-- 搜索栏 -->
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                 <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>
@@ -17,7 +17,7 @@
                 <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-form-item style="float: right">
                     <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>
@@ -26,21 +26,11 @@
 
         <!-- 操作按钮和数据表格 -->
         <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-button type="primary" plain icon="el-icon-plus" style="margin-bottom: 20px" size="small" @click="handleAdd" v-hasPermi="['system:role:add']">{{ $t('add') }}</el-button>
+            <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-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">{{ $t('del') }}</el-button>
+            <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['system:role:export']">{{ $t('export') }}</el-button>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 
             <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" />
diff --git a/vue/src/views/tool/gen/index.vue b/vue/src/views/tool/gen/index.vue
index 1043a359..a6710041 100644
--- a/vue/src/views/tool/gen/index.vue
+++ b/vue/src/views/tool/gen/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="app-container">
         <!-- 搜索栏 - 上栏 -->
-        <el-card shadow="never" class="search-card">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-card shadow="never" class="search-card" v-show="showSearch">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                 <el-form-item :label="$t('gen.import.832346-1')" prop="tableName">
                     <el-input v-model="queryParams.tableName" :placeholder="$t('gen.import.832346-2')" clearable @keyup.enter.native="handleQuery" />
                 </el-form-item>
@@ -20,7 +20,7 @@
                         :end-placeholder="$t('system.job.log.085689-6')"
                     ></el-date-picker>
                 </el-form-item>
-                <el-form-item>
+                <el-form-item style="float: right">
                     <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>