From 47fb3304f67348361e978507434ebe4fc60ec453 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 14 Nov 2025 15:03:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../technical/components/TechnicalDetail.vue  | 54 +++++----------
 .../technical/components/TechnicalForm.vue    | 21 ++++--
 .../technical/components/child/BasicInfo.vue  | 67 ++++++++++++-------
 .../components/child/BasicInfoDetail.vue      | 25 +++++--
 .../technical/components/child/FileInfo.vue   | 29 ++++----
 .../components/child/FileInfoDetail.vue       |  6 +-
 6 files changed, 114 insertions(+), 88 deletions(-)

diff --git a/src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue b/src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue
index 703d850..41a84be 100644
--- a/src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue
+++ b/src/views/enterpriseLibrary/technical/components/TechnicalDetail.vue
@@ -11,6 +11,8 @@
                 <el-col :span="6" class="pane-left">
                     <BasicInfoDetail ref="basicInfo" :detailData="detailData" />
                 </el-col>
+            </el-row>
+            <el-row :gutter="24" class="content-row">
                 <!-- 文件上传 -->
                 <el-col :span="6" class="pane-center">
                     <FileInfoDetail ref="fileInfo" :detailData="detailData" />
@@ -85,25 +87,24 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+    height: calc(100vh - 84px);
+    width: 100%;
     padding: 24px;
+    box-sizing: border-box;
     background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
-    min-height: 100vh;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     position: relative;
-
-    // 当显示动画时，禁用页面点击
-    &.no-pointer-events {
-        pointer-events: none;
-
-        // 子元素也继承禁用点击
-        * {
-            pointer-events: none;
-        }
-    }
+    margin: 0;
 }
 
 .content-body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
     margin-top: 20px;
+    min-height: 0; // 确保 flex 子元素可以正确收缩
 }
 
 .content-row {
@@ -118,10 +119,10 @@ export default {
 .pane-right {
     background: #fff;
     border-radius: 16px 16px 16px 16px;
-    min-height: 600px;
+    min-height: 200px;
     box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
     padding: 0;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     flex: 1;
     min-width: 0;
 }
@@ -130,8 +131,8 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    margin-bottom: 20px;
     gap: 12px;
+    flex-shrink: 0;
 }
 
 .edit-btn {
@@ -172,27 +173,4 @@ export default {
         box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
     }
 }
-
-// 动画定义
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes slideInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px) scale(0.9);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/enterpriseLibrary/technical/components/TechnicalForm.vue b/src/views/enterpriseLibrary/technical/components/TechnicalForm.vue
index 2711d44..1ffd5f8 100644
--- a/src/views/enterpriseLibrary/technical/components/TechnicalForm.vue
+++ b/src/views/enterpriseLibrary/technical/components/TechnicalForm.vue
@@ -16,6 +16,8 @@
                 <el-col :span="6" class="pane-left">
                     <BasicInfo ref="basicInfo" :detailData="detailData" />
                 </el-col>
+            </el-row>
+            <el-row :gutter="24" class="content-row">
                 <!-- 文件上传 -->
                 <el-col :span="6" class="pane-center">
                     <FileInfo ref="fileInfo" :detailData="detailData" />
