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

<template>
  <div class="undergraduate_and_graduate">
    <el-row>
      <el-col :span="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="14">
        <el-row class="undergraduate_and_graduate_bgc">
          <el-col :span="12">
            <div class="undergraduate headline">
              <img src="../../../assets/index/undergraduate_and_graduate/benka.png" alt=""/>
              <span>本科教育</span>
            </div>
            <div class="vline">
              <div class="undergraduate_content">
                <div class="undergraduate_content_time">
                  10-03
                </div>
                <div class="undergraduate_content_text">
                  徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
                </div>
              </div>
              <div class="undergraduate_content">
                <div class="undergraduate_content_time">
                  10-03
                </div>
                <div class="undergraduate_content_text">
                  徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
                </div>
              </div>
              <div class="undergraduate_content">
                <div class="undergraduate_content_time">
                  10-03
                </div>
                <div class="undergraduate_content_text">
                  徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
                </div>
              </div>
              <div class="undergraduate_content">
                <div class="undergraduate_content_time">
                  10-03
                </div>
                <div class="undergraduate_content_text">
                  徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
                </div>
              </div>
              <div class="undergraduate_content">
                <div class="undergraduate_content_time">
                  10-03
                </div>
                <div class="undergraduate_content_text">
                  徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
                </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-col :span="12">
            <div class="graduate headline">
              <img src="../../../assets/index/undergraduate_and_graduate/boshimaobeifen.png" alt=""/>
              <span>研究生教育</span>
            </div>
            <div class="undergraduate_content">
              <div class="undergraduate_content_time">
                10-03
              </div>
              <div class="undergraduate_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="undergraduate_content">
              <div class="undergraduate_content_time">
                10-03
              </div>
              <div class="undergraduate_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="undergraduate_content">
              <div class="undergraduate_content_time">
                10-03
              </div>
              <div class="undergraduate_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="undergraduate_content">
              <div class="undergraduate_content_time">
                10-03
              </div>
              <div class="undergraduate_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="undergraduate_content">
              <div class="undergraduate_content_time">
                10-03
              </div>
              <div class="undergraduate_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="more">
              <span class="more_text">更多</span>
              <img src="../../../assets/index/news_center/gd_icon.png" alt="">
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

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

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

  &_bgc {
    background-color: #fff;
    height: 33.8rem;
    margin-top: 8.1rem;
  }

  .headline {
    display: flex;
    background: #004AAF;
    height: 5.6rem;
    margin-bottom: 3.1rem;

    img {
      margin: 1.2rem 1.5rem 1.2rem 4.4rem;
    }

    span {
      //width: 129px;
      //height: 44px;
      font-size: 3.1rem;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 4.4rem;
      letter-spacing: .1rem;
    }
  }
  .vline {
    border-right: 1px solid #CCCCCC;
  }
  .undergraduate {
    border-radius: 36px 0 0 0;
    &_content {
      display: flex;
      margin-bottom: 1.5rem;

      &_time {
        //width: 38px;
        //height: 18px;
        font-size: 1.3rem;
        font-weight: 500;
        color: #0D52B3;
        line-height: 2.3rem;
        margin-right: 1.5rem;
        margin-left: 2.1rem;
      }

      &_text {
        &:hover {
          color: #0D52B3;
        }

        width: 81%;
        //height: 23px;
        font-size: 1.6rem;
        font-weight: 500;
        color: #000000;
        line-height: 2.3rem;
      }
    }

  }

  .more {
    width: 100%;
    display: flex;
    height: 2.3rem;
    margin-top: 3.1rem;
    margin-left: 2.1rem;
    cursor: pointer;
    .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;
    }
  }

  .graduate {
    border-radius: 0 36px 0 0;
  }
}
</style>