feat: 添加个人中心界面

Yi.Bbs.Vue3/src/views/profile/Index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="app-container" style="width: 1300px">
-
-    
     <!-- 老版用户信息页面 -->
-    <el-row :gutter="20">
+    <!-- <el-row :gutter="20">
       <el-col :span="6" :xs="24">
         <el-card class="box-card">
           <template v-slot:header>
@@ -64,13 +62,13 @@
           </el-tabs>
         </el-card>
       </el-col>
-    </el-row>
+    </el-row> -->
 
     <!-- 新版用户信息页面 -->
-    <!-- <el-row>
+    <el-row>
       <el-col :span="24">
         <div class="div-top">
-          <div class="div-top-1">
+          <div class="div-top-user">
             <div class="user-icon">用户头像</div>
             <div class="user-info">
               <div class="user-nick">
@@ -82,15 +80,30 @@
                 <span>100</span> 总访问 | <span>200</span> 排名 |
                 <span>36</span> 主题 | <span>836</span> 好友
               </div>
+              <div>
+                <p>个人简介：你好</p>
+                <p>个人简介：你好</p>
+                <p>注册时间：2020-12-02</p>
+                <p>个人简介：你好,很好，非常的好</p>
+              </div>
             </div>
           </div>
 
           <div class="user-edit">
             <div class="user-info-bottom">
-              <p>个人简介：你好</p>
+
-              <p>个人简介：你好</p>
+                <el-tabs v-model="activeTab" class="user-edit-tab">
-              <p>注册时间：2020-12-02</p>
+                  <el-tab-pane label="基本资料" name="userinfo">
-              <p>个人简介：你好,很好，非常的好</p>
+                    <userInfo :user="state.user" />
+                  </el-tab-pane>
+                  <el-tab-pane label="修改密码" name="resetPwd">
+                    <resetPwd />
+                  </el-tab-pane>
+                  <el-tab-pane label="第三方快捷登录" name="accountSetting">
+                    <accountSet />
+                  </el-tab-pane>
+                </el-tabs>
+    
             </div>
           </div>
         </div>
@@ -102,9 +115,7 @@
       <el-col :span="19" class="div-bottom-right">
         <div class="div-bottom-right-content">个人主题内容</div>
       </el-col>
-    </el-row> -->
+    </el-row>
-
-
   </div>
 </template>
 
@@ -139,7 +150,7 @@ onMounted(() => {
   getUser();
 });
 </script>
-<style scoped>
+<style scoped  lang="scss">
 .pull-right {
   float: right !important;
 }
@@ -172,77 +183,83 @@ onMounted(() => {
   justify-content: center;
   margin-bottom: 10px;
 }
+
+$topHeight: 550px;
+$userHeight: 150px;
+$remarkHeight: $topHeight - 150;
 .div-top {
-  padding-bottom: 10px;
+  // padding-bottom: 10px;
   background-color: #ffffff;
-  height: 300px;
+  min-height: $topHeight;
   margin-top: 30px;
   font-size: 14px;
   color: #555666;
-}
+  &-user {
-.user-icon {
+    display: flex;
-  flex: 1;
+    width: 100%;
-  background-color: aqua;
+    height: $userHeight;
-  height: 120px;
+    .user-icon {
-}
+      flex: 1;
-.user-info {
+      background-color: aqua;
-  flex: 9;
+      height: $userHeight;
+    }
+    .user-info {
+      flex: 9;
+      background-color: bisque;
+      height: $userHeight;
+      .user-nick {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        &-left {
+          color: #222226;
+          font-size: larger !important;
+          font-weight: 500 !important;
+        }
+      }
 
-  background-color: bisque;
+      .user-remark span {
-  height: 120px;
+        font-size: larger;
-}
+        font-weight: bold;
-.user-edit {
+        color: black;
-  flex: 1 0 auto;
+      }
-}
-.div-top-1 {
-  display: flex;
-  width: 100%;
-  height: 120px;
-}
 
-.user-edit {
+      .user-remark  p {
-  height: 180px;
+      margin-bottom: 15px;
-  padding-left: 10%;
+    }
-  background-color: burlywood;
+    }
-}
+  }
+  .user-edit {
+    height: $remarkHeight;
+    flex: 1 0 auto;
 
-.user-nick {
+    padding-left: 10%;
-  display: flex;
+    background-color: burlywood;
-  justify-content: space-between;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-.user-remark > span {
-  font-size: larger;
-  font-weight: bold;
-  color: black;
-}
 
-.user-info-bottom p {
+  }
-  margin-bottom: 15px;
 }
-.user-nick-left {
+.user-edit-tab
-  color: #222226;
+{
-  font-size: larger !important;
+width: 80%;
-  font-weight: 500 !important;
 }
 
 .div-bottom {
   margin-top: 20px;
-}
-.div-bottom-left {
-  height: 1000px;
-  background-color: cornsilk;
-}
 
-.div-bottom-right {
+  &-left {
-  height: 1000px;
+    height: 1000px;
-  background-color: #f0f2f5;
+    background-color: cornsilk;
-  padding-left: 20px;
+  }
-}
+  &-right {
-.div-bottom-right-content {
+    height: 1000px;
-  height: 100%;
+    background-color: #f0f2f5;
-  width: 100%;
+    padding-left: 20px;
-  background-color: darkorange;
+    &-content {
+      height: 100%;
+      width: 100%;
+      background-color: darkorange;
+    }
+  }
 }
 </style>