品牌列表页面美化

@@ -14,7 +14,7 @@ swiper = new Swiper('.swiper-container', {
     lazyLoading: true,
     loop: true,
     autoplay: 3000,
-    pagination: '.swiper-pagination'
+    pagination: '.swiper-pagination .pagination-inner'
 });
 
 lazyLoad($('img.lazy'));

@@ -61,7 +61,7 @@
             background: #eeeeee;
      
             color: #999999;
-            font-weight: bold;
+            // font-weight: bold;
             position: relative;
             h2 {       
                 // width: 100%;
@@ -87,10 +87,22 @@
                 border-bottom: 1px solid #f3f3f3;
                 border-top: 1px solid #f9f9f9;                    
                 i {
-                    position: relative;
-                    top: 1px;
-                    color: #ff0000;
-                    padding-left: 32rem / $pxConvertRem;
+                    display: inline-block;
+                    margin-left: 24rem / $pxConvertRem;
+                    width: 40rem / $pxConvertRem;
+                    height: 40rem / $pxConvertRem;
+                    text-align: center;
+                    vertical-align: middle;
+                    font-size: 28rem / $pxConvertRem;
+                    line-height: 40rem / $pxConvertRem;
+                    color: #fff;
+                    border-radius: 50%;
+                }
+                .icon-hot {
+                    background: #ff0000;
+                }
+                .icon-new {
+                    background: #86c048;
                 }
             }
         }

@@ -6,6 +6,7 @@
         right: 0;
         bottom: 20rem / $pxConvertRem;
         text-align: center;
+        z-index: 1;
         .pagination-inner {
             display: inline-block;
             span {

@@ -4,15 +4,15 @@
     color: #fff;
     width: 100%;
     overflow: hidden;
-    height: 44px;
-    line-height: 44px;
+    height: 88rem / $pxConvertRem;
+    line-height: 88rem / $pxConvertRem;
 
     .nav-back {
         position: absolute;
-        left: 17px;
-        top: 14px;
-        width: 9px;
-        height: 16px;
+        left: 34rem / $pxConvertRem;
+        top: 28rem / $pxConvertRem;
+        width: 18rem / $pxConvertRem;
+        height: 32rem / $pxConvertRem;
         background: image-url('layout/back.png') no-repeat;
         background-size: 100% 100%;
         outline: none;
@@ -20,8 +20,8 @@
 
     .nav-home {
         position: absolute;
-        top: 14px;
-        right: 17px;
+        top: 28rem / $pxConvertRem;
+        right: 34rem / $pxConvertRem;
         width: 20px;
         height: 20px;
         background: image-url('layout/home.png') no-repeat;
@@ -31,10 +31,10 @@
 
     .nav-title {
         position: absolute;
-        margin-left: 26px;
-        margin-right: 32px;
+        margin-left: 52rem / $pxConvertRem;
+        margin-right: 64rem / $pxConvertRem;
         height: 100%;
-        font-size: 18px;
+        font-size: 36rem / $pxConvertRem;
         color: #fff;
         font-weight: bold;
         top: 0;

@@ -39,13 +39,11 @@
            {{# list}}
           <p>
               <a href="{{url}}">{{name}}
-                 <i class="icon-hot">
-                 </i>
                     {{# isHot}}
-                        <i class="icon-hot"></i>
+                        <i class="icon-hot">H</i>
                     {{/ isHot}}
                     {{# isNew}}
-                        <i class="icon-new"></i>
+                        <i class="icon-new">N</i>
                     {{/ isNew}}
               </a>
           </p>