<template>
  <div class="academy_and_sciences">
    <el-row type="flex" justify="center">
      <el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="14" >
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="sciences_title">
              科学研究
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                徐加鹏博士学术后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学受限通信受限随系…
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                剑桥大学博士后李鹤博士后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学报： 异…
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                复旦大学蒋轶教授学术报告
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                徐加鹏博士学术报告-通信受士后李鹤博限随机系.受限…
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                剑桥大学博士后李鹤博士后李鹤博士 士学术学学报： 异…
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                复旦大学蒋轶教授学术报告
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
              </div>
            </div>
            <div class="sciences_content">
              <div class="sciences_content_time">
                10-03
              </div>
              <div class="sciences_content_text">
                徐加鹏博士学术报告-通信受士后李鹤博限随机系.受限…
              </div>
            </div>
            <div class="more">
              <span class="more_text">更多</span>
              <img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="academy_title">
              学术交流
            </div>
            <el-row>
              <el-col :span="11">
                <div class="academy_content" v-bind:style="{backgroundColor:bgColor}">
                  <div class="academy_content_icontime">
                    <div class="img" v-bind:style="{backgroundImage:'url('+iconbgc+')'}"></div>
                    <span>2022-10-08</span>
                  </div>
                  <div class="academy_content_title">
                    信息科学与技术学院开展英
                  </div>
                  <div class="academy_content_text">
                    为加强学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
                  </div>
                </div>
                <div class="academy_content" v-bind:style="{backgroundColor:bgColor}">
                  <div class="academy_content_icontime">
                    <div class="img" v-bind:style="{backgroundImage:'url('+iconbgc+')'}"></div>
                    <span>2022-10-08</span>
                  </div>
                  <div class="academy_content_title">
                    信息科学与技术学院开展英
                  </div>
                  <div class="academy_content_text">
                    为加强学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
                  </div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content"></div>
              </el-col>
              <el-col :span="11">
                <div class="academy_content" v-bind:style="{backgroundColor:bgColor}">
                  <div class="academy_content_icontime">
                    <div class="img" v-bind:style="{backgroundImage:'url('+iconbgc+')'}"></div>
                    <span>2022-10-08</span>
                  </div>
                  <div class="academy_content_title">
                    信息科学与学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021
                  </div>
                  <div class="academy_content_text">
                    为加强学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
                  </div>
                </div>
                <div class="academy_content" v-bind:style="{backgroundColor:bgColor}">
                  <div class="academy_content_icontime">
<!--                    <img :src="src" alt="">-->
                    <div class="img" v-bind:style="{backgroundImage:'url('+iconbgc+')'}"></div>
                    <span>2022-10-08</span>
                  </div>
                  <div class="academy_content_title">
                    信息科学与技术学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021
                  </div>
                  <div class="academy_content_text">
                    为加强学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="more">
              <span class="more_text">更多</span>
              <img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "academy_and_sciences",
  data(){
    return{
      bgColor:'rgba(10, 81, 174, 0.89)',
      iconbgc:require('../../../assets/index/academy_and_sciences/shijian3.png')
    }
  }
};
</script>

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

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

  .sciences_title, .academy_title {
    display: flex;
    width: 18rem;
    height: 5.9rem;
    line-height: 5.9rem;
    border-radius: 1.3rem 0 0 1.3rem;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: .1rem;
    color: #FFFFFF;
    text-align: left;
    background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
    padding-left: 1.9rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .sciences_content {
    display: flex;
    margin-bottom: 1.6rem;

    &_time {
      //width: 38px;
      //height: 18px;
      font-size: 1.3rem;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 2.3rem;
      margin-right: 1.4rem;
    }

    &_text {
      width: 81%;
      //height: 23px;
      font-size: 1.6rem;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 2.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 1; //显示的行
    }
  }

  .more {
    width: 100%;
    display: flex;
    height: 2.3rem;
    margin-top: 3.4rem;
    margin-bottom: 3rem;
    cursor: pointer;
    .more_text {
      font-size: 1.6rem;
      font-weight: 500;
      color: #FFFFFF;
      letter-spacing: .2rem;
    }

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

  .academy_content {
    &:hover {
      box-shadow: 0 8px 11px 0 rgba(0, 73, 174, 0.5);
      background: #FFFFFF;
      color: #0049AF;
    }
    padding: 2.5rem 2.3rem;
    //background: ;
    border-radius: 16px;
    margin-bottom: 1.9rem;
    color: #FFFFFF;
    &_icontime {
      display: flex;
      margin-bottom: 1.1rem;
      .img {
        background-size: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .9rem;
      }

      span {
        //width: 79px;
        //height: 18px;
        font-size: 1.3rem;
        font-weight: 500;

        line-height: 1.85rem;
      }
    }

    &_title {
      //width: 139px;
      width: 100%;
      //height: 38px;
      font-size: 1.4rem;
      font-weight: 500;
      //color: #FFFFFF;
      line-height: 1.9rem;
      letter-spacing: .1rem;
      margin-bottom: .6rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 1; //显示的行
    }

    &_text {
      //width: 139px;
      width: 100%;
      //height: 41px;
      font-size: 1rem;
      font-weight: 500;
      //color: #FFFFFF;
      line-height: 1.4rem;
      letter-spacing: .1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 3; //显示的行
    }
  }
}
</style>
