新首页改版

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

@@ -3,6 +3,8 @@ package com.caimei.www.controller.unlimited;
 import com.caimei.www.controller.BaseController;
 import com.caimei.www.pojo.page.ImageLink;
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.NewPageAdvertisementImage;
+import com.caimei.www.pojo.page.NewPageTopAdvertisementImage;
 import com.caimei.www.service.page.BaseService;
 import com.caimei.www.service.page.HomeService;
 import lombok.extern.slf4j.Slf4j;
@@ -19,6 +21,7 @@ import org.thymeleaf.util.StringUtils;
 import javax.annotation.Resource;
 import java.text.SimpleDateFormat;
 import java.util.Date;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -32,10 +35,12 @@ import java.util.Map;
 @Controller
 public class HomeController extends BaseController {
 
-	private static final String HOME_PATH = "index";
-    /** 错误页面 */
-	private static final String ERROR_PATH = "error/404";
-	private static final String SEARCH_CHILDREN = "error/search_children";
+    private static final String HOME_PATH = "index";
+    /**
+     * 错误页面
+     */
+    private static final String ERROR_PATH = "error/404";
+    private static final String SEARCH_CHILDREN = "error/search_children";
 
     @Resource
     private BaseService baseService;
@@ -46,8 +51,10 @@ public class HomeController extends BaseController {
     public String tobanneri() {
         return "banner12";
     }
+
     /**
      * 首页页面路径
+     *
      * @param model
      * @return
      */
@@ -78,23 +85,28 @@ public class HomeController extends BaseController {
         source = source(referer);
         SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
         String format = dateFormat.format(new Date());
-        homeService.insertRecord(ip,subReferer,source,format);
-        log.info("首页访问来源记录完成========》"+source);
-		// 获取banner图
-		List<ImageLink> bannerList = homeService.getHomeBanners();
-		// 首页楼层
-		Map<String, Object> floorMap = homeService.getHomeFloors();
-		// 右侧侧边栏数据
+        homeService.insertRecord(ip, subReferer, source, format);
+        log.info("首页访问来源记录完成========》" + source);
+        // 获取banner图
+        List<ImageLink> bannerList = homeService.getHomeBanners();
+        // 首页楼层
+        Map<String, Object> floorMap = homeService.getHomeFloors();
+        // 右侧侧边栏数据
         Map<String, Object> sideMap = homeService.getHomeSideJson();
+
+        List<NewPageAdvertisementImage> ads = homeService.getAdvertisement();
+        model.addAttribute("advertisement", ads);
+        NewPageTopAdvertisementImage topAd = homeService.getTopPageAdvertisement();
+        model.addAttribute("topAdvertisement", topAd);
         model.addAttribute("bannerList", bannerList);
-		model.addAttribute("floorJson", floorMap);
-		model.addAttribute("sideJson", sideMap);
+        model.addAttribute("floorJson", floorMap);
+        model.addAttribute("sideJson", sideMap);
         model.addAttribute("msg", "首页");
         return HOME_PATH;
     }
 
     /**
-     *  404
+     * 404
      */
     @GetMapping("/404.html")
     public String errorPage(final Model model) {
@@ -103,7 +115,7 @@ public class HomeController extends BaseController {
     }
 
     /**
-     *  腾讯公益
+     * 腾讯公益
      */
     @GetMapping("/search_children.html")
     public String searchChildren(final Model model) {

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

@@ -29,6 +29,7 @@ public class ProductController extends BaseController {
 
     private static final String PRODUCT_LIST_PATH = "product/list";
     private static final String PRODUCT_HOT_PATH = "product/product-hot";
+    private static final String PRODUCT_FLOOR_PATH = "product/product-floor";
     private static final String PRODUCT_DETAIL_PATH = "product/detail";
     private static final String PRODUCT_SUPPORTING_PATH = "product/product-supporting";
     private static final String PROMOTIONS_LIST_PATH = "product/promotions";
@@ -94,13 +95,21 @@ public class ProductController extends BaseController {
     }
 
     /**
-     * 搜索结果 页面
+     * 新品橱窗
      */
     @GetMapping("/product/hot.html")
     public String hot() {
         return PRODUCT_HOT_PATH;
     }
 
+    /**
+     * 新楼层二级详情页
+     */
+    @GetMapping("/product/floor.html")
+    public String floor() {
+        return PRODUCT_FLOOR_PATH;
+    }
+
     /**
      * 优惠券活动商品列表
      */

src/main/resources/static/css/base/base.pc.css

@@ -409,14 +409,62 @@ iframe{width:320px !important;height: 280px !important}
 .loginAlert:after{content:'';display:block;width:125px;height:125px;background:url(/img/account/to_login.png) no-repeat left top;background-size:100% 100%;margin:10px 0 0 15px;}
 #supplierLogin {display: none;}
 /* 咨询，回到顶部 */
-#scrollTop{display:none;position:fixed;right:0;margin-right:0;width:88px;z-index:999;bottom:36px;padding: 10px 0;background: #FFFFFF; border-radius: 16px;box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);}
-#scrollTop .item{width:100%;border-radius: 10px;display: flex;align-items: center;flex-direction: row; background-color:#fff;box-sizing:border-box;text-align:center;font-size:12px;position:relative}
-#scrollTop .item>span{display:block;width:94px;box-sizing:border-box;position:relative;cursor:pointer;white-space:pre-wrap;word-break:break-all;}
+#scrollTop{
+    display:none;
+    position:fixed;
+    right:0;
+    margin-right:0;
+    width:58px;
+    z-index:999;
+    bottom:40%;
+    padding: 10px 0;
+    background: #FFFFFF;
+    border-radius: 20px 0 0 20px;
+    box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
+}
+#scrollTop .item{
+    width:100%;
+    height: 58px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color:#fff;
+    box-sizing:border-box;
+    text-align:center;
+    font-size:12px;
+    position:relative;
+    cursor:pointer;
+}
+#scrollTop .item>span{
+    display:flex;
+    box-sizing:border-box;
+    align-items: center;
+    position: relative;
+}
 #scrollTop .item>span:hover{color:#FF5B00;}
-#scrollTop .item .phone{padding:4px 16px 4px 42px;line-height:16px;}
-#scrollTop .item .phone:before{width:32px;height:32px;background-position:-7px -255px;position:absolute;top:4px;left:16px}
-#scrollTop .item .toTop{padding:12px 12px 12px 40px;line-height:16px;}
-#scrollTop .item .Iphone {padding:12px 12px 12px 40px;line-height:16px;}
+#scrollTop .item .icon-cart:before{
+    width:30px;
+    height:30px;
+    background-position:-74px -702px;
+}
+#scrollTop .item .toNumber{
+    display: block;
+    font-style: normal;
+    padding: 2px 6px;
+    position: absolute;
+    top: -2px;
+    right: 7px;
+    background: #666666;
+    border-radius: 50%;
+    COLOR: #ffffff;
+    font-size: 14px;
+}
+#scrollTop .item .icon-contact:before{
+    width:30px;
+    height:30px;
+    background-position:0px -255px;
+}
 #scrollTop .item .qrCode_cx {
     display: none;
     width: 240px;
@@ -458,8 +506,16 @@ iframe{width:320px !important;height: 280px !important}
     opacity: 1;
     border: 1px solid #FFE6DC;
 }
-#scrollTop .item .toTop:before{width:32px;height:32px;background-position:-47px -254px;position:absolute;top:4px;left:16px}
-#scrollTop .item .Iphone:before{width:32px;height:32px;background-position:-333px -646px;position:absolute;top:4px;left:16px;}
+#scrollTop .item .icon-top:before{
+    width:30px;
+    height:30px;
+    background-position:-40px -250px;
+}
+#scrollTop .item .icon-phone:before{
+    width:30px;
+    height:30px;
+    background-position:-327px -646px;
+}
 #scrollTop .item .aiItem {padding:12px 12px 12px 40px;line-height:16px;}
 #scrollTop .item .aiItem:before{content: '';width:20px;height:20px;background: url("/img/base/icon-ai@2x.png");background-size: cover;position: absolute;left: 15px;top: 10px;}
 #scrollTop .item .phoneHover{display:none;position:absolute;left:-238px;top:-150px;z-index:999;width:240px;height:383px;background:url(/img/common/hotline.png) no-repeat left top;box-sizing:border-box;padding:100px 15px 0 0;line-height:28px;font-size:14px;white-space:nowrap;}

src/main/resources/static/css/base/floor.css

