店铺推荐收藏浏览

@@ -4,12 +4,19 @@
     <div class="shop-recom-container shop-recom-swiper-container">
         <ul class="swiper-wrapper">
             <li class="swiper-slide recom-shop">
+                <div class="fav-container">
+                    <div class="shop-fav"></div><span>已收藏</span>
+                </div>
+                <span class="faved-num">1234人以收藏</span>
                 <img src="//img10.static.yhbimg.com/yhb-img01/2016/10/21/13/0149f69bae453be2b9766205c360611a7b.jpg?imageView2/2/w/411/h/239/q/90" alt="banner" class="top">
                 <img src="//img10.static.yhbimg.com/yhb-img01/2016/10/27/10/017deb63b74900161d516b506370066877.jpg?imageView2/2/w/206/h/168/q/90" alt="left" class="bottom">
                 <img src="//img10.static.yhbimg.com/yhb-img01/2016/10/27/10/01907c964b9c98ba8b37606c4963508bc9.jpg?imageView2/2/w/206/h/168/q/90" alt="right" class="bottom">
             </li>
 
             <li class="swiper-slide recom-shop">
+                <div class="fav-container">
+                    <div class="shop-notfav"></div><span>收藏</span>
+                </div>
                 <img src="//img10.static.yhbimg.com/yhb-img01/2016/10/21/13/0149f69bae453be2b9766205c360611a7b.jpg?imageView2/2/w/411/h/239/q/90" alt="banner" class="top">
                 <img src="//img10.static.yhbimg.com/yhb-img01/2016/10/27/10/017deb63b74900161d516b506370066877.jpg?imageView2/2/w/206/h/168/q/90" alt="left" class="bottom">
                 <img src="//img10.static.yhbimg.com/yhb-img01/2016/10/27/10/01907c964b9c98ba8b37606c4963508bc9.jpg?imageView2/2/w/206/h/168/q/90" alt="right" class="bottom">

@@ -16,6 +16,45 @@
             width: 50%;
         }
 
+        .fav-container {
+            position: absolute;
+            top: 12px;
+            left: 15px;
+
+            span {
+                font-size: 18px;
+                color: #fff;
+            }
+        }
+
+        .shop-fav {
+            display: inline-block;
+            height: 21px;
+            width: 24px;
+            background: resolve("channel/faved.png");
+            background-size: 100% 100%;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        .shop-notfav {
+            display: inline-block;
+            height: 21px;
+            width: 24px;
+            background: resolve("channel/notfav.png");
+            background-size: 100% 100%;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        .faved-num {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            color: #fff;
+            font-size: 18px;
+        }
+
     }
     .swiper-slide {
         text-align: center;
@@ -60,5 +99,30 @@
             height: 168px;
             width: 50%;
         }
+
+        .fav-container {
+            top: 15px;
+            left: 18px;
+
+            span {
+                font-size: 20px;
+            }
+        }
+
+        .shop-fav {
+            height: 24px;
+            width: 27px;
+        }
+
+        .shop-notfav {
+            height: 24px;
+            width: 27px;
+        }
+
+        .faved-num {
+            top: 15px;
+            right: 15px;
+            font-size: 20px;
+        }
     }
 }
\ No newline at end of file