@@ -1,10 +1,10 @@ | |||
@font-face { | |||
font-family: 'iconfont'; /* project id 777313 */ | |||
src: url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.eot'); | |||
src: url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_777313_ulb9e7ee6cl.svg#iconfont') format('svg'); | |||
src: url('//at.alicdn.com/t/font_777313_jq7td4d3uab.eot'); | |||
src: url('//at.alicdn.com/t/font_777313_jq7td4d3uab.eot?#iefix') format('embedded-opentype'), | |||
url('//at.alicdn.com/t/font_777313_jq7td4d3uab.woff') format('woff'), | |||
url('//at.alicdn.com/t/font_777313_jq7td4d3uab.ttf') format('truetype'), | |||
url('//at.alicdn.com/t/font_777313_jq7td4d3uab.svg#iconfont') format('svg'); | |||
} | |||
.iconfont { | |||
font-family: "iconfont" !important; | |||
@@ -18,8 +18,73 @@ | |||
.icon-dingweib:before { content: "\e652"; } | |||
/* 三角 */ | |||
.icon-choose:before { content: "\e601"; } | |||
/* 右箭头 */ | |||
.icon-right:before { content: "\e612"; } | |||
/* 边框 */ | |||
.app-border-top, | |||
.app-border-bottom { | |||
position: relative; | |||
width: 100%; | |||
} | |||
.app-border-top::after, | |||
.app-border-bottom::after { | |||
content: ''; | |||
position: absolute; | |||
background-color: #ddd; | |||
display: block !important; | |||
z-index: 1; | |||
top: auto; | |||
right: auto; | |||
width: 100%; | |||
height: 1rpx; | |||
transform-origin: 50% 100%; | |||
transform: scaleY(0.5); | |||
} | |||
.app-border-top:last-child:after, | |||
.app-border-bottom:last-child::after { | |||
display: none !important; | |||
} | |||
.app-border-top::after { | |||
top: 0; | |||
} | |||
.app-border-bottom::after { | |||
bottom: 0; | |||
} | |||
.app-border-left, | |||
.app-border-right { | |||
position: relative; | |||
height: 100%; | |||
} | |||
.app-border-left::before, | |||
.app-border-right::before { | |||
content: ''; | |||
position: absolute; | |||
background-color: #ddd; | |||
display: block; | |||
z-index: 1; | |||
top: 0; | |||
bottom: 0; | |||
height: 100%; | |||
width: 1rpx; | |||
transform-origin: 50% 100%; | |||
transform: scaleX(0.5); | |||
} | |||
.app-border-left::before { | |||
left: 0; | |||
} | |||
.app-border-right::before { | |||
right: 0; | |||
} | |||
view{ | |||
font-family: PingFangSC-Semibold; | |||
} |
@@ -4,7 +4,9 @@ Page({ | |||
* 页面的初始数据 | |||
*/ | |||
data: { | |||
user:{ | |||
avatar:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' | |||
} | |||
}, | |||
/** | |||
@@ -1,6 +1,6 @@ | |||
{ | |||
"usingComponents": { | |||
"i-button": "../../dist/button/index" | |||
}, | |||
"navigationBarTitleText": "我的" | |||
} |
@@ -1,3 +1,56 @@ | |||
<view> | |||
我的 | |||
<view class="user"> | |||
<view class="user-title"> | |||
<view class="user-avatar"> | |||
<image src="{{user.avatar}}" /> | |||
</view> | |||
<view class="user-phone">电话</view> | |||
</view> | |||
<view class="margin"></view> | |||
<view class="user-btns"> | |||
<navigator url="/pages/market/index"> | |||
<view class="user-btn app-border-bottom"> | |||
<view>我的订单</view> | |||
<view>全部订单</view> | |||
</view> | |||
</navigator> | |||
<navigator url="/pages/market/index"> | |||
<view class="user-btn app-border-bottom"> | |||
<view>待付款</view> | |||
<view> | |||
<text class="iconfont icon-right"></text> | |||
</view> | |||
</view> | |||
</navigator> | |||
<navigator url="/pages/market/index"> | |||
<view class="user-btn app-border-bottom"> | |||
<view>已完成</view> | |||
<view> | |||
<text class="iconfont icon-right"></text> | |||
</view> | |||
</view> | |||
</navigator> | |||
</view> | |||
<view class="margin"></view> | |||
<view class="user-btns"> | |||
<navigator url="/pages/market/index"> | |||
<view class="user-btn app-border-bottom"> | |||
<view>卷包</view> | |||
<view> | |||
<text class="iconfont icon-right"></text> | |||
</view> | |||
</view> | |||
</navigator> | |||
<navigator url="/pages/market/index"> | |||
<view class="user-btn app-border-bottom"> | |||
<view>智能停车</view> | |||
<view> | |||
<text class="iconfont icon-right"></text> | |||
</view> | |||
</view> | |||
</navigator> | |||
</view> | |||
<view class="margin"></view> | |||
<button type="default" class="user-out-btn"> | |||
退出登陆 | |||
</button> | |||
</view> |
@@ -0,0 +1,71 @@ | |||
.margin { | |||
background: #f5f5f5; | |||
height: 20rpx; | |||
} | |||
.user-title { | |||
height: 186rpx; | |||
padding: 30rpx; | |||
display: flex; | |||
flex-direction: row; | |||
box-sizing: border-box; | |||
background: #FFFFFF; | |||
} | |||
.user-avatar { | |||
padding-right: 30rpx; | |||
width: 126rpx; | |||
height: 126rpx; | |||
} | |||
.user-avatar image { | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 100%; | |||
} | |||
.user-phone { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-family: PingFangSC-Regular; | |||
font-size: 30rpx; | |||
color: #000000; | |||
letter-spacing: 0.64rpx; | |||
} | |||
.user-btns .user-btn { | |||
display: flex; | |||
height: 88rpx; | |||
font-size: 30rpx; | |||
color: #000000; | |||
line-height: 88rpx; | |||
} | |||
.user-btns .user-btn>view { | |||
flex: 1; | |||
padding: 0 32px; | |||
} | |||
.user-btns .user-btn>view:last-child { | |||
text-align: right; | |||
color: #B8B8B8; | |||
font-size: 24rpx; | |||
} | |||
.user-btns .user-btn>view:last-child .iconfont { | |||
color: #A8A8A8; | |||
font-size: 75rpx; | |||
} | |||
.user-out-btn { | |||
background-color: #fff; | |||
height: 88rpx; | |||
line-height: 88rpx; | |||
font-family: PingFangSC-Semibold; | |||
font-size: 30rpx; | |||
color: #000000; | |||
text-align: center; | |||
border-radius:0; | |||
border: none; | |||
} |