云上美博会页面提交

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

@@ -328,7 +328,7 @@ a{color:#333;text-decoration:none}
 .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:10px;height:16px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
 .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-96px}
 .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-125px}
-.cm-float-container{position:fixed;z-index:999;bottom:30%;right:15px}
+.cm-float-container{position:fixed;z-index:999;top:30%;right:15px}
 .cm-float-container .cm-slide{position:relative;width:12vw;height:12vw;margin:0.8vw 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
 .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
 .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
@@ -358,7 +358,13 @@ a{color:#333;text-decoration:none}
 .banner-container .banner{width:100vw;position:absolute;height:100%;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
 .banner-container .cm-container{height:100%;padding: 0;}
 .banner-container img{display:block;height:100%}
-
+.has-player{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3)}
+.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: 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;}
+.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%}
 .cm-col-md-2{width:3.33333%}
@@ -665,7 +671,7 @@ a{color:#333;text-decoration:none}
 .cm-btn-box .cm-toggle-btn:hover{color:#ff5c00;border-color:#ff5c00}
 .cm-btn-box .cm-toggle-btn:hover.down::after{background-position-x:-150px}
 .cm-btn-box .cm-toggle-btn:hover.up::after{background-position-x:-180px}
-.cm-float-container{position:fixed;z-index:999;bottom:30%;right:15px}
+.cm-float-container{position:fixed;z-index:999;top:30%;right:15px}
 .cm-float-container .cm-slide{position:relative;width:64px;height:64px;margin:6px 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
 .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
 .cm-float-container .cm-slide:hover .cm-tooltop{display:block}

src/main/resources/static/css/product/detail.h5.css

@@ -7,6 +7,7 @@ li{list-style:none}
 .productBox .imageBox{width:100%;height:100vw;position:relative}
 #swiperImage .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center}
 #swiperImage .swiper-wrapper img{width:auto;height:100vw;display:block}
+#swiperImage .swiper-wrapper .swiper-slide .cm-product-cover-tag{position:absolute;top: 3vw;right: 3vw;width: 15.9vw;height: 5.5vw;background: url(/img/activity/cm_cover_bg_h5.png) no-repeat center;background-size: 15.9vw;text-align: center;color: #fff;line-height: 5.5vw;font-size: 2vw;}
 .productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden}
 .productBox .detailBox .crumbs{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F}
 .productBox .detailBox .crumbs a{color:#93979F}

src/main/resources/static/css/product/detail.pc.css

@@ -7,8 +7,9 @@ li{list-style:none;}
 .productBox .imageBox{float:left;width:452px;height:545px;position:relative}
 .productBox .detailBox{float:right;width:686px}
 .productBox img{width:100%;height:100%;display:block}
-.productBox .bigImage{width:452px;height:452px;background:#F3F7FE;border: 1px solid #e4e4e4;}
+.productBox .bigImage{position:relative; width:452px;height:452px;background:#F3F7FE;border: 1px solid #e4e4e4;}
 .productBox .bigImage .mask{display:none;position:absolute;left:0;top:0;width:215px;height:215px;border:1px solid #aaa;background:rgba(255,208,22,.4);opacity:.5;filter:alpha(opacity:50);cursor:move}
+.productBox .bigImage .cm-product-cover-tag{position:absolute;top: 10px;right: 10px;width: 75px;height: 27px;background: url(/img/activity/cm_cover_bg_pc.png) no-repeat center;background-size: 75px;text-align: center;color: #fff;line-height: 27px;font-size: 12px;}
 .productBox .smallImage{height:79px;padding-top:14px;overflow:hidden}
 .productBox .smallImage ul{width:452px}
 .productBox .smallImage li{float:left;box-sizing:border-box;width:79px;height:79px;margin-left:14px;background:#F3F7FE;opacity:.5;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s}

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

@@ -9,6 +9,8 @@ var activeApp = (function () {
             isRequest: true,
             isLoading: true,
             // showScrollTop: false,
+            activityEntryVisiable:false,
+            contactVisiable:false,
             scrollTopSize:0,
             msg: 'hello world',
             src: './img/test.jpg',
@@ -99,9 +101,18 @@ var activeApp = (function () {
                         that.pageInfo = res.data.page;
                         that.isRequest = false;
                         that.makeVideoFetchMap();
+                        that.activityEntryVisiable = that.initActivityEntry(res.data.page.redPacketBeginTime,res.data.page.redPacketEndTime);
+                        that.contactVisiable = res.data.page.infoBarStatus === 1;
                     }
                 })
             },
+            // 初始化红包入口状态
+            initActivityEntry: function initActivityEntry(begin,end){
+                const nowTime = new Date().getTime();
+                const beginTime = new Date(begin).getTime();
+                const endTime = new Date(end).getTime();
+                return nowTime>=beginTime && nowTime<=endTime
+            },
             fetchTemplate: function fetchTemplate(list, type) {
                 return list.indexOf(parseInt(type)) !== -1;
             },

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

@@ -282,8 +282,8 @@ var layoutMapping = function () {
 			swiper: '2-3-2-2'
 		},
 		'template-27': {
-			mobile: 0.478,
-			pc: 0.733,
+			mobile: 0.778,
+			pc: 0.775,
 			swiper: '1-4-1-1'
 		},
 		'template-28': {

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

@@ -74,7 +74,7 @@
                             <div class="swiper-container" :id="'swiper-template-' + index" data-swiper-type="1-6-2-2">
                                 <div class="swiper-wrapper">
                                     <div class="swiper-slide" v-for="(pros , index) in floorData.floorImageList">
-                                        <a :href="reallink(pros.link)">
+                                        <a target="_blank" :href="reallink(pros.link)">
                                             <div class="cm-product-item hover-class bg-white">
                                                 <div class="aspect">
                                                     <img width="100%" height="100%" src="/img/activity/placeholder.png"
@@ -121,7 +121,7 @@
                                 >
                                     <div class="aspect"
                                          :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
-                                        <a :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
+                                        <a target="_blank" :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
                                             <img
                                                     width="100%"
                                                     height="100%"
@@ -143,7 +143,7 @@
                             <!-- banner END -->
                             <div class="cm-col-md-10 cm-col-xs-30" v-for="(pros , index) in makeList(floorData,index)">
                                 <div class="cm-p-a-4">
-                                    <a :href="pros.link">
+                                    <a target="_blank" :href="pros.link">
                                         <div class="cm-product-item hover-class bg-white">
                                             <div class="aspect">
                                                 <img width="100%" height="100%" src="/img/activity/placeholder.png"
@@ -177,7 +177,7 @@
                                 >
                                     <div class="aspect"
                                          :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
-                                        <a :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
+                                        <a target="_blank" :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
                                             <img
                                                     width="100%"
                                                     height="100%"
@@ -229,7 +229,7 @@
                                 <div class="swiper-wrapper">
                                     <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
                                          :key="item_index">
-                                        <a :href="reallink(item.link)">
+                                        <a target="_blank" :href="reallink(item.link)">
                                             <!-- 模板3 -->
                                             <div
                                                     class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
@@ -292,7 +292,7 @@
                                     v-for="(item, item_index) in makeList(floorData,index)"
                                     :key="item_index"
                             >
-                                <a :href="reallink(item.link)">
+                                <a target="_blank" :href="reallink(item.link)">
                                     <div class="cm-p-a-4">
                                         <!-- 3 -->
                                         <div
@@ -353,7 +353,7 @@
                             <div class="cm-scroll-container">
                                 <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
                                      :key="item_index">
-                                    <a :href="reallink(item.link)">
+                                    <a target="_blank" :href="reallink(item.link)">
                                         <div class="cm-article-item bg-white">
                                             <div class="cm-article-cover aspect"
                                                  :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
@@ -378,11 +378,11 @@
                 </template>
                 <!-- 图片楼层1 2 7 8 9 10  -->
                 <!-- fetchTemplate([1,2,7,8,9,10],floorData.floorContent.templateType) -->
-                <template v-if="fetchTemplate([1,2,7,8,9,10],floorData.floorContent.templateType)">
+                <template v-if="fetchTemplate([1,2,7,8,9,10,26,27,28,29],floorData.floorContent.templateType)">
                     <!-- 轮播式 mobile(1 2 9) pc(全部)-->
                     <div
                             class="cm-row cm-relative cm-swiper"
-                            v-show="!isMobile || (fetchTemplate([1,2,9],floorData.floorContent.templateType) && isMobile)"
+                            v-show="!isMobile || (fetchTemplate([1,2,9,26,28,29],floorData.floorContent.templateType) && isMobile)"
                     >
                         <div class="cm-p-a-4">
                             <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
@@ -402,7 +402,7 @@
                                                 class="bg-white hover-class aspect cm-relative"
                                                 :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
                                         >
-                                            <a :href="reallink(item.link)">
+                                            <a target="_blank" :href="reallink(item.link)">
                                                 <img width="100%" height="100%" :src="item.appletsImage" alt=""
                                                      v-if="isMobile"/>
                                                 <img width="100%" height="100%" :src="item.image" alt="" v-else/>
@@ -430,7 +430,7 @@
                                      :key="item_index">
                                     <div class="bg-white aspect"
                                          :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
-                                        <a :href="reallink(item.link)">
+                                        <a target="_blank" :href="reallink(item.link)">
                                             <img width="100%" height="100%" :src="item.appletsImage" alt=""
                                                  v-if="isMobile"/>
                                             <img width="100%" height="100%" :src="item.image" alt="" v-else/>
@@ -451,17 +451,19 @@
                         </div>
                     </div>
                     <!-- 左右滑动式 mobile 7-->
-                    <div class="cm-row" v-show="fetchTemplate([7],floorData.floorContent.templateType) && isMobile">
+                    <div class="cm-row" v-show="fetchTemplate([7,27],floorData.floorContent.templateType) && isMobile">
                         <div class="cm-p-a-4">
                             <div class="cm-scroll-container">
                                 <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
                                      :key="item_index">
-                                    <div class="bg-white aspect"
+                                    <div class="bg-white aspect cm-relative"
                                          :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
-                                        <a :href="reallink(item.link)">
+                                        <a target="_blank" :href="reallink(item.link)">
                                             <img width="100%" height="100%" :src="item.appletsImage" 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>
                                         </a>
                                     </div>
                                 </div>
@@ -495,7 +497,7 @@
                                                             class="bg-white aspect cm-relative"
                                                             :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
                                                     >
-                                                        <a :href="reallink(item.link)">
+                                                        <a target="_blank" :href="reallink(item.link)">
 																<span
                                                                         class="cm-cover-tag color1 cm-absolute cm-top-right"
                                                                         v-if="makeVideoStatus(floorData,i_index + 1) === 2"
@@ -542,7 +544,7 @@
                                                 class="bg-white aspect cm-relative cm-radius-4"
                                                 :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
                                         >
-                                            <a :href="reallink(item.link)">
+                                            <a target="_blank" :href="reallink(item.link)">
                                                 <span class="cm-cover-tag color2 cm-absolute cm-top-right">已开始</span>
                                                 <img width="100%" height="100%" :src="item.appletsImage" alt=""
                                                      v-if="isMobile"/>
@@ -559,42 +561,44 @@
         </div>
     </template>
     <!-- 侧边浮窗 -->
-    <div class="cm-float-container">
-        <div class="cm-slide">
+    <div class="cm-float-container" v-if="activityEntryVisiable || contactVisiable">
+        <div class="cm-slide" v-show="activityEntryVisiable">
             <div class="cm-toggle-btn" @click="handleToggleActive(true)"></div>
         </div>
-        <div class="cm-slide">
-            <div class="cm-toggle-btn"></div>
-            <div class="cm-tooltop">
-                <div class="cm-tooltop-content cm-tooltop-1">
-                    <div class="cm-item">展会咨询电话：13766896620</div>
-                    <i></i>
-                    <div class="cm-item">业务咨询电话：13766896620</div>
+        <template v-if="contactVisiable">
+            <div class="cm-slide">
+                <div class="cm-toggle-btn"></div>
+                <div class="cm-tooltop">
+                    <div class="cm-tooltop-content cm-tooltop-1">
+                        <div class="cm-item">展会咨询电话：13766896620</div>
+                        <i></i>
+                        <div class="cm-item">业务咨询电话：13766896620</div>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="cm-slide">
-            <div class="cm-toggle-btn"></div>
-            <div class="cm-tooltop">
-                <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
-                    <div class="cm-item cm-left">
-                        <img width="108" height="108" src="/img/activity/wechat_1.jpg" alt=""/>
-                        <span>展会咨询微信</span>
-                    </div>
-                    <div class="cm-left line"></div>
-                    <div class="cm-item cm-left">
-                        <img width="108" height="108" src="/img/activity/wechat_1.jpg" alt=""/>
-                        <span>业务咨询微信</span>
+            <div class="cm-slide">
+                <div class="cm-toggle-btn"></div>
+                <div class="cm-tooltop">
+                    <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
+                        <div class="cm-item cm-left">
+                            <img width="108" height="108" src="/img/activity/wechat_1.jpg" alt=""/>
+                            <span>展会咨询微信</span>
+                        </div>
+                        <div class="cm-left line"></div>
+                        <div class="cm-item cm-left">
+                            <img width="108" height="108" src="/img/activity/wechat_1.jpg" alt=""/>
+                            <span>业务咨询微信</span>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </template>
     </div>
     <!-- 获取入口图标 -->
-    <div class="cm-entry" v-show="isActive">
+    <div class="cm-entry" v-show="activityEntryVisiable && isActive">
         <div class="cm-icon-content">
             <span class="cm-close" @click="handleToggleActive(false)"></span>
-            <a href="#">
+            <a target="_blank" href="#">
                 <img src="/img/activity/pc_icon.png" alt=""/>
             </a>
         </div>
@@ -626,8 +630,8 @@
 <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/mixin.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/index.js(v=${version})}"></script>
 <script>
-    $('#cm-to-top').on("click",function () {
-        $("html,body").animate({scrollTop:0},500);
+    $('#cm-to-top').on("click", function () {
+        $("html,body").animate({scrollTop: 0}, 500);
     });
 </script>
 </body>

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

@@ -23,11 +23,13 @@
                 <div v-if="isPC" class="bigImage">
                     <img :src="images[0]">
                     <span class="mask"></span>
+                    <span class="cm-product-cover-tag">云上美博会</span>
                 </div>
                 <div id="swiperImage" class="smallImage swiper-container">
                     <ul class="swiper-wrapper clear">
                         <li class="swiper-slide mfc" v-for="img in images">
                             <img :src="img">
+                            <span class="cm-product-cover-tag" v-if="!isPC">云上美博会</span>
                         </li>
                     </ul>
                     <div class="swiper-pagination mfc"></div>