|
|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <div class="video-page">
|
|
|
+ <!--<div class="video-title">
|
|
|
+ <h3 class="video-title-h3">12月03日直播</h3>
|
|
|
+ </div>-->
|
|
|
+ <div class="video-info">
|
|
|
+
|
|
|
+ <div class="comment-video-src">
|
|
|
+ <div>
|
|
|
+ <p style=" font-size: 14px; margin-bottom: 20px;"><span class="title-header">标题 : <span class="title-content">创新实验室（学科教室）课例20190508直播</span></span> <span class="title-header">主讲人 : 林燕<span class="title-content"></span></span> <span class="liveStatus">播放成功</span></p>
|
|
|
+ </div>
|
|
|
+ <video controls="controls" width="780" 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>
|
|
|
+ <p class="average-score">作品当前平均分 : <span>未评</span></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="comment-video-detail-info">
|
|
|
+ <Tabs value="name1">
|
|
|
+ <TabPane label="观课评论" name="name1">
|
|
|
+ <div class="review-pane">
|
|
|
+ <div class="review-list" v-for="(item,index) in commmentList" :key="index">
|
|
|
+ <span class="reviewlist-title">
|
|
|
+ {{item.employeeName}} :
|
|
|
+ </span> <span class="reviewlist-content"><span>{{item.content}}</span> <span class="reviewlist-time">({{item.createTimeTip}})</span> <!----></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="position: relative; padding-top: 20px;"><div class="lastest-comment" style="display: none;">查看最新评论</div> <textarea placeholder="发表您的评论" maxlength="250" class="publish-review"></textarea> <span class="submit-review">提交</span></div>
|
|
|
+ </TabPane>
|
|
|
+ <TabPane label="专家点评" name="name2">专家点评</TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="video-other" style="display:none;">
|
|
|
+ <h3 class="video-title-h3">推荐作品</h3>
|
|
|
+ </div>
|
|
|
+ <div class="videos-wrap" style="display:none;">
|
|
|
+ <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'
|
|
|
+ import CList from '@/static/commentList.json'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ routerData: {},
|
|
|
+ rewardDatas: [],
|
|
|
+ commmentList:[],
|
|
|
+ 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.commmentList = CList.list;
|
|
|
+ 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;
|
|
|
+ font-family:none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .comment-video-detail-info {
|
|
|
+ width:400px;
|
|
|
+ background:#ffffff;
|
|
|
+ display:table-cell;
|
|
|
+ vertical-align:top;
|
|
|
+ padding:20px 10px 20px 30px;
|
|
|
+ position:relative;
|
|
|
+ border-left: 15px solid rgb(252,252,252);
|
|
|
+ }
|
|
|
+ .comment-video-detail-info .ivu-form-item {
|
|
|
+ margin-bottom:8px;
|
|
|
+ }
|
|
|
+ .comment-video-detail-info .ivu-form .ivu-form-item-label {
|
|
|
+ font-size:14px;
|
|
|
+ color:#999999;
|
|
|
+ }
|
|
|
+ .comment-video-detail-info .ivu-form-item-content {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .comment-video-src {
|
|
|
+ display:table-cell;
|
|
|
+ width:780px;
|
|
|
+ box-sizing:border-box;
|
|
|
+ padding:20px 20px;
|
|
|
+ background:#FFFFFF;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .title-header {
|
|
|
+ color: #666;
|
|
|
+ margin-right: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .liveStatus {
|
|
|
+ color: #33aafe;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-pane {
|
|
|
+ height: 300px;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .review-list {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 8px 10px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid #f6f6f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reviewlist-title {
|
|
|
+ float: left;
|
|
|
+ width: 22%;
|
|
|
+ color: #999;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reviewlist-content {
|
|
|
+ float: left;
|
|
|
+ color: #444;
|
|
|
+ width: 76%;
|
|
|
+ font-size: 14px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lastest-comment {
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: 20px;
|
|
|
+ padding: 5px;
|
|
|
+ color: #666;
|
|
|
+ z-index: 999;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .publish-review {
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f1f2f3;
|
|
|
+ border: 1px solid #d7d8da;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ resize: none;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-review {
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 45px;
|
|
|
+ text-align: center;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reviewlist-time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ .average-score {
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .average-score span {
|
|
|
+ color: #fd8f45;
|
|
|
+ }
|
|
|
+</style>
|
