Merge remote-tracking branch 'remotes/origin/developerA' into developerB

# Conflicts:
#	src/main/java/com/caimei/www/controller/unlimited/ProductController.java
#	src/main/resources/config/dev/application-dev.yml

src/main/java/com/caimei/www/controller/RedirectController.java

@@ -108,9 +108,13 @@ public class RedirectController {
     public String activityTopics2(@RequestParam("id") Integer id) {
         return "redirect:/product/activity-"+id+".html";
     }
-    @GetMapping("/product/beautytopic.html")
-    public String activityTopics3() {
-        return "redirect:/product/beauty.html";
+
+    /**
+     * 云上美博会
+     */
+    @GetMapping("/cmpage/info-7-{id}.html")
+    public String activityTopics3(@PathVariable("id") Integer id) {
+        return "redirect:/product/beauty-" + id + ".html";
     }
 
     /**

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -30,6 +30,7 @@ public class ProductController extends BaseController {
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
     private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
     private static final String ACTIVITY_TOP_PATH = "activity/activityTopic";
+    private static final String CLOUD_BEAUTY_PATH = "activity/beautyTopic";
     /** 优惠券活动商品列表 */
     private static final String PRODUCT_COUPON = "product/product-coupon";
     /**
@@ -158,4 +159,18 @@ public class ProductController extends BaseController {
         return ACTIVITY_TOP_PATH;
     }
 
+    /**
+     * 云上美博会
+     */
+    @GetMapping("/product/beauty-{id}.html")
+    public String getCloudBeautyPath(final Model model, @PathVariable("id") Integer id) {
+        // 活动专题页
+        Integer pageId = singlePageService.getBeautyPageIdById(id);
+        if (pageId == null) {
+            return super.errorPath();
+        }
+        model.addAttribute("pageId", id);
+        return CLOUD_BEAUTY_PATH;
+    }
+
 }

src/main/java/com/caimei/www/mapper/SinglePageDao.java

@@ -101,4 +101,9 @@ public interface SinglePageDao {
     Integer getActivityPageIdById(Integer id);
 
     Integer getPageTypeSort(Integer pageId);
+
+    /**
+     * 云上美博会
+     */
+    Integer getBeautyPageIdById(Integer id);
 }

src/main/java/com/caimei/www/service/page/SinglePageService.java

@@ -40,4 +40,9 @@ public interface SinglePageService {
     Integer getActivityPageIdById(Integer id);
 
     Integer getPageTypeSort(Integer pageId);
+
+    /**
+     * 云上美博会
+     */
+    Integer getBeautyPageIdById(Integer id);
 }

src/main/java/com/caimei/www/service/page/impl/SinglePageServiceImpl.java

@@ -132,4 +132,11 @@ public class SinglePageServiceImpl implements SinglePageService {
         return singlePageDao.getPageTypeSort(pageId);
     }
 
+    @Override
+    public Integer getBeautyPageIdById(Integer id) {
+        if (id == null) {
+            return null;
+        }
+        return singlePageDao.getBeautyPageIdById(id);
+    }
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -95,5 +95,11 @@
         select typeSort from cm_page
         where id = #{pageId} and enabledStatus = '1'
     </select>
+    <select id="getBeautyPageIdById" resultType="java.lang.Integer">
+        select id from cm_page a
+        where
+            a.type=7 and a.enabledStatus=1
+          and a.id=#{id}
+    </select>
 
 </mapper>

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

@@ -0,0 +1,734 @@
+body{background:#f5f5f5}
+a{color:#333;text-decoration:none}
+.swiper-wrapper{height: auto;}
+.cm-left{float:left}
+.cm-right{float:right}
+.cm-clearfix::after,.cm-container::after,.cm-row::after{content:'';display:block;clear:both}
+.cm-hidden,.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{overflow:hidden}
+.cm-none{display:none}
+.cm-not-visible{visibility:hidden}
+.cm-flex,.cm-flex-j-between{display:-webkit-box;display:-ms-flexbox;display:flex}
+.bg-white{background-color:#fff}
+.cm-flex-j-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.cm-flex-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.text-justify{text-align:justify}
+.cm-radius-4{border-radius:4px;overflow:hidden}
+.cm-absolute{position:absolute}
+.cm-relative{position:relative}
+.cm-top,.cm-top-left,.cm-top-right{top:0}
+.cm-bottom,.cm-bottom-right,.cm-bottom-left{bottom:0}
+.cm-left,.cm-top-left,.cm-bottom-left{left:0}
+.cm-right,.cm-top-right,.cm-bottom-right{right:0}
+.bg-white{background-color:#fff}
+.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}
+.cm-text-ellipsis-1{-webkit-line-clamp:1}
+.cm-text-ellipsis-2{-webkit-line-clamp:2}
+.cm-text-ellipsis-3{-webkit-line-clamp:3}
+.cm-text-ellipsis-4{-webkit-line-clamp:4}
+.cm-img-responsive{max-width:100%;height:auto;display:block}
+.cm-container{width:100%;margin:0 auto}
+[class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
+@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%}
+.cm-col-xs-5{width:8.33333%}
+.cm-col-xs-6{width:10%}
+.cm-col-xs-7{width:11.66667%}
+.cm-col-xs-8{width:13.33333%}
+.cm-col-xs-9{width:15%}
+.cm-col-xs-10{width:16.66667%}
+.cm-col-xs-11{width:18.33333%}
+.cm-col-xs-12{width:20%}
+.cm-col-xs-13{width:21.66667%}
+.cm-col-xs-14{width:23.33333%}
+.cm-col-xs-15{width:25%}
+.cm-col-xs-16{width:26.66667%}
+.cm-col-xs-17{width:28.33333%}
+.cm-col-xs-18{width:30%}
+.cm-col-xs-19{width:31.66667%}
+.cm-col-xs-20{width:33.33333%}
+.cm-col-xs-21{width:35%}
+.cm-col-xs-22{width:36.66667%}
+.cm-col-xs-23{width:38.33333%}
+.cm-col-xs-24{width:40%}
+.cm-col-xs-25{width:41.66667%}
+.cm-col-xs-26{width:43.33333%}
+.cm-col-xs-27{width:45%}
+.cm-col-xs-28{width:46.66667%}
+.cm-col-xs-29{width:48.33333%}
+.cm-col-xs-30{width:50%}
+.cm-col-xs-31{width:51.66667%}
+.cm-col-xs-32{width:53.33333%}
+.cm-col-xs-33{width:55%}
+.cm-col-xs-34{width:56.66667%}
+.cm-col-xs-35{width:58.33333%}
+.cm-col-xs-36{width:60%}
+.cm-col-xs-37{width:61.66667%}
+.cm-col-xs-38{width:63.33333%}
+.cm-col-xs-39{width:65%}
+.cm-col-xs-40{width:66.66667%}
+.cm-col-xs-41{width:68.33333%}
+.cm-col-xs-42{width:70%}
+.cm-col-xs-43{width:71.66667%}
+.cm-col-xs-44{width:73.33333%}
+.cm-col-xs-45{width:75%}
+.cm-col-xs-46{width:76.66667%}
+.cm-col-xs-47{width:78.33333%}
+.cm-col-xs-48{width:80%}
+.cm-col-xs-49{width:81.66667%}
+.cm-col-xs-50{width:83.33333%}
+.cm-col-xs-51{width:85%}
+.cm-col-xs-52{width:86.66667%}
+.cm-col-xs-53{width:88.33333%}
+.cm-col-xs-54{width:90%}
+.cm-col-xs-55{width:91.66667%}
+.cm-col-xs-56{width:93.33333%}
+.cm-col-xs-57{width:95%}
+.cm-col-xs-58{width:96.66667%}
+.cm-col-xs-59{width:98.33333%}
+.cm-col-xs-60{width:100%}
+.cm-m-a-1{margin:0.25vw}
+.cm-p-a-1{padding:0.25vw}
+.cm-m-t-1{margin-top:0.25vw}
+.cm-p-t-1{padding-top:0.25vw}
+.cm-m-b-1{margin-bottom:0.25vw}
+.cm-p-b-1{padding-bottom:0.25vw}
+.cm-m-l-1{margin-left:0.25vw}
+.cm-p-l-1{padding-left:0.25vw}
+.cm-m-r-1{margin-right:0.25vw}
+.cm-p-r-1{padding-right:0.25vw}
+.cm-m-a-2{margin:0.5vw}
+.cm-p-a-2{padding:0.5vw}
+.cm-m-t-2{margin-top:0.5vw}
+.cm-p-t-2{padding-top:0.5vw}
+.cm-m-b-2{margin-bottom:0.5vw}
+.cm-p-b-2{padding-bottom:0.5vw}
+.cm-m-l-2{margin-left:0.5vw}
+.cm-p-l-2{padding-left:0.5vw}
+.cm-m-r-2{margin-right:0.5vw}
+.cm-p-r-2{padding-right:0.5vw}
+.cm-m-a-3{margin:0.75vw}
+.cm-p-a-3{padding:0.75vw}
+.cm-m-t-3{margin-top:0.75vw}
+.cm-p-t-3{padding-top:0.75vw}
+.cm-m-b-3{margin-bottom:0.75vw}
+.cm-p-b-3{padding-bottom:0.75vw}
+.cm-m-l-3{margin-left:0.75vw}
+.cm-p-l-3{padding-left:0.75vw}
+.cm-m-r-3{margin-right:0.75vw}
+.cm-p-r-3{padding-right:0.75vw}
+.cm-m-a-4{margin:1vw}
+.cm-p-a-4{padding:1vw}
+.cm-m-t-4{margin-top:1vw}
+.cm-p-t-4{padding-top:1vw}
+.cm-m-b-4{margin-bottom:1vw}
+.cm-p-b-4{padding-bottom:1vw}
+.cm-m-l-4{margin-left:1vw}
+.cm-p-l-4{padding-left:1vw}
+.cm-m-r-4{margin-right:1vw}
+.cm-p-r-4{padding-right:1vw}
+.cm-m-a-5{margin:1.25vw}
+.cm-p-a-5{padding:1.25vw}
+.cm-m-t-5{margin-top:1.25vw}
+.cm-p-t-5{padding-top:1.25vw}
+.cm-m-b-5{margin-bottom:1.25vw}
+.cm-p-b-5{padding-bottom:1.25vw}
+.cm-m-l-5{margin-left:1.25vw}
+.cm-p-l-5{padding-left:1.25vw}
+.cm-m-r-5{margin-right:1.25vw}
+.cm-p-r-5{padding-right:1.25vw}
+.cm-m-a-6{margin:1.5vw}
+.cm-p-a-6{padding:1.5vw}
+.cm-m-t-6{margin-top:1.5vw}
+.cm-p-t-6{padding-top:1.5vw}
+.cm-m-b-6{margin-bottom:1.5vw}
+.cm-p-b-6{padding-bottom:1.5vw}
+.cm-m-l-6{margin-left:1.5vw}
+.cm-p-l-6{padding-left:1.5vw}
+.cm-m-r-6{margin-right:1.5vw}
+.cm-p-r-6{padding-right:1.5vw}
+.cm-m-a-7{margin:1.75vw}
+.cm-p-a-7{padding:1.75vw}
+.cm-m-t-7{margin-top:1.75vw}
+.cm-p-t-7{padding-top:1.75vw}
+.cm-m-b-7{margin-bottom:1.75vw}
+.cm-p-b-7{padding-bottom:1.75vw}
+.cm-m-l-7{margin-left:1.75vw}
+.cm-p-l-7{padding-left:1.75vw}
+.cm-m-r-7{margin-right:1.75vw}
+.cm-p-r-7{padding-right:1.75vw}
+.cm-m-a-8{margin:2vw}
+.cm-p-a-8{padding:2vw}
+.cm-m-t-8{margin-top:2vw}
+.cm-p-t-8{padding-top:2vw}
+.cm-m-b-8{margin-bottom:2vw}
+.cm-p-b-8{padding-bottom:2vw}
+.cm-m-l-8{margin-left:2vw}
+.cm-p-l-8{padding-left:2vw}
+.cm-m-r-8{margin-right:2vw}
+.cm-p-r-8{padding-right:2vw}
+.cm-m-a-9{margin:2.25vw}
+.cm-p-a-9{padding:2.25vw}
+.cm-m-t-9{margin-top:2.25vw}
+.cm-p-t-9{padding-top:2.25vw}
+.cm-m-b-9{margin-bottom:2.25vw}
+.cm-p-b-9{padding-bottom:2.25vw}
+.cm-m-l-9{margin-left:2.25vw}
+.cm-p-l-9{padding-left:2.25vw}
+.cm-m-r-9{margin-right:2.25vw}
+.cm-p-r-9{padding-right:2.25vw}
+.cm-m-a-10{margin:2.5vw}
+.cm-p-a-10{padding:2.5vw}
+.cm-m-t-10{margin-top:2.5vw}
+.cm-p-t-10{padding-top:2.5vw}
+.cm-m-b-10{margin-bottom:2.5vw}
+.cm-p-b-10{padding-bottom:2.5vw}
+.cm-m-l-10{margin-left:2.5vw}
+.cm-p-l-10{padding-left:2.5vw}
+.cm-m-r-10{margin-right:2.5vw}
+.cm-p-r-10{padding-right:2.5vw}
+.cm-m-a-11{margin:2.75vw}
+.cm-p-a-11{padding:2.75vw}
+.cm-m-t-11{margin-top:2.75vw}
+.cm-p-t-11{padding-top:2.75vw}
+.cm-m-b-11{margin-bottom:2.75vw}
+.cm-p-b-11{padding-bottom:2.75vw}
+.cm-m-l-11{margin-left:2.75vw}
+.cm-p-l-11{padding-left:2.75vw}
+.cm-m-r-11{margin-right:2.75vw}
+.cm-p-r-11{padding-right:2.75vw}
+.cm-m-a-12{margin:3vw}
+.cm-p-a-12{padding:3vw}
+.cm-m-t-12{margin-top:3vw}
+.cm-p-t-12{padding-top:3vw}
+.cm-m-b-12{margin-bottom:3vw}
+.cm-p-b-12{padding-bottom:3vw}
+.cm-m-l-12{margin-left:3vw}
+.cm-p-l-12{padding-left:3vw}
+.cm-m-r-12{margin-right:3vw}
+.cm-p-r-12{padding-right:3vw}
+.cm-m-a-13{margin:3.25vw}
+.cm-p-a-13{padding:3.25vw}
+.cm-m-t-13{margin-top:3.25vw}
+.cm-p-t-13{padding-top:3.25vw}
+.cm-m-b-13{margin-bottom:3.25vw}
+.cm-p-b-13{padding-bottom:3.25vw}
+.cm-m-l-13{margin-left:3.25vw}
+.cm-p-l-13{padding-left:3.25vw}
+.cm-m-r-13{margin-right:3.25vw}
+.cm-p-r-13{padding-right:3.25vw}
+.cm-m-a-14{margin:3.5vw}
+.cm-p-a-14{padding:3.5vw}
+.cm-m-t-14{margin-top:3.5vw}
+.cm-p-t-14{padding-top:3.5vw}
+.cm-m-b-14{margin-bottom:3.5vw}
+.cm-p-b-14{padding-bottom:3.5vw}
+.cm-m-l-14{margin-left:3.5vw}
+.cm-p-l-14{padding-left:3.5vw}
+.cm-m-r-14{margin-right:3.5vw}
+.cm-p-r-14{padding-right:3.5vw}
+.cm-m-a-15{margin:3.75vw}
+.cm-p-a-15{padding:3.75vw}
+.cm-m-t-15{margin-top:3.75vw}
+.cm-p-t-15{padding-top:3.75vw}
+.cm-m-b-15{margin-bottom:3.75vw}
+.cm-p-b-15{padding-bottom:3.75vw}
+.cm-m-l-15{margin-left:3.75vw}
+.cm-p-l-15{padding-left:3.75vw}
+.cm-m-r-15{margin-right:3.75vw}
+.cm-p-r-15{padding-right:3.75vw}
+.cm-m-a-16{margin:4vw}
+.cm-p-a-16{padding:4vw}
+.cm-m-t-16{margin-top:4vw}
+.cm-p-t-16{padding-top:4vw}
+.cm-m-b-16{margin-bottom:4vw}
+.cm-p-b-16{padding-bottom:4vw}
+.cm-m-l-16{margin-left:4vw}
+.cm-p-l-16{padding-left:4vw}
+.cm-m-r-16{margin-right:4vw}
+.cm-p-r-16{padding-right:4vw}
+.cm-m-a-17{margin:4.25vw}
+.cm-p-a-17{padding:4.25vw}
+.cm-m-t-17{margin-top:4.25vw}
+.cm-p-t-17{padding-top:4.25vw}
+.cm-m-b-17{margin-bottom:4.25vw}
+.cm-p-b-17{padding-bottom:4.25vw}
+.cm-m-l-17{margin-left:4.25vw}
+.cm-p-l-17{padding-left:4.25vw}
+.cm-m-r-17{margin-right:4.25vw}
+.cm-p-r-17{padding-right:4.25vw}
+.cm-m-a-18{margin:4.5vw}
+.cm-p-a-18{padding:4.5vw}
+.cm-m-t-18{margin-top:4.5vw}
+.cm-p-t-18{padding-top:4.5vw}
+.cm-m-b-18{margin-bottom:4.5vw}
+.cm-p-b-18{padding-bottom:4.5vw}
+.cm-m-l-18{margin-left:4.5vw}
+.cm-p-l-18{padding-left:4.5vw}
+.cm-m-r-18{margin-right:4.5vw}
+.cm-p-r-18{padding-right:4.5vw}
+.cm-m-a-19{margin:4.75vw}
+.cm-p-a-19{padding:4.75vw}
+.cm-m-t-19{margin-top:4.75vw}
+.cm-p-t-19{padding-top:4.75vw}
+.cm-m-b-19{margin-bottom:4.75vw}
+.cm-p-b-19{padding-bottom:4.75vw}
+.cm-m-l-19{margin-left:4.75vw}
+.cm-p-l-19{padding-left:4.75vw}
+.cm-m-r-19{margin-right:4.75vw}
+.cm-p-r-19{padding-right:4.75vw}
+.cm-m-a-20{margin:5vw}
+.cm-p-a-20{padding:5vw}
+.cm-m-t-20{margin-top:5vw}
+.cm-p-t-20{padding-top:5vw}
+.cm-m-b-20{margin-bottom:5vw}
+.cm-p-b-20{padding-bottom:5vw}
+.cm-m-l-20{margin-left:5vw}
+.cm-p-l-20{padding-left:5vw}
+.cm-m-r-20{margin-right:5vw}
+.cm-p-r-20{padding-right:5vw}
+.p-icon{display:inline-block;width:66px;height:22px;vertical-align:middle}
+.p-icon::before{content:'';display:inline-block;width:66px;height:22px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+.p-icon.i1::before{background-position-y:-714px}
+.p-icon.i2::before{background-position-y:-744px}
+.p-icon.i3::before{background-position-y:-774px}
+.p-icon.i4::before{background-position-y:-804px}
+.p-icon.i5::before{background-position-y:-834px}
+.cm-container{padding-left:1vw;padding-right:1vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-floor{padding:3.2vw 0}
+.cm-p-a{padding:1vw}
+.cm-m-a{padding:1vw}
+.cm-floor-title .cm-title{font-size:5vw;color:#4a4f58;font-weight:700;line-height:7.5vw;padding-top:1vw;padding-bottom:1vw}
+.cm-floor-title .cm-subtitle{font-size:4vw;color:#93979f;padding-top:1vw;padding-bottom:1vw}
+.cm-article-item{overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-article-item .cm-article-title{font-size:3.5vw;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+.cm-article-item .cm-article-desc{font-size:2.5vw;color:#93979f;line-height:2em;text-align:justify}
+.cm-article-item .cm-article-desc.h56{height:10.5vw}
+.cm-article-item .cm-article-cover.cover-168-168{width:27vw;height:27vw}
+.cm-article-item.h200{height:33vw}
+.cm-article-item .cm-line{display:none;height:1px;background-color:#f0f0f0}
+.cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+.cm-product-item .cm-product-title{font-size:3vw;color:#4a4f58;line-height:5vw;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-product-item .cm-prodcut-price{font-size:3vw;font-weight:bold}
+.cm-product-item .h20{height:20px}
+.cm-product-item .h24{height:24px}
+.cm-product-item .h44{height:10vw}
+.swiper-container{padding-bottom:8vw}
+.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+.cm-scroll-container::-webkit-scrollbar{display:none}
+.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+.cm-cover-tag{width:11vw;height:4vw;font-size:3vw;line-height:4vw;padding:0.5vw 1vw;border-radius:4px}
+.cm-tabs{height:6vw}
+.cm-tabs .cm-tab{font-size:3vw;width:12vw;height:6vw;line-height:6vw;text-align:center}
+.cm-btn-box{text-align:center}
+.cm-btn-box .cm-toggle-btn{width:20vw;height:6vw;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:6vw;font-size:3vw;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: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;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}
+.cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+.cm-float-container .cm-slide:nth-child(1){height:13.2vw;background:url(/img/activity/pc_note.png) no-repeat center;background-size:12vw}
+.cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+.cm-float-container .cm-tooltop{position:absolute;padding:3.5vw;background:#ff5c00;top:0;right:16vw;border-radius:6px;display:none}
+.cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+.cm-float-container .cm-tooltop .cm-tooltop-content{font-size:2.2vw;color:#fff}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:51.6vw}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:2.5vw 0}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{text-align:center;width:40.8vw}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:11vw;margin:3vw 3vw 0;width:1px;background:#f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:inline-block;width:16.4vw;height:16.4vw}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:2vw}
+.cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5)}
+.cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.cm-entry .cm-icon-content img{width:100%}
+.cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-5vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
+.cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
+.cm-footer img{width:12vw}
+.banner-container{position:relative;width:100vw;height:45vw;background:pink;overflow:hidden}
+.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%;}
+.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%}
+.cm-col-md-3{width:5%}
+.cm-col-md-4{width:6.66667%}
+.cm-col-md-5{width:8.33333%}
+.cm-col-md-6{width:10%}
+.cm-col-md-7{width:11.66667%}
+.cm-col-md-8{width:13.33333%}
+.cm-col-md-9{width:15%}
+.cm-col-md-10{width:16.66667%}
+.cm-col-md-11{width:18.33333%}
+.cm-col-md-12{width:20%}
+.cm-col-md-13{width:21.66667%}
+.cm-col-md-14{width:23.33333%}
+.cm-col-md-15{width:25%}
+.cm-col-md-16{width:26.66667%}
+.cm-col-md-17{width:28.33333%}
+.cm-col-md-18{width:30%}
+.cm-col-md-19{width:31.66667%}
+.cm-col-md-20{width:33.33333%}
+.cm-col-md-21{width:35%}
+.cm-col-md-22{width:36.66667%}
+.cm-col-md-23{width:38.33333%}
+.cm-col-md-24{width:40%}
+.cm-col-md-25{width:41.66667%}
+.cm-col-md-26{width:43.33333%}
+.cm-col-md-27{width:45%}
+.cm-col-md-28{width:46.66667%}
+.cm-col-md-29{width:48.33333%}
+.cm-col-md-30{width:50%}
+.cm-col-md-31{width:51.66667%}
+.cm-col-md-32{width:53.33333%}
+.cm-col-md-33{width:55%}
+.cm-col-md-34{width:56.66667%}
+.cm-col-md-35{width:58.33333%}
+.cm-col-md-36{width:60%}
+.cm-col-md-37{width:61.66667%}
+.cm-col-md-38{width:63.33333%}
+.cm-col-md-39{width:65%}
+.cm-col-md-40{width:66.66667%}
+.cm-col-md-41{width:68.33333%}
+.cm-col-md-42{width:70%}
+.cm-col-md-43{width:71.66667%}
+.cm-col-md-44{width:73.33333%}
+.cm-col-md-45{width:75%}
+.cm-col-md-46{width:76.66667%}
+.cm-col-md-47{width:78.33333%}
+.cm-col-md-48{width:80%}
+.cm-col-md-49{width:81.66667%}
+.cm-col-md-50{width:83.33333%}
+.cm-col-md-51{width:85%}
+.cm-col-md-52{width:86.66667%}
+.cm-col-md-53{width:88.33333%}
+.cm-col-md-54{width:90%}
+.cm-col-md-55{width:91.66667%}
+.cm-col-md-56{width:93.33333%}
+.cm-col-md-57{width:95%}
+.cm-col-md-58{width:96.66667%}
+.cm-col-md-59{width:98.33333%}
+.cm-col-md-60{width:100%}
+.cm-m-a-1{margin:2px}
+.cm-p-a-1{padding:2px}
+.cm-m-t-1{margin-top:2px}
+.cm-p-t-1{padding-top:2px}
+.cm-m-b-1{margin-bottom:2px}
+.cm-p-b-1{padding-bottom:2px}
+.cm-m-l-1{margin-left:2px}
+.cm-p-l-1{padding-left:2px}
+.cm-m-r-1{margin-right:2px}
+.cm-p-r-1{padding-right:2px}
+.cm-m-a-2{margin:4px}
+.cm-p-a-2{padding:4px}
+.cm-m-t-2{margin-top:4px}
+.cm-p-t-2{padding-top:4px}
+.cm-m-b-2{margin-bottom:4px}
+.cm-p-b-2{padding-bottom:4px}
+.cm-m-l-2{margin-left:4px}
+.cm-p-l-2{padding-left:4px}
+.cm-m-r-2{margin-right:4px}
+.cm-p-r-2{padding-right:4px}
+.cm-m-a-3{margin:6px}
+.cm-p-a-3{padding:6px}
+.cm-m-t-3{margin-top:6px}
+.cm-p-t-3{padding-top:6px}
+.cm-m-b-3{margin-bottom:6px}
+.cm-p-b-3{padding-bottom:6px}
+.cm-m-l-3{margin-left:6px}
+.cm-p-l-3{padding-left:6px}
+.cm-m-r-3{margin-right:6px}
+.cm-p-r-3{padding-right:6px}
+.cm-m-a-4{margin:8px}
+.cm-p-a-4{padding:8px}
+.cm-m-t-4{margin-top:8px}
+.cm-p-t-4{padding-top:8px}
+.cm-m-b-4{margin-bottom:8px}
+.cm-p-b-4{padding-bottom:8px}
+.cm-m-l-4{margin-left:8px}
+.cm-p-l-4{padding-left:8px}
+.cm-m-r-4{margin-right:8px}
+.cm-p-r-4{padding-right:8px}
+.cm-m-a-5{margin:10px}
+.cm-p-a-5{padding:10px}
+.cm-m-t-5{margin-top:10px}
+.cm-p-t-5{padding-top:10px}
+.cm-m-b-5{margin-bottom:10px}
+.cm-p-b-5{padding-bottom:10px}
+.cm-m-l-5{margin-left:10px}
+.cm-p-l-5{padding-left:10px}
+.cm-m-r-5{margin-right:10px}
+.cm-p-r-5{padding-right:10px}
+.cm-m-a-6{margin:12px}
+.cm-p-a-6{padding:12px}
+.cm-m-t-6{margin-top:12px}
+.cm-p-t-6{padding-top:12px}
+.cm-m-b-6{margin-bottom:12px}
+.cm-p-b-6{padding-bottom:12px}
+.cm-m-l-6{margin-left:12px}
+.cm-p-l-6{padding-left:12px}
+.cm-m-r-6{margin-right:12px}
+.cm-p-r-6{padding-right:12px}
+.cm-m-a-7{margin:14px}
+.cm-p-a-7{padding:14px}
+.cm-m-t-7{margin-top:14px}
+.cm-p-t-7{padding-top:14px}
+.cm-m-b-7{margin-bottom:14px}
+.cm-p-b-7{padding-bottom:14px}
+.cm-m-l-7{margin-left:14px}
+.cm-p-l-7{padding-left:14px}
+.cm-m-r-7{margin-right:14px}
+.cm-p-r-7{padding-right:14px}
+.cm-m-a-8{margin:16px}
+.cm-p-a-8{padding:16px}
+.cm-m-t-8{margin-top:16px}
+.cm-p-t-8{padding-top:16px}
+.cm-m-b-8{margin-bottom:16px}
+.cm-p-b-8{padding-bottom:16px}
+.cm-m-l-8{margin-left:16px}
+.cm-p-l-8{padding-left:16px}
+.cm-m-r-8{margin-right:16px}
+.cm-p-r-8{padding-right:16px}
+.cm-m-a-9{margin:18px}
+.cm-p-a-9{padding:18px}
+.cm-m-t-9{margin-top:18px}
+.cm-p-t-9{padding-top:18px}
+.cm-m-b-9{margin-bottom:18px}
+.cm-p-b-9{padding-bottom:18px}
+.cm-m-l-9{margin-left:18px}
+.cm-p-l-9{padding-left:18px}
+.cm-m-r-9{margin-right:18px}
+.cm-p-r-9{padding-right:18px}
+.cm-m-a-10{margin:20px}
+.cm-p-a-10{padding:20px}
+.cm-m-t-10{margin-top:20px}
+.cm-p-t-10{padding-top:20px}
+.cm-m-b-10{margin-bottom:20px}
+.cm-p-b-10{padding-bottom:20px}
+.cm-m-l-10{margin-left:20px}
+.cm-p-l-10{padding-left:20px}
+.cm-m-r-10{margin-right:20px}
+.cm-p-r-10{padding-right:20px}
+.cm-m-a-11{margin:22px}
+.cm-p-a-11{padding:22px}
+.cm-m-t-11{margin-top:22px}
+.cm-p-t-11{padding-top:22px}
+.cm-m-b-11{margin-bottom:22px}
+.cm-p-b-11{padding-bottom:22px}
+.cm-m-l-11{margin-left:22px}
+.cm-p-l-11{padding-left:22px}
+.cm-m-r-11{margin-right:22px}
+.cm-p-r-11{padding-right:22px}
+.cm-m-a-12{margin:24px}
+.cm-p-a-12{padding:24px}
+.cm-m-t-12{margin-top:24px}
+.cm-p-t-12{padding-top:24px}
+.cm-m-b-12{margin-bottom:24px}
+.cm-p-b-12{padding-bottom:24px}
+.cm-m-l-12{margin-left:24px}
+.cm-p-l-12{padding-left:24px}
+.cm-m-r-12{margin-right:24px}
+.cm-p-r-12{padding-right:24px}
+.cm-m-a-13{margin:26px}
+.cm-p-a-13{padding:26px}
+.cm-m-t-13{margin-top:26px}
+.cm-p-t-13{padding-top:26px}
+.cm-m-b-13{margin-bottom:26px}
+.cm-p-b-13{padding-bottom:26px}
+.cm-m-l-13{margin-left:26px}
+.cm-p-l-13{padding-left:26px}
+.cm-m-r-13{margin-right:26px}
+.cm-p-r-13{padding-right:26px}
+.cm-m-a-14{margin:28px}
+.cm-p-a-14{padding:28px}
+.cm-m-t-14{margin-top:28px}
+.cm-p-t-14{padding-top:28px}
+.cm-m-b-14{margin-bottom:28px}
+.cm-p-b-14{padding-bottom:28px}
+.cm-m-l-14{margin-left:28px}
+.cm-p-l-14{padding-left:28px}
+.cm-m-r-14{margin-right:28px}
+.cm-p-r-14{padding-right:28px}
+.cm-m-a-15{margin:30px}
+.cm-p-a-15{padding:30px}
+.cm-m-t-15{margin-top:30px}
+.cm-p-t-15{padding-top:30px}
+.cm-m-b-15{margin-bottom:30px}
+.cm-p-b-15{padding-bottom:30px}
+.cm-m-l-15{margin-left:30px}
+.cm-p-l-15{padding-left:30px}
+.cm-m-r-15{margin-right:30px}
+.cm-p-r-15{padding-right:30px}
+.cm-m-a-16{margin:32px}
+.cm-p-a-16{padding:32px}
+.cm-m-t-16{margin-top:32px}
+.cm-p-t-16{padding-top:32px}
+.cm-m-b-16{margin-bottom:32px}
+.cm-p-b-16{padding-bottom:32px}
+.cm-m-l-16{margin-left:32px}
+.cm-p-l-16{padding-left:32px}
+.cm-m-r-16{margin-right:32px}
+.cm-p-r-16{padding-right:32px}
+.cm-m-a-17{margin:34px}
+.cm-p-a-17{padding:34px}
+.cm-m-t-17{margin-top:34px}
+.cm-p-t-17{padding-top:34px}
+.cm-m-b-17{margin-bottom:34px}
+.cm-p-b-17{padding-bottom:34px}
+.cm-m-l-17{margin-left:34px}
+.cm-p-l-17{padding-left:34px}
+.cm-m-r-17{margin-right:34px}
+.cm-p-r-17{padding-right:34px}
+.cm-m-a-18{margin:36px}
+.cm-p-a-18{padding:36px}
+.cm-m-t-18{margin-top:36px}
+.cm-p-t-18{padding-top:36px}
+.cm-m-b-18{margin-bottom:36px}
+.cm-p-b-18{padding-bottom:36px}
+.cm-m-l-18{margin-left:36px}
+.cm-p-l-18{padding-left:36px}
+.cm-m-r-18{margin-right:36px}
+.cm-p-r-18{padding-right:36px}
+.cm-m-a-19{margin:38px}
+.cm-p-a-19{padding:38px}
+.cm-m-t-19{margin-top:38px}
+.cm-p-t-19{padding-top:38px}
+.cm-m-b-19{margin-bottom:38px}
+.cm-p-b-19{padding-bottom:38px}
+.cm-m-l-19{margin-left:38px}
+.cm-p-l-19{padding-left:38px}
+.cm-m-r-19{margin-right:38px}
+.cm-p-r-19{padding-right:38px}
+.cm-m-a-20{margin:40px}
+.cm-p-a-20{padding:40px}
+.cm-m-t-20{margin-top:40px}
+.cm-p-t-20{padding-top:40px}
+.cm-m-b-20{margin-bottom:40px}
+.cm-p-b-20{padding-bottom:40px}
+.cm-m-l-20{margin-left:40px}
+.cm-p-l-20{padding-left:40px}
+.cm-m-r-20{margin-right:40px}
+.cm-p-r-20{padding-right:40px}
+.p-icon{display:inline-block;width:80px;height:24px;vertical-align:middle}
+.p-icon::before{content:'';display:inline-block;width:80px;height:24px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+.p-icon.i1::before{background-position-y:-714px}
+.p-icon.i2::before{background-position-y:-744px}
+.p-icon.i3::before{background-position-y:-774px}
+.p-icon.i4::before{background-position-y:-804px}
+.p-icon.i5::before{background-position-y:-834px}
+.cm-container{width:960px;padding-left:8px;padding-right:8px}
+.cm-container .cm-row{margin-left:-8px;margin-right:-8px}
+.cm-floor{padding:20px 0}
+.cm-p-a{padding:8px}
+.cm-m-a{padding:8px}
+.cm-floor-title .cm-title{font-size:24px;color:#4a4f58;line-height:30px;font-weight:700;padding-top:4px;padding-bottom:4px}
+.cm-floor-title .cm-subtitle{font-size:14px;color:#93979f;padding-top:4px;padding-bottom:4px}
+.cm-article-item{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.cm-article-item .cm-article-title{font-size:18px;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+.cm-article-item .cm-article-desc{font-size:14px;color:#93979f;line-height:2em;text-align:justify}
+.cm-article-item .cm-article-desc.h56{height:56px}
+.cm-article-item .cm-article-cover.cover-168-168{width:168px;height:168px}
+.cm-article-item:hover .cm-article-title{color:#ff5c00}
+.cm-article-item:hover .cm-article-title.has-border{border-color:#ff5c00}
+.cm-article-item.h200{height:200px}
+.cm-article-item .cm-line{height:1px;background-color:#f0f0f0}
+.cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+.cm-product-item .cm-product-title{font-size:14px;color:#4a4f58;line-height:20px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.cm-product-item .h20{height:20px}
+.cm-product-item .h24{height:24px}
+.cm-product-item .h44{height:44px}
+.swiper-container{padding-bottom:30px}
+.swiper-container.no-bottom{padding-bottom:0 !important}
+.cm-cover-tag{width:72px;height:32px;font-size:16px;line-height:32px;border-radius:4px}
+.cm-tabs .cm-tab{font-size:16px;width:60px;height:30px;line-height:30px;text-align:center}
+.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}
+.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}
+.cm-btn-box .cm-toggle-btn.down::after{background-position-x:-90px}
+.cm-btn-box .cm-toggle-btn.up::after{background-position-x:-119px}
+.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;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}
+.cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+.cm-float-container .cm-slide:nth-child(1){height:70px;background:url(/img/activity/pc_note.png) no-repeat center;background-size:64px}
+.cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+.cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+.cm-float-container .cm-tooltop{position:absolute;padding:15px;background:#ff5c00;top:0;right:80px;border-radius:6px;display:none}
+.cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+.cm-float-container .cm-tooltop .cm-tooltop-content{font-size:14px;color:#fff}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:190px}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:8px 0}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{width:262px}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:72px;margin:15px 15px 0;width:1px;background:#f1f1f1}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:block}
+.cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:8px}
+.cm-footer{padding:25px 0 12px;background-color:#4a4f58;text-align:center;color:#fff;font-size:12px;overflow:hidden}
+.cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3)}
+.cm-entry .cm-icon-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-20px;background:url(/img/activity/pc_close.png) no-repeat center center}
+.banner-container{position:relative;height:480px;background:pink;overflow:hidden}
+.banner-container .banner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.banner-container .cm-container{height:100%}
+.banner-container img{display:block;min-width:1920px;}
+.cm-to-top{width:64px;height:64px;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:28px;height:4px;background:#999999;margin-top:20px}
+.cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:10px solid #999999}
+.cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+.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}
+.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}
+.cm-tags .cm-tag.color3{border-color:rgba(225,86,22,0.24);background-color:#fff;color:#e15616}
+.cm-meibohui-tag{font-size:12px;display:inline-block;padding:2px 4px;text-align:center;color:#ffffff !important;background-image:-webkit-gradient(linear,right top,left top,from(#f9c023),to(#f83600));background-image:-o-linear-gradient(right,#f9c023 0%,#f83600 100%);background-image:linear-gradient(270deg,#f9c023 0%,#f83600 100%);border-radius:0px 10px 0px 0px}
+.cm-swiper .cm-swiper-button-prev,.cm-swiper .cm-swiper-button-next{visibility:hidden;width:44px;height:100px;background:rgba(102,102,102,0.74) no-repeat center;z-index:20;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border-radius:6px;opacity:0;-webkit-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;background-size:30px !important}
+.cm-swiper .cm-swiper-button-prev{background-image:url(/img/activity/prev-icon.png);left:-60px}
+.cm-swiper .cm-swiper-button-next{background-image:url(/img/activity/next-icon.png);right:-60px}
+.cm-swiper:hover .cm-swiper-button-prev,.cm-swiper:hover .cm-swiper-button-next{opacity:1;visibility:visible}
+.swiper-container .swiper-pagination-bullet-active{width:28px !important;background:#ff5c00}
+.swiper-container .swiper-pagination-bullet{width:14px;height:4px;display:inline-block;border-radius:2px}
+.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+.cm-cover-tag{display:block;background:#000;text-align:center;color:#fff}
+.cm-cover-tag.color1{background:rgba(0,0,0,0.5)}
+.cm-cover-tag.color2{background:#1ece70}
+.cm-cover-tag.color3{background:#ff5c00}
+.cm-tabs{text-align:right}
+.cm-tabs .cm-tab-content{display:inline-block;overflow:hidden;border-radius:4px}
+.cm-tabs .cm-tab{position:relative;display:inline-block;color:#4a4f58;cursor:pointer;background:#fff}
+.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}

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

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

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

@@ -0,0 +1,226 @@
+'use strict';
+var activeApp = (function () {
+    return new Vue({
+        el: '#app',
+        mixins: [swiperMixin, showMoreMixin],
+        data: {
+            isMobile: window.innerWidth < 992,
+            isActive: true,
+            isRequest: true,
+            isLoading: true,
+            // showScrollTop: false,
+            activityEntryVisiable:false,
+            contactVisiable:false,
+            scrollTopSize:0,
+            msg: 'hello world',
+            src: './img/test.jpg',
+            // 显示个数
+            countMap: {},
+            size: 10,
+            swiperList: {},
+            needReload: false,
+            floorList: [],
+            pageInfo: null,
+            params: {
+                //请求参数
+                pageId: '293',
+                userId: '',
+                source: 1
+            },
+            selectVideoTabMap: {}
+        },
+        mounted: function mounted() {
+            this.pageLoaded();
+        },
+        created: function created() {
+            this.getFloorData();
+        },
+        computed:{
+            showScrollTop: function() {
+                return this.scrollTopSize > 600
+            }
+        },
+        watch: {
+            isMobile: function isMobile() {
+                // if (this.needReload) window.location.reload()
+                this.isLoading = true;
+                window.location.reload();
+            }
+        },
+        filters: {
+            tabTime: function tabTime(val) {
+                // 2021-08-16 00:00:00
+                var first = val.split(' ')[0];
+                var second = first.split('-');
+                return second[1] + '-' + second[2];
+            }
+        },
+        methods: {
+            // 创建tab与轮播图的对应关系
+            makeVideoFetchMap: function makeVideoFetchMap() {
+                var videoList = [22, 23, 24, 25];
+                var videoMap = {};
+                this.floorList.forEach(function (item, index) {
+                    if (videoList.indexOf(parseInt(item.floorContent.templateType)) !== -1) {
+                        videoMap[item.floorContent.templateType + '-' + index] = 0;
+                    }
+                });
+                this.selectVideoTabMap = videoMap;
+            },
+
+            // tab点击事件
+            handleTabClick: function handleTabClick(type, index, val) {
+                var that = this;
+                var swiperId = 'swiper-template-' + index + '-' + type + '-' + val;
+                this.selectVideoTabMap[type + '-' + index] = val;
+                if (this.swiperList[swiperId]) this.swiperList[swiperId].destroy();
+                setTimeout(function () {
+                    that.swiperList[swiperId] = utils.createSwiperId(swiperId, swiperConfig);
+                    utils.responsive('.aspect', 'scalc');
+                    console.log('轮播图切换');
+                });
+            },
+
+            // 当前选中的轮播图
+            currentVideoSwiper: function currentVideoSwiper(type, index) {
+                return this.selectVideoTabMap[type + '-' + index];
+            },
+            getFloorImageListType: function getFloorImageListType(index) {
+                return index === 0 ? 'floorImageList' : 'floorImageList' + (index + 1);
+            },
+
+            // 获取楼层信息
+            getFloorData: function getFloorData() {
+                var that = this;
+                var paramsArr = window.location.pathname.split(".")[0].split("-");
+                var pageId = paramsArr.length >= 1 ? paramsArr[1] : '';
+                this.params.pageId = pageId;
+                ProductApi.getActivityData(that.params, function (res) {
+                    if (res.code === 0) {
+                        that.floorList = res.data.floorList;
+                        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;
+            },
+
+            // 获取直播状态
+            makeVideoStatus: function makeVideoStatus(floorData, index) {
+                var displayDate = new Date(floorData.floorContent['displayDate' + index]).getTime();
+                var nowDate = new Date().getTime();
+                // 一天的时间戳
+                var oneDay = 60 * 60 * 24 * 1000;
+                // 直播开始时间：displayDate
+                // 直播结束时间：displayDate + oneDay
+                if (nowDate >= displayDate && nowDate <= displayDate + oneDay) {
+                    return 1; // 已开始
+                }
+                if (nowDate < displayDate) {
+                    return 0; // 未开始
+                }
+                if (nowDate - oneDay > displayDate) {
+                    return 2; // 已结束
+                }
+            },
+
+            // 使用产品楼层的布局
+            getProductScalcMap: function getProductScalcMap(templateId) {
+                var current = this.isMobile ? 'mobile' : 'pc';
+                var scalcLayout = layoutMapping.productScalcMap['template-' + templateId];
+                return {
+                    scalc: scalcLayout[current].scalc,
+                    col: scalcLayout[current].col
+                };
+            },
+            // 使用文章楼层的布局
+            getArticleScalcMap: function getArticleScalcMap(templateId) {
+                var current = this.isMobile ? 'mobile' : 'pc';
+                var scalcLayout = layoutMapping.articleScalcMap['template-' + templateId];
+                return {
+                    scalc: scalcLayout[current],
+                    swiper: scalcLayout['swiper']
+                };
+            },
+            // 使用图片楼层的布局
+            getImageScalcMap: function getImageScalcMap(templateId) {
+                var current = this.isMobile ? 'mobile' : 'pc';
+                var scalcLayout = layoutMapping.imageScalcMap['template-' + templateId];
+                return {
+                    scalc: scalcLayout[current],
+                    swiper: scalcLayout['swiper']
+                };
+            },
+            // 使用直播楼层的布局
+            getVideoScalcMap: function getVideoScalcMap(templateId) {
+                var current = this.isMobile ? 'mobile' : 'pc';
+                var scalcLayout = layoutMapping.videoScalcMap['template-' + templateId];
+                return {
+                    scalc: scalcLayout[current],
+                    swiper: scalcLayout['swiper']
+                };
+            },
+            // 处理link
+            reallink: function reallink(link) {
+                return link ? link : 'javascript:void(0)';
+            },
+            handleToggleActive: function handleToggleActive(flag) {
+                console.log(flag);
+                this.isActive = flag;
+            },
+            // 页面挂载完毕
+            pageLoaded: function pageLoaded() {
+                // 轮播图配置
+                var options = {
+                    el: '.swiper-container',
+                    split: '-',
+                    config: swiperConfig,
+                    protertyFix: 'swiper-template-'
+                };
+                var resizeTimer = null;
+                // 延迟处理
+                var that = this;
+                var timer = setInterval(function () {
+                    if (!that.isRequest) {
+                        that.swiperList = utils.createSwiper(options);
+                        console.log(that.swiperList);
+                        console.log('轮播图创建完毕...');
+                        that.initCountMap(countMapping);
+                        console.log(this.countMap);
+                        console.log('商品列表处理完毕...');
+                        utils.responsive('.aspect', 'scalc');
+                        that.isLoading = false;
+                        clearInterval(timer);
+                        $('img[data-original]').lazyload();
+                        console.log('页面图片初始化完成...');
+                    }
+                }, 500);
+                // 监听window窗口大小
+                window.addEventListener('resize', function () {
+                    clearTimeout(resizeTimer);
+                    resizeTimer = setTimeout(function () {
+                        utils.responsive('.aspect', 'scalc');
+                        console.log('图片大小已刷新...');
+                    }, 200);
+                    activeApp.$set(activeApp.$data, 'isMobile', window.innerWidth < 560);
+                });
+                window.addEventListener('scroll', function(event){
+                    that.scrollTopSize = $('body').scrollTop();
+                });
+                console.log('窗口resize事件注册完毕...');
+            }
+        }
+    });
+})();

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

@@ -0,0 +1,382 @@
+'use strict';
+
+function _defineProperty(obj, key, value) {
+	if (key in obj) {
+		Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
+	} else {
+		obj[key] = value;
+	}
+	return obj;
+}
+
+// 列表相关配置
+var countMapping = function () {
+	return {
+		'template-3': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-4': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [2, 99]
+			}
+		},
+		'template-6': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-8': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [2, 99]
+			}
+		},
+		'template-10': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [1, 99]
+			}
+		},
+		'template-11': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-12': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-13': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-14': {
+			action: false,
+			count: {
+				pc: [12, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-15': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-16': {
+			action: false,
+			count: {
+				pc: [8, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-17': {
+			action: false,
+			count: {
+				pc: [6, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-18': {
+			action: false,
+			count: {
+				pc: [7, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-19': {
+			action: false,
+			count: {
+				pc: [12, 99],
+				mobile: [4, 99]
+			}
+		},
+		'template-20': {
+			action: false,
+			count: {
+				pc: [12, 99],
+				mobile: [4, 99]
+			}
+		}
+	};
+}();
+
+// 列表布局
+var layoutMapping = function () {
+	// 商品布局及广告图宽高比 col:宽占用的份数（最大为60，最小为1） scalc = 高/宽
+	var productScalcMap = {
+		'template-11': {
+			mobile: {
+				col: ['60', '30', '30'],
+				scalc: ['0.341', '0.767', '0.767']
+			},
+			pc: {
+				col: ['60', '30', '30'],
+				scalc: ['0.13', '0.4', '0.4']
+			}
+		},
+		'template-12': {
+			mobile: {
+				col: ['30', '30', '30'],
+				scalc: ['1.6', '0.78', '0.78']
+			},
+			pc: {
+				col: ['35', '25', '25'],
+				scalc: ['0.5', '0.338', '0.338']
+			}
+		},
+		'template-13': {
+			mobile: {
+				col: ['30', '30', '30', '30', '30'],
+				scalc: ['1.6', '0.782249275', '0.782249275', '0.782249275', '0.782249275']
+			},
+			pc: {
+				col: ['34', '13', '13', '13', '13'],
+				scalc: ['0.5', '0.649', '0.649', '0.649', '0.649']
+			}
+		},
+		'template-14': {},
+		'template-15': {
+			mobile: {
+				col: ['60', '30', '30'],
+				scalc: ['0.341', '1.55', '1.55']
+			},
+			pc: {
+				col: ['60', '35', '25'],
+				scalc: ['0.13', '0.5', '0.708']
+			}
+		},
+		'template-16': {
+			mobile: {
+				col: ['60', '30'],
+				scalc: ['0.341', '1.55']
+			},
+			pc: {
+				col: ['60', '40'],
+				scalc: ['0.13', '0.393']
+			}
+		},
+		'template-17': {
+			mobile: {
+				col: ['30', '30'],
+				scalc: ['1.55', '1.55']
+			},
+			pc: {
+				col: ['35', '25'],
+				scalc: ['0.5', '0.708']
+			}
+		},
+		'template-18': {
+			mobile: {
+				col: ['30'],
+				scalc: ['1.55']
+			},
+			pc: {
+				col: ['40'],
+				scalc: ['0.393']
+			}
+		},
+		'template-19': {
+			mobile: {
+				col: ['60'],
+				scalc: ['0.341']
+			},
+			pc: {
+				col: ['60'],
+				scalc: ['0.13']
+			}
+		},
+		'template-20': {
+			mobile: {
+				col: ['60'],
+				scalc: ['0.341']
+			},
+			pc: {
+				col: ['60'],
+				scalc: ['0.13']
+			}
+		}
+	};
+
+	// 文章长宽比
+	var articleScalcMap = {
+		'template-3': {
+			mobile: 0.351,
+			pc: 0.351,
+			swiper: '2-2-1-1'
+		},
+		'template-4': {
+			mobile: 0.5128,
+			pc: 0.5136,
+			swiper: '1-2-1-1'
+		},
+		'template-5': {
+			mobile: 0.7122,
+			pc: 0.5729,
+			swiper: '1-3-1-1'
+		},
+		'template-6': {
+			mobile: 0.7122,
+			pc: 0.5729,
+			swiper: '2-3-1-1'
+		}
+	};
+
+	// 图片长宽比
+	var imageScalcMap = {
+		// 普通图片
+		'template-1': {
+			mobile: 1,
+			pc: 1,
+			swiper: '2-6-2-4'
+		},
+		'template-2': {
+			mobile: 0.6993,
+			pc: 0.7,
+			swiper: '2-3-2-3'
+		},
+		'template-7': {
+			mobile: 0.778,
+			pc: 0.775,
+			swiper: '1-4-1-1'
+		},
+		'template-8': {
+			mobile: 0.5128,
+			pc: 0.616,
+			swiper: '1-2-1-1'
+		},
+		'template-9': {
+			mobile: 0.6184,
+			pc: 0.616,
+			swiper: '2-2-2-2'
+		},
+		'template-10': {
+			mobile: 0.483,
+			pc: 0.3,
+			swiper: '1-1-1-1'
+		},
+
+		// 视频
+		'template-26': {
+			mobile: 0.78,
+			pc: 0.7,
+			swiper: '2-3-2-2'
+		},
+		'template-27': {
+			mobile: 0.778,
+			pc: 0.775,
+			swiper: '1-4-1-1'
+		},
+		'template-28': {
+			mobile: 0.6,
+			pc: 0.613,
+			swiper: '2-2-2-2'
+		},
+		'template-29': {
+			mobile: 0.51,
+			pc: 0.613,
+			swiper: '1-2-2-1'
+		}
+	};
+
+	// 直播
+	var videoScalcMap = {
+		'template-22': {
+			mobile: 0.674,
+			pc: 0.7,
+			swiper: '2-3-2-2'
+		},
+		'template-23': {
+			mobile: 0.78,
+			pc: 0.7,
+			swiper: '1-4-1-4'
+		},
+		'template-24': {
+			mobile: 0.608,
+			pc: 0.613,
+			swiper: '2-2-2-2'
+		},
+		'template-25': {
+			mobile: 0.51,
+			pc: 0.613,
+			swiper: '1-2-2-1'
+		}
+	};
+
+	return {
+		productScalcMap: productScalcMap,
+		articleScalcMap: articleScalcMap,
+		imageScalcMap: imageScalcMap,
+		videoScalcMap: videoScalcMap
+	};
+}();
+
+// 轮播图布局
+var swiperConfig = function () {
+	// 创建非响应式轮播图配置
+	function createClearSwiperMap(row, col) {
+		var list = {};
+		for (var i = 1; i <= row; i++) {
+			for (var j = 1; j <= col; j++) {
+				list['swiper-template-' + i + '-' + j] = {
+					pagination: '.swiper-pagination',
+					paginationClickable: true, // 页码可点击
+					slidesPerView: j, //列
+					slidesPerColumn: i, //行
+					slidesPerGroup: j, //每次滚动多少列
+					spaceBetween: 16, // 每个slide的间隔
+					nextButton: '.swiper-button-next',
+					prevButton: '.swiper-button-prev'
+				};
+			}
+		}
+		return list;
+	}
+	// 创建响应式轮播图配置
+	function createMediaSwiper(dlist) {
+		var breakpoints = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+		var list = {};
+		// 添加响应式配置
+		for (var key in dlist) {
+			if (Object.hasOwnProperty.call(dlist, key)) {
+				for (var i = 1; i <= breakpoints.row; i++) {
+					for (var j = 1; j <= breakpoints.col; j++) {
+						list[key + '-' + i + '-' + j] = {};
+						// 先合并
+						Object.assign(list[key + '-' + i + '-' + j], dlist[key]);
+						list[key + '-' + i + '-' + j]['breakpoints'] = _defineProperty({}, breakpoints.size, {
+							slidesPerView: j, //行
+							slidesPerGroup: j, //每次滚动多少列
+							slidesPerColumn: i, //列
+							spaceBetween: 10
+						});
+					}
+				}
+			}
+		}
+		return list;
+	}
+	var dlist = createClearSwiperMap(2, 6);
+	var list = createMediaSwiper(dlist, { size: 560, row: 2, col: 4 });
+	return list;
+}();

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

@@ -0,0 +1,89 @@
+'use strict';
+
+var showMoreMixin = function () {
+	return {
+		methods: {
+			// 初始化列配置对象
+			initCountMap: function initCountMap(config) {
+				var map = {};
+				var list = document.querySelectorAll('.fold-box');
+				if (!list) return;
+				list.forEach(function (item) {
+					var floorType = item.getAttribute('data-floor-type');
+					if (!floorType) return;
+					// 模板id
+					var templateId = floorType.split('-')[0];
+					// 楼层id
+					var floorId = floorType.split('-')[1];
+					var key = 'template-' + templateId + '-' + floorId;
+					map[key] = utils.deepClone(config['template-' + templateId]);
+				});
+				// 像vue实例中添加一组响应式数据
+				this.$set(this.$data, 'countMap', map);
+			},
+			//获取显示个数
+			makeList: function makeList(floorData, floorId) {
+				var key = 'template-' + floorData.floorContent.templateType + '-' + floorId;
+				var rule = this.isMobile ? 'mobile' : 'pc';
+				var count = 999;
+				if (this.countMap[key]) {
+				    count = this.countMap[key].action ? this.countMap[key].count[rule][1] : this.countMap[key].count[rule][0]
+				}
+
+				if (floorData.floorImageList.length > count && this.countMap[key]) {
+					this.countMap[key]['hasMore'] = true;
+				}
+				return floorData.floorImageList.filter(function (v, i) {
+					return i < count;
+				});
+			},
+			// 获取列表展开状态
+			toggleState: function toggleState(templateId, floorId) {
+				var key = 'template-' + templateId + '-' + floorId;
+				if (this.countMap[key]) {
+					return this.countMap[key].action;
+				}
+				return false;
+			},
+			// 是否显示加载更多按钮
+			showToggleBtn: function showToggleBtn(floorData, floorId) {
+				var key = 'template-' + floorData.floorContent.templateType + '-' + floorId;
+				if (this.countMap[key]) {
+					return this.countMap[key]['hasMore'];
+				}
+				return false;
+			},
+			// 展示更多
+			toggleMore: function toggleMore(templateId, floorId) {
+				var key = 'template-' + templateId + '-' + floorId;
+				this.countMap[key].action = !this.countMap[key].action;
+				setTimeout(function () {
+					utils.responsive('.aspect', 'scalc');
+				});
+			}
+		}
+	};
+}();
+
+// 轮播图相关配置
+var swiperMixin = function () {
+	// vue轮播图混入对象
+	return {
+		methods: {
+			// 上一页
+			handlePrevClick: function handlePrevClick(floorId) {
+				var id = '#swiper-template-' + floorId;
+				var floor = document.querySelector(id);
+				var prev = floor.querySelector('.swiper-button-prev');
+				prev.click();
+			},
+			// 下一页
+			handleNextClick: function handleNextClick(floorId) {
+				var id = '#swiper-template-' + floorId;
+				var floor = document.querySelector(id);
+				var nexp = floor.querySelector('.swiper-button-next');
+				nexp.click();
+			}
+		}
+	};
+}();

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

@@ -0,0 +1,100 @@
+'use strict';
+
+var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
+var _typeof = typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol' ? function (obj) {
+	return typeof obj === 'undefined' ? 'undefined' : _typeof2(obj);
+} : function (obj) {
+	return obj && typeof Symbol === 'function' && obj.constructor === Symbol ? 'symbol' : typeof obj === 'undefined' ? 'undefined' : _typeof2(obj);
+};
+
+// 工具库
+var utils = function () {
+	/**
+  * 固定宽高比
+  * @param {String} bind 绑定元素
+  * @param {String} attr 定义从元素的那个data-attr字段中获取长宽比，其值为一个数值，number 或者 float，默认为 1
+  */
+	function responsive(bind, attr) {
+		try {
+			var list = document.querySelectorAll(bind);
+			list.forEach(function (item) {
+				var scalc = parseFloat(item.getAttribute('data-' + attr)) || 1;
+				item.style.height = item.offsetWidth * scalc + 'px';
+			});
+		} catch (error) {
+			throw new Error(error);
+		}
+	}
+
+	/**
+  * 批量创建轮播图
+  * @param {Object} [options={}] 配置对象
+  * el: 轮播图最外层容器的class， 默认为 .swiper-container
+  * split: 轮播图id的拼接方式，默认为 - ，为了获取轮播图唯一id值，如swiper-template-1, 解析后的id就为1
+  * config：轮播图的相关配置，由键值对构成，例如：{'swiper-template-1':{ swiper相关配置，详见swiper官网 }}
+  * protertyFix：将和attr中的值一起构成config中的key 默认值为swiper-template-
+  * attr: 将和protertyFix的值一起构成config中的key 默认值为floor-type
+  * @return {Object} 所有轮播图的实例，{key：swiper,...}，key的值为swiper最外层容器的id
+  */
+	function createSwiper() {
+		var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+		// 默认配置
+		var o = {
+			el: 'swiper-container',
+			split: '-',
+			config: {},
+			protertyFix: 'swiper-template-',
+			attr: 'swiper-type'
+		};
+		if (options) {
+			Object.assign(o, options);
+		}
+		// 保存轮播图实例对象
+		var swipers = {};
+		var list = document.querySelectorAll(o.el);
+		list.forEach(function (item) {
+			var id = item.getAttribute('data-' + o.attr);
+			if (!item.id || !id) return;
+			// 模板id
+			// var id = item.id.split(options.split)[2]
+			swipers[item.id] = new Swiper('#' + item.id, o.config[o.protertyFix + id]);
+		});
+		return swipers;
+	}
+
+	// 创建轮播图
+	function createSwiperId(el, options) {
+		var list = document.querySelector('#' + el);
+		var swiperType = list.getAttribute('data-swiper-type');
+		return new Swiper('#' + el, options['swiper-template-' + swiperType]);
+	}
+
+	// 判断arr是否为一个数组，返回一个bool值
+	function isArray(arr) {
+		return Object.prototype.toString.call(arr) === '[object Array]';
+	}
+
+	// 深度克隆
+	function deepClone(obj) {
+		if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' && typeof obj !== 'function') {
+			return obj; //原始类型直接返回
+		}
+		var o = isArray(obj) ? [] : {};
+		for (var i in obj) {
+			if (obj.hasOwnProperty(i)) {
+				o[i] = _typeof(obj[i]) === 'object' ? deepClone(obj[i]) : obj[i];
+			}
+		}
+		return o;
+	}
+
+	return {
+		responsive: responsive,
+		createSwiper: createSwiper,
+		deepClone: deepClone,
+		createSwiperId: createSwiperId,
+		test: 300
+	};
+}();

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

@@ -0,0 +1,640 @@
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>云上美博会</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <!--    <meta name="keywords" content="美业采购商城，美业信息平台，美业采购顾问，美业采购咨询，美容产品，美容仪器，医美产品，医美器械，二手仪器，美业正品联盟">-->
+    <!--    <meta name="description"-->
+    <!--          content="采美365网是一家专注于医美生美的B2B采购平台，拥有各类医疗器械资质和进出口资质，聚集全球众多知名供应商，上架丰富的医美生美产品和仪器，一站式解决美容机构的采购需求">-->
+    <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
+    <link th:href="@{/css/activity/beautyTopic.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/activity/beautyTopic.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<div id="app">
+    <!-- 大图 -->
+    <div class="banner-container">
+        <div class="cm-container cm-relative">
+            <div class="banner">
+                <a :href="pageInfo && pageInfo.headLink">
+                    <img :src="pageInfo && pageInfo.crmHeadImage" alt="" v-if="isMobile"/>
+                    <img :src="pageInfo && pageInfo.headImage" alt="" v-else/>
+                </a>
+            </div>
+        </div>
+    </div>
+    <template v-for="(floorData,index) in floorList">
+        <div class="cm-floor">
+            <div class="cm-container">
+                <!-- 楼层标题 -->
+                <div
+                        class="cm-row cm-floor-title cm-p-l-4 cm-m-b-4"
+                        :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-p-r-4','cm-relative']:''"
+                >
+                    <div :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-col-md-40', 'cm-col-xs-36']:''">
+                        <div class="cm-title cm-text-ellipsis-1">{{floorData.title}}</div>
+                        <div class="cm-subtitle cm-text-ellipsis-1">{{floorData.detail}}<span>{{floorData.floorContent.templateType}}</span>
+                        </div>
+                    </div>
+                    <div
+                            class="cm-tabs cm-p-t-12 cm-absolute cm-bottom-right"
+                            v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)"
+                    >
+                        <div class="cm-tab-content cm-p-r-4">
+                            <div
+                                    class="cm-tab"
+                                    :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 0}"
+                                    @click="handleTabClick(floorData.floorContent.templateType,index,0)"
+                            >
+                                <span>{{floorData.floorContent.displayDate1 | tabTime}}</span>
+                            </div>
+                            <div
+                                    class="cm-tab"
+                                    :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 1}"
+                                    @click="handleTabClick(floorData.floorContent.templateType,index, 1)"
+                            >
+                                <span>{{floorData.floorContent.displayDate2 | tabTime}}</span>
+                            </div>
+                            <div
+                                    class="cm-tab"
+                                    :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 2}"
+                                    @click="handleTabClick(floorData.floorContent.templateType,index, 2)"
+                            >
+                                <span>{{floorData.floorContent.displayDate3 | tabTime}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 商品楼层11-21 -->
+                <template v-if="fetchTemplate([11,12,13,14,15,16,17,18,19,20,21],floorData.floorContent.templateType)">
+                    <!-- 轮播图 -->
+                    <div class="cm-row cm-relative cm-swiper" v-if="floorData.floorContent.templateType == 21">
+                        <div class="cm-p-a-4">
+                            <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 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"
+                                                         :data-original="pros.image" alt=""/>
+                                                </div>
+                                                <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
+                                                    <div class="cm-tags cm-p-b-2">
+                                                        <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
+                                                    </div>
+                                                    <div class="cm-product-title cm-text-ellipsis-2 h44">
+                                                        <span class="cm-meibohui-tag"
+                                                              v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
+                                                        {{pros.name}}
+                                                    </div>
+                                                    <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
+                                                        <!-- <span class="cm-tag color3">单品满减</span> -->
+                                                        <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
+                                                    </div>
+                                                    <div class="cm-prodcut-price h24"><span>￥</span><span
+                                                            class="p-icon i3"></span></div>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- Add Pagination -->
+                                <div class="swiper-pagination"></div>
+                                <!-- Add Navigation -->
+                                <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                                <div class="swiper-button-next swiper-button-white cm-none"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 普通列表 -->
+                    <div class="cm-row" v-else>
+                        <div class="fold-box cm-clearfix"
+                             :data-floor-type="floorData.floorContent.templateType + '-' + index">
+                            <!-- banner -->
+                            <template v-for="(i,index) in 5">
+                                <div
+                                        class="cm-p-a-4"
+                                        :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index],  'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
+                                        v-if="floorData.floorContent['pcAdsImage' + (index + 1)] && floorData.floorContent.templateType != 20"
+                                >
+                                    <div class="aspect"
+                                         :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
+                                        <a target="_blank" :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
+                                            <img
+                                                    width="100%"
+                                                    height="100%"
+                                                    :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
+                                                    alt="/banner.jpg"
+                                                    v-if="isMobile"
+                                            />
+                                            <img
+                                                    width="100%"
+                                                    height="100%"
+                                                    :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
+                                                    alt="/banner.jpg"
+                                                    v-else
+                                            />
+                                        </a>
+                                    </div>
+                                </div>
+                            </template>
+                            <!-- 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 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"
+                                                     :data-original="pros.image" alt=""/>
+                                            </div>
+                                            <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
+                                                <div class="cm-tags cm-p-b-2">
+                                                    <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
+                                                </div>
+                                                <div class="cm-product-title cm-text-ellipsis-2 h44">
+                                                    <span class="cm-meibohui-tag"
+                                                          v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
+                                                    {{pros.name}}
+                                                </div>
+                                                <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
+                                                    <!-- <span class="cm-tag color3">单品满减</span> -->
+                                                    <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
+                                                </div>
+                                                <div class="cm-prodcut-price h24"><span>￥</span><span
+                                                        class="p-icon i3"></span></div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                            <template v-for="(i,index) in 5">
+                                <div
+                                        class="cm-p-a-4"
+                                        :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index],  'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
+                                        v-if="floorData.floorContent.templateType == 20"
+                                >
+                                    <div class="aspect"
+                                         :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
+                                        <a target="_blank" :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
+                                            <img
+                                                    width="100%"
+                                                    height="100%"
+                                                    :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
+                                                    alt="/banner.jpg"
+                                                    v-if="isMobile"
+                                            />
+                                            <img
+                                                    width="100%"
+                                                    height="100%"
+                                                    :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
+                                                    alt="/banner.jpg"
+                                                    v-else
+                                            />
+                                        </a>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                        <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
+                            <div
+                                    class="cm-toggle-btn"
+                                    :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
+                                    @click="toggleMore(floorData.floorContent.templateType, index)"
+                            >
+                                查看更多
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <!-- 文章楼层3-6 -->
+                <!-- fetchTemplate([3,4,5,6],floorData.floorContent.templateType) -->
+                <template v-if="fetchTemplate([3,4,5,6],floorData.floorContent.templateType)">
+                    <!-- 轮播式 pc -->
+                    <div class="cm-row cm-relative cm-swiper" v-show="!isMobile">
+                        <div class="cm-p-a-4">
+                            <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
+                                <div class="cm-swiper-button-prev cm-absolute cm-pc-only"
+                                     @click="handlePrevClick(index)"></div>
+                                <div class="cm-swiper-button-next cm-absolute cm-pc-only"
+                                     @click="handleNextClick(index)"></div>
+                            </template>
+                            <div
+                                    class="swiper-container"
+                                    :class="{'no-bottom':fetchTemplate([4,5],floorData.floorContent.templateType)}"
+                                    :id="'swiper-template-' + index"
+                                    :data-swiper-type="getArticleScalcMap(floorData.floorContent.templateType).swiper"
+                            >
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
+                                         :key="item_index">
+                                        <a target="_blank" :href="reallink(item.link)">
+                                            <!-- 模板3 -->
+                                            <div
+                                                    class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
+                                                    v-if="floorData.floorContent.templateType == 3"
+                                            >
+                                                <div class="cm-left cm-article-cover cover-168-168">
+                                                    <img width="100%" height="100%" :src="item.appletsImage"
+                                                         :alt="item.name" v-if="isMobile"/>
+                                                    <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                                                         v-else/>
+                                                </div>
+                                                <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
+                                                    <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
+                                                        {{item.name}}
+                                                    </div>
+                                                    <div class="cm-line"></div>
+                                                    <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
+                                                        {{item.content}}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- 模板4 5 6 -->
+                                            <div class="cm-article-item bg-white" v-else>
+                                                <div class="cm-article-cover aspect"
+                                                     :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
+                                                    <img width="100%" height="100%" :src="item.appletsImage"
+                                                         :alt="item.name" v-if="isMobile"/>
+                                                    <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                                                         v-else/>
+                                                </div>
+                                                <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
+                                                    {{item.name}}
+                                                </div>
+                                                <div class="cm-m-a-8">
+                                                    <div class="cm-article-desc cm-text-ellipsis-2 h56">
+                                                        {{item.content}}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- Add Pagination -->
+                                <div class="swiper-pagination"
+                                     v-show="isMobile || !fetchTemplate([4,5],floorData.floorContent.templateType)"></div>
+                                <!-- Add Navigation -->
+                                <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                                <div class="swiper-button-next swiper-button-white cm-none"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 列表式 mobile 3 4 6 -->
+                    <div class="cm-row"
+                         v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
+                        <div class="fold-box cm-clearfix"
+                             :data-floor-type="floorData.floorContent.templateType + '-' + index">
+                            <div
+                                    class="cm-col-md-30"
+                                    :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
+                                    v-for="(item, item_index) in makeList(floorData,index)"
+                                    :key="item_index"
+                            >
+                                <a target="_blank" :href="reallink(item.link)">
+                                    <div class="cm-p-a-4">
+                                        <!-- 3 -->
+                                        <div
+                                                class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
+                                                v-if="floorData.floorContent.templateType == 3"
+                                        >
+                                            <div class="cm-left cm-article-cover cover-168-168">
+                                                <img width="100%" height="100%" :src="item.appletsImage"
+                                                     :alt="item.name" v-if="isMobile"/>
+                                                <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                                                     v-else/>
+                                            </div>
+                                            <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
+                                                <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
+                                                    {{item.name}}
+                                                </div>
+                                                <div class="cm-line"></div>
+                                                <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
+                                                    {{item.content}}
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- 4 6  -->
+                                        <div class="cm-article-item bg-white" v-else>
+                                            <div class="cm-article-cover aspect"
+                                                 :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
+                                                <img width="100%" height="100%" :src="item.appletsImage"
+                                                     :alt="item.name" v-if="isMobile"/>
+                                                <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                                                     v-else/>
+                                            </div>
+                                            <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
+                                                {{item.name}}
+                                            </div>
+                                            <div class="cm-m-a-8">
+                                                <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
+                        <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
+                            <div
+                                    class="cm-toggle-btn"
+                                    :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
+                                    @click="toggleMore(floorData.floorContent.templateType, index)"
+                            >
+                                查看更多
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 左右滑动式 mobile 5-->
+                    <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 5">
+                        <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">
+                                    <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">
+                                                <img width="100%" height="100%" :src="item.appletsImage"
+                                                     :alt="item.name" v-if="isMobile"/>
+                                                <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                                                     v-else/>
+                                            </div>
+                                            <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
+                                                {{item.name}}
+                                            </div>
+                                            <div class="cm-m-a-8">
+                                                <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </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,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,26,28,29],floorData.floorContent.templateType) && isMobile)"
+                    >
+                        <div class="cm-p-a-4">
+                            <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
+                                <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
+                                <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
+                            </template>
+                            <div
+                                    class="swiper-container"
+                                    :id="'swiper-template-' + index"
+                                    :class="{'no-bottom':fetchTemplate([7,8,10],floorData.floorContent.templateType)}"
+                                    :data-swiper-type="getImageScalcMap(floorData.floorContent.templateType).swiper"
+                            >
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
+                                         :key="item_index">
+                                        <div
+                                                class="bg-white hover-class aspect cm-relative"
+                                                :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
+                                        >
+                                            <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>
+                                </div>
+                                <!-- Add Pagination -->
+                                <div class="swiper-pagination"
+                                     v-show="isMobile || !fetchTemplate([7,8,10],floorData.floorContent.templateType)"></div>
+                                <!-- Add Navigation -->
+                                <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                                <div class="swiper-button-next swiper-button-white cm-none"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 列表式 mobile 8 10 -->
+                    <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
+                        <div class="fold-box cm-clearfix"
+                             :data-floor-type="floorData.floorContent.templateType + '-' + index">
+                            <div class="cm-col-md-30 cm-col-xs-60">
+                                <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
+                                     :key="item_index">
+                                    <div class="bg-white aspect"
+                                         :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
+                                        <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/>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
+                        <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
+                            <div
+                                    class="cm-toggle-btn"
+                                    :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
+                                    @click="toggleMore(floorData.floorContent.templateType, index)"
+                            >
+                                查看更多
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 左右滑动式 mobile 7-->
+                    <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 cm-relative"
+                                         :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
+                                        <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>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <!-- 直播楼层22 23 24 25 -->
+                <!-- v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)" -->
+                <template v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)">
+                    <!-- 轮播式 && tab切换 22 24 25 -->
+                    <!-- 选项卡 -->
+                    <div class="cm-row"
+                         v-show="!isMobile || (fetchTemplate([22,24,25],floorData.floorContent.templateType) && isMobile)">
+                        <div class="cm-p-a-4">
+                            <div class="cm-relative cm-swiper">
+                                <template v-for="(i,i_index) in 3">
+                                    <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
+                                        <div
+                                                class="swiper-container"
+                                                :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
+                                                :data-swiper-type="getVideoScalcMap(floorData.floorContent.templateType).swiper"
+                                        >
+                                            <div class="swiper-wrapper">
+                                                <div
+                                                        class="swiper-slide"
+                                                        v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]"
+                                                        :key="item_index"
+                                                >
+                                                    <div
+                                                            class="bg-white aspect cm-relative"
+                                                            :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
+                                                    >
+                                                        <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"
+                                                                >已结束</span
+                                                                >
+                                                            <span
+                                                                    class="cm-cover-tag color2 cm-absolute cm-top-right"
+                                                                    v-if="makeVideoStatus(floorData,i_index + 1) === 0"
+                                                            >未开始</span
+                                                            >
+                                                            <span
+                                                                    class="cm-cover-tag color3 cm-absolute cm-top-right"
+                                                                    v-if="makeVideoStatus(floorData,i_index + 1) === 1"
+                                                            >已开始</span
+                                                            >
+                                                            <img width="100%" height="100%" :src="item.appletsImage"
+                                                                 alt="" v-if="isMobile"/>
+                                                            <img width="100%" height="100%" :src="item.image" alt=""
+                                                                 v-else/>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- Add Pagination -->
+                                            <div class="swiper-pagination"></div>
+                                            <!-- Add Navigation -->
+                                            <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                                            <div class="swiper-button-next swiper-button-white cm-none"></div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 左右滑动式 mobile 23-->
+                    <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 23">
+                        <div class="cm-p-a-4">
+                            <template v-for="(i,i_index) in 3">
+                                <div class="cm-scroll-container"
+                                     v-if="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
+                                    <div class="cm-scroll-item"
+                                         v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]">
+                                        <div
+                                                class="bg-white aspect cm-relative cm-radius-4"
+                                                :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
+                                        >
+                                            <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"/>
+                                                <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </template>
+    <!-- 侧边浮窗 -->
+    <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>
+        <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 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>
+        </template>
+    </div>
+    <!-- 获取入口图标 -->
+    <div class="cm-entry" v-show="activityEntryVisiable && isActive">
+        <div class="cm-icon-content">
+            <span class="cm-close" @click="handleToggleActive(false)"></span>
+            <a target="_blank" href="#">
+                <img src="/img/activity/pc_icon.png" alt=""/>
+            </a>
+        </div>
+    </div>
+    <!-- 返回顶部 -->
+    <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
+        <span class="cm-icon-bar"></span>
+        <span class="cm-icon-bar"></span>
+        <span class="cm-icon-bar"></span>
+    </div>
+    <!-- loading动画 -->
+    <div class="cm-loading" v-if="isLoading"></div>
+    <!--  底部  -->
+    <div class="cm-footer">
+        <img src="/img/activity/pc_bottom.png" alt=""/>
+        <p>——&nbsp;&nbsp;深圳市采美信息技术有限公司提供技术支持&nbsp;&nbsp;——</p>
+    </div>
+</div>
+<!-- 引入js文件 -->
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
+<script charset="utf-8" src="/js/activity/swiper.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/utils.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/layout.js(v=${version})}"></script>
+<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);
+    });
+</script>
+</body>
+</html>

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>