From 655d94daa1db0c1e71031140ac3b01608b7d3775 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 5 Nov 2025 15:07:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=9B=E6=A0=87=E8=A7=A3=E6=9E=90=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/components/AnalysisDetail.vue    | 192 +++++++++++-------
 src/views/analysis/components/BidForm.vue     |  53 ++++-
 2 files changed, 166 insertions(+), 79 deletions(-)

diff --git a/src/views/analysis/components/AnalysisDetail.vue b/src/views/analysis/components/AnalysisDetail.vue
index 9c015a8..1b32eb6 100644
--- a/src/views/analysis/components/AnalysisDetail.vue
+++ b/src/views/analysis/components/AnalysisDetail.vue
@@ -3,86 +3,90 @@
         <div class="content-header">
             <el-button class="reset-btn" @click="handleClose">返回</el-button>
         </div>
-        <el-card class="analysis-detail-card">
-            <template slot="header">
-                <div class="card-header">
-                    <img src="@/assets/enterpriseLibrary/basic-info.png" alt="项目信息">
-                    <h3>项目信息</h3>
-                </div>
-            </template>
-            <div class="analysis-detail-content">
-                <!-- 两列布局的字段 -->
-                <el-row :gutter="24" class="detail-row">
-                    <el-col :span="12" class="detail-col">
-                        <div class="detail-field">
-                            <div class="field-label">项目名称</div>
-                            <div class="field-value">{{ detailData.proName || '--' }}</div>
-                        </div>
-                    </el-col>
-                    <el-col :span="12" class="detail-col">
-                        <div class="detail-field">
-                            <div class="field-label">项目编号</div>
-                            <div class="field-value">{{ detailData.proCode || '--' }}</div>
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <el-row :gutter="24" class="detail-row">
-                    <el-col :span="12" class="detail-col">
-                        <div class="detail-field">
-                            <div class="field-label">招标人</div>
-                            <div class="field-value">{{ detailData.bidder || '--' }}</div>
-                        </div>
-                    </el-col>
-                    <el-col :span="12" class="detail-col">
-                        <div class="detail-field">
-                            <div class="field-label">代理机构</div>
-                            <div class="field-value">{{ detailData.agency || '--' }}</div>
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <el-row :gutter="24" class="detail-row">
-                    <el-col :span="12" class="detail-col">
-                        <div class="detail-field">
-                            <div class="field-label">开标时间</div>
-                            <div class="field-value">{{ detailData.openTime || '--' }}</div>
-                        </div>
-                    </el-col>
-                    <el-col :span="12" class="detail-col">
-                        <div class="detail-field">
-                            <div class="field-label">开标方式</div>
-                            <div class="field-value">{{ detailData.openMethod || '--' }}</div>
-                        </div>
-                    </el-col>
-                </el-row>
-
-                <!-- 项目简介 - 占满宽度 -->
-                <div class="detail-field full-width">
-                    <div class="field-label">项目简介</div>
-                    <div class="field-value description-value">{{ detailData.proDescription || '--' }}</div>
-                </div>
-            </div>
-        </el-card>
-        <div class="table-container">
-            <TableModel :showSearch="false" :showOperation="true" :showRightTools="false" ref="detailTableRef"
-                :columnsList="detailColumnsList" :request-api="listAPI" :sendParams="sendParams" :handleColWidth="180">
-                <template slot="tableTitle">
+        <div class="content-scrollable">
+            <el-card class="analysis-detail-card">
+                <template slot="header">
                     <div class="card-header">
-                        <img src="@/assets/enterpriseLibrary/basic-info.png" alt="标的信息">
-                        <h3>标的信息</h3>
+                        <img src="@/assets/enterpriseLibrary/basic-info.png" alt="项目信息">
+                        <h3>项目信息</h3>
                     </div>
                 </template>
+                <div class="analysis-detail-content">
+                    <!-- 两列布局的字段 -->
+                    <el-row :gutter="24" class="detail-row">
+                        <el-col :span="12" class="detail-col">
+                            <div class="detail-field">
+                                <div class="field-label">项目名称</div>
+                                <div class="field-value">{{ detailData.proName || '--' }}</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="detail-col">
+                            <div class="detail-field">
+                                <div class="field-label">项目编号</div>
+                                <div class="field-value">{{ detailData.proCode || '--' }}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
 
