个人中心-个人信息

-var $ = require('jquery'),
-    Hammer = require('yoho.hammer'),
-    lazyLoad = require('yoho.lazyload');

-@import "home", "vip-grade", "order";
+@import "home", "vip-grade", "order", "personal-details";

+.personal-details{
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	background-color:#fff;
+	border-bottom:1px solid #e0e0e0;
+	ul{
+		width: 95%;
+		height: auto;
+		overflow: hidden;
+		float:right;
+		li{
+			&:first-of-type{
+				height: 100rem / $pxConvertRem;
+				line-height:100rem / $pxConvertRem;
+			}
+			height: 80rem / $pxConvertRem;
+			border-bottom: 1px solid #e0e0e0;
+			span{
+				&:first-of-type{
+					color: #444;
+					line-height:100rem / $pxConvertRem;
+				}
+				width: 42%;
+				height: 100%;
+				line-height:80rem / $pxConvertRem;
+				font-size: 48em / $pxConvertRem;
+				margin-right: 8%;
+				float: left;
+				.head-portrait{
+					width:90rem / $pxConvertRem;
+					height: 90rem / $pxConvertRem;
+					float: right;
+					border-radius:50%;
+					background: #000;
+				}
+				.grade{
+					width:85rem / $pxConvertRem;
+					height: 30rem / $pxConvertRem;
+					overflow: hidden;	
+					display: inline-block;
+					margin-top: 25rem / $pxConvertRem;
+            		@include rem-sprite($vip, vip-1);
+				}
+				&:last-of-type{
+					color: #b0b0b0;
+					text-align: right;
+				}
+			}
+			&:last-of-type{
+				border-bottom:none;
+			}	
+		} 
+	}
+}

+{{> layout/header}}
+    {{ #personalDetails}}
+        <div class="personal-details">
+            <ul>
+                <li><span>头像</span><span><i class="head-portrait"></i></span></li>
+                <li><span>昵称</span><span>{{ name }}</span></li>
+                <li><span>性别</span><span>{{ sex }}</span></li>
+                <li><span>生日</span><span>{{ time }}</span></li>
+                <li><span>会员等级</span><span><i class="grade"></i>&gt;</span></li>
+            </ul>
+        </div>
+    {{ /personalDetails}}
+{{> layout/footer}}