<template>
    <div ref="app">
      <Header></Header>
      <div class="location">
        当前位置: <router-link to="/">首页</router-link> > 详情
      </div>
      <div class="main">
        <div class="title">
          {{newsInfo.title}}
        </div>
        <div class="date-from">
          <span class="date">发布日期：{{newsInfo.publishDate}}</span>
          <span class="from">来源：{{newsInfo.source}}</span>
          <span>字体大小：
            <a href="javascript: void(0);" @click="changeFont(12)">【小】</a>
            <a href="javascript: void(0);" @click="changeFont(16)">【中】</a>
            <a href="javascript: void(0);" @click="changeFont(20)">【大】</a>
          </span>
        </div>
        <div class="content" v-html="newsInfo.content"></div>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/assets/components/Header'
import Footer from '@/assets/components/Footer'
import url from '@/assets/public/url'
import axios from "axios"
export default {
    name: 'Detail',
    components: {
      Header,
      Footer
    },
    data () {
        return {
          contentId: '',
          url: url.signUrl,
          newsInfo: {}
        }
    },
    watch: {
      $route () {
        this.$refs.app.scrollTo(0,0)
      }
    },
    methods: {
      getNewsDetail: function () {
        var self = this
        axios.get(self.url + 'app/contentrelease/get/' + self.contentId).then(function (res) {
          var imgStr = new RegExp('img src="','g')
          res.data.content = res.data.content.replace(imgStr, 'img src="' + self.url)
          self.newsInfo = res.data
        })
      },
      changeFont: function (size) {
        $('.content p').css({'fontSize': size + 'px'})
      }
    },
    mounted: function () {
      this.contentId = this.$route.query.contentId
      this.getNewsDetail()
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.location
  width 1200px
  margin 15px auto
  font-size 18px
  color #333
  a
    color #333
.main
  width 1200px
  margin 0 auto 15px
  border 1px solid #f1f1f1
  padding 0 10px 20px
  box-sizing border-box
  .title
    padding 20px 0
    text-align center
    font-size 30px
    color #000
  .date-from
    text-align center
    height 35px
    line-height 35px
    background #f8f8f8
    font-size 18px
    color #333
    margin-bottom 15px
    .date
      margin-right 70px
    .from
      margin-right 70px
  .content
    min-height 500px
    p
      font-size 16px
      color #333
      line-height 35px
      margin-bottom 15px
</style>
