个人中心首页 切图

 .yoho-footer {
     font-size: 12px;
     background-color: #fff;
-    margin-bottom: 2.5rem;
 
     .op-row {
         position: relative;

-.mine-page {
+$vip: sprite-map("me/vip/*.png");
+.my-page {
+    background: #f0f0f0;
+
     .user-info {
+        position: relative;
         padding: 0 30rem / $pxConvertRem;
         color: #fff;
         background: #ccc;
@@ -15,8 +19,124 @@
             border-radius: 50%;
             border: 8rem / $pxConvertRem solid #a7a8a9; 
         }
+
         .username {
             padding: 0 16rem / $pxConvertRem;
         }
+
+        .vip-icon {
+            display: inline-block;
+            width: pxToRem(70px);
+            height: pxToRem(30px);
+            vertical-align: middle;
+        }
+
+        .vip-3 {
+            @include rem-sprite($vip, vip-3); 
+        }
+
+        .vip-2 {
+            @include rem-sprite($vip, vip-2);
+        }
+
+        .vip-1 {
+            @include rem-sprite($vip, vip-1);
+        }
+
+        .more-icon {
+            position: absolute;
+            top: 0;
+            right: 30rem / $pxConvertRem;
+        }
+    }
+
+    .my-link {
+        margin-bottom: pxToRem(30px);
+        padding: pxToRem(6px) 0;
+        text-align: center;
+        background: #121314;
+        height: pxToRem(76px);
+
+        .link-item {
+            float: left;
+            color: #fff;
+            font-size: pxToRem(22px);
+            line-height: pxToRem(38px);
+            width: pxToRem(213px);
+
+        }
+    }
+
+    .my-order {
+        margin-bottom: pxToRem(30px);
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+
+        .order-title {
+            padding: 0 pxToRem(30px);
+            font-size: pxToRem(32px);
+            line-height: pxToRem(88px);
+
+            span {
+                color: #e0e0e0;
+                float: right;
+            }
+        }
+
+        .order-type {
+            padding: pxToRem(20px) pxToRem(30px);
+            text-align: center;
+            border-top: 1px solid #e0e0e0;
+
+            .type-item {
+                float: left;
+                color: #444;
+                font-size: pxToRem(28px);
+                line-height: 1.5;
+                width: pxToRem(193px);
+            }
+
+            .iconfont {
+                font-size: pxToRem(60px);
+            }
+        }
+    }
+
+    .group-list {
+        margin-bottom: pxToRem(30px);
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+
+        .list-item {
+            position: relative;
+            padding: 0 pxToRem(30px);
+            font-size: pxToRem(32px);
+            line-height: pxToRem(88px);
+            &:after {
+                content: '';
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                width: pxToRem(540px);
+                height: 0;
+                border-top: 1px solid #e0e0e0;
+            }
+
+            &:last-child:after {
+                content: none;
+            }
+        }
+
+        .icon {
+            margin-right: pxToRem(10px);
+            font-size: pxToRem(50px);
+        }
+
+        .num {
+            color: #e0e0e0;
+            float: right;
+        }
     }
 }
\ No newline at end of file

-@import "home", "vip-grade", "order";
\ No newline at end of file
+@import "home", "vip-grade", "order", "recommend-for-you";
\ No newline at end of file

+.recommend-for-you {
+    padding: pxToRem(30px) 0 pxToRem(10px);
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+    background: #fff;
+
+    .title {
+        font-size: pxToRem(32px);
+        line-height: pxToRe(88px);
+        text-align: center;
+        color: #444;
+        font-weight: bold;
+    }
+
+    .swiper-recommend {
+        padding: pxToRem(20px) pxToRem(30px);
+    }
+
+    .img-box {
+        display: table-cell;
+        width: pxToRem(156px);
+        height: pxToRem(206px);
+        vertical-align: middle;
+        text-align: center;
+    }
+
+    .price {
+        margin-top: pxToRem(20px);
+        font-size: pxToRem(20px);
+        line-height: 1;
+
+        .sale-price {
+            color: #d9134f;
+        }
+
+        .old-price {
+            float: right;
+            color: #ededed;
+        }
+
+        .no-price {
+            color: #444;
+        }
+    }
+}
\ No newline at end of file

 {{> layout/header}}
-    <div class="mine-page yoho-page">
-        <div class="mine-header">
+    <div class="my-page yoho-page">
+        <div class="my-header">
             <div class="user-info">
                 <img class="user-avatar" src="{{head_ico}}">
                 <span class="username">{{profile_name}}</span>
-                {{#user_info}}
-                <span class="user-level user-level-{{cur_level}}"></span>
-                {{/user_info}}
+                {{#vip_info}}
+                <span class="vip-icon vip-{{next_level}}"></span>
+                {{/vip_info}}
+                <div class="iconfont more-icon">&#xe604;</div>
             </div>
-            <div class="iconfont more-icon">2</div>
         </div>
+        <div class="my-link clearfix">
+            <a class="link-item" href="/home">
+                15
+                <p>收藏的商品</p>
+            </a>
+            <a class="link-item" href="/home">
+                6
+                <p>收藏的品牌</p>
+            </a>
+            <a class="link-item" href="/home">
+                8
+                <p>浏览记录</p>
+            </a>
+        </div>
+        <div class="my-order">
+            <div class="order-title">
+                我的订单
+                <span class="iconfont">
+                    查看全部订单 &#xe604;
+                </span>
+            </div>
+            <div class="order-type clearfix">
+                <a class="type-item" href="/home/order">
+                    <span class="iconfont">&#xe620;</span>
+                    <br>代付款
+                </a>
+                <a class="type-item" href="/home/order">
+                    <span class="iconfont">&#xe620;</span>
+                    <br>代发货
+                </a>
+                <a class="type-item" href="/home/order">
+                    <span class="iconfont">&#xe620;</span>
+                    <br>代收货
+                </a>
+            </div>
+        </div>
+        <div class="group-list">
+            <div class="list-item">
+                <span class="iconfont icon">&#xe620;</span>
+                地址管理
+                <span class="iconfont num">3 &#xe604;</span>
+            </div>
+        </div>
+        <div class="group-list">
+            <div class="list-item">
+                <span class="iconfont icon">&#xe620;</span>
+                优惠券
+                <span class="iconfont num">6 &#xe604;</span>
+            </div>
+            <div class="list-item">
+                <span class="iconfont icon">&#xe620;</span>
+                YOHO 币
+                <span class="iconfont num">8 &#xe604;</span>
+            </div>
+        </div>
+        <div class="group-list">
+            <div class="list-item">
+                <span class="iconfont icon">&#xe620;</span>
+                消息
+                <span class="iconfont num">3 &#xe604;</span>
+            </div>
+        </div>
+        <div class="group-list">
+            <div class="list-item">
+                <span class="iconfont icon">&#xe620;</span>
+                在线客服
+                <span class="iconfont num">3 &#xe604;</span>
+            </div>
+        </div>
+        <div class="group-list">
+            <div class="list-item">
+                <span class="iconfont icon">&#xe620;</span>
+                帮助
+                <span class="iconfont num">3 &#xe604;</span>
+            </div>
+        </div>
+        
+        {{> me/recommend-for-you}}
     </div>
 {{> layout/footer}}
\ No newline at end of file

-{{#pageHeader}} 
-{{# isShow}}
+{{#pageHeader}}
 <header class="yoho-header{{#if boys}} boys{{/if}}{{#if girls}} girls{{/if}}{{#if kids}} kids{{/if}}{{#if lifeStyle}} life-style{{/if}}">
     {{#if navBack}}
     <a href="javascript:history.go(-1);" class="nav-back"></a>
@@ -11,5 +10,4 @@
     <p class="nav-title">{{.}}</p>
     {{/navTitle}}
 </header>
-{{/ isShow}}
 {{/pageHeader}}
\ No newline at end of file

+{{# recommendForYou}}
+    <div class="recommend-for-you">
+        <div class="title">为您优选新品</div>
+        <div class="swiper-recommend">
+            <div class="swiper-wrapper">
+                <div class="swiper-slider">
+                    <div class="img-box">
+                        <img src="http://temp.im/156x206">
+                    </div>
+                    <div class="price">
+                        <span class="sale-price">¥199</span>
+                        <span class="old-price">¥233</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{{/ recommendForYou}}
\ No newline at end of file

@@ -19,17 +19,40 @@ class HomeController extends AbstractAction
      */
     public function indexAction()
     {
-	    // $uid = $uid = $this->getUid();
+	    // $uid = $this->getUid();
 	    $uid = 967016;
 
 	    $data = \Index\UserModel::getUserProfileData($uid);
 
 	    // print_r($data);
-	    $data['homeHeader'] = array('searchUrl' => Helpers::url('/search', null, 'search'));
+	    $data['homeHeader'] = array(
+	    	'myHomePage' => true,
+	    	'searchUrl' => Helpers::url('/search', null, 'search')
+	    );
+
+        $data['recommendForYou'] = array(
+        	'recommendList' => array(
+        		array(
+        			'img' => ''
+        		),
+        		array(
+        			'img' => ''
+        		),
+        		array(
+        			'img' => ''
+        		),
+        		array(
+        			'img' => ''
+        		),
+        		array(
+        			'img' => ''
+        		)
+        	)
+        );
         $data['pageFooter'] = true;
 
         // 设置网站标题
-        $this->setTitle('男生首页');
+        $this->setTitle('个人中心');
 
         $this->_view->display('index', $data);
     }