diff --git a/src/App.vue b/src/App.vue
index 283a6f6eac76268e597f0be47772ca0690cb10aa..633a2a4f9b4460a02bf798d2d5eb80631e871afe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
       <!-- <mall-head v-if="this.$route.isMallHead === true"></mall-head> -->
       <router-view name="mallhead"></router-view>
       <router-view name="cheader"></router-view>
+      <router-view name="mheader"></router-view>
     </div>
     <div class="app-main">
       <router-view></router-view>
diff --git a/src/components/MHeader.vue b/src/components/MHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84312c920ed0762178dc1a253bc059b6d6390547
--- /dev/null
+++ b/src/components/MHeader.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <mt-header class="m-header" title="我的当当">
+      <div slot="left">
+        <mt-button icon="back" @click="$router.back()" ></mt-button>
+      </div>
+    </mt-header>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mheader'
+}
+</script>
+
+<style>
+</style>
diff --git a/src/img/user-bg.jpg b/src/img/user-bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7bd1dabd240f51bc67676763d0c1e8fd81321c32
Binary files /dev/null and b/src/img/user-bg.jpg differ
diff --git a/src/pages/Mine.vue b/src/pages/Mine.vue
index 06a2fc46f85c60e2ec8b3d1d1a237a5b977d48d0..7df8467bf9370a99dbe407559546c649ac5b733d 100644
--- a/src/pages/Mine.vue
+++ b/src/pages/Mine.vue
@@ -1,6 +1,61 @@
 <template>
-    <div class="mine">
-        mine
+    <div class="mine-container">
+      <div class="mine-body">
+        <div class="loginAndRegister">
+            <div type="default" class="loginBtn">登录/注册</div>
+        </div>
+        <div class="myorder">
+          我的订单<span>全部&#xe500;</span>
+        </div>
+        <div class="mine-order-list">
+          <div class="list">
+            <i class="iconfont" >&#xe671;</i>
+            <span>未消费</span>
+          </div>
+          <div class="list">
+            <i class="iconfont" >&#xe610;</i>
+            <span>待付款</span>
+          </div>
+          <div class="list">
+            <i class="iconfont" >&#xe618;</i>
+            <span>待评价</span>
+          </div>
+          <div class="list">
+            <i class="iconfont" >&#xe624;</i>
+            <span>退款</span>
+          </div>
+        </div>
+        <div class="feat-list">
+          <div class="feat mymsg">
+            我的消息
+            <i>&#xe500;</i>
+          </div>
+          <div class="feat member">
+            会员中心
+            <i>&#xe500;</i>
+          </div>
+          <div class="feat achievement">
+            我的成就
+            <i>&#xe500;</i>
+          </div>
+          <div class="feat coupon">
+            优惠劵
+            <i>&#xe500;</i>
+          </div>
+          <div class="feat wallet">
+            钱包
+            <i>&#xe500;</i>
+          </div>
+          <div class="feat mall">
+            商城
+            <i>&#xe500;</i>
+          </div>
+          <div class="feat set">
+            设置
+            <i>&#xe500;</i>
+          </div>
+        </div>
+      </div>
     </div>
 </template>
 
@@ -10,6 +65,126 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
+<style lang="scss">
+@font-face {
+  font-family: 'iconfont';  /* project id 971254 */
+  src: url('//at.alicdn.com/t/font_971254_3z3309qfhms.eot');
+  src: url('//at.alicdn.com/t/font_971254_3z3309qfhms.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_971254_3z3309qfhms.woff') format('woff'),
+  url('//at.alicdn.com/t/font_971254_3z3309qfhms.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_971254_3z3309qfhms.svg#iconfont') format('svg');
+}
+a{
+  text-decoration: none;
+}
+.m-header {
+  height: 50px;
+  background-color: #f2f2f2;
+  color: #666;
+  font-size: 16px;
+  overflow: hidden;
+  .mint-header-title {
+      font-weight: 600;
+  }
+}
+.m-header-img {
+  float: left;
+  width: 13.33vw;
+  height: 6.33vh;
+  border-radius:50%;
+  overflow: hidden;
+  margin-top: 2.3vh;
+  margin-left: 2.3vw;
+}
+.m-header-img img {
+  width: 100%;
+  height: 100%;
+}
+.userName {
+  float: left;
+  color: #ffffff;
+  margin-top: 4.5vh;
+  margin-left: 2.3vw;
+}
+.GoToLogin {
+  font-family: 'iconfont';
+  float: right;
+  font-size: 26px;
+  color: #ffffff;
+  margin-top: 4vh;
+  margin-right: 2.3vw;
+}
+.loginAndRegister {
+  height: 115px;
+  width: 100%;
+  background: url(../img/user-bg.jpg) no-repeat center;
+  background-size:100%;
+  text-align: center;
+  .loginBtn {
+      color: #ffffff;
+      margin-top: 10vw;
+      display: inline-block;
+      border: 1px solid #ffffff;
+      border-radius: 24px;
+      font-size: 16px;
+      padding: 3vw 6vw;
+      font-weight: 600;
+  }
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  i {
+    font-family: 'iconfont';
+    font-size: 24px;
+    margin-bottom: 1vh;
+  }
+  span {
+    font-size: 12px;
+  }
+}
+.myorder {
+  background: #ffffff;
+  padding: 1vh 0;
+  padding-right: 6.5vw;
+  font-weight: 600;
+  color: #555555;
+  span{
+    font-weight: 400;
+    color: #666666;
+    font-family: 'iconfont';
+    float: right;
+  }
+}
+.mine-order-list {
+  height: 9vh;
+  width: 100%;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-around;
+  box-sizing: border-box;
+  color: #666666;
+  padding-top: 1vh;
+  background-color: #ffffff;
+  margin-bottom: 1vh;
+  margin-bottom: 2vh;
+}
+.feat-list {
+  background: #ffffff;
+  .feat {
+    color: #666666;
+    font-weight: 600;
+    font-size: 15px;
+    padding: 0.5vh;
+    padding-right: 7.5vw;
+    margin: 4vh 0;
+    background-color: #ffffff;
+    i {
+      font-family: 'iconfont';
+      float: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index bf01641d9910c5a9bb751a3bf1ede5cb422d1a01..b8717f9d63daaf8707344d56f3dae5df6c24971e 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,6 +1,7 @@
 import Tabbar from '@/components/Tabbar'
 import MallHead from '@/components/MallHead'
 import CHeader from '@/components/CHeader'
+import MHeader from '@/components/MHeader'
 const Home = () => import('@/pages/Home')
 const Mall = () => import('@/pages/Mall')
 const Category = () => import('@/pages/Category')
@@ -71,7 +72,8 @@ const routes = [
     isTabbar: true,
     components: {
       default: Mine,
-      tabbar: Tabbar
+      tabbar: Tabbar,
+      mheader: MHeader
     }
   },
   {