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><router-link to="/TeacherZone/ZonesHome">首页</router-link></li>
          <li><router-link to="/TeacherZone/TeachSource">教学资源</router-link></li>
          <li><router-link to="/TeacherZone/TeachResearch">课题研究</router-link></li>
          <li><router-link to="/TeacherZone/TeachTopclass">名师课堂</router-link></li>
          <li><router-link to="/TeacherZone/TeachClass">在线评课</router-link></li>
          <li><router-link to="/TeacherZone/TeachActivies">教研活动</router-link></li>
          <li><router-link to="/TeacherZone/TeachTopic">话题研讨</router-link></li>
        </ul>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </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: #FDB7AD;
    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;
  }
  .content{
    width:100%;
    min-height:1000px;
    background-color:#f9f9f9;
  }
</style>