<template>
  <div>
    <ul>
      <template v-for="(item, index) in data">
        <li :key="index" @click="goPage(item.source)">
          <img :src="item.photo_uri" alt="">
          <div class="right-txt">
            <div class="title">{{ item.title }}</div>
            <div class="cont-txt">{{ item.summary }}</div>
            <div class="time">{{ item.updated_time }}</div>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'newsList',
    props: {
      data: {
        type: Array,
        default: {}
      }
    },
    methods: {
      goPage(url) {
        window.open(url)
      }
    }
  }
</script>
<style lang="scss" scoped>
ul{
  width: 100%;
  // width: 700px;
  li{
    cursor: pointer;
    display: flex;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
    &:nth-child(1){
      padding-top: 0;
    }
    img{
      width: 218px;
      height: 145px;
    }
    .right-txt{
      margin-left: 20px;
      .title{
        font-size: 16px;
        font-weight: bold;
        color: #303030;
        line-height: 22px;
      }
      .cont-txt{
        // width: 461px;
        font-size: 14px;
        font-weight: bold;
        color: #ADADAD;
        line-height: 24px;
        margin-top: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .time{
        margin-top: 14px;
        font-size: 12px;
        font-weight: bold;
        color: #B6B6B6;
        line-height: 17px;
      }
    }
  }
}
</style>