4dkankan_official/src/page/information/news/index.vue

<template>
  <div class="l_layout">
    <div class="article" v-for="article in news" :key="article.id">
      <img :src="'http://www.4dage.com' + article.cover" alt="">
      <div>
        <h2>{{article.title}}</h2>
        <span>
          <template v-if="article.origin">来源：{{article.origin}} &nbsp;|&nbsp;</template>
          {{new Date(Number(article.date)).format('yyyy-MM-dd')}} 发表
        </span>
        <p>{{article.brief}}</p>
        <a :href="'#/information/news/' + article.id">阅读全文>></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {news: []}
  },
  methods: {
    getContent (content) {
      let text = content
        .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '')
        .replace(/<[^>]+?>/g, '')
        .replace(/\s+/g, ' ')
        .replace(/ /g, ' ')
        .replace(/&[^>]+?;/g, ' ')
        .replace(/>/g, ' ')

      return text.substr(0, 320)
    }
  },
  async mounted () {
    this.testDom = document.createElement('div')
    let result = (await this.$http.get('/news', {params: {page: 0, limit: 100, language: 1}})).data.content
    this.news = result.data
  }
}
</script>

<style scoped>
.l_layout {
  max-width: 1400px;
  padding: 0 20px;
  margin: 40px auto 80px;
}

.article {
  padding-bottom: 30px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 30px;
}

.article img {
  width: 100%;
  display: block;
}

.article .div {
  margin-top: 15px;
}

.article h2 {
  font-size: 14px;
  color: #171717 ;
  margin-top: 18px;
}

.article p,
.article span {
  font-size: 12px;
  color: #989898;
  line-height: 22px;
  margin-top: 10px;
}

.article span,
.article a {
  display: block;
}

.article a {
  margin-top: 10px;
  color: #52e2c9;
}

@media screen and (min-width: 950px) {
  .article {
    padding-left: 330px;
    position: relative;
    min-height: 240px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  .article img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    max-height: calc(100% - 40px)
  }

  .article h2 {
    font-size: 18px;
    margin-top: 0;
  }

  .article a,
  .article span,
  .article p {
    margin-top: 20px;
    font-size: 14px;
  }

}
</style>