fix: 修改订阅通知样式

src/components/MCarousel/index.vue

@@ -8,9 +8,6 @@
         <div class="box-item" v-for="item in getData" :key="item.id">
             <slot name="card" v-bind="item"></slot>
         </div>
-        <div class="box-item">
-            <slot name="add"></slot>
-        </div>
         <div class="box-btn" v-if="(pageIndex + 1) * showLength < data.length">
             <div class="box-item-action" @click="onRight">
                 <AIcon type="RightOutlined" />
@@ -63,14 +60,13 @@ const onLeft = () => {
 .box {
     display: flex;
     align-items: center;
-    margin: 5px 0;
+    margin: 8px 0;
     .box-item {
-        margin: 0 6px;
+        margin: 0 12px;
-        max-width: 48px;
+        max-width: 60px;
     }
 
     .box-btn {
-        margin-right: 12px;
         .box-item-action {
             width: 12px;
             background-color: #F7F8FA;
@@ -79,6 +75,7 @@ const onLeft = () => {
             font-size: 12px;
             color: #666666;
             cursor: pointer;
+
             &:hover {
                 background-color: #EFF2FE;
                 color: @primary-color;

src/views/account/Center/components/Subscribe/components/Item.vue

@@ -147,15 +147,19 @@ const onSave = (dt: any) => {
 
 <style lang="less" scoped>
 .child-item {
-    padding: 5px 20px 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0px 1px 0px 0px #e2e2e2;
+    height: 68px;
+    background: linear-gradient(270deg, #ffffff 0%, #f1f6ff 99%);
+    border-radius: 4px;
+    border: 1px solid #ebeef3;
+    margin-bottom: 10px;
 
     .child-item-left {
         display: flex;
         align-items: center;
+        margin-left: 24px;
 
         div {
             display: flex;
@@ -172,6 +176,7 @@ const onSave = (dt: any) => {
 
     .child-item-right {
         display: flex;
+        margin-right: 16px;
     }
 }
 </style>

src/views/account/Center/components/Subscribe/index.vue

@@ -21,10 +21,9 @@
                         <j-collapse-panel
                             v-for="item in dataSource"
                             :key="item.provider"
-                            class="custom"
                             :header="item.name"
                         >
-                            <div class="child">
+                            <div>
                                 <template
                                     v-for="child in item.children"
                                     :key="child.id"
@@ -110,26 +109,32 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .alert {
-    height: 40px;
     padding-left: 10px;
-    margin-bottom: 10px;
     color: #999999;
-    line-height: 40px;
+    margin-bottom: 16px;
-}
-.custom {
-    background: #F7F8FA;
-    border: 0;
-    overflow: hidden;
-    color: #333333;
-}
-.child {
-    background-color: white;
-    padding-bottom: 24px;
 }
 
 .content-collapse {
-    :deep(.ant-collapse-content > .ant-collapse-content-box) {
+    :deep(.ant-collapse) {
+        border-color: #EBEEF3;
+        background-color: #fff;
+
+        .ant-collapse-item {
+            border: 1px solid #EBEEF3;
+            margin-bottom: 24px;
+        }
+
+        .ant-collapse-header {
+            background-color: #F7F8FA;
+            height: 42px;
+        }
+        .ant-collapse-content {
+            padding: 17px 21px 7px 21px;
+        }
+
+        .ant-collapse-content-box {
             padding: 0;
         }
+    }
 }
 </style>

src/views/system/NoticeRule/components/Item/index.vue

@@ -1,6 +1,6 @@
 <template>
     <j-spin :spinning="spinning">
-        <div class="child-item" :class="{ border: !isLast }">
+        <div class="child-item">
             <div class="child-item-left">
                 <div style="color: #333333">
                     {{ data?.name }}
@@ -14,7 +14,10 @@
                         />
                     </j-tooltip>
                 </div>
-                <div class="child-item-left-auth" :class="{ disabled: !checked }">
+                <div
+                    class="child-item-left-auth"
+                    :class="{ disabled: !checked }"
+                >
                     <j-tooltip>
                         <template #title>
                             <span v-if="!update">暂无权限，请联系管理员</span>
@@ -27,9 +30,17 @@
                             type="text"
                             @click="onAuth"
                         >
-                            <span v-if="!auth.length" class="child-item-left-auth-lock" ><AIcon type="LockFilled" /></span>
+                            <span
-                            <span v-else class="child-item-left-auth-key"><AIcon type="KeyOutlined" /></span>
+                                v-if="!auth.length"
-                            <span class="child-item-left-auth-text">权限控制</span>
+                                class="child-item-left-auth-lock"
+                                ><AIcon type="LockFilled"
+                            /></span>
+                            <span v-else class="child-item-left-auth-key"
+                                ><AIcon type="KeyOutlined"
+                            /></span>
+                            <span class="child-item-left-auth-text"
+                                >权限控制</span
+                            >
                         </j-button>
                     </j-tooltip>
                 </div>
@@ -99,26 +110,16 @@
                     </template>
                 </MCarousel>
 
-                <div class="box-item-add">
+                <j-tooltip :title="!add ? '暂无权限，请联系管理员' : ''">
-                    <div class="box-item-img">
-                        <j-tooltip
-                            :title="!add ? '暂无权限，请联系管理员' : ''"
-                        >
                     <j-button
+                        class="box-item-add"
                         :disabled="!add"
-                                type="text"
                         @click="onAdd"
                     >
-                                <AIcon
+                        <AIcon type="PlusOutlined" />
-                                    style="font-size: 20px"
-                                    type="PlusOutlined"
-                                />
                     </j-button>
                 </j-tooltip>
             </div>
-                    <div class="box-item-text"></div>
-                </div>
-            </div>
         </div>
     </j-spin>
     <Save
@@ -304,12 +305,15 @@ const onAction = (e: boolean) => {
                             role: {
                                 idList: [],
                             },
-                            permissions: props.provider === 'alarm' ? [
+                            permissions:
+                                props.provider === 'alarm'
+                                    ? [
                                           {
                                               id: 'alarm-config',
                                               actions: ['query'],
                                           },
-                            ] : [],
+                                      ]
+                                    : [],
                         },
                     },
                 ],
@@ -406,15 +410,19 @@ const onSave = (_data: any) => {
 
 <style lang="less" scoped>
 .child-item {
-    padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    height: 68px;
+    background: linear-gradient(270deg, #ffffff 0%, #f1f6ff 99%);
+    border-radius: 4px;
+    border: 1px solid #ebeef3;
+    margin-bottom: 10px;
 
     .child-item-left {
         display: flex;
         align-items: center;
-        height: 80px;
+        margin-left: 24px;
 
         div {
             display: flex;
@@ -435,19 +443,20 @@ const onSave = (_data: any) => {
                 color: #666666;
             }
             .child-item-left-auth-key {
-                color: #00C800;
+                color: #00c800;
                 font-size: 18px;
                 margin-right: 10px;
             }
 
-            .child-item-left-auth-lock{
+            .child-item-left-auth-lock {
                 color: @primary-color;
                 font-size: 18px;
                 margin-right: 10px;
             }
 
             &.disabled {
-                .child-item-left-auth-key, .child-item-left-auth-lock {
+                .child-item-left-auth-key,
+                .child-item-left-auth-lock {
                     color: #666666 !important;
                 }
             }
@@ -460,19 +469,14 @@ const onSave = (_data: any) => {
 
         .box-item {
             cursor: pointer;
-            width: 48px;
+            width: 100%;
-            margin: 0 2px;
             display: flex;
             justify-content: space-between;
             flex-direction: column;
             align-items: center;
             .box-item-img {
-                background-color: #fff;
                 width: 32px;
                 height: 32px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
             }
 
             .box-item-text {
@@ -485,21 +489,27 @@ const onSave = (_data: any) => {
 
         .box-item-add {
             cursor: pointer;
-            background-color: #f8f9fc;
+            background-color: #F7F8FA;
-            // width: 54px;
+            width: 54px;
             height: 54px;
             display: flex;
             align-items: center;
-            margin-left: 12px;
+            justify-content: center;
+            color: #666666;
+            border: none;
+            padding: 0;
+            border-radius: 0;
+            margin: 0 16px;
+
+            &:hover {
+                background-color: #eff2fe;
+                color: #2f54eb;
+            }
         }
 
         &.disabled {
             filter: grayscale(100%);
         }
     }
-
-    &.border {
-        box-shadow: 0px 1px 0px 0px #e2e2e2;
-    }
 }
 </style>

src/views/system/NoticeRule/index.vue

@@ -2,7 +2,7 @@
     <page-container>
         <FullPage>
             <div class="content">
-                <div>
+                <div style="margin-bottom: 15px;">
                     <div class="alert">
                         <AIcon type="InfoCircleOutlined" />
                         启用通知类型后，你可以为每种通知类型配置不同的通知方式、通知模板、接收人。
@@ -10,7 +10,7 @@
                 </div>
                 <div class="content-collapse">
                     <j-collapse :bordered="false" v-model:activeKey="activeKey" expand-icon-position="right">
-                        <!-- <template #expandIcon="{ isActive }">
+                        <template #expandIcon="{ isActive }">
                             <AIcon
                                 type="CaretRightOutlined"
                                 :style="{
@@ -19,11 +19,10 @@
                                     }deg)`,
                                 }"
                             />
-                        </template> -->
+                        </template>
                         <j-collapse-panel
                             v-for="item in dataSource"
                             :key="item.provider"
-                            class="custom"
                         >
                             <template #header>
                                 <div>
@@ -31,7 +30,7 @@
                                     <span style="margin-left: 10px;" class="alert" v-if="item.provider === 'alarm'">注意：接收人需要有告警配置页面查询权限，才能收到告警类通知</span>
                                 </div>
                             </template>
-                            <div class="child">
+                            <div>
                                 <template
                                     v-for="(child, index) in item.children"
                                     :key="child.provider"
@@ -142,7 +141,6 @@ onMounted(() => {
     padding: 24px;
     display: flex;
     flex-direction: column;
-    // height: 100%;
     box-sizing: border-box;
     justify-content: space-between;
 
@@ -153,27 +151,31 @@ onMounted(() => {
     }
 }
 .alert {
-    height: 40px;
     padding-left: 10px;
-    margin-bottom: 10px;
     color: rgba(0, 0, 0, 0.55);
-    line-height: 40px;
-    // background-color: #f6f6f6;
-}
-.custom {
-    background: #F7F8FA;
-    border: 0;
-    overflow: hidden;
-    color: #333333;
-}
-.child {
-    background-color: white;
-    padding-bottom: 24px;
 }
 
 .content-collapse {
-    :deep(.ant-collapse-content > .ant-collapse-content-box) {
+    :deep(.ant-collapse) {
+        border-color: #EBEEF3;
+        background-color: #fff;
+
+        .ant-collapse-item {
+            border: 1px solid #EBEEF3;
+            margin-bottom: 24px;
+        }
+
+        .ant-collapse-header {
+            background-color: #F7F8FA;
+            height: 42px;
+        }
+        .ant-collapse-content {
+            padding: 17px 21px 7px 21px;
+        }
+
+        .ant-collapse-content-box {
             padding: 0;
         }
+    }
 }
 </style>