<template>
  <div>
    <div class="news">
      <el-row :gutter="38">
        <el-col :span="12">
          <div class="news__header">
            <div class="news__header--diamond">热点资料</div>
            <div class="news__header--line"></div>
          </div>

          <ul class="news__list">
            <li class="news__list--item">教育部关于公布《高等学校信息公开事项清单》的通知</li>
            <li class="news__list--item">高等学校信息公开办法（教育部令第29号）</li>
            <li class="news__list--item">苏州卫生职业技术学院信息公开实施办法（试行）</li>
            <li class="news__list--item">苏州卫生职业技术学院信息公开实施办法（试行）</li>
            <li class="news__list--item"> 苏州卫生职业技术学院信息公开实施办法（试行）</li>
          </ul>
        </el-col>

        <el-col :span="12">
          <div class="news__header">
            <div class="news__header--diamond">最新资料</div>
            <div class="news__header--line"></div>
          </div>

          <ul class="news__list">

          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  computed: {},
}
</script>

<style scoped lang="scss">
.news {

  padding: 33px 18.75% 38px 18.75%;

  &__header {
    display: flex;
    align-items: flex-end;

    &--diamond {
      width: 108px;
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      text-align: center;

      z-index: 1;
      position: relative;
      &::before {
        content: "";
        width: 100%;
        height: 100%;
        background: #cad8e4;
        transform: skewX(20deg);

        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
      }
      &::after {
        content: "";
        width: 100%;
        height: 100%;
        background: #3c7ac0;
        transform: skewX(-20deg);

        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    &--line {
      flex: 1;
      height: 1px;
      background: #C7D9E5;

      margin-left: 10px;
    }
  }
}
</style>
