Front_End_CN/src/pages/information/news/index.vue

<template>
  <div class="l_layout">
    <div class="article" v-for="article in news" :key="article.id">
      <img :src="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 ref="brief">{{article.brief}}</p>
        <a :href="!article.outer_link ? ('#/information/news/' + article.id) : article.outer_link">阅读全文>></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}})).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: #000000;
  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: #00b4ed;
}

@media screen and (min-width: 700px) {
  .article {
    display: flex;
    /* padding-right: calc(100% - 330px); */
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
  }

  .article img {
    margin-right: 30px;
    width: 300px;
    height: auto;
    align-self: flex-start;
  }

  .article div {
    flex: 1;
    /* position: absolute;
    left: 330px;
    right: 0;
    top: 0;
    bottom: 40px; */
    display: flex;
    flex-direction: column;
    align-self: stretch
  }

  .article h2,
  .article a,
  .article span {
    flex: 0 0 auto;
  }

  .article p {
    /* height: 88px; */
    flex: 0 0 auto;
    overflow: hidden;
  }

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

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

  .article a {
    justify-self: end;
  }

}
</style>