article-type-5 样式

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Mon Mar 30 15:46:04 2015
+ By Ads
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face 
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="2 0 6 3 0 0 0 0 0 0"
+    ascent="812"
+    descent="-212"
+    x-height="792"
+    bbox="0 -224 1285 800"
+    underline-thickness="50"
+    underline-position="-100"
+    unicode-range="U+0078-E612"
+  />
+<missing-glyph horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
+ />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    <glyph glyph-name="uniE60C" unicode="&#xe60c;" horiz-adv-x="1323" 
+d="M643 472q0 -68 -47.5 -116t-113.5 -48q0 -68 47 -116t113.5 -48t113.5 48t47 116t-47 116t-113 48zM643 800q-68 0 -139.5 -21.5t-133 -57t-119 -80.5t-102.5 -93t-79 -94t-52 -84t-18 -62q0 -28 25 -75t68 -102t105 -111t131 -101.5t152 -74.5t161.5 -29t161.5 29
+t152 74.5t131 101.5t105 111t68 102t25 75t-25 75t-68 101.5t-105 110.5t-131 102t-152 74.5t-161 28.5zM643 -21q-88 0 -162 44t-117 120t-43 165q0 66 25.5 127t68.5 105t102.5 70t125.5 26q131 0 225 -94q94 -99 96 -234q0 -30 -5.5 -59t-15 -55.5t-23.5 -51.5t-32 -46
+t-38.5 -39.5t-44.5 -32.5t-50 -24t-54.5 -15.5t-57.5 -5.5z" />
+    <glyph glyph-name="uniE60D" unicode="&#xe60d;" 
+d="M512 286v343h85v-426h-81v-2h-256v85h252zM512 -224q139 0 257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5t-257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5z" />
+    <glyph glyph-name="uniE60F" unicode="&#xe60f;" 
+d="M707 748q-55 0 -105 -20.5t-90 -56.5q-40 36 -90 56.5t-105 20.5q-34 0 -67 -8t-62 -23t-54.5 -35.5t-45.5 -46.5t-34.5 -55.5t-22 -63t-7.5 -68.5q0 -110 69 -194l2 -2l344 -391q30 -33 73 -33t73 33l344 391q0 1 1 2h1q22 27 37.5 58.5t23.5 66t8 69.5q0 49 -14.5 94.5
+t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" />
+    <glyph glyph-name="uniE612" unicode="&#xe612;" 
+d="M774 336q4 -6 7 -12.5t4 -13.5t0.5 -14t-2.5 -13.5t-5.5 -13t-9.5 -11.5q0 -1 -1 -1l-427 -428q-28 -28 -65 -13q-11 5 -19 13q-18 18 -18 42.5t17 41.5l387 387l-387 387q-17 17 -17 41.5t17.5 42t42 17.5t42.5 -17l427 -428q1 0 1 -1z" />
+  </font>
+</defs></svg>

@@ -11,5 +11,10 @@
         color: #b0b0b0;
         color: #b0b0b0;
         line-height: 38rem / $pxConvertRem;
         line-height: 38rem / $pxConvertRem;
         font-size: 24rem / $pxConvertRem;
         font-size: 24rem / $pxConvertRem;
+        .iconfont {
+            margin: 0 4px 0 0;
+            vertical-align: 9%;
+            font-size: 16rem / $pxConvertRem;
+        }
     }
     }
 }
 }

+.article-type-five {
+    padding: 0 0 0 15rem / $pxConvertRem;
+}
+
+.good-info {
+    float: left;
+    width: 276rem / $pxConvertRem;
+    height: 466rem / $pxConvertRem;
+    margin: 0 14rem / $pxConvertRem;
+}
+
+.good-detail-img {
+    position: relative;
+
+    .good-islike {
+        position: absolute;
+        top: 10rem / $pxConvertRem;
+        right: 10rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        color: #b0b0b0;
+        text-decoration: none;
+    }
+    
+    .good-like {
+        color: #d72928;
+    }
+
+    img {
+        display: block;
+        width: 100%;
+        height: 366rem / $pxConvertRem;
+    }
+
+}
+
+.good-detail-img .tag-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .good-tag {
+        position: relative;
+        padding: 0 10rem / $pxConvertRem;
+        height: 24rem / $pxConvertRem;
+        line-height: 24rem / $pxConvertRem;
+        color: #fff;
+        font-size: 18rem / $pxConvertRem;
+
+        span {
+            position: relative;
+            z-index: 2;
+            float: left;
+        }
+
+        em {
+            position: relative;
+            z-index: 2;
+            float: right;
+        }
+
+        i {
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            opacity: 0.8;
+        }
+    }
+
+    .new-tag i {          
+        background: #93c163;
+    }
+
+    .sale-tag i {
+        background: #dc524f;
+    }
+
+    .few-tag i {
+        background: #fdaf3a;
+    }
+}
+
+.good-detail-text {
+
+    .name a{
+        display: block;
+        line-height: 56rem / $pxConvertRem;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-decoration: none;
+        font-size: 22rem / $pxConvertRem;
+        color: #444;
+    }
+
+    .price{
+        line-height: 22rem / $pxConvertRem;
+        font-size: 22rem / $pxConvertRem;
+
+        .sale-price{
+            color: #d62927;
+        }
+
+        .market-price{
+            margin: 0 0 0 5rem / $pxConvertRem;
+            color: #b0b0b0;
+            text-decoration:line-through;
+        }
+    }
+}

 $pxConvertRem : 40;
 $pxConvertRem : 40;
 
 
