我的设置页面

src/assets/main.scss

@@ -24,3 +24,20 @@ body {
   overflow: hidden; //当文本超出元素范围时，隐藏超出的部分。
   text-overflow: ellipsis; //在文本溢出并且overflow属性设置为hidden时，显示省略号。
 }
+
+// 全局边框
+.bdr-t {
+  border-top: 1px solid #e9e9eb;
+}
+
+.bdr-r {
+  border-right: 1px solid #e9e9eb;
+}
+
+.bdr-b {
+  border-bottom: 1px solid #e9e9eb;
+}
+
+.bdr-l {
+  border-left: 1px solid #e9e9eb;
+}

src/router/index.js

@@ -26,7 +26,18 @@ const router = createRouter({
         },
         {
           path: '/setting',
-          component: () => import('@/views/setting/SettingLayout.vue')
+          component: () => import('@/views/setting/SettingLayout.vue'),
+          redirect: '/setting/personal',
+          children: [
+            {
+              path: '/setting/personal',
+              component: () => import('@/views/setting/SettingPersonal.vue')
+            },
+            {
+              path: '/setting/security',
+              component: () => import('@/views/setting/SettingSecurity.vue')
+            }
+          ]
         }
       ]
     }

src/views/layout/LayoutContainer.vue

@@ -94,7 +94,7 @@ const onExit = async () => {
         <el-icon :size="20"><SwitchButton /></el-icon>
       </div>
     </el-aside>
-    <el-main>
+    <el-main style="padding: 0">
       <router-view></router-view>
     </el-main>
     <my-card ref="myCardDialog"></my-card>
@@ -106,6 +106,15 @@ const onExit = async () => {
   height: 100vh;
   .el-aside {
     background-color: #409eff;
+
+    .avatar {
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 30px;
+      cursor: pointer;
+    }
+
     .el-menu {
       border-right: none;
       display: flex;
@@ -128,16 +137,4 @@ const onExit = async () => {
     }
   }
 }
-
-.avatar {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-  margin-bottom: 30px;
-  cursor: pointer;
-}
-
-.el-menu-item {
-  margin-top: 20px;
-}
 </style>

src/views/setting/SettingLayout.vue

@@ -1 +1,57 @@
-<template>设置</template>
+<script setup>
+import { User, Key } from '@element-plus/icons-vue'
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header class="bdr-b">我的设置</el-header>
+      <el-container class="el-container__body">
+        <el-aside class="bdr-r body" width="200px">
+          <el-menu
+            active-text-color="#a0cfff"
+            background-color="#f5f5f5"
+            :default-active="$route.path"
+            text-color="black"
+            style="border: 0"
+            router
+          >
+            <el-menu-item index="/setting/personal">
+              <el-icon><User /></el-icon>
+              <span>个人中心</span>
+            </el-menu-item>
+
+            <el-menu-item index="/setting/security">
+              <el-icon><Key /></el-icon>
+              <span>安全设置</span>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-header {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 15px;
+  font-size: 18px;
+}
+
+.el-container__body {
+  height: 100vh;
+
+  .el-aside {
+    width: 150px;
+    height: 100%;
+    padding: 8px;
+    padding-top: 3px;
+  }
+}
+</style>

src/views/setting/SettingPersonal.vue

@@ -0,0 +1 @@
+<template>个人中心</template>

src/views/setting/SettingSecurity.vue

@@ -0,0 +1 @@
+<template>安全中心</template>