src/components/mini/box16-videoDetail.vue

@@ -1,13 +1,16 @@
<template>
   <div>
      <div class="boxMain ">
   <div class="boxMain">
      <div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
         <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
      </div>
      <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
         <pre>{{introduce}}</pre>
      </div>
      <div class="articleComment fadeInRight">
         <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
      <div v-bind:class="{ fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
         <div class="introduce myShadow" v-if="introduce!=''">
            <pre style="white-space: pre-line;">{{introduce}}</pre>
         </div>
         <div class="articleComment ">
            <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
               :foldReply="true" />
         </div>
      </div>
   </div>

@@ -40,9 +43,11 @@
            if (newValue == undefined || newValue == null || newValue == "") {
               this.errorMsg = "日志id参数缺失";
            } else {
               this.$nextTick(function() {
                  this.$refs.myComment.updateCommentList(this.articleId);
               })
               if (this.newValue != this.oldValue) {
                  this.$nextTick(function() {
                     this.$refs.myComment.updateCommentList(this.articleId);
                  })
               }
            }
         },
      },
@@ -54,6 +59,7 @@
            introduce: "",
            secret: "",
            myLock: false,
            showFade: true,
            videoData: {
               img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
               url: "",
@@ -67,6 +73,7 @@
      methods: {
         swichPlay(videoData) {
            this.introduce = videoData.introduce;
            this.articleId = videoData.id
            this.$refs.myComment.updateCommentList(videoData.id);
         },
         showVideo(item) {
@@ -85,7 +92,7 @@
         loadData() {

            if (this.$refs.videoPlayBox.isPlaying) {
               this.$message.info("上个视频正在播放中")
               this.$message.info("视频源已切换..", 6)
            }

            if (this.myLock) {
@@ -157,9 +164,17 @@

   .boxMain {
      user-select: none;
      grid-template-columns: repeat(2, 1fr);
      display: grid;
      clear: both;
      gap: 2rem;
      max-height: 100%;
   }

   .playBox {
      display: flex;
      justify-content: center;
      padding: 5px 20px;
      padding: 20px 0px;
   }

   .myShadow {
@@ -167,4 +182,18 @@
      box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
         -8px -8px 18px #ffffff;
   }

   .introduce {
      padding: 20px 20px 5px;
      margin-bottom: 20px;
   }

   @media screen and (max-width: 1023px) {
      .boxMain {
         grid-template-columns: repeat(1, 1fr);
         gap: 0rem;
      }

   }

</style>