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>