'new-icon'

dist/css/appointment.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/bind.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/common.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/coupon.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/fillInformation.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;
@@ -105,7 +105,6 @@ body {
 }
 /*个人资料页面*/
 .personalData ul li {
-  font-size: 0.85333333rem;
   background: #ffffff;
   border-bottom: 1px solid  #cccccc;
   height: 2.4rem;
@@ -114,11 +113,13 @@ body {
   position: relative;
 }
 .personalData ul li em {
-  /*     position: absolute;
-      .px1rem(top,30);
-      .px1rem(right,20);*/
   float: right;
 }
+.personalData ul li > span {
+  font-size: 0.69333333rem;
+  height: 2.4rem;
+  line-height: 2.4rem;
+}
 .personalData ul li > span > b {
   font-weight: 400;
   color: #cfcfcf;
@@ -128,10 +129,16 @@ body {
   max-width: 13.86666667rem;
   overflow: hidden;
 }
+.personalData ul li i {
+  display: inline-block;
+  float: right;
+  margin-top: 0.90666667rem;
+}
 .personalData ul li:first-child {
   height: 4.53333333rem;
   padding: 0.96rem 0.53333333rem;
   padding: 0.96rem 1.06666667rem 0.96rem 0.53333333rem;
+  font-size: 0.8rem;
 }
 .personalData ul li:first-child > div {
   height: 2.66666667rem;
@@ -140,6 +147,11 @@ body {
   background-color: #dadada;
   float: left;
 }
+.personalData ul li:first-child > i {
+  display: inline-block;
+  float: right;
+  margin-top: 0.90666667rem;
+}
 /*个人简介页面*/
 .brief {
   height: 5.33333333rem;

dist/css/master.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/mixins.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/myOrder.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/personalPage.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/photographyPage.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;
@@ -245,6 +245,7 @@ body {
 }
 .user .user-detail {
   margin-bottom: 0.8rem;
+  text-align: center;
 }
 .user .user-detail > strong {
   display: block;
@@ -256,13 +257,26 @@ body {
 }
 .user .user-detail > em > i {
   display: inline-block;
+  margin: 0.05333333rem 0.16rem 0rem 0rem;
 }
 .user .user-detail .fiveStars {
-  display: block;
+  display: inline-block;
   height: 0.48rem;
-  margin: 0.4rem 8.61333333rem 0.53333333rem 8.61333333rem;
-  background-repeat: no-repeat;
-  background-image: url('../../dist/img/sprites-sale.png');
+  width: 3.2rem;
+  overflow: hidden;
+  background: url("../../dist/img/sprites-sale.png") no-repeat 0px 1px;
+  /*五星好评媒体样式*/
+  margin: 0.4rem 8.13333333rem 0.26666667rem 8.8rem;
+}
+@media (min-width: 760px) and (max-width: 1540px) {
+  .user .user-detail .fiveStars {
+    background: url("../../dist/img/sprites-sale-2x.png") no-repeat 0px 0px;
+  }
+}
+@media (min-width: 1541px) {
+  .user .user-detail .fiveStars {
+    background: url("../../dist/img/sprites-sale-3x.png") no-repeat 0px 0px;
+  }
 }
 .user .sex {
   margin-right: 0.26666667rem;
@@ -357,40 +371,56 @@ body {
   top: 0px;
   left: 0px;
 }
-.setsDetails > .setsPro > div {
+.setsDetails > .setsPro > div.transparent {
   position: absolute;
   z-index: 5;
   width: 100%;
   bottom: 0rem;
-  opacity: .5;
+  opacity: .7;
+  height: 3.2rem;
+  margin: 0.8rem 0rem 0rem 0rem;
+  padding: 0rem 0.53333333rem;
+  background: #353535;
+  color: #ffffff;
+}
+.setsDetails > .setsPro > div.content {
+  position: absolute;
+  z-index: 8;
+  width: 100%;
+  bottom: 0rem;
   height: 3.2rem;
   margin: 0.8rem 0rem 0rem 0rem;
   padding: 0rem 0.53333333rem;
-  background: #000000;
 }
-.setsDetails > .setsPro > div > h2 {
+.setsDetails > .setsPro > div.content > h2 {
   height: 1.6rem;
   line-height: 1.6rem;
+  color: #ffffff;
+  font-weight: 400;
 }
-.setsDetails > .setsPro > div p {
+.setsDetails > .setsPro > div.content p {
   height: 1.6rem;
   line-height: 1.6rem;
+  color: #ffffff;
+  font-size: 0.8rem;
 }
-.setsDetails > .setsPro > div p > b,
-.setsDetails > .setsPro > div p > em {
+.setsDetails > .setsPro > div.content p > b,
+.setsDetails > .setsPro > div.content p > em {
   float: right;
   display: inline-block;
   font-weight: 400;
-  font-size: 0.74666667rem;
+  font-size: 0.69333333rem;
   margin-right: 0.8rem;
+  color: #ffffff;
 }
-.setsDetails > .setsPro > div p > b.nowPrice {
+.setsDetails > .setsPro > div.content p > b.nowPrice {
   display: inline-block;
   float: left;
   color: #ff7272;
-  font-size: 1.12rem;
+  font-size: 0.96rem;
 }
-.setsDetails > .setsPro > div p > b.oldPrice {
+.setsDetails > .setsPro > div.content p > b.oldPrice {
   float: left;
-  font-size: 0.85333333rem;
+  font-size: 0.8rem;
+  color: #ffffff;
 }

dist/css/sale.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/search.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;
@@ -105,6 +105,9 @@ body {
   padding-left: 0.42666667rem;
   float: left;
 }
+.header > div b {
+  display: inline-block;
+}
 .header > div > input {
   color: #878787;
   border: none;
@@ -152,6 +155,7 @@ body {
 .search {
   margin-top: 0.8rem;
   margin-left: 0.53333333rem;
+  font-size: 0.74666667rem;
   position: relative;
 }
 .search > div > h2 {
@@ -159,6 +163,11 @@ body {
   line-height: 1.06666667rem;
   margin-top: 0.8rem;
   margin-bottom: 0.53333333rem;
+  font-size: 0.8rem;
+}
+.search > div > h2 > i {
+  display: inline-block;
+  margin-right: 0.26666667rem;
 }
 .search > div > a {
   display: inline-block;
@@ -166,6 +175,9 @@ body {
   border-radius: 0.10666667rem;
   padding: 0.08rem 0.53333333rem;
   margin: 0.08rem 0.26666667rem 0.08rem 0rem;
+  margin: 0.4rem 0.26666667rem;
+  padding: 0.13333333rem 1.06666667rem;
+  border-radius: 0.21333333rem;
 }
 .searchDetails {
   color: #878787;

dist/css/style.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

dist/css/workDetail.css

@@ -28,8 +28,8 @@
 .bg {
   display: block;
   width: 100%;
-  height: 0.42666667rem;
-  background-color: #e5e5e5;
+  height: 0.32rem;
+  background-color: #f9f9f9;
 }
 .gap {
   display: block;

src/js/public.js

@@ -41,9 +41,9 @@ window.onload=function() {
     var swidth=width/dpr;
     //alert(width/dpr);
 
-    if(swidth<410){
+    if(swidth<360){
         link.href="../../dist/css/icon.css";
-    }else if(swidth>=410 && swidth<=770){
+    }else if(swidth>=360 && swidth<=770){
         link.href="../../dist/css/icon2x.css";
     }else if(swidth>770){
         link.href="../../dist/css/icon3x.css";

src/less/fillInformation.less

@@ -27,7 +27,6 @@ body{
 /*个人资料页面*/
 .personalData{
   ul li{
-    .px1rem(font-size,32);
     background: #ffffff;
     border-bottom:1px solid  #cccccc;
     .px1rem(height,90);
@@ -35,11 +34,13 @@ body{
     .px4rem(padding,0,40,0,20);
     position: relative;
     em{
- /*     position: absolute;
-      .px1rem(top,30);
-      .px1rem(right,20);*/
       float:right;
     }
+    >span{
+      .px1rem(font-size,26);
+      .px1rem(height,90);
+      .px1rem(line-height,90);
+    }
     >span>b{
       font-weight: 400;
       color: #cfcfcf;
@@ -49,15 +50,26 @@ body{
      .px1rem(max-width,520);
       overflow: hidden;
     }
+    i{
+      display: inline-block;
+      float:right;
+      .px1rem(margin-top,34);
+    }
   }
   ul li:first-child{
     .px1rem(height,170);
     .px2rem(padding,36,20);
     .px4rem(padding,36,40,36,20);
+    .px1rem(font-size,30);
     >div{
        .circlePortrait(100);
         float:left;
     }
+    >i{
+      display: inline-block;
+      float:right;
+      .px1rem(margin-top,34);
+    }
   }
 }
 /*个人简介页面*/

src/less/mixins.less

@@ -100,7 +100,7 @@
   background-color:@color;
 }
 .bg{
-  .spacing(16,#e5e5e5);
+  .spacing(12,#f9f9f9);
 }
 .gap{
   .spacing(12,#e7e7e7);

src/less/photographyPage.less

@@ -26,6 +26,7 @@ body{
   }
   .user-detail {
     .px1rem(margin-bottom, 30);
+    text-align: center;
     >strong{
       display: block;
       font-weight: 400;
@@ -35,14 +36,12 @@ body{
       display: block;
       >i{
         display: inline-block;
+        .px4rem(margin,2,6,0,0);
       }
     }
     .fiveStars{
-      display: block;
-      .px1rem(height,18);
-      .px4rem(margin,15,323,20,323);
-      background-repeat: no-repeat;
-      background-image: url('../../dist/img/sprites-sale.png');
+      .fiveStars(18,120);
+      .px4rem(margin,15,305,10,330);
     }
   }
   .sex {
@@ -129,39 +128,55 @@ body{
       top:0px;
       left:0px;
     }
-    >div{
+    >div.transparent{
+      position: absolute;
+      z-index:5;
+      width:100%;
+      .px1rem(bottom,0);
+      opacity: .7;
+      .px1rem(height,120);
+      .px4rem(margin,30,0,0,0);
+      .px2rem(padding,0,20);
+      background: #353535;
+      color:#ffffff;
+    }
+    >div.content{
      position: absolute;
-      z-index: 5;
+      z-index: 8;
       width:100%;
      .px1rem(bottom,0);
-      opacity: .5;
       .px1rem(height,120);
       .px4rem(margin,30,0,0,0);
       .px2rem(padding,0,20);
-      background: #000000;
       >h2{
         .px1rem(height,60);
         .px1rem(line-height,60);
+        color:#ffffff;
+        font-weight:400;
       }
       p{
         .px1rem(height,60);
         .px1rem(line-height,60);
+        color:#ffffff;
+        .px1rem(font-size,30);
         >b,>em{
           float:right;
           display: inline-block;
           font-weight: 400;
-          .px1rem(font-size,28);
+          .px1rem(font-size,26);
           .px1rem(margin-right,30);
+          color:#ffffff;
         }
         >b.nowPrice{
           display: inline-block;
           float:left;
           color:#ff7272;
-          .px1rem(font-size,42);
+          .px1rem(font-size,36);
         }
         >b.oldPrice{
           float:left;
-          .px1rem(font-size,32);
+          .px1rem(font-size,30);
+          color:#ffffff;
         }
       }
    }

src/less/search.less

@@ -24,6 +24,9 @@ body{
     background: #ececec;
     .px1rem(padding-left, 16);
     float:left;
+    b{
+      display: inline-block;
+    }
   }
   >div>input {
     color:#878787;
@@ -74,15 +77,24 @@ body{
 .search{
   .px1rem(margin-top,30);
   .px1rem(margin-left,20);
+  .px1rem(font-size,28);
   position: relative;
   >div>h2{
     .px1rem(height,40);
     .px1rem(line-height,40);
     .px1rem(margin-top,30);
     .px1rem(margin-bottom,20);
+    .px1rem(font-size,30);
+    >i{
+      display: inline-block;
+      .px1rem(margin-right,10);
+    }
   }
  >div>a{
   .label;
+   .px2rem(margin,15,10);
+   .px2rem(padding,5,40);
+   .px1rem(border-radius,8);
   }
 }
 .searchDetails{

src/pages/personalData.html

@@ -8,6 +8,7 @@
     <title>米拍：个人资料</title>
     <link rel="stylesheet" href="../../dist/css/base.css">
     <link rel="stylesheet" href="../../dist/css/fillInformation.css">
+    <link rel="stylesheet" href="../../dist/css/icon.css" id="my_link">
 </head>
 <body>
 <header class="header">
@@ -19,31 +20,32 @@
            <div>
                <img src="" alt=""/>
            </div>
-           <em>修改头像<i></i></em>
+           <i class="icon-order_next"></i><em>修改头像</em>
        </li>
        <li>
-           <span>昵称<b>太阳卷卷毛</b><i></i></span>
+           <span>昵称<i class="icon-order_next"></i><b>太阳卷卷毛</b></span>
        </li>
        <li>
-           <span>性别<b>女</b><i></i></span>
+           <span>性别<i class="icon-order_next"></i><b>女</b></span>
        </li>
-       <span class="gap"></span>
+       <span class="bg"></span>
        <li>
-           <span>手机<b>15208333745</b><i></i></span>
+           <span>手机<i class="icon-order_next"></i><b>15208333745</b></span>
        </li>
        <li>
-       <span>地址<b>四川成都</b><i></i></span>
+       <span>地址<i class="icon-order_next"></i><b>四川成都</b></span>
        </li>
-       <span class="gap"></span>
+       <span class="bg"></span>
        <li>
-           <span>兴趣分类<b>婚纱 儿童 毕业</b><i></i></span>
+           <span>兴趣分类<i class="icon-order_next"></i><b>婚纱 儿童 毕业</b></span>
        </li>
        <li>
-           <span>简介<b>毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照……</b><i></i></span>
+           <span>简介<i class="icon-order_next"></i><b>毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照毕业照……</b></span>
        </li>
    </ul>
 </section>
 <script src="../../src/js/jquery.min.js"></script>
 <script src="../../src/js/flexible.js"></script>
+<script src="../../src/js/public.js"></script>
 </body>
 </html>
\ No newline at end of file

src/pages/photographyPage.html

@@ -48,7 +48,8 @@
     </h2>
     <div class="setsPro">
         <img src="../img/tokyo.png" alt=""/>
-        <div>
+        <div class="transparent"></div>
+        <div class="content">
             <h2>套系名称</h2>
           <p>
               <b class="nowPrice">￥666</b>
@@ -60,7 +61,8 @@
     </div>
     <div class="setsPro">
         <img src="../img/tokyo.png" alt=""/>
-        <div>
+        <div class="transparent"></div>
+        <div class="content">
             <h2>套系名称</h2>
             <p>
                 <b class="nowPrice">￥666</b>

src/pages/register.html

@@ -8,6 +8,7 @@
     <title>米拍:注册页面</title>
     <link rel="stylesheet" href="../../dist/css/base.css">
     <link rel="stylesheet" href="../../dist/css/bind.css">
+    <link rel="stylesheet" href="../../dist/css/icon.css" id="my_link">
 </head>
 <body>
 <header class="header">
@@ -15,6 +16,7 @@
 </header>
 <section class="login">
   <form action="" id="form">
+
     <input class="phone" type="text" placeholder="手机号" name="phone" onblur="regValidation(this,0,phones)"/>
       <p class="_regular"></p>
     <input class="password" type="password" name="password" placeholder="密码（请输入6-20位密码）" onblur="regValidation(this,1,passwords)"/>

src/pages/search.html

@@ -8,21 +8,22 @@
     <title>米拍：搜索页面</title>
     <link rel="stylesheet" href="../../dist/css/base.css">
     <link rel="stylesheet" href="../../dist/css/search.css">
+    <link rel="stylesheet" href="../../dist/css/icon.css" id="my_link">
 </head>
 <body>
 <header class="header">
     <div>
-       <span>套系<b></b></span><input type="search"  />
+       <span>套系<b class="icon-icon_exp"></b></span><input type="search"  />
     </div>
     <b>取消</b>
 </header>
 <section class="search">
    <div class="hotSearch">
-       <h2><i></i>热门搜索</h2>
+       <h2><i class="icon-HOT"></i>热门搜索</h2>
        <a href="">婚纱照</a><a href="">婚纱照</a><a href="">婚纱照</a><a href="">婚纱照</a><a href="">婚纱照</a>
    </div>
     <div class="nearSearch">
-        <h2><i></i>最近搜索</h2>
+        <h2><i class="icon-icon_search"></i>最近搜索</h2>
         <a href="">毕业照</a><a href="">亲子照</a><a href="">怀孕照</a>
     </div>
 </section>