开发我的页面

src/main.js

@@ -10,7 +10,7 @@ import * as filters from "./filters";
 // 设置字体大小
 import "@/utils/rem";
 import "@/common/permission";
-import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab } from "vant";
+import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab, Grid, GridItem } from "vant";
 
 window.$_http = axios;
 // event Bus 用于无关系组件间的通信。
@@ -26,6 +26,8 @@ Vue.component("VanTabbar", Tabbar);
 Vue.component("VanTabbarItem", TabbarItem);
 Vue.component("VanTabs", Tabs);
 Vue.component("VanTab", Tab);
+Vue.component("VanGrid", Grid);
+Vue.component("VanGridItem", GridItem);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/views/home/index.vue

@@ -33,7 +33,7 @@ export default {
         { title: "学习", icon: "home-o", pageName: "page-learn" },
         { title: "答题", icon: "search", pageName: "page-answer" },
         { title: "考试", icon: "setting-o", pageName: "page-exam" },
-        { title: "我的", icon: "friends-o", pageName: "page-person" }
+        { title: "我的", icon: "contact", pageName: "page-person" }
       ]
     };
   },

src/views/home/person/page-person.vue

@@ -8,17 +8,81 @@
       bind:click-right=""
     />
     <div class="contentBody">
-      <span>page-person-center</span>
+      <div class="user-box">
+        <!-- 头像 -->
+        <div class="userCardBox">
+          <div class="flexRowStart">
+            <van-image
+              class="userHeaderImg"
+              fit="cover"
+              :src="maleAvatar"
+              :show-error="true"
+              :error-icon="maleAvatar"
+            />
+            <div class="flexRowBetweenCenter">
+              <div>
+                {{ userName }}
+              </div>
+            </div>
+          </div>
+          <div class="userCardLine"></div>
+          <!-- 今日积分 -->
+          <div class="todayScoreBox">
+            <div class="flexRowStartCenter">
+              <span class="todayScore">今日积分</span>
+              <span class="todayScoreNum">50</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 积分 -->
+      <div class="all-score-box">
+        <div class="allScoreCard">
+          <span>总积分:100</span>
+        </div>
+      </div>
+      <!-- 菜单 -->
+      <div class="menu-box">
+        <div class="menuCard">
+          <van-grid>
+            <van-grid-item
+              v-for="(item, index) in menus"
+              :key="index"
+              :icon="item.icon"
+              :text="item.title"
+            />
+          </van-grid>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import maleAvatar from "@/assets/image/maleAvatar.png";
 export default {
   name: "page-personal-center",
   components: {},
   data() {
-    return {};
+    return {
+      maleAvatar,
+      avatarStyle: {
+        "border-radius": "3rem",
+        width: "1.8rem",
+        height: "1.8rem",
+        "background-color": "white",
+        "margin-right": "0.2rem"
+      },
+      faceUrl: "",
+      userName: "test@test.com",
+      menus: [
+        { title: "考试成绩", icon: "photo-o" },
+        { title: "收藏", icon: "photo-o" },
+        { title: "排行榜", icon: "photo-o" },
+        { title: "使用手册", icon: "photo-o" },
+        { title: "积分兑换", icon: "photo-o" }
+      ]
+    };
   },
   computed: {},
   methods: {}
@@ -26,4 +90,130 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.scroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  background-color: #f7f5f6;
+  font-size: 0.6rem;
+  width: 100%;
+}
+.contentBody {
+  background-color: #fff;
+}
+.user-box {
+  padding: 0 0.5rem;
+  padding-top: 0.5rem;
+}
+.userCardBox {
+  width: 94%;
+  padding: 0.5rem 0.5rem;
+  box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+  -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+  border-radius: 0.3rem;
+  .userHeaderImg {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.1rem;
+    margin-right: 0.5rem;
+  }
+  .userCardRight {
+    width: 100vh;
+    .userName {
+      font-size: 0.65rem;
+      font-weight: bold;
+      color: #242526;
+    }
+    .userDetailTxt {
+      font-size: 0.5rem;
+      color: #438bef;
+    }
+    .userDetailIocn {
+      width: 0.5rem;
+      height: 0.5rem;
+      margin-left: 0.1rem;
+    }
+    .userMoreInfo {
+      font-size: 0.5rem;
+      color: #555658;
+      margin-top: 0.2rem;
+      .userMarginRight {
+        margin-right: 0.3rem;
+      }
+    }
+  }
+  .userDiseaseItem {
+    font-size: 0.5rem;
+    padding: 0.1rem 0.25rem;
+    background-color: #dae7fb;
+    color: #2e7ff1;
+    border-radius: 0.1rem;
+    margin-right: 0.5rem;
+    margin-top: 0.4rem;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+  .userCardLine {
+    border-bottom: 1px solid #f1f1f1;
+    width: 100%;
+    height: 1px;
+    margin: 0.4rem 0;
+  }
+  .flexRowStart {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  .flexRowBetweenCenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .flexRowStartCenter {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .todayScoreBox {
+    font-size: 0.5rem;
+    color: #555658;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
+    .todayScore {
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      color: #242526;
+      font-size: 0.6rem;
+      font-weight: bold;
+    }
+    .todayScoreNum {
+      margin-right: 0.5rem;
+      font-size: 0.55rem;
+    }
+  }
+}
+.all-score-box {
+  padding: 0 0.5rem;
+  padding-top: 1rem;
+}
+.allScoreCard {
+  width: 94%;
+  padding: 0.5rem 0.5rem;
+  box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+  -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+  border-radius: 0.3rem;
+}
+.menu-box {
+  padding: 1rem 0.5rem;
+}
+.menuCard {
+  width: 94%;
+  padding: 0.5rem 0.5rem;
+  box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+  -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+  border-radius: 0.3rem;
+}
 </style>