@@ -200,11 +202,16 @@ export default {
 
 <style scoped lang="scss">
 .app-container {
+    height: calc(100vh - 84px);
+    width: 100%;
     padding: 24px;
+    box-sizing: border-box;
     background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
-    min-height: 100vh;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     position: relative;
+    margin: 0;
 
     // 当显示动画时，禁用页面点击
     &.no-pointer-events {
@@ -305,7 +312,11 @@ export default {
 }
 
 .content-body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
     margin-top: 20px;
+    min-height: 0; // 确保 flex 子元素可以正确收缩
 }
 
 .content-row {
@@ -320,10 +331,10 @@ export default {
 .pane-right {
     background: #fff;
     border-radius: 16px 16px 16px 16px;
-    min-height: 600px;
+    min-height: 200px;
     box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
     padding: 0;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     flex: 1;
     min-width: 0;
 }
@@ -332,8 +343,8 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    margin-bottom: 20px;
     gap: 12px;
+    flex-shrink: 0;
 }
 
 .search-btn {
diff --git a/src/views/enterpriseLibrary/technical/components/child/BasicInfo.vue b/src/views/enterpriseLibrary/technical/components/child/BasicInfo.vue
index 6195709..cec2c68 100644
--- a/src/views/enterpriseLibrary/technical/components/child/BasicInfo.vue
+++ b/src/views/enterpriseLibrary/technical/components/child/BasicInfo.vue
@@ -5,30 +5,45 @@
             <span>基础信息</span>
         </div>
         <el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
-            <el-form-item label="电压等级" prop="voltageLevel">
-                <el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item">
-                    <el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="建设性质" prop="natureConstruction">
-                <el-select v-model="form.natureConstruction" placeholder="请选择工程性质" class="form-item" multiple>
-                    <el-option v-for="item in dict.type.construction_nature" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="结构形式" prop="structuralForm">
-                <el-select v-model="form.structuralForm" placeholder="请选择结构形式" class="form-item">
-                    <el-option v-for="item in dict.type.structural_form" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="基础形式" prop="basicForm">
-                <el-select v-model="form.basicForm" placeholder="请选择基础形式" class="form-item">
-                    <el-option v-for="item in dict.type.basic_form" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <el-form-item label="电压等级" prop="voltageLevel">
+                        <el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item">
+                            <el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="建设性质" prop="natureConstruction">
+                        <el-select v-model="form.natureConstruction" placeholder="请选择工程性质" class="form-item" multiple>
+                            <el-option v-for="item in dict.type.construction_nature" :key="item.value"
+                                :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="结构形式" prop="structuralForm">
+                        <el-select v-model="form.structuralForm" placeholder="请选择结构形式" class="form-item">
+                            <el-option v-for="item in dict.type.structural_form" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <el-form-item label="基础形式" prop="basicForm">
+                        <el-select v-model="form.basicForm" placeholder="请选择基础形式" class="form-item">
+                            <el-option v-for="item in dict.type.basic_form" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+
         </el-form>
     </div>
 </template>
@@ -68,9 +83,9 @@ export default {
         }
     },
     watch: {
-        detailData:{
+        detailData: {
             handler(newVal) {
-                if(Object.keys(newVal).length > 0){
+                if (Object.keys(newVal).length > 0) {
                     this.setFormData(newVal)
                 }
             },
diff --git a/src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue b/src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue
index 05721ac..1f8d8b6 100644
--- a/src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue
+++ b/src/views/enterpriseLibrary/technical/components/child/BasicInfoDetail.vue
@@ -5,10 +5,23 @@
             <span>基础信息</span>
         </div>
         <div class="detail-content">
-            <DetailItem label="电压等级" :value="form.voltageLevel" />
-            <DetailItem label="建设性质" :value="form.natureConstruction" />
-            <DetailItem label="结构形式" :value="form.structuralForm" />
-            <DetailItem label="基础形式" :value="form.basicForm" />
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <DetailItem label="电压等级" :value="form.voltageLevel" />
+                </el-col>
+                <el-col :span="8">
+                    <DetailItem label="建设性质" :value="form.natureConstruction" />
+                </el-col>
+                <el-col :span="8">
+                    <DetailItem label="结构形式" :value="form.structuralForm" />
+                </el-col>
+
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <DetailItem label="基础形式" :value="form.basicForm" />
+                </el-col>
+            </el-row>
         </div>
     </div>
 </template>
@@ -37,9 +50,9 @@ export default {
         }
     },
     watch: {
-        detailData:{
+        detailData: {
             handler(newVal) {
-                if(Object.keys(newVal).length > 0){
+                if (Object.keys(newVal).length > 0) {
                     this.setDetailData(newVal)
                 }
             },
diff --git a/src/views/enterpriseLibrary/technical/components/child/FileInfo.vue b/src/views/enterpriseLibrary/technical/components/child/FileInfo.vue
index 771ae55..f75763b 100644
--- a/src/views/enterpriseLibrary/technical/components/child/FileInfo.vue
+++ b/src/views/enterpriseLibrary/technical/components/child/FileInfo.vue
@@ -5,12 +5,17 @@
             <span>文件上传</span>
         </div>
         <el-form :model="form" :rules="rules" ref="fileInfoForm" label-width="110px" label-position="top">
-            <!-- 文件上传 -->
-            <el-form-item label="文件上传" prop="fileList">
-                <UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange" @del-file="handleDelFile"
-                    type="business_license" :uploadType="uploadType" :maxFileTips="maxFileTips"
-                    :fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum" :disabled="disabled" />
-            </el-form-item>
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <!-- 文件上传 -->
+                    <el-form-item label="文件上传" prop="fileList">
+                        <UploadMoreFile :fileList="form.fileList" @file-change="handleFileChange"
+                            @del-file="handleDelFile" type="business_license" :uploadType="uploadType"
+                            :maxFileTips="maxFileTips" :fileUploadRule="fileUploadRule" :limitUploadNum="limitUploadNum"
+                            :disabled="disabled" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
         </el-form>
     </div>
 </template>
@@ -61,9 +66,9 @@ export default {
         }
     },
     watch: {
-        detailData:{
+        detailData: {
             handler(newVal) {
-                if(Object.keys(newVal).length > 0){
+                if (Object.keys(newVal).length > 0) {
                     this.limitUploadNum = 1;
                     this.disabled = true;
                     this.setFormData(newVal)
@@ -98,7 +103,7 @@ export default {
         // 文件删除时触发
         handleDelFile(file) {
             const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
-            if(delPath){
+            if (delPath) {
                 this.form.delFileList.push(delPath);
             }
         },
@@ -109,13 +114,13 @@ export default {
                 delFileList: []
             }
         },
-        getFileList(){
+        getFileList() {
             return this.detailData.resourceFileVoList.map(item => {
                 return {
                     name: item.fileName,
                     filePath: item.filePath,
-                    lsFilePath:item.lsFilePath,
-                    fileType:item.fileType
+                    lsFilePath: item.lsFilePath,
+                    fileType: item.fileType
                 };
             });
         }
diff --git a/src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue b/src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue
index 1364c2f..522d992 100644
--- a/src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue
+++ b/src/views/enterpriseLibrary/technical/components/child/FileInfoDetail.vue
@@ -5,7 +5,11 @@
             <span>文件上传</span>
         </div>
         <div class="detail-content">
-            <FileOrImageDisplay label="文件上传" :file="form.fileList[0]" :image-url="form.url" />
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <FileOrImageDisplay label="文件上传" :file="form.fileList[0]" :image-url="form.url" />
+                </el-col>
+            </el-row>
         </div>
     </div>
 </template>