ss

config/index.js

@@ -29,7 +29,7 @@ module.exports = {
 
     // Various Dev Server settings
     host: '0.0.0.0', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
     notifyOnErrors: true,

src/apis/course.js

@@ -464,4 +464,10 @@ export default {
 			params: data
 		})
 	},
+	ordercheckbuy(data) {
+		return request({
+		  url: '/order/check/buy/' + data,
+		  method: 'get'
+		})
+	  },
 }

src/apis/note.js

@@ -42,4 +42,21 @@ export default {
 			noToken: true
 		})
 	},
+	//政策新闻列表
+    consultationlist(data) {
+        return request({
+            url: '/app/consultation/list',
+            method: 'get',
+            params: data,
+			noToken: true,
+        })
+    },
+    //政策新闻-详情
+    consultationdetails(data) {
+        return request({
+            url: `/app/consultation/details/` + data,
+            method: 'get',
+			noToken: true,
+        })
+    },
 }

src/components/goodsItem/index.vue

@@ -113,7 +113,38 @@ export default {
       });
     },
 
-    buyNow(item) {
+    ordercheckbuy(id) {
+      return new Promise((resolve) => {
+        this.$request
+          .ordercheckbuy(id)
+          .then((res) => {
+            console.log(res);
+            if (!res.data) {
+              this.$confirm(
+                `当前课程已满员，详情请联系客服电话：020-87085983`,
+                "提示",
+                {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  showCancelButton: false,
+                  type: "warning",
+                }
+              )
+                .then(() => {})
+                .catch(() => {});
+            }
+            resolve(res.data);
+          })
+          .catch((err) => {
+            this.$message({
+              type: "warning",
+              message: err.msg,
+            });
+            resolve(true);
+          });
+      });
+    },
+    async buyNow(item) {
       if (!this.$tools.isLogin()) {
         this.setCurrentRouter(this.$route);
         this.$router.push({
@@ -121,6 +152,11 @@ export default {
         });
         return;
       }
+      //是否能购买
+      let canbuy = await this.ordercheckbuy(item.goodsId);
+        if (!canbuy) {
+          return;
+        }
       // 判断有没有规格选择
       if (this.item.specTemplateId) {
         this.isCarOrBuy = 2;
@@ -163,13 +199,18 @@ export default {
     /**
      * 加入购物车
      */
-    addCart(item) {
+     async addCart(item) {
       // 判断有没有规格选择
       if (this.item.specTemplateId) {
         this.isCarOrBuy = 1;
         this.getSpecDetail();
         return;
       }
+      //是否能购买
+      let canbuy = await this.ordercheckbuy(item.goodsId);
+        if (!canbuy) {
+          return;
+        }
       this.getAddCar(this.item.goodsId);
     },
     getAddCar(goodsIds) {

src/components/login/index.vue

@@ -484,6 +484,14 @@ export default {
         callback();
       }
     };
+    const validatorPwd = (rule, value, callback) => {
+      var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/;
+      if (!reg.test(value)) {
+        return callback(new Error("密码应由8-16位数字、大小写字母、符号组成"));
+      } else {
+        callback();
+      }
+    };
     return {
       getsign:false,
       loginSign:1,
@@ -528,8 +536,9 @@ export default {
       binds: {
         tel: [{ validator: validatorTel, trigger: "blur" }],
         pwd: [
-          { required: true, trigger: "blur", message: "请输入密码" },
-          { min: 8, max: 10, message: "要求长度8-10位", trigger: "blur" },
+          {  required: true, trigger: "blur", message: "请输入密码" },
+          { validator: validatorPwd, trigger: "blur" },
+          // { min: 8, max: 10, message: "密码应由8-16位数字、大小写字母、符号组成", trigger: "blur" },
         ],
         pwdAgain: [
           {

src/pages/goods-detail/course-detail.vue

@@ -38,8 +38,10 @@
                       (!goodsDetail.maxPrice && !goodsDetail.minPrice)
                     "
                   >
-                  <strong v-if="goodsDetail.standPrice === 0">免费</strong>
-                  <span v-else>{{ goodsDetail.standPrice | formatPrice }}</span>
+                    <strong v-if="goodsDetail.standPrice === 0">免费</strong>
+                    <span v-else>{{
+                      goodsDetail.standPrice | formatPrice
+                    }}</span>
                   </div>
                   <div v-else class="price">
                     <span>{{ goodsDetail.minPrice | formatPrice }}</span>
@@ -47,7 +49,7 @@
                       v-if="goodsDetail.minPrice != goodsDetail.maxPrice"
                     >
                       <i>-</i>
-                      <span>{{ goodsDetail.maxPrice | formatPrice}}</span>
+                      <span>{{ goodsDetail.maxPrice | formatPrice }}</span>
                     </template>
                   </div>
                   <div class="btns">
@@ -72,7 +74,12 @@
               <div class="goods-info__body">
                 <el-tabs v-model="activeName">
                   <el-tab-pane label="课程详情" name="1">
-                    <div class="detail ql-editor" v-if="goodsDetail.pcDetailHtml" style="white-space: pre-wrap"  v-html="goodsDetail.pcDetailHtml"></div>
+                    <div
+                      class="detail ql-editor"
+                      v-if="goodsDetail.pcDetailHtml"
+                      style="white-space: pre-wrap"
+                      v-html="goodsDetail.pcDetailHtml"
+                    ></div>
                     <el-empty description="暂无课程详情" v-else></el-empty>
                   </el-tab-pane>
                   <el-tab-pane label="章节目录" name="2">
@@ -191,9 +198,7 @@
                                                 :key="sectionIndex"
                                               >
                                                 <div
-                                                  class="
-                                                    bank-section__item__text
-                                                  "
+                                                  class="bank-section__item__text"
                                                 >
                                                   {{ section.name }}
                                                 </div>
@@ -244,9 +249,7 @@
                                                 :key="sectionIndex"
                                               >
                                                 <div
-                                                  class="
-                                                    bank-section__item__text
-                                                  "
+                                                  class="bank-section__item__text"
                                                 >
                                                   {{ section.name }}
                                                 </div>
@@ -298,7 +301,13 @@
                           推荐课程
                           <a class="more" @click="comeMoreList">更多></a>
                         </div>
-                        <ul class="list" v-if="recommendList.goodsList && recommendList.goodsList.length > 0">
+                        <ul
+                          class="list"
+                          v-if="
+                            recommendList.goodsList &&
+                            recommendList.goodsList.length > 0
+                          "
+                        >
                           <li
                             class="course-item"
                             v-for="(itemy, index) in compyRecommend(
@@ -337,8 +346,10 @@
                     </div>
                   </el-tab-pane>
                   <el-tab-pane label="学员须知" name="3">
-                    <div class="ql-editor" style="white-space: pre-wrap" 
-                  v-if="goodsDetail.buyNote"
+                    <div
+                      class="ql-editor"
+                      style="white-space: pre-wrap"
+                      v-if="goodsDetail.buyNote"
                       v-html="
                         goodsDetail.buyNote &&
                         goodsDetail.buyNote.replace(/\n|\r\n/g, '<br>')
@@ -1371,8 +1382,44 @@ export default {
         cityName: node.label,
       };
     },
-    buyNow() {
+    ordercheckbuy(id) {
+      return new Promise((resolve) => {
+        this.$request
+          .ordercheckbuy(id)
+          .then((res) => {
+            console.log(res);
+            if (!res.data) {
+              this.$confirm(
+                `当前课程已满员，详情请联系客服电话：020-87085983`,
+                "提示",
+                {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  showCancelButton: false,
+                  type: "warning",
+                }
+              )
+                .then(() => {})
+                .catch(() => {});
+            }
+            resolve(res.data);
+          })
+          .catch((err) => {
+            this.$message({
+              type: "warning",
+              message: err.msg,
+            });
+            resolve(true);
+          });
+      });
+    },
+    async buyNow() {
       if (this.$tools.isLogin()) {
+        //是否能购买
+        let canbuy = await this.ordercheckbuy(this.goodsDetail.goodsId);
+        if (!canbuy) {
+          return;
+        }
         // 判断有没有规格选择
         if (this.goodsDetail.specTemplateId) {
           this.isCarOrBuy = 2;
@@ -1499,7 +1546,7 @@ export default {
         path: "/payment",
       });
     },
-    addCart(status, goodsId) {
+    async addCart(status, goodsId) {
       if (!this.$tools.isLogin()) {
         this.setCurrentRouter(this.$route);
         this.$router.push({
@@ -1507,6 +1554,11 @@ export default {
         });
         return;
       }
+      //是否能购买
+      let canbuy = await this.ordercheckbuy(this.goodsDetail.goodsId);
+        if (!canbuy) {
+          return;
+        }
       // 判断有没有规格选择
       if (this.goodsDetail.specTemplateId) {
         this.isCarOrBuy = 1;

src/pages/home2/index.vue

@@ -2,6 +2,73 @@
   <div id="home_new">
     <Header id="header" :nav_beauf="nav_beauf" :collapse="false"></Header>
     <top></top>
+    
+  <setion class="course">
+    
+    <div class="tabs_box content_main" style="margin-top:30px;">
+        <ul class="tabs_ul">
+          <li
+            v-for="(item, index) in tab"
+            :key="index"
+            @click="handleClick(item)"
+            :class="activeName == item.value ? 'active' : null"
+          >
+            {{ item.label }}
+          </li>
+        </ul>
+      </div>
+      <el-main class="tab_content content_new" style="display: flex;padding: 20px 0px;font-size: 18px;">
+        <template v-if="apiList[activeName].length > 0">
+          <ul class="c">
+            <li
+              v-for="(item, index) in apiList[activeName].slice(0, 5)"
+              :key="index"
+              @click="jumpInfo(item)"
+            >
+              <div class="tit" :title="item.title">
+                {{ item.title }}
+              </div>
+              <div class="time">
+                {{ $tools.timestampToTime(item.createTime, false, false) }}
+              </div>
+            </li>
+          </ul>
+          <div class="center"></div>
+          <ul class="c">
+            <li
+              v-for="(item, index) in apiList[activeName].slice(5, 10)"
+              :key="index"
+              @click="jumpInfo(item)"
+            >
+              <div class="tit" :title="item.title">
+                {{ item.title }}
+              </div>
+              <div class="time">
+                {{ $tools.timestampToTime(item.createTime, false, false) }}
+              </div>
+            </li>
+          </ul>
+        </template>
+        <el-empty
+          :image-size="100"
+          description="暂无数据"
+          style="margin: 0 auto"
+          v-else
+        ></el-empty>
+      </el-main>
+      <el-pagination
+        v-if="apiList[activeName].length > 0"
+        :pager-count="5"
+        class="paginations content_new"
+        style="text-align: center"
+        @current-change="handleCurrentChanges"
+        :current-page.sync="formData.pageindex"
+        :page-size="formData.pagesize"
+        layout="total, prev, pager, next"
+        :total="total"
+      >
+      </el-pagination>
+  </setion>
     <ul class="content_main ul_first" v-if="$store.state.other.tag == 1">
       <li class="main_li" v-for="(item, index) in workMsg" :key="index">
         <img :src="item.imgUrl" alt="" />
@@ -419,7 +486,26 @@ export default {
             width: "300px"
           }
         ]
-      ]
+      ],
+        activeName: "d1",
+        tab: [
+        { label: "开班消息", value: "d1" },
+        { label: "最新消息", value: "d2" },
+        { label: "政策法规", value: "d3" },
+        { label: "通知公告", value: "d4" },
+      ],
+      apiList: {
+        d1: [],
+        d2: [],
+        d3: [],
+        d4: [],
+      },
+      d0Total: 0,
+      total: 0,
+      formData: {
+        pagesize: 10,
+        pageindex: 1,
+      },
     };
   },
   computed: {
@@ -433,6 +519,8 @@ export default {
   mounted() {
     this.courseLists();
     window.addEventListener("scroll", this.scrollFunc);
+    
+    this.getd1();
   },
   destroyed() {
     window.removeEventListener("scroll", this.scrollFunc);
@@ -488,7 +576,58 @@ export default {
             this.bankRecommendId = this.bankName[0].recommendId || null;
           }
         });
-    }
+    }, 
+    getd1() {
+        console.log('d1')
+      this.$request
+        .consultationlist({ type: 3, ...this.formData })
+        .then((res) => {
+          // console.log('d1',res)
+          this.apiList["d1"] = res.rows || [];
+          this.total = res.total;
+        });
+    },
+      getd2() {
+      this.$request
+        .consultationlist(this.formData)
+        .then((res) => {
+          this.apiList["d2"] = res.rows || [];
+          this.total = res.total;
+        });
+    },
+      getd3() {
+      this.$request
+        .consultationlist({ type: 1, ...this.formData })
+        .then((res) => {
+          this.apiList["d3"] = res.rows || [];
+          this.total = res.total;
+        });
+    },
+      getd4() {
+      this.$request
+        .consultationlist({ type: 2, ...this.formData })
+        .then((res) => {
+          this.apiList["d4"] = res.rows || [];
+          this.total = res.total;
+        });
+    },
+    handleCurrentChanges(e) {
+      this.formData.pageindex = e;
+      this[`get${this.activeName}`]();
+    },
+    handleClick(tab) {
+      this.activeName = tab.value;
+      this.formData.pageindex = 1;
+      this[`get${tab.value}`]();
+    },
+    jumpInfo(item) {
+        this.$router.push({
+        path: "/notice-detail",
+        query: {
+         id: item.id
+        }
+      });
+    },
   }
 };
 </script>
@@ -760,4 +899,95 @@ export default {
 .carousel_hover:hover {
   border-color: rgb(0, 122, 255) !important;
 }
+.tabs_box {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #409eff;
+  justify-content: space-between;
+  .tabs_ul {
+    display: flex;
+    align-items: center;
+    li {
+      font-size: 18px;
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+      width: 150px;
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+      cursor: pointer;
+      user-select: none;
+      &:hover {
+        color: #409eff;
+      }
+    }
+    & > .active {
+      color: #fff;
+      background-color: #409eff;
+      &:hover {
+        color: #fff !important;
+      }
+    }
+  }
+  .tab_more {
+    float: right;
+    font-size: 14px;
+    color: #7f7f7f;
+  }
+}
+
+.content_new {
+    width: 1200px;
+    margin: 0px auto 0px;
+    background-color: #fff;
+    border-radius: 4px;
+  }
+.tab_content {
+  display: flex;
+  justify-content: space-between;
+  height: 210px;
+  padding: 20px 0px;
+  .c {
+    width: 620px;
+    & > li {
+      cursor: pointer;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #333;
+      & > .tit {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 16px;
+      }
+      & > .time {
+        margin-left: 10px;
+        flex-shrink: 0;
+        color: #7f7f7f;
+        font-size: 16px;
+      }
+      &:hover {
+        color: #409eff;
+        .time {
+          color: #409eff;
+        }
+      }
+      &::before {
+        font-size: 12px;
+        content: "●";
+        margin-right: 4px;
+        color: rgb(215, 215, 215);
+      }
+    }
+  }
+  .center {
+    width: 1px;
+    background-color: #eee;
+    height: 100%;
+  }
+}
 </style>

src/pages/notice-list/detail.vue

@@ -0,0 +1,878 @@
+<template>
+    <div class="payment my-message">
+      <Header @search="search($event)"></Header>
+      <div class="bgImg">
+        <div class="tits">
+          <h1>{{listData.type===1?'政策法规':listData.type===2?'通知公告':listData.type===3?'开班消息':'最新消息'}}</h1>
+          <p>最新消息,敬请关注<br/>快速获取</p>
+        </div>
+        <img src="@/assets/new1/handoutBGC.png" alt="" />
+      </div>
+      <div class="container" style="padding: 10px 0px;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{listData.type===1?'政策法规':listData.type===2?'通知公告':listData.type===3?'开班消息':'最新消息'}}</el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-main
+      class="container"
+      style="width:1310px!important"
+    >
+    <div class="my-message__body">
+    <div class="content__body">
+        <div class="title">
+                {{
+                  listData.title
+                }}
+              </div>
+              <div class="desc">
+               发布时间 {{ $tools.timestampToTime(listData.createTime, false) }}
+              </div>
+              <div class="ql-editor" v-if="listData.titleContent" style="white-space: pre-wrap"  v-html="listData.titleContent"></div>
+    </div>
+      </div>
+    </el-main>
+    
+
+    </div>
+      <ToolBar></ToolBar>
+      <Footer></Footer>
+    </div>
+  </template>
+  
+  <script>
+  import { mapGetters } from "vuex";
+  import Footer from "@/components/footer/index";
+  import Header from "@/components/header/index";
+  import ToolBar from "@/components/toolbar/index";
+  export default {
+    name: "noticelist",
+    components: {
+      Footer,
+      Header,
+      ToolBar
+    },
+    data() {
+      return {
+        listData: {}
+    };
+    },
+    computed: {
+      ...mapGetters(["header"]),
+    },
+  mounted() {
+    this.init(this.$route.query.id);
+  },
+    methods: {
+    init(id) {
+      this.$request
+        .consultationdetails(id)
+        .then(res => {
+          if(res.code==200){
+            this.listData =res.data;
+          }
+          // this.list = res.rows;
+          // this.total = res.total;
+        })
+        .finally(() => {
+        });
+    },
+    }
+  };
+  </script>
+  
+  <!-- Add "scoped" attribute to limit CSS to this component only -->
+  <style scoped lang="scss">
+  .payment {
+    background-color: rgb(245, 247, 249);
+  }
+  .title {
+            margin-top: 10px;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+            line-height: 40px;
+            text-align: center;
+          }
+
+          .desc {
+            margin-top: 8px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+            line-height: 40px;
+            text-align: center;
+            margin-bottom: 20px;
+          }
+  .bgImg {
+    position: relative;
+    height: 300px;
+    background: repeating-linear-gradient(to right, #00A3FF, #AC00BF);
+    & > .tits {
+      position: absolute;
+      left: 20%;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 300px;
+      h1 {
+        font-size: 40px;
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 14px;
+      }
+      p {
+        line-height: 25px;
+        color: #fff;
+        letter-spacing: 1px;
+      }
+    }
+    & > img {
+      height: 238px;
+      position: absolute;
+      right: 20%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  .my-message {
+  &__header {
+    /deep/ .el-tabs__header {
+      margin-bottom: 0;
+    }
+  }
+  &__body {
+    .content {
+      &__header {
+        height: 64px;
+        display: flex;
+        align-items: center;
+
+        .text {
+          flex: 1;
+          padding-left: 28px;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+          .note {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #3f8dfd;
+          }
+        }
+
+        .btn {
+          cursor: pointer;
+          margin: 0 14px;
+          width: 122px;
+          height: 32px;
+          border-radius: 16px;
+          padding: 0;
+          text-align: center;
+          line-height: 30px;
+          font-size: 16px;
+          &--red {
+            border-color: #ff3b30;
+          }
+        }
+      }
+
+      &__body {
+        .message-list {
+          &__item {
+            margin-bottom: 24px;
+            display: flex;
+            border: 1px solid #eee;
+            padding: 30px 24px;
+            align-items: center;
+            border-radius: 8px;
+
+            .icon {
+              width: 40px;
+              height: 40px;
+              background: rgba(255, 209, 0, 1);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              center &--blue {
+                background: rgba(0, 122, 255, 1);
+              }
+
+              i {
+                font-size: 24px;
+                color: #fff;
+              }
+            }
+
+            .text {
+              flex: 1;
+              padding-left: 16px;
+              .title {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                margin-top: 10px;
+              }
+
+              .desc {
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+              }
+
+              .content {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #666;
+              }
+            }
+
+            .btn {
+              cursor: pointer;
+              width: 122px;
+              height: 32px;
+              padding: 0;
+              border-radius: 16px;
+              text-align: center;
+              line-height: 32px;
+              font-size: 16px;
+            }
+          }
+        }
+
+        .no-data {
+          text-align: center;
+          padding: 50px 0;
+          color: #666;
+          font-size: 16px;
+        }
+
+        .pagination {
+          padding: 30px 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .rebuild {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 0 24px;
+
+      .content {
+        height: 100%;
+        overflow-y: auto;
+
+        &__header {
+          padding: 16px 0;
+          border-bottom: 1px solid #eee;
+
+          .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+        }
+
+        &__body {
+          .list {
+            &__item {
+              padding: 16px 0;
+              border-bottom: 1px solid #eee;
+
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  width: 32px;
+                  height: 20px;
+                  border: 1px solid #3f8dfd;
+                  border-radius: 4px;
+                  color: #3f8dfd;
+                  font-size: 12px;
+
+                  &--yellow {
+                    border: 1px solid #ff9500;
+                    color: #ff9500;
+                  }
+                }
+              }
+
+              .desc {
+                margin-top: 10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  color: #ff3b30;
+                  line-height: 20px;
+                }
+
+                .img {
+                  width: 100px;
+                  height: 100px;
+                  display: inline-block;
+                  text-align: center;
+
+                  img {
+                    max-width: 100%;
+                    max-height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .confirm {
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        color: #fff;
+        margin: 24px auto;
+      }
+    }
+  }
+
+  .my-message-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #fff;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+      border-bottom: 1px solid #eee;
+    }
+
+    &__body {
+      height: auto;
+      padding: 0 24px 24px;
+
+      .content {
+        &__body {
+          .title {
+            margin-top: 10px;
+            font-size: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+            line-height: 40px;
+            text-align: center;
+          }
+
+          .desc {
+            margin-top: 8px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+            line-height: 40px;
+            text-align: center;
+            margin-bottom: 20px;
+          }
+
+          .list {
+            .item {
+              margin-top: 18px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 28px;
+
+              &__title {
+                color: #333;
+                font-size: 16px;
+              }
+
+              &__desc {
+                color: #666;
+                font-size: 16px;
+              }
+
+              &__content {
+                font-size: 14px;
+                cursor: pointer;
+                color: #3f8dfd;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      overflow: hidden;
+      border-top: 1px solid #eee;
+      .confirm {
+        display: block;
+        margin: 25px auto 0;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+      }
+    }
+  }
+}
+.my-message {
+  &__header {
+    /deep/ .el-tabs__header {
+      margin-bottom: 0;
+    }
+  }
+  &__body {
+    .content {
+      &__header {
+        height: 64px;
+        display: flex;
+        align-items: center;
+
+        .text {
+          flex: 1;
+          padding-left: 28px;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+          .note {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #3f8dfd;
+          }
+        }
+
+        .btn {
+          cursor: pointer;
+          margin: 0 14px;
+          width: 122px;
+          height: 32px;
+          border-radius: 16px;
+          padding: 0;
+          text-align: center;
+          line-height: 30px;
+          font-size: 16px;
+          &--red {
+            border-color: #ff3b30;
+          }
+        }
+      }
+
+      &__body {
+        .message-list {
+          &__item {
+            margin-bottom: 24px;
+            display: flex;
+            border: 1px solid #eee;
+            padding: 30px 24px;
+            align-items: center;
+            border-radius: 8px;
+
+            .icon {
+              width: 40px;
+              height: 40px;
+              background: rgba(255, 209, 0, 1);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              center &--blue {
+                background: rgba(0, 122, 255, 1);
+              }
+
+              i {
+                font-size: 24px;
+                color: #fff;
+              }
+            }
+
+            .text {
+              flex: 1;
+              padding-left: 16px;
+              .title {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                margin-top: 10px;
+              }
+
+              .desc {
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+              }
+
+              .content {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #666;
+              }
+            }
+
+            .btn {
+              cursor: pointer;
+              width: 122px;
+              height: 32px;
+              padding: 0;
+              border-radius: 16px;
+              text-align: center;
+              line-height: 32px;
+              font-size: 16px;
+            }
+          }
+        }
+
+        .no-data {
+          text-align: center;
+          padding: 50px 0;
+          color: #666;
+          font-size: 16px;
+        }
+
+        .pagination {
+          padding: 30px 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .rebuild {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 0 24px;
+
+      .content {
+        height: 100%;
+        overflow-y: auto;
+
+        &__header {
+          padding: 16px 0;
+          border-bottom: 1px solid #eee;
+
+          .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+        }
+
+        &__body {
+          .list {
+            &__item {
+              padding: 16px 0;
+              border-bottom: 1px solid #eee;
+
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  width: 32px;
+                  height: 20px;
+                  border: 1px solid #3f8dfd;
+                  border-radius: 4px;
+                  color: #3f8dfd;
+                  font-size: 12px;
+
+                  &--yellow {
+                    border: 1px solid #ff9500;
+                    color: #ff9500;
+                  }
+                }
+              }
+
+              .desc {
+                margin-top: 10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  color: #ff3b30;
+                  line-height: 20px;
+                }
+
+                .img {
+                  width: 100px;
+                  height: 100px;
+                  display: inline-block;
+                  text-align: center;
+
+                  img {
+                    max-width: 100%;
+                    max-height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .confirm {
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        color: #fff;
+        margin: 24px auto;
+      }
+    }
+  }
+
+  .my-message-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #fff;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+      border-bottom: 1px solid #eee;
+    }
+
+    &__body {
+      height: auto;
+      padding: 0 24px 24px;
+
+      .content {
+        &__body {
+          .title {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 8px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+            line-height: 24px;
+          }
+
+          .list {
+            .item {
+              margin-top: 18px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 28px;
+
+              &__title {
+                color: #333;
+                font-size: 16px;
+              }
+
+              &__desc {
+                color: #666;
+                font-size: 16px;
+              }
+
+              &__content {
+                font-size: 14px;
+                cursor: pointer;
+                color: #3f8dfd;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      overflow: hidden;
+      border-top: 1px solid #eee;
+      .confirm {
+        display: block;
+        margin: 25px auto 0;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+      }
+    }
+  }
+}
+  </style>
+  

src/pages/notice-list/index.vue

@@ -1,348 +1,296 @@
 <template>
-    <div class="payment my-message">
-      <Header @search="search($event)"></Header>
-      <div class="bgImg">
-        <div class="tits">
-          <h1>通知公告</h1>
-          <p>最新消息,敬请关注<br/>快速获取</p>
-        </div>
-        <img src="@/assets/new1/handoutBGC.png" alt="" />
+  <div class="payment my-message">
+    <Header @search="search($event)"></Header>
+    <div class="bgImg">
+      <div class="tits">
+        <h1>
+          {{
+            type === 1
+              ? "政策法规"
+              : type === 2
+              ? "通知公告"
+              : type === 3
+              ? "开班消息"
+              : "最新通知"
+          }}
+        </h1>
+        <p>最新消息,敬请关注<br />快速获取</p>
+      </div>
+      <img src="@/assets/new1/handoutBGC.png" alt="" />
+    </div>
+    <div class="container" style="padding: 10px 0px">
+      <div class="tabs_box container" style="margin-top: 30px">
+        <ul class="tabs_ul">
+          <li
+            v-for="(item, index) in tab"
+            :key="index"
+            @click="handleClick(item)"
+            :class="type == item.value ? 'active' : null"
+          >
+            {{ item.label }}
+          </li>
+        </ul>
       </div>
-      <div class="container" style="padding: 10px 0px;">
-      <el-breadcrumb separator="/">
+      <!-- <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>通知公告</el-breadcrumb-item>
-      </el-breadcrumb>
-      <el-main
-      class="container"
-      style="width:1310px!important"
-    >
-    <div class="my-message__body">
-    <div class="content__body">
-      <el-empty
-          v-if="list.length == 0"
-          description="暂无消息"
-        ></el-empty>
-          <template v-else>
-            <div class="message-list">
-              <div
-                class="message-list__item"
-                v-for="(item, index) in list"
-                :key="index"
-              >
+        <el-breadcrumb-item>{{
+          type === 1
+            ? "政策法规"
+            : type === 2
+            ? "通知公告"
+            : type === 3
+            ? "开班消息"
+            : "最新消息"
+        }}</el-breadcrumb-item>
+      </el-breadcrumb> -->
+      <el-main class="container" style="width: 1310px !important">
+        <div class="my-message__body">
+          <div class="content__body">
+            <el-empty v-if="list.length == 0" description="暂无消息"></el-empty>
+            <template v-else>
+              <div class="message-list">
                 <div
-                  class="icon"
-                  :class="{ 'icon--blue': item.systemStatus === 1 ? '' : true }"
+                  class="message-list__item"
+                  v-for="(item, index) in list"
+                  :key="index"
                 >
-                  <i
-                    v-if="item.systemStatus === 1"
-                    class="el-icon-message-solid"
-                  ></i>
-
-                  <i v-else class="el-icon-s-custom"></i>
-                </div>
-                <div class="text">
-                  <div class="desc">
-                    {{ $tools.timestampToTime(item.sendTime, false) }}
+                  <div class="icon icon--blue">
+                    <i class="el-icon-news"></i>
                   </div>
-                  <div
-                    class="title"
-                    :style="item.receiptStatus == 1 ? 'color:#999' : ''"
-                  >
-                    {{
-                      item.systemStatus === 2
-                        ? item.informVo.informName
-                        : item.systemStatus === 1
-                        ? item.text
-                        : "接口异常"
-                    }}
+                  <div class="text">
+                    <div class="desc">
+                      {{ $tools.timestampToTime(item.createTime, false) }}
+                    </div>
+                    <div
+                      class="title"
+                      :style="item.receiptStatus == 1 ? 'color:#999' : ''"
+                    >
+                      {{ item.title }}
+                    </div>
                   </div>
+                  <el-button
+                    type="primary"
+                    class="btn"
+                    @click="showDetail(item)"
+                    >查看详情</el-button
+                  >
                 </div>
-                <el-button type="primary" class="btn" @click="showDetail(item)"
-                  >查看详情</el-button
-                >
               </div>
-            </div>
 
-            <div class="pagination">
-              <el-pagination
-                @current-change="currentChange"
-                background
-                layout="prev, pager, next"
-                :total="total"
-                :pager-count="5"
-                :page-size="formData.pageSize"
-              >
-              </el-pagination>
-            </div>
-          </template>
-        </div>
-      </div>
-    </el-main>
-    <el-dialog
-      width="600px"
-      class="my-message-modal"
-      :visible.sync="showDetailModal"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-    >
-      <div class="my-message-modal__content">
-        <div class="my-message-modal__close" @click="showDetailModal = false">
-          X
-        </div>
-        <div class="my-message-modal__header">通知详情</div>
-        <div class="my-message-modal__body">
-          <div class="content">
-            <div class="content__body">
-              <div class="title">
-                {{
-                  listData.systemStatus === 2
-                    ? listData.informVo.informName
-                    : listData.systemStatus === 1
-                    ? listData.remind
-                    : ""
-                }}
-              </div>
-              <div class="desc">
-                {{ $tools.timestampToTime(listData.sendTime, false) }}
+              <div class="pagination">
+                <el-pagination
+                  @current-change="currentChange"
+                  background
+                  layout="prev, pager, next"
+                  :total="total"
+                  :pager-count="5"
+                  :page-size="formData.pageSize"
+                >
+                </el-pagination>
               </div>
+            </template>
+          </div>
+        </div>
+      </el-main>
+      <el-dialog
+        width="900px"
+        class="my-message-modal"
+        :visible.sync="showDetailModal"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+      >
+        <div class="my-message-modal__content">
+          <div class="my-message-modal__close" @click="showDetailModal = false">
+            X
+          </div>
+          <div class="my-message-modal__header">详情</div>
+          <div class="my-message-modal__body">
+            <div class="content">
+              <div class="content__body">
+                <div class="title">
+                  {{ listData.title }}
+                </div>
+                <div class="desc">
+                  发布时间
+                  {{ $tools.timestampToTime(listData.createTime, false) }}
+                </div>
 
-              <div
-                class="content" id="html1"
-                v-if="listData.systemStatus === 2"
-                v-html="listData.informVo.affiche"
-              ></div>
-              <!-- <div id="html1">
+                <div
+                  class="content"
+                  id="html1"
+                  v-html="listData.titleContent"
+                ></div>
+                <!-- <div id="html1">
 
               </div> -->
-              <div class="content" v-if="listData.systemStatus === 1">
-                {{ listData.text }}
-              </div>
-
-              <div class="list" v-if="listData.informVo">
-                <div
-                  class="item"
-                  v-for="(item, index) in listData.informVo.informCourseVo"
-                  :key="'informVo' + index"
-                >
-                  <div class="item__title">{{ item.goodsName }}</div>
-                  <div class="item__desc">
-                    {{ item.courseName
-                    }}{{ item.moduleName ? "/" + item.moduleName : ""
-                    }}{{ item.chapterName ? "/" + item.chapterName : ""
-                    }}{{ item.sectionName }}
-                  </div>
-                  <div v-if="false" class="item__content" @click="jumpSection(item)">
-                    {{
-                      $tools.secondToTime(item.topicNum, false)
-                    }}（点击可直接跳转）
-                  </div>
-                </div>
-                <div
-                  class="item"
-                  v-for="(item, index) in listData.informVo.informExamVo"
-                  :key="'informExamVo' + index"
-                >
-                  <div class="item__title">{{ item.goodsName }}</div>
-                  <div class="item__desc">
-                    {{ item.moduleName ? "/" + item.moduleName : ""
-                    }}{{ item.chapterName ? "/" + item.chapterName : ""
-                    }}{{ item.examName }}
-                  </div>
-                  <div v-if="false" class="item__content" @click="jumpExam(item)">
-                    第{{ item.topicNum }}道题（点击可直接跳转）
-                  </div>
-                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div
-          class="my-message-modal__footer"
-        >
+          <div class="my-message-modal__footer"></div>
         </div>
-      </div>
-    </el-dialog>
-
-    </div>
-      <ToolBar></ToolBar>
-      <Footer></Footer>
+      </el-dialog>
     </div>
-  </template>
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
   
   <script>
-  import { mapGetters } from "vuex";
-  import Footer from "@/components/footer/index";
-  import Header from "@/components/header/index";
-  import ToolBar from "@/components/toolbar/index";
-  export default {
-    name: "noticelist",
-    components: {
-      Footer,
-      Header,
-      ToolBar
-    },
-    data() {
-      return {
-        showDetailModal: false,
-        formData: {
-        systemStatusList: "2", //1系统消息2教务消息
+import { mapGetters } from "vuex";
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+export default {
+  name: "noticelist",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      showDetailModal: false,
+      formData: {
         pageNum: 1,
         pageSize: 10,
+        type:3
       },
-        listData: {},
-        total: 0,
+      listData: {},
+      total: 0,
       goodsData: {},
       list: [],
+      type: 3,
+      tab: [
+        { label: "开班消息", value: 3 },
+        { label: "最新消息", value: 0 },
+        { label: "政策法规", value: 1 },
+        { label: "通知公告", value: 2 },
+      ],
     };
+  },
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function () {
+      return function (int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "listOption1";
+            break;
+          case 2:
+            str = "listOption2";
+            break;
+
+          default:
+            str = "listOption1";
+            break;
+        }
+        return str;
+      };
     },
-    computed: {
-      ...mapGetters(["header"]),
-      currentComponent: function() {
-        return function(int) {
-          var str = "";
-          switch (int) {
-            case 1:
-              str = "listOption1";
-              break;
-            case 2:
-              str = "listOption2";
-              break;
-  
-            default:
-              str = "listOption1";
-              break;
-          }
-          return str;
-        };
-      }
-    },
+  },
   mounted() {
+    const type = this.$route.meta.type;
+    console.log(this.$route.meta);
+    if (type) {
+       this.formData.type = type;
+    }
     this.getappinformUserlist();
   },
-    methods: {
-      currentChange(e) {
+  methods: {
+    currentChange(e) {
       this.formData.pageNum = e;
       this.getappinformUserlist();
     },
-      showDetail(item) {
-      this.sysTime = this.$tools.timest();
-      this.messageId = item.id;
-      this.orderGoodsId = item.orderGoodsId;
-      if (item.informVo && item.informVo.affiche) {
-        item.informVo.affiche = item.informVo.affiche.replace(
-            /<img/gi,
-            '<img style="max-width:100%;"'
-          );
-          item.informVo.affiche = item.informVo.affiche.replace(
-            /\\t/gi,
-            '&nbsp;'
-          );
-          // item.informVo.affiche = item.informVo.affiche.replace(
-          //   /\\"/gi,
-          //   ''
-          // );
-        }
-        this.showDetailModal = true;
-        this.listData = item;
-        // setTimeout(() => {
-        // document.getElementById("html1").innerHTML= item.informVo.affiche ;
-        // }, 3000);
+    handleClick(item) {
+      this.type = item.value;
+      this.formData= {
+        pageNum: 1,
+        pageSize: 10,
+        type : item.value==0?null:item.value
+      }
+      this.getappinformUserlist();
     },
-        getappinformUserlist() {
+    showDetail(item) {
+      this.$router.push({
+        path: "/notice-detail",
+        query: {
+          id: item.id,
+        },
+      });
+      return;
+      if (item.titleContent) {
+        item.titleContent = item.titleContent.replace(
+          /<img/gi,
+          '<img style="max-width:100%;"'
+        );
+        item.titleContent = item.titleContent.replace(/\\t/gi, "&nbsp;");
+        // item.informVo.affiche = item.informVo.affiche.replace(
+        //   /\\"/gi,
+        //   ''
+        // );
+      }
+      this.showDetailModal = true;
+      this.listData = item;
+      // setTimeout(() => {
+      // document.getElementById("html1").innerHTML= item.informVo.affiche ;
+      // }, 3000);
+    },
+    getappinformUserlist() {
       this.$request
-        .systemannouncemen(this.formData)
-        .then(res => {
-          if(res.code==200 &&res.data){
-            this.list = [{className: null,
-goodsId: null,
-gradeId: null,
-id: 14408,
-idCard: null,
-informId: 10,
-informVo: {
-affiche: res.data,
-classifyId: null,
-classifyName: null,
-createBy: "admin",
-informCourseVo: [],
-informExamVo: [],
-informId: 10,
-informName: "停课停班通知",
-informType: 1,
-informWay: 1,
-issueStatus: 1,
-issueTime: null,
-receiptNum: null,
-receiptStatus: 1,
-sendTime: null,
-status: 1,
-userFrom: 1,
-userId: null,
-userNum: null,
-userStatus: null},
-orderGoodsId: null,
-planId: null,
-realName: null,
-receiptStatus: 0,
-remind: null,
-remindId: null,
-sendStatus: 1,
-sendTime: 1735228800,
-systemStatus: 2,
-telPhone: null,
-text: null,
-userId: 219}];
-            this.total = 1;
+        .consultationlist(this.formData)
+        .then((res) => {
+          if (res.code == 200) {
+            this.list = res.rows || [];
+            this.total = res.total;
           }
           // this.list = res.rows;
           // this.total = res.total;
         })
-        .finally(() => {
-        });
+        .finally(() => {});
     },
-    }
-  };
-  </script>
+  },
+};
+</script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped lang="scss">
-  .payment {
-    background-color: rgb(245, 247, 249);
-  }
-  .bgImg {
-    position: relative;
-    height: 300px;
-    background: repeating-linear-gradient(to right, #00A3FF, #AC00BF);
-    & > .tits {
-      position: absolute;
-      left: 20%;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 300px;
-      h1 {
-        font-size: 40px;
-        font-weight: bold;
-        color: #fff;
-        margin-bottom: 14px;
-      }
-      p {
-        line-height: 25px;
-        color: #fff;
-        letter-spacing: 1px;
-      }
+.payment {
+  background-color: rgb(245, 247, 249);
+}
+.bgImg {
+  position: relative;
+  height: 300px;
+  background: repeating-linear-gradient(to right, #00a3ff, #ac00bf);
+  & > .tits {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 300px;
+    h1 {
+      font-size: 40px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 14px;
     }
-    & > img {
-      height: 238px;
-      position: absolute;
-      right: 20%;
-      top: 50%;
-      transform: translateY(-50%);
+    p {
+      line-height: 25px;
+      color: #fff;
+      letter-spacing: 1px;
     }
   }
-  .my-message {
+  & > img {
+    height: 238px;
+    position: absolute;
+    right: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+.my-message {
   &__header {
     /deep/ .el-tabs__header {
       margin-bottom: 0;
@@ -389,17 +337,17 @@ userId: 219}];
       &__body {
         .message-list {
           &__item {
-            margin-bottom: 24px;
+            margin-bottom: 0px;
             display: flex;
             border: 1px solid #eee;
-            padding: 30px 24px;
+            padding: 15px 12px;
             align-items: center;
             border-radius: 8px;
 
             .icon {
               width: 40px;
               height: 40px;
-              background: rgba(255, 209, 0, 1);
+              background: #22acff;
               border-radius: 50%;
               display: flex;
               align-items: center;
@@ -648,11 +596,12 @@ userId: 219}];
         &__body {
           .title {
             margin-top: 10px;
-            font-size: 16px;
+            font-size: 18px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #333333;
-            line-height: 24px;
+            line-height: 40px;
+            text-align: center;
           }
 
           .desc {
@@ -661,7 +610,9 @@ userId: 219}];
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #999999;
-            line-height: 24px;
+            line-height: 40px;
+            text-align: center;
+            margin-bottom: 20px;
           }
 
           .list {
@@ -757,17 +708,17 @@ userId: 219}];
       &__body {
         .message-list {
           &__item {
-            margin-bottom: 24px;
+            margin-bottom: 0px;
             display: flex;
             border: 1px solid #eee;
-            padding: 30px 24px;
+            padding: 15px 12px;
             align-items: center;
             border-radius: 8px;
 
             .icon {
               width: 40px;
               height: 40px;
-              background: rgba(255, 209, 0, 1);
+              background: #22acff;
               border-radius: 50%;
               display: flex;
               align-items: center;
@@ -1078,5 +1029,42 @@ userId: 219}];
     }
   }
 }
-  </style>
+.tabs_box {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #409eff;
+  justify-content: space-between;
+  .tabs_ul {
+    display: flex;
+    align-items: center;
+    li {
+      font-size: 18px;
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+      width: 150px;
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+      cursor: pointer;
+      user-select: none;
+      &:hover {
+        color: #409eff;
+      }
+    }
+    & > .active {
+      color: #fff;
+      background-color: #409eff;
+      &:hover {
+        color: #fff !important;
+      }
+    }
+  }
+  .tab_more {
+    float: right;
+    font-size: 14px;
+    color: #7f7f7f;
+  }
+}
+</style>
   

src/pages/notice-list/index_20250509.vue

@@ -0,0 +1,1082 @@
+<template>
+    <div class="payment my-message">
+      <Header @search="search($event)"></Header>
+      <div class="bgImg">
+        <div class="tits">
+          <h1>通知公告</h1>
+          <p>最新消息,敬请关注<br/>快速获取</p>
+        </div>
+        <img src="@/assets/new1/handoutBGC.png" alt="" />
+      </div>
+      <div class="container" style="padding: 10px 0px;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>通知公告</el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-main
+      class="container"
+      style="width:1310px!important"
+    >
+    <div class="my-message__body">
+    <div class="content__body">
+      <el-empty
+          v-if="list.length == 0"
+          description="暂无消息"
+        ></el-empty>
+          <template v-else>
+            <div class="message-list">
+              <div
+                class="message-list__item"
+                v-for="(item, index) in list"
+                :key="index"
+              >
+                <div
+                  class="icon"
+                  :class="{ 'icon--blue': item.systemStatus === 1 ? '' : true }"
+                >
+                  <i
+                    v-if="item.systemStatus === 1"
+                    class="el-icon-message-solid"
+                  ></i>
+
+                  <i v-else class="el-icon-s-custom"></i>
+                </div>
+                <div class="text">
+                  <div class="desc">
+                    {{ $tools.timestampToTime(item.sendTime, false) }}
+                  </div>
+                  <div
+                    class="title"
+                    :style="item.receiptStatus == 1 ? 'color:#999' : ''"
+                  >
+                    {{
+                      item.systemStatus === 2
+                        ? item.informVo.informName
+                        : item.systemStatus === 1
+                        ? item.text
+                        : "接口异常"
+                    }}
+                  </div>
+                </div>
+                <el-button type="primary" class="btn" @click="showDetail(item)"
+                  >查看详情</el-button
+                >
+              </div>
+            </div>
+
+            <div class="pagination">
+              <el-pagination
+                @current-change="currentChange"
+                background
+                layout="prev, pager, next"
+                :total="total"
+                :pager-count="5"
+                :page-size="formData.pageSize"
+              >
+              </el-pagination>
+            </div>
+          </template>
+        </div>
+      </div>
+    </el-main>
+    <el-dialog
+      width="600px"
+      class="my-message-modal"
+      :visible.sync="showDetailModal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="my-message-modal__content">
+        <div class="my-message-modal__close" @click="showDetailModal = false">
+          X
+        </div>
+        <div class="my-message-modal__header">通知详情</div>
+        <div class="my-message-modal__body">
+          <div class="content">
+            <div class="content__body">
+              <div class="title">
+                {{
+                  listData.systemStatus === 2
+                    ? listData.informVo.informName
+                    : listData.systemStatus === 1
+                    ? listData.remind
+                    : ""
+                }}
+              </div>
+              <div class="desc">
+                {{ $tools.timestampToTime(listData.sendTime, false) }}
+              </div>
+
+              <div
+                class="content" id="html1"
+                v-if="listData.systemStatus === 2"
+                v-html="listData.informVo.affiche"
+              ></div>
+              <!-- <div id="html1">
+
+              </div> -->
+              <div class="content" v-if="listData.systemStatus === 1">
+                {{ listData.text }}
+              </div>
+
+              <div class="list" v-if="listData.informVo">
+                <div
+                  class="item"
+                  v-for="(item, index) in listData.informVo.informCourseVo"
+                  :key="'informVo' + index"
+                >
+                  <div class="item__title">{{ item.goodsName }}</div>
+                  <div class="item__desc">
+                    {{ item.courseName
+                    }}{{ item.moduleName ? "/" + item.moduleName : ""
+                    }}{{ item.chapterName ? "/" + item.chapterName : ""
+                    }}{{ item.sectionName }}
+                  </div>
+                  <div v-if="false" class="item__content" @click="jumpSection(item)">
+                    {{
+                      $tools.secondToTime(item.topicNum, false)
+                    }}（点击可直接跳转）
+                  </div>
+                </div>
+                <div
+                  class="item"
+                  v-for="(item, index) in listData.informVo.informExamVo"
+                  :key="'informExamVo' + index"
+                >
+                  <div class="item__title">{{ item.goodsName }}</div>
+                  <div class="item__desc">
+                    {{ item.moduleName ? "/" + item.moduleName : ""
+                    }}{{ item.chapterName ? "/" + item.chapterName : ""
+                    }}{{ item.examName }}
+                  </div>
+                  <div v-if="false" class="item__content" @click="jumpExam(item)">
+                    第{{ item.topicNum }}道题（点击可直接跳转）
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="my-message-modal__footer"
+        >
+        </div>
+      </div>
+    </el-dialog>
+
+    </div>
+      <ToolBar></ToolBar>
+      <Footer></Footer>
+    </div>
+  </template>
+  
+  <script>
+  import { mapGetters } from "vuex";
+  import Footer from "@/components/footer/index";
+  import Header from "@/components/header/index";
+  import ToolBar from "@/components/toolbar/index";
+  export default {
+    name: "noticelist",
+    components: {
+      Footer,
+      Header,
+      ToolBar
+    },
+    data() {
+      return {
+        showDetailModal: false,
+        formData: {
+        systemStatusList: "2", //1系统消息2教务消息
+        pageNum: 1,
+        pageSize: 10,
+      },
+        listData: {},
+        total: 0,
+      goodsData: {},
+      list: [],
+    };
+    },
+    computed: {
+      ...mapGetters(["header"]),
+      currentComponent: function() {
+        return function(int) {
+          var str = "";
+          switch (int) {
+            case 1:
+              str = "listOption1";
+              break;
+            case 2:
+              str = "listOption2";
+              break;
+  
+            default:
+              str = "listOption1";
+              break;
+          }
+          return str;
+        };
+      }
+    },
+  mounted() {
+    this.getappinformUserlist();
+  },
+    methods: {
+      currentChange(e) {
+      this.formData.pageNum = e;
+      this.getappinformUserlist();
+    },
+      showDetail(item) {
+      this.sysTime = this.$tools.timest();
+      this.messageId = item.id;
+      this.orderGoodsId = item.orderGoodsId;
+      if (item.informVo && item.informVo.affiche) {
+        item.informVo.affiche = item.informVo.affiche.replace(
+            /<img/gi,
+            '<img style="max-width:100%;"'
+          );
+          item.informVo.affiche = item.informVo.affiche.replace(
+            /\\t/gi,
+            '&nbsp;'
+          );
+          // item.informVo.affiche = item.informVo.affiche.replace(
+          //   /\\"/gi,
+          //   ''
+          // );
+        }
+        this.showDetailModal = true;
+        this.listData = item;
+        // setTimeout(() => {
+        // document.getElementById("html1").innerHTML= item.informVo.affiche ;
+        // }, 3000);
+    },
+        getappinformUserlist() {
+      this.$request
+        .systemannouncemen(this.formData)
+        .then(res => {
+          if(res.code==200 &&res.data){
+            this.list = [{className: null,
+goodsId: null,
+gradeId: null,
+id: 14408,
+idCard: null,
+informId: 10,
+informVo: {
+affiche: res.data,
+classifyId: null,
+classifyName: null,
+createBy: "admin",
+informCourseVo: [],
+informExamVo: [],
+informId: 10,
+informName: "停课停班通知",
+informType: 1,
+informWay: 1,
+issueStatus: 1,
+issueTime: null,
+receiptNum: null,
+receiptStatus: 1,
+sendTime: null,
+status: 1,
+userFrom: 1,
+userId: null,
+userNum: null,
+userStatus: null},
+orderGoodsId: null,
+planId: null,
+realName: null,
+receiptStatus: 0,
+remind: null,
+remindId: null,
+sendStatus: 1,
+sendTime: 1735228800,
+systemStatus: 2,
+telPhone: null,
+text: null,
+userId: 219}];
+            this.total = 1;
+          }
+          // this.list = res.rows;
+          // this.total = res.total;
+        })
+        .finally(() => {
+        });
+    },
+    }
+  };
+  </script>
+  
+  <!-- Add "scoped" attribute to limit CSS to this component only -->
+  <style scoped lang="scss">
+  .payment {
+    background-color: rgb(245, 247, 249);
+  }
+  .bgImg {
+    position: relative;
+    height: 300px;
+    background: repeating-linear-gradient(to right, #00A3FF, #AC00BF);
+    & > .tits {
+      position: absolute;
+      left: 20%;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 300px;
+      h1 {
+        font-size: 40px;
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 14px;
+      }
+      p {
+        line-height: 25px;
+        color: #fff;
+        letter-spacing: 1px;
+      }
+    }
+    & > img {
+      height: 238px;
+      position: absolute;
+      right: 20%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  .my-message {
+  &__header {
+    /deep/ .el-tabs__header {
+      margin-bottom: 0;
+    }
+  }
+  &__body {
+    .content {
+      &__header {
+        height: 64px;
+        display: flex;
+        align-items: center;
+
+        .text {
+          flex: 1;
+          padding-left: 28px;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+          .note {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #3f8dfd;
+          }
+        }
+
+        .btn {
+          cursor: pointer;
+          margin: 0 14px;
+          width: 122px;
+          height: 32px;
+          border-radius: 16px;
+          padding: 0;
+          text-align: center;
+          line-height: 30px;
+          font-size: 16px;
+          &--red {
+            border-color: #ff3b30;
+          }
+        }
+      }
+
+      &__body {
+        .message-list {
+          &__item {
+            margin-bottom: 24px;
+            display: flex;
+            border: 1px solid #eee;
+            padding: 30px 24px;
+            align-items: center;
+            border-radius: 8px;
+
+            .icon {
+              width: 40px;
+              height: 40px;
+              background: rgba(255, 209, 0, 1);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              center &--blue {
+                background: rgba(0, 122, 255, 1);
+              }
+
+              i {
+                font-size: 24px;
+                color: #fff;
+              }
+            }
+
+            .text {
+              flex: 1;
+              padding-left: 16px;
+              .title {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                margin-top: 10px;
+              }
+
+              .desc {
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+              }
+
+              .content {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #666;
+              }
+            }
+
+            .btn {
+              cursor: pointer;
+              width: 122px;
+              height: 32px;
+              padding: 0;
+              border-radius: 16px;
+              text-align: center;
+              line-height: 32px;
+              font-size: 16px;
+            }
+          }
+        }
+
+        .no-data {
+          text-align: center;
+          padding: 50px 0;
+          color: #666;
+          font-size: 16px;
+        }
+
+        .pagination {
+          padding: 30px 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .rebuild {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 0 24px;
+
+      .content {
+        height: 100%;
+        overflow-y: auto;
+
+        &__header {
+          padding: 16px 0;
+          border-bottom: 1px solid #eee;
+
+          .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+        }
+
+        &__body {
+          .list {
+            &__item {
+              padding: 16px 0;
+              border-bottom: 1px solid #eee;
+
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  width: 32px;
+                  height: 20px;
+                  border: 1px solid #3f8dfd;
+                  border-radius: 4px;
+                  color: #3f8dfd;
+                  font-size: 12px;
+
+                  &--yellow {
+                    border: 1px solid #ff9500;
+                    color: #ff9500;
+                  }
+                }
+              }
+
+              .desc {
+                margin-top: 10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  color: #ff3b30;
+                  line-height: 20px;
+                }
+
+                .img {
+                  width: 100px;
+                  height: 100px;
+                  display: inline-block;
+                  text-align: center;
+
+                  img {
+                    max-width: 100%;
+                    max-height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .confirm {
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        color: #fff;
+        margin: 24px auto;
+      }
+    }
+  }
+
+  .my-message-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #fff;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+      border-bottom: 1px solid #eee;
+    }
+
+    &__body {
+      height: auto;
+      padding: 0 24px 24px;
+
+      .content {
+        &__body {
+          .title {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 8px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+            line-height: 24px;
+          }
+
+          .list {
+            .item {
+              margin-top: 18px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 28px;
+
+              &__title {
+                color: #333;
+                font-size: 16px;
+              }
+
+              &__desc {
+                color: #666;
+                font-size: 16px;
+              }
+
+              &__content {
+                font-size: 14px;
+                cursor: pointer;
+                color: #3f8dfd;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      overflow: hidden;
+      border-top: 1px solid #eee;
+      .confirm {
+        display: block;
+        margin: 25px auto 0;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+      }
+    }
+  }
+}
+.my-message {
+  &__header {
+    /deep/ .el-tabs__header {
+      margin-bottom: 0;
+    }
+  }
+  &__body {
+    .content {
+      &__header {
+        height: 64px;
+        display: flex;
+        align-items: center;
+
+        .text {
+          flex: 1;
+          padding-left: 28px;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #999999;
+          .note {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #3f8dfd;
+          }
+        }
+
+        .btn {
+          cursor: pointer;
+          margin: 0 14px;
+          width: 122px;
+          height: 32px;
+          border-radius: 16px;
+          padding: 0;
+          text-align: center;
+          line-height: 30px;
+          font-size: 16px;
+          &--red {
+            border-color: #ff3b30;
+          }
+        }
+      }
+
+      &__body {
+        .message-list {
+          &__item {
+            margin-bottom: 24px;
+            display: flex;
+            border: 1px solid #eee;
+            padding: 30px 24px;
+            align-items: center;
+            border-radius: 8px;
+
+            .icon {
+              width: 40px;
+              height: 40px;
+              background: rgba(255, 209, 0, 1);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              center &--blue {
+                background: rgba(0, 122, 255, 1);
+              }
+
+              i {
+                font-size: 24px;
+                color: #fff;
+              }
+            }
+
+            .text {
+              flex: 1;
+              padding-left: 16px;
+              .title {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                margin-top: 10px;
+              }
+
+              .desc {
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #999999;
+              }
+
+              .content {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #666;
+              }
+            }
+
+            .btn {
+              cursor: pointer;
+              width: 122px;
+              height: 32px;
+              padding: 0;
+              border-radius: 16px;
+              text-align: center;
+              line-height: 32px;
+              font-size: 16px;
+            }
+          }
+        }
+
+        .no-data {
+          text-align: center;
+          padding: 50px 0;
+          color: #666;
+          font-size: 16px;
+        }
+
+        .pagination {
+          padding: 30px 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .rebuild {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 0 24px;
+
+      .content {
+        height: 100%;
+        overflow-y: auto;
+
+        &__header {
+          padding: 16px 0;
+          border-bottom: 1px solid #eee;
+
+          .title {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ff3b30;
+            line-height: 24px;
+          }
+        }
+
+        &__body {
+          .list {
+            &__item {
+              padding: 16px 0;
+              border-bottom: 1px solid #eee;
+
+              .title {
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  width: 32px;
+                  height: 20px;
+                  border: 1px solid #3f8dfd;
+                  border-radius: 4px;
+                  color: #3f8dfd;
+                  font-size: 12px;
+
+                  &--yellow {
+                    border: 1px solid #ff9500;
+                    color: #ff9500;
+                  }
+                }
+              }
+
+              .desc {
+                margin-top: 10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+
+                .note {
+                  color: #ff3b30;
+                  line-height: 20px;
+                }
+
+                .img {
+                  width: 100px;
+                  height: 100px;
+                  display: inline-block;
+                  text-align: center;
+
+                  img {
+                    max-width: 100%;
+                    max-height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .confirm {
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        color: #fff;
+        margin: 24px auto;
+      }
+    }
+  }
+
+  .my-message-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -24px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #fff;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+      border-bottom: 1px solid #eee;
+    }
+
+    &__body {
+      height: auto;
+      padding: 0 24px 24px;
+
+      .content {
+        &__body {
+          .title {
+            margin-top: 10px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+            line-height: 24px;
+          }
+
+          .desc {
+            margin-top: 8px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+            line-height: 24px;
+          }
+
+          .list {
+            .item {
+              margin-top: 18px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 28px;
+
+              &__title {
+                color: #333;
+                font-size: 16px;
+              }
+
+              &__desc {
+                color: #666;
+                font-size: 16px;
+              }
+
+              &__content {
+                font-size: 14px;
+                cursor: pointer;
+                color: #3f8dfd;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      overflow: hidden;
+      border-top: 1px solid #eee;
+      .confirm {
+        display: block;
+        margin: 25px auto 0;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+      }
+    }
+  }
+}
+  </style>
+  

src/router/index.js

@@ -95,6 +95,19 @@ const router = new Router({
         }
       }
     },
+    {
+      path: '/notice-detail',
+      name: '文章详情',
+      component: resolve => require(['@/pages/notice-list/detail.vue'], resolve),
+      meta: {
+        title: '-建造师造价师在线教育培训报名报考平台',
+        content: {
+          keywords: + '-建造师造价师在线教育培训平台报名报考',
+          description: + '-建造师造价师在线教育培训平台报名报考'
+        },
+        type:2
+      }
+    },
     {
       path: '/packPage',
       name: '冲刺秘籍大礼包',