”我的“页面

src/views/My/index.vue

@@ -1,5 +1,31 @@
 <template>
-<div class='tab1'>我的</div>
+<div class="mine">
+  <div class="top">
+    <img src="@/assets/img/service/avatar-default.png" alt="" class="avatar">
+    <div class="name">芜湖印象</div>
+  </div>
+  <div class="statistics"
+  >
+    <div
+      v-for="(item, index) in statisticsList"
+      :key="index"
+    >
+      <div class="key">{{item.key}}</div>
+      <div class="value">{{item.value || '-'}}</div>
+    </div>
+  </div>
+  <ul class="entry-list">
+    <li
+      class="entry"
+      v-for="(item, index) in entryList"
+      :key="index"
+    >
+      <img class="icon" :src="item.icon" alt="" draggable="false">
+      <div class="name">{{item.name}}</div>
+      <img src="@/assets/img/service/arrow-gray-blunt.png" alt="" class="arrow">
+    </li>
+  </ul>
+</div>
 </template>
 
 <script>
@@ -7,9 +33,48 @@
 export default {
 components: {},
 data() {
-return {
-
-};
+  return {
+    statisticsList: [
+      {
+        key: '点赞数',
+        value: '',
+      },
+      {
+        key: '分享数',
+        value: '',
+      },
+      {
+        key: '收藏数',
+        value: '',
+      },
+      {
+        key: '积分数',
+        value: '',
+      },
+    ],
+    entryList: [
+      {
+        icon: require('@/assets/img/service/like.png'),
+        name: '我的点赞',
+      },
+      {
+        icon: require('@/assets/img/service/share.png'),
+        name: '我的分享',
+      },
+      {
+        icon: require('@/assets/img/service/favorites.png'),
+        name: '我的收藏',
+      },
+      {
+        icon: require('@/assets/img/service/mail.png'),
+        name: '投诉建议',
+      },
+      {
+        icon: require('@/assets/img/service/booking-check.png'),
+        name: '我的预约',
+      },
+    ]
+  }
 },
 computed: {},
 watch: {},
@@ -31,6 +96,79 @@ destroyed() {}, //生命周期 - 销毁完成
 activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 }
 </script>
-<style lang='less' scoped>
 
+<style lang='less' scoped>
+.mine {
+  padding-left: 4.7vw;
+  padding-right: 4.7vw;
+  > .top {
+    background: #fe736a;
+    margin-top: 17vw;
+    display: flex;
+    align-items: center;
+    > img.avatar {
+      margin-left: 5.2vw;
+      margin-right: 4vw;
+      width: 16vw;
+      height: 16vw;
+      border-radius: 8vw;
+    }
+    > .name {
+      font-size: 4.8vw;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+  }
+  > .statistics {
+    margin: 3.7vw 4.7vw 0 4.7vw;
+    height: 20vw;
+    background: #FCFCFC;
+    box-shadow: 0vw 0.5vw 1.1vw 0vw rgba(255,198,190,0.4);
+    border-radius: 1.6vw;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    > div {
+      text-align: center;
+      > .key {
+        font-size: 3.5vw;
+        font-weight: bold;
+        color: #787777;
+        margin-bottom: 4vw;
+      }
+      > .value {
+        font-size: 3.5vw;
+        font-weight: bold;
+        color: #959595;
+      }
+    }
+  }
+  > ul.entry-list {
+    margin-top: 9vw;
+    > li {
+      display: flex;
+      align-items: center;
+      height: 13.5vw;
+      border-bottom: 1px solid #E5E5E5;
+      &:last-of-type {
+        border-bottom: initial;
+      }
+      > img.icon {
+        width: 5.3vw;
+        height: 5.3vw;
+        margin-right: 2.7vw;
+      }
+      > .name {
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #545454;
+      }
+      > img.arrow {
+        margin-left: auto;
+        width: 2.3vw;
+        height: 4vw;
+      }
+    }
+  }
+}
 </style>

src/views/Serve/FoodDetail.vue

@@ -6,8 +6,13 @@
   </div>
 </template>
 
+<script>
+export default {
+}
+</script>
+
 <style lang="less" scoped>
 .food-detail {
-  
+
 }
 </style>