chenchao / YOHOBUYPC · Commits

Go to a project

Authored by ccbikai
Commit be8d23e700c195e5d10f1e018548041b7f182a1e 1 parent a1df76f8

个人中心首页 切图

Inline Side-by-side
Showing 8 changed files with 295 additions and 14 deletions
1 .yoho-footer { 1 .yoho-footer {
2 font-size: 12px; 2 font-size: 12px;
3 background-color: #fff; 3 background-color: #fff;
4 - margin-bottom: 2.5rem;  
5 4
6 .op-row { 5 .op-row {
7 position: relative; 6 position: relative;
1 -.mine-page { 1 +$vip: sprite-map("me/vip/*.png");
  2 +.my-page {
  3 + background: #f0f0f0;
  4 +
2 .user-info { 5 .user-info {
  6 + position: relative;
3 padding: 0 30rem / $pxConvertRem; 7 padding: 0 30rem / $pxConvertRem;
4 color: #fff; 8 color: #fff;
5 background: #ccc; 9 background: #ccc;
@@ -15,8 +19,124 @@ @@ -15,8 +19,124 @@
15 border-radius: 50%; 19 border-radius: 50%;
16 border: 8rem / $pxConvertRem solid #a7a8a9; 20 border: 8rem / $pxConvertRem solid #a7a8a9;
17 } 21 }
  22 +
18 .username { 23 .username {
19 padding: 0 16rem / $pxConvertRem; 24 padding: 0 16rem / $pxConvertRem;
20 } 25 }
  26 +
  27 + .vip-icon {
  28 + display: inline-block;
  29 + width: pxToRem(70px);
  30 + height: pxToRem(30px);
  31 + vertical-align: middle;
  32 + }
  33 +
  34 + .vip-3 {
  35 + @include rem-sprite($vip, vip-3);
  36 + }
  37 +
  38 + .vip-2 {
  39 + @include rem-sprite($vip, vip-2);
  40 + }
  41 +
  42 + .vip-1 {
  43 + @include rem-sprite($vip, vip-1);
  44 + }
  45 +
  46 + .more-icon {
  47 + position: absolute;
  48 + top: 0;
  49 + right: 30rem / $pxConvertRem;
  50 + }
  51 + }
  52 +
  53 + .my-link {
  54 + margin-bottom: pxToRem(30px);
  55 + padding: pxToRem(6px) 0;
  56 + text-align: center;
  57 + background: #121314;
  58 + height: pxToRem(76px);
  59 +
  60 + .link-item {
  61 + float: left;
  62 + color: #fff;
  63 + font-size: pxToRem(22px);
  64 + line-height: pxToRem(38px);
  65 + width: pxToRem(213px);
  66 +
  67 + }
  68 + }
  69 +
  70 + .my-order {
  71 + margin-bottom: pxToRem(30px);
  72 + border-top: 1px solid #e0e0e0;
  73 + border-bottom: 1px solid #e0e0e0;
  74 + background: #fff;
  75 +
  76 + .order-title {
  77 + padding: 0 pxToRem(30px);
  78 + font-size: pxToRem(32px);
  79 + line-height: pxToRem(88px);
  80 +
  81 + span {
  82 + color: #e0e0e0;
  83 + float: right;
  84 + }
  85 + }
  86 +
  87 + .order-type {
  88 + padding: pxToRem(20px) pxToRem(30px);
  89 + text-align: center;
  90 + border-top: 1px solid #e0e0e0;
  91 +
  92 + .type-item {
  93 + float: left;
  94 + color: #444;
  95 + font-size: pxToRem(28px);
  96 + line-height: 1.5;
  97 + width: pxToRem(193px);
  98 + }
  99 +
  100 + .iconfont {
  101 + font-size: pxToRem(60px);
  102 + }
  103 + }
  104 + }
  105 +
  106 + .group-list {
  107 + margin-bottom: pxToRem(30px);
  108 + border-top: 1px solid #e0e0e0;
  109 + border-bottom: 1px solid #e0e0e0;
  110 + background: #fff;
  111 +
  112 + .list-item {
  113 + position: relative;
  114 + padding: 0 pxToRem(30px);
  115 + font-size: pxToRem(32px);
  116 + line-height: pxToRem(88px);
  117 + &:after {
  118 + content: '';
  119 + position: absolute;
  120 + right: 0;
  121 + bottom: 0;
  122 + width: pxToRem(540px);
  123 + height: 0;
  124 + border-top: 1px solid #e0e0e0;
  125 + }
  126 +
  127 + &:last-child:after {
  128 + content: none;
  129 + }
  130 + }
  131 +
  132 + .icon {
  133 + margin-right: pxToRem(10px);
  134 + font-size: pxToRem(50px);
  135 + }
  136 +
  137 + .num {
  138 + color: #e0e0e0;
  139 + float: right;
  140 + }
21 } 141 }
22 } 142 }
1 -@import "home", "vip-grade", "order";  
  1 +@import "home", "vip-grade", "order", "recommend-for-you";
  1 +.recommend-for-you {
  2 + padding: pxToRem(30px) 0 pxToRem(10px);
  3 + border-top: 1px solid #e0e0e0;
  4 + border-bottom: 1px solid #e0e0e0;
  5 + background: #fff;
  6 +
  7 + .title {
  8 + font-size: pxToRem(32px);
  9 + line-height: pxToRe(88px);
  10 + text-align: center;
  11 + color: #444;
  12 + font-weight: bold;
  13 + }
  14 +
  15 + .swiper-recommend {
  16 + padding: pxToRem(20px) pxToRem(30px);
  17 + }
  18 +
  19 + .img-box {
  20 + display: table-cell;
  21 + width: pxToRem(156px);
  22 + height: pxToRem(206px);
  23 + vertical-align: middle;
  24 + text-align: center;
  25 + }
  26 +
  27 + .price {
  28 + margin-top: pxToRem(20px);
  29 + font-size: pxToRem(20px);
  30 + line-height: 1;
  31 +
  32 + .sale-price {
  33 + color: #d9134f;
  34 + }
  35 +
  36 + .old-price {
  37 + float: right;
  38 + color: #ededed;
  39 + }
  40 +
  41 + .no-price {
  42 + color: #444;
  43 + }
  44 + }
  45 +}
1 {{> layout/header}} 1 {{> layout/header}}
2 - <div class="mine-page yoho-page">  
3 - <div class="mine-header"> 2 + <div class="my-page yoho-page">
  3 + <div class="my-header">
4 <div class="user-info"> 4 <div class="user-info">
5 <img class="user-avatar" src="{{head_ico}}"> 5 <img class="user-avatar" src="{{head_ico}}">
6 <span class="username">{{profile_name}}</span> 6 <span class="username">{{profile_name}}</span>
7 - {{#user_info}}  
8 - <span class="user-level user-level-{{cur_level}}"></span>  
9 - {{/user_info}} 7 + {{#vip_info}}
  8 + <span class="vip-icon vip-{{next_level}}"></span>
  9 + {{/vip_info}}
  10 + <div class="iconfont more-icon">&#xe604;</div>
10 </div> 11 </div>
11 - <div class="iconfont more-icon">2</div>  
12 </div> 12 </div>
  13 + <div class="my-link clearfix">
  14 + <a class="link-item" href="/home">
  15 + 15
  16 + <p>收藏的商品</p>
  17 + </a>
  18 + <a class="link-item" href="/home">
  19 + 6
  20 + <p>收藏的品牌</p>
  21 + </a>
  22 + <a class="link-item" href="/home">
  23 + 8
  24 + <p>浏览记录</p>
  25 + </a>
  26 + </div>
  27 + <div class="my-order">
  28 + <div class="order-title">
  29 + 我的订单
  30 + <span class="iconfont">
  31 + 查看全部订单 &#xe604;
  32 + </span>
  33 + </div>
  34 + <div class="order-type clearfix">
  35 + <a class="type-item" href="/home/order">
  36 + <span class="iconfont">&#xe620;</span>
  37 + <br>代付款
  38 + </a>
  39 + <a class="type-item" href="/home/order">
  40 + <span class="iconfont">&#xe620;</span>
  41 + <br>代发货
  42 + </a>
  43 + <a class="type-item" href="/home/order">
  44 + <span class="iconfont">&#xe620;</span>
  45 + <br>代收货
  46 + </a>
  47 + </div>
  48 + </div>
  49 + <div class="group-list">
  50 + <div class="list-item">
  51 + <span class="iconfont icon">&#xe620;</span>
  52 + 地址管理
  53 + <span class="iconfont num">3 &#xe604;</span>
  54 + </div>
  55 + </div>
  56 + <div class="group-list">
  57 + <div class="list-item">
  58 + <span class="iconfont icon">&#xe620;</span>
  59 + 优惠券
  60 + <span class="iconfont num">6 &#xe604;</span>
  61 + </div>
  62 + <div class="list-item">
  63 + <span class="iconfont icon">&#xe620;</span>
  64 + YOHO 币
  65 + <span class="iconfont num">8 &#xe604;</span>
  66 + </div>
  67 + </div>
  68 + <div class="group-list">
  69 + <div class="list-item">
  70 + <span class="iconfont icon">&#xe620;</span>
  71 + 消息
  72 + <span class="iconfont num">3 &#xe604;</span>
  73 + </div>
  74 + </div>
  75 + <div class="group-list">
  76 + <div class="list-item">
  77 + <span class="iconfont icon">&#xe620;</span>
  78 + 在线客服
  79 + <span class="iconfont num">3 &#xe604;</span>
  80 + </div>
  81 + </div>
  82 + <div class="group-list">
  83 + <div class="list-item">
  84 + <span class="iconfont icon">&#xe620;</span>
  85 + 帮助
  86 + <span class="iconfont num">3 &#xe604;</span>
  87 + </div>
  88 + </div>
  89 +
  90 + {{> me/recommend-for-you}}
13 </div> 91 </div>
14 {{> layout/footer}} 92 {{> layout/footer}}
1 {{#pageHeader}} 1 {{#pageHeader}}
2 -{{# isShow}}  
3 <header class="yoho-header{{#if boys}} boys{{/if}}{{#if girls}} girls{{/if}}{{#if kids}} kids{{/if}}{{#if lifeStyle}} life-style{{/if}}"> 2 <header class="yoho-header{{#if boys}} boys{{/if}}{{#if girls}} girls{{/if}}{{#if kids}} kids{{/if}}{{#if lifeStyle}} life-style{{/if}}">
4 {{#if navBack}} 3 {{#if navBack}}
5 <a href="javascript:history.go(-1);" class="nav-back"></a> 4 <a href="javascript:history.go(-1);" class="nav-back"></a>
@@ -11,5 +10,4 @@ @@ -11,5 +10,4 @@
11 <p class="nav-title">{{.}}</p> 10 <p class="nav-title">{{.}}</p>
12 {{/navTitle}} 11 {{/navTitle}}
13 </header> 12 </header>
14 -{{/ isShow}}  
15 {{/pageHeader}} 13 {{/pageHeader}}
  1 +{{# recommendForYou}}
  2 + <div class="recommend-for-you">
  3 + <div class="title">为您优选新品</div>
  4 + <div class="swiper-recommend">
  5 + <div class="swiper-wrapper">
  6 + <div class="swiper-slider">
  7 + <div class="img-box">
  8 + <img src="http://temp.im/156x206">
  9 + </div>
  10 + <div class="price">
  11 + <span class="sale-price">¥199</span>
  12 + <span class="old-price">¥233</span>
  13 + </div>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + </div>
  18 +{{/ recommendForYou}}
@@ -19,17 +19,40 @@ class HomeController extends AbstractAction @@ -19,17 +19,40 @@ class HomeController extends AbstractAction
19 */ 19 */
20 public function indexAction() 20 public function indexAction()
21 { 21 {
22 - // $uid = $uid = $this->getUid(); 22 + // $uid = $this->getUid();
23 $uid = 967016; 23 $uid = 967016;
24 24
25 $data = \Index\UserModel::getUserProfileData($uid); 25 $data = \Index\UserModel::getUserProfileData($uid);
26 26
27 // print_r($data); 27 // print_r($data);
28 - $data['homeHeader'] = array('searchUrl' => Helpers::url('/search', null, 'search')); 28 + $data['homeHeader'] = array(
  29 + 'myHomePage' => true,
  30 + 'searchUrl' => Helpers::url('/search', null, 'search')
  31 + );
  32 +
  33 + $data['recommendForYou'] = array(
  34 + 'recommendList' => array(
  35 + array(
  36 + 'img' => ''
  37 + ),
  38 + array(
  39 + 'img' => ''
  40 + ),
  41 + array(
  42 + 'img' => ''
  43 + ),
  44 + array(
  45 + 'img' => ''
  46 + ),
  47 + array(
  48 + 'img' => ''
  49 + )
  50 + )
  51 + );
29 $data['pageFooter'] = true; 52 $data['pageFooter'] = true;
30 53
31 // 设置网站标题 54 // 设置网站标题
32 - $this->setTitle('男生首页'); 55 + $this->setTitle('个人中心');
33 56
34 $this->_view->display('index', $data); 57 $this->_view->display('index', $data);
35 } 58 }