/* 全部一行两个 */
<template>
  <div class="article">
    <template v-for="(item, index) in list">
      <!-- 3图文章内容的容器 1图添加class one-->
      <div class="article_list_wrap_three one" @click="toDetail(item)" :key="index">
        <!-- 标题容器 -->
        <div class="article_list_ctx_wrap">
          <div class="article_list_title">
            <p>{{ item.title }}</p>
          </div>
        </div>
        <!-- 图片 -->
        <div class="article_list_pic_wrap">
          <img class="article_list_pic" :src="item.imgUrl" />
        </div>
        <!-- 阅读量和日期的容器 -->
        <div class="article_list_info_wrap">
          <!-- 阅读量 -->
          <div>
            <p class="read_num">浏览量：{{ item.readNumber }}</p>
          </div>
          <!-- 日期 -->
          <div>
            <p class="push_date">{{ item.createTime }}</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      active: 0,
    }
  },
  methods: {
    toDetail(item) {
      if (item.linkUrl) {
        this.yxAxios.post(`${this.proxyUrl}/manage/info/content/addReadNum`, { id: item.id }).then((res) => {
          if (res.data.code == 200) {
            location.href = item.linkUrl
          } else {
            this.$toast.fail(res.data.message)
          }
        })
      } else {
        this.$router.push({ name: 'ArticleDetail', query: { id: item.id } })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.article {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-left: 30px;
  box-sizing: border-box;
  .page-head {
    font-size: 40px;
    text-align: center;
  }
  .list {
    padding-left: 30px;
  }
  /* 文章内容的容器 三图 */
  .article_list_wrap_three {
    height:128px;
    padding: 34px 0;
  }

  /* 标题内容 */
  .article_list_wrap_three .article_list_title {
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(58, 58, 58, 1);
    line-height: 48px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .article_list_wrap_three .article_list_pic_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  /* 一个图片样式 */
  .article_list_wrap_three.one {
    position: relative;
  }
  .article_list_wrap_three.one .article_list_pic_wrap {
    position: absolute;
    right: 0;
    top: 14px;
    width: 260px;
  }
  .article_list_wrap_three .article_list_ctx_wrap,
  .article_list_wrap_three .article_list_info_wrap {
    margin-right: 270px;
  }
  .article_list_wrap_three .article_list_pic {
    width: 230px;
    height: 168px;
  }


  /* 阅读量和日期的容器 */
  .article_list_wrap_three .article_list_info_wrap {
    display: flex;
    flex-direction: row;
    justify-content: start;
  }

  /* 阅读量 */
  .article_list_wrap_three .read_num {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(144, 144, 144, 1);
  }

  /* 日期 */
  .article_list_wrap_three .push_date {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(144, 144, 144, 1);
    margin-left: 35px;
  }
}
</style>