添加页面标题容器，添加页面容器组件

src/components/Page/PageTitle.vue

+<template>
+  <div class="page-header">
+    <div class="page-title">
+      <slot />
+    </div>
+    <div class="page-buttons">
+      <el-button size="mini" type="default" @click="pageBack">返回</el-button>
+      <slot name="buttons" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    pageBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page-header {
+  background: #fff;
+  padding: 10px 0 7px;
+  box-shadow: 0 2px 3px #e3e3e3;
+  .page-buttons {
+    padding: 0 20px;
+  }
+  .page-title {
+    margin: 0;
+    font-size: 18px;
+    text-align: center;
+    font-weight: 600;
+  }
+}
+</style>

src/components/Page/PageWrapper.vue

+<template>
+  <div class="page-wrapper">
+    <el-scrollbar style="padding: 10px 0;" :style="{ height: scrollHeight }">
+      <slot />
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    scrollHeight() {
+      return "calc(100vh - 70px - 83px)";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+
+}
+</style>

src/main.js

@@ -19,6 +19,10 @@ import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+
+
+import PageTitle from '@/components/Page/PageTitle.vue'
+import PageWrapper from '@/components/Page/PageWrapper.vue'
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -54,6 +58,8 @@ Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
 
 // 全局组件挂载
+Vue.component('PageWrapper', PageWrapper)
+Vue.component('PageTitle', PageTitle)
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)