<template>
  <div class="newsDetails">
    <header-nav  :id="id"/>

    <div class="newscont">
      <div>
        <my-breadcrumb level1="首页" :level2="level2" :level3="level3" style="height: 50px; line-height: 50px;"></my-breadcrumb>
      </div>
      <div class="line"></div>
      <div class="newsOnly">
        <h1>{{this.formData.title}}</h1>
        <div class="lineOnly"></div>
        <div class="content" v-html="this.formData.content"></div>
      </div>

    </div>
    <footer-nav/>
  </div>
</template>

<script>
import headerNav from '@/components/header';
import footerNav from '@/components/footer';
export default {
  data() {
    return {
      id: 11,
      flagtag: false,
      level2: "",
      level3: "新闻详情",
      aid: '',
      formData: {}
    };
  },
  created() {
    this.getUrlsub();
    this.loadData();
    this.level2 = sessionStorage.getItem('breadName');
  },
  components: {
    headerNav,
    footerNav,
  },
  methods: {
    async loadData() {
      const response = await this.$http.get(`biz/newsArticle/${this.aid}`);
      if (response.data.code === 1) {
        this.formData = response.data.responseData;
      }
    },
    //获取url斜杠最后的一个字段
    getUrlsub() {
      var urlStr = location.pathname;
      var index = urlStr.lastIndexOf('\/');
      this.aid = urlStr.substring(index + 1, urlStr.length);
    }

  }
};
</script>

<style>
.newsDetails {
  background-color: #ffffff;
}
.newsDetails .newscont {
  width: 900px;
  margin: 20px auto;

}
.newsDetails .line {
  height: 2px;
  width: 100%;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}
.newsDetails .newscont .newsOnly {
  overflow: hidden;
  border: 1px solid #e5e5e5;
  padding: 20px;
}
.newsDetails .newscont .lineOnly {
  height: 2px;
  width: 100%;
  background-color: #e5e5e5;
}
.newsDetails .newscont h1{
  font-size: 30px;
  margin: 20px auto;
  text-align: center;
}
.newsDetails .newscont .content{
  font-size: 16px;
}
.newsDetails .newscont .content img {
  width: 100%;
}
</style>

