sist_web/src/views/index/components/news_center.vue

<script src="../../../utils/sist.js"></script>
<template>
  <div class="news_center">
    <div class="headline">
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="title">
        {{ $t('message.news_ceter') }}
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>


    <!--录播图-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
        <div class="slideshow">
          <el-carousel trigger="click" height="23.3vw">
            <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
              <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
                <img :src="item.imgurl" alt="">
                <div class="bottom_title">
                  <el-row>
                    <el-col :offset="2" :span="18">
                      {{ item.title }}
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
                <img :src="item.imgurl" alt="">
                <div class="bottom_title">
                  <el-row>
                    <el-col :offset="2" :span="18">
                      {{ item.enTitle }}
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <!--轮播图下的新闻-->

    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
        <el-row class="news">
          <el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="news_context" @click="getArticle(news)">
              <div class="news_context_img">
                <img :src="news.imgurl" alt="">
              </div>
              <div class="news_context_text">
                {{ news.title }}
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!--更多-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
        <div class="grid-content"></div>
      </el-col>
      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
        <div class="more" @click="lookMore(newsDate[0])">
          {{ $t('message.more') }}
        </div>
<!--        <div class="more_img">-->
<!--          <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
<!--        </div>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {banner, getArticleList} from "@/api";
import {toArticle,lookMoreComment} 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) {
      lookMoreComment(news,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;
}
</style>

<style scoped lang="scss">
@import '../css/comment.css';

.news_center {
  padding-bottom: 2rem;
}

.slideshow {
  width: 100%;

  .el-carousel__arrow {
    top: 93%;
    display: block;
  }

  .bottom_title {
    z-index: 99;
    width: 100%;
    height: 3.6vw;
    background: #1956BC;
    opacity: 0.89;
    position: absolute;
    bottom: 0;
    line-height: 3.6vw;
    font-size: 2rem;
    font-family: "微软雅黑";
    font-weight: 400;
    color: #FFFFFF;
  }

  img {
    width: 100%;
  }
}

.news {

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

  .news_context {
    cursor: pointer;
    width: 23rem;
    height: 23rem;
    margin: 3rem auto;
    border-radius: 1.4rem;
    border: 0.1rem solid #CAD9F3;

    .news_context_img {
      height: 62%;
      width: 100%;

      img {
        width: 100%;
      }
    }

    .news_context_text {
      height: 28%;
      width: 80%;
      font-size: 1.6rem;
      font-weight: 400;
      text-align: center;
      color: #262626;
      margin: 0 auto;
      padding: 1rem 0;
      text-overflow: ellipsis;
      overflow: hidden;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:3; //显示的行
    }
  }
}

@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>