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

<template>
  <div class="news_center">
    <!--title-->
    <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="title">
          {{ $t('message.news_center') }}
        </div>
        <el-row>
          <el-col :span="9">
            <hr class="hr">
          </el-col>
          <el-col :span="6">
            <div class="divider_text">News Center</div>
          </el-col>
          <el-col :span="9">
            <hr class="hr">
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!--录播图-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
        <div class="slideshow">
          <el-carousel trigger="click" height="23.3vw">
            <el-carousel-item v-for="item in 4" :key="item">
              <div>
                <img src="@/assets/index/news_center/t1@2x.png" alt="">
                <div class="bottom_title">
                  <el-row>
                    <el-col :offset="2" :span="18">
                      {{ item }}喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
    <!--轮播图下的新闻-->

    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
        <el-row class="news">
          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="@/assets/index/news_center/t2.png" alt="">
              </div>
              <div class="news_context_text">
                信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="@/assets/index/news_center/t3.png" alt="">
              </div>
              <div class="news_context_text">
                “学党史 担使命”一班一品牌，班班展风采——信息科学与技术学院2020-2021…
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :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>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
            <div class="news_context">
              <div class="news_context_img">
                <img src="@/assets/index/news_center/t5.png" alt="">
              </div>
              <div class="news_context_text">
                “奋斗青春 梦想起航” 西南交通大学信息科学与技术学院2021级新生开学典礼
              </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">
          {{ $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>
export default {
  name: "news_center"
}
</script>

<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: PingFangSC-Regular, PingFang SC;
    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 {
    width: 23rem;
    height: 23rem;
    margin: 3rem auto;
    border-radius: 1.4rem;
    border: 0.1rem solid #CAD9F3;

    .news_context_img {
      height: 14rem;

      img {
        width: 100%;
      }
    }

    .news_context_text {
      font-size: 1.6rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
      margin: 1rem auto;
      width: 80%;
      height: 4rem;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:3; //显示的行
    }
  }
}

</style>