-                <template slot="handle" slot-scope="{ data }">
-                     <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:edit']" class="action-btn" style="#FE9400"
-                        @click="handleUpdate(data)">
-                        修改
-                    </el-button>
-                </template>
-            </TableModel>
+                    <el-row :gutter="24" class="detail-row">
+                        <el-col :span="12" class="detail-col">
+                            <div class="detail-field">
+                                <div class="field-label">招标人</div>
+                                <div class="field-value">{{ detailData.bidder || '--' }}</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="detail-col">
+                            <div class="detail-field">
+                                <div class="field-label">代理机构</div>
+                                <div class="field-value">{{ detailData.agency || '--' }}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+
+                    <el-row :gutter="24" class="detail-row">
+                        <el-col :span="12" class="detail-col">
+                            <div class="detail-field">
+                                <div class="field-label">开标时间</div>
+                                <div class="field-value">{{ detailData.openTime || '--' }}</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="12" class="detail-col">
+                            <div class="detail-field">
+                                <div class="field-label">开标方式</div>
+                                <div class="field-value">{{ detailData.openMethod || '--' }}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+
+                    <!-- 项目简介 - 占满宽度 -->
+                    <div class="detail-field full-width">
+                        <div class="field-label">项目简介</div>
+                        <div class="field-value description-value">{{ detailData.proDescription || '--' }}</div>
+                    </div>
+                </div>
+            </el-card>
+            <div class="table-container">
+                <TableModel :showSearch="false" :showOperation="true" :showRightTools="false" ref="detailTableRef"
+                    :columnsList="detailColumnsList" :request-api="listAPI" :sendParams="sendParams"
+                    :handleColWidth="180">
+                    <template slot="tableTitle">
+                        <div class="card-header">
+                            <img src="@/assets/enterpriseLibrary/basic-info.png" alt="标的信息">
+                            <h3>标的信息</h3>
+                        </div>
+                    </template>
+
+                    <template slot="handle" slot-scope="{ data }">
+                        <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:edit']" class="action-btn"
+                            style="#FE9400" @click="handleUpdate(data)">
+                            修改
+                        </el-button>
+                    </template>
+                </TableModel>
+            </div>
         </div>
-        <BidForm v-if="showBidForm" :width="600" :rowData="detailData" :title="title" @closeDialog="showBidForm = false"/>
+        <BidForm v-if="showBidForm" :width="600" :rowData="detailData" :title="title"
+            @closeDialog="showBidForm = false" />
     </div>
 </template>
 
@@ -180,8 +184,35 @@ export default {
 .analysis-detail-container {
     padding: 24px;
     background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
-    min-height: 100vh;
+    height: calc(100vh - 84px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.content-scrollable {
+    flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 6px; // 为滚动条留出空间
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+    }
 }
 
 .content-header {
@@ -217,6 +248,7 @@ export default {
     border-radius: 8px;
     box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
     border: none;
+    margin-top: 5px;
     margin-bottom: 10px;
 
     ::v-deep .el-card__header {
@@ -262,8 +294,8 @@ export default {
 
     .detail-field {
         .field-label {
-            color: #606266;
-            font-size: 14px;
+            color: #424242;
+            font-size: 18px;
             font-weight: 500;
             margin-bottom: 8px;
             line-height: 1.5;
@@ -291,4 +323,8 @@ export default {
         }
     }
 }
+
+.table-container {
+    margin-bottom: 5px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/analysis/components/BidForm.vue b/src/views/analysis/components/BidForm.vue
index bb4b1f2..06aa51e 100644
--- a/src/views/analysis/components/BidForm.vue
+++ b/src/views/analysis/components/BidForm.vue
@@ -2,7 +2,7 @@
     <!-- 小型弹窗，用于完成，删除，保存等操作 -->
     <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
         :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
-        <div>
+        <div class="dialog-content-scrollable">
             <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
                 <el-form-item label="标的名称" prop="markName">
                     <el-input v-model.trim="form.markName" placeholder="请输入标的名称" clearable show-word-limit
@@ -264,15 +264,38 @@ export default {
 .w700 ::v-deep .el-dialog {
     width: 700px;
     font-family: Source Han Sans CN, Source Han Sans CN;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5vh !important;
+    margin-bottom: 5vh !important;
 }
 
 .w500 ::v-deep .el-dialog {
     width: 500px;
     font-family: Source Han Sans CN, Source Han Sans CN;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5vh !important;
+    margin-bottom: 5vh !important;
+}
+
+// 弹窗主体区域
+.w500 ::v-deep .el-dialog__body,
+.w700 ::v-deep .el-dialog__body {
+    flex: 1;
+    overflow: hidden;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
 }
 
 .w500 ::v-deep .el-dialog__header,
 .w700 ::v-deep .el-dialog__header {
+    flex-shrink: 0;
+    border-bottom: 1px solid #EBEEF5;
+    
     .el-dialog__title {
         font-size: 16px;
     }
@@ -331,5 +354,33 @@ export default {
 
 ::v-deep .el-dialog__footer {
     text-align: center;
+    flex-shrink: 0;
+}
+
+// 内容区域可滚动
+.dialog-content-scrollable {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 6px;
+    max-height: calc(90vh - 120px); // 减去头部和底部的高度
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+    }
 }
 </style>