TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/TeacherZones.vue

<template>
  <div class="zone">
    <div class="banner">
      <div class="w1200">
        <p>李朝华高中物理名师网络工作室</p>
      </div>
    </div>
    <div class="item-nav">
      <div class="w1200">
        <ul class="nav-li">
          <li><a href="/index.php?r=studio/index/index&amp;sid=642" class="stair">首页</a></li>
          <li>
            <a href="index.php?r=studio/resources&amp;sid=642" title="教学资源">教学资源</a>
          </li>
          <li>
            <a href="index.php?r=studio/research/lists&amp;sid=642" title="课题研究">课题研究</a>
          </li>
          <li>
            <a href="index.php?r=studio/class/index&amp;sid=642" title="名师课堂">名师课堂</a>
          </li>
          <li>
            <a href="index.php?r=studio/classevaluation/index&amp;sid=642" title="网上评课">网上评课</a>
          </li>
          <li>
            <a href="/index.php?r=studio/activies/list&amp;sid=642&amp;cid=15674" title="教研活动">教研活动</a>
          </li>
          <li>
            <a href="index.php?r=studio/topic/index&amp;sid=642" title="话题研讨">话题研讨</a>
          </li>
        </ul>

      </div>
    </div>
    <div  class="content-box w1200">
      <div class="left-side">
        <div class="brife">
          <div class="my-brief ">
            <div class="brief_header">
              <em class="fl">工作室简介</em><a href="/index.php?r=studio/intro/index&amp;sid=642" class="more fr"></a>
            </div>
            <div class="brief_con ">
              <div class="peo_info ">
                <span class="ava">
                  <img src="../../assets/image/resource/touxiang_01.jpeg" alt="">
                </span>
                <div class="info">
                  <h1 title="李朝华">李朝华</h1>
                  <p class="sub c555">高中物理</p>
                </div>
              </div>
              <div class="source_info">
                <ul>
                  <li><span>322</span><p>成员</p></li>
                  <li><span>17949</span><p>资源</p></li>
                  <li><span>253</span><p>文章</p></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="statistics"  style="z-index: 98;">
          <div class="ms_statistics">
            <div class=" statistics_header"><p class="fl">统计</p></div>
            <div class="statistics_con con_box">
              <ul class="statistics_list">
                <li class="icon_1 f16">
                  <i class="num">成员数</i><em class="c888">322</em>
                </li>
                <li class="icon_2 f16">
                  <i class="num">文章数</i><em class="c888">253</em>
                </li>
                <li class="icon_3 f16">
                  <i class="num">资源数</i><em class="c888">17949</em>
                </li>
                <li class="icon_4 f16">
                  <i class="num">课题研究数</i><em class="c888">0</em>
                </li>
                <li class="icon_5 f16">
                  <i class="num">名师课堂数</i><em class="c888">233</em>
                </li>
                <li class="icon_6 f16">
                  <i class="num">教研活动数</i><em class="c888">0</em>
                </li>

              </ul>
            </div>
          </div>
        </div>
      </div>
      </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    }
  }
