fix:修改系统通知样式 自适应

src/views/message/alarm-config/AlarmConfig.vue

@@ -431,7 +431,7 @@
         flex-direction: column;
         justify-content: space-between;
         padding: 20px 0 32px 32px;
-        width: 803px;
+        min-width: 803px;
         border-right: 1px solid rgba(0, 0, 0, 0.06);
         overflow-y: auto;
 
@@ -452,7 +452,7 @@
         }
       }
       .alarm-config-example {
-        flex: 1;
+        overflow: auto;
       }
     }
   }

src/views/message/alarm-config/components/AlarmExample.vue

@@ -13,23 +13,26 @@
 </template>
 
 <script setup lang="ts">
-  import AlarmExamplePlatform from './AlarmExamplePlatform.vue';
-  import AlarmExampleMobile from './AlarmExampleMobile.vue';
-  import { ref } from 'vue';
+import AlarmExamplePlatform from './AlarmExamplePlatform.vue';
+import AlarmExampleMobile from './AlarmExampleMobile.vue';
+import { ref } from 'vue';
 
-  const activeName = ref<number>(0);
+const activeName = ref<number>(0);
 </script>
 
 <style lang="scss" scoped>
-  .alarm-example {
-    padding: 18px 0 0 20px;
-    font-weight: 500;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 22px;
-  }
+.alarm-example {
+  padding: 18px 0 0 20px;
+  font-weight: 500;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 22px;
+}
 
-  :deep(.el-tabs__nav-scroll) {
-    padding: 0 20px 0;
-  }
+:deep(.el-tabs__nav-scroll) {
+  padding: 0 20px 0;
+}
+:deep(.el-tabs__nav-wrap::after) {
+  height: 0px;
+}
 </style>

src/views/message/alarm-config/components/AlarmExamplePlatform.vue

@@ -69,6 +69,7 @@
         display: inline-block;
         margin-left: 5px;
         width: 18px;
+        height: 20px;
       }
     }
     .alarm-example-card-content {

src/views/message/sysnotion-config/SysnotionConfig.vue

@@ -67,8 +67,10 @@
           </el-form-item>
         </el-form>
         <div class="btns" v-if="!isDisabled">
-          <el-button @click="refresh()">重置</el-button>
-          <el-button type="primary" @click="submitForm()">确定</el-button>
+          <div style="position: absolute; right: 0; bottom: 0">
+            <el-button @click="refresh()">重置</el-button>
+            <el-button type="primary" @click="submitForm()">确定</el-button>
+          </div>
         </div>
       </div>
       <div class="right">
@@ -290,10 +292,13 @@ onMounted(() => {
     height: calc(100vh - 64px - 18px - 50px);
     padding: 0 30px 0 0;
     .left {
+      display: flex;
+      flex-direction: column;
       flex: 1;
       position: relative;
       padding: 21px;
       border-right: 1px solid rgba(0, 0, 0, 0.06);
+      overflow-y: auto;
       .el-form-outer {
         display: flex;
         flex-direction: column;
@@ -306,9 +311,10 @@ onMounted(() => {
         }
       }
       .btns {
-        position: absolute;
-        right: 27px;
-        bottom: 21px;
+        margin-top: 35px;
+        flex: 1;
+        width: 100%;
+        position: relative;
       }
     }
     .right {
@@ -331,6 +337,7 @@ onMounted(() => {
       }
       .tabs {
         margin-top: 14px;
+        overflow-y: auto;
         :deep(.el-tabs__header) {
           margin: 0 0 22px;
         }