<!--
 * @Description: 新闻详情
 * @Author: 空白格
 * @Date: 2022-08-22 15:30:47
 * @LastEditors: gcz
 * @LastEditTime: 2022-08-23 09:52:25
 * @FilePath: \veterans_client_web\src\views\NewsCenter\NewsDetails\NewsDetailsIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <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";
import {getPolicyDetail} from "@/api/NewsCenter";
export default{
  name:'Newsdetails',
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      newsData:{},   
    }
  },
  created(){
    this.getNewsDetails()
  },
  methods:{
    getNewsDetails() {
      if(!this.$route.query.type){
        this.$message('请传文章类别!')
      }
      let page = {
        news: this.getNewsData,
        policy: this.getPolicyData,
      };
      page[this.$route.query.type] && page[this.$route.query.type]();
    },
    getNewsData(){
      getNewsData({id:this.$route.query.id}).then((res) => {
        this.newsData = res.data
      });
    },
    getPolicyData(){
      getPolicyDetail({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>