@@ -4,12 +4,7 @@
  */
 @media screen and (min-width:768px) {
 .section_page{width:100%;height:auto;float:left}
-.section_page.hot{width:884px;height:432px;background: url("/img/hot/icon-hot-bg.png");background-size: cover;border-radius: 8px;}
 .swiper-container-floor.hotList{padding: 0 12px;}
-.section_page.hot .section_page_title{width:100%;height:103px;box-sizing:border-box;padding:31px 16px 16px 16px;position: relative;}
-.section_page.hot .section_page_title h1{font-size:24px;line-height:31px;text-align:left;color:#FFFFFF}
-.section_page.hot .section_page_title p{font-size:14px;line-height:19px;text-align:left;color:#FFFFFF;margin-top:6px}
-.section_page.hot .section_page_btn{display: block;width: 102px;height: 36px;background: url("/img/hot/icon-hot-btn.png");background-size: cover;position: absolute;right: 20px;top: 49px;}
 .section_page .section_page_title{width:100%;height:103px;box-sizing:border-box;padding:31px 0 16px 0}
 .section_page .section_page_title h1{font-size:24px;line-height:31px;text-align:left;color:#4a4f58}
 .section_page .section_page_title p{font-size:14px;line-height:19px;text-align:left;color:#93979f;margin-top:6px}
@@ -20,7 +15,6 @@
 .section_page .recommendBox-wrapperHot {overflow: visible !important;}
 .section_page .section_page_main.type_03{height:704px}
 .section_page  .page_main_item{width:164px;height:270px;float:left;margin-right:16px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;overflow: hidden;border-radius: 8px;}
-.section_page  .page_main_item.hot{width:164px;height:268px;float:left;margin-right:10px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;border-radius: 8px;}
 .section_page  .page_main_item.default{cursor:default}
 .section_page  .page_main_item.ad_04{border-radius:8px;}
 .section_page  .page_main_item.ad_04: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)}
@@ -104,14 +98,9 @@
  */
 @media screen and (max-width:768px) {
 .section_page{width:100%;height:auto;position: relative;}
-.section_page.hot{width:100%;height:auto;background: url("/img/hot/icon-hot-bg@h5.png");background-size: cover;border-radius: 4vw;}
 .section_page .section_page_title{padding:2.4vw 0 2.4vw 3.2vw;position:relative}
 .section_page .section_page_title h1{font-weight:bold;color:#4a4f58;font-size:4.8vw;line-height:9.7vw}
 .section_page .section_page_title p{font-weight:normal;color:#93979f;font-size:3.4vw;line-height:4.3vw}
-.section_page.hot .section_page_title h1{color:#FFFFFF}
-.section_page.hot .section_page_title p{color:#FFFFFF;}
-.swiper-container-floor.hotList{padding: 0 1vw;}
-.section_page.hot .section_page_btn{display: block;width:15.4vw;height: 5.9vw;background: url("/img/hot/icon-hot-btn@h5.png");background-size: cover;position: absolute;right:3.3vw;top: 6.8vw;}
 .section_page .page_main_item{width:45.6vw !important;height:70vw;overflow:hidden;margin:0 1.3vw 2.6vw 1.3vw;background:#fff;text-align:left;border-radius: 2vw;}
 .section_page .page_main_image{width:45.6vw;height:45.6vw;border-radius: 2vw 2vw 0 0;}
 .section_page .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}

src/main/resources/static/css/index/index-h5.css

@@ -0,0 +1,690 @@
+.mNavBox{width:100%;position:fixed;top:26.8vw;left:0;background:#FFF;height: 10vw; z-index: 999;padding: 0 10vw 0 2vw;box-sizing: border-box;}
+.mNavBox .mNavBox-main{display: flex;white-space: nowrap;overflow-x: auto;font-size: 0;}
+.mNavBox .mNavBox-main .nav{margin:0;display:block;box-sizing: border-box;padding:0 2.2vw;text-align:center;color:#4A4F58;font-size:3.4vw;float: left;}
+.mNavBox .mNavBox-main .nav.active{ color: #ff5b00;font-weight: bold;position: relative; }
+.mNavBox .mNavBox-main .nav.active:before{content: '';width: 4vw;height: 0.8vw;border-radius: 0.4vw;background: #ff5b00;position: absolute;bottom: 1vw;left: 50%;margin-left: -2vw;}
+.mNavBox .mNavBox-main .nav-icon{display:none;}
+.mNavBox .mNavBox-main .nav p{line-height:10vw;white-space:nowrap;}
+.mNavBox .mNavBox-down{ width: 10vw;height: 10vw;position: absolute;right: 0;top: 0;background: #FFFFFF; }
+.mNavBox .mNavBox-down .mIcon{ width: 10vw;height: 10vw;display: block;}
+.mNavBox .mNavBox-down .mIcon:before{ width: 10vw;height: 10vw;background-position: -48.8vw 1.5vw;}
+.mNavBox .mNavBox-down.none .mIcon:before{ width: 10vw;height: 10vw;background-position: -40vw 1.5vw;}
+.mNavBox-dropdown{ width: 100%;min-height:40vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;position: absolute;top: 9.5vw;left: 0;border-radius: 0 0 4vw 4vw;}
+.mNavBox-dropdown .drop-item{ padding: 0 3vw;height: 7.2vw;float: left;line-height:7.2vw;background: #f5f5f5;font-size: 3.2vw;margin: 1.6vw;text-align: center;border: 1px solid #f5f5f5;color: #666666;border-radius: 1vw; }
+.mNavBox-dropdown .drop-item.active{ background: #ffffff;border-color: #ff5b00;color: #ff5b00;font-weight: bold;}
+.mNavBox-dropdown-more{ width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.7);z-index: 888;}
+
+#container{ margin-top: 36.8vw; }
+/* 轮播 */
+#swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
+#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+#swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
+#swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block;max-width:none;}
+#swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
+#swiper-container .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
+#swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
+#swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
+#swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
+.section-content-image,
+.section-content-naves,
+.section-content-adv,
+.section-content-mains-top,
+.section-content-usermain{ display: none; }
+
+/* 快捷运营 */
+.quickOperation {
+}
+.quickOperation .my-swipe .van-swipe-item {
+    height: auto;
+    background: #FFFFFF;
+    margin-bottom: 2vw;
+}
+.carousel-list {
+    padding:5vw 0vw 3.2vw 0vw;
+}
+.quickOperation .van-swipe-item .list {
+    width: 20%;
+    height: auto;
+    margin-bottom: 3vw;
+    float: left;
+}
+.quickOperation .van-swipe__indicator {
+    width: 1.867vw;
+    height: 5px;
+    background: #E15621;
+    border-radius: 8px 8px 8px 8px;
+    opacity: 0.2;
+}
+.quickOperation .van-swipe__indicator--active {
+    background-color: #E15621;
+    opacity: 1;
+    width: 3.6vw;
+    height: 5px;
+    border-radius: 8px;
+}
+.quickOperation .list .list-content {
+    height: auto;
+}
+.quickOperation .list .list-content .list-icon {
+    width: 12vw;
+    height: 12vw;
+    margin: 0 auto;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.quickOperation .list .list-content .list-title {
+    margin-left: 2.4vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 3.2vw;
+}
+.quickOperation .list .list-content .list-title .title-1 {
+    width: 28vw;
+    line-height: 5vw;
+    display: flex;
+    align-items: center;
+}
+.quickOperation .list .list-content .list-title .title-1 .title-1-item {
+    font-size: 3.6vw;
+    font-weight: bold;
+}
+.quickOperation .list .list-content .list-title .title-1 .title-2-item {
+    width: 8vw;
+    height: 4vw;
+    background-color: #FF5B00;
+    border-radius: 2px;
+    font-size: 2.8vw;
+    color: white;
+    text-align: center;
+    line-height:4vw;
+    margin-left: 1.5vw;
+}
+.quickOperation .list .list-content .list-title .title-2 {
+    color: #999999;
+    font-size: 2.8vw;
+}
+/*新品橱窗*/
+.section_page.hot{width:100%;height:auto;background: url("/img/hot/icon-hot-bg@h5.png");background-size: cover;margin-top: 1vw;}
+.section_page.hot .section_page_title{ width: 100%;box-sizing: border-box;padding: 3vw 3vw 0 3vw;display: flex;justify-content: flex-start; }
+.section_page.hot .section_page_title h1{color:#FFFFFF;line-height: 8vw;}
+.section_page.hot .section_page_title span{font-size: 3.4vw;line-height: 8vw;text-align: left;color: #FFFFFF;margin-left: 3vw;}
+.swiper-container-floor.hotList{padding: 0 1vw;}
+.section_page.hot .section_page_btn{display: block;width:15.4vw;height: 5.9vw;background: url("/img/hot/icon-hot-btn@h5.png");background-size: cover;position: absolute;right:3.3vw;top: 3.3vw;}
+.section_page .page_main_item{width:45.6vw !important;height:70vw;overflow:hidden;margin:0 1.3vw 2.6vw 1.3vw;background:#fff;text-align:left;border-radius: 2vw;}
+.section_page .page_main_image{width:45.6vw;height:45.6vw;border-radius: 2vw 2vw 0 0;}
+.section_page .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
+.section_page .page_main_text{padding:0 2vw;height:9.3vw;line-height:5vw;font-size:3.4vw;vertical-align:middle;word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1vw}
+.section_page .page_main_item.ad_02 img,.section_page .page_main_item.ad_03 img,.section_page .page_main_item.ad_01 img{height:100%;width:100%;border-radius: 2vw;}
+.section_page .page_main_price{width:100%;box-sizing:border-box;padding:0 1.5vw}
+.section_page .page_main_price .price_text_tag{width:100%;box-sizing:border-box;float:left;margin-top: 1.2vw;min-height: 4.6vw;}
+.section_page .page_main_price .main_price_show{color:#f94b4b}
+.section_page .page_main_price .main_price_show del{color: #B8BFCA}
+.section_page .page_main_price .section_page .page_main_price .main_price_show.none{display:none}
+.section_page .page_main_price .main_price_unde{width:100%;height:6.5vw;line-height:6.5vw;font-size:3.4vw;color:#4a4f58;text-align:left;float:left}
+.section_page .page_main_price .price_text_tag .couponTag{padding:0 0.5vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 0.8vw;}
+.section_page .page_main_price .price_text_tag .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+
+/*楼层*/
+.section-page-content{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 3vw 0;
+}
+.section-page-item{
+    width: 100%;
+    height: auto;
+    margin: 0 0 3vw 0;
+    background-color: #FFFFFF;
+    overflow: hidden;
+}
+.section-page-item:last-child{
+    margin-bottom: 0;
+}
+.section-page-item .section-page-top{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.section-page-item .section-page-top .section-page-title{
+    width: 100%;
+    height: 14vw;
+    padding: 2vw 3vw;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+}
+.section-page-item .section-page-top .section-page-title h1{
+    font-weight: bold;
+    font-size: 4.8vw;
+    color: #333333;
+    line-height: 10vw;
+}
+
+.section-page-title .page-bottom-tabs{
+    height: 10vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-page-title .page-bottom-tabs .page-bottom-tabs-left{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 2vw;
+}
+.section-page-title .page-bottom-tabs .page-bottom-tabs-left .bot-tabs-item{
+    display: flex;
+    height: 10vw;
+    font-size: 3.4vw;
+    line-height: 10vw;
+    margin: 0 2vw;
+}
+.section-page-title .page-bottom-tabs .page-bottom-tabs-right{
+    height: 10vw;
+    font-size: 3.4vw;
+    line-height: 10vw;
+}
+.section-page-title .page-bottom-tabs .page-bottom-tabs-right a{
+    color: #999999;
+}
+/*.section-page-item:nth-child(1) .section-page-title{*/
+/*    background-color: #1b64de;*/
+/*}*/
+/*.section-page-item:nth-child(2) .section-page-title{*/
+/*    background-color: #1bc0de;*/
+/*}*/
+/*.section-page-item:nth-child(3) .section-page-title{*/
+/*    background-color: #de1b64;*/
+/*}*/
+/*.section-page-item:nth-child(4) .section-page-title{*/
+/*    background-color: #fe7e00;*/
+/*}*/
+.section-page-item .section-page-top .el-carousel__container{
+    height: 35vw !important;
+}
+.section-page-item .section-page-top .section-page-banner{
+    width: 100%;
+    /* height: auto; */
+    box-sizing: border-box;
+    padding: 0 3vw;
+    margin-bottom: 3vw;
+}
+.section-page-item .section-page-banner .page-banner-item img,
+.section-page-item .section-page-banner .page-banner-item{
+    width: 100%;
+    height: 35vw;
+    display: block;
+    border-radius: 3vw;
+    overflow: hidden;
+}
+.section-page-item .section-page-bottom {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding:0 2vw 0 2vw;
+}
+.section-page-item .section-page-bottom .page-bottom-tabs{
+    width: 100%;
+    height: 12vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-page-item .section-page-bottom .page-bottom-tabs .page-bottom-tabs-left{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-page-item .section-page-bottom .page-bottom-tabs .page-bottom-tabs-left .bot-tabs-item{
+    display: flex;
+    height: 12vw;
+    font-size: 3.2vw;
+    line-height: 12vw;
+    margin: 0 2vw;
+}
+.section-page-item .section-page-bottom .page-bottom-tabs .page-bottom-tabs-right{
+    height: 10vw;
+    font-size: 3.2vw;
+    line-height: 10vw;
+}
+.section-page-item .section-page-bottom .page-bottom-tabs .page-bottom-tabs-right a{
+    color: #999999;
+}
+.section-page-item .section-page-bottom .page-bottom-main{
+    width: 100%;
+    height: auto;
+}
+.section-page-item .section-page-bottom .bottom-main-item{
+    width: 45.6vw;
+    height: 72vw;
+    float: left;
+    margin: 0 3vw 3vw 0;
+    transition: all 0.4s;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: 3vw;
+    border: 1px solid #F1F1F1;
+
+}
+.section-page-item .section-page-bottom .bottom-main-item:nth-child(2n){
+    margin-right: 0;
+}
+
+.section-page-item .section-page-bottom .page_main_image{
+    width:45.6vw;
+    height:45.6vw;
+    border-radius: 2vw 2vw 0 0;
+}
+.section-page-item .section-page-bottom .page_main_type{
+    width: 8.8vw;
+    height: 8.8vw;
+    text-align: justify;
+    box-sizing: border-box;
+    padding: 1vw;
+    border-radius: 0 0 2vw 2vw;
+    background-color: #33CCBF;
+    font-size: 2.6vw;
+    color: #FFFFFF;
+    line-height: 3.4vw;
+    position: absolute;
+    top: 0;
+    right: 2vw;
+}
+.section-page-item .section-page-bottom .page_main_text{
+    padding:0 2vw;
+    height:9.3vw;
+    line-height:5vw;
+    font-size:3.4vw;
+    vertical-align:middle;
+    word-break:break-all;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-inline-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical;
+    margin-top:1vw;
+}
+.section-page-item .section-page-bottom .page_main_price{width:100%;box-sizing:border-box;padding:0 1.5vw}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag{
+    width:100%;
+    box-sizing:border-box;
+    float:left;
+    margin: 1.5vw 0;
+    min-height: 4.6vw;
+}
+.section-page-item .section-page-bottom .page_main_price .main_price_show{color:#f94b4b}
+.section-page-item .section-page-bottom .page_main_price .main_price_show del{color: #B8BFCA}
+.section-page-item .section-page-bottom .page_main_price .section_page .page_main_price .main_price_show.none{display:none}
+.section-page-item .section-page-bottom .page_main_price .main_price_unde{width:100%;height:6.5vw;line-height:6.5vw;font-size:3.4vw;color:#4a4f58;text-align:left;float:left}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .couponTag{padding:0 0.5vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 0.8vw;}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+.section-page-item .section-page-bottom .page_main_price .icon:before{width:15.8vw;height:5vw}
+.section-page-item .section-page-bottom.page_main_price .price_grade_1:before{background-position:-84vw -69.5vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_2:before{background-position:-84vw -76.5vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_3:before{background-position:-84vw -83.7vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_4:before{background-position:-84vw -90.7vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_5:before{background-position:-84vw -97.5vw}
+.section-page-item .section-page-bottom .page_main_price .main_price_none .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:right}
+.section-page-item .section-page-bottom .page_main_price .icon:before{width:15.8vw;height:5vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_1:before{background-position:-84vw -69.5vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_2:before{background-position:-84vw -76.5vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_3:before{background-position:-84vw -83.7vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_4:before{background-position:-84vw -90.7vw}
+.section-page-item .section-page-bottom .page_main_price .price_grade_5:before{background-position:-84vw -97.5vw}
+.section-page-item .section-page-bottom .page_main_price .main_price_none .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:right}
+.section-page-item .section-page-bottom .page_main_price .price_grade,
+.section-page-item .section-page-bottom .page_main_price .price_grade_shop,
+.section-page-item .section-page-bottom .page_main_price .price_grade_club{
+    display:block;
+    height:7vw;
+    line-height:7vw;
+    color:#f94b4b;
+    font-style:normal;
+    float:left
+}
+.section-page-item .section-page-bottom .page_main_price .price_grade .icon,
+.section_page .page_main_price .price_grade_shop .icon,
+.section_page .page_main_price .price_grade_club .icon{
+    display:inline-block;
+    font-size:0;
+    height:5vw;
+    line-height:5vw;
+    vertical-align:text-bottom;
+}
+.section-page-item .section-page-bottom .page_main_tag{
+    color:#9aa5b5;
+    margin:1vw 3.2vw;
+    border:.27vw solid #e3ebf7;
+    display:inline-block;
+    padding:0 1.3vw;
+    border-radius:.54vw
+}
+.section-page-item .section-page-bottom .page_main_price .bold{
+    font-weight:bold
+}
+/*会员标签*/
+.section-page-item .section-page-bottome .page_main_price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag,
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag .svip-price span{color: #333}
+.section-page-item .section-page-bottom .page_main_price .price_text_tag .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
+
+/*优质供应商*/
+.section-shop-content{
+    width: 100%;
+    height: 80vw;
+    box-sizing: border-box;
+    padding:0 3vw;
+    background-color: #FFFFFF;
+}
+.section-shop-content .section-shop-title{
+    width:100%;
+    height:11vw;
+    box-sizing:border-box;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+}
+.section-shop-content .section-shop-title h1{
+    font-size:4.8vw;
+    line-height:11vw;
+    text-align:left;
+    color:#333333;
+}
+.section-shop-content .section-shop-title span{
+    font-size:3.4vw;
+    line-height:11vw;
+    text-align:left;
+    color:#999999;
+    margin-left:4vw;
+    font-weight: normal;
+}
+.section-shop-content .section-shop-main{
+    width: 100%;
+    height: 69vw;
+    box-sizing: border-box;
+    padding: 3vw 0;
+}
+.section-shop-content .section-shop-main .supplier-list{
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+.section-shop-content .section-shop-main .supplier-list-item{
+    display: flex;
+    width: 45.6vw;
+    height: 60vw;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 3vw;
+    margin: 0 3vw 0 0;
+    box-sizing: border-box;
+    padding: 3vw 0;
+    border: 1px solid #f1f1f1;
+}
+.section-shop-content .section-shop-main .supplier-list-item:last-child{
+    margin-right: 0;
+}
+.section-shop-content .section-shop-main .supplier-list-top{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.section-shop-content .section-shop-main .supplier-top-logo{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.section-shop-content .section-shop-main .supplier-top-logo img{
+    width: 15vw;
+    height: 15vw;
+    display: block;
+    border-radius: 2vw;
+    overflow: hidden;
+}
+.section-shop-content .section-shop-main .supplier-top-name{
+    font-size:4.2vw;
+    line-height:10vw;
+    color:#333333;
+    align-items: center;
+    font-weight: bold;
+}
+.section-shop-content .section-shop-main .supplier-list-mid{
+    width: 100%;
+    height: 15vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 2vw 0 3vw 0;
+    box-sizing: border-box;
+    padding: 0 1vw;
+}
+.section-shop-content .section-shop-main .list-mid-item{
+    width: 15vw;
+    height: 13vw;
+    background-color: #999999;
+    border-radius: 2vw;
+    margin-right: 1vw;
+}
+.section-shop-content .section-shop-main .list-mid-item a,
+.section-shop-content .section-shop-main .list-mid-item img{
+    width: 15vw;
+    height: 13vw;
+    border-radius: 2vw;
+    display: block;
+}
+.section-shop-content .section-shop-main .list-mid-item:last-child{
+    margin-right: 0;
+}
+.section-shop-content .section-shop-main .supplier-list-bot{
+    width: 100%;
+    height: 10vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.section-shop-content .section-shop-main .supplier-list-bot a{
+    width: 25vw;
+    height: 9vw;
+    border: 1px solid #f0ab8b;
+    text-align: center;
+    line-height: 9vw;
+    box-sizing: border-box;
+    border-radius: 1.5vw;
+    color: #FF5B00;
+    display: block;
+    transition: all 0.2s;
+}
+
+
+
+
+
+/*推荐楼层*/
+.section-floor-content{
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    padding:0 2vw;
+    background-color: #FFFFFF;
+    margin-top: 3vw;
+}
+.section-floor-content .section-floor-title{
+    width:100%;
+    height:11vw;
+    box-sizing:border-box;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+}
+.section-floor-content .section-floor-title h1{
+    font-size:4.8vw;
+    line-height:11vw;
+    text-align:left;
+    color:#333333;
+}
+.section-floor-content .section-floor-title span{
+    font-size:3.4vw;
+    line-height:11vw;
+    text-align:left;
+    color:#999999;
+    margin-left:4vw;
+    font-weight: normal;
+}
+.section-floor-content .section-floor-main{
+    width: 100%;
+    height: auto;
+}
+.section-floor-content .section-floor-main .floor-main-item{
+    width: 45.6vw;
+    height: 72vw;
+    float: left;
+    margin: 0 3vw 3vw 0;
+    transition: all 0.4s;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: 3vw;
+    border: 1px solid #F1F1F1;
+}
+.section-floor-content .section-floor-main .floor-main-item{
+    width: 45.6vw;
+    height: 72vw;
+    float: left;
+    margin: 0 3vw 3vw 0;
+    transition: all 0.4s;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: 3vw;
+    border: 1px solid #F1F1F1;
+
+}
+.section-floor-content .section-floor-main .floor-main-item:nth-child(2n){
+    margin-right: 0;
+}
+
+.section-floor-content .section-floor-main .page_main_image{
+    width:45.6vw;
+    height:45.6vw;
+    border-radius: 2vw 2vw 0 0;
+}
+.section-floor-content .section-floor-main .page_main_type{
+    width: 8.8vw;
+    height: 8.8vw;
+    text-align: justify;
+    box-sizing: border-box;
+    padding: 1vw;
+    border-radius: 0 0 2vw 2vw;
+    background-color: #33CCBF;
+    font-size: 2.6vw;
+    color: #FFFFFF;
+    line-height: 3.4vw;
+    position: absolute;
+    top: 0;
+    right: 2vw;
+}
+.section-floor-content .section-floor-main .page_main_text{
+    padding:0 2vw;
+    height:9.3vw;
+    line-height:5vw;
+    font-size:3.4vw;
+    vertical-align:middle;
+    word-break:break-all;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    display:-webkit-inline-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical;
+    margin-top:1vw;
+}
+.section-floor-content .section-floor-main .page_main_price{width:100%;box-sizing:border-box;padding:0 1.5vw}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag{
+    width:100%;
+    box-sizing:border-box;
+    float:left;
+    margin: 1.5vw 0;
+    min-height: 4.6vw;
+}
+.section-floor-content .section-floor-main .page_main_price .main_price_show{color:#f94b4b}
+.section-floor-content .section-floor-main .page_main_price .main_price_show del{color: #B8BFCA}
+.section-floor-content .section-floor-main .page_main_price .section_page .page_main_price .main_price_show.none{display:none}
+.section-floor-content .section-floor-main .page_main_price .main_price_unde{width:100%;height:6.5vw;line-height:6.5vw;font-size:3.4vw;color:#4a4f58;text-align:left;float:left}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .couponTag{padding:0 0.5vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 0.8vw;}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+.section-floor-content .section-floor-main .page_main_price .icon:before{width:15.8vw;height:5vw}
+.section-floor-content .section-floor-main.page_main_price .price_grade_1:before{background-position:-84vw -69.5vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_2:before{background-position:-84vw -76.5vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_3:before{background-position:-84vw -83.7vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_4:before{background-position:-84vw -90.7vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_5:before{background-position:-84vw -97.5vw}
+.section-floor-content .section-floor-main .page_main_price .main_price_none .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:right}
+.section-floor-content .section-floor-main .page_main_price .icon:before{width:15.8vw;height:5vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_1:before{background-position:-84vw -69.5vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_2:before{background-position:-84vw -76.5vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_3:before{background-position:-84vw -83.7vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_4:before{background-position:-84vw -90.7vw}
+.section-floor-content .section-floor-main .page_main_price .price_grade_5:before{background-position:-84vw -97.5vw}
+.section-floor-content .section-floor-main .page_main_price .main_price_none .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:right}
+.section-floor-content .section-floor-main .page_main_price .price_grade,
+.section-floor-content .section-floor-main .page_main_price .price_grade_shop,
+.section-floor-content .section-floor-main .page_main_price .price_grade_club{
+    display:block;
+    height:7vw;
+    line-height:7vw;
+    color:#f94b4b;
+    font-style:normal;
+    float:left
+}
+.section-floor-content .section-floor-main .page_main_price .price_grade .icon,
+.section_page .page_main_price .price_grade_shop .icon,
+.section_page .page_main_price .price_grade_club .icon{
+    display:inline-block;
+    font-size:0;
+    height:5vw;
+    line-height:5vw;
+    vertical-align:text-bottom;
+}
+.section-floor-content .section-floor-main .page_main_tag{
+    color:#9aa5b5;
+    margin:1vw 3.2vw;
+    border:.27vw solid #e3ebf7;
+    display:inline-block;
+    padding:0 1.3vw;
+    border-radius:.54vw
+}
+.section-floor-content .section-floor-main .page_main_price .bold{
+    font-weight:bold
+}
+/*会员标签*/
+.section-floor-content .section-floor-main .page_main_price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag,
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag .svip-price span{color: #333}
+.section-floor-content .section-floor-main .page_main_price .price_text_tag .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
+
+footer{
+    display: none;
+}

src/main/resources/static/css/index/index-pc.css

@@ -0,0 +1,1253 @@
+/**
+ * PC端
+ */
+#container{min-height: 500px;}
+li{list-style:none;}
+.baseTopNav{ display: none; }
+.section_container .inner{
+    width: 1200px;
+    height: auto;
+    margin: 0 auto;
+    position: relative;
+}
+.section-content{
+    width: 100%;
+    height: 540px;
+    background-color: #FFFFFF;
+    border-radius: 8px;
+    margin-top: 20px;
+    box-sizing: border-box;
+    padding: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 99;
+}
+.section-content-image{
+    width: 140px;
+    height: 540px;
+    border-radius: 25px 0 0 25px;
+    background-color: #ffc600;
+    position: absolute;
+    left: -130px;
+    top: 0;
+    z-index: 1;
+    overflow: hidden;
+    transition: all 0.2s;
+}
+.section-image-view{
+    width: 1080px;
+    height: 540px;
+    border-radius: 25px 8px 8px 25px;
+    overflow: hidden;
+    transition: all 0.2s;
+    display: block;
+}
+.section-image-view img{
+    width: 1080px;
+    height: 540px;
+    display: block;
+    transition: all 0.2s;
+}
+.section-content-image:hover{
+    overflow: visible;
+    z-index: 999;
+}
+.section-content-naves{
+    width: 188px;
+    height: 100%;
+    background-color: #f7f8fc;
+    color: red;
+    border-radius: 8px;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 10px 0 0 0;
+}
+.category-menu-tabs {
+    width: 100%;
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.category-menu-tabs .menu-tabs-item{
+    width: 50%;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 14px;
+    color: #999999;
+    border-radius: 4px;
+    background-color: #F1F1F1;
+    margin: 0 12px;
+    cursor: pointer;
+}
+.category-menu-tabs .menu-tabs-item.active{
+    background-color: #D9D9D9;
+    color: #333333;
+}
+.section-content-naves:hover{
+    overflow: visible;
+}
+.category-menu {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-height: 478px;
+    border-radius: 8px;
+    background-color: #f7f8fc;
+}
+
+.left-category {
+    width: 100%;
+    padding: 10px 0 0 0;
+}
+
+.left-category .category-item {
+    width: 100%;
+    box-sizing: border-box;
+    padding:9px 12px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    justify-content: flex-start;
+
+}
+.left-category .category-item a{
+    display: flex;
+}
+.left-category .category-item img{
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin-right: 8px;
+}
+.left-category .category-item span{
+    line-height: 24px;
+    font-size: 14px;
+    color: #333333;
+    transition: all 0.2s;
+}
+.left-category .category-item:hover,
+.left-category .category-item.active {
+    background: #D9D9D9;
+    color: #FF5B00;
+}
+.left-category .category-item span:hover{
+    color: #FF5B00;
+    text-decoration: underline;
+}
+.right-panel {
+    position: absolute;
+    left: 182px;
+    top: -34px;
+    min-width: 758px;
+    min-height: 512px;
+    padding: 20px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #FF5B00;
+    z-index: 1000;
+
+}
+
+.right-panel .panel-content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap; /* 关键属性 */
+    gap: 20px; /* 元素间距 */
+}
+
+.right-panel .sub-category {
+    height: 48px;
+    display: flex;
+    margin: 0 8px;
+}
+
+.right-panel .sub-title {
+    margin: 0 12px 0 0;
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+}
+
+.right-panel .sub-items {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.right-panel .sub-item {
+    font-size: 14px;
+    color: #333333;
+    margin: 0 8px;
+    display: flex;
+    justify-content: flex-start;
+    transition: all 0.2s;
+}
+.right-panel .sub-item img{
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin-right: 10px;
+}
+.right-panel .sub-item span{
+    line-height: 24px;
+    font-size: 14px;
+    color: #333333;
+    transition: all 0.2s;
+}
+.right-panel .sub-item:hover span {
+    color: #FF5B00;
+    text-decoration: underline;
+}
+.right-panel .fade-enter-active,
+.right-panel .fade-leave-active {
+    transition: opacity 0.3s;
+}
+
+.right-panel .fade-enter-from,
+.right-panel .fade-leave-to {
+    opacity: 0;
+}
+
+.section-content-mains{
+    width: 972px;
+    height: 100%;
+}
+.section-content-mains-top{
+    width: 100%;
+    height: 34px;
+    margin-bottom: 10px;
+    border-radius: 6px;
+    background-color: #f7f8fc;
+}
+.section-content-mains-top .mains-nav{
+    display: block;
+    padding: 0 28px;
+    text-align: center;
+    line-height: 34px;
+    font-size: 17px;
+    font-weight: bold;
+    float: left;
+}
+.section-content-mains-bottom{
+    width: 100%;
+    height: 469px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-content-mains-bottom .section-content-advert{
+    width: 736px;
+    height: 469px;
+}
+
+.section-content-mains-bottom .section-content-advert .section-content-banner{
+    width: 100%;
+    height: 343px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+/* 轮播 */
+#swiper-container{width:100%;height:343px;min-width:736px;overflow:hidden;position:relative;float: left;}
+#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+#swiper-container .tempWrap{margin:0 auto;}
+#swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;background-color: #f7f8fc;}
+#swiper-container .swiper-wrapper img{width:auto;height:343px;max-width:none;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
+#swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
+#swiper-container .swiper-button-prev{left:5px;right:auto}
+#swiper-container .swiper-button-next{left:auto;right:5px}
+#swiper-container .swiper-button-prev:after{content:"\276C"}
+#swiper-container .swiper-button-next:after{content:"\276D"}
+#swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+#swiper-container .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0}
+#swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+#swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
+#swiper-container .swiper-pagination span.on:before{width:28px;background:#fff}
+.swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
+/*广告*/
+.section-content-mains-bottom .section-content-advert .section-content-adv{
+    width: 100%;
+    height: 117px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
+}
+.section-content-mains-bottom .section-content-advert .section-content-adv-item{
+    width: 236px;
+    height: 117px;
+    background-color: #FF5B00;
+    margin-right: 8px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.section-content-mains-bottom .section-content-advert .section-content-adv-item img,
+.section-content-mains-bottom .section-content-advert .section-content-adv-item a{
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.section-content-mains-bottom .section-content-advert .section-content-adv-item:last-child{
+    margin-right: 0;
+}
+.section-content-mains-bottom .section-content-usermain{
+    width: 224px;
+    height: 100%;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.section-content-mains-bottom .section-content-usermain .section-content-userbox{
+    width: 100%;
+    height: 343px;
+    box-sizing: border-box;
+    padding: 10px;
+    background-color: #f7f8fc;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.section-content-userbox .section-content-usertop{
+    width: 100%;
+    height: auto;
+    margin-top: 10px;
+}
+
+.section-content-userbox .section-content-usertop .user-column-a{
+    height: 60px;
+    box-sizing: border-box;
+    padding: 5px 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.section-content-usertop .user-column-a .user-column-logo{
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.section-content-usertop .user-column-a .user-column-logo img{
+    width: 50px;
+    height: 50px;
+    display: block;
+    border-radius: 50%;
+}
+.section-content-usertop .user-column-a .user-column-text{
+    width: 140px;
+    display: flex;
+    flex-direction: column;
+    justify-items: left;
+    margin-left: 10px;
+}
+.section-content-usertop .user-column-a .user-column-text h1{
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 26px;
+    text-align: left;
+    color: #333333;
+    width: 100%;
+    white-space: normal;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+.section-content-usertop .user-column-a .user-column-text p{
+    font-size: 14px;
+    line-height: 22px;
+    text-align: left;
+    color: #666666;
+}
+.section-content-usertop .user-column-b{
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    align-items: center;
+}
+.section-content-usertop .user-column-b h1{
+    font-size: 14px;
+    line-height: 26px;
+    text-align: left;
+    color: #333333;
+    font-weight: normal;
+}
+.section-content-usertop .user-column-b p{
+    font-size: 14px;
+    line-height: 26px;
+    text-align: left;
+    color: #666666;
+}
+.section-content-usertop .user-column-b a{
+    width: 100%;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    background-color: #FF5B00;
+    color: #FFFFFF;
+    font-size: 16px;
+    display: block;
+    margin: 8px 0;
+    border-radius: 4px;
+}
+
+.section-content-usertop .user-column-c{
+    width: 100%;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.section-content-usertop .user-column-c .column-c-item{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.section-content-usertop .user-column-c .column-c-item h1{
+    font-size: 16px;
+    color: #666666;
+    line-height: 18px;
+}
+.section-content-usertop .user-column-c .column-c-item p{
+    font-size: 14px;
+    color: #666666;
+    line-height: 18px;
+}
+.section-content-usertop .user-column-d{
+   width: 100%;
+    height: 56px;
+}
+.section-content-usertop .user-column-d a{
+    height: 56px;
+    box-sizing: border-box;
+    padding: 7px 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.section-content-usertop .user-column-d .column-d-image{
+    width: 42px;
+    height: 42px;
+    border-radius: 2px;
+    overflow: hidden;
+    background-color: #dbdbdb;
+}
+.section-content-usertop .user-column-d .column-d-image img{
+    width: 42px;
+    height: 42px;
+    display: block;
+    border-radius: 2px;
+}
+.section-content-usertop .user-column-d .column-d-text{
+    width: 140px;
+    display: flex;
+    flex-direction: column;
+    justify-items: left;
+    margin-left: 10px;
+}
+.section-content-usertop .user-column-d .column-d-text h1{
+    width: 100%;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 18px;
+    text-align: left;
+    color: #999999;
+    white-space: normal;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.section-content-usertop .user-column-d .column-d-text p{
+    font-size: 12px;
+    line-height: 22px;
+    text-align: left;
+    color: #333333;
+}
+.section-content-userbox .section-content-userbottom{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.section-content-userbottom .userbottom-column-a{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 8px 0 10px 0;
+}
+.section-content-userbottom .userbottom-column-a .column-item{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 8px;
+}
+.section-content-userbottom .userbottom-column-a .column-item img{
+    width: 27px;
+    height: 27px;
+}
+.section-content-userbottom .userbottom-column-a .column-item p{
+    font-size: 14px;
+    line-height: 22px;
+    text-align: left;
+    color: #666666;
+}
+.section-content-userbottom .userbottom-column-b{
+    width: 100%;
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+}
+.section-content-userbottom .userbottom-column-b .column-item{
+    width: 99px;
+    height: 80px;
+    box-sizing: border-box;
+    padding: 8px;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+.section-content-userbottom .userbottom-column-b .column-item h1{
+    font-size: 12px;
+    color: #664100;
+    line-height: 18px;
+}
+.section-content-userbottom .userbottom-column-b .column-item p{
+    font-size: 12px;
+    color: #664100;
+    line-height: 18px;
+}
+.section-content-userbottom .userbottom-column-b .column-item span{
+    display: inline-block;
+    width: 69px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 10px;
+    text-align: center;
+    font-size: 12px;
+    background-color: #664100;
+    color: #FFFFFF;
+    margin-top: 7px;
+    font-weight: 600;
+}
+.section-content-userbottom .userbottom-column-b .column-item.plus{
+    background-color: #ffe69a;
+}
+.section-content-userbottom .userbottom-column-b .column-item.coupon{
+    background-color: #ff9c54;
+}
+.section-content-mains-bottom .section-content-usermain .section-content-oper{
+    width: 100%;
+    height: 117px;
+    box-sizing: border-box;
+    background-color: #f7f8fc;
+    padding: 10px;
+    border-radius: 8px;
+}
+.section-content-oper .my-swipe .van-swipe-item {
+    height: auto;
+}
+.section-content-oper .carousel-list {
+    padding:0;
+}
+.section-content-oper .list {
+    width: 25%;
+    height: auto;
+    margin-bottom: 10px;
+    float: left;
+    cursor: pointer;
+}
+.section-content-oper .list .list-content {
+    height: auto;
+}
+.section-content-oper .list .list-content .list-icon {
+    width: 24px;
+    height: 24px;
+    margin: 0 auto;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.section-content-oper .list .list-content .list-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 10px;
+}
+.section-content-oper .el-carousel__arrow--left{
+    left: -8px !important;
+    width: 24px !important;
+    height: 24px !important;
+}
+.section-content-oper .el-carousel__arrow--right{
+    right: -8px !important;
+    width: 24px !important;
+    height: 24px !important;
+}
+/* 内容区 */
+.main-content {
+    margin-top: 15px;
+}
+.section_page.hot{
+    width:100%;
+    height:442px;
+    background: url("/img/hot/icon-hot-bg.png");
+    background-size: cover;
+    border-radius: 8px;
+}
+.section_page.hot .section_page_main.type_08{
+    height: 350px;
+    padding: 0 0 12px 0;
+}
+.section_page.hot #recommendBox{
+    height: 378px;
+}
+.section_page.hot #recommendBox .swiper-pagination{
+    bottom: 1px;
+}
+.section_page.hot  .page_main_image{
+    width: 224px;
+    height: 224px;
+}
+.section_page.hot .section_page_title{
+    width:100%;
+    height:64px;
+    box-sizing:border-box;
+    padding:10px 16px;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+}
+.section_page.hot .section_page_title h1{
+    font-size:24px;
+    line-height:44px;
+    text-align:left;
+    color:#FFFFFF;
+}
+.section_page.hot .section_page_title span{
+    font-size:14px;
+    line-height:44px;
+    text-align:left;
+    color:#FFFFFF;
+    margin-left:20px;
+}
+.section_page.hot .section_page_btn{
+    display: block;
+    width: 74px;
+    height: 26px;
+    background: url("/img/hot/icon-hot-btn.png");
+    background-size: cover;
+    position: absolute;
+    right: 20px;
+    top: 12px;
+}
+.section_page  .page_main_item.hot{
+    width:164px;
+    height:340px;
+    float:left;
+    margin-right:10px;
+    margin-bottom:16px;
+    background-color:#FFFFFF;
+    transition:all 0.4s;
+    display:block;
+    position: relative;
+    border-radius: 8px;
+}
+/*楼层*/
+.section-page-content{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.section-page-item{
+    width: 592px;
+    height: 544px;
+    margin: 0 15px 15px 0;
+    background-color: #FFFFFF;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.section-page-item:nth-child(2n){
+    margin-right: 0;
+    margin-bottom: 0;
+}
+.section-page-item:nth-child(3){
+    margin-bottom: 0;
+}
+.section-page-item:nth-child(4){
+    margin-bottom: 0;
+}
+.section-page-item .section-page-top{
+    width: 100%;
+    height: 240px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.section-page-item .section-page-top .section-page-title{
+    width: 64px;
+    height: 100%;
+    padding: 37px 16px;
+    font-weight: bold;
+    font-size: 14px;
+    color: #FFFFFF;
+    box-sizing: border-box;
+}
+.section-page-item:nth-child(1) .section-page-title{
+    background-color: #1b64de;
+}
+.section-page-item:nth-child(2) .section-page-title{
+    background-color: #1bc0de;
+}
+.section-page-item:nth-child(3) .section-page-title{
+    background-color: #de1b64;
+}
+.section-page-item:nth-child(4) .section-page-title{
+    background-color: #fe7e00;
+}
+.section-page-item .section-page-top .section-page-banner{
+    width: 528px;
+    height: 100%;
+}
+.section-page-item .section-page-banner .page-banner-item img,
+.section-page-item .section-page-banner .page-banner-item{
+    width: 527px;
+    height: 240px;
+    display: block;
+}
+.section-page-item .el-carousel__item:nth-child(2n) {
+    background-color: #87b4ff;
+}
+
+.section-page-item .el-carousel__item:nth-child(2n+1) {
+    background-color: #f88ab4;
+}
+.section-page-item .section-page-bottom {
+    width: 100%;
+    height: 307px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding:0 10px 10px 10px;
+}
+.section-page-item .section-page-bottom .page-bottom-tabs{
+    width: 100%;
+    height: 46px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.page-bottom-tabs .page-bottom-tabs-left{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.page-bottom-tabs .page-bottom-tabs-left .bot-tabs-item{
+    display: flex;
+    height: 46px;
+    font-size: 14px;
+    line-height: 46px;
+    margin: 0 10px;
+}
+.page-bottom-tabs .page-bottom-tabs-left .bot-tabs-item:hover{
+    text-decoration: underline;
+}
+.page-bottom-tabs .page-bottom-tabs-right{
+    height: 46px;
+    font-size: 14px;
+    line-height: 46px;
+}
+.section-page-item .section-page-bottom .page-bottom-main{
+    width: 100%;
+    height: 254px;
+}
+.section-page-item .section-page-bottom .bottom-main-item{
+    width: 133px;
+    height: 247px;
+    float: left;
+    margin-right: 10px;
+    transition: all 0.4s;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid #F1F1F1;
+
+}
+.section-page-item .section-page-bottom .bottom-main-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);
+}
+.section-page-item .section-page-bottom .bottom-main-item:last-child{
+    margin-right: 0;
+}
+.section-page-item .bottom-main-item .page_main_image{
+    width: 133px;
+    height: 133px;
+    display: block;
+    float: left;
+    border-radius: 8px 8px 0 0;
+}
+.section-page-item .bottom-main-item .page_main_type{
+    width: 34px;
+    height: 34px;
+    text-align: justify;
+    box-sizing: border-box;
+    padding: 5px;
+    border-radius: 0 0 8px 8px;
+    background-color: #33CCBF;
+    font-size: 12px;
+    color: #FFFFFF;
+    line-height: 13px;
+    position: absolute;
+    top: 0;
+    right: 10px;
+}
+.section-page-item .bottom-main-item  .page_main_tag{
+    width:100%;
+    height:24px;
+    float:left;
+    margin-top:16px;
+    padding:0 8px
+}
+.section-page-item .bottom-main-item  .page_main_text{
+    width: 100%;
+    height: 42px;
+    float: left;
+    box-sizing: border-box;
+    margin-top: 5px;
+    padding: 0 8px;
+    white-space: normal;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 22px;
+    font-size: 14px;
+}
+.section-page-item .bottom-main-item  .page_main_price{
+    width: 100%;
+    height: 54px;
+    float: left;
+    box-sizing: border-box;
+    padding: 0 8px;
+}
+.section-page-item .bottom-main-item  .page_main_price .main_price_text{
+    width:100%;
+    height:54px;
+    float:left;
+    box-sizing:border-box;
+}
+.section-page-item .bottom-main-item  .page_main_price .price_text_tag{
+    width:100%;
+    height:22px;
+    box-sizing:border-box;
+    float:left;
+    margin: 5px 0;
+}
+.section-page-item .page_main_price .main_price_show{color:#f94b4b}
+.section-page-item .bottom-main-item  .page_main_price .price_text_tag .couponTag{
+    float:left;
+    margin-right: 2px;
+}
+.section-page-item .bottom-main-item  .page_main_price .price_text_tag .listTag{
+    margin:0;float:left;
+}
+/*标签缩小*/
+.bottom-main-item .page_main_price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
+.bottom-main-item .page_main_price .price_text_tag .svip-tag,
+.bottom-main-item .page_main_price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
+/*会员标签*/
+.bottom-main-item .page_main_price .price_text_tag .svip-tag{width:100%;height:22px;letter-spacing:0}
+.bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333;border-radius: 0 11px;padding: 0 2px;}
+.bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+.bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+.bottom-main-item .page_main_price .price_text_tag .svip-tag .svip-price span{color: #333}
+.section-page-item .bottom-main-item  .page_main_price .main_price_none{
+    width:100%;
+    height:24px;
+    box-sizing:border-box;
+    float:left;
+    margin-top:2px;
+}
+.section-page-item .bottom-main-item  .page_main_price .main_price_none.sec{
+    margin-top:25px;
+}
+.section-page-item .bottom-main-item  .page_main_price .main_price_none .listTag{
+    margin:0
+}
+.section-page-item .bottom-main-item  .page_main_price .price_grade,
+.section-page-item .bottom-main-item  .page_main_price .price_grade_shop{
+    float:left;
+    margin:0;
+    height:22px;
+    line-height:22px;
+    color:#4A4F58;
+    font-style:normal;
+    font-size:14px;
+}
+.section-page-item .bottom-main-item  .page_main_price .price_grade_club{
+    float:left;
+    margin:0;
+    height:22px;
+    line-height:22px;
+    font-style:normal;
+    font-size:14px;
+    color: #f94b4b;
+}
+.section-page-item .bottom-main-item  .page_main_price .price_grade{
+    float: unset;
+}
+.section-page-item .bottom-main-item  .page_main_price .price_grade span,
+.section-page-item .bottom-main-item  .page_main_price .price_grade_shop span,
+.section-page-item .bottom-main-item  .page_main_price .price_grade_club span{display:inline-block;float:left}
+.section-page-item .bottom-main-item  .page_main_price .icon:before{width:67px;height:22px}
+.section-page-item .bottom-main-item  .page_main_price .price_grade_1:before{background-position:0 -708px}
+.section-page-item .bottom-main-item  .page_main_price .price_grade_2:before{background-position:0 -736px}
+.section-page-item .bottom-main-item  .page_main_price .price_grade_3:before{background-position:0 -764px}
+.section-page-item .bottom-main-item  .page_main_price .price_grade_4:before{background-position:0 -791px}
+.section-page-item .bottom-main-item  .page_main_price .price_grade_5:before{background-position:0 -818px}
+/*优质供应商*/
+.section-shop-content{
+    width: 100%;
+    height: 344px;
+    box-sizing: border-box;
+    padding:0 12px;
+    background-color: #FFFFFF;
+    border-radius: 8px;
+}
+.section-shop-content .section-shop-title{
+    width:100%;
+    height:56px;
+    box-sizing:border-box;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+}
+.section-shop-content .section-shop-title h1{
+    font-size:24px;
+    line-height:56px;
+    text-align:left;
+    color:#333333;
+}
+.section-shop-content .section-shop-title span{
+    font-size:14px;
+    line-height:56px;
+    text-align:left;
+    color:#999999;
+    margin-left:20px;
+    font-weight: normal;
+}
+.section-shop-content .section-shop-main{
+    width: 100%;
+    height: 288px;
+    box-sizing: border-box;
+    padding: 20px 0;
+}
+.section-shop-content .section-shop-main .supplier-list{
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+.section-shop-content .section-shop-main .supplier-list-item{
+    display: flex;
+    width: 284px;
+    height: 258px;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    margin: 0 15px 0 0;
+    box-sizing: border-box;
+    padding: 15px 0;
+    border: 1px solid #F1F1F1;
+}
+.section-shop-content .section-shop-main .supplier-list-item:last-child{
+    margin-right: 0;
+}
+.section-shop-content .section-shop-main .supplier-list-top{
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+.section-shop-content .section-shop-main .supplier-top-logo{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.section-shop-content .section-shop-main .supplier-top-logo img{
+    width: 80px;
+    height: 80px;
+    display: block;
+}
+.section-shop-content .section-shop-main .supplier-top-name{
+    font-size:17px;
+    line-height:42px;
+    color:#333333;
+    align-items: center;
+    font-weight: bold;
+}
+.section-shop-content .section-shop-main .supplier-list-mid{
+    width: 100%;
+    height: 88px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0 15px 0;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+.section-shop-content .section-shop-main .list-mid-item{
+    width: 80px;
+    height: 80px;
+    background-color: #e1e1e1;
+    border-radius: 8px;
+    margin-right: 5px;
+}
+.section-shop-content .section-shop-main .list-mid-item a,
+.section-shop-content .section-shop-main .list-mid-item img{
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    display: block;
+}
+.section-shop-content .section-shop-main .list-mid-item:last-child{
+    margin-right: 0;
+}
+.section-shop-content .section-shop-main .supplier-list-bot{
+    width: 100%;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.section-shop-content .section-shop-main .supplier-list-bot a{
+    width: 80px;
+    height: 32px;
+    border: 1px solid #FF5B00;
+    text-align: center;
+    line-height: 32px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    color: #FF5B00;
+    display: block;
+    transition: all 0.2s;
+}
+.section-shop-content .section-shop-main .supplier-list-bot a:hover{
+    background-color: #FF5B00;
+    color: #FFFFFF;
+}
+/*为你推荐*/
+.section-floor-content{
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    padding:0 12px;
+    background-color: #FFFFFF;
+    border-radius: 8px;
+}
+.section-floor-content .section-floor-title{
+    width:100%;
+    height:56px;
+    box-sizing:border-box;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+}
+.section-floor-content .section-floor-title h1{
+    font-size:24px;
+    line-height:56px;
+    text-align:left;
+    color:#333333;
+}
+.section-floor-content .section-floor-title span{
+    font-size:14px;
+    line-height:56px;
+    text-align:left;
+    color:#999999;
+    margin-left:20px;
+    font-weight: normal;
+}
+.section-floor-content .section-floor-main{
+    width:100%;
+    height:56px;
+    box-sizing:border-box;
+    padding: 20px 0;
+}
+.section-floor-content .floor-main-item{
+    width: 182px;
+    height: 300px;
+    float: left;
+    margin-right: 14px;
+    margin-bottom: 16px;
+    transition: all 0.4s;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid #F1F1F1;
+}
+.section-floor-content .floor-main-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);
+}
+.section-floor-content .floor-main-item:nth-child(6n){
+    margin-right: 0;
+}
+.section-floor-content .floor-main-item .page_main_image{
+    width: 182px;
+    height: 182px;
+    display: block;
+    float: left;
+    border-radius: 8px 8px 0 0;
+}
+.section-floor-content .floor-main-item .page_main_type{
+    width: 34px;
+    height: 34px;
+    text-align: justify;
+    box-sizing: border-box;
+    padding: 5px;
+    border-radius: 0 0 8px 8px;
+    background-color: #33CCBF;
+    font-size: 12px;
+    color: #FFFFFF;
+    line-height: 13px;
+    position: absolute;
+    top: 0;
+    right: 10px;
+}
+.section-floor-content .floor-main-item  .page_main_tag{
+    width:100%;
+    height:24px;
+    float:left;
+    margin-top:16px;
+    padding:0 8px
+}
+.section-floor-content .floor-main-item  .page_main_text{
+    width: 100%;
+    height: 42px;
+    float: left;
+    box-sizing: border-box;
+    margin-top: 5px;
+    padding: 0 8px;
+    white-space: normal;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 22px;
+    font-size: 14px;
+}
+.section-floor-content .floor-main-item  .page_main_price{
+    width: 100%;
+    height: 54px;
+    float: left;
+    box-sizing: border-box;
+    padding: 0 8px;
+}
+.section-floor-content .floor-main-item  .page_main_price .main_price_text{
+    width:100%;
+    height:54px;
+    float:left;
+    box-sizing:border-box;
+}
+.section-floor-content .floor-main-item  .page_main_price .price_text_tag{
+    width:100%;
+    height:22px;
+    box-sizing:border-box;
+    float:left;
+    margin: 5px 0;
+}
+.section-floor-content .floor-main-item .page_main_price .main_price_show{color:#f94b4b}
+.section-floor-content .floor-main-item  .page_main_price .price_text_tag .couponTag{
+    float:left;
+    margin-right: 2px;
+}
+.section-floor-content .floor-main-item  .page_main_price .price_text_tag .listTag{
+    margin:0;float:left;
+}
+/*标签缩小*/
+.section-floor-content .floor-main-item .page_main_price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag,
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
+/*会员标签*/
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag{width:100%;height:22px;letter-spacing:0}
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333;border-radius: 0 11px;padding: 0 2px;}
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+.section-floor-content .floor-main-item .page_main_price .price_text_tag .svip-tag .svip-price span{color: #333}
+.section-floor-content .floor-main-item .page_main_price .main_price_none{
+    width:100%;
+    height:24px;
+    box-sizing:border-box;
+    float:left;
+    margin-top:2px;
+}
+.section-floor-content .floor-main-item .page_main_price .main_price_none.sec{
+    margin-top:25px;
+}
+.section-floor-content .floor-main-item  .page_main_price .main_price_none .listTag{
+    margin:0
+}
+.section-floor-content .floor-main-item  .page_main_price .price_grade,
+.section-floor-content .floor-main-item  .page_main_price .price_grade_shop{
+    float:left;
+    margin:0;
+    height:22px;
+    line-height:22px;
+    color:#4A4F58;
+    font-style:normal;
+    font-size:14px;
+}
+.section-floor-content .floor-main-item  .page_main_price .price_grade_club{
+    float:left;
+    margin:0;
+    height:22px;
+    line-height:22px;
+    font-style:normal;
+    font-size:14px;
+    color: #f94b4b;
+}
+.section-floor-content .floor-main-item  .page_main_price .price_grade{
+    float: unset;
+}
+.section-floor-content .floor-main-item  .page_main_price .price_grade span,
+.section-floor-content .floor-main-item  .page_main_price .price_grade_shop span,
+.section-floor-content .floor-main-item  .page_main_price .price_grade_club span{display:inline-block;float:left}
+.section-floor-content .floor-main-item  .page_main_price .icon:before{width:67px;height:22px}
+.section-floor-content .floor-main-item  .page_main_price .price_grade_1:before{background-position:0 -708px}
+.section-floor-content .floor-main-item  .page_main_price .price_grade_2:before{background-position:0 -736px}
+.section-floor-content .floor-main-item  .page_main_price .price_grade_3:before{background-position:0 -764px}
+.section-floor-content .floor-main-item  .page_main_price .price_grade_4:before{background-position:0 -791px}
+.section-floor-content .floor-main-item  .page_main_price .price_grade_5:before{background-position:0 -818px}

src/main/resources/static/css/product/product-floor.css

@@ -0,0 +1,267 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    .inner{width: 1184px;height: auto;margin: 0 auto;}
+    .product-banner{width: 100%;height: auto;position: relative;}
+    .product-banner .product-banner-top{width: 100%;height: auto;margin: 15px 0;}
+    .product-banner .product-banner-top .top-tabs{
+        width: 100%;
+        height: 56px;
+        background-color: #FFFFFF;
+        border-radius: 8px;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .product-banner .top-tabs .top-tabs-item{
+        padding: 0 20px;
+        line-height: 56px;
+        text-align: center;
+        font-size: 17px;
+        color: #333333;
+        cursor: pointer;
+    }
+    .product-banner .top-tabs .top-tabs-item.active{
+        color: #FF5B00;
+        font-weight: bold;
+        text-decoration: underline;
+    }
+    .product-banner-bot{width: 100%;height: auto;}
+    #productHotBanner{width:100%;height:400px;background-color:#FFFFFF;position:relative;box-sizing: border-box;border-radius: 8px;overflow: hidden;}
+    .product-banner-bot .page-banner-item img,
+    .product-banner-bot .page-banner-item{
+        width: 100%;
+        height: 400px;
+        display: block;
+    }
+    .product-banner-title{
+        width: 100%;
+        line-height: 56px;
+        font-size: 18px;
+        text-align: left;
+        margin: 10px 0;
+        color: #666666;
+    }
+
+    #productHotBanner .swiper-wrapper{position:relative;height:100%;z-index:0}
+    #productHotBanner .swiper-wrapper .swiper-slide{width:100%;height: 480px;position:relative;zoom:1;vertical-align:middle;overflow:hidden;}
+    #productHotBanner .swiper-wrapper .swiper-slide-image{width: 448px;height: 448px;float: left;box-sizing: border-box;border: 1px solid #e1e1e1;overflow: hidden;border-radius: 4px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-image img{width: 100%;height: 100%;display: block;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info{width: 700px;height: 448px;float: right;box-sizing: border-box;padding: 72px 100px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name{width:100%;height: auto;margin-bottom: 110px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name p{line-height: 35px;font-size: 24px;color: #4A4F58;text-align: center;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn {width: 100%;height: 44px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn .slide-btn{width: 204px;height: 44px;margin: 0 auto;display:block;background: #F94B4B;line-height: 44px;text-align: center;font-size: 16px;color: #FFFFFF;border-radius: 22px;}
+    #productHotBanner .swiper-button-prev:hover,#productHotBanner .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+    #productHotBanner .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:-35px;z-index:1;text-align:center;font-size:0}
+    #productHotBanner .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+    #productHotBanner .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background: rgba(255, 180, 150, 0.39);border-radius:2px}
+    #productHotBanner .swiper-pagination span.on:before{width:28px;background:#FF5B00}
+
+
+    .search-text{float: left;margin-right: 20px;}
+    .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
+    .search-text-brand a{color: #E15621;}
+    .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
+    .product-brand{width:1184px;margin:16px auto;box-sizing:border-box;min-height: 80px;padding:24px 12px 12px 12px;font-size:0;text-align:center;background:#FFF;position: relative;border-radius: 8px;}
+    .product-brand .product-brand-name{width: 116px;float: left;border-right: 1px solid #F7F7F7;line-height: 44px;text-align: center;font-size: 16px;color: #4A4F58;}
+    .product-brand .product-brand-name.show{line-height: 88px;}
+    .product-brand-oper{width: 110px;height: 32px;position: absolute;right: 24px;top: 24px;}
+    .product-brand-more{width: 50px;height: 24px;line-height: 24px;font-size: 14px;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;float: left;position: relative;}
+    .product-brand-more .icon:before{background-position: -93px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -123px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-add{width: 56px;height: 24px;box-sizing: border-box;border: 1px solid #E2E7EF;float: right;font-size: 14px;color: #9AA5B5;line-height: 24px;text-align: center;cursor: pointer;border-radius: 12px;}
+    .product-brand-list{width: 900px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{height: 150px;}
+    .product-brand-list .brand-list{width: 90px;height: 32px;padding: 0 12px;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 32px;font-size: 16px;color: #4A4F58;border-radius: 16px;margin-right: 24px;margin-bottom: 12px;}
+    .product-brand-list .brand-list.checked{border-color: #E15621;}
+    .product-brand-list .brand-list.checked a{color: #E15621;}
+    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-list .brand-list a:hover{color: #4A4F58;}
+    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-brand-button{width: 100%;height: 32px;float: left;}
+    .product-brand-button .brand-button{width: 160px;height: 32px;margin: 0 auto;}
+    .product-brand-button .brand-button .btn{width: 64px;height: 32px;cursor: pointer;float: left;margin: 0 8px;border-radius: 16px; line-height: 32px;text-align: center;font-size: 14px;box-sizing: border-box;color: #FFFFFF;}
+    .product-brand-button .brand-button .btn.confirm.disabled{background-color: #E2E7EF;}
+    .product-brand-button .brand-button .btn.confirm{background-color: #E15621;}
+    .product-brand-button .brand-button .btn.cancel{background-color: #FFFFFF;border: 1px solid #E2E7EF;color: #4A4F58;}
+    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;text-align:center;background:#FFFFFF;position: relative;}
+    .sortBox li{display:inline-block;cursor:pointer;width:128px;height:64px;line-height:64px;font-size:16px;background:#FFFFFF;color:#93979F;position:relative;float: left;border-right: 1px solid #F7F7F7;}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#FF5B00}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:26px}
+    .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:34px}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#FF5B00}
+    .sortBox li.up:after{border-top-color:#FF5B00;opacity:.3}
+    .sortBox li.down:after{border-top-color:#FF5B00}
+    .sortBox li.down:before{border-bottom-color:#FF5B00;opacity:.3}
+    .sortBox .sortBox-checked{width: 200px;height: 64px;position: absolute;top: 0;right: 0;box-sizing: border-box;padding: 18px;}
+    .sortBox-checked .sortBox-new{float: right;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;margin-right: 10px;}
+    .sortBox-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .sortBox-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+
+    .productList{width:1184px;min-height:328px;margin:0 auto;box-sizing:border-box}
+    .productList .productItem{width:184px;height:280px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden;float:left}
+    .productList .productItem a{ width:184px;height:280px; display: flex;flex-direction: column;}
+    .productList .productItem:nth-child(6n){margin-right:0}
+    .productList .productItem img{width:100%;height:164px}
+    .productList .productItem .name{display:block;padding:0 8px;margin-top:8px;height:40px;line-height:21px;vertical-align:middle;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .productItem .page_main_type{width: 34px;height: 34px;text-align: justify;box-sizing: border-box;padding: 5px;border-radius: 0 0 8px 8px;background-color: #33CCBF;font-size: 12px;color: #FFFFFF;line-height: 13px;position: absolute;top: 0;right: 10px;z-index: 88;}
+    .productItem .price{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px;height:auto;width:100%;display: flex;flex-direction: column;}
+    .productItem .price .icon:before{width:63px}
+    .productItem .price .icon.i5:before{background-position:-2px -816px}
+    .productItem .price .icon.i1:before{background-position:-2px -706px}
+    .productItem .price .icon.i2:before{background-position:-2px -734px}
+    .productItem .price .icon.i3:before{background-position:-2px -762px}
+    .productItem .price .icon.i4:before{background-position:-2px -789px}
+    .listTag{margin:12px 8px 0 0;padding:0 2px}
+    .productItem .image .icon{position:inherit}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#FF5B00}
+    .empty{margin-top:32px;background:#F7F7F7}
+    .empty p{color:#909090;font-size:14px}
+
+    .productItem .price em{font-weight: normal}
+    .productItem .price em.bold{font-weight: bold}
+    .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin: 5px 0;}
+    .productItem .price .price_text_tag .listTag{margin: 0;float: left}
+    .productItem .price .price_text_tag .couponTag{margin: 0 4px 0 0;float: left}
+    .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #f94b4b;text-align: left;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 .main_price_show.none { color: #999999; text-decoration: line-through;}
+    .productItem .name .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: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
+
+    .login-btn{font-size: 12px}
+    .listTitle{width:1184px;margin:0 auto 16px auto;box-sizing:border-box;padding:16px 30px;border-radius:0 0 2px 2px;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:20px;line-height:42px;font-weight:normal;margin-bottom:16px}
+    .listTitle p{text-indent:1em;line-height:36px;font-size:16px}
+    .listTitle p em{color:#FF5B00;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
+    .productItem .name span.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: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: 2px;}
+    /*会员标签*/
+    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
+    .productItem .price .price_text_tag .svip-tag,
+    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
+    .productItem .price .svip-tag{width:100%;height:22px;letter-spacing:0}
+    .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;padding: 0 2px;border-radius: 11px 0; text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+    .productItem .price .svip-tag .svip-price span{color: #333}
+    .productItem .price .price_grade{ margin-top: 0px; }
+}
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    #productList{position: relative;padding-top: 27vw;}
+    .inner{width: 100%;height: auto;margin: 0 auto;}
+    .product-banner{width: 100%;height: auto;position: relative;box-sizing: border-box;padding: 2.5vw;}
+    .product-banner .product-banner-top{width: 100%;height: auto;}
+    .product-banner .product-banner-top .top-tabs{
+        width: 100%;
+        height: 10vw;
+        background-color: #FFFFFF;
+        border-radius: 2vw;
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: 2.5vw;
+    }
+    .product-banner .top-tabs .top-tabs-item{
+        padding: 0 4vw;
+        line-height: 10vw;
+        text-align: center;
+        font-size: 4vw;
+        color: #333333;
+        cursor: pointer;
+    }
+    .product-banner .top-tabs .top-tabs-item.active{
+        color: #FF5B00;
+        font-weight: bold;
+        text-decoration: underline;
+    }
+    .product-banner-bot{width: 100%;height: auto;}
+    #productHotBanner{width:100%;height:50vw;background: url("/img/hot/icon-hotpor-bg@h5.png");position:relative;box-sizing: border-box;padding: 2.4vw;border-radius: 2vw;}
+    #productHotBanner .swiper-wrapper{position:relative;height:48vw;z-index:0}
+    #productHotBanner .swiper-wrapper .swiper-slide{width:100%;height: 41.4vw;position:relative;zoom:1;vertical-align:middle;overflow:hidden;}
+    #productHotBanner .swiper-wrapper .swiper-slide a{display: block;width: 100%;height: 100%;}
+    #productHotBanner .swiper-wrapper .swiper-slide-image{width: 41.4vw;height: 41.4vw;float: left;box-sizing: border-box;border: 1px solid #e1e1e1;}
+    #productHotBanner .swiper-wrapper .swiper-slide-image img{width: 100%;height: 100%;display: block;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info{width: 38.2vw;height: 41.4vw;float: right;box-sizing: border-box;padding: 4vw 2vw;position: relative;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name{width:100%;height: auto;margin-bottom:11vw;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name p{line-height: 6vw;font-size: 4.2vw;color: #4A4F58;text-align: center;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn {width: 100%;height: 8vw;position: absolute;bottom: 0;left: 0;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn .slide-btn{width: 26.4vw;height: 8vw;margin: 0 auto;display:block;background: #F94B4B;line-height: 8vw;text-align: center;font-size: 16px;color: #FFFFFF;border-radius: 4vw;}
+    #productHotBanner .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:1.5vw;left:0}
+    .swiper-pagination-bullet{width:10px;height:4px;background: rgba(225, 86, 33, 0.39);border-radius:50%;}
+    #productHotBanner .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:10px;height:4px;background: rgba(225, 86, 33, 0.39);border-radius:2px;}
+    #productHotBanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:20px;height:4px;opacity:1;background: #E15621;border-radius: 2px;}
+
+    .productList{margin: 3.2vw auto;width: 97vw;margin-top: 0;}
+    .productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;position: relative;}
+    .productItem .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
+    .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
+    .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+    .productItem img {width: 45.6vw;height: 45.6vw;}
+    .productItem .name {display: block;padding: 0 1.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+    .price {padding: 2vw 1.2vw;overflow: hidden;}
+    .couponTag{padding:0 .4vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: .4vw;}
+    .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+    .price_grade{width: 100%;float: left;margin-top: 2vw;}
+    .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;}
+    .productItem .price .main_price_show{color: #f94b4b}
+    .productItem .name span.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: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
+
+    .original-price{text-decoration:line-through}
+    .listTitle{width:100%;min-height:3.2vw;box-sizing:border-box;padding:3.3vw;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:4vw;line-height:8vw;font-weight:normal}
+    .listTitle p{text-indent:1em;line-height:7vw;font-size:3.2vw}
+    .listTitle p em{color:#FF5B00;font-style:normal;display:inline-block;height:4.8vw;line-height:4.8vw;padding:0 1.5vw;background:#FFF}
+
+    /*会员标签*/
+    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
+    .productItem .price .price_text_tag .svip-tag,
+    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
+    .productItem .price .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+    .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.8vw;text-align:center;line-height:4.8vw;border-radius: 2.4vw 0; font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+    .productItem .price .svip-tag .svip-price span{color: #333}
+    .productItem .price .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
+    /*筛选项*/
+    .product-brand-content{width: 100%;height: 15.3vw;box-sizing: border-box;padding: 0 2.8vw  3.3vw 2.8vw;position: relative;}
+    .product-brand{width: 100%;height: 100%;background: #FFFFFF;z-index: 9999;box-sizing: border-box;padding: 2vw 0;border-radius: 1vw;}
+    .product-brand-name{padding: 0 3vw;text-align: center;line-height: 8vw;font-size: 3.8vw;color: #333;float: left;font-weight: bold;}
+    .product-brand-more{width: 9vw;height: 100%;float: right;text-align: center;box-sizing: border-box;}
+    .product-brand-more .icon:before{background-position: -51.5vw 0px;width: 5.4vw;height: 6.7vw;right: 5vw;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 5vw;position: absolute;}
+    .product-brand-list{float: left;box-sizing: border-box;height:100%;}
+    .product-brand-list .brand-list{width: 20.5vw;height: 8vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 8vw;;font-size: 3vw;color: #4A4F58;margin-right: 3.2vw;border-radius: 4vw;}
+    .product-brand-list .brand-list:nth-child(4n){margin-right: 0;}
+    .product-brand-list .brand-list.checked{border-color: #E15621;}
+    .product-brand-list .brand-list.checked a{color: #E15621;}
+    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-list .brand-list a:hover{color: #4A4F58;}
+    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-brand-fiexd{width: 100%;height: 60vw;position: absolute;top: 14vw;left: 0;padding: 0 2.8vw;box-sizing: border-box;z-index: 999;}
+    .product-brand-fiexdcontent{width: 100%;height: 100%;background: #FFFFFF;box-shadow: 0 10px 14px 0 rgba(86, 119, 252, 0.2);padding: 3vw 0;box-sizing: border-box;}
+    .product-brand-scroll{width: 100%;height: 40vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;box-sizing: border-box;padding: 0 2.4vw;}
+    .product-brand-scroll .brand-list{width: 20.5vw;height: 8vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 8vw;;font-size: 3vw;color: #4A4F58;margin-right: 2.4vw;margin-bottom: 2.4vw;border-radius: 4vw;}
+    .product-brand-scroll .brand-list:nth-child(4n){margin-right: 0;}
+    .product-brand-scroll .brand-list.checked{border-color: #E15621;}
+    .product-brand-scroll .brand-list.checked a{color: #E15621;}
+    .product-brand-scroll .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-scroll .brand-list a:hover{color: #4A4F58;}
+    .product-brand-scroll .brand-list.checked a:hover{color: #E15621;}
+    .product-screen-btn{width: 100%;height: 10vw;float: left;margin-top: 4vw;}
+    .product-screen-btn .sub-button{width: 50vw;height: 10vw;margin: 0 auto;line-height: 10vw;background-color: #E15621;text-align: center;font-size: 3.4vw;color: #FFFFFF;border-radius: 5vw;}
+    footer{ display: none; }
+
+}

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

@@ -217,7 +217,7 @@ const globalHead = new Vue({
                 }
             });
         },
-        goMsgLinkFn: function (url) {
+        goMsgLinkFn (url) {
             var _self = this;
             if (_self.loginStatus) {
                 window.location.href = url;
@@ -372,6 +372,19 @@ const globalFot = new Vue({
     el: '#globalFot',
     data: {
         isShowIcon: true,
+        footerCartCount:0,
+        userInfo:{}
+    },
+    created() {
+        const _self = this;
+        // 判断登录状态
+        if (globalUserData.token) {
+            this.userInfo = globalUserData;
+            setTimeout(function () {
+                // 获取头部购物车数据
+                _self.getHeadCart(_self.userInfo.userId);
+            }, 1000);
+        }
     },
     computed: {
         copyrightYear() {
@@ -383,6 +396,23 @@ const globalFot = new Vue({
         goSupplierLink() {
             window.location.href = '/supplier/attraction.html'
         },
+        handleClickCart(){
+            if (globalUserData.token) {
+                window.location.href = '/shopping/cart.html';
+            } else {
+                window.location.href = '/login.html';
+            }
+        },
+        // 头部购物车数据
+        getHeadCart (userId) {
+            const _self = this;
+            ShoppingApi.getHeaderCartList({userId: userId}, function (response) {
+                if (response.code === 0 && response.data) {
+                    var data = response.data;
+                    _self.footerCartCount = data.list.length;
+                }
+            });
+        },
     },
     mounted() {
 
@@ -456,7 +486,7 @@ $(function(){
         window.location.href = "/index.html";
     });
     // 置顶
-    $('#scrollTop').on("click", '.toTop',function () {
+    $('#scrollTop').on("click", '.item-toTop',function () {
         $("html,body").animate({scrollTop:0},500);
     });
     // 热线

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -92,6 +92,27 @@ var PublicApi = {
                 callback(res)
             });
         },
+        /**
+         * @首页专区详情
+         * @param: Int zoneId 专区ID
+         * @param: Int userId 用户ID
+         * @param: Int typeSort 分类类型 1产品，2仪器，3耗材配件
+         * @param: Int source 来源 1 WWW 2小程序
+         * @param: Int pageNum 页码
+         * @param: Int pageSize 条数
+         */
+        getZoneSecond:function(params,callback){
+            Http.AjaxService({
+                url:'/commodity/zone/second',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res)
+            });
+        },
         GetHomeNBrandName:function(params,callback){ //新品橱窗品牌列表
             Http.AjaxService({
                 url:'/commodity/home/BrandName',

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

@@ -12,18 +12,93 @@ var homeData = new Vue({
         newsList:[],
         popupFlag:false,
         centerImage:{},//广告活动弹窗
+        topAdvertisement:{},// 专属广告图
         couponEntry:2,// 活动优惠券弹窗显示控制
-        hotListPageFloor:[],// 新皮橱窗
+        hotListPageFloor:[],// 新品橱窗
         homePageFloor:[],//楼层
         quickoperaList: [], // 快捷运营入口列表
+        supplierList:[],// 优质供应商列表
+        recommendList:[],// 推荐列表
         dropScreenShow:false,
         isCmPopup:false,
-        isCloseCoupon:false
+        isCloseCoupon:false,
+        currentHour: new Date().getHours(),
+        timeSpeech:'',
+        userInfo:{},
+        paymentCount:0,//待付款
+        waitShipmentsCount:0,//待发货
+        shipmentsCount:0,//已发货
+        salesReturnCount:0,//退货/款
+        listQuery:{
+            orderNo:'',
+            orderState:0,
+            userId:0,
+            beginTime:'',
+            endTime:'',
+            pageNum:1,
+            pageSize:1
+        },
+        orders:null,
+        categories:[],
+        isMenuHovered:false,
+        selectedCategory:null,
+        hideTimer:null,
+        categoryTabIndex:1
     },
     filters: {
 
     },
     methods: {
+        //切换分类
+        handleClickTabS(index){
+            this.categories = []
+            this.categoryTabIndex = index
+            this.GetProductClassify(index);
+        },
+        //获取一级分类
+        GetProductClassify(index){
+            const _self = this
+            PublicApi.GetProductClassify({typeSort:index,source :'crm'},function (response) {
+                if(response.code === 0){
+                    _self.categories = response.data
+                }
+            })
+        },
+        GetMyPcCenterInfo(userId){
+            const _self = this;
+            UserApi.GetMyPcCenterInfo({userId:userId},function (response) {
+                if(response.code === 0){
+                    var data = response.data;
+                    _self.userInfo = data.user;
+                }
+            })
+        },
+        // 获取订单数量
+        GetQueryOrderNum(userId){
+            const _self = this;
+            OrderApi.GetQueryOrderNum({userId: userId}, function (response) {
+                if (response.code === 0) {
+                    const data = response.data;
+                    _self.paymentCount = data.paymentCount
+                    _self.waitShipmentsCount = data.waitShipmentsCount
+                    _self.shipmentsCount = data.shipmentsCount
+                    _self.salesReturnCount = data.salesReturnCount
+                }
+            })
+        },
+        getOrderList(params){//查询订单列表
+            const _self = this;
+            OrderApi.GetQueryOrderListData(params,function (response) {
+                if(response.code === 0){
+                    const data = response.data;
+                    if(data.list && data.list.length>0) {
+                        _self.orders = data.list[0].orderProductList[0];
+                    }else{
+                        _self.orders = [];
+                    }
+                }
+            })
+        },
         handleHidePopup(){
             this.isCmPopup = false
         },
@@ -45,7 +120,24 @@ var homeData = new Vue({
         footList(arr) {
             if (!Array.isArray(arr)) return []
             let newArr = [],a = []
-            let indexNum = isPC ? 4 : 10
+            let indexNum = isPC ? 8 : 10
+            arr.map((item, index) => {
+                if (index !== 0 && index % indexNum === 0) {
+                    newArr.push(a)
+                    a = []
+                    a.push(item)
+                }
+                else a.push(item)
+                if (arr.length === (index + 1)) {
+                    newArr.push(a)
+                }
+            })
+            return newArr
+        },        // 快捷运营列表
+        checkedSupplierList(arr) {
+            if (!Array.isArray(arr)) return []
+            let newArr = [],a = []
+            let indexNum = isPC ? 4 : 2
             arr.map((item, index) => {
                 if (index !== 0 && index % indexNum === 0) {
                     newArr.push(a)
@@ -61,16 +153,19 @@ var homeData = new Vue({
         },
         // 是否显示vip标签价格
         showVipPriceTag(pros){
-            //非会员
-            // if(!GLOBAL_VIP_FLAG === 1) return false;
-            // 商品所有机构可见
-            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 && pros.actStatus !==1 ) return true;
-            // 商品价格仅资质机构可见
-            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 && pros.actStatus !==1) return true;
-            // 商品价格仅医美机构可见
-            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1 && pros.actStatus !==1) return true;
-            // 其它
-            return false;
+            console.log('showVipPriceTag',pros.priceFlag)
+            if(pros){
+                //非会员
+                // if(!GLOBAL_VIP_FLAG === 1) return false;
+                // 商品所有机构可见
+                if(pros.priceFlag === 0  && pros.svipProductFlag === 1 && pros.actStatus !==1 ) return true;
+                // 商品价格仅资质机构可见
+                if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 && pros.actStatus !==1) return true;
+                // 商品价格仅医美机构可见
+                if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1 && pros.actStatus !==1) return true;
+                // 其它
+                return false;
+            }
         },
         popupPage(){  // 弹窗点击跳转链接
             window.open(this.centerImage.link)
@@ -187,8 +282,12 @@ var homeData = new Vue({
             PublicApi.GetHomeData({ source: 1,userId: _self.userId },function(response){
                 if(response.code === 0){
                     var data = response.data;
-                    _self.homePageFloor = data.homePageFloor;
+                    _self.homePageFloor = data.zones;
                     _self.hotListPageFloor =  data.pageFloorList;
+                    _self.recommendList = data.recommendProducts
+                    _self.supplierList =  _self.checkedSupplierList(data.supplierImage);
+                    console.log('supplierList',_self.supplierList)
+                    console.log('recommendList',_self.recommendList)
                     setTimeout(function(){
                         // 图片懒加载
                         $("img[data-original]").lazyload();
@@ -424,16 +523,51 @@ var homeData = new Vue({
         },
         handleCloseClick(){// 关闭优惠券宣传banner
             this.isCloseCoupon = false
+        },
+        //
+        handleMenuCategory(category){
+            this.selectedCategory = category
+        },
+        handleMenuLeave() {
+            this.isMenuHovered = false
+            this.selectedCategory = null
+        },
+        // 延迟隐藏面板（用于平滑过渡）
+        scheduleHidePanel() {
+            this.hideTimer = setTimeout(() => {
+                this.isMenuHovered = false
+                this.selectedCategory = null
+            }, 300)
+        },
+        cancelHidePanel() {
+            clearTimeout(this.hideTimer)
         }
     },
-    created: function() {
-        if(GLOBAL_TOKEN){
-            this.userId = GLOBAL_USER_ID;
+    created() {
+
+        if(globalUserData){
+            this.userId = this.listQuery.userId = globalUserData.userId;
+            this.GetMyPcCenterInfo(this.userId)
+            this.GetQueryOrderNum(this.userId)
+            this.getOrderList(this.listQuery)
+        }
+    },
+    computed: {
+        greeting() {
+            if (this.currentHour < 12) return 'Hi~ 上午好 🌞'
+            else if (this.currentHour < 18) return 'Hi~ 下午好 ☕'
+            else return 'Hi~ 晚上好 🌙'
+        },
+        // 计算属性控制面板显示
+        isPanelVisible(){
+            return this.isMenuHovered && this.selectedCategory
         }
+
     },
-    mounted: function() {
-        var _this = this;
+    mounted() {
+        const _this = this;
         // 页面主图轮播
+        this.GetProductClassify(this.categoryTabIndex)
         this.swiperBanner();
         // 获取设置商品价格
         if (GLOBAL_USER_ID) {
@@ -447,6 +581,7 @@ var homeData = new Vue({
             // 推荐专区商品轮播
             this.swiperFloor();
             this.GetHomeInit();
+            this.GetHomeData();
         }
         // Dom加载后
         this.$nextTick(function(){

src/main/resources/static/js/product/product-floor.js

@@ -0,0 +1,309 @@
+var productList = new Vue({
+    el: "#productList",
+    data: {
+        // searchFlag: false,
+        isRequest:false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        topGoodList: [],
+        listQuery: {
+            userId:0, //  用户Id
+            zoneId:'', // 专区Id
+            typeSort:'', // 分类类型 1产品，2仪器，3耗材配件
+            pageNum:1,
+            pageSize:12,
+            source:1
+        },
+        tabsIndex:0,
+        classify: [],
+        listData: [], //priceflag 0公开价格 1不公开价格 2仅对会员机构公开,//
+        imageList:[], //轮播
+        zone:{},// 专区信息
+        listRecord: 0,
+        pageInput: '1',
+        bigType: "",
+        smallType: "",
+        tinyType: "",
+        userId: 0,
+        userIdentity:'',// 2-会员机构, 4-普通机构
+        addhtml:'<span class="tag">美博会</span>',
+        hrefBrandId:null,
+        brandLists: [],
+        defaultBrandLists:[],
+        checkedBrandList:[],
+        checkedBrandLength:0,
+        choiceBrandIndex:100,
+        isProductScreen:false,
+        isActiviChecked:false,
+        isNewsChecked:false,
+        isShowAllBrands:false,
+        isShowAllBrandsButton:false,
+        isAllcheckedBrand:false,
+        isListEmpty:false,
+        isChoiceBrandText:false,
+        choiceBrandText:''
+    },
+    filters: {
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        handleClickTabS(index){
+            this.tabsIndex = index
+            this.listQuery.typeSort = index
+            this.listQuery.pageNum = 1
+            this.listData = []
+            this.getZoneSecond()
+        },
+        // 是否显示vip标签价格
+        showVipPriceTag: function(pros){
+            //非会员
+            // if(!GLOBAL_VIP_FLAG === 1) return false;
+            // 商品所有机构可见
+            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 ) return true;
+            // 商品价格仅资质机构可见
+            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true;
+            // 商品价格仅医美机构可见
+            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1) return true;
+            // 其它
+            return false;
+        },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        GetHomeRecommend:function () {
+            var _self = this;
+            PublicApi.GetHomeRecommend({ },function(response){
+                if(response.code == 0){
+                    _self.topGoodList = response.data;
+                    _self.isRequest = true;
+                    // 图片懒加载
+                    setTimeout(function(){
+                        if (isPC) {
+                            $('#productHotBanner').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 5000
+                                ,autoPlay: true
+                                ,autoPage: false
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#productHotBanner', {
+                                loop: true,
+                                autoplay: {
+                                    delay: 2000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+                        }
+                    },500);
+
+                }else{
+                    console.log('获取新品橱窗数据错误')
+                }
+            });
+        },
+        getZoneSecond () {
+            const _self = this;
+            PublicApi.getZoneSecond(_self.listQuery,function (response) {
+                if(response.code === 0){
+                    const data = response.data;
+                    _self.zone = data.zone
+                    _self.imageList = data.imageList
+                    _self.listData = _self.listData.concat(data.products.results);
+                    _self.listRecord = data.products.totalRecord;
+                    if( _self.listData.length>0){
+                        _self.isListEmpty = false;
+                    }else{
+                        _self.isListEmpty = true;
+                    }
+                    setTimeout(function () {
+                        _self.listLoading = false;
+                        _self.requestFlag = true;
+                        document.title = `采美365网-${zone.floorTitle}-${zone.floorDetail}-美业一站式正品采购平台`
+                    },1000)
+                }else {
+                    _self.listLoading = false;
+                    _self.isListEmpty = true;
+                    console.log('获取新品橱窗列表数据错误')
+                }
+            });
+        },
+        getCommoditySearchQUeryBrand:function() { // 查询筛选项品牌
+            var _self = this;
+            PublicApi.GetHomeNBrandName({},function (response) {
+                if (response.code === 0 && response.data ) {
+                    var data = response.data;
+                    _self.defaultBrandLists = data.map((el, index) => {
+                        el.isChecked = false;
+                        return el;
+                    })
+                    _self.brandLists = _self.defaultBrandLists.slice(0,6);
+                }else {
+                    console.log('查询品牌列表异常')
+                }
+            });
+        },
+        choiceBrandSearchClass:function (brand,index) {
+            var _self = this;
+            if(_self.isShowAllBrandsButton){
+                if(brand.isChecked){
+                    return 'checked';
+                }else{
+                    return '';
+                }
+            }else{
+                if(_self.choiceBrandIndex === index){
+                    return 'checked';
+                }else{
+                    return '';
+                }
+            }
+        },
+        choiceBrandSearchIndex:function (brand, index) {//单选
+            var _self = this;
+            _self.choiceBrandIndex = index;
+            _self.isAllcheckedBrand = false;
+            _self.listQuery.brandID = brand.id;
+            _self.listQuery.pageNum = 1;
+            _self.listData = [];
+            _self.getZoneSecond();
+        },
+        choiceBrandSearch: function (brand,index) {// PC选择品牌 多选的情况下
+            var _self = this;
+            if(_self.isShowAllBrandsButton){
+                brand.isChecked = !brand.isChecked;
+                if (brand.isChecked) {
+                    _self.checkedBrandList.push(brand.id);
+                } else {
+                    for (var i = 0; i < _self.checkedBrandList.length; i++){
+                        // 删除掉未勾选中的元素
+                        if(_self.checkedBrandList[i] === brand.id) {
+                            _self.checkedBrandList.splice(i, 1);
+                        }
+                    }
+                }
+                _self.isAllcheckedBrand = false;
+                _self.checkedBrandLength = _self.checkedBrandList.length;
+                _self.listQuery.brandID = this.checkedBrandList.join(',');
+            }else{
+                _self.choiceBrandIndex = index;
+                _self.listQuery.brandID = brand.id;
+                _self.listQuery.pageNum = 1;
+                _self.listData = [];
+                _self.getZoneSecond();
+            }
+        },
+        choiceBrand:function(brand,index){// 选择品牌
+            var _self = this;
+            brand.isChecked = !brand.isChecked;
+            if (brand.isChecked) {
+                _self.checkedBrandList.push(brand.id);
+            } else {
+                for (var i = 0; i < _self.checkedBrandList.length; i++){
+                    // 删除掉未勾选中的元素
+                    if(_self.checkedBrandList[i] === brand.id) {
+                        _self.checkedBrandList.splice(i, 1);
+                    }
+                }
+                _self.listQuery.brandID = this.checkedBrandList.join(',');
+            }
+            _self.isAllcheckedBrand = false;
+            _self.checkedBrandLength = _self.checkedBrandList.length;
+            _self.listQuery.brandID = this.checkedBrandList.join(',');
+        },
+        choiceBrandAll:function(){
+            // 点击选择全部品牌
+            this.isAllcheckedBrand = true;
+            this.listQuery.brandID = '';
+            this.brandLists.forEach(function(el){
+                el.isChecked = false;
+            });
+            this.listQuery.pageNum = 1;
+            this.listData = [];
+            this.getZoneSecond();
+        },
+        showMoreItem:function(){// 点击更多品牌
+            this.isShowAllBrands = !this.isShowAllBrands;
+            if( this.isShowAllBrands){
+                this.brandLists = this.defaultBrandLists;
+            }else{
+                this.brandLists = this.defaultBrandLists.slice(0,6)
+            }
+        },
+        showMoreItemCheckedAll:function () {//点击多选按钮
+            this.isShowAllBrands = true;
+            this.isShowAllBrandsButton = true
+            this.brandLists = this.defaultBrandLists;
+        },
+        handleCancel:function () {//取消多选
+            this.isShowAllBrandsButton = false
+        },
+        showIsProductScreen:function(){//
+            this.isProductScreen = true;
+        },
+        handleConfirmScreen:function(){
+            this.listQuery.pageNum = 1;
+            this.listData = [];
+            if(!isPC){
+                this.isShowAllBrands = false;
+                this.isShowAllBrandsButton = false;
+            }
+            this.getZoneSecond();
+        }
+    },
+    created: function () {
+        const _self = this;
+
+    },
+    mounted: function () {
+        const _self = this;
+        this.listQuery.zoneId = CAIMEI.getUrlParam('zoneId') ? CAIMEI.getUrlParam('zoneId'):'';
+        this.listQuery.typeSort = CAIMEI.getUrlParam('typeSort') ? CAIMEI.getUrlParam('typeSort'):'';
+        if(globalUserData){
+            this.userId = 	this.listQuery.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+        }
+        // 获取列表数据
+        this.getZoneSecond();
+        //上垃加载更多
+        $(window).on('scroll', function(){
+            var scrollTop = $(this).scrollTop();
+            var scrollHeight = $(document).height();
+            var windowHeight = window.innerHeight + $("footer").height();
+            if (scrollTop + windowHeight >= scrollHeight) {
+                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                var totalPage = Math.ceil(_self.listRecord / _self.listQuery.pageSize)?Math.ceil(_self.listRecord / _self.listQuery.pageSize):1;
+                var next = _self.listQuery.pageNum+1;
+                if(next <= totalPage){
+                    if (_self.requestFlag){
+                        _self.listQuery.pageNum = next;
+                        // 获取列表数据
+                        _self.getZoneSecond();
+                    }
+                    _self.requestFlag = false;
+                }
+            }
+        });
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+        }
+    }
+});

src/main/resources/static/js/user-center/dashboard.js

@@ -66,7 +66,7 @@ var helpSuggestion = new Vue({
         GetMyPcCenterInfo:function(){
             var _self = this;
             UserApi.GetMyPcCenterInfo({userId:_self.userId},function (response) {
-                if(response.code == 0){
+                if(response.code === 0){
                     var data = response.data;
                     _self.userInfo = data.user;
                     _self.degree = data.degree;

src/main/resources/templates/components/footer.html

@@ -94,8 +94,14 @@
             <img class="close" @click="isShowIcon = false" src="https://static.caimei365.com/app/img/supplier-login/close_icon.png">
     </div>
     <div id="scrollTop">
+        <div class="item item-cart" @click="handleClickCart">
+            <i class="icon icon-cart"></i>
+            <span class="toCart">购物车</span>
+            <em class="toNumber" v-if="GLOBAL_USER_ID > 0" v-text="footerCartCount"></em>
+        </div>
         <div class="item">
-            <span class="phone icon mIcon">咨询热线</span>
+            <i class="icon icon-contact"></i>
+            <span class="phone">咨询</span>
             <div class="phoneHover mFixed">
                 <div>
                     <p><a href="tel:075522907771" rel="nofollow">0755-22907771<i class="h5Only">点击咨询</i></a></p>
@@ -107,7 +113,8 @@
             </div>
         </div>
         <div class="item">
-            <span class="Iphone icon mIcon">手机端</span>
+            <i class="icon icon-phone"></i>
+            <span class="Iphone">手机端</span>
             <div class="qrCode_cx">
                 <div>
                     <img src="/img/common/qr_code_mini.jpg" alt="采美小程序">
@@ -122,8 +129,9 @@
 <!--        <div class="item">-->
 <!--            <span class="aiItem" @click="handleShowAiDrawer">Ai助手</span>-->
 <!--        </div>-->
-        <div class="item">
-            <span class="toTop icon mIcon">TOP</span>
+        <div class="item item-toTop" >
+            <i class="icon icon-top"></i>
+            <span class="toTop">去顶部</span>
         </div>
     </div>
 </footer>

src/main/resources/templates/index-old.html

@@ -0,0 +1,851 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+
+<head>
+    <title>采美365网-医美采购平台-生美采购平台-美业一站式正品采购平台</title>
+    <meta name="keywords" content="美业采购商城，美业信息平台，美业采购顾问，美业采购咨询，美容产品，美容仪器，医美产品，医美器械，二手仪器，美业正品联盟">
+    <meta name="description"
+          content="采美365网是一家专注于医美生美的B2B采购平台，拥有各类医疗器械资质和进出口资质，聚集全球众多知名供应商，上架丰富的医美生美产品和仪器，一站式解决美容机构的采购需求">
+    <meta name="baidu-site-verification" content="KbkRJg9357"/>
+    <link rel="canonical" href="https://www.caimei365.com/"/>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link th:href="@{/lib/css/swiper-bundle.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css"/>
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
+    <!--vant css-->
+    <link rel="stylesheet" href="/lib/vant-ui/index.css"/>
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 首页 -->
+<div id="container" v-cloak>
+    <!--首页图片轮播-->
+    <div id="swiper-container" class="swiper-container">
+        <ul class="swiper-wrapper swiper-wrapper-banner">
+            <li class="swiper-slide mfc" th:each="img: ${bannerList}">
+                <a href="javascript:void(0)"
+                   th:attr="data-href=${img.link},data-id=${img.id}"
+                   onclick="handleBannerStatistics($(this))">
+                    <img th:src="${img.image}" th:alt="${img.title}">
+                </a>
+            </li>
+        </ul>
+        <div class="swiper-pagination swiper-pagination-banner mfc"><span v-if="isPC"
+                                                                          th:each="img: ${bannerList}"></span></div>
+        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+        <a class="swiper-button-next" href="javascript:void(0)"></a>
+    </div>
+    <template v-if="!isPC">
+        <div class="mNavBox h5Only clear">
+            <!--导航菜单-->
+            <div class="mNavBox-main">
+                <a class="nav active" href="/"><p>首页</p></a>
+                <a th:each="menu,stat: ${topMenuList}" class="nav" th:href="${menu.link}" th:if="${stat.index} < 8">
+                    <img class="nav-icon" th:src="${menu.icon}" th:alt="${menu.name}">
+                    <p th:text="${menu.name}"></p>
+                </a>
+            </div>
+            <div class="mNavBox-down" :class="dropScreenShow ? 'none' : ''" @click="showDropScreen"><i
+                    class="icon mIcon"></i></div>
+            <div class="mNavBox-dropdown" v-if="dropScreenShow">
+                <a class="drop-item" href="javascript:void(0)">全部分类</a>
+                <a class="drop-item active" href="/">首页</a>
+                <a th:each="menu: ${topMenuList}" class="drop-item" th:href="${menu.link}">
+                    <p th:text="${menu.name}"></p>
+                </a>
+            </div>
+        </div>
+        <div class="mNavBox-dropdown-more" v-if="dropScreenShow" @click="hideDropScreen"></div>
+    </template>
+    <div class="quickOperation" v-if="quickoperaList.length > 0 && !isPC" v-cloak>
+        <van-swipe class="my-swipe" :autoplay="false">
+            <van-swipe-item v-for="(item, index) in quickoperaList" :key="item">
+                <div class="carousel-list clear">
+                    <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
+                        <div class="list-content">
+                            <div class="list-icon">
+                                <van-image style="width: 100%; height: 100%;" :src="i.icon"/>
+                            </div>
+                            <div class="list-title">
+                                <template v-if="isPC">
+                                    <div class="title-1">
+                                        <div class="title-1-item"></div>
+                                        <div class="title-2-item">GO></div>
+                                    </div>
+                                    <div class="title-2">{{i.remark || ''}}</div>
+                                </template>
+                                <template v-else>
+                                    <p>{{i.name}}</p>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </van-swipe-item>
+        </van-swipe>
+    </div>
+    <!--    <div id="new-container" class="section_container" v-if="newsList.length>0">-->
+    <!--        <div class="inner">-->
+    <!--            <div class="new-label">公告：</div>-->
+    <!--            <div class="new-list">-->
+    <!--                <a href="javascript:void(0)" class="new-li" v-for="(list ,index) in newsList" :key="index" @click="hanldDetails(list.id)">-->
+    <!--                    <span class="new-icon"></span>-->
+    <!--                    <p v-text="list.title"></p>-->
+    <!--                </a>-->
+    <!--            </div>-->
+    <!--            <a href="/news.html" class="new-more"> 更多>> </a>-->
+    <!--        </div>-->
+    <!--    </div>-->
+    <!--  快捷运营  -->
+    <div class="quickOperation" v-if="quickoperaList.length > 0 && isPC" v-cloak>
+        <el-carousel :autoplay="false" indicator-position="outside" arrow="never">
+            <el-carousel-item v-for="(item, index) in quickoperaList" :key="item">
+                <div class="carousel-list">
+                    <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
+                        <div class="card">
+                            <div class="card-content">
+                                <div class="card-icon">
+                                    <el-image style="width: 100%; height: 100%;" :src="i.icon"></el-image>
+                                </div>
+                                <div class="card-title">
+                                    <div class="title-1">
+                                        <div class="title-1-item">{{i.name}}</div>
+                                        <div class="title-2-item">GO></div>
+                                    </div>
+                                    <div class="title-2">{{i.remark || ''}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+    <div class="section_coupundle" :class="isCloseCoupon ? 'show' : 'hide'" v-if="GLOBAL_USER_IDENTITY !==3">
+        <div class="section_coupundle_inner">
+            <a href="/user/coupon-collection.html" target="_blank" v-if="isPC">
+                <img src="https://static.caimei365.com/app/img/bg/coupun_banner_pc@2x.jpg" alt=""
+                     class="section_coupundle_img">
+            </a>
+            <a href="/user/coupon-collection.html" target="_blank" v-else>
+                <img src="https://static.caimei365.com/app/img/bg/coupun_banner_h5@2x.jpg" alt=""
+                     class="section_coupundle_img">
+            </a>
+            <div class="section_coupundle_close" @click="handleCloseClick"></div>
+        </div>
+
+    </div>
+    <!--首页楼层主体数据-->
+    <div class="section_container">
+        <div class="inner">
+            <div id="sidebar" class="section_right">
+                <div class="box">
+                    <div class="section_right_item ross" v-if="shopAdvert.length > 0">
+                        <el-carousel :autoplay="true" show-indicators="false" :height="isPC ? '343px' : '61.6vw'">
+                            <el-carousel-item v-for="(item, index) in shopAdvert" :key="item.id">
+                                <a @click="setAdvStatistics(item)">
+                                    <img :src="item.pcImage" class="item_ross_image" alt="">
+                                </a>
+                            </el-carousel-item>
+                        </el-carousel>
+                    </div>
+                    <div class="section_right_item"
+                         th:if="${sideJson.get('liveList')}!=null and ${sideJson.get('liveList').size}>0">
+                        <div class="right_item_title">
+                            <p>精彩直播</p>
+                            <a href="https://wx.vzan.com/plug-ins/?v=637429463853329710#/FixupIndex/399803126?shareuid=0"
+                               target="_blank" rel="nofollow"
+                               onclick="_czc.push(['_trackEvent','商城首页','精彩直播','点击','','Um_Event_HomeLiveTemplateClick'])">
+                                <template v-if="isPC">更多&gt;</template>
+                                <template v-else>&gt;</template>
+                            </a>
+                        </div>
+                        <div class="right_item_main" th:each="live,stat : ${sideJson.get('liveList')}"
+                             th:object="${live}">
+                            <a th:if="${stat.index}==0" th:attr="data-href=*{link}" th:data-id="*{id}"
+                               href="javascript:void(0)" onclick="handleRightStatistics($(this),2)"
+                               th:title="*{liveTitle}" class="item_banner">
+                                <img src="/img/base/placeholder.png" th:attr="data-original=*{homePageImage}"
+                                     th:alt="*{liveTitle}">
+                                <div class="name" th:text="*{liveTitle}"></div>
+                                <div class="statu">
+                                    <template th:if="*{liveStatus}==1"><i class="mIcon icon-wart"></i>
+                                        <p>未开始</p></template>
+                                    <template th:if="*{liveStatus}==2"><i class="mIcon icon-live"></i>
+                                        <p>直播中</p></template>
+                                    <template th:if="*{liveStatus}==3"><i class="mIcon icon-end"></i>
+                                        <p>看回放</p></template>
+                                </div>
+                            </a>
+                            <a th:if="${stat.index}>0" th:attr="data-href=*{link}" th:data-id="*{id}"
+                               href="javascript:void(0)" onclick="handleRightStatistics($(this),2)"
+                               th:title="*{liveTitle}" class="item_text">
+                                <p class="item_text_name" th:text="*{liveTitle}"></p>
+                            </a>
+                        </div>
+                    </div>
+                    <div id="fixed-wrap" class="section_right_item"
+                         th:if="${sideJson.get('cmImageList')}!=null and ${sideJson.get('cmImageList').size}>0">
+                        <div class="right_item_title">
+                            <p>最新活动</p>
+                            <a href="https://www.caimei365.com/promotions.html" target="_blank"
+                               onclick="_czc.push(['_trackEvent','商城首页','最新活动','点击','','Um_Event_HomeActivityTemplateClick'])">
+                                <template v-if="isPC">更多&gt;</template>
+                                <template v-else>&gt;</template>
+                            </a>
+                        </div>
+                        <div class="right_item_main" th:each="image,stat : ${sideJson.get('cmImageList')}"
+                             th:object="${image}">
+                            <a th:if="${stat.index}==0" th:attr="data-href=*{link}" th:data-id="*{id}"
+                               onclick="handleRightStatistics($(this),3)" href="javascript:void(0)" th:title="*{title}"
+                               class="item_banner">
+                                <img src="/img/base/placeholder.png" th:attr="data-original=*{homePageImage}"
+                                     th:alt="*{title}">
+                                <div class="name" th:text="*{title}"></div>
+                            </a>
+                            <a th:if="${stat.index}>0" th:attr="data-href=*{link}" th:data-id="*{id}"
+                               onclick="handleRightStatistics($(this),3)" href="javascript:void(0)" th:title="*{title}"
+                               class="item_text">
+                                <p class="item_text_name" th:text="*{title}"></p>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="section_right_item"
+                         th:if="${sideJson.get('infoList')}!=null and ${sideJson.get('infoList').size}>0">
+                        <div class="right_item_title">
+                            <p>热门文章</p>
+                            <a href="https://www.caimei365.com/info/center-3-1.html" target="_blank"
+                               onclick="_czc.push(['_trackEvent','商城首页','热门文章','点击','','Um_Event_HomeArticleTemplateClick'])">
+                                <template v-if="isPC">更多&gt;</template>
+                                <template v-else>&gt;</template>
+                            </a>
+                        </div>
+                        <div class="right_item_main" th:each="info,stat : ${sideJson.get('infoList')}"
+                             th:object="${info}">
+                            <a th:if="${stat.index}==0" th:attr="data-href=*{link}" th:data-id="*{id}"
+                               onclick="handleRightStatistics($(this),4)" href="javascript:void(0)" th:title="*{title}"
+                               class="item_banner">
+                                <img src="/img/base/placeholder.png" th:attr="data-original=*{homePageImage}"
+                                     th:alt="*{title}">
+                                <div class="name" th:text="*{title}"></div>
+                            </a>
+                            <a th:if="${stat.index}>0" th:attr="data-href=*{link}" th:data-id="*{id}"
+                               onclick="handleRightStatistics($(this),4)" href="javascript:void(0)" th:title="*{title}"
+                               class="item_text">
+                                <p class="item_text_name info" th:text="*{title}"></p>
+                                <p class="item_text_time" v-if="isPC" th:text="*{createDate}"></p>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="section_right_item"
+                         th:if="${sideJson.get('baikeList')}!=null and ${sideJson.get('baikeList').size}>0">
+                        <div class="right_item_title">
+                            <p>热门百科</p>
+                            <a href="/encyclopedia/product.html" target="_blank"
+                               onclick="_czc.push(['_trackEvent','商城首页','热门百科','点击','','Um_Event_HomeBaikeTemplateClick'])">
+                                <template v-if="isPC">更多&gt;</template>
+                                <template v-else>&gt;</template>
+                            </a>
+                        </div>
+                        <div class="right_item_main" th:each="info,stat : ${sideJson.get('baikeList')}"
+                             th:object="${info}">
+                            <a th:if="${stat.index}==0" th:href="*{link}" th:title="*{name}" class="item_banner">
+                                <img src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{name}">
+                                <div class="name" th:text="*{name}"></div>
+                            </a>
+                            <a th:if="${stat.index}>0" th:href="*{link}" th:title="*{name}" class="item_text">
+                                <p class="item_text_name info" th:text="*{name}"></p>
+                                <!-- <p class="item_text_time" v-if="isPC" th:text="*{createDate}"></p> -->
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="section_left ">
+                <template v-if="userId > 0">
+                    <!--固定楼层-->
+                    <div class="section_page section_page_user hot" v-for="(floor,index) in hotListPageFloor">
+                        <div class="section_page_title">
+                            <h1 data-id="0" v-text="floor.title"></h1>
+                            <p v-text="floor.detail"></p>
+                            <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
+                        </div>
+                        <div class="swiper-container-floor hotList mySwiper" id="recommendBox">
+                            <div class="swiper-wrapper section_page_main type_08  recommendBox-wrapperHot clear mfw section_8 max">
+                                <!-- 商品/图片 列表 -->
+                                <a href="javascript:void(0)" onclick="handleHotStatistics($(this))"
+                                   :data-href="pros.link" class="swiper-slide page_main_item hot ad_04"
+                                   v-for="pros in floor.floorImageList4">
+                                    <img class="page_main_image" src="/img/base/placeholder.png"
+                                         :data-original="pros.product.image" :alt="pros.product && pros.product.name">
+                                    <div class="page_main_type" v-if="pros.product && pros.product.productType === 2">
+                                        医疗器械
+                                    </div>
+                                    <div class="page_main_text">
+                                        <span class="tag"
+                                              v-if="pros.product && pros.product.beautyActFlag == 1">美博会</span>
+                                        <span v-text="pros.product && pros.product.name"></span>
+                                    </div>
+                                    <div class="page_main_price">
+                                        <!-- 商品价格 -->
+                                        <div class="main_price_text">
+                                            <!-- 正常商品 -->
+                                            <template v-if="pros.product && pros.product.productCategory == 1">
+                                                <div class="price_text_tag">
+                                                    <p class="couponTag"
+                                                       v-if="pros.product && pros.product.couponsLogo">优惠券</p>
+                                                    <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                    <template v-if="pros.product && pros.product.svipProductFlag === 1">
+                                                        <div class="svip-tag">
+                                                            <div class="svip-icon">SVIP</div>
+                                                            <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
+                                                            <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
+                                                        GLOBAL_VIP_FLAG === 1">
+                                                                <template v-if="showVipPriceTag(pros.product)">
+                                                                    <div class="svip-price">
+                                                                        <span v-html="pros.product && pros.product.svipPriceTag"></span>
+                                                                    </div>
+                                                                </template>
+                                                            </template>
+                                                        </div>
+                                                    </template>
+                                                    <template v-else>
+                                                        <p class="listTag"
+                                                           v-if="pros.product.actStatus == 1 && pros.product.promotions">
+                                                            <span v-text="pros.product.promotions && pros.product.promotions.name"></span>
+                                                        </p>
+                                                    </template>
+                                                </div>
+                                                <div class="main_price_login">
+                                                    <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
+                                                    <template v-if="pros.product && pros.product.priceFlag == 1">
+                                                        <em class="price_grade_club"><span>￥</span>价格未公开</em>
+                                                    </template>
+                                                    <!--机构价仅会员可见 && 用户是普通机构-->
+                                                    <template
+                                                            v-else-if="pros.product && pros.product.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                        <em class="price_grade_club"><span>￥</span>会员可见</em>
+                                                    </template>
+                                                    <!--机构价仅医美机构可见-->
+                                                    <template
+                                                            v-else-if="pros.product && pros.product.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                        <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
+                                                    </template>
+                                                    <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                                    <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
+                                                        GLOBAL_VIP_FLAG === 1">
+                                                        <div class="main_price_show"
+                                                             :class="{none: showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)}">
+                                                            ￥
+                                                            <span class="price_num"
+                                                                  v-if="showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)"
+                                                                  v-text="filtersFormat(pros.product.originalPrice)"></span>
+                                                            <span class="price_num" v-else
+                                                                  v-text="filtersFormat(pros.product.price)"></span>
+                                                        </div>
+                                                    </template>
+                                                    <template v-else>
+                                                        <!--供应商除自己的商品外，也显示价格等级-->
+                                                        <em class="price_grade_shop">
+                                                            <span class="bold">￥</span>
+                                                            <i :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
+                                                        </em>
+                                                    </template>
+                                                </div>
+                                            </template>
+                                            <!-- 二手商品 -->
+                                            <template v-else>
+                                                <div class="main_price_login">
+                                                    <div class="price_text_tag"></div>
+                                                    <div v-if="pros.product.detailTalkFlag==2" class="main_price_show">
+                                                        ￥价格祥聊
+                                                    </div>
+                                                    <div v-else class="main_price_show">
+                                                        ￥<span class="price_num"
+                                                               v-text="filtersFormat(pros.product.price)"></span>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="swiper-pagination swiper-pagination-floor hot mfc "
+                                 :data-id="floor.floorImageList4.length"></div>
+                        </div>
+                    </div>
+                    <!--楼层-->
+                    <div class="section_page section_page_user" v-for="(floor,index) in homePageFloor">
+                        <template v-if="floor.floorContent">
+                            <div class="section_page_title">
+                                <h1 :data-id="index+1" v-text="floor.title"></h1>
+                                <p v-text="floor.detail"></p>
+                            </div>
+                            <div :class="floor.floorContent.templateType == 8 ? 'swiper-container-floor mySwiperSlide' : ''"
+                                 :id="floor.floorContent.templateType == 8 ? 'recommendBox' : ''"
+                            >
+                                <div :class="floor.floorContent.templateType == 8 ?
+                                    'swiper-wrapper section_page_main type_08 recommendBox-wrapper clear mfw section_'+floor.floorContent.templateType :
+                                    'section_page_main clear mfw section_'+floor.floorContent.templateType"
+                                >
+                                    <!-- 广告图 -->
+                                    <template v-if="floor.floorContent.templateType == 1 ||
+                                                    floor.floorContent.templateType == 2 ||
+                                                    floor.floorContent.templateType == 3 ||
+                                                    floor.floorContent.templateType == 4 ||
+                                                    floor.floorContent.templateType == 5"
+                                    >
+                                        <a :href="floor.floorContent.adsLink1 ? floor.floorContent.adsLink1 : 'javascript:;'"
+                                           :target="floor.floorContent.adsLink1 ? '_blank' : '_self'"
+                                           class="page_main_item ad_01"
+                                        >
+                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage1" alt=""
+                                                 class="page_main_item_adv">
+                                            <img v-else :src="floor.floorContent.appletsAdsImage1" alt=""
+                                                 class="page_main_item_adv">
+                                        </a>
+                                    </template>
+                                    <template v-if="floor.floorContent.templateType == 2 ||
+                                                    floor.floorContent.templateType == 3 ||
+                                                    floor.floorContent.templateType == 4"
+                                    >
+                                        <a :href="floor.floorContent.adsLink2 ? floor.floorContent.adsLink2 : 'javascript:;'"
+                                           :target="floor.floorContent.adsLink2 ? '_blank' : '_self'"
+                                           class="page_main_item ad_02"
+                                        >
+                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage2" alt=""
+                                                 class="page_main_item_adv">
+                                            <img v-else :src="floor.floorContent.appletsAdsImage2" alt=""
+                                                 class="page_main_item_adv">
+                                        </a>
+                                    </template>
+                                    <template v-if="floor.floorContent.templateType == 4">
+                                        <a :href="floor.floorContent.adsLink3 ? floor.floorContent.adsLink3 : 'javascript:;'"
+                                           :target="floor.floorContent.adsLink3 ? '_blank' : '_self'"
+                                           class="page_main_item ad_03"
+                                        >
+                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage3" alt=""
+                                                 class="page_main_item_adv">
+                                            <img v-else :src="floor.floorContent.appletsAdsImage3" alt=""
+                                                 class="page_main_item_adv">
+                                        </a>
+                                    </template>
+                                    <!-- 商品/图片 列表 -->
+                                    <a :href="pros.link" class="page_main_item ad_04 swiper-slide" target="_blank"
+                                       v-for="pros in floor.floorImageList">
+                                        <img class="page_main_image" src="/img/base/placeholder.png"
+                                             :data-original="pros.image" :alt="pros.name">
+                                        <div class="page_main_type"
+                                             v-if="pros.product && pros.product.productType && pros.product.productType === 2">
+                                            医疗器械
+                                        </div>
+                                        <div class="page_main_tag" v-if="pros.listType == 2">
+                                            <p v-text="pros.label"></p>
+                                        </div>
+                                        <div class="page_main_text">
+                                            <span class="tag" v-if="pros.beautyActFlag == 1">美博会</span>
+                                            <span v-text="pros.name"></span>
+                                        </div>
+                                        <div class="page_main_price" v-if="pros.listType == 1">
+                                            <!-- 商品价格 -->
+                                            <div class="main_price_text">
+                                                <!-- 正常商品 -->
+                                                <template v-if="pros.product.productCategory == 1">
+                                                    <div class="price_text_tag">
+                                                        <p class="couponTag" v-if="pros.product.couponsLogo">优惠券</p>
+                                                        <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                        <template v-if="pros.product.svipProductFlag === 1">
+                                                            <div class="svip-tag">
+                                                                <div class="svip-icon">SVIP</div>
+                                                                <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
+                                                                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
+                                                        GLOBAL_VIP_FLAG === 1">
+                                                                    <template v-if="showVipPriceTag(pros.product)">
+                                                                        <div class="svip-price">
+                                                                            <span v-html="pros.product.svipPriceTag"></span>
+                                                                        </div>
+                                                                    </template>
+                                                                </template>
+                                                            </div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <p class="listTag"
+                                                               v-if="pros.product.actStatus ==1 && pros.product.promotions">
+                                                                <span v-text="pros.product.promotions.name"></span>
+                                                            </p>
+                                                        </template>
+                                                    </div>
+                                                    <div class="main_price_login">
+                                                        <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
+                                                        <template v-if="pros.product.priceFlag == 1">
+                                                            <em class="price_grade_club"><span>￥</span>价格未公开</em>
+                                                        </template>
+                                                        <!--机构价仅会员可见 && 用户是普通机构-->
+                                                        <template
+                                                                v-else-if="pros.product.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                            <em class="price_grade_club"><span>￥</span>会员可见</em>
+                                                        </template>
+                                                        <!--机构价仅医美机构可见-->
+                                                        <template
+                                                                v-else-if="pros.product.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                            <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
+                                                        </template>
+                                                        <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                                        <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
+                                                        GLOBAL_VIP_FLAG === 1">
+                                                            <div class="main_price_show"
+                                                                 :class="{none: showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)}">
+                                                                ￥
+                                                                <span class="price_num"
+                                                                      v-if="showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)"
+                                                                      v-text="filtersFormat(pros.product.originalPrice)"></span>
+                                                                <span class="price_num" v-else
+                                                                      v-text="filtersFormat(pros.product.price)"></span>
+                                                            </div>
+                                                        </template>
+                                                        <template v-else>
+                                                            <!--供应商除自己的商品外，也显示价格等级-->
+                                                            <em class="price_grade_shop">
+                                                                <span class="bold">￥</span><i
+                                                                    :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
+                                                            </em>
+                                                        </template>
+                                                    </div>
+                                                </template>
+                                                <!-- 二手商品 -->
+                                                <template v-else>
+                                                    <div class="main_price_login">
+                                                        <div class="price_text_tag"></div>
+                                                        <div v-if="pros.product.detailTalkFlag==2"
+                                                             class="main_price_show">￥价格祥聊
+                                                        </div>
+                                                        <div v-else class="main_price_show">
+                                                            ￥<span class="price_num"
+                                                                   v-text="filtersFormat(pros.product.price)"></span>
+                                                        </div>
+                                                    </div>
+                                                </template>
+                                            </div>
+                                        </div>
+                                    </a>
+                                    <!-- 广告图 -->
+                                    <div v-if="floor.floorContent.templateType == 6">
+                                        <a :href="floor.floorContent.adsLink1 ? floor.floorContent.adsLink1 : 'javascript:;'"
+                                           :target="floor.floorContent.adsLink1 ? '_blank' : '_self' "
+                                           class="page_main_item ad_01">
+                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage1" alt=""
+                                                 class="page_main_item_adv">
+                                            <img v-else :src="floor.floorContent.appletsAdsImage1" alt=""
+                                                 class="page_main_item_adv">
+                                        </a>
+                                    </div>
+                                </div>
+                                <div v-if="floor.floorContent.templateType == 8"
+                                     class="swiper-pagination swiper-pagination-floor mfc"
+                                     :data-id="floor.floorImageList.length">
+                                </div>
+                            </div>
+                            <div class="section_page_more" :data-id="floor.floorContent.templateType"
+                                 :data-size="floor.floorImageList.length">
+                                <div class="more" @click="showMoreItem($event)"><i class="icon mIcon"></i>查看更多</div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+                <template v-else>
+                    <!--静态化固定楼层-->
+                    <div class="section_page section_page_user hot"
+                         th:each="floor,stat : ${floorJson.get('pageFloorList')}">
+                        <div class="section_page_title">
+                            <h1 th:text="${floor.get('title')}" data-id="0"></h1>
+                            <p th:text="${floor.get('detail')}"></p>
+                            <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
+                        </div>
+                        <div class="hotList swiper-container-floor mySwiper" id="recommendBox">
+                            <div class="section_page_main type_08 swiper-wrapper  recommendBox-wrapperHot clear mfw section_8">
+                                <!-- 商品/图片 列表 -->
+                                <th:block th:each="pros : ${floor.get('floorImageList4')}" th:object="${pros}">
+                                    <a href="javascript:void(0)" onclick="handleHotStatistics($(this))"
+                                       th:attr="data-href=*{link}" class="swiper-slide page_main_item hot ad_04">
+                                        <th:block th:if="${pros.get('product')}!=null"
+                                                  th:object="${pros.get('product')}">
+                                            <img class="page_main_image" src="/img/base/placeholder.png"
+                                                 th:attr="data-original=*{image}" th:alt="*{name}">
+                                        </th:block>
+                                        <th:block th:if="${pros.get('product')}!=null"
+                                                  th:object="${pros.get('product')}">
+                                            <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                                        </th:block>
+                                        <div class="page_main_text">
+                                            <th:block th:if="${pros.containsKey('product')}">
+                                                <span class="tag"
+                                                      th:if="${pros.get('product').containsKey('beautyActFlag')} and ${pros.get('product').get('beautyActFlag')}==1">美博会</span>
+                                            </th:block>
+                                            <span th:text="${pros.get('product').get('name')}"></span>
+                                        </div>
+                                        <div class="page_main_price">
+                                            <th:block th:if="${pros.get('product')}!=null"
+                                                      th:object="${pros.get('product')}">
+                                                <!-- 商品价格 -->
+                                                <div th:attr="class=*{'main_price_text product_'+productId}, data-id=*{productId}">
+                                                    <!-- 正常商品 -->
+                                                    <th:block th:if="*{productCategory}==1">
+                                                        <div class="price_text_tag">
+                                                            <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
+                                                            <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                            <th:block th:if="${svipProductFlag}!=null">
+                                                                <div class="svip-tag" th:if="*{svipProductFlag}==1">
+                                                                    <div class="svip-icon">SVIP</div>
+                                                                </div>
+                                                            </th:block>
+                                                            <p class="listTag"
+                                                               th:if="*{actStatus}==1 and ${pros.get('product').get('promotions')}!=null">
+                                                                <template th:text="*{promotions.name}"></template>
+                                                                <th:block
+                                                                        th:if="*{promotions.type}==1 and *{promotions.mode}==1">
+                                                                    <!--单品优惠:优惠价-->
+                                                                    <span class="price_unit"
+                                                                          style="display:none;">:￥</span><span
+                                                                        class="price_num"></span>
+                                                                </th:block>
+                                                            </p>
+                                                        </div>
+                                                        <div class="main_price_none">
+                                                            <em class="price_grade"><span class="bold">￥</span><i
+                                                                    th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i></em>
+                                                        </div>
+                                                    </th:block>
+                                                    <!-- 二手商品 -->
+                                                    <th:block th:if="*{productCategory}!=1">
+                                                        <div class="main_price_none sec">
+                                                            <em class="price_grade"><span>￥</span>登录可见</em>
+                                                        </div>
+                                                    </th:block>
+                                                </div>
+                                            </th:block>
+                                        </div>
+                                    </a>
+                                </th:block>
+                            </div>
+                            <div class="swiper-pagination swiper-pagination-floor hot mfc"
+                                 th:attr="data-id=${floor.get('floorImageList4').size}"></div>
+                        </div>
+                    </div>
+                    <!--静态化普通楼层-->
+                    <div class="section_page" th:each="floor,stat : ${floorJson.get('homePageFloor')}">
+                        <th:block th:if="${floor.get('floorContent')}!=null">
+                            <div class="section_page_title">
+                                <h1 th:text="${floor.get('title')}" th:attr="data-id=${stat.index+1}"></h1>
+                                <p th:text="${floor.get('detail')}"></p>
+                            </div>
+                            <th:block th:object="${floor.get('floorContent')}">
+                                <div th:class="*{templateType}==8? 'swiper-container-floor mySwiperSlide' : ''"
+                                     th:id="*{templateType}==8? 'recommendBox' : ''">
+                                    <div th:class="*{templateType}==8? *{'section_page_main type_08 swiper-wrapper recommendBox-wrapper clear mfw section_'+templateType} : *{'section_page_main clear mfw section_'+templateType}">
+                                        <!-- 广告图 -->
+                                        <th:block
+                                                th:if="*{templateType}==1 or *{templateType}==2 or *{templateType}==3 or *{templateType}==4 or *{templateType}==5">
+                                            <a th:href="*{#strings.isEmpty(adsLink1)}? 'javascript:;' : *{adsLink1}"
+                                               th:attr="target=(*{#strings.isEmpty(adsLink1)} ? '_self' : '_blank')"
+                                               class="page_main_item ad_01">
+                                                <img v-if="isPC" th:src="*{pcAdsImage1}" alt=""
+                                                     class="page_main_item_adv">
+                                                <img v-else th:src="*{appletsAdsImage1}" alt=""
+                                                     class="page_main_item_adv">
+                                            </a>
+                                        </th:block>
+                                        <th:block
+                                                th:if="*{templateType}==2 or *{templateType}==3 or *{templateType}==4">
+                                            <a th:href="*{#strings.isEmpty(adsLink2)}? 'javascript:;' : *{adsLink2}"
+                                               th:attr="target=(*{#strings.isEmpty(adsLink2)} ? '_self' : '_blank')"
+                                               class="page_main_item ad_02">
+                                                <img v-if="isPC" th:src="*{pcAdsImage2}" alt=""
+                                                     class="page_main_item_adv">
+                                                <img v-else th:src="*{appletsAdsImage2}" alt=""
+                                                     class="page_main_item_adv">
+                                            </a>
+                                        </th:block>
+                                        <th:block th:if="*{templateType}==4">
+                                            <a th:href="*{#strings.isEmpty(adsLink3)}? 'javascript:;' : *{adsLink3}"
+                                               th:attr="target=(*{#strings.isEmpty(adsLink3)} ? '_self' : '_blank')"
+                                               class="page_main_item ad_03">
+                                                <img v-if="isPC" th:src="*{pcAdsImage3}" alt=""
+                                                     class="page_main_item_adv">
+                                                <img v-else th:src="*{appletsAdsImage3}" alt=""
+                                                     class="page_main_item_adv">
+                                            </a>
+                                        </th:block>
+                                        <!-- 商品/图片 列表 -->
+                                        <th:block th:each="pros : ${floor.get('floorImageList')}" th:object="${pros}">
+                                            <a th:href="*{link}" class="page_main_item ad_04 swiper-slide"
+                                               target="_blank">
+                                                <img class="page_main_image" src="/img/base/placeholder.png"
+                                                     th:attr="data-original=*{image}" th:alt="*{name}">
+                                                <th:block th:if="${pros.get('product')}!=null"
+                                                          th:object="${pros.get('product')}">
+                                                    <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                                                </th:block>
+                                                <div class="page_main_tag" th:if="*{listType}==2">
+                                                    <p th:text="*{label}"></p>
+                                                </div>
+                                                <div class="page_main_text">
+                                                    <th:block th:if="${pros.containsKey('product')}">
+                                                        <span class="tag"
+                                                              th:if="${pros.get('product').containsKey('beautyActFlag')} and ${pros.get('product').get('beautyActFlag')}==1">美博会</span>
+                                                    </th:block>
+                                                    <span th:text="${pros.get('name')}"></span>
+                                                </div>
+                                                <div class="page_main_price" th:if="*{listType}==1">
+                                                    <th:block th:if="${pros.get('product')}!=null"
+                                                              th:object="${pros.get('product')}">
+                                                        <!-- 商品价格 -->
+                                                        <div th:attr="class=*{'main_price_text product_'+productId}, data-id=*{productId}">
+                                                            <!-- 正常商品 -->
+                                                            <th:block th:if="*{productCategory}==1">
+                                                                <div class="price_text_tag">
+                                                                    <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
+                                                                    <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                                    <div class="svip-tag" th:if="*{svipProductFlag}==1">
+                                                                        <div class="svip-icon">SVIP</div>
+                                                                    </div>
+                                                                    <p class="listTag"
+                                                                       th:if="*{actStatus}==1 and ${pros.get('product').get('promotions')}!=null">
+                                                                        <template
+                                                                                th:text="*{promotions.name}"></template>
+                                                                        <th:block
+                                                                                th:if="*{promotions.type}==1 and *{promotions.mode}==1">
+                                                                            <!--单品优惠:优惠价-->
+                                                                            <span class="price_unit"
+                                                                                  style="display:none;">:￥</span><span
+                                                                                class="price_num"></span>
+                                                                        </th:block>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="main_price_none">
+                                                                    <em class="price_grade"><span
+                                                                            class="bold">￥</span><i
+                                                                            th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i></em>
+                                                                </div>
+                                                            </th:block>
+                                                            <!-- 二手商品 -->
+                                                            <th:block th:if="*{productCategory}!=1">
+                                                                <div class="main_price_none sec">
+                                                                    <em class="price_grade"><span>￥</span>登录可见</em>
+                                                                </div>
+                                                            </th:block>
+                                                        </div>
+                                                    </th:block>
+                                                </div>
+                                            </a>
+                                        </th:block>
+                                        <!-- 广告图 -->
+                                        <th:block th:if="*{templateType}==6">
+                                            <a th:href="*{#strings.isEmpty(adsLink1)}? 'javascript:;' : *{adsLink1}"
+                                               th:attr="target=(*{#strings.isEmpty(adsLink1)} ? '_self' : '_blank')"
+                                               class="page_main_item ad_01">
+                                                <img v-if="isPC" th:src="*{pcAdsImage1}" alt=""
+                                                     class="page_main_item_adv">
+                                                <img v-else th:src="*{appletsAdsImage1}" alt=""
+                                                     class="page_main_item_adv">
+                                            </a>
+                                        </th:block>
+                                    </div>
+                                    <div th:if="*{templateType}==8"
+                                         class="swiper-pagination swiper-pagination-floor mfc"
+                                         th:attr="data-id=${floor.get('floorImageList').size}"></div>
+                                </div>
+                                <div class="section_page_more"
+                                     th:attr="data-id=*{templateType}, data-size=${floor.get('floorImageList').size}">
+                                    <div class="more" @click="showMoreItem($event)"><i class="icon mIcon"></i>查看更多</div>
+                                </div>
+                            </th:block>
+                        </th:block>
+                    </div>
+                </template>
+                <div class="section_page">
+                    <div class="section_page_title">
+                        <h1 data-id="99">优质供应商</h1>
+                        <p>采美正品联盟 质量保证</p>
+                    </div>
+                    <div class="section_page_bottom" th:object="${floorJson.get('supplierImage')}">
+                        <a th:href="*{#strings.isEmpty(wwwLink)}? 'javascript:;' : *{wwwLink}"
+                           th:attr="target=(*{#strings.isEmpty(wwwLink)} ? '_self' : '_blank')"
+                           class="page_main_li ad_01">
+                            <img th:src="*{wwwImage}" alt="" class="page_main_item_adv">
+                        </a>
+                        <template th:each="shop : ${floorJson.get('supplierImage').get('qualitySupplierList')}"
+                                  th:object="${shop}">
+                            <a th:href="*{link}" target="_blank" class="page_main_li ad_02">
+                                <img class="page_main_logo" src="/img/base/placeholder.png"
+                                     th:attr="data-original=*{image}" th:alt="*{supplierName}">
+                                <div class="page_main_name" th:text="*{supplierName}"></div>
+                            </a>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--右侧边栏导航-->
+    <div id="sideNav" v-if="isPC">
+        <div class="item">
+            <a class="item-sideNav" href="javascript:void(0);" v-for="nav in asideNav" :data-id="nav.id"
+               v-text="nav.value"></a>
+        </div>
+    </div>
+    <!--新用户优惠券弹窗-->
+    <div id="meibohui" class="Popup" v-if="popupFlag" :class="popupFlag ? 'show' :'' ">
+        <div class="show_popup">
+            <div class="bg_icon" @click="closePopup"><i class="icon mIcon"></i></div>
+            <div class="bg_img" @click="popupPage">
+                <img :src="centerImage.image" v-if="isPC">
+                <img :src="centerImage.crmImage" v-else>
+            </div>
+        </div>
+    </div>
+    <!--底部注册看价格提醒-->
+    <div class="cm-regist-popup" :class="isCmPopup ? 'show' : 'none'">
+        <div class="cm-rigist-img">
+            <img src="/img/base/icon-zhuce@2x.png" alt="注册看价格">
+            <p>注册认证看价格</p>
+        </div>
+        <div class="cm-rigist-btn">
+            <a href="/club/register.html">立即注册</a>
+            <div class="cm-rigist-close" @click="handleHidePopup">
+                <i class="icon-close"></i>"
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script type="text/javascript" src="/lib/vant-ui/vant.min.js"></script>
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></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/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmsMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
+</body>
+
+</html>

src/main/resources/templates/index.html

@@ -1,21 +1,26 @@
 <!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://www.thymeleaf.org ">
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
 
 <head>
     <title>采美365网-医美采购平台-生美采购平台-美业一站式正品采购平台</title>
     <meta name="keywords" content="美业采购商城，美业信息平台，美业采购顾问，美业采购咨询，美容产品，美容仪器，医美产品，医美器械，二手仪器，美业正品联盟">
-    <meta name="description" content="采美365网是一家专注于医美生美的B2B采购平台，拥有各类医疗器械资质和进出口资质，聚集全球众多知名供应商，上架丰富的医美生美产品和仪器，一站式解决美容机构的采购需求">
-    <meta name="baidu-site-verification" content="KbkRJg9357" />
-    <link rel="canonical" href="https://www.caimei365.com/" />
+    <meta name="description"
+          content="采美365网是一家专注于医美生美的B2B采购平台，拥有各类医疗器械资质和进出口资质，聚集全球众多知名供应商，上架丰富的医美生美产品和仪器，一站式解决美容机构的采购需求">
+    <meta name="baidu-site-verification" content="KbkRJg9357"/>
+    <link rel="canonical" href="https://www.caimei365.com/"/>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
-    <link th:href="@{/lib/css/swiper-bundle.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css" />
-    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css" />
+    <link th:href="@{/css/index/index-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link th:href="@{/css/index/index-pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link th:href="@{/lib/css/swiper-bundle.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet"
+          type="text/css">
+    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.15.13/lib/theme-chalk/index.css"/>
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
     <!--vant css-->
-    <link rel="stylesheet" href="/lib/vant-ui/index.css" />
+    <link rel="stylesheet" href="/lib/vant-ui/index.css"/>
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -24,31 +29,277 @@
 <!-- 首页 -->
 <div id="container" v-cloak>
     <!--首页图片轮播-->
-    <div id="swiper-container" class="swiper-container">
-        <ul class="swiper-wrapper swiper-wrapper-banner">
-            <li class="swiper-slide mfc" th:each="img: ${bannerList}">
-                <a href="javascript:void(0)"
-                   th:attr="data-href=${img.link},data-id=${img.id}"
-                   onclick="handleBannerStatistics($(this))">
-                    <img th:src="${img.image}" th:alt="${img.title}">
-                </a>
-            </li>
-        </ul>
-        <div class="swiper-pagination swiper-pagination-banner mfc"><span v-if="isPC" th:each="img: ${bannerList}"></span></div>
-        <a class="swiper-button-prev" href="javascript:void(0)"></a>
-        <a class="swiper-button-next" href="javascript:void(0)"></a>
+    <div class="section_container">
+        <div class="inner">
+                <div class="section-content-image" th:if="${topAdvertisement}">
+                    <a th:href="${topAdvertisement.link}" class="section-image-view" target="_blank">
+                        <img th:src="${topAdvertisement.image}" alt="">
+                    </a>
+                </div>
+            <div class="section-content">
+                <div class="section-content-naves">
+                    <div class="category-menu-tabs">
+                        <div class="menu-tabs-item" :class="categoryTabIndex === 1 ? 'active': '' "
+                             @click="handleClickTabS(1)">产品
+                        </div>
+                        <div class="menu-tabs-item" :class="categoryTabIndex === 2 ? 'active': '' "
+                             @click="handleClickTabS(2)">仪器
+                        </div>
+                    </div>
+                    <div class="category-menu" @mouseenter="isMenuHovered = true" @mouseleave="handleMenuLeave">
+                        <!-- 左侧分类列表 -->
+                        <div class="left-category">
+                            <div v-for="category in categories"
+                                 :key="category.id"
+                                 class="category-item"
+                                 :class="{ 'active': selectedCategory?.bigTypeId === category.bigTypeId }"
+                                 @mouseenter="handleMenuCategory(category)"
+                            >
+                                <a :href="`/product/classify-${category.typeSort}-${category.bigTypeId}.html`"
+                                   target="_blank">
+                                    <img :src="category.crmIcon" alt="">
+                                    <span v-text="category.name"></span>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- 右侧详情面板 -->
+                        <div v-if="isPanelVisible"
+                             class="right-panel"
+                             @mouseenter="cancelHidePanel"
+                             @mouseleave="scheduleHidePanel"
+                        >
+                            <div class="panel-content">
+                                <!-- 子分类展示 -->
+                                <template
+                                        v-if="selectedCategory.smallTypeList && selectedCategory.smallTypeList.length > 0">
+                                    <div v-for="(subCat, index) in selectedCategory.smallTypeList" :key="index"
+                                         class="sub-category">
+                                        <a :href="`/product/classify-${selectedCategory.typeSort}-${subCat.bigTypeId}-${subCat.smallTypeId}.html`"
+                                           class="sub-item" target="_blank">
+                                            <img :src="subCat.crmIcon" alt="">
+                                            <span v-text="subCat.name"></span>
+                                        </a>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div class="sub-category">
+                                        <div class="sub-items">
+                                            <a :href="`/product/classify-${selectedCategory.typeSort}-${selectedCategory.bigTypeId}-${selectedCategory.smallTypeId}.html`"
+                                               class="sub-item" target="_blank">
+                                                <img :src="selectedCategory.crmIcon" alt="">
+                                                <span v-text="selectedCategory.name"></span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="section-content-mains">
+                    <div class="section-content-mains-top">
+                        <a th:each="menu,stat: ${topMenuList}" class="mains-nav" th:href="${menu.link}"
+                           th:if="${stat.index} < 8" target="_blank">
+                            <p th:text="${menu.name}"></p>
+                        </a>
+                    </div>
+                    <div class="section-content-mains-bottom">
+                        <div class="section-content-advert">
+                            <div class="section-content-banner">
+                                <div id="swiper-container" class="swiper-container">
+                                    <ul class="swiper-wrapper swiper-wrapper-banner">
+                                        <li class="swiper-slide mfc" th:each="img: ${bannerList}">
+                                            <a href="javascript:void(0)" target="_blank"
+                                               th:attr="data-href=${img.link},data-id=${img.id}"
+                                               onclick="handleBannerStatistics($(this))">
+                                                <img th:src="${img.image}" th:alt="${img.title}">
+                                            </a>
+                                        </li>
+                                    </ul>
+                                    <div class="swiper-pagination swiper-pagination-banner mfc">
+                                        <span v-if="isPC" th:each="img: ${bannerList}"></span>
+                                    </div>
+                                    <a class="swiper-button-prev" href="javascript:void(0)"></a>
+                                    <a class="swiper-button-next" href="javascript:void(0)"></a>
+                                </div>
+                            </div>
+                            <div class="section-content-adv">
+                                <div class="section-content-adv-item" th:each="adver,stat: ${advertisement}" th:if="${stat.index} < 4">
+                                    <a th:href="${adver.link}" target="_blank">
+                                        <img th:src="${adver.image}" alt="">
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="section-content-usermain">
+                            <div class="section-content-userbox">
+                                <div class="section-content-usertop">
+                                    <template v-if="userId > 0">
+                                        <!-- 登录后 -->
+                                        <div class="user-column-a">
+                                            <div class="user-column-logo">
+                                                <img :src="userInfo.image ? userInfo.image : '/img/base/logo-index@2x.png'"
+                                                     alt="">
+                                            </div>
+                                            <div class="user-column-text">
+                                                <h1 v-text="userInfo.name"></h1>
+                                            </div>
+                                        </div>
+                                        <div class="user-column-c">
+                                            <div class="column-c-item">
+                                                <h1 v-text="paymentCount"></h1>
+                                                <p>待付款</p>
+                                            </div>
+                                            <div class="column-c-item">
+                                                <h1 v-text="waitShipmentsCount"></h1>
+                                                <p>待发货</p>
+                                            </div>
+                                            <div class="column-c-item">
+                                                <h1 v-text="shipmentsCount"></h1>
+                                                <p>已发货</p>
+                                            </div>
+                                            <div class="column-c-item">
+                                                <h1 v-text="salesReturnCount"></h1>
+                                                <p>退货/款</p>
+                                            </div>
+                                        </div>
+                                        <div class="user-column-d">
+                                            <template v-if="orders">
+                                                <a :href="`/user/order/detail.html?shopOrderId=${orders.shopOrderId}`"
+                                                   target="_blank">
+                                                    <div class="column-d-image">
+                                                        <img :src="orders.image" alt="">
+                                                    </div>
+                                                    <div class="column-d-text">
+                                                        <h1 v-text="orders.name"></h1>
+                                                    </div>
+                                                </a>
+                                            </template>
+                                            <template v-else>
+                                                <a href="javascript:void(0);">
+                                                    <div class="column-d-image"></div>
+                                                    <div class="column-d-text">
+                                                        <p>暂无订单信息</p>
+                                                        <p>下单后查看更多订单信息</p>
+                                                    </div>
+                                                </a>
+                                            </template>
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        <!-- 登录前 -->
+                                        <div class="user-column-a">
+                                            <div class="user-column-logo"><img src="/img/base/logo-index@2x.png" alt="">
+                                            </div>
+                                            <div class="user-column-text">
+                                                <h1 v-text="greeting"></h1>
+                                                <p><a href="/club/register.html" target="_blank">注册</a></p>
+                                            </div>
+                                        </div>
+                                        <div class="user-column-b">
+                                            <h1>登录采美网后更多精彩</h1>
+                                            <p>登录可享，专属优惠，贴心推荐</p>
+                                            <a href="/login.html">立即登录</a>
+                                        </div>
+                                    </template>
+                                </div>
+                                <div class="section-content-userbottom">
+                                    <template v-if="userId > 0">
+                                        <!-- 登录后 -->
+                                        <div class="userbottom-column-a">
+                                            <a class="column-item" href="/shopping/cart.html" target="_blank">
+                                                <img src="/img/base/icon-column-1@2x.png" alt="">
+                                                <p>购物车</p>
+                                            </a>
+                                            <a class="column-item" href="/user/collection.html" target="_blank">
+                                                <img src="/img/base/icon-column-2@2x.png" alt="">
+                                                <p>收藏夹</p>
+                                            </a>
+                                            <a class="column-item" href="/user/message/list.html" target="_blank">
+                                                <img src="/img/base/icon-column-3@2x.png" alt="">
+                                                <p>我的消息</p>
+                                            </a>
+                                        </div>
+                                        <div class="userbottom-column-b">
+                                            <a class="column-item plus" href="/user/member.html" target="_blank">
+                                                <h1>PLUS会员</h1>
+                                                <p>权益升级</p>
+                                                <span>立即开通></span>
+                                            </a>
+                                            <a class="column-item coupon" href="/user/coupon.html" target="_blank">
+                                                <h1>优惠券</h1>
+                                                <p>会员专享</p>
+                                                <span>立即领取></span>
+                                            </a>
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        <!-- 登录前 -->
+                                        <div class="userbottom-column-a">
+                                            <a class="column-item" href="/login.html">
+                                                <img src="/img/base/icon-column-1@2x.png" alt="">
+                                                <p>购物车</p>
+                                            </a>
+                                            <a class="column-item" href="/login.html">
+                                                <img src="/img/base/icon-column-2@2x.png" alt="">
+                                                <p>收藏夹</p>
+                                            </a>
+                                            <a class="column-item" href="/login.html">
+                                                <img src="/img/base/icon-column-3@2x.png" alt="">
+                                                <p>我的消息</p>
+                                            </a>
+                                        </div>
+                                        <div class="userbottom-column-b">
+                                            <a class="column-item plus" href="/login.html">
+                                                <h1>PLUS会员</h1>
+                                                <p>权益升级</p>
+                                                <span>立即开通></span>
+                                            </a>
+                                            <a class="column-item coupon" href="/login.html">
+                                                <h1>优惠券</h1>
+                                                <p>会员专享</p>
+                                                <span>立即领取></span>
+                                            </a>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                            <!-- 快捷运营 PC   -->
+                            <div class="section-content-oper">
+                                <el-carousel :autoplay="false" height="97px" indicator-position="none">
+                                    <el-carousel-item v-for="(item, index) in quickoperaList" :key="item">
+                                        <div class="carousel-list">
+                                            <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
+                                                <div class="list-content">
+                                                    <div class="list-icon">
+                                                        <el-image style="width: 100%; height: 100%;"
+                                                                  :src="i.icon"></el-image>
+                                                    </div>
+                                                    <div class="list-title"><p>{{i.name}}</p></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </el-carousel-item>
+                                </el-carousel>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <template v-if="!isPC">
         <div class="mNavBox h5Only clear">
-            <!--导航菜单-->
+            <!--H5导航菜单-->
             <div class="mNavBox-main">
-                <a class="nav active" href="/"><p>首页</p> </a>
+                <a class="nav active" href="/"><p>首页</p></a>
                 <a th:each="menu,stat: ${topMenuList}" class="nav" th:href="${menu.link}" th:if="${stat.index} < 8">
                     <img class="nav-icon" th:src="${menu.icon}" th:alt="${menu.name}">
                     <p th:text="${menu.name}"></p>
                 </a>
             </div>
-            <div class="mNavBox-down" :class="dropScreenShow ? 'none' : ''" @click="showDropScreen"><i class="icon mIcon"></i></div>
+            <div class="mNavBox-down" :class="dropScreenShow ? 'none' : ''" @click="showDropScreen"><i
+                    class="icon mIcon"></i></div>
             <div class="mNavBox-dropdown" v-if="dropScreenShow">
                 <a class="drop-item" href="javascript:void(0)">全部分类</a>
                 <a class="drop-item active" href="/">首页</a>
@@ -59,6 +310,7 @@
         </div>
         <div class="mNavBox-dropdown-more" v-if="dropScreenShow" @click="hideDropScreen"></div>
     </template>
+    <!-- 快捷运营 h5   -->
     <div class="quickOperation" v-if="quickoperaList.length > 0 && !isPC" v-cloak>
         <van-swipe class="my-swipe" :autoplay="false">
             <van-swipe-item v-for="(item, index) in quickoperaList" :key="item">
@@ -66,7 +318,7 @@
                     <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
                         <div class="list-content">
                             <div class="list-icon">
-                                <van-image style="width: 100%; height: 100%;" :src="i.icon" />
+                                <van-image style="width: 100%; height: 100%;" :src="i.icon"/>
                             </div>
                             <div class="list-title">
                                 <template v-if="isPC">
@@ -86,224 +338,325 @@
             </van-swipe-item>
         </van-swipe>
     </div>
-<!--    <div id="new-container" class="section_container" v-if="newsList.length>0">-->
-<!--        <div class="inner">-->
-<!--            <div class="new-label">公告：</div>-->
-<!--            <div class="new-list">-->
-<!--                <a href="javascript:void(0)" class="new-li" v-for="(list ,index) in newsList" :key="index" @click="hanldDetails(list.id)">-->
-<!--                    <span class="new-icon"></span>-->
-<!--                    <p v-text="list.title"></p>-->
-<!--                </a>-->
-<!--            </div>-->
-<!--            <a href="/news.html" class="new-more"> 更多>> </a>-->
-<!--        </div>-->
-<!--    </div>-->
-    <!--  快捷运营  -->
-    <div class="quickOperation" v-if="quickoperaList.length > 0 && isPC" v-cloak>
-        <el-carousel :autoplay="false" indicator-position="outside" arrow="never">
-            <el-carousel-item v-for="(item, index) in quickoperaList" :key="item">
-                <div class="carousel-list">
-                    <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(i)">
-                        <div class="card">
-                            <div class="card-content">
-                                <div class="card-icon">
-                                    <el-image style="width: 100%; height: 100%;" :src="i.icon"></el-image>
-                                </div>
-                                <div class="card-title">
-                                    <div class="title-1">
-                                        <div class="title-1-item">{{i.name}}</div>
-                                        <div class="title-2-item">GO></div>
-                                    </div>
-                                    <div class="title-2">{{i.remark || ''}}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </el-carousel-item>
-        </el-carousel>
-    </div>
-    <div class="section_coupundle" :class="isCloseCoupon ? 'show' : 'hide'" v-if="GLOBAL_USER_IDENTITY !==3">
-        <div class="section_coupundle_inner">
-            <a href="/user/coupon-collection.html" target="_blank" v-if="isPC">
-                <img src="https://static.caimei365.com/app/img/bg/coupun_banner_pc@2x.jpg" alt="" class="section_coupundle_img">
-            </a>
-            <a href="/user/coupon-collection.html" target="_blank" v-else>
-                <img src="https://static.caimei365.com/app/img/bg/coupun_banner_h5@2x.jpg" alt="" class="section_coupundle_img">
-            </a>
-            <div class="section_coupundle_close" @click="handleCloseClick"></div>
-        </div>
-
-    </div>
-    <!--首页楼层主体数据-->
-    <div class="section_container">
+    <!--首页新品橱窗楼层-->
+    <div class="section_container main-content clear">
         <div class="inner">
-            <div id="sidebar" class="section_right">
-                <div class="box" >
-                    <div class="section_right_item ross" v-if="shopAdvert.length > 0">
-                        <el-carousel :autoplay="true" show-indicators="false" :height="isPC ? '343px' : '61.6vw'">
-                            <el-carousel-item v-for="(item, index) in shopAdvert" :key="item.id">
-                                <a @click="setAdvStatistics(item)">
-                                    <img :src="item.pcImage" class="item_ross_image" alt="">
-                                </a>
-                            </el-carousel-item>
-                        </el-carousel>
+            <template v-if="userId > 0">
+                <!--固定楼层-->
+                <div class="section_page section_page_user hot" v-for="(floor,index) in hotListPageFloor">
+                    <div class="section_page_title">
+                        <h1 data-id="0" v-text="floor.title"></h1><span v-text="floor.detail"></span>
+                        <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                     </div>
-                    <div class="section_right_item" th:if="${sideJson.get('liveList')}!=null and ${sideJson.get('liveList').size}>0">
-                        <div class="right_item_title">
-                            <p>精彩直播</p>
-                            <a href="https://wx.vzan.com/plug-ins/?v=637429463853329710#/FixupIndex/399803126?shareuid=0" target="_blank"  rel="nofollow" onclick="_czc.push(['_trackEvent','商城首页','精彩直播','点击','','Um_Event_HomeLiveTemplateClick'])">
-                                <template v-if="isPC">更多&gt;</template><template v-else>&gt;</template>
-                            </a>
-                        </div>
-                        <div class="right_item_main" th:each="live,stat : ${sideJson.get('liveList')}" th:object="${live}">
-                            <a th:if="${stat.index}==0" th:attr="data-href=*{link}" th:data-id="*{id}" href="javascript:void(0)" onclick="handleRightStatistics($(this),2)" th:title="*{liveTitle}" class="item_banner">
-                                <img src="/img/base/placeholder.png" th:attr="data-original=*{homePageImage}" th:alt="*{liveTitle}">
-                                <div class="name" th:text="*{liveTitle}"></div>
-                                <div class="statu">
-                                    <template th:if="*{liveStatus}==1"><i class="mIcon icon-wart"></i><p>未开始</p></template>
-                                    <template th:if="*{liveStatus}==2"><i class="mIcon icon-live"></i><p>直播中</p></template>
-                                    <template th:if="*{liveStatus}==3"><i class="mIcon icon-end"></i><p>看回放</p></template>
+                    <div class="swiper-container-floor hotList mySwiper" id="recommendBox">
+                        <div class="swiper-wrapper section_page_main type_08  recommendBox-wrapperHot clear mfw section_8 max">
+                            <!-- 商品/图片 列表 -->
+                            <a href="javascript:void(0)" onclick="handleHotStatistics($(this))"
+                               :data-href="pros.link" class="swiper-slide page_main_item hot ad_04"
+                               v-for="pros in floor.floorImageList4">
+                                <img class="page_main_image" src="/img/base/placeholder.png"
+                                     :data-original="pros.product.image" :alt="pros.product && pros.product.name">
+                                <div class="page_main_type" v-if="pros.product && pros.product.productType === 2">
+                                    医疗器械
+                                </div>
+                                <div class="page_main_text">
+                                    <span v-text="pros.product && pros.product.name"></span>
+                                </div>
+                                <div class="page_main_price">
+                                    <!-- 商品价格 -->
+                                    <div class="main_price_text">
+                                        <!-- 正常商品 -->
+                                        <template v-if="pros.product && pros.product.productCategory == 1">
+                                            <div class="price_text_tag">
+                                                <p class="couponTag"
+                                                   v-if="pros.product && pros.product.couponsLogo">优惠券</p>
+                                                <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                <template v-if="pros.product && pros.product.svipProductFlag === 1">
+                                                    <div class="svip-tag">
+                                                        <div class="svip-icon">SVIP</div>
+                                                        <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
+                                                        <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
+                                                        GLOBAL_VIP_FLAG === 1">
+                                                            <template v-if="showVipPriceTag(pros.product)">
+                                                                <div class="svip-price">
+                                                                    <span v-html="pros.product && pros.product.svipPriceTag"></span>
+                                                                </div>
+                                                            </template>
+                                                        </template>
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <p class="listTag"
+                                                       v-if="pros.product.actStatus == 1 && pros.product.promotions">
+                                                        <span v-text="pros.product.promotions && pros.product.promotions.name"></span>
+                                                    </p>
+                                                </template>
+                                            </div>
+                                            <div class="main_price_login">
+                                                <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
+                                                <template v-if="pros.product && pros.product.priceFlag == 1">
+                                                    <em class="price_grade_club"><span>￥</span>价格未公开</em>
+                                                </template>
+                                                <!--机构价仅会员可见 && 用户是普通机构-->
+                                                <template
+                                                        v-else-if="pros.product && pros.product.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                    <em class="price_grade_club"><span>￥</span>会员可见</em>
+                                                </template>
+                                                <!--机构价仅医美机构可见-->
+                                                <template
+                                                        v-else-if="pros.product && pros.product.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                    <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
+                                                </template>
+                                                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
+                                                        GLOBAL_VIP_FLAG === 1">
+                                                    <div class="main_price_show"
+                                                         :class="{none: showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)}">
+                                                        ￥
+                                                        <span class="price_num"
+                                                              v-if="showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)"
+                                                              v-text="filtersFormat(pros.product.originalPrice)"></span>
+                                                        <span class="price_num" v-else
+                                                              v-text="filtersFormat(pros.product.price)"></span>
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <!--供应商除自己的商品外，也显示价格等级-->
+                                                    <em class="price_grade_shop">
+                                                        <span class="bold">￥</span>
+                                                        <i :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
+                                                    </em>
+                                                </template>
+                                            </div>
+                                        </template>
+                                        <!-- 二手商品 -->
+                                        <template v-else>
+                                            <div class="main_price_login">
+                                                <div class="price_text_tag"></div>
+                                                <div v-if="pros.product.detailTalkFlag==2" class="main_price_show">
+                                                    ￥价格祥聊
+                                                </div>
+                                                <div v-else class="main_price_show">
+                                                    ￥<span class="price_num"
+                                                           v-text="filtersFormat(pros.product.price)"></span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
                                 </div>
-                            </a>
-                            <a th:if="${stat.index}>0" th:attr="data-href=*{link}" th:data-id="*{id}" href="javascript:void(0)" onclick="handleRightStatistics($(this),2)" th:title="*{liveTitle}" class="item_text">
-                                <p class="item_text_name" th:text="*{liveTitle}"></p>
-                            </a>
-                        </div>
-                    </div>
-                    <div id="fixed-wrap" class="section_right_item" th:if="${sideJson.get('cmImageList')}!=null and ${sideJson.get('cmImageList').size}>0">
-                        <div class="right_item_title">
-                            <p>最新活动</p>
-                            <a href="https://www.caimei365.com/promotions.html" target="_blank" onclick="_czc.push(['_trackEvent','商城首页','最新活动','点击','','Um_Event_HomeActivityTemplateClick'])">
-                                <template v-if="isPC">更多&gt;</template><template v-else>&gt;</template>
-                            </a>
-                        </div>
-                        <div class="right_item_main" th:each="image,stat : ${sideJson.get('cmImageList')}" th:object="${image}">
-                            <a th:if="${stat.index}==0" th:attr="data-href=*{link}" th:data-id="*{id}" onclick="handleRightStatistics($(this),3)" href="javascript:void(0)" th:title="*{title}" class="item_banner">
-                                <img src="/img/base/placeholder.png" th:attr="data-original=*{homePageImage}" th:alt="*{title}">
-                                <div class="name" th:text="*{title}"></div>
-                            </a>
-                            <a th:if="${stat.index}>0" th:attr="data-href=*{link}" th:data-id="*{id}" onclick="handleRightStatistics($(this),3)" href="javascript:void(0)"  th:title="*{title}" class="item_text">
-                                <p class="item_text_name" th:text="*{title}"></p>
                             </a>
                         </div>
+                        <div class="swiper-pagination swiper-pagination-floor hot mfc "
+                             :data-id="floor.floorImageList4.length"></div>
                     </div>
-                    <div class="section_right_item" th:if="${sideJson.get('infoList')}!=null and ${sideJson.get('infoList').size}>0">
-                        <div class="right_item_title">
-                            <p>热门文章</p>
-                            <a href="https://www.caimei365.com/info/center-3-1.html" target="_blank" onclick="_czc.push(['_trackEvent','商城首页','热门文章','点击','','Um_Event_HomeArticleTemplateClick'])">
-                                <template v-if="isPC">更多&gt;</template><template v-else>&gt;</template>
-                            </a>
-                        </div>
-                        <div class="right_item_main" th:each="info,stat : ${sideJson.get('infoList')}" th:object="${info}">
-                            <a th:if="${stat.index}==0" th:attr="data-href=*{link}" th:data-id="*{id}" onclick="handleRightStatistics($(this),4)" href="javascript:void(0)"  th:title="*{title}" class="item_banner">
-                                <img src="/img/base/placeholder.png" th:attr="data-original=*{homePageImage}" th:alt="*{title}">
-                                <div class="name" th:text="*{title}"></div>
-                            </a>
-                            <a th:if="${stat.index}>0" th:attr="data-href=*{link}" th:data-id="*{id}" onclick="handleRightStatistics($(this),4)" href="javascript:void(0)"  th:title="*{title}" class="item_text">
-                                <p class="item_text_name info" th:text="*{title}"></p>
-                                <p class="item_text_time" v-if="isPC" th:text="*{createDate}"></p>
-                            </a>
-                        </div>
+                </div>
+            </template>
+            <template v-else>
+                <!--静态化固定楼层-->
+                <div class="section_page section_page_user hot"
+                     th:each="floor,stat : ${floorJson.get('pageFloorList')}">
+                    <div class="section_page_title">
+                        <h1 th:text="${floor.get('title')}" data-id="0"></h1><span
+                            th:text="${floor.get('detail')}"></span>
+                        <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                     </div>
-                    <div class="section_right_item" th:if="${sideJson.get('baikeList')}!=null and ${sideJson.get('baikeList').size}>0">
-                        <div class="right_item_title">
-                            <p>热门百科</p>
-                            <a href="/encyclopedia/product.html" target="_blank" onclick="_czc.push(['_trackEvent','商城首页','热门百科','点击','','Um_Event_HomeBaikeTemplateClick'])">
-                                <template v-if="isPC">更多&gt;</template><template v-else>&gt;</template>
-                            </a>
-                        </div>
-                        <div class="right_item_main" th:each="info,stat : ${sideJson.get('baikeList')}" th:object="${info}">
-                            <a th:if="${stat.index}==0"  th:href="*{link}"  th:title="*{name}" class="item_banner">
-                                <img src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{name}">
-                                <div class="name" th:text="*{name}"></div>
-                            </a>
-                            <a th:if="${stat.index}>0" th:href="*{link}"  th:title="*{name}" class="item_text">
-                                <p class="item_text_name info" th:text="*{name}"></p>
-                                <!-- <p class="item_text_time" v-if="isPC" th:text="*{createDate}"></p> -->
-                            </a>
+                    <div class="hotList swiper-container-floor mySwiper" id="recommendBox">
+                        <div class="section_page_main type_08 swiper-wrapper  recommendBox-wrapperHot clear mfw section_8">
+                            <!-- 商品/图片 列表 -->
+                            <th:block th:each="pros : ${floor.get('floorImageList4')}" th:object="${pros}">
+                                <a href="javascript:void(0)" onclick="handleHotStatistics($(this))"
+                                   th:attr="data-href=*{link}" class="swiper-slide page_main_item hot ad_04">
+                                    <th:block th:if="${pros.get('product')}!=null"
+                                              th:object="${pros.get('product')}">
+                                        <img class="page_main_image" src="/img/base/placeholder.png"
+                                             th:attr="data-original=*{image}" th:alt="*{name}">
+                                    </th:block>
+                                    <th:block th:if="${pros.get('product')}!=null"
+                                              th:object="${pros.get('product')}">
+                                        <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                                    </th:block>
+                                    <div class="page_main_text">
+                                        <span th:text="${pros.get('product').get('name')}"></span>
+                                    </div>
+                                    <div class="page_main_price">
+                                        <th:block th:if="${pros.get('product')}!=null"
+                                                  th:object="${pros.get('product')}">
+                                            <!-- 商品价格 -->
+                                            <div th:attr="class=*{'main_price_text product_'+productId}, data-id=*{productId}">
+                                                <!-- 正常商品 -->
+                                                <th:block th:if="*{productCategory}==1">
+                                                    <div class="price_text_tag">
+                                                        <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
+                                                        <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                        <th:block th:if="${svipProductFlag}!=null">
+                                                            <div class="svip-tag" th:if="*{svipProductFlag}==1">
+                                                                <div class="svip-icon">SVIP</div>
+                                                            </div>
+                                                        </th:block>
+                                                        <p class="listTag"
+                                                           th:if="*{actStatus}==1 and ${pros.get('product').get('promotions')}!=null">
+                                                            <template th:text="*{promotions.name}"></template>
+                                                            <th:block
+                                                                    th:if="*{promotions.type}==1 and *{promotions.mode}==1">
+                                                                <!--单品优惠:优惠价-->
+                                                                <span class="price_unit"
+                                                                      style="display:none;">:￥</span><span
+                                                                    class="price_num"></span>
+                                                            </th:block>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_none">
+                                                        <em class="price_grade"><span class="bold">￥</span><i
+                                                                th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i></em>
+                                                    </div>
+                                                </th:block>
+                                                <!-- 二手商品 -->
+                                                <th:block th:if="*{productCategory}!=1">
+                                                    <div class="main_price_none sec">
+                                                        <em class="price_grade"><span>￥</span>登录可见</em>
+                                                    </div>
+                                                </th:block>
+                                            </div>
+                                        </th:block>
+                                    </div>
+                                </a>
+                            </th:block>
                         </div>
+                        <div class="swiper-pagination swiper-pagination-floor hot mfc"
+                             th:attr="data-id=${floor.get('floorImageList4').size}"></div>
                     </div>
                 </div>
-            </div>
-            <div class="section_left ">
-                <template v-if="userId > 0">
-                    <!--固定楼层-->
-                    <div class="section_page section_page_user hot" v-for="(floor,index) in hotListPageFloor">
-                        <div class="section_page_title" >
-                            <h1 data-id="0" v-text="floor.title"></h1>
-                            <p v-text="floor.detail"></p>
-                            <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
+            </template>
+        </div>
+    </div>
+    <!--首页运营楼层-->
+    <div class="section_container main-content clear">
+        <div class="inner">
+            <template v-if="userId > 0">
+                <div class="section-page-content">
+                    <div class="section-page-item" v-for="(floor,flIndex) in homePageFloor">
+                        <div class="section-page-top">
+                            <div class="section-page-title">
+                                <h1 v-text="floor.floorTitle"></h1>
+                                <div class="page-bottom-tabs" v-if="!isPC">
+                                    <div class="page-bottom-tabs-left">
+                                        <a :href="`/product/floor.html?zoneId=${floor.id}&typeSort=1`" class="bot-tabs-item" target="_blank">产品</a>
+                                        <a :href="`/product/floor.html?zoneId=${floor.id}&typeSort=2`" class="bot-tabs-item" target="_blank">仪器</a>
+                                        <a :href="`/product/floor.html?zoneId=${floor.id}&typeSort=3`" class="bot-tabs-item" target="_blank">耗材配件</a>
+                                    </div>
+                                    <div class="page-bottom-tabs-right">
+                                        <a :href="`/product/floor.html?zoneId=${floor.id}`" target="_blank">更多></a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="section-page-banner">
+                                <el-carousel :interval="(flIndex+1)*3000" arrow="never" height="240px">
+                                    <el-carousel-item v-for="item in floor.imageList" :key="item">
+                                        <a class="page-banner-item" :href="item.link">
+                                            <img :src="item.image" alt="">
+                                        </a>
+                                    </el-carousel-item>
+                                </el-carousel>
+                            </div>
                         </div>
-                        <div class="swiper-container-floor hotList mySwiper" id="recommendBox">
-                            <div class="swiper-wrapper section_page_main type_08  recommendBox-wrapperHot clear mfw section_8 max">
-                                <!-- 商品/图片 列表 -->
-                                <a href="javascript:void(0)" onclick="handleHotStatistics($(this))" :data-href="pros.link" class="swiper-slide page_main_item hot ad_04" v-for="pros in floor.floorImageList4">
-                                    <img class="page_main_image" src="/img/base/placeholder.png" :data-original="pros.product.image" :alt="pros.product && pros.product.name">
-                                    <div class="page_main_type" v-if="pros.product && pros.product.productType === 2">医疗器械</div>
+                        <div class="section-page-bottom">
+                            <div class="page-bottom-tabs">
+                                <div class="page-bottom-tabs-left">
+                                    <a :href="`/product/floor.html?zoneId=${floor.id}&typeSort=1`" class="bot-tabs-item" target="_blank">产品</a>
+                                    <a :href="`/product/floor.html?zoneId=${floor.id}&typeSort=2`" class="bot-tabs-item" target="_blank">仪器</a>
+                                    <a :href="`/product/floor.html?zoneId=${floor.id}&typeSort=3`" class="bot-tabs-item" target="_blank">耗材配件</a>
+                                </div>
+                                <div class="page-bottom-tabs-right">
+                                    <a :href="`/product/floor.html?zoneId=${floor.id}`" target="_blank">更多></a>
+                                </div>
+                            </div>
+                            <div class="page-bottom-main">
+                                <a :href="'/product-'+pros.productId+'.html'"
+                                   class="bottom-main-item"
+                                   target="_blank"
+                                   v-for="(pros,prosIndex) in floor.products" :key="prosIndex">
+                                    <img class="page_main_image" src="/img/base/placeholder.png"
+                                         :data-original="pros.mainImage" :alt="pros.name">
+                                    <div class="page_main_type"
+                                         v-if="pros && pros.productType && pros.productType === 2">
+                                        医疗器械
+                                    </div>
                                     <div class="page_main_text">
-                                        <span class="tag" v-if="pros.product && pros.product.beautyActFlag == 1">美博会</span>
-                                        <span v-text="pros.product && pros.product.name"></span>
+                                        <span v-text="pros.name"></span>
                                     </div>
                                     <div class="page_main_price">
                                         <!-- 商品价格 -->
                                         <div class="main_price_text">
                                             <!-- 正常商品 -->
-                                            <template v-if="pros.product && pros.product.productCategory == 1">
+                                            <template v-if="pros.productCategory == 1">
                                                 <div class="price_text_tag">
-                                                    <p class="couponTag" v-if="pros.product && pros.product.couponsLogo">优惠券</p>
+                                                    <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
                                                     <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
-                                                    <template v-if="pros.product && pros.product.svipProductFlag === 1">
+                                                    <template v-if="pros.svipProductFlag === 1">
                                                         <div class="svip-tag">
                                                             <div class="svip-icon">SVIP</div>
                                                             <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
                                                             <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
-                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
-                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
-                                                        GLOBAL_VIP_FLAG === 1">
-                                                                <template v-if="showVipPriceTag(pros.product)">
+                                                    (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                    (GLOBAL_USER_IDENTITY === 3 && pros.shopId==GLOBAL_SHOP_ID) ||
+                                                    GLOBAL_VIP_FLAG === 1">
+                                                                <template v-if="showVipPriceTag(pros)">
                                                                     <div class="svip-price">
-                                                                        <span v-html="pros.product && pros.product.svipPriceTag"></span>
+                                                                        <span v-html="pros.svipPriceTag"></span>
                                                                     </div>
                                                                 </template>
                                                             </template>
                                                         </div>
                                                     </template>
                                                     <template v-else>
-                                                        <p class="listTag" v-if="pros.product.actStatus == 1 && pros.product.promotions">
-                                                            <span v-text="pros.product.promotions && pros.product.promotions.name"></span>
+                                                        <p class="listTag"
+                                                           v-if="pros.actStatus ==1 && pros.promotions">
+                                                            <span v-text="pros.promotions.name"></span>
                                                         </p>
                                                     </template>
                                                 </div>
                                                 <div class="main_price_login">
                                                     <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
-                                                    <template v-if="pros.product && pros.product.priceFlag == 1">
+                                                    <template v-if="pros.priceFlag == 1">
                                                         <em class="price_grade_club"><span>￥</span>价格未公开</em>
                                                     </template>
                                                     <!--机构价仅会员可见 && 用户是普通机构-->
-                                                    <template v-else-if="pros.product && pros.product.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                    <template
+                                                            v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
                                                         <em class="price_grade_club"><span>￥</span>会员可见</em>
                                                     </template>
                                                     <!--机构价仅医美机构可见-->
-                                                    <template v-else-if="pros.product && pros.product.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                    <template
+                                                            v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
                                                         <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
                                                     </template>
                                                     <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
                                                     <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
-                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
-                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
-                                                        GLOBAL_VIP_FLAG === 1">
-                                                        <div class="main_price_show" :class="{none: showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)}">
+                                                    (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                    (GLOBAL_USER_IDENTITY === 3 && pros.shopId==GLOBAL_SHOP_ID) ||
+                                                    GLOBAL_VIP_FLAG === 1">
+                                                        <div class="main_price_show"
+                                                             :class="{none: showVipPriceTag(pros) || PromotionsFormat(pros.promotions)}">
                                                             ￥
-                                                            <span class="price_num" v-if="showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)" v-text="filtersFormat(pros.product.originalPrice)"></span>
-                                                            <span class="price_num" v-else v-text="filtersFormat(pros.product.price)"></span>
+                                                            <span class="price_num"
+                                                                  v-if="showVipPriceTag(pros) || PromotionsFormat(pros.promotions)"
+                                                                  v-text="filtersFormat(pros.originalPrice)">
+                                                            </span>
+                                                            <span class="price_num"
+                                                                  v-else
+                                                                  v-text="filtersFormat(pros.price)">
+                                                            </span>
                                                         </div>
                                                     </template>
                                                     <template v-else>
                                                         <!--供应商除自己的商品外，也显示价格等级-->
                                                         <em class="price_grade_shop">
                                                             <span class="bold">￥</span>
-                                                            <i :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
+                                                            <i :class="'icon mIcon price_grade_'+pros.priceGrade"></i>
                                                         </em>
                                                     </template>
                                                 </div>
@@ -312,395 +665,343 @@
                                             <template v-else>
                                                 <div class="main_price_login">
                                                     <div class="price_text_tag"></div>
-                                                    <div v-if="pros.product.detailTalkFlag==2" class="main_price_show">￥价格祥聊</div>
+                                                    <div v-if="pros.detailTalkFlag==2"
+                                                         class="main_price_show">￥价格祥聊
+                                                    </div>
                                                     <div v-else class="main_price_show">
-                                                        ￥<span class="price_num" v-text="filtersFormat(pros.product.price)"></span>
+                                                        ￥<span class="price_num"
+                                                               v-text="filtersFormat(pros.price)"></span>
                                                     </div>
                                                 </div>
                                             </template>
-        </div>
-    </div>
-    </a>
-    </div>
-    <div class="swiper-pagination swiper-pagination-floor hot mfc " :data-id="floor.floorImageList4.length"></div>
-    </div>
-    </div>
-    <!--楼层-->
-    <div class="section_page section_page_user" v-for="(floor,index) in homePageFloor">
-        <template v-if="floor.floorContent">
-                            <div class="section_page_title" >
-                                <h1 :data-id="index+1" v-text="floor.title"></h1>
-                                <p v-text="floor.detail"></p>
+                                        </div>
+                                    </div>
+                                </a>
                             </div>
-                            <div :class="floor.floorContent.templateType == 8 ? 'swiper-container-floor mySwiperSlide' : ''"
-                                 :id="floor.floorContent.templateType == 8 ? 'recommendBox' : ''"
-                            >
-                                <div :class="floor.floorContent.templateType == 8 ?
-                                    'swiper-wrapper section_page_main type_08 recommendBox-wrapper clear mfw section_'+floor.floorContent.templateType :
-                                    'section_page_main clear mfw section_'+floor.floorContent.templateType"
-                                >
-                                    <!-- 广告图 -->
-                                    <template v-if="floor.floorContent.templateType == 1 ||
-                                                    floor.floorContent.templateType == 2 ||
-                                                    floor.floorContent.templateType == 3 ||
-                                                    floor.floorContent.templateType == 4 ||
-                                                    floor.floorContent.templateType == 5"
-                                    >
-                                        <a :href="floor.floorContent.adsLink1 ? floor.floorContent.adsLink1 : 'javascript:;'"
-                                           :target="floor.floorContent.adsLink1 ? '_blank' : '_self'"
-                                           class="page_main_item ad_01"
-                                        >
-                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage1" alt="" class="page_main_item_adv">
-                                            <img v-else :src="floor.floorContent.appletsAdsImage1" alt="" class="page_main_item_adv">
-                                        </a>
-                                    </template>
-        <template v-if="floor.floorContent.templateType == 2 ||
-                                                    floor.floorContent.templateType == 3 ||
-                                                    floor.floorContent.templateType == 4"
-                                    >
-                                        <a :href="floor.floorContent.adsLink2 ? floor.floorContent.adsLink2 : 'javascript:;'"
-                                           :target="floor.floorContent.adsLink2 ? '_blank' : '_self'"
-                                           class="page_main_item ad_02"
-                                        >
-                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage2" alt="" class="page_main_item_adv">
-                                            <img v-else :src="floor.floorContent.appletsAdsImage2" alt="" class="page_main_item_adv">
-                                        </a>
-                                    </template>
-        <template v-if="floor.floorContent.templateType == 4">
-                                        <a :href="floor.floorContent.adsLink3 ? floor.floorContent.adsLink3 : 'javascript:;'"
-                                           :target="floor.floorContent.adsLink3 ? '_blank' : '_self'"
-                                           class="page_main_item ad_03"
-                                        >
-                                            <img v-if="isPC" :src="floor.floorContent.pcAdsImage3" alt="" class="page_main_item_adv">
-                                            <img v-else :src="floor.floorContent.appletsAdsImage3" alt="" class="page_main_item_adv">
-                                        </a>
-                                    </template>
-        <!-- 商品/图片 列表 -->
-        <a :href="pros.link" class="page_main_item ad_04 swiper-slide" target="_blank" v-for="pros in floor.floorImageList">
-            <img class="page_main_image" src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
-            <div class="page_main_type" v-if="pros.product && pros.product.productType && pros.product.productType === 2">医疗器械</div>
-            <div class="page_main_tag" v-if="pros.listType == 2">
-                <p v-text="pros.label"></p>
-            </div>
-            <div class="page_main_text">
-                <span class="tag" v-if="pros.beautyActFlag == 1">美博会</span>
-                <span v-text="pros.name"></span>
-            </div>
-            <div class="page_main_price" v-if="pros.listType == 1">
-                <!-- 商品价格 -->
-                <div class="main_price_text">
-                    <!-- 正常商品 -->
-                    <template v-if="pros.product.productCategory == 1">
-                                                    <div class="price_text_tag">
-                                                        <p class="couponTag" v-if="pros.product.couponsLogo">优惠券</p>
-                                                        <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
-                                                        <template v-if="pros.product.svipProductFlag === 1">
-                                                            <div class="svip-tag">
-                                                                <div class="svip-icon">SVIP</div>
-                                                                <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
-                                                                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
-                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
-                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
-                                                        GLOBAL_VIP_FLAG === 1">
-                                                                    <template v-if="showVipPriceTag(pros.product)">
-                                                                        <div class="svip-price">
-                                                                            <span v-html="pros.product.svipPriceTag"></span>
-                                                                        </div>
-                                                                    </template>
-                    </template>
+                        </div>
+                    </div>
                 </div>
-                </template>
-                <template v-else>
-                                                            <p class="listTag" v-if="pros.product.actStatus ==1 && pros.product.promotions">
-                                                                <span v-text="pros.product.promotions.name"></span>
-                                                            </p>
-                                                        </template>
-            </div>
-            <div class="main_price_login">
-                <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
-                <template v-if="pros.product.priceFlag == 1">
-                                                            <em class="price_grade_club"><span>￥</span>价格未公开</em>
-                                                        </template>
-                <!--机构价仅会员可见 && 用户是普通机构-->
-                <template v-else-if="pros.product.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
-                                                            <em class="price_grade_club"><span>￥</span>会员可见</em>
-                                                        </template>
-                <!--机构价仅医美机构可见-->
-                <template v-else-if="pros.product.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
-                                                            <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
-                                                        </template>
-                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
-                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
-                                                        (pros.product.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
-                                                        (GLOBAL_USER_IDENTITY === 3 && pros.product.shopId==GLOBAL_SHOP_ID) ||
-                                                        GLOBAL_VIP_FLAG === 1">
-                                                            <div class="main_price_show" :class="{none: showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)}">
-                                                                ￥
-                                                                <span class="price_num" v-if="showVipPriceTag(pros.product) || PromotionsFormat(pros.product.promotions)" v-text="filtersFormat(pros.product.originalPrice)"></span>
-                                                                <span class="price_num" v-else v-text="filtersFormat(pros.product.price)"></span>
-                                                            </div>
-                                                        </template>
-                <template v-else>
-                                                            <!--供应商除自己的商品外，也显示价格等级-->
-                                                            <em class="price_grade_shop">
-                                                                <span class="bold">￥</span><i :class="'icon mIcon price_grade_'+pros.product.priceGrade"></i>
-                                                            </em>
-                                                        </template>
-            </div>
             </template>
-            <!-- 二手商品 -->
             <template v-else>
-                                                    <div class="main_price_login">
-                                                        <div class="price_text_tag"></div>
-                                                        <div v-if="pros.product.detailTalkFlag==2" class="main_price_show">￥价格祥聊</div>
-                                                        <div v-else class="main_price_show">
-                                                            ￥<span class="price_num" v-text="filtersFormat(pros.product.price)"></span>
-                                                        </div>
-                                                    </div>
-                                                </template>
-    </div>
-    </div>
-    </a>
-    <!-- 广告图 -->
-    <div v-if="floor.floorContent.templateType == 6">
-        <a :href="floor.floorContent.adsLink1 ? floor.floorContent.adsLink1 : 'javascript:;'" :target="floor.floorContent.adsLink1 ? '_blank' : '_self' " class="page_main_item ad_01">
-            <img v-if="isPC" :src="floor.floorContent.pcAdsImage1" alt="" class="page_main_item_adv">
-            <img v-else :src="floor.floorContent.appletsAdsImage1" alt="" class="page_main_item_adv">
-        </a>
-    </div>
-    </div>
-    <div v-if="floor.floorContent.templateType == 8" class="swiper-pagination swiper-pagination-floor mfc" :data-id="floor.floorImageList.length">
-    </div>
-    </div>
-    <div class="section_page_more" :data-id="floor.floorContent.templateType" :data-size="floor.floorImageList.length">
-        <div class="more" @click="showMoreItem($event)"> <i class="icon mIcon"></i>查看更多</div>
-    </div>
-    </template>
-    </div>
-    </template>
-    <template v-else>
-                    <!--静态化固定楼层-->
-                    <div class="section_page section_page_user hot" th:each="floor,stat : ${floorJson.get('pageFloorList')}">
-                        <div class="section_page_title">
-                            <h1 th:text="${floor.get('title')}" data-id="0"></h1>
-                            <p th:text="${floor.get('detail')}"></p>
-                            <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
-                        </div>
-                        <div class="hotList swiper-container-floor mySwiper" id="recommendBox">
-                            <div class="section_page_main type_08 swiper-wrapper  recommendBox-wrapperHot clear mfw section_8">
-                                <!-- 商品/图片 列表 -->
-                                <th:block th:each="pros : ${floor.get('floorImageList4')}"  th:object="${pros}">
-                                    <a href="javascript:void(0)"  onclick="handleHotStatistics($(this))" th:attr="data-href=*{link}"  class="swiper-slide page_main_item hot ad_04">
-                                        <th:block th:if="${pros.get('product')}!=null" th:object="${pros.get('product')}">
-                                            <img class="page_main_image" src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{name}">
-                                        </th:block>
-                                        <th:block th:if="${pros.get('product')}!=null" th:object="${pros.get('product')}">
-                                            <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
-                                        </th:block>
-                                        <div class="page_main_text">
-                                            <th:block th:if="${pros.containsKey('product')}">
-                                                <span class="tag" th:if="${pros.get('product').containsKey('beautyActFlag')} and ${pros.get('product').get('beautyActFlag')}==1">美博会</span>
-                                            </th:block>
-                                            <span th:text="${pros.get('product').get('name')}"></span>
+                <!--静态化运营楼层-->
+                <div class="section-page-content">
+                    <div class="section-page-item" th:each="floor,stat : ${floorJson.get('zones')}">
+                            <div class="section-page-top">
+                                <div class="section-page-title">
+                                    <h1 th:text="${floor.get('floorTitle')}" th:attr="data-id=${stat.index+1}"></h1>
+                                    <div class="page-bottom-tabs" v-if="!isPC">
+                                        <div class="page-bottom-tabs-left">
+                                            <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=1'" class="bot-tabs-item" target="_blank">产品</a>
+                                            <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=2'" class="bot-tabs-item" target="_blank">仪器</a>
+                                            <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=3'" class="bot-tabs-item" target="_blank">耗材配件</a>
                                         </div>
-                                        <div class="page_main_price">
-                                            <th:block th:if="${pros.get('product')}!=null" th:object="${pros.get('product')}">
+                                        <div class="page-bottom-tabs-right">
+                                            <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}" target="_blank">更多></a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="section-page-banner">
+                                    <el-carousel trigger="click" :autoplay="false" arrow="never" height="240px">
+                                        <el-carousel-item th:each="images : ${floor.get('imageList')}" th:object="${images}">
+                                            <a class="page-banner-item" th:href="*{link}" >
+                                                <img class="page_main_image" th:src="*{image}"/>
+                                            </a>
+                                        </el-carousel-item>
+                                    </el-carousel>
+                                </div>
+                            </div>
+                            <div class="section-page-bottom">
+                                <div class="page-bottom-tabs">
+                                    <div class="page-bottom-tabs-left">
+                                        <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=1'" class="bot-tabs-item" target="_blank">产品</a>
+                                        <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=2'" class="bot-tabs-item" target="_blank">仪器</a>
+                                        <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}+'&typeSort=3'" class="bot-tabs-item" target="_blank">耗材配件</a>
+                                    </div>
+                                    <div class="page-bottom-tabs-right">
+                                        <a th:href="'/product/floor.html?zoneId='+${floor.get('id')}" target="_blank">更多></a>
+                                    </div>
+                                </div>
+                                <div class="page-bottom-main">
+                                    <th:block th:each="pros : ${floor.get('products')}" th:object="${pros}">
+                                        <a th:href="'/product-'+${pros.get('productId')}+'.html'" class="bottom-main-item" target="_blank">
+                                            <img class="page_main_image" src="/img/base/placeholder.png"
+                                                 th:attr="data-original=*{mainImage}" th:alt="*{name}">
+                                            <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                                            <div class="page_main_text">
+                                                <span th:text="${pros.get('name')}"></span>
+                                            </div>
+                                            <div class="page_main_price">
                                                 <!-- 商品价格 -->
                                                 <div th:attr="class=*{'main_price_text product_'+productId}, data-id=*{productId}">
-                                                    <!-- 正常商品 -->
-                                                    <th:block th:if="*{productCategory}==1">
-                                                        <div class="price_text_tag">
-                                                            <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
-                                                            <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
-                                                            <th:block th:if="${svipProductFlag}!=null">
+                                                        <!-- 正常商品 -->
+                                                        <th:block th:if="*{productCategory}==1">
+                                                            <div class="price_text_tag">
+                                                                <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
+                                                                <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
                                                                 <div class="svip-tag" th:if="*{svipProductFlag}==1">
                                                                     <div class="svip-icon">SVIP</div>
                                                                 </div>
-                                                            </th:block>
-                                                            <p class="listTag" th:if="*{actStatus}==1 and ${pros.get('product').get('promotions')}!=null">
-                                                                <template th:text="*{promotions.name}"></template>
-    <th:block th:if="*{promotions.type}==1 and *{promotions.mode}==1">
-        <!--单品优惠:优惠价-->
-        <span class="price_unit" style="display:none;">:￥</span><span class="price_num"></span>
-    </th:block>
-    </p>
-    </div>
-    <div class="main_price_none">
-        <em class="price_grade"><span class="bold">￥</span><i th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i></em>
-    </div>
-    </th:block>
-    <!-- 二手商品 -->
-    <th:block th:if="*{productCategory}!=1">
-        <div class="main_price_none sec">
-            <em class="price_grade"><span>￥</span>登录可见</em>
-        </div>
-    </th:block>
-    </div>
-    </th:block>
-    </div>
-    </a>
-    </th:block>
-    </div>
-    <div class="swiper-pagination swiper-pagination-floor hot mfc" th:attr="data-id=${floor.get('floorImageList4').size}"></div>
-    </div>
-    </div>
-    <!--静态化普通楼层-->
-    <div class="section_page" th:each="floor,stat : ${floorJson.get('homePageFloor')}">
-        <th:block th:if="${floor.get('floorContent')}!=null">
-            <div class="section_page_title">
-                <h1 th:text="${floor.get('title')}" th:attr="data-id=${stat.index+1}"></h1>
-                <p th:text="${floor.get('detail')}"></p>
-            </div>
-            <th:block th:object="${floor.get('floorContent')}">
-                <div th:class="*{templateType}==8? 'swiper-container-floor mySwiperSlide' : ''" th:id="*{templateType}==8? 'recommendBox' : ''">
-                    <div th:class="*{templateType}==8? *{'section_page_main type_08 swiper-wrapper recommendBox-wrapper clear mfw section_'+templateType} : *{'section_page_main clear mfw section_'+templateType}">
-                        <!-- 广告图 -->
-                        <th:block th:if="*{templateType}==1 or *{templateType}==2 or *{templateType}==3 or *{templateType}==4 or *{templateType}==5">
-                            <a th:href="*{#strings.isEmpty(adsLink1)}? 'javascript:;' : *{adsLink1}" th:attr="target=(*{#strings.isEmpty(adsLink1)} ? '_self' : '_blank')" class="page_main_item ad_01">
-                                <img v-if="isPC" th:src="*{pcAdsImage1}" alt="" class="page_main_item_adv">
-                                <img v-else th:src="*{appletsAdsImage1}" alt="" class="page_main_item_adv">
-                            </a>
-                        </th:block>
-                        <th:block th:if="*{templateType}==2 or *{templateType}==3 or *{templateType}==4">
-                            <a th:href="*{#strings.isEmpty(adsLink2)}? 'javascript:;' : *{adsLink2}" th:attr="target=(*{#strings.isEmpty(adsLink2)} ? '_self' : '_blank')" class="page_main_item ad_02">
-                                <img v-if="isPC" th:src="*{pcAdsImage2}" alt="" class="page_main_item_adv">
-                                <img v-else th:src="*{appletsAdsImage2}" alt="" class="page_main_item_adv">
-                            </a>
-                        </th:block>
-                        <th:block th:if="*{templateType}==4">
-                            <a th:href="*{#strings.isEmpty(adsLink3)}? 'javascript:;' : *{adsLink3}" th:attr="target=(*{#strings.isEmpty(adsLink3)} ? '_self' : '_blank')" class="page_main_item ad_03">
-                                <img v-if="isPC" th:src="*{pcAdsImage3}" alt="" class="page_main_item_adv">
-                                <img v-else th:src="*{appletsAdsImage3}" alt="" class="page_main_item_adv">
-                            </a>
-                        </th:block>
-                        <!-- 商品/图片 列表 -->
-                        <th:block th:each="pros : ${floor.get('floorImageList')}" th:object="${pros}">
-                            <a th:href="*{link}" class="page_main_item ad_04 swiper-slide" target="_blank">
-                                <img class="page_main_image" src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{name}">
-                                <th:block th:if="${pros.get('product')}!=null" th:object="${pros.get('product')}">
-                                    <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
-                                </th:block>
-                                <div class="page_main_tag" th:if="*{listType}==2">
-                                    <p th:text="*{label}"></p>
-                                </div>
-                                <div class="page_main_text">
-                                    <th:block th:if="${pros.containsKey('product')}">
-                                        <span class="tag" th:if="${pros.get('product').containsKey('beautyActFlag')} and ${pros.get('product').get('beautyActFlag')}==1">美博会</span>
-                                    </th:block>
-                                    <span th:text="${pros.get('name')}"></span>
-                                </div>
-                                <div class="page_main_price" th:if="*{listType}==1">
-                                    <th:block th:if="${pros.get('product')}!=null" th:object="${pros.get('product')}">
-                                        <!-- 商品价格 -->
-                                        <div th:attr="class=*{'main_price_text product_'+productId}, data-id=*{productId}">
-                                            <!-- 正常商品 -->
-                                            <th:block th:if="*{productCategory}==1">
-                                                <div class="price_text_tag">
-                                                    <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
-                                                    <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
-                                                    <div class="svip-tag" th:if="*{svipProductFlag}==1">
-                                                        <div class="svip-icon">SVIP</div>
-                                                    </div>
-                                                    <p class="listTag" th:if="*{actStatus}==1 and ${pros.get('product').get('promotions')}!=null">
-                                                        <template th:text="*{promotions.name}"></template>
-                                                        <th:block th:if="*{promotions.type}==1 and *{promotions.mode}==1">
-                                                            <!--单品优惠:优惠价-->
-                                                            <span class="price_unit" style="display:none;">:￥</span><span class="price_num"></span>
+                                                                <p class="listTag"
+                                                                   th:if="*{actStatus}==1 and ${pros.get('promotions')}!=null">
+                                                                    <span th:text="*{promotions.name}"></span>
+                                                                    <th:block
+                                                                            th:if="*{promotions.type}==1 and *{promotions.mode}==1">
+                                                                        <!--单品优惠:优惠价-->
+                                                                        <span class="price_unit" style="display:none;">:￥</span>
+                                                                        <span class="price_num"></span>
+                                                                    </th:block>
+                                                                </p>
+                                                            </div>
+                                                            <div class="main_price_none">
+                                                                <em class="price_grade">
+                                                                    <span class="bold">￥</span>
+                                                                    <i th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i>
+                                                                </em>
+                                                            </div>
                                                         </th:block>
-                                                    </p>
-                                                </div>
-                                                <div class="main_price_none">
-                                                    <em class="price_grade"><span class="bold">￥</span><i th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i></em>
-                                                </div>
-                                            </th:block>
-                                            <!-- 二手商品 -->
-                                            <th:block th:if="*{productCategory}!=1">
-                                                <div class="main_price_none sec">
-                                                    <em class="price_grade"><span>￥</span>登录可见</em>
-                                                </div>
-                                            </th:block>
-                                        </div>
+                                                        <!-- 二手商品 -->
+                                                        <th:block th:if="*{productCategory}!=1">
+                                                            <div class="main_price_none sec">
+                                                                <em class="price_grade"><span>￥</span>登录可见</em>
+                                                            </div>
+                                                        </th:block>
+                                                    </div>
+                                            </div>
+                                        </a>
                                     </th:block>
                                 </div>
-                            </a>
-                        </th:block>
-                        <!-- 广告图 -->
-                        <th:block th:if="*{templateType}==6">
-                            <a th:href="*{#strings.isEmpty(adsLink1)}? 'javascript:;' : *{adsLink1}" th:attr="target=(*{#strings.isEmpty(adsLink1)} ? '_self' : '_blank')" class="page_main_item ad_01">
-                                <img v-if="isPC" th:src="*{pcAdsImage1}" alt="" class="page_main_item_adv">
-                                <img v-else th:src="*{appletsAdsImage1}" alt="" class="page_main_item_adv">
-                            </a>
-                        </th:block>
+                            </div>
                     </div>
-                    <div th:if="*{templateType}==8" class="swiper-pagination swiper-pagination-floor mfc" th:attr="data-id=${floor.get('floorImageList').size}"></div>
-                </div>
-                <div class="section_page_more" th:attr="data-id=*{templateType}, data-size=${floor.get('floorImageList').size}">
-                    <div class="more" @click="showMoreItem($event)"> <i class="icon mIcon"></i>查看更多</div>
                 </div>
-            </th:block>
-        </th:block>
-    </div>
-    </template>
-    <div class="section_page">
-        <div class="section_page_title">
-            <h1 data-id="99">优质供应商</h1>
-            <p>采美正品联盟 质量保证</p>
-        </div>
-        <div class="section_page_bottom" th:object="${floorJson.get('supplierImage')}">
-            <a th:href="*{#strings.isEmpty(wwwLink)}? 'javascript:;' : *{wwwLink}" th:attr="target=(*{#strings.isEmpty(wwwLink)} ? '_self' : '_blank')" class="page_main_li ad_01">
-                <img th:src="*{wwwImage}" alt="" class="page_main_item_adv">
-            </a>
-            <template th:each="shop : ${floorJson.get('supplierImage').get('qualitySupplierList')}" th:object="${shop}">
-                            <a th:href="*{link}" target="_blank" class="page_main_li ad_02">
-                                <img class="page_main_logo" src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{supplierName}">
-                                <div class="page_main_name" th:text="*{supplierName}"></div>
-                            </a>
-                        </template>
-        </div>
-    </div>
-    </div>
-    </div>
-    </div>
-    <!--右侧边栏导航-->
-    <div id="sideNav" v-if="isPC">
-        <div class="item">
-            <a class="item-sideNav" href="javascript:void(0);" v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value"></a>
+            </template>
         </div>
     </div>
-    <!--新用户优惠券弹窗-->
-    <div id="meibohui" class="Popup" v-if="popupFlag" :class="popupFlag ? 'show' :'' ">
-        <div class="show_popup">
-            <div class="bg_icon" @click="closePopup"><i class="icon mIcon"></i></div>
-            <div class="bg_img" @click="popupPage">
-                <img :src="centerImage.image" v-if="isPC">
-                <img :src="centerImage.crmImage" v-else>
+    <!--首页运营供应商-->
+    <div class="section_container main-content clear">
+        <div class="inner">
+            <div class="section-shop-content">
+                <div class="section-shop-title">
+                    <h1>优选供应商<span>采美正品联盟,质量保证</span></h1>
+                </div>
+                <div class="section-shop-main">
+                    <el-carousel :autoplay="true" :interval="8000" height="288px" indicator-position="none">
+                        <el-carousel-item v-for="(supplier, index) in supplierList" :key="supplier">
+                            <div class="supplier-list">
+                                <div class="supplier-list-item" v-for="(sup, o) in supplier" :key="o">
+                                    <div class="supplier-list-top">
+                                        <div class="supplier-top-logo">
+                                            <img :src="sup.image" alt="">
+                                        </div>
+                                        <div class="supplier-top-name">
+                                            <p v-text="sup.supplierName"></p>
+                                        </div>
+                                    </div>
+                                    <div class="supplier-list-mid">
+                                        <div class="list-mid-item" v-for="(pros, prIndex) in sup.products"
+                                             :key="prIndex">
+                                            <a :href="'/product-'+pros.productId+'.html'">
+                                                <img src="/img/base/placeholder.png" :data-original="pros.mainImage"
+                                                     :alt="pros.name">
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="supplier-list-bot">
+                                        <a :href="sup.link" target="_blank">进店</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
             </div>
+            <!--            <div class="section_page">-->
+            <!--                <div class="section_page_title">-->
+            <!--                    <h1 data-id="99">优质供应商</h1>-->
+            <!--                    <p>采美正品联盟 质量保证</p>-->
+            <!--                </div>-->
+            <!--                <div class="section_page_bottom" th:object="${floorJson.get('supplierImage')}">-->
+            <!--                    <a th:href="*{#strings.isEmpty(wwwLink)}? 'javascript:;' : *{wwwLink}"-->
+            <!--                       th:attr="target=(*{#strings.isEmpty(wwwLink)} ? '_self' : '_blank')"-->
+            <!--                       class="page_main_li ad_01">-->
+            <!--                        <img th:src="*{wwwImage}" alt="" class="page_main_item_adv">-->
+            <!--                    </a>-->
+            <!--                    <template th:each="shop : ${floorJson.get('supplierImage').get('qualitySupplierList')}"-->
+            <!--                              th:object="${shop}">-->
+            <!--                        <a th:href="*{link}" target="_blank" class="page_main_li ad_02">-->
+            <!--                            <img class="page_main_logo" src="/img/base/placeholder.png"-->
+            <!--                                 th:attr="data-original=*{image}" th:alt="*{supplierName}">-->
+            <!--                            <div class="page_main_name" th:text="*{supplierName}"></div>-->
+            <!--                        </a>-->
+            <!--                    </template>-->
+            <!--                </div>-->
+            <!--            </div>-->
         </div>
     </div>
-    <!--底部注册看价格提醒-->
-    <div class="cm-regist-popup" :class="isCmPopup ? 'show' : 'none'">
-        <div class="cm-rigist-img">
-            <img src="/img/base/icon-zhuce@2x.png" alt="注册看价格">
-            <p>注册认证看价格</p>
-        </div>
-        <div class="cm-rigist-btn">
-            <a href="/club/register.html">立即注册</a>
-            <div class="cm-rigist-close" @click="handleHidePopup">
-                <i class="icon-close"></i>"
+    <!--首页运营推荐商品-->
+    <div class="section_container main-content clear">
+        <div class="inner">
+            <div class="section-floor-content clear">
+                <div class="section-floor-title">
+                    <h1>为您推荐<span>海量货源,实时推荐</span></h1>
+                </div>
+                <template v-if="userId > 0">
+                    <div class="section-floor-main clear">
+                        <a :href="'/product-'+pros.productId+'.html'"
+                           class="floor-main-item"
+                           target="_blank"
+                           v-for="pros in recommendList">
+                            <img class="page_main_image" src="/img/base/placeholder.png" :data-original="pros.image"
+                                 :alt="pros.name">
+                            <div class="page_main_type" v-if="pros && pros.productType && pros.productType === 2">
+                                医疗器械
+                            </div>
+                            <div class="page_main_text">
+                                <span v-text="pros.name"></span>
+                            </div>
+                            <div class="page_main_price">
+                                <!-- 商品价格 -->
+                                <div class="main_price_text">
+                                    <!-- 正常商品 -->
+                                    <div class="price_text_tag">
+                                        <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                                        <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                        <template v-if="pros.svipProductFlag === 1">
+                                            <div class="svip-tag">
+                                                <div class="svip-icon">SVIP</div>
+                                                <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
+                                                <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                    (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                    (GLOBAL_USER_IDENTITY === 3 && pros.shopId==GLOBAL_SHOP_ID) ||
+                                                    GLOBAL_VIP_FLAG === 1">
+                                                    <template v-if="showVipPriceTag(pros)">
+                                                        <div class="svip-price">
+                                                            <span v-html="pros.svipPriceTag"></span>
+                                                        </div>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <p class="listTag"
+                                               v-if="pros.actStatus ==1 && pros.promotions">
+                                                <span v-text="pros.promotions.name"></span>
+                                            </p>
+                                        </template>
+                                    </div>
+                                    <div class="main_price_login">
+                                        <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
+                                        <template v-if="pros.priceFlag == 1">
+                                            <em class="price_grade_club"><span>￥</span>价格未公开</em>
+                                        </template>
+                                        <!--机构价仅会员可见 && 用户是普通机构-->
+                                        <template
+                                                v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                            <em class="price_grade_club"><span>￥</span>会员可见</em>
+                                        </template>
+                                        <!--机构价仅医美机构可见-->
+                                        <template v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                            <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
+                                        </template>
+                                        <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                        <template v-else-if="GLOBAL_USER_IDENTITY === 2 ||
+                                                    (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) ||
+                                                    (GLOBAL_USER_IDENTITY === 3 && pros.shopId==GLOBAL_SHOP_ID) ||
+                                                    GLOBAL_VIP_FLAG === 1">
+                                            <div class="main_price_show"
+                                                 :class="{none: showVipPriceTag(pros) || PromotionsFormat(pros.promotions)}">
+                                                ￥
+                                                <span class="price_num"
+                                                      v-if="showVipPriceTag(pros) || PromotionsFormat(pros.promotions)"
+                                                      v-text="filtersFormat(pros.originalPrice)">
+                                            </span>
+                                                <span class="price_num"
+                                                      v-else
+                                                      v-text="filtersFormat(pros.price)">
+                                            </span>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--供应商除自己的商品外，也显示价格等级-->
+                                            <em class="price_grade_shop">
+                                                <span class="bold">￥</span>
+                                                <i :class="'icon mIcon price_grade_'+pros.priceGrade"></i>
+                                            </em>
+                                        </template>
+                                    </div>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </template>
+                <template v-else>
+                    <!--静态商品推荐-->
+                    <div class="section-floor-main clear">
+                        <a th:href="'/product-'+${pros.get('productId')}+'.html'"
+                           class="floor-main-item"
+                           target="_blank"
+                           th:each="pros : ${floorJson.get('recommendProducts')}" th:object="${pros}">
+                            <img class="page_main_image" src="/img/base/placeholder.png" th:attr="data-original=*{image}" th:alt="*{name}">
+                            <div class="page_main_type" th:if="*{productType}==2">医疗器械</div>
+                            <div class="page_main_text"><span th:text="*{name}"></span></div>
+                            <div class="page_main_price">
+                                <!-- 商品价格 -->
+                                <div th:attr="class=*{'main_price_text product_'+productId}, data-id=*{productId}">
+                                    <!-- 正常商品 -->
+                                    <th:block th:if="*{productCategory}==1">
+                                        <div class="price_text_tag">
+                                            <p class="couponTag" th:if="*{couponsLogo}">优惠券</p>
+                                            <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                            <div class="svip-tag" th:if="*{svipProductFlag}==1">
+                                                <div class="svip-icon">SVIP</div>
+                                            </div>
+                                            <p class="listTag"
+                                               th:if="*{actStatus}==1 and ${pros.get('promotions')}!=null">
+                                                <span th:text="*{promotions.name}"></span>
+                                                <th:block
+                                                        th:if="*{promotions.type}==1 and *{promotions.mode}==1">
+                                                    <!--单品优惠:优惠价-->
+                                                    <span class="price_unit" style="display:none;">:￥</span>
+                                                    <span class="price_num"></span>
+                                                </th:block>
+                                            </p>
+                                        </div>
+                                        <div class="main_price_none">
+                                            <em class="price_grade">
+                                                <span class="bold">￥</span>
+                                                <i th:attr="class=*{'icon mIcon price_grade_'+priceGrade}"></i>
+                                            </em>
+                                        </div>
+                                    </th:block>
+                                    <!-- 二手商品 -->
+                                    <th:block th:if="*{productCategory}!=1">
+                                        <div class="main_price_none sec">
+                                            <em class="price_grade"><span>￥</span>登录可见</em>
+                                        </div>
+                                    </th:block>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </template>
             </div>
         </div>
     </div>
-    </div>
-    <!-- 引入底部 -->
-    <template th:replace="components/footer"></template>
-    <template th:replace="components/foot-link"></template>
-    <script type="text/javascript" src="/lib/vant-ui/vant.min.js"></script>
-    <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></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/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
-    <script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmsMixins.js(v=${version})}"></script>
-    <script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-    <script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script type="text/javascript" src="/lib/vant-ui/vant.min.js"></script>
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></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/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/beautyArchive.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmsMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
 </body>
 
 </html>

src/main/resources/templates/product/product-floor.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title></title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/product/product-floor.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 商品列表 -->
+<div id="productList" v-cloak>
+  <div v-if="listLoading" class="loading">
+    <img src="/img/base/loading.gif">
+  </div>
+  <template v-else>
+    <div class="product-banner clear">
+      <div class="product-banner-bot">
+        <div class="inner">
+          <div class="product-banner-title">
+            <h1 v-text="zone.floorTitle"></h1>
+          </div>
+          <div id="productHotBanner" class="swiper-container">
+            <el-carousel :interval="4000" arrow="never" height="400px">
+              <el-carousel-item v-for="item in imageList" :key="item">
+                <a class="page-banner-item" :href="item.link">
+                  <img :src="item.image" alt="">
+                </a>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </div>
+      </div>
+      <div class="product-banner-top">
+        <div class="inner">
+          <div class="top-tabs">
+            <div class="top-tabs-item" :class="tabsIndex === 0 ? 'active': '' " @click="handleClickTabS(0)">全部</div>
+            <div class="top-tabs-item" :class="tabsIndex === 1 ? 'active': '' " @click="handleClickTabS(1)">产品</div>
+            <div class="top-tabs-item" :class="tabsIndex === 2 ? 'active': '' " @click="handleClickTabS(2)">仪器</div>
+            <div class="top-tabs-item" :class="tabsIndex === 3 ? 'active': '' " @click="handleClickTabS(3)">配件耗材</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--数据为空-->
+    <div v-if="isListEmpty" class="empty">
+      <img src="/img/common/empty.png">
+      <div class="msg"><p>暂无数据~</p></div>
+    </div>
+    <template v-else>
+      <!--商品列表-->
+      <ul class="productList clear mfw">
+        <li class="productItem " v-for="p in listData">
+          <div class="page_main_type" v-if="p.productType === 2">医疗器械</div>
+          <a class="image" :href="'/product-'+p.productId+'-5.html'">
+            <img :src="p.mainImage" :alt="p.name">
+            <p class="name" v-html="p.name"></p>
+            <div class="price">
+              <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+              <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                <div class="price_text_tag clear">
+                  <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                  <template v-if="p.svipProductFlag === 1">
+                    <div class="svip-tag">
+                      <div class="svip-icon">SVIP</div>
+                      <template v-if="showVipPriceTag(p)">
+                        <div class="svip-price">
+                          <span v-html="p.svipPriceTag"></span>
+                        </div>
+                      </template>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}
+                      <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
+                    </p>
+                  </template>
+                </div>
+                <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                <div class="main_price_unde" v-if="p.priceFlag==1">￥价格未公开</div>
+                <!--机构价仅会员可见 && 用户是普通机构-->
+                <div class="main_price_unde" v-else-if="p.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                  ￥会员可见
+                </div>
+                <!--机构价仅会员可见 && 用户是普通机构-->
+                <div class="main_price_unde" v-else-if="p.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                  ￥仅医美机构可见
+                </div>
+                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                <template
+                        v-else-if="GLOBAL_USER_IDENTITY === 2 || (p.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && p.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                  <div class="main_price_show"
+                       :class="{none: PromotionsFormat(p.promotions) || (p.svipProductFlag === 1 && showVipPriceTag(p))}">
+                    ￥{{ (PromotionsFormat(p.promotions) || showVipPriceTag(p) ? p.originalPrice :
+                    p.price ) | NumFormat }}
+                  </div>
+                </template>
+                <!--供应商除自己的商品外，也显示价格等级-->
+                <div class="price_grade" v-else><span class="bold">￥</span><i
+                        :class="'icon mIcon i'+p.priceGrade"></i></div>
+              </template>
+              <template v-else>
+                <div class="price_text_tag">
+                  <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                  <template v-if="p.svipProductFlag === 1">
+                    <div class="svip-tag">
+                      <div class="svip-icon">SVIP</div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                  </template>
+                </div>
+                <div class="price_grade"><span class="bold">￥</span><i
+                        :class="'icon mIcon i'+p.priceGrade"></i></div>
+              </template>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </template>
+  </template>
+</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/mixins/cmSysMixins.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/product-floor.js(v=${version})}"></script>
+</body>
+</html>