my,mypoint

src/pages/my/my.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="my">
+    <div class="avatar-container">
+        <img :src="user.avatar" alt="" :title="user.name">
+        <p>{{user.name}}</p>
+    </div>
+    <ul class="mylist">
+      <li><span class="l-info">昵称</span><span>{{user.name}}</span></li>
+      <li><span class="l-info">性别</span><span>{{user.sex ? '男':'女'}}</span></li>
+      <li><span class="l-info">口味</span><span>{{user.taste}}</span></li>
+      <li><span class="l-info"><a :href="'/main/mypoint'">积分饭票</a></span><span class="icon"></span></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'my',
+  data () {
+    var user = {
+      name: '鹅厂小吃货',
+      sex: 0,
+      avatar: '' || require('../../assets/u583.png'),
+      taste: '香辣、四川'
+    }
+    return {
+      user: user
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .avatar-container {
+      width: 100% ;
+      height: 150px ;
+      padding-top:10px;
+      background: url('../../assets/u581.jpg') no-repeat center center ;
+      z-index: -1000 ;
+      text: center ;
+      color: #fff;
+
+      img{
+          width:20%;
+      }
+  }
+  .mylist {
+      padding: 0;
+      li {
+        list-style-type: none ;
+        margin:0 5%;
+        height:30px;
+        line-height:30px;
+        border-bottom:1px solid #ccc;
+        text-align: right;
+
+        .l-info{
+            float: left;
+        }
+
+        .icon{
+            width:10px;
+            height:10px;
+            background: url('../../assets/u387.png') ; 
+        }
+      }
+  }
+</style>

src/pages/mypoint/mypoint.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="mypoint">
+    <div>     
+      <p><i class="ip"></i>剩余积分：{{points}}分</p>
+      <p><i class="it"></i>剩余夜宵券：{{tickets}}张</p>
+    </div>
+    <p><a href="#" class="gettic" v-on:click="getTicket"><img :src="tickerpic" alt=""></a></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mypoint',
+  data () {
+    var points = 1000
+    var tickets = 0
+    return {
+      points: points,
+      tickets: tickets,
+      tickerpic: require('../../assets/u749.jpg')
+    }
+  },
+  methods: {
+    getTicket: function () {
+      if (this.points > 100) {
+        this.points -= 100
+        this.tickets += 1
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+    .gettic{
+      display:block;
+      width:100%;
+      img{
+          width:80%
+      }
+    }
+</style>

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Main from '@/Main.vue'
 import Flavor from '@/pages/flavor/flavor'
+import My from '@/pages/my/my'
+import Mypoint from '@/pages/mypoint/mypoint'
 
 Vue.use(Router)
 
@@ -14,7 +16,9 @@ export default new Router({
       name: 'main',
       component: Main,
       children: [
-        { path: 'flavor', component: Flavor }
+        { path: 'flavor', component: Flavor },
+        { path: 'my', component: My },
+        { path: 'mypoint', component: Mypoint }
       ]
     }
   ]