修改视频

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

@@ -27,26 +27,51 @@
             >
               <div slot="default" class="contentItemDiv">
                 <div class="contentItemTitleTitleRow">
+                  <!-- 文章 -->
                   <div
                     v-if="contentItem.type == 'ARTICLE'"
-                    class="contentItemTitle"
+                    class="contentItemTitleTitleRow"
                   >
-                    {{ contentItem.name }}
+                    <div class="contentItemTitle">
+                      {{ contentItem.name }}
+                    </div>
+                    <div
+                      v-if="contentItem.isNeedStudyToday"
+                      class="contentItemstates"
+                    >
+                      今日必学
+                    </div>
                   </div>
+                  <!-- 视频 -->
                   <div
-                    v-if="contentItem.type == 'VIDEO'"
-                    class="contentItemTitle"
+                    v-else-if="contentItem.type == 'VIDEO'"
+                    class="contentItemTitleTitleRow-video"
                   >
-                    {{ contentItem.name }}
-                    <img :src="getContentObj(contentItem.contents).faceUrl" />
-                  </div>
-                  <div
-                    v-if="contentItem.isNeedStudyToday"
-                    class="contentItemstates"
-                  >
-                    今日必学
+                    <div class="contentVideoTitle">
+                      <div class="contentVideoTitleTxt">
+                        <img :src="redIcon" />
+                        <span>{{ contentItem.name }}</span>
+                      </div>
+                      <div
+                        v-if="contentItem.isNeedStudyToday"
+                        class="contentItemstates"
+                      >
+                        今日必学
+                      </div>
+                    </div>
+                    <div class="contentItem-video-img">
+                      <img
+                        class="img-bofang"
+                        :src="require('@/assets/image/learn/boFang.png')"
+                      />
+                      <img
+                        :src="getContentObj(contentItem.contents).faceUrl"
+                        fit="cover"
+                      />
+                    </div>
                   </div>
                 </div>
+
                 <div class="contentItemDescription">
                   <div class="contentItemDescriptionTime">
                     {{
@@ -96,7 +121,8 @@ export default {
       learnChildList: [],
       learnPage: 0,
       learnSize: 10,
-      isLoading: false
+      isLoading: false,
+      arrowRightPng: require("@/assets/image/learn/arrowRight.png")
     };
   },
   computed: {
@@ -250,6 +276,73 @@ export default {
         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%;
+        height: 9rem;
+        position: relative;
+        img {
+          width: 100%;
+          height: 9rem;
+        }
+        .img-bofang {
+          width: 2rem;
+          height: 2rem;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          margin: auto;
+        }
+      }
+    }
     .contentItemDescription {
       margin-top: 0.5rem;
       display: flex;

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

@@ -31,7 +31,10 @@
           {{ contentObj.contents }}
         </p>
         <div v-if="contentObj.type == 'VIDEO'">
-          <div class="learn-content-body-title p-content" style="margin-top: 0.5rem">
+          <div
+            class="learn-content-body-title p-content"
+            style="margin-top: 0.5rem"
+          >
             {{ contentObj.name }}
           </div>
           <video
@@ -574,7 +577,7 @@ export default {
       }
       video {
         width: 100%;
-        height: auto;
+        height: 300px;
       }
       .linkListItem {
         width: 100%;

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

@@ -52,9 +52,11 @@
                   <img :src="redIcon" />
                   <span>{{ contentItem.name }}</span>
                 </div>
-                <div class="contentVideoDK">
-                  <span>打开</span>
-                  <img :src="arrowRightPng" />
+                <div
+                  v-if="contentItem.isNeedStudyToday"
+                  class="contentItemstates"
+                >
+                  今日必学
                 </div>
               </div>
               <div class="contentItem-video-img">
@@ -72,7 +74,7 @@
               <div class="contentItemDescriptionTime">
                 {{
                   formateDatesFun(contentItem.createdTime) ||
-                    contentItem.createdTime
+                  contentItem.createdTime
                 }}
               </div>
               <div class="contentItemDescriptionStudyNeedTime">