采美百科视频添加

src/main/resources/static/css/encyclopedia/detail.css

@@ -57,6 +57,7 @@ img{cursor: pointer;}
 
 .article .section.related-video .content::after{content: "";display: block;clear:both;}
 .article .section.related-video .content .video-control{width: 338px;height: 230px;position: relative;background: #f1f1f1;float: left;margin: 24px 24px 0 0;}
+.article .section.related-video .content .video-control .video-title { position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background: rgba(0,0,0,0.39); text-align: center; line-height: 40px ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 16px; box-sizing: border-box;padding: 0 16px; }
 .article .section.related-video .content .video-control:nth-child(1),
 .article .section.related-video .content .video-control:nth-child(2),
 .article .section.related-video .content .video-control:nth-child(3){margin-top: 0;}
@@ -155,6 +156,7 @@ body{padding-top:40.3vw}
 .article .section.related-video .content .video-control:last-child{margin-right: 3.2vw;}
 .article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
 .article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 10.8vw;height: 10.8vw; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 10.8vw 10.8vw;}
+    .article .section.related-video .content .video-control .video-title { position: absolute; left: 0; bottom: 0; width: 100%; height: 8.8vw; background: rgba(0,0,0,0.39); text-align: center; line-height: 8.8vw ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 3.4vw; box-sizing: border-box;padding: 0 3.4vw; }
 
 .article .section.recommend {margin-top: 3.2vw;}
 .article .section .recommend-section {-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display: flex;padding: 2.4vw 0;border-top: 1px solid #B8BFCA;}

src/main/resources/static/js/encyclopedia/detail.js

@@ -78,4 +78,14 @@ $(function () {
     }
     initPreviewImage()
     // toggleNavigate('.navigate', 1000, middleScreenWidth, 80);
+
+    // 视频播放
+    $('.related-video .video-control .play').on('click', function(){
+        var videoUrl = $(this).siblings('video').attr('src');
+        $('#video-popup video').attr('src', videoUrl);
+        $('#video-popup').show();
+    })
+    $('#video-popup .close').on('click', function(){
+        $(this).parents('#video-popup').hide();
+    });
 });

src/main/resources/templates/encyclopedia/instrument-detail.html

@@ -47,29 +47,10 @@
             <div class="line"></div>
         </div>
         <div class="content">
-            <div class="video-control">
+            <div class="video-control" th:each="video: *{videoList}">
                 <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
+                <div class="video-title" th:text="${video.fileTitle}"></div>
+                <video th:src="${video.fileUrl}"></video>
             </div>
         </div>
     </section>

src/main/resources/templates/encyclopedia/product-detail.html

@@ -46,29 +46,10 @@
             <div class="line"></div>
         </div>
         <div class="content">
-            <div class="video-control">
+            <div class="video-control" th:each="video: *{videoList}">
                 <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
-            </div>
-            <div class="video-control">
-                <span class="play"></span>
-                <video></video>
+                <div class="video-title" th:text="${video.fileTitle}"></div>
+                <video th:src="${video.fileUrl}"></video>
             </div>
         </div>
     </section>
@@ -119,7 +100,7 @@
             <h2>产品档案</h2>
             <div class="line"></div>
         </div>
-        <table class="content">
+        <table class="content" th:if="${isPC}">
             <tr>
                 <td class="th">品牌</td>
                 <td class="td" th:text="*{brand}"></td>
@@ -141,8 +122,7 @@
                 </td>
             </tr>
         </table>
-        <!--
-        <div class="content">
+        <div class="content" th:unless="${isPC}">
             <div class="tr">
                 <div class="group">
                     <div class="th">品牌</div>
@@ -174,7 +154,6 @@
                 </div>
             </div>
         </div>
-        -->
     </section>
     <!-- 产品认证 -->
     <section class="section approve" th:unless="*{#arrays.isEmpty(authImageList)}">
@@ -399,7 +378,7 @@
     <div class="mask"></div>
     <span class="close"></span>
     <div class="content">
-        <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
+        <video controls></video>
     </div>
 </div>