| @@ -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; | |||
| } | |||