用户中心框架基本完成

src/components/Home/Home.vue

@@ -30,7 +30,7 @@
         </el-aside>
         <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
             <template>
-                <div>
+                <div class="main">
                     <el-tabs v-model="activeName" type="border-card" style="width: 45vw;" @tab-click="tabChange">
                         <el-tab-pane label="最新" name="first">
                             <ul
@@ -118,7 +118,7 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。
                     总共:
                 </el-card>
             </el-dialog>
-            <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+            <el-backtop target=".main" :visibility-height="20" :right="10" :bottom="10"></el-backtop>
         </el-main>
     </el-container>
 </template>

src/components/UserInfoPage.vue

@@ -11,7 +11,36 @@
                 </el-page-header>
             </div>
             <div class="PageContent">
-
+                <el-card class="box-card" style="border: none">
+                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: flex-start">
+                        <div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start">
+                            <div style="width: 100px;height: 100px">
+                                <el-avatar :size="90">{{this.$cookie.get('username')}}</el-avatar>
+                            </div>
+                            <div style="display: flex;flex-direction: column;align-items: center;margin-left: 15px;">
+                                <div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;margin-left: -27vw">
+                                    <span style="font-size: 20px;font-weight: bold;">{{this.$cookie.get('username')}}</span>
+                                    <span style="font-size: 15px;font-weight: bold;color: #3b82f6;margin-left: 10px">Lv.1</span>
+                                </div>
+                                <span style="margin-top: 10px;color: #6b7280;font-size: 15px">你是 HelloGitHub 社区的第<span style="font-size: 16px;color:#2b2e33;font-weight: bold "> 7750 </span>位用户，于 2023 年 06 月 25 日 加入。</span>
+                                <span style="margin-right: 8vw;margin-top: 10px;color: #6b7280;font-size: 15px">已分享<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>个开源项目<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>份项目评价，共获得<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>点贡献值。</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+                <el-card class="box-card" style="border: none;margin-top: 20px">
+                    <el-tabs v-model="activeName">
+                        <el-tab-pane label="评论" name="first">
+                            <el-empty description="暂无评论" :image-size="100"></el-empty>
+                        </el-tab-pane>
+                        <el-tab-pane label="点赞" name="second">
+                            <el-empty description="暂无点赞" :image-size="100"></el-empty>
+                        </el-tab-pane>
+                        <el-tab-pane label="项目" name="third">
+                            <el-empty description="暂无项目" :image-size="100"></el-empty>
+                        </el-tab-pane>
+                    </el-tabs>
+                </el-card>
             </div>
         </div>
 
@@ -21,6 +50,12 @@
 <script>
 export default {
     name: "UserInfoPage",
+    data(){
+        return{
+            activeName:'first'
+        }
+    },
+
     methods: {
         goBack() {
             window.history.go(-1);