修改通知公告样式

src/components/pages/tencent/notice.vue

@@ -1,20 +1,31 @@
 <template>
-  <div class="pb_content" style="background: unset;height: 100%;" v-loading="loading">
-    <div class="pb_content_body" style="
+  <div
+    class="pb_content"
+    style="background: unset; height: 100%"
+    v-loading="loading"
+  >
+    <div
+      class="pb_content_body"
+      style="
         background: #fff;
         padding: 0px 25px;
         box-sizing: border-box;
         border-radius: 5px;
-      ">
+      "
+    >
       <div class="pb_head">
         <span>通知公告</span>
         <div class="student_button">
-          <el-button type="primary" @click="dialogVisibleAdd = true" v-if="role == '1'">新建通知</el-button>
+          <el-button
+            type="primary"
+            @click="dialogVisibleAdd = true"
+            v-if="role == '1'"
+            >新建通知</el-button
+          >
         </div>
       </div>
-
     </div>
-    <div class="pb_content_body" style="height:calc(100% - 100px)">
+    <div class="pb_content_body" style="height: calc(100% - 100px)">
       <div class="noneBox" v-if="!tableData.length">
         <img src="../../../assets/icon/isNoMessage.png" />
       </div>
@@ -22,9 +33,16 @@
         <div class="left">
           <div class="title">通知内容</div>
           <div class="content">
-            <div class="noticeContent" v-for="(item, index) in tableData" :key="index"
-              @click="res = item, activeId = item.id" :class="{ active: item.id == activeId }">
-              <div class="n_title"><span>{{ item.title }}</span></div>
+            <div
+              class="noticeContent"
+              v-for="(item, index) in tableData"
+              :key="index"
+              @click="(res = item), (activeId = item.id)"
+              :class="{ active: item.id == activeId }"
+            >
+              <div class="n_title">
+                <span>{{ item.title }}</span>
+              </div>
               <div class="n_content">{{ snippet(item.content) }}</div>
               <div class="n_time">{{ item.creatTime }}</div>
             </div>
@@ -33,11 +51,15 @@
         <div class="right">
           <div class="title">通知详情</div>
           <div class="content">
-            <img src="../../../assets/icon/notice/noticeBg.png" alt="">
+            <img src="../../../assets/icon/notice/noticeBg.png" alt="" />
             <div class="r_n_content">
               <div class="r_n_title">
-                <div class="r_title"><span>{{ res.title }}</span></div>
-                <div class="r_time"><span></span><span>{{ res.creatTime }}</span></div>
+                <div class="r_title">
+                  <span>{{ res.title }}</span>
+                </div>
+                <div class="r_time">
+                  <span></span><span>{{ res.creatTime }}</span>
+                </div>
               </div>
               <div class="r_n_main">
                 <div class="notice_content cont" v-html="res.content"></div>
@@ -47,12 +69,22 @@
         </div>
       </div>
     </div>
-    <el-dialog title="添加全站通知" :visible.sync="dialogVisibleAdd" width="700px" :before-close="handleClose"
-      class="dialog_diy" center>
+    <el-dialog
+      title="添加全站通知"
+      :visible.sync="dialogVisibleAdd"
+      width="700px"
+      :before-close="handleClose"
+      class="dialog_diy"
+      center
+    >
       <div>
         <div class="tian1">
           <span>通知标题</span>
-          <el-input v-model="noticeTitle" style="width: 250px; margin: 15px 0px" placeholder="请输入通知标题"></el-input>
+          <el-input
+            v-model="noticeTitle"
+            style="width: 250px; margin: 15px 0px"
+            placeholder="请输入通知标题"
+          ></el-input>
         </div>
         <div class="tian1">
           <span>通知内容</span>
@@ -97,18 +129,17 @@ export default {
       activeId: "",
     };
   },
-  mounted() {
-  },
+  mounted() {},
   beforeDestroy() {
     if (this.timer) {
-      clearInterval(this.timer)
-      this.timer = null
+      clearInterval(this.timer);
+      this.timer = null;
     }
   },
   beforeRouteLeave(to, from, next) {
     if (this.timer) {
-      clearInterval(this.timer)
-      this.timer = null
+      clearInterval(this.timer);
+      this.timer = null;
     }
     next();
   },