-.article-type-one .img{
+.article-type-one {
+    margin: 0 0 20rem / $pxConvertRem 0;
+}
+.article-type-one .img {
     width: 640rem / $pxConvertRem;
     width: 640rem / $pxConvertRem;
     height: 640rem / $pxConvertRem;
     height: 640rem / $pxConvertRem;
 }
 }

+.article-type-two {
+    margin: 20rem / $pxConvertRem 30rem / $pxConvertRem;
+    line-height: 46rem / $pxConvertRem;
+    font-size: 28rem / $pxConvertRem;
+    color: #444;
+}

@@ -32,5 +32,29 @@ body {
 } 
 } 
 
 
 
 
+/**
+ * 字体图标样式
+ */
+@font-face {font-family: "iconfont";
+  src: url('../fonts/iconfont.eot'); /* IE9*/
+  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
+  url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+  url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-sharedviewicon:before { content: "\e60c"; }
+.icon-sharedtimeicon:before { content: "\e60d"; }
+.icon-sharedlikebuttomhighlighted:before { content: "\e60f"; }
+.icon-sharedenterbuttomnormal:before { content: "\e612"; }
+
 
 
 
 

 {{# detail}}
 {{# detail}}
     {{> article_author}}
     {{> article_author}}
-    {{> article_title}}
     {{> article}}
     {{> article}}
 {{/ detail}}
 {{/ detail}}

 <div class="article-title partial">
 <div class="article-title partial">
     <p class="title">{{title}}</p>
     <p class="title">{{title}}</p>
-    <p class="date-pageview">{{publishTime}} {{pageView}}</p>
+    <p class="date-pageview"><i class="iconfont">&#xe60d;</i>{{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont">&#xe60c;</i>{{pageView}}</p>
 </div>
 </div>

 {{# type5}}
 {{# type5}}
-    <div class="article-type-5">
+    <div class="article-type-five clearfix">
         {{# products}}
         {{# products}}
             {{> good_info}}
             {{> good_info}}
         {{/ products}}
         {{/ products}}

 <div class="good-info">
 <div class="good-info">
     <div class="good-detail-img">
     <div class="good-detail-img">
+        {{# isLike}}
+            <a class="good-islike good-like iconfont" href="javascript:;">&#xe60f;</a>
+        {{/ isLike}}
+        {{^ isLike}}
+            <a class="good-islike iconfont" href="javascript:;">&#xe60f;</a>
+        {{/ isLike}}
         <a class="good-thumb" href="{{url}}">
         <a class="good-thumb" href="{{url}}">
             <img src="{{thumb}}">
             <img src="{{thumb}}">
         </a>
         </a>
         <div class="tag-container">
         <div class="tag-container">
             {{# isNew}}
             {{# isNew}}
-                <div class="new-tag">
+                <div class="good-tag new-tag clearfix">
+                    <i></i>
                     <span>新品到着</span>
                     <span>新品到着</span>
-                    <span>NEW</span>
+                    <em>NEW</em>
                 </div>
                 </div>
             {{/ isNew}}
             {{/ isNew}}
             {{# isSale}}
             {{# isSale}}
-                <div class="sale-tag">
+                <div class="good-tag sale-tag clearfix">
+                    <i></i>
                     <span>打折商品</span>
                     <span>打折商品</span>
-                    <span>SALE</span>
+                    <em>SALE</em>
                 </div>
                 </div>
             {{/ isSale}}
             {{/ isSale}}
             {{# isFew}}
             {{# isFew}}
-                <div class="few-tag">
+                <div class="good-tag few-tag clearfix">
+                    <i></i>
                     <span>即将售罄</span>
                     <span>即将售罄</span>
-                    <span>FEW</span>
+                    <em>FEW</em>
                 </div>
                 </div>
             {{/ isFew}}
             {{/ isFew}}
         </div>
         </div>
@@ -29,8 +38,8 @@
             <a href="{{url}}">{{name}}</a>
             <a href="{{url}}">{{name}}</a>
         </div>
         </div>
         <div class="price">
         <div class="price">
-            <span class="sale-price">{{salePrice}}</span>
-            <span class="price">{{price}}</span>
+            <span class="sale-price">￥{{salePrice}}</span>
+            <span class="market-price">￥{{price}}</span>
         </div>
         </div>
     </div>
     </div>
 </div>
 </div>