From 6697f708b99c9b63e00a7e490f91d1cb4fa64450 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期二, 28 四月 2026 16:33:45 +0800
Subject: [PATCH] Merge branch 'dev_NEW_pro' of http://114.132.189.42:9002/r/product-inventory-management into dev_NEW_pro

---
 src/views/productionManagement/productionOrder/index.vue |  683 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 641 insertions(+), 42 deletions(-)

diff --git a/src/views/productionManagement/productionOrder/index.vue b/src/views/productionManagement/productionOrder/index.vue
index df7f950..5f4fa61 100644
--- a/src/views/productionManagement/productionOrder/index.vue
+++ b/src/views/productionManagement/productionOrder/index.vue
@@ -3,44 +3,57 @@
     <div class="search_form">
       <el-form :model="searchForm"
                :inline="true">
-        <el-form-item label="瀹㈡埛鍚嶇О:">
-          <el-input v-model="searchForm.customerName"
+        <el-form-item label="鐢熶骇璁㈠崟鍙�:">
+          <el-input v-model="searchForm.npsNo"
                     placeholder="璇疯緭鍏�"
                     clearable
                     prefix-icon="Search"
-                    style="width: 200px;"
-                    @change="handleQuery" />
-        </el-form-item>
-        <el-form-item label="鍚堝悓鍙�:">
-          <el-input v-model="searchForm.salesContractNo"
-                    placeholder="璇疯緭鍏�"
-                    clearable
-                    prefix-icon="Search"
-                    style="width: 200px;"
+                    style="width: 160px;"
                     @change="handleQuery" />
         </el-form-item>
         <el-form-item label="浜у搧鍚嶇О:">
-          <el-input v-model="searchForm.productCategory"
+          <el-input v-model="searchForm.productName"
                     placeholder="璇疯緭鍏�"
                     clearable
                     prefix-icon="Search"
-                    style="width: 200px;"
+                    style="width: 160px;"
                     @change="handleQuery" />
         </el-form-item>
         <el-form-item label="瑙勬牸:">
-          <el-input v-model="searchForm.specificationModel"
+          <el-input v-model="searchForm.model"
                     placeholder="璇疯緭鍏�"
                     clearable
                     prefix-icon="Search"
-                    style="width: 200px;"
+                    style="width: 160px;"
                     @change="handleQuery" />
+        </el-form-item>
+        <el-form-item label="鐘舵��:">
+          <el-select v-model="searchForm.status"
+                     placeholder="璇烽�夋嫨"
+                     style="width: 160px;"
+                     @change="handleQuery">
+            <el-option label="寰呭紑濮�"
+                       value="1" />
+            <el-option label="杩涜涓�"
+                       value="2" />
+            <el-option label="宸插畬鎴�"
+                       value="3" />
+            <el-option label="宸插彇娑�"
+                       value="4" />
+          </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary"
                      @click="handleQuery">鎼滅储</el-button>
+          <el-button type="info"
+                     @click="handleReset">閲嶇疆</el-button>
         </el-form-item>
       </el-form>
-      <div>
+      <div class="action-buttons">
+        <!-- <el-button type="primary"
+                   @click="isShowNewModal = true">鏂板</el-button> -->
+        <el-button type="danger"
+                   @click="handleDelete">閫�鍥�</el-button>
         <el-button @click="handleOut">瀵煎嚭</el-button>
       </div>
     </div>
@@ -50,56 +63,306 @@
                 :tableData="tableData"
                 :page="page"
                 :tableLoading="tableLoading"
-                @pagination="pagination"></PIMTable>
+                :row-class-name="tableRowClassName"
+                :isSelection="true"
+                @selection-change="handleSelectionChange"
+                @pagination="pagination">
+        <template #completionStatus="{ row }">
+          <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
+                       :color="progressColor(toProgressPercentage(row?.completionStatus))"
+                       :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
+        </template>
+      </PIMTable>
     </div>
