tried to implement dashboard page

components.d.ts

@@ -8,11 +8,16 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Dashboard: typeof import('./src/components/Dashboard.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElMain: typeof import('element-plus/es')['ElMain']
     Header: typeof import('./src/components/Header.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']

src/components/Dashboard.vue

@@ -4,17 +4,44 @@
 
 <template>
 
-  <div class="flex m-3 p-3">
-    <el-card class="w-full h-full flex">
-      <el-avatar />
-      <el-card class="w-4" />
-
-    </el-card>
+<!--  <div class="full-height flex items-center justify-center p-8">-->
+<!--    <el-card class="w-full h-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">-->
+
+<!--    </el-card>-->
+<!--  </div>-->
+
+  <div class="flex items-center justify-center p-8 full-height">
+        <el-container  class="flex flex-col min-w-0 bg-gray-50 h-full w-full shadow-md rounded-lg">
+            <el-aside width="200px" class="bg-gray-200 rounded-l-lg flex flex-col items-center justify-between p-8">
+              <el-avatar :size="120">
+                头像
+              </el-avatar>
+
+              <el-descriptions :column="1" border class="">
+
+                <el-descriptions-item>
+                  <template #label>
+                    <div class="flex items-center">
+                      Username
+                    </div>
+                  </template>
+                  kooriookami
+                </el-descriptions-item>
+
+              </el-descriptions>
+            </el-aside>
+
+            <el-main class="p-8">
+              <span class="text-3xl font-semibold">修改信息</span>
+            </el-main>
+        </el-container>
   </div>
 
 
 </template>
 
 <style scoped>
-
+.full-height{
+  min-height: calc(100vh - 68.5px);
+}
 </style>