<template>
  <div id="edu_teach">
    <el-row>
      <el-col>
        <!--首页图片-->
        <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">
            <el-row class="context_el-row">
              <el-col :span="2" :offset="1">
                <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
              </el-col>
              <el-col :span="3" class="context_name">通信工程系</el-col>
              <el-col :span="16">
                <hr class="context_hr">
              </el-col>
            </el-row>
            <el-row>
              <el-col class="name" :offset="1" :span="23">
                系主任
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>梁暄</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="name" :offset="1" :span="23">
                党支部书记
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>彭焕优</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="name" :offset="1" :span="23">
                实验室主任
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>谢绘谰</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="name" :offset="1" :span="23">
                教授(15人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
                <div>何翔翔</div>
                <div>孔阳阳</div>
                <div>邵岗贤</div>
                <div>田心心</div>
                <div>赖兴</div>
                <div>阎婧</div>
                <div>秦大毛</div>
                <div>程爱爱</div>
                <div>方浍溪</div>
                <div>胡乐乐</div>
                <div>戴竞</div>
                <div>锺心心</div>
                <div>戴竞</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="name" :offset="1" :span="23">
                副教授(17人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
                <div>何翔翔</div>
                <div>孔阳阳</div>
                <div>邵岗贤</div>
                <div>田心心</div>
                <div>赖兴</div>
                <div>阎婧</div>
                <div>秦大毛</div>
                <div>程爱爱</div>
                <div>方浍溪</div>
                <div>胡乐乐</div>
                <div>戴竞</div>
                <div>锺心心</div>
                <div>戴竞</div>
                <div>锺心心</div>
                <div>戴竞</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col class="name" :offset="1" :span="23">
                实验人员(2人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col class="name" :offset="1" :span="23">
                讲师/助理研究员(14人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
                <div>何翔翔</div>
                <div>孔阳阳</div>
                <div>邵岗贤</div>
                <div>田心心</div>
                <div>赖兴</div>
                <div>阎婧</div>
                <div>秦大毛</div>
                <div>程爱爱</div>
                <div>方浍溪</div>
                <div>胡乐乐</div>
                <div>戴竞</div>
                <div>锺心心</div>
              </el-col>
            </el-row>


            <el-row>
              <el-col class="name" :offset="1" :span="23">
                实验人员(2人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
              </el-col>
            </el-row>


            <el-row class="context_el-row">
              <el-col :span="2" :offset="1">
                <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
              </el-col>
              <el-col :span="5" class="context_name">自动化与智能工程系</el-col>
              <el-col :span="14">
                <hr class="context_hr">
              </el-col>
            </el-row>


            <el-row>
              <el-col class="name" :offset="1" :span="23">
                系主任
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>梁暄</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col class="name" :offset="1" :span="23">
                党支部书记
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>彭焕优</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col class="name" :offset="1" :span="23">
                教授(15人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
                <div>何翔翔</div>
                <div>孔阳阳</div>
                <div>邵岗贤</div>
                <div>田心心</div>
                <div>赖兴</div>
                <div>阎婧</div>
                <div>秦大毛</div>
                <div>程爱爱</div>
                <div>方浍溪</div>
                <div>胡乐乐</div>
                <div>戴竞</div>
                <div>锺心心</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="name" :offset="1" :span="23">
                副教授(17人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
                <div>何翔翔</div>
                <div>孔阳阳</div>
                <div>邵岗贤</div>
                <div>田心心</div>
                <div>赖兴</div>
                <div>阎婧</div>
                <div>秦大毛</div>
                <div>程爱爱</div>
                <div>方浍溪</div>
                <div>胡乐乐</div>
                <div>戴竞</div>
                <div>锺心心</div>
                <div>戴竞</div>
                <div>锺心心</div>
                <div>戴竞</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col class="name" :offset="1" :span="23">
                实验人员(2人)
              </el-col>
            </el-row>
            <el-row>
              <el-col class="text" :offset="1" :span="23">
                <div>锺心心</div>
                <div>文荭潇</div>
              </el-col>
            </el-row>

          </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;

    .context_el-row {
      margin-top: 2rem;

      .context_img {
        width: 2.2rem;
      }

      .context_name {
        font-size: 1.6rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1956BC;
        line-height: 2.2rem;
      }

      .context_hr {
        line-height: 2.2rem;
        margin-top: 1.1rem;
        border: #1956BC solid 0.1rem;
      }
    }

    .name {
      margin-top: 2rem;
      font-size: 1.4rem;
      font-weight: 600;
      color: #1956BC;
    }

    .text {
      font-size: 1.2rem;
      color: #3C3C3C;
      clear: left;
      //@media (max-width: 980px) and (min-width: 980px) {
      //  float: left;
      //}
      //
      //@media screen and (max-width: 980px) {
      //
      //}
      div {
        float: left;
        margin-top: .4rem;
        width: 7.4%;
      }
    }
  }
}
</style>
