新闻通知详情

src/api/NewsCenter/index.js

@@ -3,7 +3,7 @@
  * @Author: gcz
  * @Date: 2022-08-22 16:08:25
  * @LastEditors: gcz
- * @LastEditTime: 2022-08-22 16:21:03
+ * @LastEditTime: 2022-08-22 17:41:07
  * @FilePath: \veterans_client_web\src\api\NewsCenter\index.js
  * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
  */
@@ -18,6 +18,20 @@ export function getNoticeList(params) {
   return request({
     url: `/app/notice/list/${params.name}`,
     method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
     params
   })
 }
+
+// 获取通知内容
+export function getNoticeDetail(params) {
+  return request({
+    url: `/app/notice/getDetail/${params.id}`,
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    }
+  })
+}

src/views/NewsCenter/NewsCenterIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-22 10:20:21
  * @LastEditors: gcz
- * @LastEditTime: 2022-08-22 16:33:25
+ * @LastEditTime: 2022-08-22 17:38:18
  * @FilePath: \veterans_client_web\src\views\NewsCenter\NewsCenterIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -35,7 +35,7 @@
               v-for="(item, index) in dataList"
               :key="index"
             >
-              <div class="u-flex u-row-between" v-if="tabsActive==0">
+              <div @click="goNewsDetails(item.artId)" class="u-flex u-row-between" v-if="tabsActive==0">
                 <div class="artTitle u-line-1" >{{item.artTitle}}</div>
                 <div class="time">{{parseTime(item.updateTime, "{y}-{m}-{d}")}}</div>
               </div>
@@ -59,7 +59,7 @@
               v-for="(item, index) in dataList"
               :key="index"
             >
-              <div class="u-flex u-row-between" v-if="tabsActive==1">
+              <div @click="goNoticeDetails(item.id)" class="u-flex u-row-between" v-if="tabsActive==1">
                 <div class="artTitle u-line-1" >{{item.name}}</div>
                 <div class="time">{{parseTime(item.releasTime, "{y}-{m}-{d}")}}</div>
               </div>
@@ -174,6 +174,12 @@ export default {
     },
     noticeClick(tab, event) {
       this.getNotice()
+    },
+    goNewsDetails(id){
+      this.$router.push({ path: 'newsdetails', query:{ id: id }});
+    },
+    goNoticeDetails(id){
+      this.$router.push({ path: 'noticedetails', query:{ id: id }});
     }
   }
 };

src/views/NewsCenter/NewsDetails/NewsDetailsIndex.vue

@@ -2,11 +2,108 @@
  * @Description: 新闻详情
  * @Author: 空白格
  * @Date: 2022-08-22 15:30:47
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-22 15:30:47
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-22 17:32:47
  * @FilePath: \veterans_client_web\src\views\NewsCenter\NewsDetails\NewsDetailsIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>新闻详情</div>
+  <div class="app-main">
+    <BannerBreadcrumb title="新闻中心" :breadcrumb="false" />
+    <div class="banner-breadcrumb-breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/newscenter' }">新闻中心</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ newsData.artTitle }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="app-main-box">
+      <section class="news-data app-main-box-content">
+        <div class="title">{{newsData.artTitle}}</div>
+        <div class="sub-title">
+          <span>发布时间:{{newsData.updateTime}}</span>
+          <span>文章来源:{{newsData.artAuthor}}</span>
+        </div>
+        <div class="art-content" v-html="newsData.artContent"></div>
+      </section>
+    </div>
+  </div>
 </template>
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import {getNewsData} from "@/api/Home";
+export default{
+  name:'Newsdetails',
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      newsData:{},   
+    }
+  },
+  created(){
+    this.getNewsDetails()
+  },
+  methods:{
+    getNewsDetails() {
+      getNewsData({id:this.$route.query.id}).then((res) => {
+        this.newsData = res.data
+      });
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.news-data{
+  .title{
+    font-weight: 400;
+    font-size: 26px;
+    color: #1A1A1A;
+    letter-spacing: 1.34px;
+    text-align: center;
+    border-bottom: 1px solid #D5D5D5;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+  }
+  .sub-title{
+    font-weight: 400;
+    font-size: 14px;
+    color: #999;
+    letter-spacing: 1.75px;
+    text-align: center;
+    margin-bottom: 30px;
+    span + span{
+      margin-left: 100px;
+    }
+  }
+  .art-content{
+    color: #666;
+    :deep(p){
+      text-indent: 2em;
+      margin-bottom: 10px;
+      line-height: 30px;
+    }
+  }
+}
+
+.banner-breadcrumb-breadcrumb {
+  background-color: #fff;
+  :deep(.el-breadcrumb) {
+    width: 70%;
+    height: 64px;
+    line-height: 64px;
+    min-width: 600px;
+    margin: 0 auto;
+    font-size: 20px;
+  }
+  :deep(.el-breadcrumb__inner.is-link) {
+    color: #7e7e7e;
+    font-weight: normal;
+  }
+  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+    color: #ff0000;
+  }
+}
+
+</style>

src/views/NewsCenter/NoticeDetails/NoticeDetailsIndex.vue

@@ -2,11 +2,105 @@
  * @Description: 通知详情
  * @Author: 空白格
  * @Date: 2022-08-22 15:31:43
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-22 15:31:44
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-22 17:44:55
  * @FilePath: \veterans_client_web\src\views\NewsCenter\NoticeDetails\NoticeDetailsIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>通知详情</div>
+  <div class="app-main">
+    <BannerBreadcrumb title="新闻中心" :breadcrumb="false" />
+    <div class="banner-breadcrumb-breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/newscenter' }">新闻中心</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ newsData.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="app-main-box">
+      <section class="news-data app-main-box-content">
+        <div class="title">{{newsData.name}}</div>
+        <div class="sub-title">
+          <span>发布时间:{{newsData.createTime}}</span>
+          <span>文章来源:{{newsData.createBy}}</span>
+        </div>
+        <div class="art-content">{{newsData.content}}</div>
+      </section>
+    </div>
+  </div>
 </template>
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import {getNoticeDetail} from "@/api/NewsCenter";
+export default{
+  name:'Newsdetails',
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      newsData:{},   
+    }
+  },
+  created(){
+    this.getNoticeDetail()
+  },
+  methods:{
+    getNoticeDetail() {
+      getNoticeDetail({id:this.$route.query.id}).then((res) => {
+        this.newsData = res.data
+      });
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.news-data{
+  .title{
+    font-weight: 400;
+    font-size: 26px;
+    color: #1A1A1A;
+    letter-spacing: 1.34px;
+    text-align: center;
+    border-bottom: 1px solid #D5D5D5;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+  }
+  .sub-title{
+    font-weight: 400;
+    font-size: 14px;
+    color: #999;
+    letter-spacing: 1.75px;
+    text-align: center;
+    margin-bottom: 30px;
+    span + span{
+      margin-left: 100px;
+    }
+  }
+  .art-content{
+    color: #666;
+    line-height: 30px;
+    text-indent: 2em;
+  }
+}
+
+.banner-breadcrumb-breadcrumb {
+  background-color: #fff;
+  :deep(.el-breadcrumb) {
+    width: 70%;
+    height: 64px;
+    line-height: 64px;
+    min-width: 600px;
+    margin: 0 auto;
+    font-size: 20px;
+  }
+  :deep(.el-breadcrumb__inner.is-link) {
+    color: #7e7e7e;
+    font-weight: normal;
+  }
+  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+    color: #ff0000;
+  }
+}
+
+</style>