云上美博会新增模板上测试

src/main/resources/static/css/activity/beautyTopic.css

@@ -367,7 +367,7 @@ a{color:#333;text-decoration:none}
 .banner-container .cm-container{height:100%;padding: 0;}
 .banner-container img{display:block;height:100%;width: 100%;}
 .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-.has-player::before{content:'';display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
+.has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
 .cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
 .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
 .cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
@@ -674,7 +674,7 @@ a{color:#333;text-decoration:none}
 .hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
 .hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
 .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-.has-player::before{content:'';display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
+.has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
 .cm-btn-box{text-align:center}
 .cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
 .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
@@ -757,8 +757,8 @@ a{color:#333;text-decoration:none}
 @media screen and (min-width: 768px) {
 .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.4);z-index: 99999}
 /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-.video-popup .content{max-width: 1200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
-.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .content{min-width: 800px;max-width: 1200px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
+.video-popup .content video{width: 100%;height: 100%;min-width: 800px;max-width: 1200px;display: block;}
 .video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
 }
 

src/main/resources/static/js/activity/beautyTopic.js

@@ -1,4 +1,7 @@
 'use strict';
+
+
+
 var activeApp = (function () {
     return new Vue({
         el: '#app',
@@ -40,6 +43,12 @@ var activeApp = (function () {
         mounted: function mounted() {
             this.pageLoaded();
             // this.showCouponEntry = true 优惠券弹窗入口2
+            // 关闭视频播放
+            this.$nextTick(function(){
+                $('#video-popup .close').on('click', function(){
+                    $(this).parents('#video-popup').hide();
+                });
+            })
         }
         ,
         created: function created() {
@@ -215,9 +224,15 @@ var activeApp = (function () {
                 };
             }
             ,
+            // 播放视频
+            onPlayVideo(link){
+                $('#video-popup video').attr('src', link);
+                $('#video-popup').show();
+            },
             // 处理link
             reallink: function reallink(link) {
-                return link ? link : 'javascript:void(0)';
+                if(!link) return 'javascript:void(0)';
+                return link;
             }
             ,
             handleToggleActive: function handleToggleActive(flag) {

src/main/resources/templates/activity/beautyTopic.html

@@ -573,8 +573,15 @@
                                                 class="bg-white hover-class aspect cm-relative"
                                                 :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
                                         >
-                                            <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
-                                                <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                                            <div v-if="fetchTemplate([30,31,32,33],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
+                                                <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                                                     v-if="isMobile"/>
+                                                <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                                                <div class="has-player"
+                                                     v-if="floorData.floorContent.templateClassify == 4"></div>
+                                            </div>
+                                            <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
+                                                <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
                                                      v-if="isMobile"/>
                                                 <img width="100%" height="100%" :src="item.image" alt="" v-else/>
                                                 <div class="has-player"
@@ -602,7 +609,7 @@
                                     <div class="bg-white aspect"
                                          :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
                                         <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
-                                            <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                                            <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
                                                  v-if="isMobile"/>
                                             <img width="100%" height="100%" :src="item.image" alt="" v-else/>
                                         </a>
@@ -621,7 +628,7 @@
                             </div>
                         </div>
                     </div>
-                    <!-- 左右滑动式 mobile 7-->
+                    <!-- 左右滑动式 mobile 7 27 31-->
                     <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
                         <div class="cm-p-a-4">
                             <div class="cm-scroll-container">
@@ -629,8 +636,15 @@
                                      :key="item_index">
                                     <div class="bg-white aspect cm-relative"
                                          :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
-                                        <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
-                                            <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                                        <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
+                                            <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                                                 v-if="isMobile"/>
+                                            <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                                            <div class="has-player"
+                                                 v-if="floorData.floorContent.templateClassify == 4"></div>
+                                        </div>
+                                        <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
+                                            <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
                                                  v-if="isMobile"/>
                                             <img width="100%" height="100%" :src="item.image" alt="" v-else/>
                                             <div class="has-player"
@@ -801,9 +815,9 @@
     </div>
 
     <!-- 视频播放弹窗 -->
-    <div class="video-popup" id="video-popup" v-if="false">
+    <div class="video-popup" style="display: none;" id="video-popup">
         <div class="mask"></div>
-        <span class="close" @click="onClosePlayer"></span>
+        <span class="close"></span>
         <div class="content">
             <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
         </div>