diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue index 42eabd7..93a9df2 100644 --- a/src/pages/me/index.vue +++ b/src/pages/me/index.vue @@ -1,9 +1,58 @@ <template> - <view> - <view class="bg-white padding"> - <view class="text-xl text-center">我的 - </view> - </view> + <view class="bc-f5"> + <!-- <view class="wp100" style="background-color: #333;height: 205px;"></view> --> + <view class="relative" style="height: 205px;"> + <image src="/static/image/mine/mine_bg.png" mode="widthFix" style="width: 100%;"></image> + <view class="info flex ai-c"> + <u-avatar class="br-p50 overflow-h" :size="64" :src="user.avatar" mp-avatar shape="circle"></u-avatar> + <view class="ml12"> + <view class="fs18 cor-333 fwb">{{user.name}}</view> + <view class="mt5 fs14 cor-666">陪您学车 第{{user.count}}天</view> + </view> + </view> + </view> + <view class="p15lr" style="transform: translateY(-90px);"> + <view class="mb10" v-if="user.vip"> + <image src="/static/image/mine/vip_bg.png" mode="widthFix" style="width: 100%;"></image> + </view> + <view class="br8 bc-fff p15 z-index2"> + <text class="fs16 cor-333">我的驾校</text> + <div class="mt12 flex ai-c jc-sb"> + <text class="fs18 cor-000 fwb">合肥八一驾校</text> + <u-button text="切换驾校" shape="circle"></u-button> + </div> + <u-line margin="14px 0 18px 0"></u-line> + <view class="flex ai-c"> + <view class="flex ai-c jc-c phone"> + <img src="/static/image/mine/phone.png" style="width: 12px;height: 12px;"> + <text class="ml2 fs12 cor-fff">客服热线</text> + </view> + <text class="ml5 fs26 cor-333 fwb" style="line-height: 26px;">0551-12345678</text> + </view> + </view> + <view class="mt12 bc-fff br8"> + <u-cell-group> + <u-cell size="large" title="我的资料" value="修改" isLink> + <template #icon> + <img src="/static/image/mine/wdzl.png" style="width: 24px;height: 24px;"> + </template> + </u-cell> + <u-cell size="large" title="我的体检" value="查看报告" isLink> + <template #icon> + <img src="/static/image/mine/wdtj.png" style="width: 24px;height: 24px;"> + </template> + </u-cell> + <u-cell size="large" title="我的题库" value="小车"> + <template #icon> + <img src="/static/image/mine/wdtk.png" style="width: 24px;height: 24px;"> + </template> + </u-cell> + </u-cell-group> + </view> + <view class="flex ai-c jc-c mt12 br8 bc-fff" style="height: 50px;"> + <text class="fs16" style="color: #A09F9F;">退出登录</text> + </view> + </view> </view> </template> <script> @@ -11,7 +60,11 @@ components: {}, data() { return { - + user: { + avatar: '', + name: '帅帅的黑啤酒', + count: '215' + } }; }, onShow() { @@ -26,5 +79,15 @@ </script> <style lang="scss" scoped> - +.info { + position: absolute; + top: 32px; + left: 27px; +} +.phone { + width: 75px; + height: 26px; + background: #05C341; + border-radius: 16px 16px 0px 16px; +} </style> diff --git a/src/static/image/mine/mine_bg.png b/src/static/image/mine/mine_bg.png new file mode 100644 index 0000000..af3aaa1 Binary files /dev/null and b/src/static/image/mine/mine_bg.png differ diff --git a/src/static/image/mine/phone.png b/src/static/image/mine/phone.png new file mode 100644 index 0000000..0b47252 Binary files /dev/null and b/src/static/image/mine/phone.png differ diff --git a/src/static/image/mine/vip_bg.png b/src/static/image/mine/vip_bg.png new file mode 100644 index 0000000..1c3ffa4 Binary files /dev/null and b/src/static/image/mine/vip_bg.png differ diff --git a/src/static/image/mine/wdtj.png b/src/static/image/mine/wdtj.png new file mode 100644 index 0000000..2ec1093 Binary files /dev/null and b/src/static/image/mine/wdtj.png differ diff --git a/src/static/image/mine/wdtk.png b/src/static/image/mine/wdtk.png new file mode 100644 index 0000000..a096a2e Binary files /dev/null and b/src/static/image/mine/wdtk.png differ diff --git a/src/static/image/mine/wdzl.png b/src/static/image/mine/wdzl.png new file mode 100644 index 0000000..f791673 Binary files /dev/null and b/src/static/image/mine/wdzl.png differ