TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/view/resource/resourceindex/videodetails.vue

<template>
  <div class="videodetails">
   <Header></Header>
    <div class="videodetails_box">
      <div class="videodetails_header">
        <div class="schCrumb">
          <a href="">学科资源</a>
        </div>
      </div>
      <div class="videodetails_left">
        <div class="pop_p_baseinfo pdlr15">
          <p class="xy_infotit c222">
            <a href="javascript:;" class="movie"></a>
            <span class="tit_a" :title="title">
              {{title}}
            </span>
          </p>
          <ul class="zy_info xy_ldetail f14 clearfix">
            <li><span class="t_tit"></span></li>
            <li class="mgl20 mgr5"><a class="admin_a" href="javascript:;">中央电教馆</a></li>
            <li class="c888">
              上传于<i class="c555 mgl5">2017-12-14</i>
            </li>
            <li class="mgr20 mgl20"><em class="c888 mgr5">1136</em>次播放</li>
            <li>
              暂无简介
            </li>
          </ul>
        </div>
        <div id="div_viecont" class="div_cont" style="width:937px;height:480px;margin-top: 30px; border: 1px solid #CFCFCF; padding: 0 0;">
          <div id="video">
            <div id="a1" style="background-color: rgb(0, 0, 0); width: 937px; height: 480px; cursor: pointer;"><video controls="controls" :src="videourl" id="ckplayer_a1" width="937" height="480"></video></div>
          </div>
        </div>
      </div>
      <div class="videodetails_right">
        <div class="m-otherVideo">
          <div class="tit clearfix">
            <h3 class="fl">相关微课</h3>
            <p class="fr">
              <a href="javascript:void(0)" class="prevBtn">向上</a>
              <a href="javascript:void(0)" class="nextBtn">向下</a>
            </p>
          </div>
          <div class="list-rect">
            <div class="rect">
              <ul class="clearfix" id="recML" style="top: 0px;">暂无推荐微课</ul>
            </div>
          </div>
        </div>
      </div>
      <div class="videodetails_footer">
        <div class="m-tag pdb30 learfix">
          <p class="z_tit1 pdr10">总体印象</p>
          <div class="tag-a"><a href="javascript:;" impressid="8d2e8bdb091d41b1a947cb81bd570e92" class="green1">内容充实(<i>1</i>)</a><a href="javascript:;" impressid="d2b48051161f40708c49e5b4af6f32a6" class="green1">原创精品(<i>1</i>)</a><a href="javascript:;" impressid="6c0ae2834d8d4c87aea55e5a62f67e31" class="green1">趣味性强(<i>1</i>)</a><a href="javascript:;" impressid="cc1b09f998434e9f8be563b66e0b4f23" class="green1">实用性强(<i>1</i>)</a><a href="javascript:;" impressid="bccbd0b2e96e42fd8bcd6dc41efc482c" class="green1">制作精美(<i>1</i>)</a><a href="javascript:;" impressid="cc3901c3984f4de596cc3f726bb83b47" class="green1">内容生动(<i>1</i>)</a><a href="javascript:;" impressid="ceb20657fc334fd39240441edc92f9e3" class="green1">互动性强(<i>1</i>)</a><a href="javascript:;" impressid="3d1e03ee7c8f4659b8ba705e0d48c59d" class="green1">思路新颖(<i>0</i>)</a><a href="javascript:;" impressid="39d16f8013b64c22a28e934ff2b8c367" class="red1">质量一般(<i>0</i>)</a><a href="javascript:;" impressid="75bd9cf378264167933e607947d6e922" class="red1">不符合教学要求(<i>0</i>)</a><a href="javascript:;" impressid="97ac0c33614f41589351620f8ceaa975" class="red1">应用价值不高(<i>0</i>)</a></div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import Header from '@/common/headers.vue'
  import Footer from '@/common/footer.vue'
  export default {
    components: {
      Header,
      Footer
    },
    data() {
      return {
        title: '',
        videourl:'',
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        console.log(this.$route.query);
        if (this.$route.query.id == '') {
          this.title = '人教五上第五单元_列方程解决实际问题',
            this.videourl = 'http://mct-whtymct.huijiaoyun.com/gfs_mnt/data7/2017/12/14/16/33/d5954e58a8b841b0b7a175a92c1d2af9/af13a29dc9db4e5cb0cf1f39602940e9/a090dc48419942be8edfb79cfce49899.mp4?authorization=bce-auth-v1/08da4fd5cf644d458c950b09bdb95666/2017-12-14T08:46:29Z/-1//c6ff6e09909a38673aeedbbe8f74ab964771f45359a8728f06b0f7f5e164ac20';
        } else if (this.$route.query.id == '1') {
          this.title = '人教三上第四单元_三位数减三位',
            this.videourl = 'http://mct-whtymct.huijiaoyun.com/gfs_mnt/data7/2017/12/14/16/4/d5954e58a8b841b0b7a175a92c1d2af9/79abb986261a42f9a39afb8b8b89d4db/6c836d2154914ed5817e348a556fef79.mp4?authorization=bce-auth-v1/08da4fd5cf644d458c950b09bdb95666/2017-12-14T08:06:19Z/-1//56f2b54251b858c8dcdd582d6253b2f8b813204a7c0b55cf05782cba964657c8';
        } else if (this.$route.query.id == '2') {
          this.title = '五上第七单元_在一条线段上植树（两端都栽树）问题的规律',
            this.videourl = 'http://mct-whtymct.huijiaoyun.com/gfs_mnt/data7/2017/12/14/16/25/d5954e58a8b841b0b7a175a92c1d2af9/d08f00af8f934c0caeb18a8fb3c5cee4/a6ff193a5a694b16bd64b01875ad2841.mp4?authorization=bce-auth-v1/08da4fd5cf644d458c950b09bdb95666/2017-12-14T08:29:11Z/-1//7d531957cacbd810d9903158418112cfb310115ba577a560a1c79c029e95b081';
        } else if (this.$route.query.id == '3') {
          this.title = '人教一上第五单元_6和7的写法',
            this.videourl = 'http://mct-whtymct.huijiaoyun.com/gfs_mnt/data7/2017/12/14/16/55/d5954e58a8b841b0b7a175a92c1d2af9/a814f6b58ed042f6a0bb22607b461c10/8ae82a12cb7e42228404881d0bd9e2a7.mp4?authorization=bce-auth-v1/08da4fd5cf644d458c950b09bdb95666/2017-12-14T08:58:41Z/-1//e6b754d1e579379e4f4f3a8bd3d95acd1f1791d4c5b278dc633098b060ed3251';
        } else if (this.$route.query.id == '4') {
          this.title = '人教二上第四单元_2，3的乘法口诀',
            this.videourl = 'http://mct-whtymct.huijiaoyun.com/gfs_mnt/data7/2017/12/14/16/51/d5954e58a8b841b0b7a175a92c1d2af9/09d1fff750fe426699d6d831cf6c6a97/7dcf1f36c99d460f99bfcacff3f84335.mp4?authorization=bce-auth-v1/08da4fd5cf644d458c950b09bdb95666/2017-12-14T09:01:26Z/-1//9f5b259695d3e253c934e21f37560245f93e60ebaccf816c1ec346b9dd394599';
        } else if (this.$route.path == '/videodetails') {
          this.title = '人教五上第五单元_列方程解决实际问题',
            this.videourl = 'http://mct-whtymct.huijiaoyun.com/gfs_mnt/data7/2017/12/14/16/33/d5954e58a8b841b0b7a175a92c1d2af9/af13a29dc9db4e5cb0cf1f39602940e9/a090dc48419942be8edfb79cfce49899.mp4?authorization=bce-auth-v1/08da4fd5cf644d458c950b09bdb95666/2017-12-14T08:46:29Z/-1//c6ff6e09909a38673aeedbbe8f74ab964771f45359a8728f06b0f7f5e164ac20';
        }
      }
    }
  }
