add

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,21 +65,30 @@
     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;
 }
@@ -114,9 +104,9 @@
     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/templates/product/instruelist.html

@@ -2,16 +2,169 @@
 <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/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">
+    <template v-if="isPC && listData && listData.length>0">
+        <!-- 面包屑 -->
+        <div v-if="searchFlag" class="crumbs">
+            <span>搜索结果</span>
+            <span>&gt;</span> <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>
+        </div>
+        <div v-else class="crumbs">
+            <a href="/">首页</a>
+            <template v-if="params.bid && params.bid>0">
+                <template v-if="params.sid && params.sid>0">
+                    <span>&gt;</span> <a :href="'/product/list.html?category='+params.bid+'-0-0'" v-text="bigType"></a>
+                    <template v-if="params.tid && params.tid>0">
+                        <span>&gt;</span> <a :href="'/product/list.html?category='+params.bid+'-'+params.sid+'-0'" v-text="smallType"></a>
+                        <span>&gt;</span> <span v-text="tinyType"></span>
+                    </template>
+                    <template v-else>
+                        <span>&gt;</span> <span v-text="smallType"></span>
+                    </template>
+                </template>
+                <template v-else>
+                    <span>&gt;</span> <span v-text="bigType"></span>
+                </template>
+            </template>
+        </div>
+        <!--分类-->
+        <div v-if="(!searchFlag)" id="listClassify" class="classifyBox">
+            <div class="clsTab">
+                <template v-for="(big,i) in classify">
+                    <a :class="{'on': params.bid==big.bigTypeID}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
+                </template>
+            </div>
+            <div class="clsCon">
+                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">
+                    <div class="line" :class="{'on': params.sid==small.smallTypeID}" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
+                        <div class="lft" :class="{'on': params.sid==small.smallTypeID}">
+                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
+                        </div>
+                        <div class="rgt">
+                            <template v-for="tiny in small.tinytypeList">
+                                <a v-if="tiny.validFlag==1" :class="{'on': params.tid==tiny.tinyTypeID}" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+    <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--数据为空-->
+    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        <img src="/img/common/empty.png">
+        <div class="msg">
+            <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
+        </div>
+    </div>
+    <template v-else>
+        <!--排序-->
+        <div class="sortBox">
+            <ul class="mfc">
+                <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
+                <template>
+                    <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
+                        @click="toSortList('sales',0)"><span>销量</span></li>
+                    <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
+                        @click="toSortList('sales',1)"><span>销量</span></li>
+                    <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
+                        @click="toSortList('favorite',0)"><span>人气</span></li>
+                    <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
+                        @click="toSortList('favorite',1)"><span>人气</span></li>
+                    <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
+                </template>
+                <template>
+                    <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
+                        @click="toSortList('price',0)"><span>价格</span></li>
+                    <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
+                        @click="toSortList('price',1)"><span>价格</span></li>
+                    <li v-else @click="toSortList('price',0)"><span>价格</span></li>
+                </template>
+            </ul>
+        </div>
+        <!--商品列表-->
+        <ul class="productList clear mfw">
+            <li class="productItem mfc" v-for="p in listData">
+                <div class="item">
+                    <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'">
+                        <span v-html="p.name"></span>
+                    </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)">
+                                    <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>
+                                    <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>
+                                    <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" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                            <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
+                        </template>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </template>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+        <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+    </div>
+</div>
+<!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<!--<script charset="utf-8" type="text/javascript" th:src="@{/js/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">
                     大家都在搜