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

<template>
  <div class="announcements">
    <el-row>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <div class="headline">
          <div class="line_left">
            <img src="../../../assets/index/announcements/gang1.png" alt="">
          </div>
          <div class="title">
            通知公告
          </div>
          <div class="line_right">
            <img src="../../../assets/index/announcements/gang2.png" alt="">
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <el-row justify="space-between">
          <el-col :span="1">
            <div class="grid-content"></div>
          </el-col>
          <el-col :span="6">
            <div class="announcements_text">
              <div class="announcements_text_line_time">
                <div class="announcements_text_line_time_btime">27</div>
                <div class="announcements_text_line_time_stime">2022-09</div>
              </div>
              <div class="announcements_text_line"></div>
              <div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
              <div class="announcements_text_content">
                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content"></div>
          </el-col>
          <el-col :span="6">
            <div class="announcements_text">
              <div class="announcements_text_line_time">
                <div class="announcements_text_line_time_btime">27</div>
                <div class="announcements_text_line_time_stime">2022-09</div>
              </div>
              <div class="announcements_text_line"></div>
              <div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
              <div class="announcements_text_content">
                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content"></div>
          </el-col>
          <el-col :span="6">
            <div class="announcements_text">
              <div class="announcements_text_line_time">
                <div class="announcements_text_line_time_btime">27</div>
                <div class="announcements_text_line_time_stime">2022-09</div>
              </div>
              <div class="announcements_text_line"></div>
              <div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
              <div class="announcements_text_content">
                为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
              </div>
            </div>
          </el-col>
          <el-col :span="1">
            <div class="grid-content"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <div class="more">
          <span class="more_text">更多</span>
          <img src="../../../assets/index/news_center/gd_icon.png" alt="">
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "announcements"
};
</script>

<style scoped lang="scss">
/deep/ .el-col-1 {
  width: 6%;
}

.announcements {
  background-image: url("../../../assets/index/announcements/sy_bj3.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 54.2rem;

  .headline {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 6.3rem;
    padding-bottom: 5.6rem;

    .line_left {
      line-height: 4.4rem;
    }

    .title {
      width: 12.9rem;
      height: 4.4rem;
      font-size: 3.1rem;
      font-weight: 500;
      color: #0049AE;
      letter-spacing: .1rem;
      margin: 0 1.3rem;
    }

    .line_right {
      line-height: 4.4rem;
    }
  }

  .announcements_text {
    &:hover {
      box-shadow: 0px 8px 11px 0px rgba(0, 73, 174, 0.5);
    }

    //width: 30.4%;
    //height: 26.3rem;
    background: #FFFFFF;
    border-radius: 1.3rem;
    padding: 3.9rem 3.3rem;

    &_line_time {
      display: flex;

      &_btime {
        height: 4.1rem;
        font-size: 3.1rem;
        font-weight: bold;
        color: #0049AE;
        letter-spacing: .1rem;
      }

      &_stime {
        font-size: 1.3rem;
        font-weight: 500;
        color: #0049AE;
        margin-top: 1.5em;
        line-height: 1.8rem;
      }
    }

    &_line{
      //width: 216px;
      width: 100%;
      height: .2rem;
      background: linear-gradient(240deg, rgba(0,77,175,0) 0%, rgba(0,77,174,0.67) 47%, #004DAE 100%);
      margin-bottom: 2.3rem;
    }
    &_title{
      width: 100%;
      height: 3.8rem;
      font-size: 1.4rem;
      font-weight: 500;
      color: #0049AF;
      line-height: 1.9rem;
      letter-spacing: .1rem;
      margin-bottom: .6rem;
    }
    &_content{
      width: 100%;
      height: 7rem;
      font-size: 1rem;
      font-weight: 500;
      color: #777777;
      line-height: 1.8rem;
      letter-spacing: .1rem;
    }
  }
  .more {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 2.3rem;
    margin-top: 2.6rem;
    .more_text {
      font-size: 1.6rem;
      font-weight: 500;
      color: #8B8B8B;
      letter-spacing: .2rem;
    }

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

</style>