<template>
  <div class="article-details">
    <div class="title">• 文章详情</div>
    <el-row :gutter="20" v-for="(item,index) in datalist" :key="index">
      <el-col :span="6">
        <div class="article-img">
          <img :src="item.img" class="img-size">
        </div>
      </el-col>
      <el-col :span="10">
        <div class="article-info">
          <p>{{item.title}}</p>
          <div>
            <span>
              <i class="el-icon-star-off"></i>
              {{item.readnum}}
            </span>
            <span>
              <i class="el-icon-star-on"></i>
              {{item.readtime}}
            </span>
            <span>
              <i class="el-icon-sold-out"></i>
              {{item.originreadnum}}
            </span>
            <span>
              <i class="el-icon-share"></i>
              {{item.originreadtime}}
            </span>
          </div>
        </div>
      </el-col>
      <article-chart></article-chart>
    </el-row>
  </div>
</template>
<script>
import ArticleChart from './ArticleChart'
export default {
  data () {
    return {
      datalist: []
    }
  },
  components: {
    ArticleChart
  },
  created () {
    this.GetArticleDetail()
  },
  methods: {
    GetArticleDetail () {
      this.axios.get('static/article-details.json').then(res => {
        this.datalist = res.data.datalist
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.article-details
  background-color #fff
  border-top 1px solid #ccc
  padding 0 10px
  .title
    height 30px
    line-height 30px
  .article-img
    height 90px
    .img-size
      width 156px
      height 100%
  .article-info
    p
      font-size 16px
      height 30px
      line-height 30px
    span
      height 50px
      line-height 50px
      padding-right 30px
      font-size 16px
.el-row
  margin-bottom 10px
  &:last-child
    margin-bottom 0
</style>