</script>
<style scoped>
  .videodetails {
    width:100%;
    height:auto;
  }
  .videodetails_box {
    width:1200px;
    height:500px;
    margin:0 auto;
  }
  .videodetails_header {
    width:100%;

  }
  .schCrumb {
    background: url(../../../assets/image/resource/guider2.png) no-repeat 12px center;
    padding-left: 41px;
    margin-top: 27px;
  }
    .schCrumb a {
      display: inline-block;
      background: url(../../../assets/image/resource/guider2_bg2.gif) no-repeat left center;
      padding-left: 22px;
      color: #222;
      text-decoration: none;
      margin-right: 14px;
      outline: none;
      font-size:14px;
    }
  .videodetails_left {
    width: 80%;
    float: left;
    background: #fafafa;
    border: #dbd8d8 solid 1px;
    margin-top:3%;
  }
  .pdlr15 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .xy_infotit {
    font-size: 20px;
    font-family: "Microsoft YaHei";
    line-height: 80px;
    padding-top: 3px;
  }
    .xy_infotit span.tit_a {
      padding-left: 7px;
    }
  a.movie, span.movie {
    padding: 3px 0 3px 23px;
    background: url(../../../assets/image/resource/video_icon.jpg) no-repeat left center;
    *display: inline-block;
    height: 16px;
    text-decoration: none;
  }
  ul.zy_info {
    padding-bottom: 10px;
    font-size: 14px;
    display:block;
  }
    ul.zy_info li {
      float: left;
      list-style:none;
    }
      ul.zy_info li span.t_tit {
        border: 1px solid #d9d9d9;
        color: #5db859;
        height: 16px;
        padding: 0 2px;
        border-radius: 2px;
        display: block;
        line-height: 16px;
        top: 3px;
        font-size: 12px;
        position: relative;
      }
  .mgr5 {
    margin-right: 5px;
    font-style: normal;
  }

  .mgl20 {
    margin-left: 20px;
  }
  ul.zy_info li .admin_a {
    background: url(../../../assets/image/resource/user.gif) 0 2px no-repeat;
    padding-left: 25px;
    top: 0px;
    text-decoration: none;
  }
  .c888, a.c888 {
    color: #888;
  }
  .c555, a.c555 {
    color: #555;
    font-style: normal;
  }
  .videodetails_right {
    width: 18%;
    float: right;
    border: #ddd solid 1px;
    padding: 0 25px;
    margin-top:3%;
  }
  .m-otherVideo .tit {
    height: 43px;
  }

  .clearfix {
    display: block;
  }
  .m-otherVideo .tit h3 {
    font-size: 20px;
    line-height: 22px;
    padding-top: 21px;
    font-weight: normal;
    color: #555;
    float: left;
  }
  .fr {
    float: right;
  }
  .m-otherVideo .prevBtn, .m-otherVideo .nextBtn {
    background: url(../../../assets/image/resource/videoListBtn2.png) no-repeat left top;
    width: 20px;
    height: 16px;
    text-indent: -999em;
    overflow: hidden;
    float: left;
    margin-top: 25px;
  }
  .m-otherVideo .nextBtn {
    background-position: -24px 0px;
    margin-left: 4px;
  }
  .m-otherVideo .rect {
    height: 403px;
    overflow: hidden;
    zoom: 1;
    position: relative;
  }
  .m-otherVideo ul {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  }
  .videodetails_footer {
    width: 80%;
    float: left;
    margin-top: 55px;
    padding-bottom: 50px;
  }
  .z_tit1 {
    font-size: 22px;
    color: #222;
    font-family: "Microsoft YaHei";
    padding-bottom: 10px;
  }
  .m-tag .tag-a {
    overflow: hidden;
    zoom: 1;
  }
    .m-tag .tag-a a.green1 {
      background: #dffae2;
      border: #a6e1ca solid 1px;
      color: #3d8a61;
      outline: none;
    }
    .m-tag .tag-a a.red1 {
      background: #ffd9d0;
      border: #edac9d solid 1px;
      color: #c0543b;
      outline: none;
    }
  em, i {
    font-style: normal;
  }
    .m-tag .tag-a a {
      float: left;
      padding: 0 12px;
      line-height: 28px;
      margin: 0px 4px 10px 0px;
      text-decoration: none;
      font-size: 14px;
    }
</style>