Modify the style.

dlstatic
1 parent 0f0efb30
Showing 6 changed files with 92 additions and 39 deletions
css/common.css
css/common.less
html/index.html
images/dist/boxbor.png
images/dist/sp.jpg
images/src/wap/linkbig.png
@@ -1231,11 +1231,16 @@ Pagination Styles
   border-radius: 8px;
   margin: 5px 0 10px 0;
 }
+.redtheme .redrow .rbox {
+  background: url(../images/dist/boxbor.png) no-repeat right top;
+  background-size: 155px;
+}
 .redtheme .redrow .rtitle {
-  background-color: #e0ce8d;
-  color: #7e0907;
+  text-align: center;
   margin-left: 10px;
-  padding: 20px 5px;
+  padding: 10px 5px;
+  background: url(../images/dist/bor.png) 0 bottom no-repeat;
+  background-size: 134px;
 }
 .redtheme .redrow .rtitle > span {
   display: block;
@@ -1243,29 +1248,38 @@ Pagination Styles
   height: 40px;
   font-size: 14px;
 }
+.redtheme .redrow .rrt {
+  background-color: #de0010;
+  color: #fff1d6;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  margin: 5px 5px 0 10px;
+  letter-spacing: 5px;
+}
 .redtheme .redrow .rprice {
-  background-color: #7e0907;
-  color: #fff;
+  color: #d50902;
   margin-left: 10px;
-  line-height: 40px;
-  font-size: 15px;
-  text-align: right;
-  padding-right: 10px;
+  line-height: 38px;
+  font-size: 16px;
+  text-align: center;
 }
 .redtheme .redrow .rprice .big {
-  font-size: 24px;
+  font-size: 30px;
 }
 .redtheme .redrow .icon_link {
   background: url(../images/src/wap/linkbig.png) no-repeat 0 0;
-  background-size: 72px;
-  width: 72px;
-  height: 17px;
+  background-size: 90px;
+  width: 90px;
+  height: 18px;
   display: inline-block;
 }
 .redtheme .redrow .linkword {
-  text-align: right;
-  margin-top: 10px;
-  padding-right: 5px;
+  text-align: center;
+  padding: 5px 5px 0 0;
+  background: url(../images/dist/bor.png) 0 top no-repeat;
+  background-size: 134px;
+  margin-left: 10px;
 }
 .redtheme .redline {
   height: 250px;
@@ -1298,12 +1312,24 @@ Pagination Styles
 }
 .redtheme .redline .rprice {
   color: #d50902;
-  font-size: 15px;
-  text-align: center;
+  font-size: 14px;
+  text-align: right;
+  padding-right: 5px;
+  position: relative;
 }
 .redtheme .redline .rprice .big {
   font-size: 24px;
 }
+.redtheme .redline .rprice > .rrt {
+  position: absolute;
+  color: #fadcc3;
+  left: 0;
+  top: 8px;
+  font-size: 13px;
+  padding: 1px 3px;
+  background: url(../images/dist/sp.jpg) no-repeat 0 0;
+  background-size: 42px;
+}
 .redtheme .redline .linkword {
   text-align: center;
   position: relative;
@@ -88,11 +88,16 @@
     background: #fff1d6;
     border-radius: 8px;
     margin: 5px 0 10px 0;
+    .rbox {
+      background: url(../images/dist/boxbor.png) no-repeat right top;
+      background-size: 155px;
+    }
     .rtitle {
-      background-color: #e0ce8d;
-      color: #7e0907;
+      text-align: center;
       margin-left: 10px;
-      padding: 20px 5px;
+      padding: 10px 5px;
+      background: url(../images/dist/bor.png) 0 bottom no-repeat;
+      background-size: 134px;
       >span {
         display: block;
         overflow: hidden;
@@ -100,29 +105,38 @@
         font-size: 14px;
       }
     }
+    .rrt {
+      background-color: #de0010;
+      color: #fff1d6;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      margin: 5px 5px 0 10px;
+      letter-spacing: 5px;
+    }
     .rprice {
-      background-color: #7e0907;
-      color: #fff;
+      color: #d50902;
       margin-left: 10px;
-      line-height: 40px;
-      font-size: 15px;
-      text-align: right;
-      padding-right: 10px;
+      line-height: 38px;
+      font-size: 16px;
+      text-align: center;
       .big {
-        font-size: 24px;
+        font-size: 30px;
       }
     }
     .icon_link {
       background: url(../images/src/wap/linkbig.png) no-repeat 0 0;
-      background-size: 72px;
-      width: 72px;
-      height: 17px;
+      background-size: 90px;
+      width: 90px;
+      height: 18px;
       display: inline-block;
     }
     .linkword {
-      text-align: right;
-      margin-top: 10px;
-      padding-right: 5px;
+      text-align: center;
+      padding: 5px 5px 0 0;
+      background: url(../images/dist/bor.png) 0 top no-repeat;
+      background-size: 134px;
+      margin-left: 10px;
     }
   }
   .redline {
@@ -154,13 +168,24 @@
       background-size: contain;
     }
     .rprice {
-      text-align: center;
       color: #d50902;
-      font-size: 15px;
-      text-align: center;
+      font-size: 14px;
+      text-align: right;
+      padding-right: 5px;
+      position: relative;
       .big {
         font-size: 24px;
       }
+      >.rrt {
+        position: absolute;
+        color: #fadcc3;
+        left: 0;
+        top: 8px;
+        font-size: 13px;
+        padding: 1px 3px;
+        background: url(../images/dist/sp.jpg) no-repeat 0 0;
+        background-size: 42px;
+      }
     }
     .linkword {
       text-align: center;
@@ -27,7 +27,7 @@
           <div class="spec2">
             <img src="../temp/fnow.png" alt="" />
           </div>
-          <div class="spec2">
+          <div class="spec2 rbox">
             <p class="rtitle">
               <span>
                 精品水果里和
@@ -35,6 +35,7 @@
                 精品水果里和
               </span>
             </p>
+            <p class="rrt">特供价</p>
             <p class="rprice">
               <span>￥</span><span class="big">2000</span><span>.00</span>
             </p>
@@ -49,7 +50,7 @@
           <div class="spec2">
             <img src="../temp/fnow.png" alt="" />
           </div>
-          <div class="spec2">
+          <div class="spec2 rbox">
             <p class="rtitle">
               <span>
                 精品水果里和
@@ -80,6 +81,7 @@
               </span>
             </p>
             <p class="rprice">
+              <span class="rrt">特供价</span>
               <span>￥</span><span class="big">2000</span><span>.00</span>
             </p>
             <p class="linkword">