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

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

@@ -29,7 +29,8 @@ a{color:#333;text-decoration:none}
 .cm-container{width:100%;margin:0 auto}
 [class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
 .cm-floor .swiper-slide{ height: auto;}
-@media (max-width:560px){.cm-col-xs-1{width:1.66667%}
+@media (max-width:560px){
+.cm-col-xs-1{width:1.66667%}
 .cm-col-xs-2{width:3.33333%}
 .cm-col-xs-3{width:5%}
 .cm-col-xs-4{width:6.66667%}
@@ -372,8 +373,12 @@ a{color:#333;text-decoration:none}
 .cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
 .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
 .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
-}@media (max-width:992px){.cm-swiper-button-prev,.cm-swiper-button-next{display:none}
-}@media (min-width:560px){.cm-col-md-1{width:1.66667%}
+}
+@media (max-width:992px){
+.cm-swiper-button-prev,.cm-swiper-button-next{display:none}
+}
+@media (min-width:560px){
+.cm-col-md-1{width:1.66667%}
 .cm-col-md-2{width:3.33333%}
 .cm-col-md-3{width:5%}
 .cm-col-md-4{width:6.66667%}
@@ -719,8 +724,11 @@ a{color:#333;text-decoration:none}
 .cm-to-top:hover{background:#ff5c00}
 .cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
 .cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
-}@media (min-width:1200px){.cm-container{width:1140px}
-}.cm-tags{white-space:nowrap}
+}
+@media (min-width:1200px){
+.cm-container{width:1140px}
+}
+.cm-tags{white-space:nowrap}
 .cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
 .cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
 .cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
@@ -745,3 +753,19 @@ a{color:#333;text-decoration:none}
 .cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
 .cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
 .cm-prodcut-price .red { color: #f94b4b;}
+
+@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 .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+
+@media screen and (max-width: 768px) {
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+}

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

@@ -1 +1,4 @@
 
+class VideoPlayer extends HTMLElement {
+
+}

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

@@ -295,6 +295,26 @@ var layoutMapping = function () {
 			mobile: 0.51,
 			pc: 0.613,
 			swiper: '1-2-2-1'
+		},
+		'template-30': {
+			mobile: 0.78,
+			pc: 0.7,
+			swiper: '2-3-2-2'
+		},
+		'template-31': {
+			mobile: 0.778,
+			pc: 0.775,
+			swiper: '1-4-1-1'
+		},
+		'template-32': {
+			mobile: 0.6,
+			pc: 0.613,
+			swiper: '2-2-2-2'
+		},
+		'template-33': {
+			mobile: 0.51,
+			pc: 0.613,
+			swiper: '1-2-2-1'
 		}
 	};
 

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

@@ -800,6 +800,15 @@
         </div>
     </div>
 
+    <!-- 视频播放弹窗 -->
+    <div class="video-popup" id="video-popup" v-if="false">
+        <div class="mask"></div>
+        <span class="close" @click="onClosePlayer"></span>
+        <div class="content">
+            <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
+        </div>
+    </div>
+
     <!-- 返回顶部 -->
     <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
         <span class="cm-icon-bar"></span>