2

src/styles/announcement.scss

@@ -117,6 +117,122 @@
   }
 }
 
+.el-dialog__wrapper.hc-system-announcement-dialog.h-full .el-dialog {
+  margin-top: 5vh !important;
+  height: calc(100% - 10vh) !important;
+  .el-dialog__body {
+    height: calc(100% - 73px);
+    overflow: auto;
+  }
+}
+.el-dialog__wrapper.hc-system-announcement-dialog.black-card .el-dialog {
+  margin-top: 15vh !important;
+  height: calc(100% - 30vh) !important;
+  .el-dialog__body {
+    height: calc(100% - 73px);
+    overflow: auto;
+  }
+}
+
 .block {
   width: 100%;
 }
+
+.hc-system-announcement-black-card {
+  position: relative;
+  background: #20222A;
+  color: white;
+  padding: 14px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  .icon-box {
+    position: relative;
+    text-align: center;
+    margin-right: 24px;
+    width: 95px;
+    .name {
+      font-size: 26px;
+      margin-bottom: 10px;
+    }
+    .icon {
+      position: relative;
+      i {
+        font-size: 50px;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    flex: 1;
+    .top-box {
+      position: relative;
+      display: flex;
+      align-items: end;
+      margin-bottom: 10px;
+      .left {
+        position: relative;
+        .name {
+          font-size: 14px;
+          margin-right: 15px;
+        }
+        .num {
+          font-size: 50px;
+          font-weight: bold;
+        }
+      }
+      .right {
+        position: relative;
+        margin-left: 120px;
+        .name {
+          font-size: 14px;
+          margin-right: 15px;
+        }
+        .user {
+          font-size: 30px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .text-box {
+    position: relative;
+    margin-bottom: 10px;
+    .name {
+      font-size: 14px;
+      margin-right: 15px;
+    }
+    .text {
+      font-size: 22px;
+      font-weight: bold;
+      margin-top: 8px;
+    }
+  }
+  .time-box {
+    position: relative;
+    display: flex;
+    align-items: baseline;
+    vertical-align: bottom;
+    .name {
+      font-size: 14px;
+      margin-right: 15px;
+    }
+    .time {
+      font-size: 30px;
+      font-weight: bold;
+    }
+  }
+}
+
+.el-divider.hc-system-announcement-black-divider {
+  margin-top: 40px !important;
+  margin-bottom: 20px !important;
+  .el-divider__text {
+    font-size: 18px;
+  }
+  &.top {
+    margin-top:5px !important;
+  }
+}

src/views/system/announcement.vue

@@ -52,7 +52,7 @@
             </div>
             <div class="extra">
               <el-badge :value="3" style="margin-right: 18px;">
-                <el-button size="small">待发布</el-button>
+                <el-button size="small" @click="releasedShow">待发布</el-button>
               </el-badge>
               <el-button size="small" type="primary">发布普通公告</el-button>
               <el-button size="small" type="warning">发布系统公告</el-button>
@@ -145,6 +145,91 @@
         <el-button type="primary" @click="systemFormSubmit">确定</el-button>
       </div>
     </el-dialog>
+
+    <!--待发布-->
+    <el-dialog
+      class="hc-system-announcement-dialog black-card" title="待发布的公告" :visible.sync="isReleasedShow"
+      append-to-body center destroy-on-close width="620px" @closed="releasedCancel"
+    >
+      <el-divider content-position="left" class="hc-system-announcement-black-divider top">系统公告</el-divider>
+      <div class="hc-system-announcement-black-card">
+        <div class="icon-box">
+          <div class="name">前 端</div>
+          <div class="icon">
+            <i class="iconfont iconicon_notice"></i>
+          </div>
+        </div>
+        <div class="content">
+          <div class="top-box">
+            <div class="left">
+              <span class="name">待发布：</span>
+              <span class="num">1</span>
+            </div>
+            <div class="right">
+              <span class="name">创建人：</span>
+              <span class="user">黄飞鸿</span>
+            </div>
+          </div>
+          <div class="time-box">
+            <span class="name">发布时间：</span>
+            <span class="time">2024年7月31日 14:40:30</span>
+          </div>
+        </div>
+      </div>
+      <div class="hc-system-announcement-black-card">
+        <div class="icon-box">
+          <div class="name">后 端</div>
+          <div class="icon">
+            <i class="iconfont iconicon_notice"></i>
+          </div>
+        </div>
+        <div class="content">
+          <div class="top-box">
+            <div class="left">
+              <span class="name">待发布：</span>
+              <span class="num">1</span>
+            </div>
+            <div class="right">
+              <span class="name">创建人：</span>
+              <span class="user">祝炜</span>
+            </div>
+          </div>
+          <div class="time-box">
+            <span class="name">发布时间：</span>
+            <span class="time">2024年7月31日 14:40:30</span>
+          </div>
+        </div>
+      </div>
+      <el-divider content-position="left" class="hc-system-announcement-black-divider">普通公告</el-divider>
+      <div class="hc-system-announcement-black-card">
+        <div class="icon-box">
+          <div class="name">公 告</div>
+          <div class="icon">
+            <i class="iconfont iconicon_notice"></i>
+          </div>
+        </div>
+        <div class="content">
+          <div class="top-box">
+            <div class="left">
+              <span class="name">待发布：</span>
+              <span class="num">1</span>
+            </div>
+            <div class="right">
+              <span class="name">创建人：</span>
+              <span class="user">豆海涛</span>
+            </div>
+          </div>
+          <div class="text-box">
+            <div class="name">公告内容：</div>
+            <div class="text">系统xxxxxx</div>
+          </div>
+          <div class="time-box">
+            <span class="name">发布时间：</span>
+            <span class="time">2024年7月31日 14:40:30</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -183,7 +268,8 @@ export default {
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
-      }]
+      }],
+      isReleasedShow: false,
     }
   },
   computed: {
@@ -243,6 +329,14 @@ export default {
     handleDelete(index, row) {
       console.log(index, row);
     },
+    //待发布打开
+    releasedShow() {
+      this.isReleasedShow = true
+    },
+    //待发布关闭
+    releasedCancel() {
+      this.isReleasedShow = false
+    },
     //验证表单
     async getFormValidate(ref) {
       return new Promise(resolve => {