diff --git a/src/components/MCarousel/index.vue b/src/components/MCarousel/index.vue
index 0b099387..a1e3a11a 100644
--- a/src/components/MCarousel/index.vue
+++ b/src/components/MCarousel/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="box">
-        <div class="box-item" v-if="pageIndex > 0">
+        <div class="box-btn" v-if="pageIndex > 0">
             <div class="box-item-action" @click="onLeft">
                 <AIcon type="LeftOutlined" />
             </div>
@@ -11,7 +11,7 @@
         <div class="box-item">
             <slot name="add"></slot>
         </div>
-        <div class="box-item" v-if="(pageIndex + 1) * showLength < data.length">
+        <div class="box-btn" v-if="(pageIndex + 1) * showLength < data.length">
             <div class="box-item-action" @click="onRight">
                 <AIcon type="RightOutlined" />
             </div>
@@ -63,10 +63,14 @@ const onLeft = () => {
 .box {
     display: flex;
     align-items: center;
-    margin: 5px;
+    margin: 5px 0;
     .box-item {
-        margin-left: 10px;
+        margin: 0 6px;
+        max-width: 48px;
+    }
 
+    .box-btn {
+        margin-right: 12px;
         .box-item-action {
             width: 12px;
             background-color: #F7F8FA;
diff --git a/src/views/system/NoticeRule/components/Detail/index.vue b/src/views/system/NoticeRule/components/Detail/index.vue
index 330ca4e8..cfce7d5a 100644
--- a/src/views/system/NoticeRule/components/Detail/index.vue
+++ b/src/views/system/NoticeRule/components/Detail/index.vue
@@ -1,25 +1,35 @@
 <template>
-    <j-modal :width="800" visible title="配置详情" @cancel="emit('close')">
-        <j-descriptions bordered :column="2">
-            <j-descriptions-item label="通知方式">{{
-                data.name
-            }}</j-descriptions-item>
-            <j-descriptions-item label="通知配置">{{
-                obj.notifier
-            }}</j-descriptions-item>
-            <j-descriptions-item label="通知模板">{{
-                obj.template
-            }}</j-descriptions-item>
-            <j-descriptions-item label="模版内容">{{ 
-                obj.content 
-            }}</j-descriptions-item>
-            <j-descriptions-item label="模板变量">
-                <div v-for="item in obj.variables" :key="item?.value">{{ item?.name }} - {{ item?.value }}</div>
-            </j-descriptions-item>
-            <j-descriptions-item label="用户权限">{{
-                obj.role
-            }}</j-descriptions-item>
-        </j-descriptions>
+    <j-modal :width="644" visible title="配置详情" @cancel="emit('close')">
+        <div class="detail">
+            <div class="item">
+                <div class="label">通知方式</div>
+                <div class="value">
+                    <j-ellipsis :lineClamp="2">{{ data.name }}</j-ellipsis>
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">通知配置</div>
+                <div class="value">
+                    <j-ellipsis :lineClamp="2">{{ obj.notifier }}</j-ellipsis>
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">通知模板</div>
+                <div class="value"><j-ellipsis :lineClamp="2">{{ obj.template }}</j-ellipsis></div>
+            </div>
+            <div class="item">
+                <div class="label">模版内容</div>
+                <div class="value"><j-ellipsis :lineClamp="2">{{ obj.content }}</j-ellipsis></div>
+            </div>
+            <div class="item">
+                <div class="label">模板变量</div>
+                <div class="value"><j-ellipsis :lineClamp="2">{{ variables }}</j-ellipsis></div>
+            </div>
+            <div class="item">
+                <div class="label">用户权限</div>
+                <div class="value"><j-ellipsis :lineClamp="2">{{ obj.role }}</j-ellipsis></div>
+            </div>
+        </div>
         <template #footer>
             <j-button type="primary" @click="emit('close')">确定</j-button>
         </template>
@@ -43,7 +53,7 @@ const obj = reactive<{
     notifier: string;
     template: string;
     content: string;
-    variables: any[],
+    variables: any[];
     role: string;
 }>({
     notifier: '',
@@ -93,16 +103,55 @@ const handleSearch = async () => {
     if (props.data?.grant?.role?.idList?.length) {
         const resp: any = await getRoleList_api();
         if (resp.status === 200) {
-            obj.role = props.data?.grant?.role?.idList
-                .map((item: string) => {
-                    return (resp?.result || []).find((i: any) => i?.id === item)?.name
-                })
-                ?.join(';') || '未配置权限'
+            obj.role =
+                props.data?.grant?.role?.idList
+                    .map((item: string) => {
+                        return (resp?.result || []).find(
+                            (i: any) => i?.id === item,
+                        )?.name;
+                    })
+                    ?.join(';') || '未配置权限';
         }
     }
 };
 
+const variables = computed(() => {
+    return obj.variables
+        .map((item) => {
+            return `${item?.name} - ${item?.value}`;
+        })
+        .join(';');
+});
+
 onMounted(() => {
     handleSearch();
 });
-</script>
\ No newline at end of file
+</script>
+
+<style lang="less" scoped>
+.detail {
+    border: 1px solid #ebeef3;
+    border-radius: 2px;
+    .item {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 14px 16px;
+        border-bottom: 1px solid #ebeef3;
+        gap: 24px;
+        .label {
+            color: #333333;
+            width: 125px;
+        }
+
+        .value {
+            color: #666666;
+            text-align: right;
+        }
+
+        &:last-child{
+            border: none;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/NoticeRule/components/Item/index.vue b/src/views/system/NoticeRule/components/Item/index.vue
index 1f22cc14..3e6a401e 100644
--- a/src/views/system/NoticeRule/components/Item/index.vue
+++ b/src/views/system/NoticeRule/components/Item/index.vue
@@ -480,10 +480,11 @@ const onSave = (_data: any) => {
         .box-item-add {
             cursor: pointer;
             background-color: #f8f9fc;
-            width: 54px;
+            // width: 54px;
             height: 54px;
             display: flex;
             align-items: center;
+            margin-left: 12px;
         }
 
         &.disabled {
diff --git a/src/views/system/NoticeRule/components/Save/components/NotifyConfig.vue b/src/views/system/NoticeRule/components/Save/components/NotifyConfig.vue
index 2b1ef840..eb1c7e3e 100644
--- a/src/views/system/NoticeRule/components/Save/components/NotifyConfig.vue
+++ b/src/views/system/NoticeRule/components/Save/components/NotifyConfig.vue
@@ -1,16 +1,13 @@
 <template>
-    <pro-search
-        :columns="columns"
-        type="simple"
-        target="action-notice-config"
-        @search="handleSearch"
-        class="action-search"
-    />
     <div class="header">
-        <div class="alert">
-            <AIcon type="InfoCircleOutlined" />
-            钉钉群机器人类型的配置在当前页面将被过滤
-        </div>
+        <pro-search
+            :columns="columns"
+            type="simple"
+            target="action-notice-config"
+            @search="handleSearch"
+            class="action-search"
+            style="padding-bottom: 0"
+        />
         <PermissionButton
             @click="onAdd"
             type="primary"
@@ -19,6 +16,10 @@
             新增
         </PermissionButton>
     </div>
+    <div class="alert">
+        <AIcon type="InfoCircleOutlined" />
+        钉钉群机器人类型的配置在当前页面将被过滤
+    </div>
     <div style="height: 400px; overflow-y: auto">
         <JProTable
             :columns="columns"
@@ -30,7 +31,7 @@
             ref="tableRef"
             :alertRender="false"
             :params="params"
-            :gridColumn="2"
+            :gridColumn="3"
             :rowSelection="{
                 selectedRowKeys: _selectedRowKeys,
                 onChange: onSelectChange,
@@ -189,12 +190,16 @@ const handleClick = (dt: any) => {
 };
 
 const onAdd = () => {
-    const tab: any = window.open(`${origin}/#/iot/notice/Config/detail/:id?notifyType=${noticeType.get(props.notifyType)}`);
+    const tab: any = window.open(
+        `${origin}/#/iot/notice/Config/detail/:id?notifyType=${noticeType.get(
+            props.notifyType,
+        )}`,
+    );
     tab.onTabSaveSuccess = (value: any) => {
         _selectedRowKeys.value = [value.id];
         emit('update:value', value.id);
         emit('change', { provider: value?.provider, value: value.id });
-        tableRef.value?.reload()
+        tableRef.value?.reload();
     };
 };
 
@@ -214,11 +219,7 @@ watch(
 );
 </script>
 
-<style lang="less">
-.action-search {
-    padding: 0;
-}
-
+<style lang="less" scoped>
 .notify-logo {
     width: 88px;
     height: 88px;
diff --git a/src/views/system/NoticeRule/components/Save/components/NotifyTemplate.vue b/src/views/system/NoticeRule/components/Save/components/NotifyTemplate.vue
index 1f2439b9..b4baf348 100644
--- a/src/views/system/NoticeRule/components/Save/components/NotifyTemplate.vue
+++ b/src/views/system/NoticeRule/components/Save/components/NotifyTemplate.vue
@@ -1,16 +1,12 @@
 <template>
-    <pro-search
-        :columns="columns"
-        type="simple"
-        target="action-notice-template"
-        @search="handleSearch"
-        class="action-search"
-    />
     <div class="header">
-        <div class="alert">
-            <AIcon type="InfoCircleOutlined" />
-            已规定固定收信人的模板在当前页面将被过滤
-        </div>
+        <pro-search
+            :columns="columns"
+            type="simple"
+            target="action-notice-template"
+            @search="handleSearch"
+            style="padding-bottom: 0"
+        />
         <PermissionButton
             @click="onAdd"
             type="primary"
@@ -19,6 +15,10 @@
             新增
         </PermissionButton>
     </div>
+    <div class="alert">
+        <AIcon type="InfoCircleOutlined" />
+        已规定固定收信人的模板在当前页面将被过滤
+    </div>
     <div style="height: 400px; overflow-y: auto">
         <JProTable
             :columns="columns"
@@ -30,7 +30,7 @@
             ref="tableRef"
             :alertRender="false"
             :params="params"
-            :gridColumn="2"
+            :gridColumn="3"
             :noPagination="true"
             :rowSelection="{
                 selectedRowKeys: _selectedRowKeys,
@@ -201,13 +201,17 @@ const handleData = async (e: any) => {
 };
 
 const onAdd = () => {
-    const tab: any = window.open(`${origin}/#/iot/notice/Template/detail/:id?notifyType=${noticeType.get(props.notifyType)}&notifierId=${props.notifierId}`);
+    const tab: any = window.open(
+        `${origin}/#/iot/notice/Template/detail/:id?notifyType=${noticeType.get(
+            props.notifyType,
+        )}&notifierId=${props.notifierId}`,
+    );
     tab.onTabSaveSuccess = (value: any) => {
         _selectedRowKeys.value = [value.id];
         emit('update:value', value.id);
         emit('change', { templateName: value?.name, value: value?.id });
         emit('update:detail', value);
-        tableRef.value?.reload()
+        tableRef.value?.reload();
     };
 };
 
diff --git a/src/views/system/NoticeRule/components/Save/components/NotifyWay.vue b/src/views/system/NoticeRule/components/Save/components/NotifyWay.vue
index 00c557ad..cdcf1f40 100644
--- a/src/views/system/NoticeRule/components/Save/components/NotifyWay.vue
+++ b/src/views/system/NoticeRule/components/Save/components/NotifyWay.vue
@@ -107,13 +107,12 @@ onMounted(() => {
       justify-content: center;
     }
 
-    &:hover {
-      background-color: #F2F4F7;
-    }
+    // &:hover {
+    //   background-color: #F2F4F7;
+    // }
 
     &.active {
-      background-color: #F2F4F7;
-      border: 1px solid #ADB8C7;
+      border: 1px solid #2F54EB;
     }
   }
 }
diff --git a/src/views/system/NoticeRule/components/Save/components/VariableDefinitions.vue b/src/views/system/NoticeRule/components/Save/components/VariableDefinitions.vue
index 83850b59..fa5e0a21 100644
--- a/src/views/system/NoticeRule/components/Save/components/VariableDefinitions.vue
+++ b/src/views/system/NoticeRule/components/Save/components/VariableDefinitions.vue
@@ -1,45 +1,48 @@
 <template>
-    <j-form
-        v-if="variableDefinitions.length"
-        :layout="'vertical'"
-        ref="formRef"
-        :model="modelRef"
-    >
-        <j-form-item
-            :name="`${item?.id}`"
-            :label="item?.name"
-            v-for="item in variableDefinitions"
-            :key="item.id"
-            :rules="[
-                {
-                    required: getType(item) !== 'file' ? true : false,
-                    validator: (_rule, value) => checkValue(_rule, value, item),
-                    trigger: ['change'],
-                },
-            ]"
+    <div style="padding: 50px 200px">
+        <j-form
+            v-if="variableDefinitions.length"
+            :layout="'vertical'"
+            ref="formRef"
+            :model="modelRef"
         >
-            <Tag
-                :notify="notify"
-                v-if="getType(item) === 'tag'"
-                v-model:value="modelRef[item.id]"
-            />
-            <InputFile
-                v-else-if="getType(item) === 'file'"
-                v-model:value="modelRef[item.id]"
-            />
-            <j-input
-                v-else-if="getType(item) === 'link'"
-                v-model:value="modelRef[item.id]"
-            />
-            <BuildIn
-                v-else
-                :item="item"
-                :providerId="props.notify?.providerId"
-                v-model:value="modelRef[item.id]"
-            />
-        </j-form-item>
-    </j-form>
-    <j-empty v-else style="margin: 20px 0" description="当前模版暂无变量" />
+            <j-form-item
+                :name="`${item?.id}`"
+                :label="item?.name"
+                v-for="item in variableDefinitions"
+                :key="item.id"
+                :rules="[
+                    {
+                        required: getType(item) !== 'file' ? true : false,
+                        validator: (_rule, value) =>
+                            checkValue(_rule, value, item),
+                        trigger: ['change'],
+                    },
+                ]"
+            >
+                <Tag
+                    :notify="notify"
+                    v-if="getType(item) === 'tag'"
+                    v-model:value="modelRef[item.id]"
+                />
+                <InputFile
+                    v-else-if="getType(item) === 'file'"
+                    v-model:value="modelRef[item.id]"
+                />
+                <j-input
+                    v-else-if="getType(item) === 'link'"
+                    v-model:value="modelRef[item.id]"
+                />
+                <BuildIn
+                    v-else
+                    :item="item"
+                    :providerId="props.notify?.providerId"
+                    v-model:value="modelRef[item.id]"
+                />
+            </j-form-item>
+        </j-form>
+        <j-empty v-else style="margin: 20px 0" description="当前模版暂无变量" />
+    </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/system/NoticeRule/components/Save/index.vue b/src/views/system/NoticeRule/components/Save/index.vue
index 14e57348..7113a121 100644
--- a/src/views/system/NoticeRule/components/Save/index.vue
+++ b/src/views/system/NoticeRule/components/Save/index.vue
@@ -262,7 +262,7 @@ const onWayChange = (obj: any) => {
         formModel.channelConfiguration.variables = {};
     }
     formModel.channelProvider = obj?.value;
-    formModel.name = obj?.label;
+    // formModel.name = obj?.label;
 };
 
 const onConfigChange = (obj: any) => {
diff --git a/src/views/system/NoticeRule/index.vue b/src/views/system/NoticeRule/index.vue
index af5f2e0e..1b50e52b 100644
--- a/src/views/system/NoticeRule/index.vue
+++ b/src/views/system/NoticeRule/index.vue
@@ -153,7 +153,7 @@ onMounted(() => {
     margin-bottom: 10px;
     color: rgba(0, 0, 0, 0.55);
     line-height: 40px;
-    background-color: #f6f6f6;
+    // background-color: #f6f6f6;
 }
 .custom {
     background: #F7F8FA;
diff --git a/yarn.lock b/yarn.lock
index 3d9c4ea5..8de0de9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3823,28 +3823,15 @@ jetlinks-store@^0.0.3:
   resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
   integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==
 
-jetlinks-ui-components@^1.0.23:
-  version "1.0.23"
-  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.23.tgz#6bef8fe635867a226afbfee3af6e870e46b0bf54"
-  integrity sha512-TtJJgtvW2aRvfD1BMTOulefPq3BUyfE02UARRF/XMo9GaPzPq7eqDonH4yrvadEd71cMPj2CYvt/A6FdWJu9yA==
-  dependencies:
-    "@vueuse/core" "^9.12.0"
-    "@vueuse/router" "^9.13.0"
-    ant-design-vue "^3.2.15"
-    colorpicker-v3 "^2.10.2"
-    lodash-es "^4.17.21"
-    monaco-editor "^0.35.0"
-
 jetlinks-ui-components@^1.0.24:
   version "1.0.24"
-  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#5c66d4533b3da4dcad0615ce3f186817a2d63450"
-  integrity sha512-QgdfZwGc1yCR01ujxMf6CIATZitGD+CoVupxN2TrVh+sGLO1tOpQuAYjJnSWwmMAFPPGTE5ChZcOqsBE2g64+w==
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#003c3763daad1722543e6a8c8df0fc620a8122d1"
+  integrity sha512-GmtuxQKg6+6V/B/AmKhuDNfUhfdBMvoOg5Nm/q9XSYsMYpODzn+noqqYrNV0QLWFCGNccM2k1fojaAkirRT2yw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"
     ant-design-vue "^3.2.15"
     colorpicker-v3 "^2.10.2"
-    jetlinks-ui-components "^1.0.23"
     lodash-es "^4.17.21"
     monaco-editor "^0.35.0"
     sortablejs "^1.15.0"