<template>
  <div class="news-box">
      <div class="news-box-title">
        <div class="title-1">{{$t('heading.HText_1')}}</div>
        <div class="title-2" @click="$router.push({path:'/News'})">
          <div class="title-text">{{$t('btn.btnText_1')}}</div>
          <img src="../../../../../assets/forestage/img/m-toRight.png" alt="">
        </div>
      </div>

      <div class="news-list">
        <div class="list-box" v-for="(item,i) in list1" :key="i" @click="goToUrl(item)">
          <img :src="item.image" alt="">
          <div class="list-title">{{item.title}}</div>
          <div class="list-box-xian"></div>
          <div class="list-foot">
            <span class="news-time">{{item.created_at}}</span>
            <i class="el-icon-my-arrow-right"></i>
          </div>
        </div>
        <div class="list-box" v-for="(item,index) in list2" @click="goToUrl(item)">
          <img :src="item.image" alt="">
          <div class="list-title">{{item.title}}</div>
          <div class="list-box-xian"></div>
          <div class="list-foot">
            <span class="news-time">{{item.created_at}}</span>
            <i class="el-icon-my-arrow-right"></i>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import mixinsHomeNews from '@/mixins/forestage/homeNews.js'
  export default {
    mixins: [mixinsHomeNews],
  }
</script>

<style scoped lang="scss">
  .news-box{
    box-sizing: border-box;
    padding: 0 81.92px;
    margin-top: 153.6px;
    .news-box-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-1{
        color: #333333;
        font-size: 102.4px;
      }
      .title-2{
        display: flex;
        .title-text{
          color: #999;
          font-size: 71.68px;
          margin-top: 10px;
        }
        img{
          width: 33.1264px;
          height: 61.5936px;
          margin-left: 40px;
          margin-top: 15px;
        }
      }
    }

    .news-list{
      min-height: 400px;
      .list-box{
        margin-top: 76.8px;
        height: 1945.6px;
        background: #fff;
        border-radius: 30.72px;
        img{
          width: 100%;
          height: 1280px;
          border-top-left-radius:30.72px;
          border-top-right-radius:30.72px;
        }
        .list-title{
          height: 270.6px;
          margin: 0 81.92px 0 81.92px;
          padding-top: 81.92px;
          // border-bottom: 1px solid #E2E2E2;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          word-break: break-all;
          font-size: 81.92px;
        }
        .list-box-xian{
          margin: 0 81.92px;
          height: 0.75px;
          background: #E2E2E2;
          margin-top: 45px;
        }
        .list-foot{
          display: flex;
          justify-content: space-between;
          margin-top: 81.92px;
          padding: 0 81.92px;
          .news-time{
            color: #666666;
            font-size: 61.44px;
          }
        }
      }
    }
  }
</style>
