修改视频相关部分样式

src/utils/common.js

@@ -69,17 +69,17 @@ exports.install = function(Vue, options) {
     if (strDate >= 0 && strDate <= 9) {
       strDate = "0" + strDate;
     }
-    let hours = date.getHours()
-    let minutes = date.getMinutes()
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
     if (minutes >= 0 && minutes <= 9) {
       minutes = "0" + minutes;
     }
-    let seconds = date.getSeconds()
+    let seconds = date.getSeconds();
     if (seconds >= 0 && seconds <= 9) {
       seconds = "0" + seconds;
     }
     // 最后拼接字符串，得到一个格式为(yyyy-MM-dd hh:mm:ss)的日期
-    return date.getFullYear() + "-" + nowMonth + "-" + strDate + ' ' + hours + ":" + minutes + ":" + seconds;
+    return date.getFullYear() + "-" + nowMonth + "-" + strDate + " " + hours + ":" + minutes + ":" + seconds;
   };
 
   /**

src/views/home/learn/page-learn-content.vue

@@ -12,10 +12,14 @@
     </div>
     <!-- 内容 -->
     <div class="learn-content-body">
-      <div class="learn-content-body-title">
+      <!-- 不是视频时展示 -->
+      <div v-if="contentObj.type != 'VIDEO'" class="learn-content-body-title">
         {{ contentObj.name }}
       </div>
-      <div class="learn-content-body-auther">编辑：{{ contentObj.userId }}</div>
+      <!-- 不是视频时展示 -->
+      <div v-if="contentObj.type != 'VIDEO'" class="learn-content-body-auther">
+        编辑：{{ contentObj.userId }}
+      </div>
       <div class="learn-content-body-description">
         <!-- {{ contentObj.contents }} -->
         <p
@@ -26,17 +30,19 @@
         >
           {{ contentObj.contents }}
         </p>
-        <div>
+        <div v-if="contentObj.type == 'VIDEO'">
           <video
-            v-if="contentObj.type == 'VIDEO'"
             :poster="getContentObj(contentObj.contents).faceUrl"
             :src="getContentObj(contentObj.contents).videoUrl"
             controls="controls"
           >
             您的浏览器不支持 video 标签。
           </video>
+          <div class="learn-content-body-title" style="margin-top: 0.5rem;">
+            {{ contentObj.name }}
+          </div>
         </div>
-        <div>
+        <div style="margin-top: 0.5rem;">
           <div>附件</div>
           <div v-for="(item, index) in contentObj.links" :key="index">
             <a :href="item">{{ getUrlName(item) }}</a>
@@ -184,8 +190,7 @@ export default {
     this.env = process.env.VUE_APP_ENV;
     this.setLanXinNavigator();
   },
-  destroyed () {
-  },
+  destroyed() {},
   activated() {
     this.setLanXinNavigator();
   },
@@ -233,14 +238,15 @@ export default {
       // ！！！需要查询评论列表内容！！！
       let path = {
         materialId: this.materialId
-
       };
       let params = {
         page: this.commentPage,
         size: this.commentSize
       };
       this.$_http
-        .get(this.$pathParams(this.$_API.JTXT_GET_MATERIALS_COMMENTS, path), { params })
+        .get(this.$pathParams(this.$_API.JTXT_GET_MATERIALS_COMMENTS, path), {
+          params
+        })
         .then(res => {
           this.commentList = res.data.content;
           // 分页到底了
@@ -258,7 +264,11 @@ export default {
     },
     async handleCommentScroll(e) {
       console.log("aaaaa");
-      if (this.canCommentFlag && e.srcElement.scrollTop + e.srcElement.offsetHeight > e.srcElement.scrollHeight - 100) {
+      if (
+        this.canCommentFlag &&
+        e.srcElement.scrollTop + e.srcElement.offsetHeight >
+          e.srcElement.scrollHeight - 100
+      ) {
         this.canCommentFlag = false;
         console.log("触底");
         this.commentPage = this.commentPage + 1;
@@ -414,7 +424,9 @@ export default {
       if (this.favorite.materials && this.favorite.materials.length > 0) {
         console.log(this.favorite.materials);
         console.log(this.materialId);
-        const item = this.favorite.materials.find(it => it.materialId === this.materialId);
+        const item = this.favorite.materials.find(
+          it => it.materialId === this.materialId
+        );
         if (item && item.materialId === this.materialId) {
           this.isCollected = true;
         }
@@ -441,7 +453,6 @@ export default {
       console.log(fileName);
       return fileName;
     }
-
   }
 };
 </script>

src/views/home/learn/page-learn-recommend.vue

@@ -27,17 +27,14 @@
           @click="chooseContent(contentIndex)"
         >
           <div slot="default" class="contentItemDiv" v-if="contentItem">
-            <div class="contentItemTitleTitleRow">
-              <div
-                v-if="contentItem.type == 'ARTICLE'"
-                class="contentItemTitle"
-              >
+            <!-- 文章 -->
+            <div
+              v-if="contentItem.type == 'ARTICLE'"
+              class="contentItemTitleTitleRow"
+            >
+              <div class="contentItemTitle">
                 {{ contentItem.name }}
               </div>
-              <div v-if="contentItem.type == 'VIDEO'" class="contentItemTitle">
-                {{ contentItem.name }}
-                <img :src="getContentObj(contentItem.contents).faceUrl" />
-              </div>
               <div
                 v-if="contentItem.isNeedStudyToday"
                 class="contentItemstates"
@@ -45,11 +42,33 @@
                 今日必学
               </div>
             </div>
+            <!-- 视频 -->
+            <div
+              v-else-if="contentItem.type == 'VIDEO'"
+              class="contentItemTitleTitleRow-video"
+            >
+              <div class="contentVideoTitle">
+                <div class="contentVideoTitleTxt">
+                  <img :src="redIcon" />
+                  <span>{{ contentItem.name }}</span>
+                </div>
+                <div class="contentVideoDK">
+                  <span>打开</span>
+                  <img :src="arrowRightPng" />
+                </div>
+              </div>
+              <div
+                v-if="contentItem.type == 'VIDEO'"
+                class="contentItem-video-img"
+              >
+                <img :src="getContentObj(contentItem.contents).faceUrl" />
+              </div>
+            </div>
             <div class="contentItemDescription">
               <div class="contentItemDescriptionTime">
                 {{
                   formateDatesFun(contentItem.createdTime) ||
-                  contentItem.createdTime
+                    contentItem.createdTime
                 }}
               </div>
               <div class="contentItemDescriptionStudyNeedTime">
@@ -77,7 +96,9 @@ export default {
       loading: false,
       finished: false,
       isLoading: false,
-      swiperList: []
+      swiperList: [],
+      arrowRightPng: require("@/assets/image/learn/arrowRight.png"),
+      redIcon: require("@/assets/image/learn/redIcon.jpg")
     };
   },
   computed: {
@@ -218,10 +239,71 @@ export default {
         flex-wrap: nowrap;
         white-space: nowrap;
       }
-      img {
-        max-width: 100%;
-        width: auto;
-        height: auto;
+      .contentItem-video-title {
+      }
+      .contentItem-video-img {
+        width: 100%;
+        img {
+          max-width: 100%;
+          width: auto;
+          height: auto;
+        }
+      }
+    }
+    .contentItemTitleTitleRow-video {
+      width: 100%;
+      .contentVideoTitle {
+        display: flex;
+        justify-content: space-between;
+        // align-items: center;
+        .contentVideoTitleTxt {
+          position: relative;
+          display: flex;
+          margin-bottom: 0.25rem;
+          img {
+            width: 0.1rem;
+            height: 1rem;
+            margin-right: 0.25rem;
+          }
+          span {
+            font-size: 0.65rem;
+            font-weight: bold;
+            color: #000;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+          }
+        }
+        .contentVideoDK {
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          margin-left: 0.5rem;
+          color: #999;
+          display: flex;
+          align-items: center;
+          img {
+            width: 0.75rem;
+            height: 0.75rem;
+          }
+        }
+      }
+      .contentItemstates {
+        font-size: 0.6rem;
+        color: #f56c6c;
+        border-radius: 0.2rem;
+        margin-left: 0.5rem;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+      }
+      .contentItem-video-img {
+        width: 100%;
+        img {
+          max-width: 100%;
+          width: auto;
+          height: auto;
+        }
       }
     }
     .contentItemDescription {