TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/Video.vue

<template>
  <div class="video-page">
    <div class="video-title">
      <h3 class="video-title-h3">12月03日直播</h3>
    </div>
    <div class="video-info">

      <div class="video-src">
        <video controls="controls" width="800" style="display:block;"
               src="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
          您的浏览器不支持 video 标签。
        </video>

      </div>

      <div class="video-detail-info">
        <Form :label-width="100">
          <FormItem label="获奖情况：">
            <span>{{routerData.activityAwardName}}</span>
          </FormItem>
          <FormItem label="主讲：">
            <span>{{routerData.employeeName}}</span>
          </FormItem>
          <FormItem label="单位：">
            <span>{{routerData.employeeSchoolName}}</span>
          </FormItem>
          <FormItem label="年级：">
            <span>{{routerData.gradeName}}</span>
          </FormItem>
          <FormItem label="学科：">
            <span>{{routerData.categoryName}}</span>
          </FormItem>
          <FormItem label="教学设计：">
            <!--<span>{{routerData.activityAwardName}}</span>-->
          </FormItem>
          <FormItem label="教学反思：">
            <!--<span>{{routerData.activityAwardName}}</span>-->
          </FormItem>
        </Form>
        <div class="download-video">

          <a download="video" style="color:#999999;font-size:14px;" href="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
            <Icon type="md-cloud-download" size="22" color="white" />
            下载视频
          </a>
        </div>
      </div>
    </div>
    <div class="video-other">
      <h3 class="video-title-h3">推荐作品</h3>
    </div>
    <div class="videos-wrap">
      <div class="video-item" v-for="(item , index) in videos" @click="showVideo(index)">
        <img src="../../assets/image/default-act.png" width="95%" />
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import rewardList from '@/static/rewardList.json'
  export default {
    data() {
      return {
        routerData: {},
        rewardDatas: [],
        videos: [
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          }
        ]
      }
    },
    methods: {
      showVideo(index) {
        //alert(index);
        this.$router.push(
          {
            name: 'video',
            query: {
              rewardIndex: index
            }
          }
        );
      }
    },
    mounted() {
      let index = this.$route.query.rewardIndex;
      //alert(index);

      this.rewardDatas = rewardList.data.list;
      if (index == undefined) {
        this.routerData = this.rewardDatas[0];
      } else {
        this.routerData = this.rewardDatas[index];
      }
      
    },
    
    watch: {
      $route() {
        let index = this.$route.query.rewardIndex;
        //alert(index);
        if (index == undefined) {
          this.routerData = this.rewardDatas[0];
        } else {
          this.routerData = this.rewardDatas[index];
        }
      }
    }
  }
</script>
<style>
  .video-page {
    width: 1200px;
    margin: 100px auto;
  }

  .video-title {
    margin-bottom: 20px;
    height: 20px;
  }

    .video-title-h3 {
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      border-left: 6px solid #37b1fa;
      padding-left: 12px;
    }

  .video-info {
    width: 100%;
    display: table;
  }
  .video-detail-info {
    width:400px;
    background:#222222;
    display:table-cell;
    vertical-align:top;
    padding:20px 10px 20px 30px;
    position:relative;
  }
    .video-detail-info .ivu-form-item {
      margin-bottom:8px;
    }
    .video-detail-info .ivu-form .ivu-form-item-label {
      font-size:14px;
      color:#999999;
    }
    .video-detail-info .ivu-form-item-content {
      font-size: 14px;
      color: #ffffff;
    }
  .video-src {
    display:table-cell;
    width:800px;
    background:#000000;
  }
  .download-video {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:20px;
    left:0;
  }
  .video-other {
    margin-top:20px;
  }
  .videos-wrap {
    margin:0px -10px 0px -10px;
  }
  .video-item {
    width: 25%;
    display: inline-block;
    padding: 0px 10px;
    margin-top:20px;
    cursor:pointer;
  }

    .video-item p {
      font-size: 16px;
      color: #000;
      margin-top: 10px;
      text-decoration: none;
      text-indent: 8px;
    }
</style>