个人主页移动端适配

web/components/UserCard2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="com-user-card2">
     <el-row :gutter="20">
-      <el-col :span="16">
+      <el-col :span="16" :xs="24">
         <div class="user">
           <div class="user-card-avatar">
             <nuxt-link :to="'/user/' + user.id">
@@ -16,7 +16,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="user-card-stat">
           <el-row class="help-block">
             <el-col :span="8">
@@ -132,4 +132,17 @@ export default {
     font-size: 13px;
   }
 }
+
+@media screen and (max-width: $mobile-width) {
+  .user-card-stat {
+    margin-top: 20px;
+    .help-block {
+      font-size: 12px;
+      .el-link {
+        font-size: 14px;
+        margin-top: 8px;
+      }
+    }
+  }
+}
 </style>

web/pages/me/index.vue

@@ -2,7 +2,9 @@
   <div class="page page-me">
     <el-row :gutter="20">
       <el-col :span="6">
-        <el-card shadow="never"></el-card>
+        <el-card shadow="never">
+          <user-card :user="user" />
+        </el-card>
       </el-col>
       <el-col :span="18">
         <el-card shadow="never"></el-card>
@@ -13,5 +15,10 @@
 <script>
 export default {
   name: 'PageMe',
+  computed: {
+    user() {
+      return this.$store.state.user
+    },
+  },
 }
 </script>