bridging video + online practice

src/router/index.js

@@ -385,6 +385,31 @@ export const constantRoutes = [{
       }
     ]
   },
+  {
+    path: '/video_course',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/video_course/bridging-video/practice',
+        component: resolve => require(['@/views/videocourse/BridgingPractice.vue'], resolve),
+        name: 'bridgingPractice',
+        meta: {
+          title: '衔接课程练习',
+          parentPath: '/video_course/bridging-video'
+        }
+      },
+      {
+        path: '/video_course/bridging-video/practice-answer',
+        component: resolve => require(['@/views/videocourse/BridgingPracticeAnswer.vue'], resolve),
+        name: 'bridgingPracticeAnswer',
+        meta: {
+          title: '衔接课程练习结果',
+          parentPath: '/video_course/bridging-video'
+        }
+      }
+    ]
+  },
   {
     path: '/evaluating',
     component: Layout,

src/views/questioncenter/AnswerDetails.vue

@@ -112,7 +112,7 @@
       </el-table>
     </el-card>
     <div class="btn">
-      <span @click="backPractice">返回练习 </span>
+      <span @click="backPractice">{{returnText}}</span>
     </div>
     <!-- 弹出警告 -->
     <el-dialog title="举一反三" :visible.sync="isShowJuYiFanSan" width="80%">
@@ -179,6 +179,7 @@ import {
 export default {
   data() {
     return {
+      returnText: '返回练习',
       topInfo: {},
       subjectName: "",
       wrongNum: 0,
@@ -299,10 +300,8 @@ export default {
     },
     expandChange(item, rows) {
       this.$nextTick(_=>this.mxGlobal.MathQueue('question_list'))
-      console.log(item);
     },
     expandsHandle(row) {
-      console.log(row);
       this.$refs.expandstable.toggleRowExpansion(row, true);
       this.$nextTick(_=>this.mxGlobal.MathQueue('question_list'))
     },
@@ -315,156 +314,5 @@ export default {
 };
 </script>
 <style scoped>
-.header_tit {
-  padding: 16px 32px 16px 20px;
-  border-bottom: 1px solid #b7b7b7;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 500;
-  color: #343434;
-}
-.more {
-  color: white;
-  background: #47c6a2;
-  right: 32px;
-  padding: 6px 16px;
-  border-radius: 16px;
-}
-.basic_info {
-  width: 100%;
-  text-align: left;
-  padding: 36px 21px;
-}
-.basic_info tr {
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #717171;
-  line-height: 17px;
-}
-.basic_info td {
-  font-size: 21px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 29px;
-}
-.info {
-  margin-top: 16px;
-  padding: 0;
-}
-.view {
-  cursor: pointer;
-  color: #47c6a2;
-  display: flex;
-  align-items: center;
-}
-.view img {
-  margin-right: 5px;
-  height: 100%;
-}
-.prase {
-  border: 2px solid #47c6a2;
-  display: flex;
-  margin-top: 24px;
-}
-.prase .jiexi {
-  background: #47c6a2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 22px;
-  color: white;
-}
-.prase div:last-child {
-  padding: 10px;
-}
-.empty-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.que_tit {
-  display: flex;
-  position: relative;
-}
-.que_tit .fix {
-  position: absolute;
-  right: 0;
-}
-.que_tit .fix > span:first-child {
-  background: #47c6a2;
-  color: white;
-  padding: 4px;
-  border-radius: 3px;
-  margin-right: 28px;
-}
-.btn {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-.btn span {
-  padding: 14px 29px;
-  color: white;
-  background: #47c6a2;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.center {
-  width: 1000px;
-}
-.option-list {
-  margin-top: 10px;
-}
-.option-item {
-  line-height: 30px;
-}
-.option-symbol {
-  margin-right: 10px;
-}
-
-.que_item {
-  border-radius: 1px;
-  border: 1px solid #dedede;
-  margin-bottom: 8px;
-}
-.que_content {
-  padding: 12px 24px 0 33px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #4c4c4c;
-  line-height: 27px;
-  margin-bottom: 40px;
-}
-.options {
-  padding-left: 36px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #4c4c4c;
-  line-height: 27px;
-}
-.options .option {
-  margin-bottom: 10px;
-}
-.paper_questions {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.que_item {
-  width: 100%;
-}
-.is-correct {
-  padding: 10px 36px;
-}
-.correct-text.success {
-  color: #47c6a2;
-}
-.correct-text.error {
-  color: crimson;
-}
+@import "~@/views/questioncenter/practice-answer-detail.scss";
 </style>

src/views/questioncenter/practice-answer-detail.scss

@@ -0,0 +1,152 @@
+.header_tit {
+  padding: 16px 32px 16px 20px;
+  border-bottom: 1px solid #b7b7b7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 500;
+  color: #343434;
+}
+.more {
+  color: white;
+  background: #47c6a2;
+  right: 32px;
+  padding: 6px 16px;
+  border-radius: 16px;
+}
+.basic_info {
+  width: 100%;
+  text-align: left;
+  padding: 36px 21px;
+}
+.basic_info tr {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #717171;
+  line-height: 17px;
+}
+.basic_info td {
+  font-size: 21px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #343434;
+  line-height: 29px;
+}
+.info {
+  margin-top: 16px;
+  padding: 0;
+}
+.view {
+  cursor: pointer;
+  color: #47c6a2;
+  display: flex;
+  align-items: center;
+}
+.view img {
+  margin-right: 5px;
+  height: 100%;
+}
+.prase {
+  border: 2px solid #47c6a2;
+  display: flex;
+  margin-top: 24px;
+}
+.prase .jiexi {
+  background: #47c6a2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 22px;
+  color: white;
+}
+.prase div:last-child {
+  padding: 10px;
+}
+.empty-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.que_tit {
+  display: flex;
+  position: relative;
+}
+.que_tit .fix {
+  position: absolute;
+  right: 0;
+}
+.que_tit .fix > span:first-child {
+  background: #47c6a2;
+  color: white;
+  padding: 4px;
+  border-radius: 3px;
+  margin-right: 28px;
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+.btn span {
+  padding: 14px 29px;
+  color: white;
+  background: #47c6a2;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.center {
+  width: 1000px;
+}
+.option-list {
+  margin-top: 10px;
+}
+.option-item {
+  line-height: 30px;
+}
+.option-symbol {
+  margin-right: 10px;
+}
+
+.que_item {
+  border-radius: 1px;
+  border: 1px solid #dedede;
+  margin-bottom: 8px;
+}
+.que_content {
+  padding: 12px 24px 0 33px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #4c4c4c;
+  line-height: 27px;
+  margin-bottom: 40px;
+}
+.options {
+  padding-left: 36px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #4c4c4c;
+  line-height: 27px;
+}
+.options .option {
+  margin-bottom: 10px;
+}
+.paper_questions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.que_item {
+  width: 100%;
+}
+.is-correct {
+  padding: 10px 36px;
+}
+.correct-text.success {
+  color: #47c6a2;
+}
+.correct-text.error {
+  color: crimson;
+}

src/views/questioncenter/practice-style.scss

@@ -0,0 +1,137 @@
+.preview_container {
+  padding: 20px;
+}
+.paper_header {
+  overflow: hidden;
+  margin-bottom: 33px;
+}
+.paper_title {
+  height: 25px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #292929;
+  line-height: 25px;
+  float: left;
+}
+.operation {
+  float: right;
+}
+.shoucan {
+  display: flex;
+  align-items: center;
+  margin-right: 53px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+}
+.shoucan img {
+  margin-right: 6px;
+  cursor: pointer;
+}
+.shoucan .sc_text {
+  color: #9f9f9f;
+  line-height: 20px;
+  cursor: pointer;
+  margin-right: 28px;
+}
+.shoucan .btn {
+  padding: 6px 20px;
+  cursor: pointer;
+  background: #47c6a2;
+  color: white;
+  border-radius: 4px;
+}
+.que_item {
+  border-radius: 1px;
+  border: 1px solid #dedede;
+  margin-bottom: 8px;
+}
+.que_content {
+  padding: 12px 24px 0 33px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #4c4c4c;
+  line-height: 27px;
+  margin-bottom: 40px;
+}
+.options {
+  padding-left: 36px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #4c4c4c;
+  line-height: 27px;
+}
+.options .option {
+  margin-bottom: 10px;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #47c6a2;
+  line-height: 20px;
+}
+.operation > div {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.operation .shoucan {
+  margin-right: 46px;
+}
+.operation .detail span {
+  border-radius: 1px;
+  border-bottom: 1px solid #47c6a2;
+}
+.operation .detail {
+  margin-right: 32px;
+}
+.operation > div > img {
+  margin-right: 10px;
+}
+.operation .addQue {
+  padding: 7px;
+  border-radius: 4px;
+  border: 1px solid #979797;
+  margin-right: 24px;
+}
+.info {
+  padding: 12px 40px;
+}
+.que_item p {
+  margin: 0 !important;
+}
+.save {
+  display: flex;
+  justify-content: center;
+}
+.save span {
+  padding: 20px;
+  background: #47c6a2;
+  color: white;
+  cursor: pointer;
+}
+.exam_time {
+  position: fixed;
+  right: 0;
+  color: white;
+  background: #47c6a2;
+  top: 50%;
+  padding: 5px 10px;
+}
+
+.paper_questions .options .el-radio {
+  display: flex;
+}
+.paper_questions .options .el-radio:hover {
+  color: #47c6a2;
+}
+.paper_questions .options .el-radio__label {
+  display: flex;
+}

src/views/questioncenter/practice.vue

@@ -1,8 +1,9 @@
 <template >
-  <div class="preview_container">
+  <div v-loading="loading" class="preview_container">
     <el-card>
-      <div class="paper_header">
+      <div class="paper_header fx-row fx-bet-cen">
         <div class="paper_title">{{ title }}</div>
+        <el-button size="small" round @click="$router.back()">返回</el-button>
       </div>
       <!-- 题目组 -->
       <div class="paper_questions" id="question_list">
@@ -69,6 +70,7 @@ import {
 export default {
   data() {
     return {
+      loading: false,
       title: "",
       knowledgeId: 0,
       chapterId: 0,
@@ -80,26 +82,29 @@ export default {
       second: 0,
     };
   },
-  created() {
-    //  开启记时
-    this.timing();
-    this.knowledgeId = this.$route.query.knowledgeId;
-    this.chapterId = this.$route.query.chapterId;
-    this.subjectId = this.$route.query.subjectId;
-    this.title = this.$route.query.title;
-    if (this.chapterId) {
-      getQuestionsByChapter({ chapterId: this.chapterId }).then((res) => {
-        this.queList = this.formatQueList(res.data);
-        this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
-      });
-    } else if (this.knowledgeId) {
-      getQuestionsByKnowledge({ knowledgeId: this.knowledgeId }).then((res) => {
-        this.queList = this.formatQueList(res.data);
-        this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
-      });
-    }
+  mounted() {
+    this.initPaper()
   },
   methods: {
+    initPaper() {
+      //  开启记时
+      this.timing();
+      this.knowledgeId = this.$route.query.knowledgeId;
+      this.chapterId = this.$route.query.chapterId;
+      this.subjectId = this.$route.query.subjectId;
+      this.title = this.$route.query.title;
+      if (this.chapterId) {
+        getQuestionsByChapter({ chapterId: this.chapterId }).then((res) => {
+          this.queList = this.formatQueList(res.data);
+          this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
+        });
+      } else if (this.knowledgeId) {
+        getQuestionsByKnowledge({ knowledgeId: this.knowledgeId }).then((res) => {
+          this.queList = this.formatQueList(res.data);
+          this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
+        });
+      }
+    },
     /**
      * 格式化数据  去除\
      */
@@ -118,6 +123,7 @@ export default {
     savePractice() {
       if (Object.keys(this.answerForm).length >= this.queList.length) {
         if (this.knowledgeId) {
+          this.loading = true
           savePractice({
             answers: this.answerForm,
             knowledgeId: this.knowledgeId,
@@ -133,8 +139,9 @@ export default {
                 knowledgeId: this.knowledgeId,
               },
             });
-          });
+          }).finally(() => this.loading = false);
         } else if (this.chapterId) {
+          this.loading = true
           savePractice({
             answers: this.answerForm,
             chapterId: this.chapterId,
@@ -148,7 +155,7 @@ export default {
                 type: 1,
               },
             });
-          });
+          }).finally(() => this.loading = false);
         }
       } else {
         this.dialogVisible = true;
@@ -187,142 +194,5 @@ export default {
 };
 </script>
 <style scoped>
-.preview_container {
-  padding: 20px;
-}
-.paper_header {
-  overflow: hidden;
-  margin-bottom: 33px;
-}
-.paper_title {
-  height: 25px;
-  font-size: 18px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #292929;
-  line-height: 25px;
-  float: left;
-}
-.operation {
-  float: right;
-}
-.shoucan {
-  display: flex;
-  align-items: center;
-  margin-right: 53px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-}
-.shoucan img {
-  margin-right: 6px;
-  cursor: pointer;
-}
-.shoucan .sc_text {
-  color: #9f9f9f;
-  line-height: 20px;
-  cursor: pointer;
-  margin-right: 28px;
-}
-.shoucan .btn {
-  padding: 6px 20px;
-  cursor: pointer;
-  background: #47c6a2;
-  color: white;
-  border-radius: 4px;
-}
-.que_item {
-  border-radius: 1px;
-  border: 1px solid #dedede;
-  margin-bottom: 8px;
-}
-.que_content {
-  padding: 12px 24px 0 33px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #4c4c4c;
-  line-height: 27px;
-  margin-bottom: 40px;
-}
-.options {
-  padding-left: 36px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #4c4c4c;
-  line-height: 27px;
-}
-.options .option {
-  margin-bottom: 10px;
-}
-
-.operation {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #47c6a2;
-  line-height: 20px;
-}
-.operation > div {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.operation .shoucan {
-  margin-right: 46px;
-}
-.operation .detail span {
-  border-radius: 1px;
-  border-bottom: 1px solid #47c6a2;
-}
-.operation .detail {
-  margin-right: 32px;
-}
-.operation > div > img {
-  margin-right: 10px;
-}
-.operation .addQue {
-  padding: 7px;
-  border-radius: 4px;
-  border: 1px solid #979797;
-  margin-right: 24px;
-}
-.info {
-  padding: 12px 40px;
-}
-.que_item p {
-  margin: 0 !important;
-}
-.save {
-  display: flex;
-  justify-content: center;
-}
-.save span {
-  padding: 20px;
-  background: #47c6a2;
-  color: white;
-  cursor: pointer;
-}
-.exam_time {
-  position: fixed;
-  right: 0;
-  color: white;
-  background: #47c6a2;
-  top: 50%;
-  padding: 5px 10px;
-}
-</style>
-<style scoped>
-/deep/.paper_questions .options .el-radio {
-  display: flex;
-}
-/deep/.paper_questions .options .el-radio:hover {
-  color: #47c6a2;
-}
-/deep/.paper_questions .options .el-radio__label {
-  display: flex;
-}
+@import "~@/views/questioncenter/practice-style.scss";
 </style>

src/views/videocourse/BridgingPractice.vue

@@ -0,0 +1,45 @@
+<script>
+import practice from "@/views/questioncenter/practice.vue";
+import MxTransferMixin from "@/components/mx-transfer-mixin";
+import {getQuestionsByIds, savePractice} from "@/api/webApi/webQue";
+
+export default {
+  name: "BridgingPractice",
+  extends: practice,
+  mixins: [MxTransferMixin],
+  methods: {
+    async initPaper() {
+      this.timing()
+      this.title = this.prevData.title
+      const res = await getQuestionsByIds({ids: this.prevData.qIds})
+      this.queList = res.data
+      this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"))
+    },
+    async savePractice() {
+      const commit = {
+        answers: this.answerForm,
+        bridgingVideoId: this.prevData.id,
+        subjectId: this.prevData.subjectId,
+        seconds: this.second,
+      }
+      try {
+        this.loading = true
+        const res = await savePractice(commit)
+        this.$router.push({
+          path: "/video_course/bridging-video/practice-answer",
+          query: {
+            info: encodeURIComponent(JSON.stringify(res.data)),
+            type: 1,
+          },
+        });
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import "~@/views/questioncenter/practice-style.scss";
+</style>

src/views/videocourse/BridgingPracticeAnswer.vue

@@ -0,0 +1,23 @@
+
+<script>
+import AnswerDetails from "@/views/questioncenter/AnswerDetails.vue";
+
+export default {
+  name: "BridgingPracticeAnswer",
+  extends: AnswerDetails,
+  data() {
+    return {
+      returnText: '返回课程',
+    }
+  },
+  methods: {
+    backPractice() {
+      this.$router.push('/video_course/bridging-video')
+    },
+  }
+}
+</script>
+
+<style scoped>
+@import "~@/views/questioncenter/practice-answer-detail.scss";
+</style>

src/views/videocourse/BridgingVideo.vue

@@ -5,7 +5,15 @@
         <el-step v-for="(t,idx) in subTypes" :key="t.value" :title="t.label" @click.native="changeStep(idx)"></el-step>
       </el-steps>
     </el-header>
-    <tree-video-layout :video-list="list" :default-props="treeProps"></tree-video-layout>
+    <tree-video-layout :video-list="list" :default-props="treeProps">
+      <template #default="scope">
+        <el-button v-if="scope.practiceQIds" type="primary" class="f20" round @click="goPractice(scope)">开始在线练习</el-button>
+        <el-button v-if="scope.practiceQIds" class="f20" round @click="showHistory=true,showVideo=scope">诊断记录</el-button>
+      </template>
+    </tree-video-layout>
+    <el-dialog :visible.sync="showHistory" :modal="false">
+      <bridging-diagnose-table v-if="showHistory" :bridging-video-id="showVideo.id" />
+    </el-dialog>
   </el-container>
 </template>
 
@@ -13,12 +21,17 @@
 
 import {gkVideo, subTypes} from "@/api/webApi/bridging-video";
 import TreeVideoLayout from "@/views/videocourse/components/TreeVideoLayout.vue";
+import MxTransferMixin from "@/components/mx-transfer-mixin";
+import BridgingDiagnoseTable from "@/views/videocourse/components/BridgingDiagnoseTable.vue";
 
 export default {
   name: "BridgingVideo",
-  components: {TreeVideoLayout},
+  components: {BridgingDiagnoseTable, TreeVideoLayout},
+  mixins: [MxTransferMixin],
   data() {
     return {
+      showHistory: false,
+      showVideo: null,
       loading: false,
       type: '衔接课程',
       subTypes: [],
@@ -73,6 +86,10 @@ export default {
       this.list = res.rows
       this.container[this.currentSubType] = this.list
       this.loading = false
+    },
+    goPractice(data) {
+      const next = {id: data.id, subjectId: data.subjectId, qIds: data.practiceQIds, title: data.title + '-在线练习'}
+      this.transferTo('/video_course/bridging-video/practice', next)
     }
   }
 }

src/views/videocourse/components/BridgingDiagnoseTable.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <dynamic-table :rows="list" :columns="columns">
+      <template #action="{row}">
+        <el-button type="text" icon="el-icon-view" @click="goDetails(row)">详情</el-button>
+      </template>
+    </dynamic-table>
+    <pagination :total="total" :page.sync="queryPage.pageNum" :limit.sync="queryPage.pageSize"></pagination>
+  </div>
+</template>
+
+<script>
+import {diagnosticRecords} from "@/api/webApi/webQue";
+import DynamicTable from "@/components/dynamic-table/index.vue";
+
+export default {
+  name: "BridgingDiagnoseTable",
+  components: {DynamicTable},
+  props: {
+    bridgingVideoId: {
+      type: Number | String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      queryPage: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      columns: [
+        {prop: 'index', type: 'index', label: '序号'},
+        {prop: 'coursename', label: '科目'},
+        {prop: 'seconds', label: '用时', formatter: (val) => val.seconds + '秒'},
+        {prop: 'rate', label: '正确率', formatter: (val) => val.rate + '%'},
+        {prop: 'action', label: '操作', slotBody: 'action'},
+      ],
+      total: 0
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      diagnosticRecords({
+        ...this.queryPage,
+        type: 3,
+        bridgingVideoId: this.bridgingVideoId
+      }).then((res) => {
+        this.total = res.total
+        this.list = res.rows
+      })
+    },
+    goDetails(item) {
+      this.$router.push({
+        path: '/video_course/bridging-video/practice-answer',
+        query: {
+          batchno: item.batchno,
+          info: encodeURIComponent(JSON.stringify(item))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/videocourse/components/TreeVideoLayout.vue

@@ -34,7 +34,7 @@
               {{ videoInfo.title }}
             </div>
             <div class="vis_totle">
-
+              <slot v-bind="videoInfo" />
             </div>
           </div>
         </div>
@@ -81,9 +81,10 @@ export default {
       if (data.hasOwnProperty("children")) {
         return;
       }
-      this.checkNode = data;
-      this.aliIdType = data.aliIdType;
-      this.aliId = data.aliId;
+      this.checkNode = data
+      this.aliIdType = data.aliIdType
+      this.aliId = data.aliId
+      this.videoInfo = data
     }
   }
 }