修改布局容器样式与去除浏览器格式

package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.3.2",
         "axios": "^1.13.2",
         "element-plus": "^2.11.8",
+        "normalize.css": "^8.0.1",
         "vue": "^3.5.24",
         "vue-router": "^4.6.3"
       },
@@ -1592,6 +1593,12 @@
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "axios": "^1.13.2",
     "element-plus": "^2.11.8",
+    "normalize.css": "^8.0.1",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },

src/layout/Layout.vue

@@ -94,8 +94,9 @@ const currentRoutePath = computed(() => route.path);
 .sidebar {
   position: fixed;
   left: 24px;
+  top: 10px;
   width: 336px;
-  height: 100vh;
+  height: calc(100vh - 20px);
   flex-shrink: 0;
   border-radius: 8px;
   background: #FEE6E6;
@@ -142,9 +143,11 @@ const currentRoutePath = computed(() => route.path);
 .main-content {
   padding: 20px;
   background-color: #FEE6E6;
-  height: 100vh;
+  height: calc(100vh - 20px);
   margin-left: 50px;
-  box-shadow: 0 0 4px 0 #00000040;
+  margin-right: 24px;
+  margin-top: 10px;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
 }
 
 /* 父目录文字样式 */

src/main.js

@@ -6,6 +6,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 // 导入 Element Plus 图标
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'normalize.css';
 
 const app = createApp(App)