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

<template>
  <div class="home">
    <div class="title">
      <Icon type="ios-home-outline" size="22" />
      <p><router-link to="/TeacherZone/ZonesHome">工作室首页</router-link></p><span>>名师课堂</span>
    </div>
    <div class="list-info">
      <h1 class="list-title">最新课例</h1>
      <div class="video">
        <div class="video_box">
          <div class="video_list">
            <div class="video_left">
              <img src="../../assets/image/resource/teach01.jpg" />
              <a target="_blank" href="/videodetails" class="playbtn1"></a>
              <h4 class="name">
                <a target="_blank" href="" style="color:#fff">选修3-1第二章恒定电流,电源和电流</a>
              </h4>
            </div>
            <ul class="video_right">
              <li class="video_more_list" v-for="item in video_list">
                <img :src="item.imgurl" />
                <a target="_blank" :href="item.url" class="playbtn1"></a>
                <h4 class="name_more">
                  <a target="_blank" :href="item.url" style="color:#fff">{{item.slogan}}</a>
                </h4>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="list-infos">
      <h1 class="list-title">微课课例</h1>
      <div class="video">
        <div class="video_box">
          <div class="video_list">
            <ul class="video_rights">
              <li class="video_more_list" v-for="item in video_lists">
                <img :src="item.imgurl" />
                <a target="_blank" :href="item.url" class="playbtn1"></a>
                <h4 class="name_more">
                  <a target="_blank" :href="item.url" style="color:#fff">{{item.slogan}}</a>
                </h4>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        video_list: [
          { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
          { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
          { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
          { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
        ],
        video_lists: [
          { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
          { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
          { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
          { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },

        ],
      }
    },
    methods: {
      viewDetails() {
        this.$router.push({ path: '/TeacherZone/TeachDetails' })

      },
      chooseTab() {
        this.info = this.data;
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 66%;
    height: 500px;
    position: absolute;
    top: 70%;
    left: 53%;
    transform: translate(-50%,-50%);
    float: left;
    /*display: inline-flex;*/
  }

  .title {
    font-size: 16px;
    text-align: left;
    font-weight: 600;
    width: 300px;
  }

    .title p {
      display: inline;
    }

  .list-info {
    margin-top: 35px;
    width: 90%;
    background: #fff;
    /* float: left; */
    /*margin-left: -24%;*/
    height: 450px;
    border: 1px solid #ededed;
  }
  .list-infos {
    margin-top: 35px;
    width: 90%;
    background: #fff;
    height:380px;
    border: 1px solid #ededed;
  }

  .list-title {
    float: left;
    height: 57px;
    line-height: 57px;
    font-size: 20px;
    margin-left: 10px;
    color: #288add;
    border-bottom: 1px solid #288add;
  }
  .video {
    margin-top: 7%;
    /* float: left; */
    /* display: inline; */
    background-color: #f3f3f3;
  }

  .video_box {
    background-color: #fff;
    margin: 0 auto;
    margin-top: 20px;
  }
 .video_name {
    float: left;
    line-height: 39px;
    border-bottom: #288add solid 1px;
    padding: 12px 5px 0px 5px;
    font-size: 24px;
    font-weight: normal;
    color: #288add;
  }

  /*i {
    float: left;
    margin: 22px 0px 0px 8px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: #8ea9b9;
    font-size: 14px;
    padding: 0px 10px;
    color: #fff;
  }*/

  .video_select {
    width: 30%;
    float: left;
    list-style: none;
    border-bottom: #ececec solid 1px;
  }

  .select_name {
    float: left;
    width: 15%;
    line-height: 39px;
    padding: 12px 5px 0px 5px;
    font-size: 14px;
    color: #6f8abb;
  }

  .select_name_more {
    float: left;
    width: 15%;
    padding: 0px 5px 0px 5px;
  }

  .video_list {
    width: 100%;
    /* float: left; */
    padding: 1.5%;
    display: flex;
  }

  .video_left {
    width: 50%;
    float: left;
    position: relative;
  }

    .video_left img {
      width: 100%;
    }

    .video_left:hover .playbtn1 {
      display: block;
    }

  .video_more_list:hover .playbtn1 {
    display: block;
  }

  .playbtn1 {
    position: absolute;
    top: 50%;
    left: 50%;
    background: url(../../assets/image/resource/play.png) no-repeat;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-left: -32px;
    display: none;
  }

  .name {
    position: absolute;
    bottom: 5px;
    left: 0px;
    width: 100%;
    font-weight: normal;
    line-height: 45px;
    font-size: 16px;
    background-color: rgba(52, 52, 52, .5);
    color: #fff;
  }

  .name_more {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    font-weight: normal;
    line-height: 35px;
    font-size: 14px;
    background-color: rgba(52, 52, 52, .5);
    color: #fff;
  }

  .video_right {
    width: 48%;
    float: left;
    list-style: none;
    margin-left: 2%;
  }
  .video_rights {
    width: 48%;
    float: left;
    list-style: none;
    margin-left: 2%;
    display: contents;
  }

  .video_more_list {
    width: 48%;
    float: left;
    position: relative;
    height: 170px;
    margin-top: 12px;
    margin: 0.5% 1%;
  }

    .video_more_list img {
      width: 100%;
      height: 170px;
    }
</style>