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

src/main/resources/static/css/product/instruement-list.css

@@ -0,0 +1,107 @@
+#productList{width: 1184px;margin:32px auto}
+.crumbs-nav{height: 40px}
+.crumbs-nav .crumbs-link{color:#4a4f58 }
+.classifyBox .classification div{
+    display: inline-block;
+    line-height: 64px;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    cursor: pointer;
+}
+.classifyBox .classification {
+    border-bottom: 1px solid #f7f7f7;
+}
+.classifyBox .classification .class-title{
+    border-right: 1px solid #f7f7f7;
+    width: 127px;
+}
+.classifyBox .classification .class-nav-main{
+}
+.classifyBox .classification .class-nav-main div.on{
+    color: #e15616;
+}
+.classifyBox .classification .class-nav-main div{
+    width: 127px;
+}
+.crumbs-nav >div{display: inline-block}
+.crumbs-nav-item{
+    display: inline-block;
+    padding: 0 12px;
+    border: 1px solid #cccccc;
+    line-height: 24px;
+    margin-right: 16px;
+    color: #909090;
+    border-radius: 2px;
+    cursor: pointer;
+}
+.crumbs-nav-item.on{
+color: #e15616;
+border: 1px solid #e15616;
+}
+
+.sortBox .down{position:relative;margin:0 8px}
+.sortBox .down:before,.sortBox .down:after{position:absolute;right:32px;content:'';width:0;height:0;border-style:solid}
+.sortBox .down:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:25px}
+.sortBox .down:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:31px}
+.sortBox .down.up:before{border-bottom-color:#E15616}
+.sortBox .down.up:after{border-top-color:#E15616;opacity:.3}
+.sortBox .on{background:#ffe6dc }
+.list-container{
+    margin-top: 32px;
+}
+.list-container ul li.productItem {
+    width: 184px;
+    height: 288px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 16px 16px 0;
+    overflow: hidden;
+    float: left;
+}
+.list-container ul li img {
+    width: 100%;
+    height: 184px;
+}
+.list-container ul li .name{
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .image .icon{
+    position: inherit;
+}

src/main/resources/static/css/product/instruement.css

@@ -1,44 +1,18 @@
 @media screen and (min-width:768px) {
-#container {
-    width: 1184px;
-    margin: 32px auto;
-    overflow: hidden;
-}
-
-.instrue-left {
-    width: 884px;
-    float: left;
-    margin-right: 16px;
-}
-
-.instrue-left .top-category .normal-nav .nav-list {
-    display: inline-block;
-    margin: 0 16px 16px 0;
-    width: 134px;
-    height: 88px;
-    background: #fff;
-    text-align: center;
-    color: #4a4f58;
-    font-size: 16px;
-    line-height: 130px;
-    cursor: pointer;
-}
-
-.instrue-left .top-category .normal-nav .nav-list.active {
-    border: 1px solid #e15616;
-    color: #e15616;
-}
-
-.instrue-left .top-category .normal-nav .nav-list:nth-child(6) {
-    margin-right: 0
-}
-
-.instrue-right {
-    float: right;
-    width: 252px;
-    background: #fff;
-    padding: 16px;
-}
+#container {width: 1184px;margin: 32px auto;overflow: hidden;}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+.instrue-left {width: 900px;float: left;}
+.normal-nav{margin-top: 10px}
+.instrue-left .top-category .normal-nav .nav-list:hover{border: 1px solid #e15616;
+    transform:translateY(-5px);
+    box-shadow:0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1),0 6px 6px rgba(102,102,102,0.1);
+    }
+.instrue-left .top-category .normal-nav .nav-list {border:1px solid #fff;display: inline-block;margin: 0 16px 16px 0;width: 132px;height: 88px;background: #fff;text-align: center;color: #4a4f58;font-size: 16px;line-height: 130px;cursor: pointer;}
+.instrue-left .top-category .normal-nav .nav-list.active {border: 1px solid #e15616;color: #e15616;}
+.instrue-right {float: right;width: 252px;background: #fff;padding: 16px;}
 .instrue-right .wrap_tittle{
     padding-bottom: 10px;
     color: #4a4f58;
@@ -60,6 +34,13 @@
     color: #4a4f58;
     cursor: pointer;
 }
+.productItem:hover .name{
+    color: #e15616;
+}
+.productItem:hover{
+    transform:translateY(-5px);
+    box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);
+}
 .line{
     height: 2px;
     width: 16px;
@@ -84,39 +65,48 @@
     font-size: 14px;
     line-height: 16px;
 }
-.recommend ul li:first-child {
+.hotList ul li.img01 {
     width: 524px;
 }
-
+.hotList ul li.img02{
+    width: 344px;
+}
+.hotList ul li.imgbaner{
+    width: 884px;
+    height: 120px;
+}
 .hotList ul li img {
     width: 100%;
     height: 100%;
 }
 .hotList ul{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    /*display: flex;*/
+    /*flex-wrap: wrap;*/
+    /*justify-content: space-between;*/
     height: 560px;
     overflow: hidden;
 }
+.hotList ul.type{
+    height: 704px;
+}
 .hotList ul.height{
     height: auto;
 }
-.hotList ul:after{
-    display:block;
-    content:"";
-    width: 164px;
-    height:0px;
-}
+/*.hotList ul:after{*/
+/*    display:block;*/
+/*    content:"";*/
+/*    width: 164px;*/
+/*    height:0px;*/
+/*}*/
 .hotList ul li {
     width: 164px;
     height: 268px;
     float: left;
     background: #fff;
     position: relative;
-    margin: 0 0 16px 0;
+    margin: 0 16px 16px 0;
     overflow: hidden;
-    display: inline-block;
+    float: left;
 }
 .collocation ul li{
     height: 218px;
@@ -180,7 +170,7 @@
     height: 32px;
     border: 1px solid #cccccc;
     line-height: 32px;
-    margin: 32px auto;
+    margin: 10px auto;
     border-radius: 2px;
     color: #909090;
     padding-left: 13px;
@@ -194,8 +184,9 @@
     right: 0;
     position: absolute
 }
-#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
-#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
-#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
-#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+.unfold:hover{
+    color: #E15616;
+    border-color: #E15616;
+}
+
 }

src/main/resources/static/js/product/instruement-list.js

@@ -0,0 +1,168 @@
+var productList = new Vue({
+    el:'#productList',
+    data:{
+        searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        classify:[
+            {
+            name:'面部抗衰',
+            smallTypeID:'1001',
+            tinytypeList:[
+                { name: "高端护理",smallTypeID:'101'},
+                { name: "高端护理",smallTypeID:'102'},
+                { name: "高端护理",smallTypeID:'103'},
+                { name: "高端护理",smallTypeID:'104'},
+                { name: "高端护理",smallTypeID:'105'},
+            ]},
+            {
+            name:'瘦身塑形',
+            smallTypeID:'1002',
+            tinytypeList:[
+                { name: "超声",smallTypeID:'2002'},
+                { name: "射频",smallTypeID:'2003'},
+                { name: "激光",smallTypeID:'2004'},
+                { name: "高端护理",smallTypeID:'2005'},
+                { name: "高端护理",smallTypeID:'2001'},
+            ]},
+            {
+            name:'产后修复',
+            smallTypeID:'1003',
+            tinytypeList:[
+                { name: "修复",smallTypeID:'3003'},
+                { name: "修复",smallTypeID:'3002'},
+                { name: "修复",smallTypeID:'3004'},
+                { name: "修复",smallTypeID:'3005'},
+                { name: "修复",smallTypeID:'3001'},
+            ]},
+            {
+            name:'精油系列',
+            smallTypeID:'1004',
+            tinytypeList:[
+                { name: "补水",smallTypeID:'4005'},
+                { name: "保湿",smallTypeID:'4004'},
+                { name: "保湿",smallTypeID:'4003'},
+                { name: "保湿",smallTypeID:'4002'},
+                { name: "补水",smallTypeID:'4001'},
+            ]},
+        ],
+        listData:[
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "1",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "2",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "3",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+            {
+            actStatus: 1,
+            brand: "测试品牌",
+            id: "4367",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
+            ladderPriceFlag: 0,
+            name: "华熙生物润百颜液体润百颜液体敷料:",
+            price: 50,
+            priceFlag: "0",
+            priceGrade: "4",
+            priceLoaded: true,
+            promotions: {
+            id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
+            supplierId: 10111,
+            unit: "方法",
+            userIdentity: 3,
+            },
+        ],
+         termsName:'',
+         twoclassName:'',
+         smallTypeID:'',
+         twosmallTypeID:'',
+         tinytypeList:[],
+         termsNameflag:false,
+         twoclassflag:false,
+          params: {
+            size: 0,
+            num: 0,
+            keyword: "",
+            sortField: "",
+            sortType: 1, // 1降序，其他升序
+            bid: "",
+            sid: "",
+            tid: ""
+        },
+    },
+    methods:{
+     toSortList: function (sortField, sortType) {
+            var params = {
+                sortfield: sortField,
+                sorttype: sortType
+            };
+            window.location.href = updateUrlParam(params);
+        },
+        remove:function(){
+            this.twoclassflag = false;
+        },
+        oneclass:function (item) {//选择一及分类
+            this.termsName=item.name;
+            this.smallTypeID = item.smallTypeID;
+            this.tinytypeList = item.tinytypeList;
+            this.termsNameflag = true
+        },
+        twoclass:function (item) {//选择二级分类
+            this.twoclassName = item.name;
+            this.twosmallTypeID = item.smallTypeID;
+            this.twoclassflag = true;
+        }
+    },
+    created:function () {
+        setTimeout(function(){
+            // 图片懒加载
+            $("img[data-original]").lazyload();
+        },500)
+    }
+
+})

src/main/resources/static/js/product/instruement.js

@@ -27,6 +27,9 @@
          moreflag:true,
     },
     methods:{
+        toserch:function(name){
+        window.location.href='/product/instruelist.html?name='+name
+        },
         seeMore:function(){
             this.moreflag = false
         },

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

@@ -2,16 +2,94 @@
 <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>
+    <title>采美365网-仪器列表</title>
     <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/equipment/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/product/instruement-list.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-    <!-- 引用头部 -->
-    <template th:replace="components/header"></template>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
 
-    <!-- 引入底部 -->
+<!-- 商品列表 -->
+<div id="productList">
+    <div class="crumbs-nav">
+        <div class="crumbs-link"> 筛选条件： </div>
+        <div  class="crumbs-nav-main">
+            <div class="crumbs-nav-item" v-if="termsNameflag">{{termsName}}</div>
+            <div class="crumbs-nav-item on" @click="remove" v-if="twoclassflag">{{twoclassName}} x</div>
+        </div>
+    </div>
+     <div  id="listClassify" class="classifyBox">
+        <div class="classification">
+            <div class="class-title">分类</div>
+            <div class="class-nav-main">
+                <div v-for="item in classify" @click="oneclass(item)" :class="{'on':item.smallTypeID==smallTypeID}">{{item.name}}</div>
+            </div>
+        </div>
+        <div class="classification">
+            <div class="class-title">二级</div>
+            <div class="class-nav-main">
+                <div v-for="item in tinytypeList" @click="twoclass(item)" :class="{'on':item.smallTypeID==twosmallTypeID}">{{item.name}}</div>
+            </div>
+        </div>
+        <div class="sortBox classification">
+            <div class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</div>
+                <div class="class-nav-main">
+                <template>
+                    <div class="down" @click="toSortList('sales',0)"><span>销量</span></div>
+                </template>
+                <template>
+                    <div class="down" @click="toSortList('favorite',0)"><span>人气</span></div>
+                </template>
+                <template>
+                    <div class="down"  @click="toSortList('price',0)"><span>价格</span></div>
+                </template>
+                </div>
+        </div>
+     </div>
+    <template>
+        <div class="list-container">
+            <ul class="clear mfw">
+                <li class="productItem " v-for="p in listData">
+                    <a class="image" :href="'/product-'+p.id+'.html'">
+                     <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                     <p class="name" v-html="p.name"></p>
+                     <div class="price mfhc">
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                            <template v-if="p.priceFlag==1">
+                                <em>￥价格未公开</em>
+                            </template>
+                            <template v-else>
+                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                    <em>￥会员可见</em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                                <template v-else>
+                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                            <span class="listTag" >单品满减</span>
+                        </template>
+                     </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </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/product/list.js(v=${version})}"></script>-->
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/instruement-list.js(v=${version})}"></script>
 </body>
-
+</html>

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

@@ -14,7 +14,7 @@
             <div class="instrue-left">
                 <div class="top-category">
                     <ul class="normal-nav clearfix">
-                        <li class="nav-list" v-for="(item,index) in categorylist"><i class=""></i>{{item.name}}</li>
+                        <li class="nav-list" v-for="(item,index) in categorylist" @click="toserch(item.name)"><i class=""></i>{{item.name}}</li>
                     </ul>
                 </div>
                 <div>
@@ -25,22 +25,16 @@
                     <div class="floorCon">
                          <div class="hotList recommend">
                             <ul class="clear mfw" :class="moreflag?'':'height'">
-                                <li><img src="/img/common/goodsup.png"/></li>
+                                <li  class="img01"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3bGAKnQdAAEL2eOO3HU338.png"/></li>
                                 <li class="productItem " v-for="p in recommends">
                                     <a class="image" :href="'/product-'+p.id+'.html'">
-                                        <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
-                                    </a>
-                                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
-                                        <p v-html="p.name"></p>
-                                    </a>
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name"></a>
+                                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank"><p v-html="p.name"></p> </a>
                                      <div class="price mfhc">
                                         <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                                             <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                                             <template v-if="p.priceFlag==1">
                                                 <em>￥价格未公开</em>
-                                                <div class="btnBox">
-                                                    <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
-                                                </div>
                                             </template>
                                             <template v-else>
                                                 <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
@@ -50,9 +44,6 @@
                                                 <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
                                                     <em>￥会员可见</em>
                                                     <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                                    <div class="btnBox">
-                                                        <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
-                                                    </div>
                                                 </template>
                                                 <template v-else>
                                                     <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
@@ -67,7 +58,7 @@
                                      </div>
                                 </li>
                             </ul>
-                            <div class="unfold" @click="seeMore" v-if="moreflag"><i class="icon mIcon more"></i>查看更多 </div>
+                            <div class="unfold" @click="seeMore" v-if="moreflag">查看更多 ∨</div>
                          </div>
                     </div>
                </div>
@@ -90,9 +81,6 @@
                                             <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                                             <template v-if="p.priceFlag==1">
                                                 <em>￥价格未公开</em>
-                                                <div class="btnBox">
-                                                    <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
-                                                </div>
                                             </template>
                                             <template v-else>
                                                 <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
@@ -102,9 +90,6 @@
                                                 <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
                                                     <em>￥会员可见</em>
                                                     <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                                    <div class="btnBox">
-                                                        <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
-                                                    </div>
                                                 </template>
                                                 <template v-else>
                                                     <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
@@ -119,7 +104,7 @@
                                      </div>
                                 </li>
                             </ul>
-                            <div class="unfold" @click="seeMore" v-if="recommends.length>10"><i class="icon mIcon more"></i>查看更多 </div>
+                            <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
                          </div>
                     </div>
                </div>
@@ -129,9 +114,9 @@
                    </div>
                     <div class="floorCon">
                         <div class="hotList collocation">
-                            <ul class="clear mfw">
+                            <ul class="clear" :class="moreflag?'':'height'">
                                 <li  class="productItem " v-for="p in recommends">
-                                    <a class="image" :href="'/product-'+p.id+'.html'">
+                                   <a class="image" :href="'/product-'+p.id+'.html'">
                                         <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                                     </a>
                                     <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
@@ -139,7 +124,8 @@
                                     </a>
                                 </li>
                             </ul>
-                    </div>
+                            <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                        </div>
                     </div>
                </div>
                <div>
@@ -148,7 +134,7 @@
                     </div>
                     <div class="floorCon">
                          <div class="hotList swiper-container" id="recommendBox" >
-                            <ul class="swiper-wrapper"  v-cloak>
+                            <ul class="swiper-wrapper" :class="moreflag?'':'height'"  v-cloak>
                                 <li class="productItem " v-for="p in recommends">
                                     <a class="image" :href="'/product-'+p.id+'.html'">
                                         <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
@@ -161,9 +147,6 @@
                                             <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                                             <template v-if="p.priceFlag==1">
                                                 <em>￥价格未公开</em>
-                                                <div class="btnBox">
-                                                    <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
-                                                </div>
                                             </template>
                                             <template v-else>
                                                 <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
@@ -173,9 +156,6 @@
                                                 <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
                                                     <em>￥会员可见</em>
                                                     <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                                    <div class="btnBox">
-                                                        <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
-                                                    </div>
                                                 </template>
                                                 <template v-else>
                                                     <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
@@ -194,8 +174,198 @@
                          </div>
                     </div>
                </div>
+             <template>
+                <div class="floorTit">
+                     <h2>精彩活动</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class='imgbaner'><img src="http://m.360buyimg.com/babel/jfs/t1/154859/31/6073/29706/5fb1d2c4E73af2908/9054ba7e4d595637.jpg.webp"></li>
+                            <li class="img01"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3bGAKnQdAAEL2eOO3HU338.png"/></li>
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" >单品满减</span>
+                                    </template>
+                                 </div>
+                            </li>
+                        </ul>
+                        <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            <template>
+                <div class="floorTit">
+                     <h2>新品专区</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class='imgbaner'><img src="http://m.360buyimg.com/babel/jfs/t1/154859/31/6073/29706/5fb1d2c4E73af2908/9054ba7e4d595637.jpg.webp"></li>
+                            <li class="img01"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3bGAKnQdAAEL2eOO3HU338.png"/></li>
+                            <li class="img02"><img src="https://img-b.caimei365.com/group1/M00/03/11/Cmgy61_S3WSAC5igAAIpbsQkSoo172.png"/></li>
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" >单品满减</span>
+                                    </template>
+                                 </div>
+                            </li>
+                        </ul>
+                        <div class="unfold" @click="seeMore" >查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            <template>
+                <div class="floorTit">
+                     <h2>测试测试</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class='imgbaner'><img src="http://m.360buyimg.com/babel/jfs/t1/154859/31/6073/29706/5fb1d2c4E73af2908/9054ba7e4d595637.jpg.webp"></li>
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                            <template v-if="p.priceFlag==1">
+                                                <em>￥价格未公开</em>
+                                            </template>
+                                            <template v-else>
+                                                <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                    <em>￥会员可见</em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                                <template v-else>
+                                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                </template>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                            <span class="listTag" >单品满减</span>
+                                        </template>
+                                 </div>
+                            </li>
+                        </ul>
+                        <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
+            <template>
+                <div class="floorTit">
+                     <h2>测试测试</h2>
+                 </div>
+                 <div class="floorCon">
+                    <div class="hotList">
+                        <ul class="type" :class="moreflag?'':'height'">
+                            <li class="productItem " v-for="p in recommends">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <p v-html="p.name"></p>
+                                </a>
+                                <div class="price">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>￥价格未公开</em>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>￥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else>
+                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" >单品满减</span>
+                                    </template>
+                                 </div>
+                            </li>
+                            <li class='imgbaner'><img src="https://img-b.caimei365.com/group1/M00/03/12/Cmgy61_S4BWAYIrqAAMWFPMHILs549.png"></li>
+                        </ul>
+                        <div class="unfold" @click="seeMore"  v-if="moreflag">查看更多 ∨</div>
+                    </div>
+                 </div>
+            </template>
             </div>
-
             <div class="instrue-right">
                 <div class="wrap_tittle">
                     大家都在搜