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