From 8a709ba6db50831048f9c3e2452ea6dc6c3de36f Mon Sep 17 00:00:00 2001
From: Bang Hu <hu_bang@hotmail.com>
Date: 星期五, 12 九月 2025 15:45:33 +0800
Subject: [PATCH] bug修改代码提交

---
 src/views/tradeManage/detail/index.vue |  326 +++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 250 insertions(+), 76 deletions(-)

diff --git a/src/views/tradeManage/detail/index.vue b/src/views/tradeManage/detail/index.vue
index c5eb9b5..9e0589f 100644
--- a/src/views/tradeManage/detail/index.vue
+++ b/src/views/tradeManage/detail/index.vue
@@ -2,84 +2,103 @@
   <div class="default-main">
     <!-- 璁㈠崟淇℃伅 + 鐢宠浜轰俊鎭� + 浜ゆ槗鍐呭锛堝悎骞朵负鍚屼竴鍗$墖锛� -->
     <el-card shadow="never">
-      <el-descriptions
-        :column="2"
-        border
-        class="mt10 order-desc fixed-label"
-        label-width="180px"
-        :label-style="labelStyle"
-        :content-style="contentStyle"
-      >
-        <el-descriptions-item :span="2" class="section-header">
-          <template #label>
-            <el-icon class="section-icon"><Document /></el-icon>
-            <span>璁㈠崟淇℃伅</span>
-          </template>
-          <template #default></template>
-        </el-descriptions-item>
-        <el-descriptions-item label="璁㈠崟缂栧彿">{{ detail.orderNo }}</el-descriptions-item>
-        <el-descriptions-item label="浜ゆ槗璧勬簮绫诲瀷">{{ detail.resourceTypeName }}</el-descriptions-item>
-        <el-descriptions-item label="鐢宠鏃堕棿">{{ detail.applyTime }}</el-descriptions-item>
-        <el-descriptions-item label="浜ゆ槗鐘舵��">
-          <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag>
-        </el-descriptions-item>
-      </el-descriptions>
+      <!-- 璁㈠崟淇℃伅 - 浣跨敤鑷畾涔夎〃鏍煎竷灞� -->
+      <div class="order-info-section">
+        <div class="section-header">
+          <el-icon class="section-icon"><Document /></el-icon>
+          <span>璁㈠崟淇℃伅</span>
+        </div>
+        <div class="order-info-grid">
+          <div class="order-info-item">
+            <div class="order-label">璁㈠崟缂栧彿</div>
+            <div class="order-content">{{ detail.orderNo }}</div>
+          </div>
+          <div class="order-info-item">
+            <div class="order-label">浜ゆ槗璧勬簮绫诲瀷</div>
+            <div class="order-content">{{ detail.resourceTypeName }}</div>
+          </div>
+          <div class="order-info-item">
+            <div class="order-label">鐢宠鏃堕棿</div>
+            <div class="order-content">{{ detail.applyTime }}</div>
+          </div>
+          <div class="order-info-item">
+            <div class="order-label">浜ゆ槗鐘舵��</div>
+            <div class="order-content">
+              <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <!-- 鐢宠浜轰俊鎭紙涓庤鍗曚俊鎭悓鍗$墖锛屽鐢ㄥ垎闅旀爣棰樻牱寮忥級 -->
-      <el-descriptions
-        :column="2"
-        border
-        class="mt15 order-desc fixed-label"
-        label-width="180px"
-        :label-style="labelStyle"
-        :content-style="contentStyle"
-      >
-        <el-descriptions-item :span="2" class="section-header">
-          <template #label>
-            <el-icon class="section-icon"><User /></el-icon>
-            <span>鐢宠浜轰俊鎭�</span>
-          </template>
-          <template #default></template>
-        </el-descriptions-item>
-        <el-descriptions-item label="濮撳悕">{{ detail.userName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="鍗曚綅">{{ detail.unitName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="閮ㄩ棬">{{ detail.userDept || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="鐢ㄦ埛鍚�">{{ detail.userAccount || '-' }}</el-descriptions-item>
-      </el-descriptions>
+      <!-- 鐢宠浜轰俊鎭� - 浣跨敤鑷畾涔夎〃鏍煎竷灞� -->
+      <div class="applicant-info-section">
+        <div class="section-header">
+          <el-icon class="section-icon"><User /></el-icon>
+          <span>鐢宠浜轰俊鎭�</span>
+        </div>
+        <div class="applicant-info-grid">
+          <div class="applicant-info-item">
+            <div class="applicant-label">濮撳悕</div>
+            <div class="applicant-content">{{ detail.userName || '-' }}</div>
+          </div>
+          <div class="applicant-info-item">
+            <div class="applicant-label">鍗曚綅</div>
+            <div class="applicant-content">{{ detail.unitName || '-' }}</div>
+          </div>
+          <div class="applicant-info-item">
+            <div class="applicant-label">閮ㄩ棬</div>
+            <div class="applicant-content">{{ detail.userDept || '-' }}</div>
+          </div>
+          <div class="applicant-info-item">
+            <div class="applicant-label">鐢ㄦ埛鍚�</div>
+            <div class="applicant-content">{{ detail.userAccount || '-' }}</div>
+          </div>
+        </div>
+      </div>
 
-      <!-- 浜ゆ槗鍐呭锛堢揣闅忕敵璇蜂汉淇℃伅锛屽悓鍗$墖锛屽鐢ㄥ垎闅旀爣棰樻牱寮忥級 -->
-      <el-descriptions
-        :column="2"
-        border
-        class="mt15 order-desc fixed-label"
-        label-width="180px"
-        :label-style="labelStyle"
-        :content-style="contentStyle"
-      >
-        <el-descriptions-item :span="2" class="section-header">
-          <template #label>
-            <el-icon class="section-icon"><Goods /></el-icon>
-            <span>浜ゆ槗鍐呭</span>
-          </template>
-          <template #default></template>
-        </el-descriptions-item>
-        <el-descriptions-item label="浜у搧鍚嶇О">
-          <el-link type="primary" :underline="false">{{ detail.productName }}</el-link>
-        </el-descriptions-item>
-        <el-descriptions-item label="鎻愪緵鑰�">{{ detail.supplier }}</el-descriptions-item>
-        <el-descriptions-item label="琛屼笟棰嗗煙">{{ detail.industry }}</el-descriptions-item>
-        <el-descriptions-item label="鍗曚綅宸ョ▼">
-          <el-tooltip effect="dark" :content="detail.projectUnit || '-'" placement="top" :disabled="!(detail.projectUnit && String(detail.projectUnit).trim())" popper-class="tooltip-wrap">
-            <div class="ellipsis-1">{{ detail.projectUnit || '-' }}</div>
-          </el-tooltip>
-        </el-descriptions-item>
-        <el-descriptions-item label="浜у搧绫诲瀷">{{ detail.productType || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="浜у搧绠�浠�">
-          <el-tooltip effect="dark" :content="detail.productDesc || '-'" placement="top" :disabled="!(detail.productDesc && String(detail.productDesc).trim())" popper-class="tooltip-wrap" trigger="click">
-            <div class="desc-wrap ellipsis-3">{{ detail.productDesc || '-' }}</div>
-          </el-tooltip>
-        </el-descriptions-item>
-      </el-descriptions>
+      <!-- 浜ゆ槗鍐呭 - 浣跨敤鑷畾涔夎〃鏍煎竷灞� -->
+      <div class="transaction-content-section">
+        <div class="section-header">
+          <el-icon class="section-icon"><Goods /></el-icon>
+          <span>浜ゆ槗鍐呭</span>
+        </div>
+        <div class="transaction-content-grid">
+          <div class="transaction-content-item">
+            <div class="transaction-label">浜у搧鍚嶇О</div>
+            <div class="transaction-content">
+              <el-link type="primary" :underline="false">{{ detail.productName }}</el-link>
+            </div>
+          </div>
+          <div class="transaction-content-item">
+            <div class="transaction-label">鎻愪緵鑰�</div>
+            <div class="transaction-content">{{ detail.supplier }}</div>
+          </div>
+          <div class="transaction-content-item">
+            <div class="transaction-label">琛屼笟棰嗗煙</div>
+            <div class="transaction-content">{{ detail.industry }}</div>
+          </div>
+          <div class="transaction-content-item">
+            <div class="transaction-label">鍗曚綅宸ョ▼</div>
+            <div class="transaction-content">
+              <el-tooltip effect="dark" :content="detail.projectUnit || '-'" placement="top" :disabled="!(detail.projectUnit && String(detail.projectUnit).trim())" popper-class="tooltip-wrap">
+                <div class="ellipsis-1">{{ detail.projectUnit || '-' }}</div>
+              </el-tooltip>
+            </div>
+          </div>
+          <div class="transaction-content-item">
+            <div class="transaction-label">浜у搧绫诲瀷</div>
+            <div class="transaction-content">{{ detail.productType || '-' }}</div>
+          </div>
+          <div class="transaction-content-item">
+            <div class="transaction-label">浜у搧绠�浠�</div>
+            <div class="transaction-content">
+              <el-tooltip effect="dark" :content="detail.productDesc || '-'" placement="top" :disabled="!(detail.productDesc && String(detail.productDesc).trim())" popper-class="tooltip-wrap" trigger="click">
+                <div class="desc-wrap ellipsis-3">{{ detail.productDesc || '-' }}</div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <!-- 璁㈠崟璇︽儏锛堢Щ鍔ㄥ埌浜ゆ槗鍐呭涓嬮潰锛屽悓涓�鍗$墖鍐咃級 -->
       <div ref="orderTableWrapRef">
@@ -382,6 +401,7 @@
 })
 const labelStyle = { width: '180px', maxWidth: '180px' }
 const contentStyle = { width: 'calc(50% - 180px)' }
+
 
 // 鏂囦欢鐩稿叧
 const fileList = ref<any[]>([])
@@ -1086,6 +1106,160 @@
   width: calc(50% - 180px) !important;
 }
 
+/* 璁㈠崟淇℃伅鑷畾涔夊竷灞�鏍峰紡 */
+.order-info-section {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.order-info-section .section-header {
+  background: #f3f6fb;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.order-info-section .section-icon {
+  margin-right: 6px;
+  color: #409eff;
+}
+
+.order-info-grid {
+  display: grid;
+  grid-template-columns: 15% 30% 15% 40%;
+  width: 100%;
+}
+
+.order-info-item {
+  display: contents;
+}
+
+.order-info-item .order-label {
+  padding: 12px 16px;
+  background: #fafafa;
+  border: 1px solid #e4e7ed;
+  font-size: 14px;
+  color: #606266;
+  display: flex;
+  align-items: center;
+}
+
+.order-info-item .order-content {
+  padding: 12px 16px;
+  border: 1px solid #e4e7ed;
+  font-size: 14px;
+  color: #303133;
+  display: flex;
+  align-items: center;
+}
+
+/* 鐢宠浜轰俊鎭嚜瀹氫箟甯冨眬鏍峰紡 */
+.applicant-info-section {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-top: 15px;
+  overflow: hidden;
+}
+
+.applicant-info-section .section-header {
+  background: #f3f6fb;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.applicant-info-section .section-icon {
+  margin-right: 6px;
+  color: #409eff;
+}
+
+.applicant-info-grid {
+  display: grid;
+  grid-template-columns: 15% 30% 15% 40%;
+  width: 100%;
+}
+
+.applicant-info-item {
+  display: contents;
+}
+
+.applicant-info-item .applicant-label {
+  padding: 12px 16px;
+  background: #fafafa;
+  border: 1px solid #e4e7ed;
+  font-size: 14px;
+  color: #606266;
+  display: flex;
+  align-items: center;
+}
+
+.applicant-info-item .applicant-content {
+  padding: 12px 16px;
+  border: 1px solid #e4e7ed;
+  font-size: 14px;
+  color: #303133;
+  display: flex;
+  align-items: center;
+}
+
+/* 浜ゆ槗鍐呭鑷畾涔夊竷灞�鏍峰紡 */
+.transaction-content-section {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-top: 15px;
+  overflow: hidden;
+}
+
+.transaction-content-section .section-header {
+  background: #f3f6fb;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.transaction-content-section .section-icon {
+  margin-right: 6px;
+  color: #409eff;
+}
+
+.transaction-content-grid {
+  display: grid;
+  grid-template-columns: 15% 30% 15% 40%;
+  width: 100%;
+}
+
+.transaction-content-item {
+  display: contents;
+}
+
+.transaction-content-item .transaction-label {
+  padding: 12px 16px;
+  background: #fafafa;
+  border: 1px solid #e4e7ed;
+  font-size: 14px;
+  color: #606266;
+  display: flex;
+  align-items: center;
+}
+
+.transaction-content-item .transaction-content {
+  padding: 12px 16px;
+  border: 1px solid #e4e7ed;
+  font-size: 14px;
+  color: #303133;
+  display: flex;
+  align-items: center;
+}
+
+
 .desc-wrap {
   white-space: pre-wrap;
   line-height: 22px;

--
Gitblit v1.8.0