-    <process-route-item-form v-if="isShowItemModal"
-                             v-model:visible="isShowItemModal"
-                             :record="record"
-                             @completed="getList" />
+    <el-dialog v-model="bindRouteDialogVisible"
+               title="缁戝畾宸ヨ壓璺嚎"
+               width="500px">
+      <el-form label-width="90px">
+        <el-form-item label="宸ヨ壓璺嚎">
+          <el-select v-model="bindForm.routeId"
+                     placeholder="璇烽�夋嫨宸ヨ壓璺嚎"
+                     style="width: 100%;"
+                     :loading="bindRouteLoading">
+            <el-option v-for="item in routeOptions"
+                       :key="item.id"
+                       :label="`${item.processRouteCode || ''}`"
+                       :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary"
+                     :loading="bindRouteSaving"
+                     @click="handleBindRouteConfirm">纭� 璁�</el-button>
+          <el-button @click="bindRouteDialogVisible = false">鍙� 娑�</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 鏉ユ簮鏁版嵁寮圭獥 -->
+    <el-dialog v-model="sourceDataDialogVisible"
+               title="鏉ユ簮鏁版嵁"
+               width="1200px">
+      <div v-if="sourceRowData"
+           class="applyno-summary1">
+        <div class="summary-item">
+          <span class="summary-label">浜у搧鍚嶇О锛�</span>
+          <span class="summary-value">
+            <el-tag type="primary">{{ sourceRowData.productName || '-' }}</el-tag>
+          </span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">瑙勬牸锛�</span>
+          <span class="summary-value">{{ sourceRowData.model || '-' }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">璁㈠崟闇�姹傛暟閲忥細</span>
+          <span class="summary-value">{{ sourceRowData.quantity || 0 }}</span>
+        </div>
+      </div>
+      <div class="source-table-container">
+        <div class="source-data-cards-container">
+          <div v-for="(item, index) in sourceTableData"
+               :key="index"
+               class="source-data-card">
+            <div class="card-body">
+              <div class="info-grid">
+                <div class="info-item">
+                  <div class="info-label">璁″垝鍙�</div>
+                  <div class="info-value">{{ item.mpsNo || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">鏁版嵁鏉ユ簮</div>
+                  <div class="info-value">
+                    <el-tag :type="item.source === '閿�鍞�' ? 'primary' : 'warning'">
+                      {{ item.source || '鏈煡' }}
+                    </el-tag>
+                  </div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">鍚堝悓鍙�</div>
+                  <div class="info-value">{{ item.salesContractNo || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">瀹㈡埛鍚嶇О</div>
+                  <div class="info-value">{{ item.customerName || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">椤圭洰鍚嶇О</div>
+                  <div class="info-value">{{ item.projectName || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">璁″垝闇�姹傛暟閲�</div>
+                  <div class="info-value">{{ item.qtyRequired || 0 }} {{ item.unit || '' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">鍗曚綅</div>
+                  <div class="info-value">{{ item.unit || '-' }}</div>
+                </div>
+                <div class="info-item">
+                  <div class="info-label">闇�姹傛棩鏈�</div>
+                  <div class="info-value">{{ item.requiredDate ? dayjs(item.requiredDate).format('YYYY-MM-DD') : '-' }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <MaterialLedgerDialog v-model="materialDialogVisible"
+                          :order-row="currentMaterialOrder"
+                          @saved="getList" />
+    <MaterialDetailDialog v-model="materialDetailDialogVisible"
+                          :order-row="currentMaterialDetailOrder"
+                          @confirmed="getList" />
+    <MaterialSupplementDialog v-model="materialSupplementDialogVisible"
+                              :order-row="currentMaterialSupplementOrder"
+                              @saved="getList" />
+    <new-product-order v-if="isShowNewModal"
+                       v-model:visible="isShowNewModal"
+                       @completed="handleQuery" />
   </div>
 </template>
 
 <script setup>
-  import { onMounted, ref } from "vue";
+  import {
+    computed,
+    defineAsyncComponent,
+    getCurrentInstance,
+    onMounted,
+    reactive,
+    ref,
+    toRefs,
+  } from "vue";
   import { ElMessageBox } from "element-plus";
   import dayjs from "dayjs";
-  import { productOrderListPage } from "@/api/productionManagement/productionOrder.js";
+  import { useRouter } from "vue-router";
+  import {
+    productOrderListPage,
+    listProcessRoute,
+    bindingRoute,
+    listProcessBom,
+    delProductOrder,
+    getProductOrderSource,
+  } from "@/api/productionManagement/productionOrder.js";
+  import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js";
+  import MaterialLedgerDialog from "@/views/productionManagement/productionOrder/components/MaterialLedgerDialog.vue";
+  import MaterialDetailDialog from "@/views/productionManagement/productionOrder/components/MaterialDetailDialog.vue";
+  import MaterialSupplementDialog from "@/views/productionManagement/productionOrder/components/MaterialSupplementDialog.vue";
+  import PIMTable from "@/components/PIMTable/PIMTable.vue";
+  import { listPage } from "@/api/productionManagement/processRoute.js";
+  const NewProductOrder = defineAsyncComponent(() =>
+    import("@/views/productionManagement/productionOrder/New.vue")
+  );
+
   const { proxy } = getCurrentInstance();
-  import ProcessRouteItemForm from "@/views/productionManagement/productionOrder/ProcessRouteItemForm.vue";
+
+  const router = useRouter();
+  const isShowNewModal = ref(false);
+  const sourceDataDialogVisible = ref(false);
+  const sourceTableData = ref([]);
+  const sourceRowData = ref(null);
+  const sourcePage = reactive({
+    total: 0,
+  });
 
   const tableColumn = ref([
     {
       label: "鐢熶骇璁㈠崟鍙�",
       prop: "npsNo",
+      width: "150px",
     },
+    // 1.寰呭紑濮嬨��2.杩涜涓��3.宸插畬鎴愩��4.宸插彇娑�
     {
-      label: "閿�鍞悎鍚屽彿",
-      prop: "salesContractNo",
-    },
-    {
-      label: "瀹㈡埛鍚嶇О",
-      prop: "customerName",
+      label: "鐘舵��",
+      prop: "status",
+      width: "150px",
+      dataType: "tag",
+      formatData: val =>
+        val === 1
+          ? "寰呭紑濮�"
+          : val === 2
+          ? "杩涜涓�"
+          : val === 3
+          ? "宸插畬鎴�"
+          : "宸插彇娑�",
+      formatType: val =>
+        val === 1
+          ? "primary"
+          : val === 2
+          ? "warning"
+          : val === 3
+          ? "success"
+          : "danger",
     },
     {
       label: "浜у搧鍚嶇О",
-      prop: "productCategory",
+      prop: "productName",
+      width: "120px",
     },
     {
       label: "瑙勬牸",
-      prop: "specificationModel",
+      prop: "model",
+      width: "120px",
+    },
+    {
+      label: "宸ヨ壓璺嚎缂栧彿",
+      prop: "processRouteCode",
+      width: "200px",
+    },
+    {
+      label: "闇�姹傛暟閲�",
+      prop: "quantity",
+    },
+    {
+      label: "瀹屾垚鏁伴噺",
+      prop: "completeQuantity",
+    },
+    {
+      dataType: "slot",
+      label: "瀹屾垚杩涘害",
+      prop: "completionStatus",
+      slot: "completionStatus",
+      width: 180,
+    },
+    {
+      label: "寮�濮嬫棩鏈�",
+      prop: "startTime",
+      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+      width: 120,
+    },
+    {
+      label: "缁撴潫鏃ユ湡",
+      prop: "endTime",
+      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+      width: 120,
+    },
+    {
+      label: "璁″垝瀹屾垚鏃堕棿",
+      prop: "planCompleteTime",
+      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+      width: 120,
     },
     {
       dataType: "action",
       label: "鎿嶄綔",
       align: "center",
       fixed: "right",
-      width: 200,
+      width: 260,
       operation: [
         {
           name: "宸ヨ壓璺嚎",
           type: "text",
+          showHide: row => row.processRouteCode,
           clickFun: row => {
             showRouteItemModal(row);
+          },
+        },
+        {
+          name: "缁戝畾宸ヨ壓璺嚎",
+          type: "text",
+          showHide: row => !row.processRouteCode,
+          clickFun: row => {
+            openBindRouteDialog(row, "add");
+          },
+        },
+        {
+          name: "鏇存崲宸ヨ壓璺嚎",
+          type: "text",
+          showHide: row => row.processRouteCode,
+          clickFun: row => {
+            openBindRouteDialog(row, "change");
+          },
+        },
+        {
+          name: "鏉ユ簮",
+          type: "text",
+          clickFun: row => {
+            showSourceData(row);
+          },
+        },
+        {
+          name: "棰嗘枡",
+          type: "text",
+          color: "#5EC7AB",
+          clickFun: row => {
+            openMaterialDialog(row);
+          },
+        },
+        {
+          name: "琛ユ枡",
+          type: "text",
+          color: "#5EC7AB",
+          clickFun: row => {
+            openMaterialSupplementDialog(row);
+          },
+        },
+        {
+          name: "棰嗘枡璇︽儏",
+          type: "text",
+          color: "#5EC7AB",
+          clickFun: row => {
+            openMaterialDetailDialog(row);
           },
         },
       ],
@@ -112,17 +375,143 @@
     size: 100,
     total: 0,
   });
+  const selectedRows = ref([]);
 
   const data = reactive({
     searchForm: {
+      npsNo: "",
       customerName: "",
       salesContractNo: "",
       projectName: "",
-      productCategory: "",
-      specificationModel: "",
+      productName: "",
+      model: "",
+      status: "",
     },
   });
   const { searchForm } = toRefs(data);
+
+  const toProgressPercentage = val => {
+    const n = Number(val);
+    if (!Number.isFinite(n)) return 0;
+    if (n <= 0) return 0;
+    if (n >= 100) return 100;
+    return Math.round(n);
+  };
+
+  // 30/50/80/100 鍒嗘棰滆壊锛氱孩/姗�/钃�/缁�
+  const progressColor = percentage => {
+    const p = toProgressPercentage(percentage);
+    if (p < 30) return "#f56c6c";
+    if (p < 50) return "#e6a23c";
+    if (p < 80) return "#409eff";
+    return "#67c23a";
+  };
+
+  // 娣诲姞琛ㄨ绫诲悕鏂规硶
+  const tableRowClassName = ({ row }) => {
+    if (!row.planCompleteTime) return "";
+    if (row.isFh) return "";
+
+    const diff = row.deliveryDaysDiff;
+    if (diff === 15) {
+      return "yellow";
+    } else if (diff === 10) {
+      return "pink";
+    } else if (diff === 2) {
+      return "purple";
+    } else if (diff < 2) {
+      return "red";
+    }
+  };
+
+  // 缁戝畾宸ヨ壓璺嚎寮规
+  const bindRouteDialogVisible = ref(false);
+  const bindRouteLoading = ref(false);
+  const bindRouteSaving = ref(false);
+  const routeOptions = ref([]);
+  const bindForm = reactive({
+    orderId: null,
+    routeId: null,
+  });
+  const materialDialogVisible = ref(false);
+  const currentMaterialOrder = ref(null);
+  const materialDetailDialogVisible = ref(false);
+  const currentMaterialDetailOrder = ref(null);
+  const materialSupplementDialogVisible = ref(false);
+  const currentMaterialSupplementOrder = ref(null);
+
+  const openBindRouteDialog = async (row, type) => {
+    bindForm.orderId = row.id;
+    bindForm.routeId = type === "add" ? null : row.processRouteCode;
+    bindRouteDialogVisible.value = true;
+    routeOptions.value = [];
+    if (!row.productModelId) {
+      proxy.$modal.msgWarning("褰撳墠璁㈠崟缂哄皯浜у搧鍨嬪彿锛屾棤娉曟煡璇㈠伐鑹鸿矾绾�");
+      bindRouteDialogVisible.value = false;
+      return;
+    }
+    bindRouteLoading.value = true;
+    try {
+      const res = await listPage({ productModelId: row.productModelId });
+      routeOptions.value = res.data.records || [];
+    } catch (e) {
+      console.error("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触锛�", e);
+      proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触");
+    } finally {
+      bindRouteLoading.value = false;
+    }
+  };
+
+  const handleBindRouteConfirm = async () => {
+    if (!bindForm.routeId) {
+      proxy.$modal.msgWarning("璇烽�夋嫨宸ヨ壓璺嚎");
+      return;
+    }
+    bindRouteSaving.value = true;
+    try {
+      await bindingRoute({
+        id: bindForm.orderId,
+        technologyRoutingId: bindForm.routeId,
+      });
+      proxy.$modal.msgSuccess("缁戝畾鎴愬姛");
+      bindRouteDialogVisible.value = false;
+      getList();
+    } catch (e) {
+      console.error("缁戝畾宸ヨ壓璺嚎澶辫触锛�", e);
+      proxy.$modal.msgError("缁戝畾宸ヨ壓璺嚎澶辫触");
+    } finally {
+      bindRouteSaving.value = false;
+    }
+  };
+
+  const openMaterialDialog = row => {
+    currentMaterialOrder.value = row;
+    materialDialogVisible.value = true;
+  };
+
+  const openMaterialDetailDialog = async row => {
+    currentMaterialDetailOrder.value = row;
+    materialDetailDialogVisible.value = true;
+  };
+
+  const openMaterialSupplementDialog = row => {
+    currentMaterialSupplementOrder.value = row;
+    materialSupplementDialogVisible.value = true;
+  };
+
+  const handleReset = () => {
+    searchForm.value = {
+      ...searchForm.value,
+      npsNo: "",
+      customerName: "",
+      salesContractNo: "",
+      projectName: "",
+      productName: "",
+      model: "",
+      status: "",
+    };
+    handleQuery();
+  };
 
   // 鏌ヨ鍒楄〃
   /** 鎼滅储鎸夐挳鎿嶄綔 */
@@ -161,11 +550,101 @@
       });
   };
 
-  const isShowItemModal = ref(false);
-  const record = ref({});
-  const showRouteItemModal = row => {
-    isShowItemModal.value = true;
-    record.value = row;
+  const showRouteItemModal = async row => {
+    const orderId = row.id;
+    try {
+      const res = await getOrderProcessRouteMain(orderId);
+      const data = res.data || {};
+      if (!data || !data.id) {
+        proxy.$modal.msgWarning("鏈壘鍒板叧鑱旂殑宸ヨ壓璺嚎");
+        return;
+      }
+      router.push({
+        path: "/productionManagement/processRouteItem",
+        query: {
+          id: data.id,
+          bomId: data.orderBomId,
+          processRouteCode: data.processRouteCode || "",
+          productName: row.productName || "",
+          model: row.model || "",
+          bomNo: row.bomNo || "",
+          description: data.description || "",
+          quantity: row.quantity || 0,
+          orderId,
+          type: "order",
+        },
+      });
+    } catch (e) {
+      console.error("鑾峰彇宸ヨ壓璺嚎涓讳俊鎭け璐ワ細", e);
+      proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎淇℃伅澶辫触");
+    }
+  };
+
+  const showProductStructure = row => {
+    router.push({
+      path: "/productionManagement/productStructureDetail",
+      query: {
+        id: row.id,
+        bomNo: row.bomNo || "",
+        productName: row.productName || "",
+        productModelName: row.model || "",
+        orderId: row.id,
+        type: "order",
+      },
+    });
+  };
+
+  // 鏌ョ湅鏉ユ簮鐢熶骇璁″垝鏁版嵁
+  const showSourceData = row => {
+    // 瀛樺偍鐐瑰嚮鏉ユ簮鎸夐挳鏃朵紶閫掔殑row鍙傛暟
+    sourceRowData.value = row;
+    // 璋冪敤API鑾峰彇鏉ユ簮鏁版嵁
+    getProductOrderSource(row.id)
+      .then(res => {
+        if (res.code === 200) {
+          // 鐩存帴瀛樺偍杩斿洖鐨勬墎骞冲寲鏁版嵁
+          sourceTableData.value = res.data || [];
+          sourcePage.total = sourceTableData.value.length;
+          // 鎵撳紑寮圭獥
+          sourceDataDialogVisible.value = true;
+        } else {
+          proxy.$modal.msgError(res.msg || "鑾峰彇鏉ユ簮鏁版嵁澶辫触");
+        }
+      })
+      .catch(err => {
+        proxy.$modal.msgError("鑾峰彇鏉ユ簮鏁版嵁澶辫触");
+        console.error(err);
+      });
+  };
+
+  // 琛ㄦ牸閫夋嫨鏁版嵁
+  const handleSelectionChange = selection => {
+    selectedRows.value = selection;
+  };
+
+  const handleDelete = () => {
+    let ids = [];
+    if (selectedRows.value.length > 0) {
+      ids = selectedRows.value.map(item => item.id);
+    } else {
+      proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+      return;
+    }
+    ElMessageBox.confirm("鏄惁閫�鍥炶鐢熶骇璁㈠崟锛�", "閫�鍥�", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
+      .then(() => {
+        console.log(ids, "ids");
+        delProductOrder(ids).then(res => {
+          proxy.$modal.msgSuccess("閫�鍥炴垚鍔�");
+          getList();
+        });
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
   };
 
   // 瀵煎嚭
@@ -176,7 +655,11 @@
       type: "warning",
     })
       .then(() => {
-        proxy.download("/salesLedger/scheduling/export", {}, "鐢熶骇璁㈠崟.xlsx");
+        proxy.download(
+          "/productOrder/export",
+          { ...searchForm.value },
+          "鐢熶骇璁㈠崟.xlsx"
+        );
       })
       .catch(() => {
         proxy.$modal.msg("宸插彇娑�");
@@ -190,4 +673,120 @@
   });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .search_form {
+    align-items: start;
+  }
+
+  .action-buttons {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  :deep(.yellow) {
+    background-color: #faf0de;
+  }
+
+  :deep(.pink) {
+    background-color: #fae1de;
+  }
+
+  :deep(.red) {
+    background-color: #f80202;
+  }
+
+  :deep(.purple) {
+    background-color: #f4defa;
+  }
+  .table_list {
+    margin-top: unset;
+  }
+</style>
+<style lang="scss">
+  .status-cell {
+    font-weight: 600;
+    color: #409eff;
+    font-family: "Courier New", monospace;
+    text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
+  }
+
+  .source-table-container {
+    margin-top: 20px;
+  }
+
+  .source-data-cards-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: 500px;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    padding-bottom: 20px;
+
+    .source-data-card {
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+
+      .card-body {
+        padding: 20px;
+
+        .info-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 16px;
+
+          .info-item {
+            display: flex;
+            flex-direction: column;
+
+            .info-label {
+              font-size: 12px;
+              color: #909399;
+              margin-bottom: 4px;
+              font-weight: 500;
+            }
+
+            .info-value {
+              font-size: 14px;
+              color: #303133;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .applyno-summary1 {
+    padding: 16px 20px;
+    background: #f5f7fa;
+    border-bottom: 1px solid #e4e7ed;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .summary-item {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .summary-label {
+        font-size: 13px;
+        color: #909399;
+        margin-right: 8px;
+        font-weight: 500;
+      }
+
+      .summary-value {
+        font-size: 14px;
+        color: #303133;
+        font-weight: 500;
+      }
+    }
+  }
+</style>

--
Gitblit v1.9.3