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

<template>
  <div class="video">
    <div class="video_box">
      <div class="video_title"><div class="video_name">微课</div><i>2638</i></div>
      <ul class="video_select">
        <li class="select_name">语文</li>
        <li class="select_name">数学</li>
        <li class="select_name">英语</li>
        <li class="select_name">物理</li>
        <li class="select_name">化学</li>
        <li class="select_name_more"><Icon type="ios-more" size="16" /></li>
      </ul>
      <div class="video_list">
        <div class="video_left">
          <img src="../../assets/image/resource/video_img.jpg" />
          <a target="_blank" href="/videodetails" class="playbtn1"></a>
          <h4 class="name">
            <a target="_blank" href="" style="color:#fff">人教五上第五单元_列方程解决实际问题</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>
</template>
<script>
  export default {
    data() {
      return {
        video_list: [
          { "id": 1, "imgurl": require("../../assets/image/resource/video_img_one.jpg"), "slogan": '人教三上第四单元_三位数减三位...', "url": '/videodetails?id=1' },
          { "id": 2, "imgurl": require("../../assets/image/resource/video_img_two.jpg"), "slogan": '五上第七单元_在一条线段上植树', "url": '/videodetails?id=2' },
          { "id": 3, "imgurl": require("../../assets/image/resource/video_img_three.jpg"), "slogan": '人教一上第五单元_6和7的写法', "url": '/videodetails?id=3' },
          { "id": 4, "imgurl": require("../../assets/image/resource/video_img_four.jpg"), "slogan": '人教二上第四单元_2，3的乘法口诀', "url": '/videodetails?id=4' },
        ],
      }
    },
  }
</script>
<style scoped>
  .video {
    width: 100%;
    padding: 0% 11% 0% 11%;
    float: left;
    background-color: #f3f3f3;
  }
  .video_box {
    width:1200px;
    height:455px;
    background-color:#fff;
    margin:0 auto;
    margin-top:20px;
      
  }
  .video_title {
    width: 70%;
    float: left;
    padding-left: 30px;
    border-bottom: #ececec solid 1px;
  }
  .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%;
    height:400px;
    float:left;
    padding:1.5%;
  }
  .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_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>