<script src="../../../utils/sist.js"></script>
<template>
  <div class="news_center">
    <el-row>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <div class="headline">
          <div class="title">
            <!--        {{ $t("message.news_ceter") }}-->
            新闻中心
            <span class="vertica_line"></span>
            <div class="news_center_english">
              <span class="">NEWS</span>
              <span class="">CENTER</span>
            </div>
          </div>
          <div class="more">
            <span class="more_text">更多</span>
            <img src="../../../assets/index/news_center/gd_icon.png" alt="">
          </div>
        </div>
      </el-col>
    </el-row>

    <!--轮播图下的新闻-->
    <el-row type="flex" justify="center">
      <el-col :xs="22" :sm="22" :md="18" :lg="14" :xl="14" class="news">
        <el-row>
          <el-col :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="../../../assets/index/news_center/t4.png" alt="">
              </div>
              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
                <div class="news_context_text-title">信息引领，勇于拼领，勇于拼搏—信息搏…</div>
                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
                </div>
                <div class="news_context_time">
                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
                  <span class="time">2022-10-2</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="../../../assets/index/news_center/t4.png" alt="">
              </div>
              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
                </div>
                <div class="news_context_time">
                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
                  <span class="time">2022-10-2</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="../../../assets/index/news_center/t4.png" alt="">
              </div>
              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
                </div>
                <div class="news_context_time">
                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
                  <span class="time">2022-10-2</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="../../../assets/index/news_center/t4.png" alt="">
              </div>
              <div class="news_context_text">
                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
                </div>
                <div class="news_context_time">
                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
                  <span class="time">2022-10-2</span>
                </div>
                <div class="vline"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {banner, getArticleList} from "@/api";
import {toArticle, lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";

export default {
  name: "news_center",
  data() {
    return {
      newsDate: [],
      bannerDate: [],
      width: document.documentElement.clientWidth > 992
    };
  },
  created() {
    this.getList();
    this.getBanner();
  },
  methods: {
    clickTo(link) {
      //console.log(link)
      window.location.href = link;//当前标签页
    },
    getArticle(news) {
      toArticle(news, this.width);
    },
    lookMore(news) {
      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w", this.width);
    },
    getList() {
      getArticleList({
        type: "NEd5n92EMIpyyBslaNqsRgE",
        pageNum: 1,
        pageSize: 4
      }).then(res => {
        this.newsDate = res.rows;
      });
    },
    getBanner() {
      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
        this.bannerDate = res.data;
      });
    }
  }
};
</script>

<style>
.el-carousel__indicators {
  display: none;
}

.grid-content {
  height: 1px !important;
}
</style>

<style scoped lang="scss">
.news_center {
  background-image: url("../../../assets/index/news_center/sy_bj3.png");
  background-size: cover;
  background-repeat: no-repeat;
  //width: 100%;
  height: 61rem;

  .headline {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title {
      display: flex;
      width: 24rem;
      height: 5.9rem;
      line-height: 5.9rem;
      border-radius: 1.3rem 0 0 1.3rem;
      font-size: 3rem;
      font-weight: 500;
      letter-spacing: .1rem;
      color: #FFFFFF;
      text-align: left;
      background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
      padding-left: 1.9rem;
      margin-top: 6.3rem;

      .vertica_line {
        width: .1rem;
        height: 2.5rem;
        border: .1rem solid #FFFFFF;
        margin: 1.7rem 1.4rem;
      }

      .news_center_english {
        width: 5.3rem;
        height: 2.8rem;
        font-size: 1.3rem;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 1.4rem;
        margin-top: 1.6rem;

        span {
          float: left;
        }
      }
    }
  }

  .more {
    display: flex;
    height: 3.7rem;
    margin-top: 9.8rem;
    cursor: pointer;

    .more_text {
      font-size: 1.6rem;
      font-weight: 500;
      color: #8B8B8B;
      line-height: 2.3rem;
      letter-spacing: .2rem;
    }

    img {
      width: 2.9rem;
      height: 1.4rem;
      margin-left: 0.8rem;
      margin-top: .5rem;
    }
  }
}

.news {
  //width: 106.3rem;
  height: 60.4%;
  background-color: #fff;
  margin-top: 4rem;


  .news_context {
    cursor: pointer;
    //width: 28rem;
    width: 100%;
    height: 36.9rem;

    &:hover {
      box-shadow: 0 0 0.7rem 0 rgba(18, 69, 155, 0.59);
    }

    .news_context_img {

      height: 42.8%;
      width: 100%;
      overflow: hidden;

      img {
        &:hover {
          transform: scale(1.3);
        }

        width: 100%;
        transition: all 1s;
      }
    }

    //.news_context_text-title:last-child{
    //  border-right: 1px solid red;
    //}

    .news_context_text {
      margin: 4rem 0 4rem 2rem;
      padding-right: 2rem;
      //border-right: 1px solid #CCCCCC;
      .news_context_text-title {
        &:hover {
          color: #0040A4;
        }

        width: 100%;
        height: 2.1rem;
        font-size: 1.5rem;
        font-weight: 500;
        color: #262626;
        line-height: 2.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp: 1; //显示的行
      }

      .news_context_text-content {

        width: 100%;
        height: 5.3rem;
        font-size: 1.3rem;
        font-weight: 500;
        color: #777777;
        line-height: 1.8rem;
        letter-spacing: .1rem;
        margin-top: 1.6rem;
        margin-bottom: 2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp: 3; //显示的行
      }

      .news_context_time {
        display: flex;

        .icon {
          margin-right: .4rem;

          img {
            width: 1.1rem;
            height: 1.1rem;
          }
        }

        .time {
          width: 6rem;
          height: 1.4rem;
          font-size: 1rem;
          font-weight: 500;
          color: #0040A4;
          line-height: 1.4rem;
        }
      }

    }
  }
}

//@media screen and (min-width: 1100px) and (max-width: 1400px) {
//  .news_context {
//    width: 20rem !important;
//    height: 20rem !important;
//
//    .news_context_img {
//      height: 12.5rem !important;
//    }
//  }
//}

</style>
