Merge branch 'CC-system' into 'dev'

fix:修复系统通知UI bug

See merge request skyeye/skyeye_frontend/skyeye-admin!137

src/main.css

@@ -10,7 +10,7 @@
         border-bottom: 1px solid #D9D9D9;
 
         span {
-            font-weight: 500;
+            font-weight: 600;
             font-size: 16px;
             color: rgba(0, 0, 0, 0.88);
             line-height: 24px;
@@ -30,7 +30,7 @@
         overflow-y: auto;
 
         .group {
-            padding: 15px 20px 15px 10px;
+            padding: 15px 25px 15px 25px;
         }
     }
 }

src/views/message/components/Group.vue

@@ -84,4 +84,10 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+.el-tag {
+  font-weight: 500;
+  font-size: 12px;
+  color: #409eff;
+  line-height: 20px;
+}
 </style>

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

@@ -360,6 +360,8 @@ onMounted(() => {
             max-height: calc(100vh - 450px);
             .title {
               display: flex;
+              align-items: center;
+              margin-bottom: 12px;
               gap: 18px;
               width: 100%;
               height: 31px;
@@ -391,6 +393,7 @@ onMounted(() => {
                 color: #646566;
                 line-height: 20px;
                 a {
+                  font-size: 14px;
                   display: flex;
                   gap: 8px;
                   cursor: default;
@@ -422,7 +425,7 @@ onMounted(() => {
               }
               .info-content {
                 width: 100%;
-                max-height: calc(100vh - 450px - 32px - 41px);
+                max-height: calc(100vh - 450px - 32px - 55px);
                 overflow-y: auto;
                 padding: 12px 7px 12px 12px;
                 font-weight: 400;
@@ -445,6 +448,8 @@ onMounted(() => {
             max-height: calc(100vh - 400px);
             .title {
               display: flex;
+              align-items: center;
+              margin-bottom: 12px;
               gap: 18px;
               width: 100%;
               height: 31px;
@@ -494,7 +499,7 @@ onMounted(() => {
             }
             .info {
               width: 100%;
-              max-height: calc(100vh - 400px - 32px);
+              max-height: calc(100vh - 400px - 50px);
               background: #ffffff;
               border-radius: 4px;
               border: 1px solid rgba(0, 0, 0, 0.06);

src/views/message/systemNotifications/components/problemHandleTable.vue

@@ -4,7 +4,7 @@
       <div class="pushWorkShopBar">
         <span class="pushiWorkShopSpan">推送车间</span>
         <img src="../img/edit.png" @click="handleWorkShopEdit()" />
-        <span class="descriptionSpan">请点击编辑按钮，选择需要发送问题处理通知</span>
+        <span class="descriptionSpan">请点击编辑按钮，选择需要发送问题处理通知的车间</span>
       </div>
       <div class="workshopList">
         <div class="left" ref="listLeft">
@@ -92,7 +92,7 @@
     </el-dialog>
     <el-dialog
       v-model="showDialog"
-      title="请输入推送文案"
+      title="编辑推送文案"
       align-center="true"
       width="400"
       @close="closeDialog()"
@@ -101,11 +101,12 @@
     >
       <el-input
         v-model="content"
-        style="width: 380px; padding: 0 65px 0 0"
-        :autosize="{ minRows: 1, maxRows: 4 }"
+        style="width: 370px;"
+        :autosize="{ minRows: 4, maxRows: 5 }"
         maxlength="100"
         show-word-limit
         type="textarea"
+        placeholder="请输入推送文案"
       />
       <template #footer>
         <div class="dialog-footer">
@@ -234,7 +235,7 @@ onMounted(() => {
     line-height: 20px;
   }
   .descriptionSpan {
-    width: 250px;
+    width: 300px;
     height: 14px;
     font-weight: 400;
     font-size: 12px;
@@ -287,46 +288,4 @@ onMounted(() => {
   justify-content: center;
   width: 100%;
 }
-
-// .editWorkShopDialog {
-//   .editWorkShopHeader {
-//     width: 96px;
-//     height: 24px;
-//     .titleSpan {
-//       font-weight: 600;
-//       font-size: 16px;
-//       color: rgba(0, 0, 0, 0.88);
-//       line-height: 24px;
-//     }
-//   }
-
-//   .editWorkShopDialogLeft {
-//     height: 523px;
-//     width: 50%;
-//     border-right: 1px solid rgba(0, 0, 0, 0.06);
-//   }
-
-//   .editWorkShopDialogRight {
-//     height: 523px;
-//     width: 50%;
-//     position: relative;
-//     .dialogBottom {
-//       position: absolute;
-//       right: 0;
-//       bottom: 0;
-//       display: flex;
-//       justify-content: flex-end;
-//       margin-top: 12px;
-//     }
-//   }
-// }
-
-// :deep(.el-dialog) {
-//   border-radius: 8px;
-// }
-// :deep(.el-dialog__body) {
-//   height: 523px;
-//   border-radius: 8px;
-//   display: flex;
-// }
 </style>

src/views/message/systemNotifications/systemNotifications.vue

@@ -3,7 +3,7 @@
     <div class="notificationSelectionBar">
       <div
         :class="
-          currentNotification === notificationType.system ? 'notificationSelected' : 'notification'
+          currentNotification === notificationType.system ? 'snotificationSelected' : 'notification'
         "
         @click="changeNotification(notificationType.system)"
         >系统消息通知</div
@@ -11,7 +11,7 @@
       <div
         :class="
           currentNotification === notificationType.problemHandle
-            ? 'notificationSelected'
+            ? 'pnotificationSelected'
             : 'notification'
         "
         @click="changeNotification(notificationType.problemHandle)"
@@ -25,52 +25,59 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import systemNotificationTable from './components/systemNotificationTable.vue';
-  import problemHandleTable from './components/problemHandleTable.vue';
+import { ref } from 'vue';
+import systemNotificationTable from './components/systemNotificationTable.vue';
+import problemHandleTable from './components/problemHandleTable.vue';
 
-  enum notificationType {
-    system,
-    problemHandle,
-  }
-  const currentNotification = ref(notificationType.system);
+enum notificationType {
+  system,
+  problemHandle,
+}
+const currentNotification = ref(notificationType.system);
 
-  const changeNotification = (notificationType: notificationType) => {
-    currentNotification.value = notificationType;
-  };
+const changeNotification = (notificationType: notificationType) => {
+  currentNotification.value = notificationType;
+};
 </script>
 
 <style lang="scss" scoped>
-  .notificationPage {
-    height: calc(100vh - 64px - 18px);
-    background-color: rgba(255, 255, 255, 1);
-    padding: 24px 44px 35px 21px;
-    position: relative;
-  }
+.notificationPage {
+  height: calc(100vh - 64px - 18px);
+  background-color: rgba(255, 255, 255, 1);
+  padding: 24px 44px 35px 21px;
+  position: relative;
+}
 
-  .notificationSelectionBar {
-    display: flex;
-    width: 376px;
-    height: 38px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
+.notificationSelectionBar {
+  display: flex;
+  width: 376px;
+  height: 38px;
+  border: 1px solid #d9d9d9;
+  background: rgba(0, 0, 0, 0.02);
+  margin-bottom: 24px;
+  cursor: pointer;
+  border-radius: 4px;
+  .notification {
+    width: 50%;
     background: rgba(0, 0, 0, 0.02);
-    margin-bottom: 24px;
-    cursor: pointer;
-    .notification {
-      width: 50%;
-      border-radius: 4px;
-      background: rgba(0, 0, 0, 0.02);
-      line-height: 36px;
-      text-align: center;
-    }
-    .notificationSelected {
-      width: 50%;
-      outline: 1px solid #1890ff;
-      border-radius: 4px;
-      background: rgba(24, 144, 255, 0.15);
-      line-height: 36px;
-      text-align: center;
-    }
+    line-height: 36px;
+    text-align: center;
+  }
+  .snotificationSelected {
+    width: 50%;
+    outline: 1px solid #1890ff;
+    background: rgba(24, 144, 255, 0.15);
+    line-height: 36px;
+    text-align: center;
+    border-radius: 4px 0 0 4px;
+  }
+  .pnotificationSelected {
+    width: 50%;
+    outline: 1px solid #1890ff;
+    background: rgba(24, 144, 255, 0.15);
+    line-height: 36px;
+    text-align: center;
+    border-radius: 0 4px 4px 0;
   }
+}
 </style>