<template>
  <div class="news-container flex-vh">
    <div class="warp-block">
      <div class="inner-block flex-vc">
        <h2 class="heading">
          <span class="h-text">{{$t('heading.HText_1')}}</span>
        </h2>
        <div class="more-btn flex-vh mouse-poi" @click="$router.push({path:'/News'})">{{$t('btn.btnText_1')}}</div>
      </div>
      <ul class="list-region ul flex-vc">
        <li class="list_1 mouse-poi list list-hover_1" v-for="item,index in list1" :key="index" @click="goToUrl(item)">
          <div class="img-block">
            <el-image :src="item.image" fit="cover" class="img_1 position-vh"></el-image>
          </div>
          <div class="warp-content">
            <p class="summary row-hidden_2">
              <span class="row-hidden_2">{{item.title}}</span>
            </p>
            <div class="content-bottom flex-vc">
              <span class="news-time">{{item.created_at}}</span>
              <i class="el-icon-my-arrow-right"></i>
            </div>
          </div>
        </li>
      </ul>
      <ul class="list-container ul flex-vc">
        <li class="list_2 mouse-poi list list-hover_2" v-for="item,index in list2" :key="index" @click="goToUrl(item)">
          <div class="img-block">
            <el-image :src="item.image" fit="cover" class="img_2 position-vh"></el-image>
          </div>
          <div class="warp-content">
            <p class="summary row-hidden_2">
              <span class="row-hidden_2">{{item.title}}</span>
            </p>
            <div class="content-bottom flex-vc">
              <span class="news-time">{{item.created_at}}</span>
              <i class="el-icon-my-arrow-right"></i>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import mixinsHomeNews from '@/mixins/forestage/homeNews.js'
export default {
  name: 'News',
  mixins: [mixinsHomeNews],
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.news-container {
  color: #333333;
  padding-top: 119px;
}


.inner-block {
  position: relative;
  justify-content: space-between;
  width: 1200px;
  height: 88px;

  &::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 4px;
    border-bottom: 4px solid #1B74E5;
  }

  .heading {
    height: 100%;
    vertical-align: top;

    .h-text {
      font-size: 40px;
      font-weight: 600;
    }


  }

  .more-btn {
    width: 102px;
    height: 40px;
    font-size: 16px;
    border: 1px solid #999999;
    border-radius: 6px;

    &:hover {
      background-color: #1B74E5;
      color: #ffffff;
    }

    &:active {
      color: #ffffff;
      background-color: #1466d1;
    }
  }

}

.ul {
  .list {
    &:hover {
      background-color: #1B74E5;

      .news-time {
        color: #fff;
      }

      .row-hidden_2 {
        color: #fff;
      }

      .el-icon-my-arrow-right {
        color: #fff;
      }

      .summary {
        border-bottom: 1px solid #fff;
      }
    }
  }

  .warp-content {
    padding: 0 30px;

    .summary {
      height: 45px;
      padding: 30px 0;
      font-size: 20px;
      border-bottom: 1px solid #E2E2E2;
      line-height: 1.2;
    }
  }

  .content-bottom {
    padding: 30px 0;
    font-size: 14px;
    justify-content: space-between;

    .el-icon-my-arrow-right {
      font-size: 20px;
      color: #999999;
    }

    .news-time {
      color: #666666;
    }
  }
}

.list-region {
  justify-content: space-between;
  margin-top: 60px;
}

.list_1 {
  width: 585px;

  background-color: #fff;
  border-radius: 0px 0px 2px 2px;
  overflow: hidden;



  .img-block {
    position: relative;
    width: 100%;
    height: 425px;
    overflow: hidden;

    .img_1 {
      width: 100%;
      height: 100%;
      transition: all 0.3s;
      :deep(img){
        border-radius: 2px 2px 0px 0px;
      }
    }
  }
}

.list-hover_1 {
  &:hover {
    .img_1 {
      width: 610px;
      height: 440px;
      transition: all 0.3s;
    }
  }
}

.list-container {
  margin-top: 30px;
}

.list_2 {
  width: 380px;
  margin-right: 30px;
  background-color: #fff;
  border-radius: 0px 0px 2px 2px;
  overflow: hidden;

  &:last-child {
    margin-right: 0;
  }

  .img-block {
    position: relative;
    width: 100%;
    height: 276px;
    overflow: hidden;

    .img_2 {
      width: 100%;
      height: 100%;
      transition: all 0.3s;
      :deep(img){
        border-radius: 2px 2px 0px 0px;
      }
    }
  }
}

.list-hover_2 {
  &:hover {
    .img_2 {
      width: 400px;
      height: 290px;
      transition: all 0.3s;
    }
  }
}
</style>
