Quellcode durchsuchen

美博会模板页面完成

yuwenjun vor 4 Jahren
Ursprung
Commit
b5dee9cf50

+ 2 - 2
src/main/resources/config/dev/application-dev.yml

@@ -53,8 +53,8 @@ logging:
 # 服务域名
 caimei:
   siteEnv: 0 #网站环境,(2:正式环境,1:测试环境,0:开发环境)
-  spiServer: https://spi-b.caimei365.com
-#  spiServer: http://192.168.2.68:8008
+#  spiServer: https://spi-b.caimei365.com
+  spiServer: http://192.168.2.68:8008
   coreServer: https://core-b.caimei365.com
 #  coreServer: http://192.168.2.68:18002
   imageDomain: https://img-b.caimei365.com

+ 306 - 0
src/main/resources/static/css/activity/activityTopic.css

@@ -0,0 +1,306 @@
+.clearfix::after{content:'';display:block;clear:both}
+.pc_view,.mobile_view{display:none}
+/*PC端样式*/
+@media screen and (min-width:768px){
+.cm-swiper-prev,.cm-swiper-next{transition: all .4s;opacity: 0;z-index:9;position:absolute;width:44px;height:68px;background:rgba(200,200,200,.5);cursor:pointer;border-radius:4px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
+.cm-swiper-prev{left:-70px}
+.cm-swiper-next{right:-70px}
+.cm-swiper-prev::after{content:"";display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:14px;height:27px;background:url(/img/activity/prev-icon.png) no-repeat center;background-size:27px auto}
+.cm-swiper-next::after{content:"";display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:14px;height:27px;background:url(/img/activity/next-icon.png) no-repeat center;background-size:27px auto}
+.page_floor:hover .cm-swiper-prev,.page_floor:hover .cm-swiper-next{opacity: 1;}
+
+.pc_view{display:block}
+.inner{width:1184px;margin:0 auto}
+.cm-swiper-pagination{position:static;width:100%;text-align:center;padding:10px 0}
+.cm-swiper-pagination .cm-bullet{display:inline-block;width:14px;height:4px;cursor:pointer;opacity:0.2;margin:0 4px;background:#e15616;border-radius:2px;vertical-align:middle}
+.cm-swiper-pagination .cm-bullet.cm-bullet-active{width:28px;opacity:1}
+.page_floor .floor_title{padding:3.50678% 0 1.80995% 0}
+.page_floor .floor_title h1{font-size:24px;line-height:31px;text-align:left;color:#4a4f58}
+.page_floor .floor_title p{font-size:14px;line-height:19px;text-align:left;color:#93979f;margin-top:6px}
+.page_floor .section_page_more{width:100%;height:32px;margin-top:16px;}
+.page_floor .more{width:98px;height:32px;line-height:32px;font-size:14px;margin:0 auto;border-radius:2px;border:1px solid #cccccc;color:#909090;text-align:left;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer;padding-left:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}
+.page_floor .more .icon:before{background-position:-93px 7px;width:20px;height:32px;right:0;position:absolute}
+.page_floor .more:hover{color:#e15616;border-color:#e15616}
+.page_floor .more:hover .icon:before{background-position:-153px 7px}
+.page_floor_product .page_main .page_floor_item{float:left;margin-right:1.80995%;margin-bottom:1.80995%}
+.page_floor_product .page_main .page_floor_item.ad img{display:block;width:100%}
+.page_floor_product .page_main .page_floor_item.pro{position:relative;width:18.55203%;height:0;padding-bottom:30.31674%;background:#fff;overflow:hidden}
+.page_floor_product .page_main .page_floor_item .page_header{height: 0;padding-bottom: 100%;overflow: hidden;}
+.page_floor_product .page_main .page_floor_item .page_footer{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;bottom:0;padding:0 8px}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_tag{height:24px}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_tag p{display:block;padding:0 4px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #e3ebf7;border-radius:2px;float:left;font-size:12px;line-height:22px;text-align:center;color:#9aa5b5}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_text{width:100%;height:42px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:5px;white-space:normal;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:21px}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_text .tag{width:44px;height:18px;line-height:18px;font-size:12px;display:inline-block;margin-right:5px;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;margin-top:2px}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_price{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_price .main_price_text{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_price .main_price_text .main_price_unde{width:100%;height:31px;line-height:31px;font-size:14px;color:#4a4f58;text-align:left}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_price .main_price_text .price_text_tag{height:22px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:5px}
+.page_floor_product .page_main .page_floor_item .page_footer .page_main_price .main_price_text .price_text_tag .listTag{float:left;margin:0}
+.page_floor_product .page_main .page_floor_item .page_main_price .icon:before{width:63px;height: 30px;vertical-align: middle;}
+.page_floor_product .page_main .page_floor_item .page_main_price .icon.i5:before{background-position:-2px -832px}
+.page_floor_product .page_main .page_floor_item .page_main_price .icon.i1:before{background-position:-2px -712px}
+.page_floor_product .page_main .page_floor_item .page_main_price .icon.i2:before{background-position:-2px -742px}
+.page_floor_product .page_main .page_floor_item .page_main_price .icon.i3:before{background-position:-2px -772px}
+.page_floor_product .page_main .page_floor_item .page_main_price .icon.i4:before{background-position:-2px -802px}
+.page_floor_product .page_main .page_floor_item .page_main_price .price_grade{font-weight: normal;margin-top: 2px; width: 100%;height: 24px;box-sizing: border-box;float: left;margin-bottom: 10px;}
+.page_floor_product .page_main .page_floor_item .page_main_price .price_grade .bold{margin: 0}
+.page_floor_product .page_main .page_floor_item .page_main_price .price_grade.sec{display: block;margin-top: 15px;margin-left: 0}
+.page_floor_product .page_grid_1 .ad:nth-of-type(1){height:0;padding-bottom:30.31674%;background:#fff;overflow:hidden;width:59.27601%}
+.page_floor_product .page_grid_1 [mr-normal]{margin-right:0}
+.page_floor_product .page_grid_2 .ad{height:0;padding-bottom:30.31674%;overflow:hidden}
+.page_floor_product .page_grid_2 .ad:nth-of-type(1){width:59.27601%}
+.page_floor_product .page_grid_2 .ad:nth-of-type(2){width:38.914027%;margin-right:0}
+.page_floor_product .page_grid_2 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_3 .ad:nth-of-type(1){width:100%;margin-right:0}
+.page_floor_product .page_grid_3 .ad:nth-of-type(2){width:59.27601%;height:0;padding-bottom:30.31674%;background:#fff;overflow:hidden}
+.page_floor_product .page_grid_3 [mr-normal]{margin-right:0}
+.page_floor_product .page_grid_4 .ad:nth-of-type(1){width:100%;margin-right:0}
+.page_floor_product .page_grid_4 .ad:nth-of-type(2){width:59.27601%}
+.page_floor_product .page_grid_4 .ad:nth-of-type(3){width:38.914027%;margin-right:0}
+.page_floor_product .page_grid_4 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_5 .ad:nth-of-type(1),.page_floor_product .page_grid_6 .ad:nth-of-type(1){width:100%;margin-right:0}
+.page_floor_product .page_grid_5 .pro:nth-of-type(5n),.page_floor_product .page_grid_6 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_7 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_8 .pro{margin-bottom:0}
+.page_floor_product .page_grid_8 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_9 .ad{background:#fff}
+.page_floor_product .page_grid_9 .ad:nth-of-type(1){width:100%;margin-right:0}
+.page_floor_product .page_grid_9 .ad:nth-of-type(2){width:49.09502%;height:0;padding-bottom:27.14932%;overflow:hidden}
+.page_floor_product .page_grid_9 .ad:nth-of-type(3){width:49.09502%;margin-right:0;height:0;padding-bottom:27.14932%;overflow:hidden}
+.page_floor_product .page_grid_9 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_10 .ad{height:0;padding-bottom:30.31082%;overflow:hidden}
+.page_floor_product .page_grid_10 .ad:nth-of-type(1){width:59.27601%}
+.page_floor_product .page_grid_10 .ad:nth-of-type(2){width:38.914027%;margin-right:0}
+.page_floor_product .page_grid_10 .ad .ad-img{height:0;padding-bottom:36.62156%;margin-bottom:4.649577%;overflow:hidden}
+.page_floor_product .page_grid_10 .ad .ad-img:nth-child(2){margin-bottom:0}
+.page_floor_product .page_grid_10 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_product .page_grid_11 .ad{height:0;padding-bottom:30.31082%;overflow:hidden}
+.page_floor_product .page_grid_11 .ad:nth-of-type(1){width:59.27601%}
+.page_floor_product .page_grid_11 .ad:nth-of-type(2){width:38.914027%;margin-right:0}
+.page_floor_product .page_grid_11 .ad .ad-img{float:left;width:47.59999%;height:0;padding-bottom:36.62156%;margin-bottom:4.649577%;margin-right:4.649577%;overflow:hidden}
+.page_floor_product .page_grid_11 .ad .ad-img:nth-child(3),.page_floor_product .page_grid_11 .ad .ad-img:nth-child(4){margin-bottom:0}
+.page_floor_product .page_grid_11 .ad .ad-img:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_11 .pro:nth-of-type(5n){margin-right:0}
+.page_floor_picture .page_main .page_floor_item{overflow:hidden;float:left}
+.page_floor_picture .page_main .page_floor_item img{width:100%}
+.page_floor_picture .page_grid_1 .page_floor_item{width:18.55203%;height:0;padding-bottom:18.55203%;margin:0 1.80995% 1.80995% 0}
+.page_floor_picture .page_grid_1 .page_floor_item:nth-child(5n){margin-right:0}
+.page_floor_picture .page_grid_1 .page_floor_item:nth-child(6),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(7),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(8),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(9),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(10){margin-bottom:0}
+.page_floor_picture .page_grid_2 .page_floor_item{width:32.126696%;height:0;padding-bottom:22.42175%;margin:0 1.80995% 1.80995% 0}
+.page_floor_picture .page_grid_2 .page_floor_item:nth-child(3n){margin-right:0}
+.page_floor_picture .page_grid_2 .page_floor_item:nth-child(4),.page_floor_picture .page_grid_2 .page_floor_item:nth-child(5),.page_floor_picture .page_grid_2 .page_floor_item:nth-child(6){margin-bottom:0}
+.page_floor_picture .page_grid_3 .page_floor_item{width:23.64253%;height:0;padding-bottom:18.314141%;margin-right:1.80995%;background:#fff}
+.page_floor_picture .page_grid_3 .page_floor_item:nth-child(4n){margin-right:0}
+.page_floor_picture .page_grid_4 .page_floor_item{width:49.09502%;height:0;padding-bottom:30.26379%;margin-right:1.80995%;background:#fff}
+.page_floor_picture .page_grid_4 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_picture .page_grid_5 .page_floor_item{width:49.09502%;height:0;padding-bottom:30.26379%;margin-right:1.80995%;margin-bottom:1.80995%;background:#fff}
+.page_floor_picture .page_grid_5 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_picture .page_grid_5 .page_floor_item:nth-child(3),.page_floor_picture .page_grid_5 .page_floor_item:nth-child(4){margin-bottom:0}
+.page_floor_picture .page_grid_6 .page_floor_item{width:100%;background:#fff}
+.page_floor_picture .page_grid_3{position: relative;}
+.page_floor_picture .page_grid_4{position: relative;}
+.page_floor_picture .page_grid_6{position: relative;}
+.page_floor_article .page_main .page_floor_item{float:left}
+.page_floor_article .page_main .page_floor_item h2{font-size:18px;font-weight:normal}
+.page_floor_article .page_main .page_floor_item p{font-size:14px;line-height:24px}
+.page_floor_article .page_grid_1 .page_floor_item{width:49.09502%;height:0;padding-bottom:16.51427%;background:#fff;float:left;margin:0 1.778% 1.778% 0;-webkit-box-sizing:border-box;box-sizing:border-box}
+.page_floor_article .page_grid_1 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_article .page_grid_1 .page_floor_item:nth-child(3),.page_floor_article .page_grid_1 .page_floor_item:nth-child(4){margin-bottom:0}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_cover{float:left;width:26.7671%;margin:3.68578% 0 0 3.68578%}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_text{float:right;width:61.2739%;margin:3.68578% 3.68578% 0 0}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_text .line{width:100%;height:1px;margin:4.44025% 0;background-color:#f0f0f0}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_text .line::after{content:'';display:block;width:16px;height:2px;background-color:#e15616;-webkit-transform:translateY(-1px);-ms-transform:translateY(-1px);transform:translateY(-1px)}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-height:24px}
+.page_floor_article .page_grid_2{position: relative;}
+.page_floor_article .page_grid_2 .page_floor_item{width:49.09502%;float:left;margin-right:1.778%;height:0;padding-bottom:36.316549%;background:#fff}
+.page_floor_article .page_grid_2 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_cover{width:100%;height:0;padding-bottom:51.369863%;background-color:#fff;overflow:hidden}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_cover img{width:100%}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_text{margin:0 3.68578%}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_text h2{position:relative;margin-top:4.109589%;margin-bottom:2.739726%}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:25px}
+.page_floor_article .page_grid_3{position: relative;}
+.page_floor_article .page_grid_3 .page_floor_item{width:32.12669%;float:left;margin-right:1.778%;height:0;padding-bottom:31.455175%;background:#fff}
+.page_floor_article .page_grid_3 .page_floor_item:nth-child(3n){margin-right:0}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_cover{width:100%;height:0;padding-bottom:57.2916666%;background-color:#fff;overflow:hidden}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_cover img{width:100%}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_text{margin:0 5.98958%}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_text h2{position:relative;margin-top:6.25%;margin-bottom:4.166667%}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:25px}
+.page_floor_article .page_grid_4 .page_floor_item{width:32.12669%;float:left;margin:0 1.778% 1.778% 0;height:0;padding-bottom:31.455175%;background:#fff}
+.page_floor_article .page_grid_4 .page_floor_item:nth-child(3n){margin-right:0}
+.page_floor_article .page_grid_4 .page_floor_item:nth-child(4),.page_floor_article .page_grid_4 .page_floor_item:nth-child(5),.page_floor_article .page_grid_4 .page_floor_item:nth-child(6){margin-bottom:0}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_cover{width:100%;height:0;padding-bottom:57.2916666%;background-color:#fff;overflow:hidden}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_cover img{width:100%}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_text{margin:0 5.98958%}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_text h2{position:relative;margin-top:6.25%;margin-bottom:4.166667%}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:25px}
+.page_floor_article .page_floor_item{transition: all .4s;}
+.page_floor_article .page_floor_item:hover{
+transform:translateY(-5px);box-shadow: 0 8px 8px rgba(102,102,102,0.05), 0 10px 10px rgba(102,102,102,0.05), 0 12px 12px rgba(102,102,102,0.05);
+}
+.page_floor_article .page_grid_1 .page_floor_item h2{position: relative}
+.page_floor_article .page_grid_1 .page_floor_item:hover{color: #e15616;}
+.page_floor_article .page_grid_2 .page_floor_item:hover h2:before{content: "";position: absolute;display: block;height: 18px;width:2px;background: #e15616;top: 3px;left: -21px; }
+.page_floor_article .page_grid_3 .page_floor_item:hover h2:before{content: "";position: absolute;display: block;height: 18px;width:2px;background: #e15616;top: 3px;left: -22px; }
+.page_floor_article .page_grid_4 .page_floor_item:hover h2:before{content: "";position: absolute;display: block;height: 18px;width:2px;background: #e15616;top: 3px;left: -22px; }
+/**************************/
+.page_floor_product .page_grid_9 {height:0;padding-bottom:76.466216%;overflow: hidden;}
+.page_floor_product .page_grid_4 {height:0;padding-bottom:79.633445%;overflow: hidden;}
+.page_floor_product .page_grid_10 {height:0;padding-bottom:64.244932%;overflow: hidden;}
+.page_floor_product .page_grid_11 {height:0;padding-bottom:64.244932%;overflow: hidden;}
+.page_floor_product .page_grid_7 {height:0;padding-bottom:64.25%;overflow: hidden;}
+.page_floor_product .page_grid_3 {height:0;padding-bottom:79.6334459%;overflow: hidden;}
+.page_floor_product .page_grid_2 {height:0;padding-bottom:64.25%;overflow: hidden;}
+.page_floor_product .page_grid_1 {height:0;padding-bottom:64.25%;overflow: hidden;}
+.page_floor_product .page_grid_5 {height:0;padding-bottom:47.5084459%;overflow: hidden;}
+.page_floor_product .page_grid_6 {height:0;padding-bottom:47.5084459%;overflow: hidden;}
+.page_floor_product .max{height: auto !important;padding-bottom: 0;}
+.page_floor_product .pro{transition: all .4s;}
+.page_floor_product .pro:hover{transform:translateY(-5px);box-shadow: 0 8px 8px rgba(102,102,102,0.05), 0 10px 10px rgba(102,102,102,0.05), 0 12px 12px rgba(102,102,102,0.05);}
+}
+
+
+/*手机端样式*/
+@media screen and (max-width:768px){
+.mobile_view{display:block}
+.inner{width:100vw}
+.cm-swiper-pagination{position:static;width:100%;text-align:center;padding:1vw 0}
+.cm-swiper-pagination .cm-bullet{display:inline-block;width:2vw;height:0.5vw;cursor:pointer;opacity:0.2;margin:0 0.2vw;background:#e15616;border-radius:0.25vw;vertical-align:middle}
+.cm-swiper-pagination .cm-bullet.cm-bullet-active{width:4vw;opacity:1}
+.section_page_more .more{width:20vw;height:6.4vw;margin:5vw auto;border:0.27vw solid #cccccc;color:#909090;font-size:3vw;line-height:6.4vw;border-radius:0.54vw;position:relative;text-indent:2vw}
+.section_page_more  .more .icon:before{background-position:-51.5vw 0px;width:5.4vw;height:6.7vw;right:0;position:absolute}
+.scroll_view{white-space:nowrap;overflow-x:scroll}
+.scroll_view::-webkit-scrollbar{width:0;background:transparent;visibility:hidden}
+.page_floor .floor_title{padding:3vw}
+.page_floor .floor_title h1{font-weight:bold;color:#4a4f58;font-size:4.8vw;line-height:9.7vw}
+.page_floor .floor_title p{font-weight:normal;color:#93979f;font-size:3.4vw;line-height:4.3vw}
+.page_floor_article .page_main .page_floor_item{background:#fff}
+.page_floor_article .page_main .page_floor_item .page_article_text{padding:3vw}
+.page_floor_article .page_main .page_floor_item .page_article_text h2{font-size:4vw;font-weight:normal;margin-bottom:2vw;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}
+.page_floor_article .page_main .page_floor_item .page_article_text p{font-size:3vw;line-height:5vw;text-align:justify}
+.page_floor_article .page_grid_1 .page_floor_item{width: 94vw;height: 33vw;margin:0 3vw 3vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_cover{width:27vw;height:27vw;margin: 3.2vw 0 0 3.2vw;}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_cover img{width:27vw;height:27vw}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_text{width:57vw}
+.page_floor_article .page_grid_1 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}
+.page_floor_article .page_grid_2 .page_floor_item{margin:0 3vw 3vw}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_cover{width:100%;height:48vw}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_cover img{display:block;width:100%;height:48vw}
+.page_floor_article .page_grid_2 .page_floor_item .page_article_text p{height: 10vw;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.page_floor_article .page_grid_3 .page_floor_item{display:inline-block;width:41vw;height:52vw;margin:0 1.4vw 0 0;white-space:normal}
+.page_floor_article .page_grid_3 .page_floor_item:nth-child(1){margin-left:3vw}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_cover{width:41vw;height:29vw}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_cover img{width:41vw;height:29vw}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_text h2{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
+.page_floor_article .page_grid_3 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.page_floor_article .page_grid_4 .mobile_view{margin:0 3vw}
+.page_floor_article .page_grid_4 .page_floor_item{float:left;width:46vw;height:57vw;margin:2vw 2vw 0 0}
+.page_floor_article .page_grid_4 .page_floor_item:nth-child(1),.page_floor_article .page_grid_4 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_article .page_grid_4 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_cover{width:46vw;height:33vw;}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_cover img{display:block;width:46vw;height:33vw}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_text h2{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
+.page_floor_article .page_grid_4 .page_floor_item .page_article_text p{word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.page_floor_picture .page_grid_1 .swiper-slide{padding:0 3vw 0;-webkit-box-sizing:border-box;box-sizing:border-box}
+.page_floor_picture .page_grid_1 .page_floor_item{width:22vw;height:22vw;float:left;margin:0 2vw 2vw 0;overflow: hidden;background: #fff;}
+.page_floor_picture .page_grid_1 .page_floor_item:nth-child(4n){margin-right:0}
+.page_floor_picture .page_grid_1 .page_floor_item:nth-child(5),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(6),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(7),.page_floor_picture .page_grid_1 .page_floor_item:nth-child(8){margin-bottom:0}
+.page_floor_picture .page_grid_2 .swiper-slide{padding:0 3vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.page_floor_picture .page_grid_2 .page_floor_item{float:left;width:30vw;height:21vw;margin:0 2vw 2vw 0}
+.page_floor_picture .page_grid_2 .page_floor_item img{width:30vw;height:21vw}
+.page_floor_picture .page_grid_2 .page_floor_item:nth-child(3n){margin-right:0}
+.page_floor_picture .page_grid_2 .page_floor_item:nth-child(4),.page_floor_picture .page_grid_2 .page_floor_item:nth-child(5),.page_floor_picture .page_grid_2 .page_floor_item:nth-child(6){margin-bottom:0}
+.page_floor_picture .page_grid_3 .page_floor_item{width:41vw;height:32vw;display:inline-block;white-space:normal;margin-right:1.5vw}
+.page_floor_picture .page_grid_3 .page_floor_item:nth-child(1){margin-left:3vw}
+.page_floor_picture .page_grid_3 .page_floor_item img{display:block;width:41vw;height:32vw}
+.page_floor_picture .page_grid_4 .page_floor_item{width:94vw;height:48vw;margin:3vw 3vw 0}
+.page_floor_picture .page_grid_4 .page_floor_item:nth-child(1){margin-top:0}
+.page_floor_picture .page_grid_4 .page_floor_item img{display:block;width:94vw;height:48vw}
+.page_floor_picture .page_grid_5 .swiper-slide{padding:0 3vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.page_floor_picture .page_grid_5 .page_floor_item{float:left;width:46vw;height:28vw;margin:0 2vw 2vw 0}
+.page_floor_picture .page_grid_5 .page_floor_item img{width:46vw;height:28vw}
+.page_floor_picture .page_grid_5 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_picture .page_grid_5 .page_floor_item:nth-child(3),.page_floor_picture .page_grid_5 .page_floor_item:nth-child(4){margin-bottom:0}
+.page_floor_picture .page_grid_6 .page_floor_item{width:94vw;height:45vw;margin:3vw 3vw 0}
+.page_floor_picture .page_grid_6 .page_floor_item img{width:94vw;height:45vw}
+.page_floor_picture .page_grid_6 .page_floor_item:nth-child(1){margin-top:0}
+.page_floor_product .page_floor_item{position:relative;width:46vw;height:68vw;float:left;margin:2vw 2vw 0 0;overflow:hidden}
+.page_floor_product .page_floor_item.pro{background:#fff}
+.page_floor_product .page_floor_item.ad{background:#fff}
+.page_floor_product .page_floor_item.ad img{display:block;width:100%;height:100%}
+.page_floor_product .page_footer{position:absolute;padding:3vw;bottom:0;font-size:3vw}
+.page_floor_product .page_footer .page_main_tag{color:#9aa5b5;border:0.27vw solid #e3ebf7;display:inline-block;padding:0 1.3vw;border-radius:0.54vw}
+.page_floor_product .page_footer .page_main_text{line-height:5vw;margin:1.5vw 0;height:9.5vw;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.page_floor_product .page_footer .page_main_text .tag{width:11.3vw;height:4.3vw;line-height:4.3vw;font-size:2.8vw;display:inline-block;margin-right:1.3vw;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;margin-top:0.5vw}
+.page_floor_product .page_footer .page_main_price .price_text_tag{margin:1vw 0}
+.page_floor_product .page_footer .page_main_price .price_text_tag .listTag{padding:0 2vw;border:0.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw}
+.page_floor_product .page_grid_1{padding:0 3vw}
+.page_floor_product .page_grid_1 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_1 .page_floor_item:nth-child(1),.page_floor_product .page_grid_1 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_product .page_grid_2{padding:0 3vw}
+.page_floor_product .page_grid_2 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_2 .page_floor_item:nth-child(1),.page_floor_product .page_grid_2 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_product .page_grid_3{padding:0 3vw}
+.page_floor_product .page_grid_3 .page_floor_item:nth-child(1){width:94vw;height:24vw;float:unset;margin-top:0}
+.page_floor_product .page_grid_3 .page_floor_item:nth-child(2n+1){margin-right:0}
+.page_floor_product .page_grid_4{padding:0 3vw}
+.page_floor_product .page_grid_4 .page_floor_item:nth-child(1){width:94vw;height:24vw;float:unset;margin-top:0}
+.page_floor_product .page_grid_4 .page_floor_item:nth-child(2n+1){margin-right:0}
+.page_floor_product .page_grid_5{padding:0 3vw}
+.page_floor_product .page_grid_5 .page_floor_item:nth-child(1){width:94vw;height:24vw;float:unset;margin-top:0}
+.page_floor_product .page_grid_5 .page_floor_item:nth-child(2n+1){margin-right:0}
+.page_floor_product .page_grid_6{padding:0 3vw}
+.page_floor_product .page_grid_6 .page_floor_item:nth-child(1),.page_floor_product .page_grid_6 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_product .page_grid_6 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_6 .page_floor_item:last-child{width:94vw;height:24vw}
+.page_floor_product .page_grid_7{padding:0 3vw}
+.page_floor_product .page_grid_7 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_7 .page_floor_item:nth-child(1),.page_floor_product .page_grid_7 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_product .page_grid_8 .swiper-slide{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 3vw}
+.page_floor_product .page_grid_8 .swiper-slide .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_9{padding:0 3vw}
+.page_floor_product .page_grid_9 .page_floor_item:nth-child(1){width:94vw;height:32vw;float:unset;margin-top:0}
+.page_floor_product .page_grid_9 .page_floor_item:nth-child(2),.page_floor_product .page_grid_9 .page_floor_item:nth-child(3){width:46vw;height:35vw}
+.page_floor_product .page_grid_9 .page_floor_item:nth-child(2n+1){margin-right:0}
+.page_floor_product .page_grid_10{padding:0 3vw}
+.page_floor_product .page_grid_10 .page_floor_item:nth-child(2){background:transparent}
+.page_floor_product .page_grid_10 .page_floor_item:nth-child(2) .ad-img{width:46vw;height:33vw;background:#fff}
+.page_floor_product .page_grid_10 .page_floor_item:nth-child(2) .ad-img:nth-child(1){margin-bottom:2vw}
+.page_floor_product .page_grid_10 .page_floor_item:nth-child(1),.page_floor_product .page_grid_10 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_product .page_grid_10 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_grid_11{padding:0 3vw}
+.page_floor_product .page_grid_11 .page_floor_item:nth-child(2){background:transparent}
+.page_floor_product .page_grid_11 .page_floor_item:nth-child(2) .ad-img{width:46vw;height:33vw;background:#fff}
+.page_floor_product .page_grid_11 .page_floor_item:nth-child(2) .ad-img:nth-child(1){margin-bottom:2vw}
+.page_floor_product .page_grid_11 .page_floor_item.mobile_view{width:46vw;height:33vw;background:#fff}
+.page_floor_product .page_grid_11 .page_floor_item:nth-child(1),.page_floor_product .page_grid_11 .page_floor_item:nth-child(2){margin-top:0}
+.page_floor_product .page_grid_11 .page_floor_item:nth-child(2n){margin-right:0}
+.page_floor_product .page_floor_item .page_main_price .bold{font-size: 3.6vw;}
+.page_floor_product .page_floor_item .page_main_price .mIcon:before{width:15.8vw;height: 5vw}
+.page_floor_product .page_floor_item .page_main_price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+.page_floor_product .page_floor_item .page_main_price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+.page_floor_product .page_floor_item .page_main_price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+.page_floor_product .page_floor_item .page_main_price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+.page_floor_product .page_floor_item .page_main_price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+.page_floor_product .page_floor_item .page_main_price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+
+.page_floor_article .page_grid_4 .mobile_view .clearfix{height: 118vw;overflow: hidden;}
+.page_floor_article .page_grid_2 .mobile_view .clearfix{height: 147vw;overflow: hidden;}
+.page_floor_article .page_grid_1 .mobile_view .clearfix{height: 105vw;overflow: hidden;}
+
+.page_floor_picture .page_grid_4 .mobile_view .clearfix{height: 98vw;overflow: hidden;}
+.page_floor_picture .page_grid_6 .mobile_view .clearfix{height: 45vw;overflow: hidden;}
+
+.page_floor_product .page_grid_1 {height: 139vw;overflow: hidden;}
+.page_floor_product .page_grid_2 {height: 139vw;overflow: hidden;}
+.page_floor_product .page_grid_4 {height: 165vw;overflow: hidden;}
+.page_floor_product .page_grid_5 {height: 166vw;overflow: hidden;}
+.page_floor_product .page_grid_6 {height: 139vw;overflow: hidden;}
+.page_floor_product .page_grid_3 {height: 165vw;overflow: hidden;}
+.page_floor_product .page_grid_7 {height: 139vw;overflow: hidden;}
+.page_floor_product .page_grid_9 {height: 140vw;overflow: hidden;}
+.page_floor_product .page_grid_10 {height: 139vw;overflow: hidden;}
+.page_floor_product .page_grid_11 {height: 174vw;overflow: hidden;}
+.max{height: auto !important;}
+}

+ 4 - 4
src/main/resources/static/css/product/instruement.css

@@ -39,7 +39,7 @@
     .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
     .productItem .price .price_text_tag .listTag{margin: 0;float: left}
     .productItem .price  .main_price_show{width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
-    .productItem .price .icon:before{width: 63px;}
+    .productItem .price .icon:before{width: 63px;height: 32px;}
     .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #4a4f58;text-align: left;float: left;}
     .productItem .price .icon.i5:before {
         background-position: -2px -832px;
@@ -115,9 +115,9 @@
     .floorCon .hotList .imgbaner img{width: 100%;height: 100%;}
     .hotList .section_page_main {height: 140vw;overflow: hidden;}
     .hotList .section_page_main.type{height: 167vw}
-    .open.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -51vw 0px;transition:none}
-    .close.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -42vw 0px;transition:none}
-    .instrue-right .hot-search .left-box{width: 90%;float: left}
+
+    .instrue-ri .open.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -51vw 0px;transition:none}
+    .close.mIcon:before{width: 5.4vw;height: 5.4vw;background-position: -42vw 0px;transition:none}ght .hot-search .left-box{width: 90%;float: left}
     .instrue-right .hot-search .right-box{float: right;width: 10%;text-align: center}
     .item_icon{height: 8.8vw;padding: 2.7vw 0;width: 100%}
     .item_icon img{width: 8.8vw;height: 8.8vw;display: block;margin: 0 auto}

BIN
src/main/resources/static/img/activity/next-icon.png


BIN
src/main/resources/static/img/activity/prev-icon.png


+ 299 - 0
src/main/resources/static/js/activity/activityTopic.js

@@ -0,0 +1,299 @@
+var activity = new Vue({
+    el: '#activity',
+    data: {
+        listLoading: true, //加载动画
+        hotlist: [],       //热搜词
+        recommendPage: 1,  //
+        floorList: [],    //楼层列表
+        pageInfo: null,
+        userId: 0,         //用户id
+        typeSort: '',
+        showflag: false,   //对话框
+        params: {          //请求参数
+            pageId: '',
+            userId: '',
+            source: 1
+        },
+        nav_linkName: '',   //导航名
+        isPc: window.isPC
+    },
+    filters: {
+        NumFormat: function (value) {//处理金额
+            return Number(value).toFixed(2);
+        },
+        marginRight: function (index) {
+            var strArr = index.toString().split('');
+            var lastStr = strArr[strArr.length - 1];
+            return lastStr === '2' || lastStr === '7'
+        }
+    },
+    computed: {},
+    created: function () {
+        // this.init();
+    },
+    methods: {
+        //促销活动类型数据处理
+        PromotionsFormat: function (promo) {
+            if (promo !== null) {
+                if (promo.type === 1 && promo.mode === 1) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+            return false;
+        },
+        closeup: function () {
+            this.showflag = false;
+            document.body.style.overflow = '';
+        },
+        showNav: function () {
+            var _this = this;
+            _this.showflag = !_this.showflag;
+            if (_this.showflag) {
+                document.body.style.overflow = 'hidden';
+            } else {
+                document.body.style.overflow = '';
+            }
+        },
+        toserch: function (item) {
+            window.location.href = '/product/instruelist.html?bigTypeID=' + item.bigTypeID + '&typeSort=' + this.typeSort + '&name=' + this.nav_linkName
+        },
+        //查看更多
+        seeMore: function (page) {
+            page.isPageMore = !page.isPageMore;
+        },
+        //初始化数据
+        init: function () {
+            this.nav_linkName = decodeURI(CAIMEI.getUrlParam('name'));
+            //判断用户是否登录
+            var userInfo = localStorage.getItem('userInfo');
+            if (userInfo) {
+                this.params.userId = JSON.parse(userInfo).userId;
+            }
+            //获取页面id
+            this.params.pageId = getUrlParam('id');
+            this.getFloorData()
+        },
+        //用于处理轮播图楼层的方法
+        formatFloorData: function (list, templateType) {
+            var result = [];
+            var i = 0, j = list.length;
+            if (isPC) {
+                switch (templateType) {
+                    case '1':
+                        j = 10;
+                        break;
+                    case '2':
+                    case '6':
+                        j = 6;
+                        break;
+                    case '7':
+                    case '9':
+                    case '3':
+                        j = 4;
+                        break;
+                    case '8':
+                    case '4':
+                        j = 2;
+                        break;
+                    case '21':
+                        j = 5;
+                        break;
+                    case '5':
+                        j = 3;
+                        break;
+                    default:
+                        break;
+                }
+            } else {
+                switch (templateType) {
+                    case '1':
+                        j = 8;
+                        break;
+                    case '2':
+                        j = 6;
+                        break;
+                    case '7':
+                    case '8':
+                    case '3':
+                    case '4':
+                    case '5':
+                    case '6':
+                        return list;
+                    case '21':
+                    case '9':
+                        j = 4;
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+            while (list.length > 0) {
+                var remove = list.splice(i, j);
+                result.push(remove);
+            }
+            return result;
+        },
+        //获取页面数据
+        getFloorData: function () {
+            var _self = this;
+            ProductApi.getActivityData(_self.params, function (res) {
+                if (res.code === 0) {
+                    console.log(res);
+                    _self.floorList = res.data.floorList;
+                    _self.pageInfo = res.data.page;
+                    _self.floorList.forEach(function (page) {
+                        if (page.floorContent) {
+                            var templateType = page.floorContent.templateType;
+                            switch (templateType) {
+                                case "21":
+                                case "1":
+                                case "2":
+                                case "3":
+                                case "7":
+                                case "8":
+                                case "9":
+                                case "4":
+                                case "5":
+                                case "6":
+                                    page.floorImageList = _self.formatFloorData(page.floorImageList, page.floorContent.templateType);
+                                    break;
+                                default:
+                                    break;
+                            }
+                            if(isPC){
+                                if (templateType === '11' || templateType === '12' || templateType === '13' || templateType === '15' || templateType === '17' || templateType === '19') {
+                                    if (page.floorImageList.length > 5) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (templateType === '16' || templateType === '18') {
+                                    if (page.floorImageList.length > 7) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (templateType === '14' || templateType === '19' || templateType === '20') {
+                                    if (page.floorImageList.length > 10) {
+                                        page.isPageMore = true;
+                                    }
+                                }
+                            }else{
+                                var type1  = ['11','12','14','15','16','17','18','19','20','6'];
+                                if (type1.indexOf(templateType) !== -1) {
+                                    if (page.floorImageList.length > 4) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (templateType === '13' || templateType === '4' || templateType === '8') {
+                                    if (page.floorImageList.length > 2) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (templateType === '3') {
+                                    if (page.floorImageList.length > 3) {
+                                        page.isPageMore = true;
+                                    }
+                                }else if (templateType === '10') {
+                                    if (page.floorImageList.length > 1) {
+                                        page.isPageMore = true;
+                                    }
+                                }
+                            }
+                        }
+                    });
+                    console.log(_self.floorList);
+                    _self.listLoading = false;
+                    _self.swiperNanner();
+                } else {
+                    CAIMEI.Alert(res.msg, '确定');
+                }
+            })
+        },
+        //获取楼层信息
+        GetHomeFloorData: function () {
+            var _self = this;
+            ProductApi.GethomeData(_self.params, function (res) {
+                if (res.code === 0) {
+                    _self.hotlist = res.data.hotSearchList;
+                    _self.floorList = res.data.floorList;
+                    _self.typeSort = res.data.page.typeSort;
+                    _self.listLoading = false;
+                    _self.floorList.forEach(function (page) {
+                        if (page.floorContent) {
+                            if (isPC) {
+                                if (page.floorContent.templateType == '1' || page.floorContent.templateType == '3') {
+                                    if (page.floorImageList.length > 7) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (page.floorContent.templateType == '2' || page.floorContent.templateType == '4' || page.floorContent.templateType == '7') {
+                                    if (page.floorImageList.length > 5) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (page.floorContent.templateType == '5') {
+                                    if (page.floorImageList.length > 10) {
+                                        page.isPageMore = true;
+                                    }
+                                }
+                            } else {
+                                if (page.floorContent.templateType == '1' || page.floorContent.templateType == '3') {
+                                    if (page.floorImageList.length > 3) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (page.floorContent.templateType == '2' || page.floorContent.templateType == '4') {
+                                    if (page.floorImageList.length > 2) {
+                                        page.isPageMore = true;
+                                    }
+                                } else if (page.floorContent.templateType == '5') {
+                                    if (page.floorImageList.length > 4) {
+                                        page.isPageMore = true;
+                                    }
+                                }
+                            }
+                        }
+                    });
+                    _self.SwiperNanner();
+                    _self.getClassify();
+                } else {
+                    CAIMEI.Alert(res.msg, '确定');
+                }
+            })
+        },
+        swiperNanner: function () {
+            var swiperStyle1 = ['product_list_8', 'page_floor_picture_01', 'page_floor_picture_02', 'page_floor_picture_05',  'page_floor_article_01','page_floor_article_04'];
+            var swiperStyle2 = ['page_floor_article_03','page_floor_article_02','page_floor_picture_03', 'page_floor_picture_04', 'page_floor_picture_06'];
+            setTimeout(function () {
+                // 图片懒加载
+                $("img[data-original]").lazyload();
+                //轮播图加载
+                $(".swiper-container").each(function (index, el) {
+                    var elstr = '#' + el.id;
+                    if (swiperStyle1.indexOf(el.id) !== -1) {
+                        new Swiper(elstr, {
+                            loop: true,
+                            pagination: {
+                                el: '.cm-swiper-pagination',
+                                bulletClass: 'cm-bullet',
+                                bulletActiveClass: 'cm-bullet-active'
+                            }
+                        });
+                    }
+                     if (swiperStyle2.indexOf(el.id) !== -1) {
+                        var str = el.id.split('_');
+                        var lastFix =str[str.length-2] + '-' + str[str.length-1];
+                        var nextEl = '.cm-swiper-next-' + lastFix;
+                        var preEl = '.cm-swiper-prev-' + lastFix;
+                        new Swiper(elstr, {
+                            loop: true,
+                            navigation: {
+                            nextEl: nextEl,
+                            prevEl: preEl
+                          }
+                        });
+                    }
+                });
+            }, 500);
+        }
+    },
+    mounted: function () {
+        this.init();
+        // this.testData();
+    }
+});

+ 30 - 24
src/main/resources/static/js/common/serviceapi/product.service.js

@@ -4,40 +4,46 @@
  * auther xw
  */
 var ProductApi = {
-        GetProductDdtails: function (params, callback) {//获取商品详情
-            Http.AjaxService({ url:'/product/details', type:'get', data:params, json:true})
-            .then(function(res){
+    GetProductDdtails: function (params, callback) {//获取商品详情
+        Http.AjaxService({url: '/product/details', type: 'get', data: params, json: true})
+            .then(function (res) {
                 callback(res);
             });
-        },
-        GetbigTypeclassify: function (params, callback) {//一二三级分类-商品分类列表
-            Http.AjaxService({ url:'/product/bigType/classify', type:'get', data:params, json:true})
-            .then(function(res){
+    },
+    GetbigTypeclassify: function (params, callback) {//一二三级分类-商品分类列表
+        Http.AjaxService({url: '/product/bigType/classify', type: 'get', data: params, json: true})
+            .then(function (res) {
                 callback(res);
             });
-        },
-        GethomeData:function (params, callback) {//产品仪器楼层
-             Http.AjaxService({ url:'/home/instrumentData', type:'get', data:params, json:true})
-            .then(function(res){
+    },
+    GethomeData: function (params, callback) {//产品仪器楼层
+        Http.AjaxService({url: '/home/instrumentData', type: 'get', data: params, json: true})
+            .then(function (res) {
                 callback(res);
             });
-        },
-       GetSearchProduct:function (params, callback) {//产品仪器商品列表查询
-             Http.AjaxService({ url:'/search/query/product/type', type:'get', data:params, json:true})
-            .then(function(res){
+    },
+    GetSearchProduct: function (params, callback) {//产品仪器商品列表查询
+        Http.AjaxService({url: '/search/query/product/type', type: 'get', data: params, json: true})
+            .then(function (res) {
                 callback(res);
             });
-        },
-        GetbeautyProduct:function (params, callback) {//产品仪器商品列表查询
-             Http.AjaxService({ url:'/activity/data', type:'get', data:params, json:true})
-            .then(function(res){
+    },
+    GetbeautyProduct: function (params, callback) {//产品仪器商品列表查询
+        Http.AjaxService({url: '/activity/data', type: 'get', data: params, json: true})
+            .then(function (res) {
                 callback(res);
             });
-        },
-        GetAuthProductDeatil:function (params, callback) {//产品仪器商品列表查询
-             Http.AjaxService({ url:'/product/auth/details', type:'get', data:params, json:true})
-            .then(function(res){
+    },
+    GetAuthProductDeatil: function (params, callback) {//产品仪器商品列表查询
+        Http.AjaxService({url: '/product/auth/details', type: 'get', data: params, json: true})
+            .then(function (res) {
                 callback(res);
             });
-        }
+    },
+    getActivityData: function (params, callback) {
+        Http.AjaxService({url: '/home/activity/data', type: 'get', data: params, json: true})
+            .then(function (res) {
+                callback(res);
+            });
+    }
 };

+ 1643 - 2
src/main/resources/templates/activity/activityTopic.html

@@ -4,16 +4,1657 @@
 <html>
 <head>
     <template th:replace="components/head-link"></template>
+    <link href="/lib/swiper.min.css" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/activity/activityTopic.css(v=${version})}" rel="stylesheet" type="text/css">
     <title>活动专题页面</title>
 </head>
 <body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
 
+<div id="activity" class="activity">
+    <!--  loading  -->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <div class="content">
+        <!--活动主题图片-->
+        <div class="banner" v-if="pageInfo">
+            <img :src="pageInfo.headImage" v-if="isPC">
+            <img :src="pageInfo.crmHeadImage" v-else>
+        </div>
+        <!-- 内容区域 -->
+        <div class="inner">
+            <div class="right_box"></div>
+            <div class="left_box">
+                <!-- 楼层列表 -->
+                <div class="page_floor" v-for="(page,index) in floorList" :key="index">
+                    <!--楼层标题-->
+                    <div class="floor_title" v-if="page.floorContent">
+                        <h1 :data-id="index+1" v-text="page.title"></h1>
+                        <p v-text="page.detail"></p>
+                    </div>
 
-    <!-- 引入底部 -->
+                    <!--图片楼层模板区域-->
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '1'">
+                        <div class="page_floor_picture">
+                            <div class="page_main page_grid_1 clearfix">
+                            <!-- 图片 -->
+                            <div class="swiper-container" id="page_floor_picture_01">
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                        <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                            <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="cm-swiper-pagination"></div>
+                            </div>
+                        </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '2'">
+                        <div class="page_floor_picture">
+                            <div class="page_main page_grid_2 clearfix">
+                            <!-- 图片 -->
+                            <div class="swiper-container" id="page_floor_picture_02">
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                        <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                            <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="cm-swiper-pagination"></div>
+                            </div>
+                        </div>
+                        </div>
+                    </template>
+                    <!--###############################+++-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '7'">
+                        <div class="page_floor_picture">
+                            <div class="page_main page_grid_3 clearfix">
+                                <!-- 图片 -->
+                                <div class="cm-swiper-prev cm-swiper-prev-picture-03" v-if="isPC"></div>
+                                <div class="cm-swiper-next cm-swiper-next-picture-03" v-if="isPC"></div>
+                                <div class="swiper-container pc_view" id="page_floor_picture_03" v-if="isPC">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                            <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                                <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                    <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                    <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                                <!-- 滚动视图 -->
+                                <div class="scroll_view mobile_view" v-else>
+                                    <div class="page_floor_item" v-for="pros in page.floorImageList">
+                                        <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                            <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                            <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                        </a>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################+++-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '8'">
+                        <div class="page_floor_picture">
+                            <div class="page_main page_grid_4 clearfix">
+                                <!-- 图片 -->
+                                <div class="cm-swiper-prev cm-swiper-prev-picture-04" v-if="isPC"></div>
+                                <div class="cm-swiper-next cm-swiper-next-picture-04" v-if="isPC"></div>
+                                <div class="swiper-container pc_view" id="page_floor_picture_04" v-if="isPC">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                            <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                                <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                    <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                    <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- 手机视图 -->
+                                <div class="mobile_view" v-else>
+                                    <div class="clearfix" :class="page.isPageMore?'':'max'">
+                                        <div class="page_floor_item" v-for="pros in page.floorImageList">
+                                            <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <!-- 查看更多 -->
+                                    <div class="section_page_more" v-if="page.isPageMore">
+                                        <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '9'">
+                        <div class="page_floor_picture">
+                            <div class="page_main page_grid_5 clearfix">
+                            <!-- 图片 -->
+                            <div class="swiper-container" id="page_floor_picture_05">
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                        <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                            <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="cm-swiper-pagination"></div>
+                            </div>
+                        </div>
+                        </div>
+                    </template>
+                    <!--###############################+++-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '10'">
+                        <div class="page_floor_picture">
+                            <div class="page_main page_grid_6 clearfix">
+                            <!-- 图片 -->
+                            <div class="cm-swiper-prev cm-swiper-prev-picture-06" v-if="isPC"></div>
+                            <div class="cm-swiper-next cm-swiper-next-picture-06" v-if="isPC"></div>
+                            <div class="swiper-container" id="page_floor_picture_06" v-if="isPC">
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide clearfix" v-for="pros in page.floorImageList" :key="pros.id">
+                                        <div class="page_floor_item">
+                                            <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                                <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="cm-swiper-pagination"></div>
+                            </div>
+
+                            <!-- 手机端 -->
+                            <div class="mobile_view" v-else>
+                                <div class="clearfix" :class="page.isPageMore?'':'max'">
+                                    <div class="page_floor_item" v-for="pros in page.floorImageList" :key="pros.id">
+                                        <a :href="pros.link!='' ? pros.link : 'javascript:void(0)'">
+                                            <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                            <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- 查看更多 -->
+                                <div class="section_page_more" v-if="page.isPageMore">
+                                    <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                                </div>
+                            </div>
+                        </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+
+                    <!--文章楼层模板区域-->
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '3'">
+                        <div class="page_floor_article">
+                            <div class="page_main page_grid_1 clearfix">
+                                <!-- 图片 -->
+                                <div class="swiper-container pc_view" id="page_floor_article_01" v-if="isPC">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                            <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                                <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                    <div class="page_article_cover">
+                                                        <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                        <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                                    </div>
+                                                    <div class="page_article_text">
+                                                        <h2>{{pros.name}}</h2>
+                                                        <div class="line"></div>
+                                                        <p class="text-overflow" v-html="pros.content"></p>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="cm-swiper-pagination"></div>
+                                </div>
+
+                                <!--手机端-->
+                                <div class="mobile_view" v-else>
+                                    <div class="clearfix" :class="page.isPageMore?'':'max'">
+                                        <div class="page_floor_item" v-for="pros in page.floorImageList">
+                                            <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                <div class="page_article_cover">
+                                                    <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                    <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage"
+                                                         v-else>
+                                                </div>
+                                                <div class="page_article_text">
+                                                    <h2>{{pros.name}}</h2>
+                                                    <p v-html="pros.content"></p>
+                                                </div>
+                                            </a>
+                                        </div>
+
+                                    </div>
+                                    <!-- 查看更多 -->
+                                    <div class="section_page_more"  v-if="page.isPageMore">
+                                        <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################+++-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '4'">
+                        <div class="page_floor_article">
+                            <div class="page_main page_grid_2 clearfix">
+                                <div class="cm-swiper-prev cm-swiper-prev-article-02" v-if="isPC"></div>
+                                <div class="cm-swiper-next cm-swiper-next-article-02" v-if="isPC"></div>
+                                <!-- 图片 -->
+                                <div class="swiper-container pc_view" id="page_floor_article_02" v-if="isPC">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                            <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                                <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                    <div class="page_article_cover">
+                                                        <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                        <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage" v-else>
+                                                    </div>
+                                                    <div class="page_article_text">
+                                                        <h2>{{pros.name}}</h2>
+                                                        <div class="line"></div>
+                                                        <p class="text-overflow" v-html="pros.content"></p>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!--手机端-->
+                                <div class="mobile_view" v-else>
+                                    <div class="clearfix" :class="page.isPageMore?'':'max'">
+                                        <div class="page_floor_item" v-for="pros in page.floorImageList">
+                                            <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                <div class="page_article_cover">
+                                                    <img :src="pros.image && pros.image" :alt="pros.name" v-if="isPC">
+                                                    <img :src="pros.adsImage && pros.adsImage" :alt="pros.adsImage"
+                                                         v-else>
+                                                </div>
+                                                <div class="page_article_text">
+                                                    <h2>{{pros.name}}</h2>
+                                                    <p class="text-overflow" v-html="pros.content"></p>
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <!-- 查看更多 -->
+                                    <div class="section_page_more"  v-if="page.isPageMore">
+                                        <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################+++-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '5'">
+                        <div class="page_floor_article">
+                            <div class="page_main page_grid_3 clearfix">
+                                <!-- 图片 -->
+                                <div class="cm-swiper-prev cm-swiper-prev-article-03" v-if="isPC"></div>
+                                <div class="cm-swiper-next cm-swiper-next-article-03" v-if="isPC"></div>
+                                <div class="swiper-container pc_view" id="page_floor_article_03" v-if="isPC">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                            <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                                <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                    <div class="page_article_cover">
+                                                        <img :src="pros.image" :alt="pros.name">
+                                                    </div>
+                                                    <div class="page_article_text">
+                                                        <h2>{{pros.name}}</h2>
+                                                        <div class="line"></div>
+                                                        <p class="text-overflow" v-html="pros.content"></p>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!--手机端-->
+                                <div class="scroll_view mobile_view" v-else>
+                                    <div class="page_floor_item" v-for="pros in page.floorImageList">
+                                        <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                            <div class="page_article_cover">
+                                                <img :src="pros.image" :alt="pros.name">
+                                            </div>
+                                            <div class="page_article_text">
+                                                <h2>{{pros.name}}</h2>
+                                                <p class="text-overflow" v-html="pros.content"></p>
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '6'">
+                        <div class="page_floor_article">
+                            <div class="page_main page_grid_4 clearfix">
+                                <!-- 图片 -->
+                                <div class="swiper-container pc_view" id="page_floor_article_04" v-if="isPC">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="list in page.floorImageList">
+                                            <div class="page_floor_item" v-for="pros in list" :key="pros.id">
+                                                <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                    <div class="page_article_cover">
+                                                        <img :src="pros.image" :alt="pros.name">
+                                                    </div>
+                                                    <div class="page_article_text">
+                                                        <h2>{{pros.name}}</h2>
+                                                        <div class="line"></div>
+                                                        <p class="text-overflow" v-html="pros.content"></p>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="cm-swiper-pagination"></div>
+                                </div>
+
+                                <!--手机端-->
+                                <div class="mobile_view" v-else>
+                                    <div class="clearfix" :class="page.isPageMore?'':'max'">
+                                        <div class="page_floor_item" v-for="pros in page.floorImageList">
+                                            <a :href="pros.link=='' ? pros.link : 'javascript:void(0)'">
+                                                <div class="page_article_cover">
+                                                    <img :src="pros.image" :alt="pros.name">
+                                                </div>
+                                                <div class="page_article_text">
+                                                    <h2>{{pros.name}}</h2>
+                                                    <p class="text-overflow" v-html="pros.content"></p>
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <!-- 查看更多 -->
+                                    <div class="section_page_more"  v-if="page.isPageMore">
+                                        <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+
+                    <!--商品楼层模板区域-->
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '11'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_9 clearfix" :class="page.isPageMore ? '' : 'max'">
+                              <!-- 广告banner -->
+                              <div class="page_floor_item ad">
+                                <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink2 : 'javascript:void(0)'">
+                                    <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                    <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                </a>
+                              </div>
+                              <div class="page_floor_item ad">
+                                <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink2 : 'javascript:void(0)'">
+                                    <img :src="page.floorContent.pcAdsImage2" alt="" v-if="isPc">
+                                    <img :src="page.floorContent.appletsAdsImage2" alt="" v-else>
+                                </a>
+                              </div>
+                              <div class="page_floor_item ad">
+                                <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink2 : 'javascript:void(0)'">
+                                    <img :src="page.floorContent.pcAdsImage3" alt="" v-if="isPc">
+                                    <img :src="page.floorContent.appletsAdsImage3" alt="" v-else>
+                                </a>
+                              </div>
+                              <!-- 产品列表 -->
+                              <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                        <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '12'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_10 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                         <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad">
+                                    <div class="ad-img">
+                                        <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                            <img :src="page.floorContent.pcAdsImage2" alt="" v-if="isPc">
+                                            <img :src="page.floorContent.appletsAdsImage2" alt="" v-else>
+                                        </a>
+                                    </div>
+                                    <div class="ad-img">
+                                        <a :href="page.floorContent.adsLink3!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                            <img :src="page.floorContent.pcAdsImage3" alt="" v-if="isPc">
+                                            <img :src="page.floorContent.appletsAdsImage3" alt="" v-else>
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '13'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_11 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad">
+                                    <div class="ad-img">
+                                        <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                            <img :src="page.floorContent.pcAdsImage2" alt="" v-if="isPc">
+                                            <img :src="page.floorContent.appletsAdsImage2" alt="" v-else>
+                                        </a>
+                                    </div>
+                                    <div class="ad-img">
+                                        <a :href="page.floorContent.adsLink3!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                            <img :src="page.floorContent.pcAdsImage3" alt="" v-if="isPc">
+                                            <img :src="page.floorContent.appletsAdsImage3" alt="" v-else>
+                                        </a>
+                                    </div>
+                                    <div class="ad-img pc_view">
+                                        <a :href="page.floorContent.adsLink3!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                            <img :src="page.floorContent.pcAdsImage3" alt="" v-if="isPc">
+                                            <img :src="page.floorContent.appletsAdsImage3" alt="" v-else>
+                                        </a>
+                                    </div>
+                                    <div class="ad-img pc_view">
+                                        <a :href="page.floorContent.adsLink4!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                            <img :src="page.floorContent.pcAdsImage4" alt="" v-if="isPc">
+                                            <img :src="page.floorContent.appletsAdsImage4" alt="" v-else>
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- 手机端 -->
+                                <div class="page_floor_item ad mobile_view">
+                                    <a :href="page.floorContent.adsLink3!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage3" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage3" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad mobile_view">
+                                    <a :href="page.floorContent.adsLink4!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage4" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage4" alt="" v-else>
+                                    </a>
+                                </div>
+                                <!-- 手机端END -->
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '14'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_7 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '15'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_4 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage2" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage2" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink3!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage3" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage3" alt="" v-else>
+                                    </a>
+                                </div>
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '16'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_3 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage2" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage2" alt="" v-else>
+                                    </a>
+                                </div>
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index" :mr-normal="index+1 | marginRight">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 ">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '17'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_2 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink2!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage2" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage2" alt="" v-else>
+                                    </a>
+                                </div>
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0 ">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '18'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_1 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <!-- 产品列表 -->
+                                <a class="page_floor_item pro" :href="pros.link" v-for="(pros,index) in page.floorImageList" :key="index"
+                                   :mr-normal="index+1 | marginRight">
+                                    <div class="page_header">
+                                        <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                        <!--商品标签-->
+                                        <div class="page_main_tag">
+                                            <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                        </div>
+                                        <!--商品名称-->
+                                        <div class="page_main_text">
+                                            <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                        </div>
+                                        <!--商品价格区域-->
+                                        <div class="page_main_price">
+                                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                            <!--价格-->
+                                            <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '19'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_5 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '20'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_6 clearfix" :class="page.isPageMore ? '' : 'max'">
+                                <!-- 产品列表 -->
+                                <section class="page_floor_item pro" v-for="(pros,index) in page.floorImageList" :key="index">
+                                <a :href="pros.link">
+                                    <div class="page_header">
+                                      <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    </div>
+                                    <div class="page_footer">
+                                      <div class="page_main_tag">
+                                       <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                      </div>
+                                      <div class="page_main_text">
+                                        <span class="tag" v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                      </div>
+                                      <div class="page_main_price">
+                                        <div class="main_price_text" v-if="pros.listType == 1">
+                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                    <template v-if="pros.product.productCategory==1">
+                                                        <!--价格 第一种显示方式-->
+                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                            <div class="price_text_tag clearfix">
+                                                                <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                    {{pros.product.promotions.name}}
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--价格 第二种显示方式-->
+                                                            <template v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                        {{pros.product.promotions.name}}<span v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_unde" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                    ¥{{ (PromotionsFormat(pros.product.promotions) ? pros.product.price1 : pros.product.retailPrice ) | NumFormat }}
+                                                                </div>
+                                                            </template>
+                                                            <!--价格 第三种显示方式-->
+                                                            <template v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class="main_price_unde">¥会员可见</div>
+                                                            </template>
+                                                            <!--价格 第四种显示方式-->
+                                                            <template v-else>
+                                                                <div class="price_text_tag">
+                                                                    <p class="listTag" v-if="pros.product.actStatus==1">{{pros.product.promotions.name}}</p>
+                                                                </div>
+                                                                <div class=" price_grade">
+                                                                    <span class="bold">¥</span>
+                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </template>
+                                                    <!--价格 第五种显示方式-->
+                                                    <template v-else>
+                                                        <div class="price_text_tag"></div>
+                                                        <div class="main_price_unde" v-if="pros.product.detailTalkFlag == '2'">¥价格详聊</div>
+                                                        <div class="main_price_unde" v-else>¥{{ pros.product.retailPrice | NumFormat }}</div>
+                                                    </template>
+                                                </template>
+                                                <template v-else>
+                                                    <!--价格 第六种显示方式-->
+                                                    <template v-if="pros.product.productCategory == 1">
+                                                        <div class="price_text_tag">
+                                                            <p class="listTag" v-if="pros.product.actStatus==1">
+                                                                {{pros.product.promotions.name}}
+                                                            </p>
+                                                        </div>
+                                                        <div class=" price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+pros.product.price1Grade"></i></div>
+                                                    </template>
+                                                    <!--价格 第七种显示方式-->
+                                                    <template v-else>
+                                                        <em class="main_price_unde">¥登录可见</em>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                      </div>
+                                    </div>
+                                </a>
+                              </section>
+                              <!-- 广告banner -->
+                                <div class="page_floor_item ad">
+                                    <a :href="page.floorContent.adsLink1!='' ? page.floorContent.adsLink1 : 'javascript:void(0)'">
+                                        <img :src="page.floorContent.pcAdsImage1" alt="" v-if="isPc">
+                                        <img :src="page.floorContent.appletsAdsImage1" alt="" v-else>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="section_page_more" v-if="page.isPageMore">
+                                <div class="more" @click="seeMore(page)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                    <template v-if="page.floorContent && page.floorContent.templateType == '21'">
+                        <div class="page_floor_product">
+                            <div class="page_main page_grid_8 clearfix">
+                                <!-- 产品列表 -->
+                                <div class="swiper-container" id="product_list_8">
+                                    <div class="swiper-wrapper">
+                                        <div class="swiper-slide clearfix" v-for="(proList,index1) in page.floorImageList" :key="index1">
+                                            <section class="page_floor_item pro" v-for="(pros,index2) in proList" :key="index2">
+                                                <a :href="pros.link">
+                                                    <div class="page_header">
+                                                        <img src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                                    </div>
+                                                    <div class="page_footer">
+                                                        <div class="page_main_tag">
+                                                            <p v-if="pros.listType == 2">{{ pros.label }}</p>
+                                                        </div>
+                                                        <div class="page_main_text">
+                                                <span class="tag"
+                                                      v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>{{pros.name}}
+                                                        </div>
+                                                        <div class="page_main_price">
+                                                            <div class="main_price_text" v-if="pros.listType == 1">
+                                                                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                                    <template v-if="pros.product.productCategory==1">
+                                                                        <!--价格 第一种显示方式-->
+                                                                        <template v-if="pros.product.price1TextFlag==1">
+                                                                            <div class="price_text_tag clearfix">
+                                                                                <p class="listTag"
+                                                                                   v-if="pros.product.actStatus==1">
+                                                                                    {{pros.product.promotions.name}}
+                                                                                </p>
+                                                                            </div>
+                                                                            <div class="main_price_unde">¥价格未公开</div>
+                                                                        </template>
+                                                                        <template v-else>
+                                                                            <!--价格 第二种显示方式-->
+                                                                            <template
+                                                                                    v-if="(pros.product.price1TextFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                                                                <div class="price_text_tag">
+                                                                                    <p class="listTag"
+                                                                                       v-if="pros.product.actStatus==1">
+                                                                                        {{pros.product.promotions.name}}<span
+                                                                                            v-if="pros.priceFlag != 1">:¥{{pros.product.retailPrice | NumFormat}}</span>
+                                                                                    </p>
+                                                                                </div>
+                                                                                <div class="main_price_unde"
+                                                                                     :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                                    ¥{{
+                                                                                    (PromotionsFormat(pros.product.promotions)
+                                                                                    ?
+                                                                                    pros.product.price1 :
+                                                                                    pros.product.retailPrice ) |
+                                                                                    NumFormat }}
+                                                                                </div>
+                                                                            </template>
+                                                                            <!--价格 第三种显示方式-->
+                                                                            <template
+                                                                                    v-else-if="pros.product.price1TextFlag==2 && pros.product.userIdentity==4">
+                                                                                <div class="price_text_tag">
+                                                                                    <p class="listTag"
+                                                                                       v-if="pros.product.actStatus==1">
+                                                                                        {{pros.product.promotions.name}}</p>
+                                                                                </div>
+                                                                                <div class="main_price_unde">¥会员可见</div>
+                                                                            </template>
+                                                                            <!--价格 第四种显示方式-->
+                                                                            <template v-else>
+                                                                                <div class="price_text_tag">
+                                                                                    <p class="listTag"
+                                                                                       v-if="pros.product.actStatus==1">
+                                                                                        {{pros.product.promotions.name}}</p>
+                                                                                </div>
+                                                                                <div class=" price_grade">
+                                                                                    <span class="bold">¥</span>
+                                                                                    <i :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                                </div>
+                                                                            </template>
+                                                                        </template>
+                                                                    </template>
+                                                                    <!--价格 第五种显示方式-->
+                                                                    <template v-else>
+                                                                        <div class="price_text_tag"></div>
+                                                                        <div class="main_price_unde"
+                                                                             v-if="pros.product.detailTalkFlag == '2'">¥价格详聊
+                                                                        </div>
+                                                                        <div class="main_price_unde" v-else>¥{{
+                                                                            pros.product.retailPrice
+                                                                            | NumFormat }}
+                                                                        </div>
+                                                                    </template>
+                                                                </template>
+                                                                <template v-else>
+                                                                    <!--价格 第六种显示方式-->
+                                                                    <template v-if="pros.product.productCategory == 1">
+                                                                        <div class="price_text_tag">
+                                                                            <p class="listTag"
+                                                                               v-if="pros.product.actStatus==1">
+                                                                                {{pros.product.promotions.name}}
+                                                                            </p>
+                                                                        </div>
+                                                                        <div class=" price_grade"><span
+                                                                                class="bold">¥</span><i
+                                                                                :class="'icon mIcon i'+pros.product.price1Grade"></i>
+                                                                        </div>
+                                                                    </template>
+                                                                    <!--价格 第七种显示方式-->
+                                                                    <template v-else>
+                                                                        <em class="main_price_unde">¥登录可见</em>
+                                                                    </template>
+                                                                </template>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </a>
+                                            </section>
+                                        </div>
+                                    </div>
+                                    <div class="cm-swiper-pagination"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <!--###############################-->
+                </div>
+            </div>
+        </div>
+
+        <!-- 大图弹窗	-->
+        <div class="popup" style="display: none;">
+            <div class="show_popup">
+                <div class="bg_icon"><i class="icon mIcon"></i></div>
+                <div class="bg_img"><img src=""></div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<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/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/activityTopic.js(v=${version})}"></script>
 </body>
 </html>