</script>
<style scoped>
  .zone{
    width:100%;
  }
  .banner {
    height: 340px;
    background: url('../../assets/image/resource/banner-t.jpg') center center no-repeat;
  }
  .w1200 {
    width: 1200px;
    margin: 0 auto;
  }
  .banner p {
    position: absolute;
    left: 30px;
    top: 15px;
    color: #fff;
    font-size: 50px;
  }
  .item-nav {
    background: #0099ff;
    height: 60px;
    line-height: 60px;
  }
  .nav-li {
    float: left;
    list-style: none;
  }
  .nav-li li {
    float: left;
    position: relative;
  }
  .item-nav a {
    font-size: 16px;
    line-height: 60px;
    height: 60px;
    width: 120px;
    display: block;
    text-align: center;
    color:#fff;
  }

  .left-side {
    width: 280px;

  }
  .brife {
    border: 2px solid #e0e0e0;
    margin-top: 20px;
  }
  .my-brief {
    padding: 15px 17px;
    background: #fff;
  }

  .brief_header {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 1px;
    overflow: hidden;
  }
    .brief_header em {
      font-size: 20px;
      color: #222;
      border-bottom: 2px solid #86c8ff;
      padding: 0 5px;
    }
    .brief_header.more {
      width: 20px;
      height: 20px;
      display: inline-block;
      margin-top: 10px;
    }
  .peo_info {
    display: block;
  
  }
    .peo_info .ava {
      margin-top: 27px;
      position: relative;
      margin-right: 15px;
      margin-left: 20px;
    }
 .peo_info .ava img {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin-top:10%;
  }
  .info {
    margin-top: -30%;
    /* display: block; */
    margin-left: 56%;
  }
 .info h1 {
        color: #222;
        font-size: 24px;
      }
  .info p {
    color: #555;
    font-size: 15px;
    margin-top: 8px;
  }
  .source_info {
    margin-top: 30px;
  }
  .source_info li {
    text-align: center;
    background: url('../../assets/image/resource/right.png') right center no-repeat;
    width: 75px;
    list-style:none;
    display:inline-block;
  }

  .source_info span {
    color: #4b4b4b;
    font-size: 24px;
    display: block;
  }
 .source_info p {
    color: #9b9b9b;
    font-size: 14px;
    display: block;
    margin-top: 5px;
  }
  .statistics {
    border: 1px solid #e0e0e0;
    padding: 15px 17px;
    background: #fff;
    margin-top: 20px;
  }
  .statistics_header {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 1px;
    overflow: hidden;
  }
    .statistics_header p {
      font-size: 20px;
      color: #222;
      border-bottom: 2px solid #86c8ff;
      padding: 0 5px;
      font-style: normal
    }
  .statistics_list {
    padding-bottom: 27px;
    height: 560px;
    list-style:none;
  }
  .icon_1 {
    background-position: left 18px;
    height: 60px;
    line-height: 60px;
    /*background: url(../../images/teacherSky_4.0/tj_icon.png) left 18px no-repeat;*/
    padding-left: 55px;
    border-bottom: 1px dashed #ebebeb;
    font-size: 16px;
 
  }
  .statistics_list li num {
    width: 100px;
    display: inline-block;
    font-style: normal;
  }
  .statistics_list li em {
    width: 60px;
    display: inline-block;
    text-align: right;
    color: #888888;
    font-style: normal;
  }
  .icon_2 {
    background-position: left 18px;
    height: 60px;
    line-height: 60px;
    /*background: url(../../images/teacherSky_4.0/tj_icon.png) left 18px no-repeat;*/
    padding-left: 55px;
    border-bottom: 1px dashed #ebebeb;
    font-size: 16px;
  }
  .icon_3 {
    background-position: left 18px;
    height: 60px;
    line-height: 60px;
    /*background: url(../../images/teacherSky_4.0/tj_icon.png) left 18px no-repeat;*/
    padding-left: 55px;
    border-bottom: 1px dashed #ebebeb;
    font-size: 16px;
  }
  .icon_4 {
    background-position: left 18px;
    height: 60px;
    line-height: 60px;
    /*background: url(../../images/teacherSky_4.0/tj_icon.png) left 18px no-repeat;*/
    padding-left: 55px;
    border-bottom: 1px dashed #ebebeb;
    font-size: 16px;
  }
  .icon_5 {
    background-position: left 18px;
    height: 60px;
    line-height: 60px;
    /*background: url(../../images/teacherSky_4.0/tj_icon.png) left 18px no-repeat;*/
    padding-left: 55px;
    border-bottom: 1px dashed #ebebeb;
    font-size: 16px;
  }
  .icon_6{
    background-position: left 18px;
    height: 60px;
    line-height: 60px;
    /*background: url(../../images/teacherSky_4.0/tj_icon.png) left 18px no-repeat;*/
    padding-left: 55px;
    border-bottom: 1px dashed #ebebeb;
    font-size: 16px;
  }
</style>