@@ -1,10 +1,10 @@ | |||||
@font-face { | @font-face { | ||||
font-family: 'iconfont'; /* project id 777313 */ | 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 { | .iconfont { | ||||
font-family: "iconfont" !important; | font-family: "iconfont" !important; | ||||
@@ -18,8 +18,73 @@ | |||||
.icon-dingweib:before { content: "\e652"; } | .icon-dingweib:before { content: "\e652"; } | ||||
/* 三角 */ | /* 三角 */ | ||||
.icon-choose:before { content: "\e601"; } | .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{ | view{ | ||||
font-family: PingFangSC-Semibold; | font-family: PingFangSC-Semibold; | ||||
} | } |
@@ -4,7 +4,9 @@ Page({ | |||||
* 页面的初始数据 | * 页面的初始数据 | ||||
*/ | */ | ||||
data: { | data: { | ||||
user:{ | |||||
avatar:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' | |||||
} | |||||
}, | }, | ||||
/** | /** | ||||
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"usingComponents": { | "usingComponents": { | ||||
"i-button": "../../dist/button/index" | |||||
}, | }, | ||||
"navigationBarTitleText": "我的" | "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> | </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; | |||||
} |