DetailForm样式移动

vue/src/component/AbstractForm/DetailForm.scss

@@ -1,4 +1,10 @@
+@import "~@/asset/style/variables.scss";
+
 .detail-page {
+    &.el-loading-parent--relative {
+        position: static !important;
+    }
+
     &-header {
         margin: -#{$page-view-margin} -#{$page-view-margin} 0 -#{$page-view-margin};
         padding: 16px 32px 0 32px;

vue/src/component/AbstractForm/DetailForm.vue

@@ -91,130 +91,4 @@ export default {
 }
 </script>
 
-<style lang="scss">
-@import "~@/asset/style/variables.scss";
-
-.detail-page {
-    &.el-loading-parent--relative {
-        position: static !important;
-    }
-
-    &-header {
-        margin: -#{$page-view-margin} -#{$page-view-margin} 0 -#{$page-view-margin};
-        padding: 16px 32px 0 32px;
-        background: #fff;
-        border-bottom: 1px solid #e8eaec;
-
-        > .el-page-header {
-            padding: 0 0 24px 0;
-
-            .el-page-header__left:hover {
-                color: $--color-primary;
-            }
-        }
-
-        > .el-row {
-            display: flex;
-            width: 100%;
-            margin-bottom: 12px;
-
-            @media (max-width: 768px) {
-                display: block;
-            }
-        }
-
-        &-left {
-            width: 100%;
-            overflow: hidden;
-
-            .el-col {
-                margin-bottom: 16px;
-            }
-        }
-
-        &-extra {
-            min-width: 242px;
-            margin-left: 88px;
-
-            @media (max-width: 1200px) {
-                margin-left: 44px;
-            }
-
-            @media (max-width: 992px) {
-                margin-left: 20px;
-            }
-
-            @media (max-width: 768px) {
-                margin-left: 0;
-            }
-
-            > div {
-                display: flex;
-                justify-content: space-between;
-                width: 200px;
-            }
-
-            &-title {
-                margin-bottom: 4px;
-                color: rgba(0, 0, 0, .45);
-                font-size: 14px;
-            }
-
-            &-content {
-                margin-top: 12px;
-                color: rgba(0, 0, 0, .85);
-                font-size: 24px;
-            }
-        }
-
-        &-description {
-            span {
-                display: inline-flex;
-                align-items: baseline;
-            }
-
-            &-label {
-                color: rgba(0, 0, 0, .85);
-                font-weight: 400;
-                font-size: 14px;
-                line-height: 1.5715;
-                text-align: start;
-            }
-
-            &-content {
-                color: rgba(0, 0, 0, .65);
-                font-size: 14px;
-                line-height: 1.5715;
-            }
-        }
-    }
-
-    > .el-form > .el-row > .el-card {
-        margin-top: 16px;
-    }
-
-    &-footer {
-        @include clearfix;
-        position: absolute;
-        width: 100%;
-        right: 0;
-        bottom: 0;
-        z-index: 99;
-        transition: all 0.3s ease 0s;
-        height: 56px;
-        padding: 0 24px;
-        line-height: 56px;
-        border-top: 1px solid #f0f0f0;
-        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
-        backdrop-filter: blur(3px);
-
-        &-left {
-            float: left;
-        }
-
-        &-right {
-            float: right;
-        }
-    }
-}
-</style>
+<style lang="scss" src="./DetailForm.scss"></style>