@@ -121,10 +152,10 @@ export default {
       }
     },
     snippet(str) {
-      str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
-      str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
+      str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
+      str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
       //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
-      str = str.replace(/&nbsp;/ig, '');//去掉&nbsp;
+      str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
       return str;
       // return value.replace(/<[^>]*>/g, "");
     },
@@ -230,8 +261,8 @@ export default {
               message: "添加成功",
               type: "success",
             });
-            this.noticeTitle = ""
-            this.detail = ""
+            this.noticeTitle = "";
+            this.detail = "";
             this.getNews();
             this.dialogVisibleAdd = false;
           })
@@ -262,18 +293,18 @@ export default {
   display: flex;
 }
 
-.student_search>div:nth-child(1) {
+.student_search > div:nth-child(1) {
   line-height: 35px;
   font-size: 14px;
 }
 
-.student_search>>>.el-input__inner {
+.student_search >>> .el-input__inner {
   width: 190px;
   height: 35px;
   margin-left: 10px;
 }
 
-.student_table>>>.el-table--border td {
+.student_table >>> .el-table--border td {
   border-right: 0px !important;
 }
 
@@ -285,7 +316,7 @@ export default {
   width: 30px;
 }
 
-.logoImg>img {
+.logoImg > img {
   width: 100%;
   height: 100%;
 }
@@ -295,28 +326,28 @@ export default {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__header {
+.dialog_diy >>> .el-dialog__header {
   background: #454545 !important;
   padding: 15px 20px;
 }
 
-.dialog_diy>>>.el-dialog__title {
+.dialog_diy >>> .el-dialog__title {
   color: #fff;
 }
 
-.student_table>>>.el-table--border td {
+.student_table >>> .el-table--border td {
   border-right: 0px !important;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn {
+.dialog_diy >>> .el-dialog__headerbtn {
   top: 19px;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
   color: #fff;
 }
 
@@ -340,25 +371,25 @@ export default {
 }
 
 /* table 样式 */
-.cont>>>table {
+.cont >>> table {
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
 }
 
-.cont>>>table td,
-.cont>>>table th {
+.cont >>> table td,
+.cont >>> table th {
   border-bottom: 1px solid #ccc;
   border-right: 1px solid #ccc;
   padding: 3px 5px;
 }
 
-.cont>>>table th {
+.cont >>> table th {
   border-bottom: 2px solid #ccc;
   text-align: center;
 }
 
 /* blockquote 样式 */
-.cont>>>blockquote {
+.cont >>> blockquote {
   display: block;
   border-left: 8px solid #d0e5f2;
   padding: 5px 10px;
@@ -369,7 +400,7 @@ export default {
 }
 
 /* code 样式 */
-.cont>>>code {
+.cont >>> code {
   display: inline-block;
   *display: inline;
   *zoom: 1;
@@ -379,21 +410,20 @@ export default {
   margin: 0 3px;
 }
 
-.cont>>>pre code {
+.cont >>> pre code {
   display: block;
 }
 
 /* ul ol 样式 */
-.cont>>>ul,
+.cont >>> ul,
 ol {
   margin: 10px 0 10px 20px;
 }
 
-.el-table>>>.even_row {
+.el-table >>> .even_row {
   background-color: #f1f1f1;
 }
 
-
 .student_page {
   margin-top: 10px;
 }
@@ -403,8 +433,8 @@ ol {
   width: 100% !important;
 }
 
-.student_table>>>.el-table,
-.student_table>>>.el-table__body-wrapper {
+.student_table >>> .el-table,
+.student_table >>> .el-table__body-wrapper {
   height: auto !important;
 }
 
@@ -476,7 +506,7 @@ ol {
   position: relative;
 }
 
-.n_noticeBox .right .content>img {
+.n_noticeBox .right .content > img {
   position: absolute;
   right: 20px;
   bottom: -30px;
@@ -514,7 +544,7 @@ ol {
 }
 
 .n_title::before {
-  content: '';
+  content: "";
   display: block;
   background-image: url(../../../assets/icon/notice/doi.png);
   min-width: 25px;
@@ -551,16 +581,20 @@ ol {
   box-sizing: border-box;
 }
 
-.r_n_title {}
+.r_n_title {
+}
 
 .r_title {
   font-size: 25px;
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
   /* padding-bottom: 10px; */
 }
 
 .r_title::before {
-  content: '';
+  content: "";
   display: block;
   background-image: url(../../../assets/icon/notice/notice.png);
   min-width: 40px;