<template>
  <div id="edu_teach">
    <el-row>
      <el-col :span="24">
        <!--首页图片-->
        <div class="top">
          <img src="@/assets/school_profile/bj123.png" alt="">
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
        <div class="grid-content"></div>
      </el-col>
      <el-col v-show="width>992" :md="6" :lg="6" :xl="4">
        <div class="left_lab">
          <div class="lab">
            <div class="lab_list lab_select">
              <div class="lab_img">
                <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
              </div>
              <div class="lab_title">
                教学督导
              </div>
            </div>
            <div class="lab_list">
              <div class="lab_img">
                <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
              </div>
              <div class="lab_title">
                本科教育
              </div>
            </div>
            <div class="lab_list">
              <div class="lab_img">
                <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
              </div>
              <div class="lab_title">
                研究生教育
              </div>
            </div>
            <div class="lab_list">
              <div class="lab_img">
                <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
              </div>
              <div class="lab_title">
                教学平台
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12" >
        <el-row>
          <el-col>
            <div class="tab">
              <router-link to="/">首页</router-link>
              <span> > </span>
              <router-link to="">教育教学</router-link>
              <span> > </span>
              <span style="color: #1956BC;font-size: 1.4rem">教学督导</span>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <!--正文内容-->
          <el-col class="context">
            <div class="tw">
              <el-row>
                <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                  <div class="tw_img">
                    <img src="@/assets/index/teaching_student/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
            </div>
            <div class="tw">
              <el-row>
                <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                  <div class="tw_img">
                    <img src="@/assets/index/teaching_student/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
            </div>
            <div class="tw">
              <el-row>
                <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                  <div class="tw_img">
                    <img src="@/assets/index/teaching_student/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
            </div>
            <div class="tw">
              <el-row>
                <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
                  <div class="tw_time">
                    <div class="tw_top">
                      28
                    </div>
                    <div class="tw_bottoms">
                      2021-10
                    </div>
                  </div>
                </el-col>
                <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
                  <div class="tw_context">
                    <div class="tw_context_title">
                      不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
                    </div>
                    <div class="tw_context_text">
                      为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
                    </div>
                  </div>
                </el-col>
                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                  <div class="tw_img">
                    <img src="@/assets/index/teaching_student/tw1.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <hr style="border: 0.1rem solid #E6E6E6;" class="hr">
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      width: document.documentElement.clientWidth
    }
  },
}
</script>

<style scoped lang="scss">

#edu_teach {
  .top {
    img {
      width: 100%;
    }
  }

  font-family: "微软雅黑";
  background: #F8F8F8;

  .left_lab {
    margin-left: 4rem;
    width: 22rem;
    height: 40rem;
    background: #1956BC;
    border-radius: 0rem 0rem 2rem 0rem;
    position: relative;

    .lab {
      font-size: 1.6rem;
      position: absolute;
      left: 4.8rem;
      top: 5rem;
      width: 19rem;
      margin-bottom: 3rem;
      background: #FFFFFF;
      box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(6, 42, 102, 0.67);
      border-radius: 0rem 0rem 2.5rem 2rem;

      .lab_list:last-child {
        border: none;
      }

      .lab_list {
        text-align: center;
        margin-left: 1rem;
        width: 18rem;
        height: 8rem;
        clear: left;
        line-height: 8rem;
        border-bottom: 0.1rem solid #94BCFF;

        .lab_img {
          margin-top: .2rem;
          float: left;
          width: 1.4rem;
          height: 1.4rem;
          display: none;
          margin-left: 4rem;
        }

        .lab_title {
          color: #1956BC;
          float: left;
          margin-left: 6rem;
        }
      }

      .lab_select {
        background: #94BCFF;

        .lab_img {
          display: block;
        }

        .lab_title {
          color: #FFFFFF;
          margin-left: .4rem;
        }
      }
    }

  }

  @media screen and (max-width: 980px) {
    .left_lab {
      margin-left: 3rem;
      width: 16.5rem;
      height: 30rem;

      border-radius: 0rem 0rem 1rem 0rem;

      .lab {
        left: 3.6rem;
        top: 3.75rem;
        width: 14.25rem;
        margin-bottom: 2.25rem;
        border-radius: 0rem 0rem 1.2rem 1rem;

        .lab_list {
          margin-left: .75rem;
          width: 13.5rem;
          height: 6rem;
          line-height: 6rem;
          .lab_img {
            margin-top: .1rem;
            width: 1.05rem;
            height: 1.05rem;
            display: none;
            margin-left: 3rem;
          }
          .lab_title {
            margin-left: 1.5rem;
          }
        }

      }
    }
  }

  .tab {
    margin-left: 1.9rem;
    margin-top: 1.5rem;
    font-weight: 400;

    a {
      text-decoration: none;
      font-size: 1.4rem !important;
      color: #3C3C3C;
    }
  }

  .context {
    margin: 3rem 2rem;
    padding-bottom: 3rem;
    //width: 84.3rem;
    background: #FFFFFF;

    .tw {
      margin-top: 4rem;
    }

    .tw_img{
      width: 100%;
      text-align: left;
      img{
        width: 90%;
      }
    }
    .tw_time {
      border-right: .3rem solid #D5D5D5;
      height: 10rem;
      width: 10rem;
      color: #1956BC;
      text-align: center;

      .tw_top {
        height: 8rem;
        width: 100%;
        line-height: 8rem;
        font-size: 5.2rem;
      }

      .tw_bottoms {
        height: 2rem;
        width: 100%;
        font-size: 1.4rem;
      }
    }

    .tw_context {

      font-family: PingFangSC-Medium, PingFang SC;
      color: #161616;


      .tw_context_title {
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //溢出用省略号显示
        white-space:nowrap; //溢出不换行
        font-size: 2rem;
        font-weight: 600;
        padding-right: 2rem;

      }

      .tw_context_text {
        margin-top: .8rem;
        font-size: 1.6rem;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp:3; //显示的行
      }
    }

    .title {
      font-size: 2.4rem;
      font-weight: 500;
      color: #1956BC;
      text-align: center;
    }

    .text {
      margin-top: 2rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: #3C3C3C;
    }
  }
}
</style>
