商品列表页

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

@@ -54,6 +54,13 @@
 .classifyBox .tabItem .rgt img{display:block;width:20.8vw;height:20.8vw}
 .classifyBox .tabItem .rgt span{display:block;line-height:9vw;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:3.4vw;color:#4A4F58}
 /* 底部 */
+.footTop{width:100%;padding:2vw 0;background:#FFF;}
+.footTop .wrap span{font-size:2.6vw;padding:0 2vw;text-align:center}
+.footTop .wrap span:before{width:9.2vw;height:9.2vw;display:block;margin:0 auto}
+.footTop .wrap span:nth-of-type(1):before{background-position:2% 12%}
+.footTop .wrap span:nth-of-type(2):before{background-position:21% 12%}
+.footTop .wrap span:nth-of-type(3):before{background-position:40.5% 12%}
+.footTop .wrap span:nth-of-type(4):before{background-position:60% 12%}
 .footMain{width:100%;box-sizing:border-box;background:#4A4F58;color:#FFF}
 .footLink .list{width:100%;padding:0 3vw;box-sizing:border-box}
 .footLink .con{display:none}
@@ -76,13 +83,38 @@
 .copyright{text-align:center;color:#FFF;font-size:2.8vw;padding-bottom:4vw}
 .copyright .item:before{width:10vw;height:10vw;font-size:0;background-position:0% 19.4%}
 .copyright .item span{display:block;line-height:5.5vw}
-
-
-
-
-
-
-
+/*商品Item*/
+.productItem{width:50%;height:81.8vw;overflow:hidden;text-align:center;background:none}
+.productItem .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:45.4vw;height:79.2vw;margin:0 auto;background:#FFF;box-shadow:0 1px 3px #ccc;border-radius:2px;font-size:3.4vw}
+.productItem .item img{display:block;width:100%;height:45.4vw}
+.productItem .item a{height:auto;}
+.productItem .item img{width:45.4vw;height:45.4vw;display:block}
+.productItem .item .image .icon{position:absolute;right:2.4vw;top:2.4vw}
+.productItem .item .image .icon.hot:before,.productItem .item .image .icon.new:before{display:block;width:7.6vw;height:9vw}
+.productItem .item .image .icon.hot:before{background-position:10% 26%}
+.productItem .item .image .icon.new:before{background-position:-1% 26%}
+.productItem .item .name{display:block;padding:2.6vw 3.5vw .4vw;height:10vw;line-height:5vw;text-align: left;}
+.productItem .item .name span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.productItem .item .name em{font-style: normal;color: #e15616;}
+.productItem .item .price{height:21vw;text-align:center}
+.productItem .item .price em{display:block;height:7vw;line-height:4.6vw;color:#4A4F58;font-style:normal;}
+.productItem .item .price em.p{color:#F55C5C}
+.productItem .item .price .icon{display:inline-block;font-size:0;width:4vw;height:4vw;line-height:4vw;position:relative;vertical-align:top;margin-top:0}
+.productItem .item .price .icon.on{position:absolute;left:0;top:0;margin:0}
+.productItem .item .price .icon:before{width:4vw;height:4vw;background-position:55% 25.2%}
+.productItem .item .price .icon.on:before{background-position:49% 25.2%}
+.productItem .item .btn{height:9vw;line-height:9vw}
+.productItem .item .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#F94B4B;background:#FEF6F3;border-radius:2px}
+.productItem .item .btn.add{background:#FEF6F3;color:#E15616;}
+/*登录弹框*/
+.loginAlert{display:none;background-color:rgba(74,79,88,.7);z-index:999}
+.loginAlert .box{box-sizing:border-box;width:74.6vw;height:80vw;padding-top:7.6vw;position:relative;top:50%;margin:-40vw auto 0 auto;font-size:3.7vw;background:#FFF;border-radius:1.6vw;color:#4A4F58;line-height:5.4vw;text-align:center}
+.loginAlert .box:before{content:'';display:block;width:26.7vw;height:26.7vw;background:url(/img/base/to_login_m.png) no-repeat left top;background-size:100% 100%;margin:0 auto}
+.loginAlert .hd{display:none}
+.loginAlert .bd{padding:2vw 0}
+.loginAlert .bd span{display:block}
+.loginAlert .bd a.btn{display:block;width:55.2vw;height:11.6vw;line-height:11.6vw;text-align:center;color:#FFF;background:#E15621;border-radius:5.8vw;margin:5.4vw auto 4.2vw}
+.loginAlert .bd em.btn{font-style:normal;padding:0 5.4vw}
 
 
 

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

@@ -98,9 +98,9 @@ body{min-width:1184px;}
 .baseTopNav .navBox li:hover div{display:block}
 .baseTopNav .navBox li>div a{display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:center;box-sizing:border-box;padding:0 15px}
 .baseTopNav .navBox li>div a:hover{background:#FEF6F3;color:#E15616}
-.baseTopNav .classifyBox{display:none;position:absolute;left:50%;top:44px;z-index:990;transform:translateX(-50%)}
+.baseTopNav .classifyBox{display:none;position:absolute;left:50%;top:44px;z-index:990;transform:translateX(-50%);box-shadow:0 3px 6px rgba(45,48,54,.2);}
 /* 分类 */
-.classifyBox{width:1184px;margin:0 auto;box-sizing:border-box;padding:8px 30px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:0 0 2px 2px}
+.classifyBox{width:1184px;margin:0 auto;box-sizing:border-box;padding:8px 30px;background:#FFF;border-radius:0 0 2px 2px}
 .classifyBox .clsTab{height:56px;line-height:56px;white-space:nowrap;border-bottom:1px solid #FFE6DC}
 .classifyBox .clsTab a{display:inline-block;cursor:default;height:100%;padding:0 25px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent}
 .classifyBox .clsTab a:hover,.classifyBox .clsTab a.on{color:#E15616;border-color:#E15616}
@@ -114,8 +114,16 @@ body{min-width:1184px;}
 .classifyBox .rgt a.on,.classifyBox .clsCon .rgt a:hover{color:#e15616;background:#fbe7de}
 .classifyBox .line:hover .rgt:after,.classifyBox .line.on .rgt:after{content:'';position:absolute;left:0;top:0;z-index:1;border-right:1px solid #E15616;height:100%}
 .classifyBox .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
-.classifyBox .line:hover,.classifyBox .line.on{background:#fbfafa}
+.classifyBox .line:hover{background:#fbfafa}
 /* 底部 */
+.footTop{width:100%;padding:27px 0;margin-top: 30px;background:#FFF}
+.footTop .wrap{white-space:nowrap;display:table}
+.footTop .wrap span{display:table-cell;height:70px;line-height:70px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
+.footTop .wrap span:before{width:70px;height:70px;vertical-align:middle;}
+.footTop .wrap span:nth-of-type(1):before{background-position:0 -60px}
+.footTop .wrap span:nth-of-type(2):before{background-position:-80px -60px}
+.footTop .wrap span:nth-of-type(3):before{background-position:-160px -60px}
+.footTop .wrap span:nth-of-type(4):before{background-position:-240px -60px}
 .footMain{width:100%;background:#4A4F58}
 .footLink{display:table;padding:12px 0}
 .footLink>div{display:table-cell;width:171px}
@@ -135,6 +143,56 @@ body{min-width:1184px;}
 .copyright .item:before{position:absolute;left:0;width:32px;height:32px;background-position:0 -140px}
 .copyright p span{margin:0 5px}
 .copyright p:nth-of-type(2) span:first-child{margin-right:50px}
+/*商品Item*/
+.productItem{float:left;width:284px;height:416px;margin:0 8px;}
+.productItem .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;margin:0 auto;width:100%;height:100%;background:#FFF;border-radius:2px;font-size:16px}
+.productItem .item img{display:block;width:100%;height:284px}
+.productItem .image .icon{position:absolute;right:20px;top:10px}
+.productItem .image .icon.hot:before,.productItem .image .icon.new:before{display:block;width:50px;height:64px}
+.productItem .image .icon.hot:before{background-position:-57px -180px}
+.productItem .image .icon.new:before{background-position:0px -180px}
+.productItem .name{display:block;padding:14px 35px;height:48px;line-height:24px}
+.productItem .name span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.productItem .name em{font-style: normal;color: #e15616;}
+.productItem .price{height:48px;}
+.productItem .price em{display:block;height:48px;line-height:48px;color:#4A4F58;font-style:normal;text-align:center;}
+.productItem .price em.p{color:#F55C5C}
+.productItem .price .icon{display:inline-block;font-size:0;width:24px;height:24px;line-height:24px;position:relative;vertical-align:top;margin-top:12px}
+.productItem .price .icon.on{position:absolute;left:0;top:0;margin:0}
+.productItem .price .icon:before{width:24px;height:24px;background-position:-146px -251px}
+.productItem .price .icon.on:before{background-position:-116px -251px}
+.productItem .btnBox{display:none;position:absolute;width:284px;height:68px;background:#FEF6F3;text-align:center;bottom:0;left:0}
+.productItem .item:hover .btnBox{display:block}
+.productItem .item:hover .name span{color: #e15616;}
+.productItem .item:hover{box-shadow:0px 2px 6px #dedede;}
+.productItem .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
+.productItem .btn.add{color:#E15616;}
+.productItem .btn:hover{background:#E15616;color:#FFF}
+/*分页*/
+.pageWrap{width:1184px;text-align:center;margin:20px auto 36px}
+.pageWrap a{box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
+.pageWrap a.on{background:#e15616;color:#fff;border:1px solid #e15616}
+.pageWrap a:hover{color:#E15616}
+.pageWrap a.on:hover{color:#fff;opacity:.8}
+.pageWrap a.btn{width:auto;color:#E15616;background:none;border:none}
+.pageWrap .prev:before{content:'\276E'}
+.pageWrap .next:before{content:'\276F'}
+.pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
+.pageWrap b{color:#2D3036;font-weight:normal}
+.pageWrap input{box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
+/*登录弹框*/
+.loginAlert{display:none;position:fixed;top:0;left:0;width:100%;height:100%;margin:0 auto;background-color:rgba(74,79,88,.7);z-index:999}
+.loginAlert .box{box-sizing:border-box;width:338px;height:234px;position:relative;top:50%;margin:-117px auto 0 auto;font-size:14px;background:#FFF;border-radius:2px;color:#4A4F58;line-height:42px;text-align:left}
+.loginAlert .box:after{content:'';display:block;width:125px;height:125px;background:url(/img/base/to_login.png) no-repeat left top;background-size:100% 100%;margin-left:16px}
+.loginAlert .hd{border-bottom:1px solid #E2E7EF;height:42px;box-sizing:border-box;padding:0 16px;color:#627386}
+.loginAlert .hd .close{float:right;text-align:center;font-style:normal;cursor:pointer}
+.loginAlert .hd .close:before{content:'\2715'}
+.loginAlert .bd{padding:0 16px;color:#22272E}
+.loginAlert .bd span:first-child:after{content:'，'}
+.loginAlert .bd .btn{position:absolute;bottom:16px;width:68px;height:32px;line-height:32px;text-align:center;border-radius:2px;box-sizing:border-box;cursor:pointer}
+.loginAlert .bd a.btn{right:16px;color:#FFF;background:#E15621}
+.loginAlert .bd em.btn{font-style:normal;right:100px;color:#22272E;background:#FFF;border:1px solid #B8BFCA}
+
 
 
 

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

@@ -35,32 +35,12 @@ li{list-style:none;}
 .mNavBox .navItem .second{display:block;text-align:center;width:25vw;padding:3.2vw 0;color:#999FAB;font-size:3.2vw;line-height:6.4vw;white-space:nowrap}
 .mNavBox .navItem .second img{display:block;margin:0 auto;width:6.4vw;height:6.4vw}
 /* 推荐专区 */
-#recommendBox{width:100%;height:171vw;margin-top:-1.3vw;overflow:hidden;position:relative}
+#recommendBox{width: calc(100% + 2.6vw);height:171vw;margin-top:-1.3vw;margin-left: -1.3vw;overflow:hidden;position:relative;}
 #recommendBox .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:2.6vw;left:0}
 #recommendBox .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}
 #recommendBox .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#E15616;border-radius:.3vw}
 #recommendBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
-#recommendBox .swiper-wrapper .swiper-slide{width:50%;height:81.8vw;overflow:hidden;text-align:center;background:none}
-#recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:45.4vw;height:79.2vw;margin:0 auto;background:#FFF;box-shadow:0 1px 3px #ccc;border-radius:2px;font-size:3.4vw}
-#recommendBox .swiper-slide .item img{display:block;width:100%;height:45.4vw}
-#recommendBox .swiper-slide .item a{height:auto;}
-#recommendBox .swiper-wrapper img{width:auto;height:48vw;display:block}
-#recommendBox .swiper-slide .image .icon{position:absolute;right:2.4vw;top:2.4vw}
-#recommendBox .swiper-slide .image .icon.hot:before,#recommendBox .swiper-slide .image .icon.new:before{display:block;width:7.6vw;height:9vw}
-#recommendBox .swiper-slide .image .icon.hot:before{background-position:10% 26%}
-#recommendBox .swiper-slide .image .icon.new:before{background-position:-1% 26%}
-#recommendBox .swiper-slide .name{display:block;padding:2.6vw 3.5vw .4vw;height:10vw;line-height:5vw;text-align: left;}
-#recommendBox .swiper-slide .name span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-#recommendBox .swiper-slide .price{height:21vw;text-align:center}
-#recommendBox .swiper-slide .price em{display:block;height:7vw;line-height:4.6vw;color:#4A4F58;font-style:normal;}
-#recommendBox .swiper-slide .price em.p{color:#F55C5C}
-#recommendBox .swiper-slide .price .icon{display:inline-block;font-size:0;width:4vw;height:4vw;line-height:4vw;position:relative;vertical-align:top;margin-top:0}
-#recommendBox .swiper-slide .price .icon.on{position:absolute;left:0;top:0;margin:0}
-#recommendBox .swiper-slide .price .icon:before{width:4vw;height:4vw;background-position:55% 25.2%}
-#recommendBox .swiper-slide .price .icon.on:before{background-position:49% 25.2%}
-#recommendBox .swiper-slide .btn{height:9vw;line-height:9vw}
-#recommendBox .swiper-slide .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#F94B4B;background:#FEF6F3;border-radius:2px}
-#recommendBox .swiper-slide .btn.add{background:#FEF6F3;color:#E15616;}
+
 /* 首页楼层 */
 .floorTit{width:93.4vw;margin:0 auto;padding:1.6vw 0 2.6vw 0;position:relative}
 .floorTit h2,.floorTit h3{font-weight:bold;color:#2D3036;font-size:3.7vw;line-height:5.2vw}
@@ -97,14 +77,6 @@ li{list-style:none;}
 .supplierList ul li a{display:block;width:100%;height:100%}
 .supplierList ul li img{width:100%;height:21.4vw;}
 .supplierList li p{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;line-height:5.2vw;text-align:center;background:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:2.6vw;color:#93979F}
-/* 首页底部 */
-.footTop{width:100%;padding:2vw 0;background:#FFF;}
-.footTop .wrap span{font-size:2.6vw;padding:0 2vw;text-align:center}
-.footTop .wrap span:before{width:9.2vw;height:9.2vw;display:block;margin:0 auto}
-.footTop .wrap span:nth-of-type(1):before{background-position:2% 12%}
-.footTop .wrap span:nth-of-type(2):before{background-position:21% 12%}
-.footTop .wrap span:nth-of-type(3):before{background-position:40.5% 12%}
-.footTop .wrap span:nth-of-type(4):before{background-position:60% 12%}
 /* 首页右侧导航 */
 #advertising,#sideNav .item:first-child{display:none;}
 #sideNav{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}

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

@@ -25,35 +25,13 @@ li{list-style:none;}
 #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;}
 #recommendBox .swiper-wrapper{position:relative;width:200%;height:426px;overflow:hidden;z-index:0;}
-#recommendBox .swiper-wrapper .swiper-slide{float:left;width:285px;height:416px;margin:0 7.5px;}
-#recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;margin:0 auto;width:100%;height:100%;background:#FFF;border-radius:2px;font-size:16px}
-#recommendBox .swiper-slide .item img{display:block;width:100%;height:284px}
-#recommendBox .swiper-slide .image .icon{position:absolute;right:20px;top:10px}
-#recommendBox .swiper-slide .image .icon.hot:before,#recommendBox .swiper-slide .image .icon.new:before{display:block;width:50px;height:64px}
-#recommendBox .swiper-slide .image .icon.hot:before{background-position:-57px -180px}
-#recommendBox .swiper-slide .image .icon.new:before{background-position:0px -180px}
-#recommendBox .swiper-slide .name{display:block;padding:14px 35px;height:48px;line-height:24px}
-#recommendBox .swiper-slide .name span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-#recommendBox .swiper-slide .price{height:48px;}
-#recommendBox .swiper-slide .price em{display:block;height:48px;line-height:48px;color:#4A4F58;font-style:normal;text-align:center;}
-#recommendBox .swiper-slide .price em.p{color:#F55C5C}
-#recommendBox .swiper-slide .price .icon{display:inline-block;font-size:0;width:24px;height:24px;line-height:24px;position:relative;vertical-align:top;margin-top:12px}
-#recommendBox .swiper-slide .price .icon.on{position:absolute;left:0;top:0;margin:0}
-#recommendBox .swiper-slide .price .icon:before{width:24px;height:24px;background-position:-146px -251px}
-#recommendBox .swiper-slide .price .icon.on:before{background-position:-116px -251px}
-#recommendBox .swiper-slide .btnBox{display:none;position:absolute;width:284px;height:68px;background:#FEF6F3;text-align:center;bottom:0;left:0}
-#recommendBox .swiper-slide .item:hover .btnBox{display:block}
-#recommendBox .swiper-slide .item:hover{box-shadow:0px 3px 6px rgba(225,86,22,.5)}
-#recommendBox .swiper-slide .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
-#recommendBox .swiper-slide .btn.add{color:#E15616;}
-#recommendBox .swiper-slide .btn:hover{background:#E15616;color:#FFF}
 /* 首页楼层 */
 .floorTit{padding:24px 0 16px 0;position:relative}
 .floorTit h2,.floorTit h3{font-weight:bold;color:#2D3036;font-size:24px;line-height:40px}
 .floorTit h5{font-weight:normal;color:#999FAB;font-size:14px;line-height:16px}
 .floorTit a.more{position:absolute;right:0;top:40px;height:30px;line-height:30px}
 .floorTit a.more:after{margin-left:5px;content:'\276F'}
-.floorCon{width:1184px;overflow:hidden;margin:0 auto}
+.floorCon{width:1184px;margin:0 auto}
 .floorList{width:200%}
 .floorList>li{width:224px;height:278px;margin-right:16px;background:#FFF;position:relative}
 .floorList>li a{display:block;width:100%;height:100%}
@@ -91,15 +69,6 @@ li{list-style:none;}
 .supplierList ul li img{width:100%;height:100%}
 .supplierList li p{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;height:40px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#93979F;font-size:16px}
 .supplierList li a:hover p{color:#E15616}
-/* 首页底部 */
-.footTop{width:100%;padding:27px 0;margin-top: 30px;background:#FFF}
-.footTop .wrap{white-space:nowrap;display:table}
-.footTop .wrap span{display:table-cell;height:70px;line-height:70px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
-.footTop .wrap span:before{width:70px;height:70px;vertical-align:middle;}
-.footTop .wrap span:nth-of-type(1):before{background-position:0 -60px}
-.footTop .wrap span:nth-of-type(2):before{background-position:-80px -60px}
-.footTop .wrap span:nth-of-type(3):before{background-position:-160px -60px}
-.footTop .wrap span:nth-of-type(4):before{background-position:-240px -60px}
 /* 首页左侧广告 */
 #advertising{display:none;position:fixed;left:50%;top:68%;z-index:99998;width:120px;margin-left:-700px;transform:translateY(-50%)}
 #advertising .item{position:relative;width:100px;height:180px;margin-bottom:10px}

src/main/resources/static/css/product/list.h5.css

@@ -2,3 +2,25 @@
 /**
 * 移动端
 */
+li{list-style:none;}
+footer{display:none!important;}
+.sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;}
+.sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
+.sortBox li.on,.sortBox li.up,.sortBox li.down{color:#E15616}
+.sortBox li:before,.sortBox li:after{position:absolute;right:1vw;content:'';width:0;height:0;border-style:solid}
+.sortBox li:before{border-width:0 .8vw .8vw .8vw;border-color:transparent transparent #BEC2C9 transparent;top:5vw}
+.sortBox li:after{border-width:.8vw .8vw 0 .8vw;border-color:#BEC2C9 transparent transparent transparent;top:6.5vw}
+.sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+.sortBox li.up:before{border-bottom-color:#E15616}
+.sortBox li.up:after{border-top-color:#E15616;opacity:.3}
+.sortBox li.down:after{border-top-color:#E15616}
+.sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
+.productList{width:96.6vw;margin:1.3vw auto;box-sizing:border-box}
+.loading{box-sizing:border-box;padding:20vw 0;text-align:center;}
+.empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw;}
+.empty img{width:40vw;height:40vw;}
+.empty a{color:#E15616;}
+.noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
+
+
+

src/main/resources/static/css/product/list.pc.css

@@ -2,3 +2,22 @@
 /**
  * PC端
  */
+li{list-style:none;}
+.crumbs{width:1184px;margin:0 auto;box-sizing:border-box;padding:15px 0;font-size:16px}
+.sortBox{width:1184px;margin:16px auto;box-sizing:border-box;padding:12px;font-size:0;text-align:center;background:#FFF}
+.sortBox li{display:inline-block;width:128px;height:40px;line-height:40px;font-size:16px;background:#F5F5F5;color:#93979F;position:relative;margin:0 8px}
+.sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
+.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:14px}
+.sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:22px}
+.sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+.sortBox li.up:before{border-bottom-color:#E15616}
+.sortBox li.up:after{border-top-color:#E15616;opacity:.3}
+.sortBox li.down:after{border-top-color:#E15616}
+.sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
+.productList{width:1200px;margin:0 auto;box-sizing:border-box}
+.productList .productItem{margin-bottom:16px}
+.loading{box-sizing:border-box;padding:200px 0;text-align:center;}
+.empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px;}
+.empty img{width:180px;height:180px;}
+.empty a{color:#E15616;}

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

@@ -1,7 +1,6 @@
 var spiServer = $("#spiServer").val();
 var isPC = ($(window).width()>768);
 var loginState = false;
-var classifyData = [];
 // 导航分类数据
 var mainClassify = new Vue({
     el: '#mainClassify',
@@ -14,7 +13,6 @@ var mainClassify = new Vue({
         $.getJSON(spiServer+"/product/classify").done(function (r) {
             if (r.code === 0 && r.data) {
                 _self.classify = r.data;
-                classifyData = r.data;
                 if(isPC){
                     setTimeout(function(){
                         $('#mainClassify').slide({
@@ -63,7 +61,7 @@ var headCart = new Vue({
 // 初始化效果
 $(function(){
     $(window).resize(function() {
-        var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768)
+        var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768);
         if(flag){
             window.location.reload();
         }
@@ -74,7 +72,7 @@ $(function(){
         jqHoverShow(".classBtn", "#mainClassify");
     }else{
         jqMultipleShow("click", ".footLink .list", ".tab", ".con");
-        $("body").on('click', '.baseHeadCenter .mClassBtn',function () {
+        $('body').on('click', '.baseHeadCenter .mClassBtn',function () {
             $('#mainClassify').show();
             fixedBody();
         }).on('click', '#mainClassify .close,#mainClassify .mClassBtn',function () {
@@ -84,7 +82,15 @@ $(function(){
             e.stopPropagation();
         });
     }
-
+    $('body').on("click", '.toLogin',function () {
+        $('.loginAlert').show();
+        if(!isPC){fixedBody();}
+    }).on("click", '.loginAlert .box',function (e) {
+        e.stopPropagation();
+    }).on("click", '.loginAlert .close,.loginAlert em.btn,.loginAlert',function () {
+        $('.loginAlert').hide();
+        if(!isPC){looseBody();}
+    });
 
 
 
@@ -182,4 +188,62 @@ function looseBody() {
     document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
     body.style.top = '';
 }
-
+//url参数
+function getUrlParam(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+    var r = decodeURIComponent(unescape(window.location.search)).substr(1).match(reg);
+    if (r != null) {
+        return (r[2])
+    }
+    return null;
+}
+function updateUrlParam(params) {
+    var loca = window.location;
+    var baseUrl = loca.origin + loca.pathname + "?";
+    var query = loca.search.substr(1).toLowerCase();
+    var queryArr = query.split("&");
+    var keys = Object.keys(params);
+    if (keys.length > 0) {
+        var obj = {};
+        for (var i = 0; i < queryArr.length; i++) {
+            queryArr[i] = queryArr[i].split("=");
+            obj[queryArr[i][0]] = queryArr[i][1]
+        }
+        for (var k = 0; k < keys.length; k++) {
+            var name = keys[k];
+            var value = params[name];
+            obj[name.toLowerCase()] = value;
+        }
+        var url = baseUrl + JSON.stringify(obj).replace(/["\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");
+        return url;
+    }
+}
+function setProductPrice(productList, userId, callback){
+    var productIdArr = [];
+    productList.map(function(product){
+        // 0公开价格 1不公开价格 2仅对会员机构公开
+        if (product.priceflag != 1){
+             productIdArr.push(product.pid)
+        }
+    });
+    var productIds = productIdArr.join(",");
+    $.getJSON(spiServer+"/product/listPrice",{
+        userId: userId,
+        productIds: productIds
+    }).done(function (r) {
+        if (r.code === 0 && r.data) {
+            var priceList = r.data;
+            productList.map(function(product){
+                priceList.map(function(item){
+                    if(product.pid == item.productId){
+                        product.userIdentity = item.userIdentity;
+                        product.price = item.price;
+                    }
+                });
+            });
+        }
+        return callback();
+    }).fail(function(){
+        return callback();
+    })
+}

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

@@ -1,7 +1,7 @@
 var homeData = new Vue({
     el: '#container',
     data: {
-        userIdentity: 4,//用户身份: 2-会员机构, 4-普通机构
+        userId:'',
         priceLoading: true,
         images: [],
         recommends: [],
@@ -87,6 +87,12 @@ var homeData = new Vue({
                             });
                         }
                     },500);
+                    // 获取价格
+                    if(_self.userId && _self.userId>0){
+                        setProductPrice(_self.recommends, _self.userId, function(){
+                            _self.priceLoading = false;
+                        });
+                    }
                 }
             });
         },
@@ -173,6 +179,10 @@ var homeData = new Vue({
 
     },
     created: function() {
+        var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
         this.getBanners();
         this.getRecommends();
     },

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

@@ -0,0 +1,234 @@
+var productList = new Vue({
+    el: "#container",
+    data: {
+        listLoading: true,
+        priceLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            size: 0,
+            num: 0,
+            keyword: "",
+            sortField: "",
+            sortType: 1, // 1降序，其他升序
+            bid: "",
+            sid: "",
+            tid: ""
+        },
+        classify: [],
+        listData: [], //priceflag 0公开价格 1不公开价格 2仅对会员机构公开,//userIdentity: 2-会员机构, 4-普通机构
+        listRecord: 0,
+        pageInput: '1',
+        bigType: "",
+        smallType: "",
+        tinyType: "",
+        userId: 0
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        toSortList: function (sortField, sortType) {
+            var params = {
+                sortfield: sortField,
+                sorttype: sortType
+            };
+            window.location.href = updateUrlParam(params);
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        getListByKeyword: function () {
+            var _self = this;
+            $.getJSON(spiServer+"/search/query/product", {
+                keyword: this.params.keyword,
+                pageSize: this.params.size,
+                pageNum: this.params.num,
+                sortField: this.params.sortField,
+                sortType: this.params.sortType
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.listRecord = result.total;
+                    if(_self.userId && _self.userId>0){
+                        setProductPrice(result.items, _self.userId, function(){
+                            _self.priceLoading = false;
+                        });
+                    }
+                    if(isPC){
+                        _self.listData = result.items;
+                    }else{
+                        _self.listData = _self.listData.concat(result.items);
+                    }
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            })
+        },
+        getCategorys: function () {
+            var _self = this;
+            $.getJSON(spiServer+"/product/classify").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.classify = r.data;
+                    if(isPC){
+                        setTimeout(function(){
+                            $('#listClassify').slide({
+                                mainCell:".clsCon"
+                                ,titCell:".clsTab a"
+                                ,trigger: "mouseover"
+                            });
+                        },500);
+                        r.data.map(function(big){
+                            if (_self.params.bid == big.bigTypeID){
+                                _self.bigType = big.name;
+                                if (_self.params.sid && _self.params.sid>0) {
+                                    big.smalltypeList.map(function(small){
+                                        if (_self.params.sid==small.smallTypeID){
+                                            _self.smallType = small.name;
+                                            if (_self.params.tid && _self.params.tid>0) {
+                                                small.tinytypeList.map(function(tiny){
+                                                    if (_self.params.tid==tiny.tinyTypeID){
+                                                        _self.tinyType = tiny.name;
+                                                    }
+                                                })
+                                            }
+                                        }
+                                    })
+                                }
+                            }
+                        })
+                    }
+                }
+            });
+        },
+        getListByCategory: function (path, categoryId) {
+            var _self = this;
+            $.getJSON(spiServer+"/search/query/product/"+ path ,{
+                id: categoryId,
+                pageSize: this.params.size,
+                pageNum: this.params.num,
+                sortField: this.params.sortField,
+                sortType: this.params.sortType
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.listRecord = result.total;
+                    if(_self.userId && _self.userId>0){
+                        setProductPrice(result.items, _self.userId, function(){
+                            _self.priceLoading = false;
+                        });
+                    }
+                    if(isPC){
+                        _self.listData = result.items;
+                    }else{
+                        _self.listData = _self.listData.concat(result.items);
+                    }
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            })
+        }
+    },
+    created: function () {
+        this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 20;
+        this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        this.params.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : "";
+        this.params.sortField = getUrlParam("sortField") ? getUrlParam("sortField") : "";
+        this.params.sortType = getUrlParam("sortType") ? getUrlParam("sortType") * 1 : 1;
+        var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+        if (this.params.keyword) {
+            // 获取列表数据
+            this.getListByKeyword();
+        } else {
+            // category=1000-1001-1005
+            if (getUrlParam("category")) {
+                var category = getUrlParam("category").split("-")
+            }
+            this.params.bid = category[0];
+            this.params.sid = category[1];
+            this.params.tid = category[2];
+            // 根据分类获取数据
+            if (this.params.tid && this.params.tid>0) {
+                this.getListByCategory("tinyType", this.params.tid);
+            } else if (this.params.sid && this.params.sid>0){
+                this.getListByCategory("smallType", this.params.sid);
+            } else if (this.params.bid && this.params.bid>0) {
+                this.getListByCategory("bigType", this.params.bid);
+            } else {
+                alert("URL参数异常！");
+            }
+            // 获取分类
+            this.getCategorys();
+        }
+    },
+    mounted: function () {
+        var searchTypeID = getUrlParam("searchTypeID");
+        var _self = this;
+        if(!isPC){
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        _self.params.num = next;
+                        if (_self.requestFlag){
+                            console.log(_self.params);
+                            if (_self.params.keyword) {
+                                // 获取列表数据
+                                _self.getListByKeyword();
+                            } else {
+                                // 根据分类获取数据
+                                if (_self.params.tid && _self.params.tid>0) {
+                                    _self.getListByCategory("tinyType", _self.params.tid);
+                                } else if (_self.params.sid && _self.params.sid>0){
+                                    _self.getListByCategory("smallType", _self.params.sid);
+                                } else if (_self.params.bid && _self.params.bid>0) {
+                                    _self.getListByCategory("bigType", _self.params.bid);
+                                }
+                            }
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                    }
+                }
+            });
+        }
+    }
+});

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

@@ -0,0 +1,5 @@
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>

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

@@ -1,4 +1,12 @@
 <footer xmlns:th="http://www.w3.org/1999/xhtml">
+    <div class="footTop">
+        <div class="wrap mf">
+            <span class="icon mIcon mfi">国内首家美业共享平台</span>
+            <span class="icon mIcon mfi">采美正品联盟货源保证</span>
+            <span class="icon mIcon mfi">5000+美容机构入驻</span>
+            <span class="icon mIcon mfi">100+国际国内知名供应商</span>
+        </div>
+    </div>
     <div class="footMain">
         <!--底部帮助页-->
         <div class="footLink wrap">
@@ -48,9 +56,15 @@
             </div>
         </div>
     </div>
+    <div class="loginAlert mFixed">
+        <div class="box">
+            <div class="hd">提示<em class="close"></em></div>
+            <div class="bd">
+                <span>你还未登录</span>
+                <span>请登录后再进行购买</span>
+                <a class="btn" href="javascript:void(0);">去登录</a>
+                <em class="btn">取消</em>
+            </div>
+        </div>
+    </div>
 </footer>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>

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

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta http-equiv="keywords" content="采美、易耗品商城、光电美容仪器项目、光电中心、皮肤管理中心、光电转型、美容院转型、光电美容">
     <meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
     <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">

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

@@ -129,7 +129,7 @@
                 </template>
             </div>
             <div class="clsCon">
-                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID">
+                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">
                     <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
                         <div class="lft">
                             <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>

src/main/resources/templates/index.html

@@ -57,7 +57,7 @@
                 <div class="floorCon">
                     <div id="recommendBox" class="swiper-container">
                         <ul class="swiper-wrapper" v-cloak>
-                            <li class="swiper-slide mfc" v-for="p in recommends">
+                            <li class="swiper-slide productItem mfc" v-for="p in recommends">
                                 <div class="item">
                                     <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
                                         <img :src="p.image" :alt="p.name">
@@ -67,25 +67,26 @@
                                         <span v-html="p.name"></span>
                                     </a>
                                     <div class="price mfhc">
-                                        <template v-if="loginState">
+                                        <template v-if="userId && userId>0">
                                             <em v-if="p.priceflag==1">未公开价格</em>
                                             <template v-else-if="priceLoading">
                                                 <em>正在获取价格...</em>
                                             </template>
                                             <template v-else>
                                                 <em v-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
-                                                <em v-else class="p" v-text="'￥'+parseFloat(p.pricegrade).toFixed(2)"></em>
+                                                <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
                                             </template>
+                                            <div class="btnBox">
+                                                <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
+                                                <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn add">加入购物车</a>
+                                            </div>
                                         </template>
                                         <template v-else>
                                             <em>价格：<i class="icon mIcon" v-for="i in 5">
                                                     <i v-if="i==1||p.pricegrade>=i" class="icon mIcon on"></i>
                                             </i></em>
+                                            <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">加入购物车</a></div>
                                         </template>
-                                        <div class="btnBox">
-                                            <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
-                                            <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn add">加入购物车</a>
-                                        </div>
                                     </div>
                                 </div>
                             </li>
@@ -196,16 +197,10 @@
         </div>
     </div>
 </div>
-<div class="footTop">
-    <div class="wrap mf">
-        <span class="icon mIcon mfi">国内首家美业共享平台</span>
-        <span class="icon mIcon mfi">采美正品联盟货源保证</span>
-        <span class="icon mIcon mfi">5000+美容机构入驻</span>
-        <span class="icon mIcon mfi">100+国际国内知名供应商</span>
-    </div>
-</div>
+
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -20,6 +20,7 @@
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/product/detail.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -13,37 +13,145 @@
 
 <!--页面主体数据-->
 <div id="container">
-
-<div id="listClassify" class="classifyBox">
+    <template v-if="isPC">
+        <!-- 面包屑 -->
+        <div v-if="params.keyword" 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/category.shtml?category='+params.bid+'-0-0'" v-text="bigType"></a>
+                    <template v-if="params.tid && params.tid>0">
+                        <span>&gt;</span> <a :href="'/product/category.shtml?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="!params.keyword" id="listClassify" class="classifyBox">
             <div class="clsTab">
                 <template v-for="(big,i) in classify">
-                    <a :class="{'on':i==0}" v-if="big.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
+                    <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">
-                    <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
-                        <div class="lft">
+                <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" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
+                                <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>
-
-
-    <hr>
-    <h1>商品列表</h1>
-    <hr>
+    </template>
+    <!--排序-->
+    <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>
+    <!--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/base/empty.png">
+        <div class="msg">
+            <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
+            <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
+        </div>
+    </div>
+    <!--商品列表-->
+    <ul v-else class="productList clear mfw">
+        <li class="productItem mfc" v-for="p in listData">
+            <div class="item">
+                <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                    <img :src="p.image" :alt="p.name">
+                    <span v-if="p.acttype==1||p.acttype==2" :class="p.acttype==1?'icon mIcon hot':'icon mIcon new'"></span>
+                </a>
+                <a class="name" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                    <span v-html="p.name"></span>
+                </a>
+                <div class="price mfhc">
+                    <template v-if="userId && userId>0">
+                        <em v-if="p.priceflag==1">未公开价格</em>
+                        <template v-else>
+                            <em v-if="priceLoading">正在获取价格...</em>
+                            <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                            <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                            <div class="btnBox">
+                                <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
+                                <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn add">加入购物车</a>
+                            </div>
+                        </template>
+                    </template>
+                    <template v-else>
+                        <em>价格：<i class="icon mIcon" v-for="i in 5">
+                                <i v-if="i==1||p.pricegrade>=i" class="icon mIcon on"></i>
+                        </i></em>
+                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">加入购物车</a></div>
+                    </template>
+                </div>
+            </div>
+        </li>
+    </ul>
+    <!--分页-->
+    <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/footLink"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/product/list.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -20,6 +20,6 @@
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
-
+<template th:replace="components/footLink"></template>
 </body>
 </html>