抽出公共scss

src/styles/page-details-layout.scss

@@ -0,0 +1,46 @@
+@use './variables.scss' as *;
+.safety-platform-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+  &__main,
+  &__header,
+  &__footer {
+    width: 100%;
+    background-color: $white-color;
+    border-radius: 4px;
+  }
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px 22px;
+    flex-shrink: 0;
+    // 返回按钮
+    .back-icon {
+      width: 16px;
+      cursor: pointer;
+    }
+    // 面包屑标题
+    .breadcrumb-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: rgba($text-color, 0.85);
+    }
+  }
+  &__main {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+  }
+  &__footer {
+    @include flex-center;
+    justify-content: flex-end;
+    height: 88px;
+    flex-shrink: 0;
+    padding: 28px;
+  }
+}

src/views/emergency/organization/PageOrganization.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="page-organization-container">
-    <div class="page-organization-header">
-      <div class="page-organization-header-title"> 应急架构体系 </div>
+  <div class="safety-platform-container">
+    <div class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 应急架构体系 </div>
     </div>
-    <div class="page-organization-content">
+    <div class="safety-platform-container__main">
       <OrgChart :treeData="treeData" />
     </div>
-    <div class="page-organization-footer"> 编辑 </div>
+    <div class="safety-platform-container__footer">
+      <el-button> 编辑 </el-button>
+    </div>
   </div>
 </template>
 
@@ -31,40 +33,6 @@
   };
 </script>
 
-<style scoped>
-  .page-organization-container {
-    width: 100%;
-    height: 100%;
-  }
-
-  .page-organization-header {
-    width: 100%;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f5f5f5;
-    border-bottom: 1px solid #e0e0e0;
-
-    .page-organization-header-title {
-      font-size: 20px;
-      font-weight: 500;
-      color: #333;
-    }
-  }
-
-  .page-organization-content {
-    width: 100%;
-    height: calc(100% - 120px);
-  }
-
-  .page-organization-footer {
-    width: 100%;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f5f5f5;
-    border-top: 1px solid #e0e0e0;
-  }
+<style lang="scss" scoped>
+  @use '@/styles/page-details-layout.scss' as *;
 </style>