保养查询调整

locale/en.json

@@ -162,6 +162,15 @@
 	"maintenanceSearch.generatedNotExecuted": "Generated, not executed",
 	"maintenanceSearch.notGenerated": "Not generated",
 	"maintenanceSearch.detailTitle": "Maintenance item details",
+	"maintenanceSearch.maintenanceDuration": "Maintenance duration",
+	"maintenanceSearch.maintenanceMileage": "Maintenance mileage",
+	"maintenanceSearch.maintenanceDate": "Maintenance date",
+	"maintenanceSearch.lastMaintenanceOperationTime": "Last maintenance runtime",
+	"maintenanceSearch.runTimeCycle": "Runtime cycle",
+	"maintenanceSearch.lastMaintenanceMileage": "Last maintenance mileage",
+	"maintenanceSearch.mileageCycle": "Mileage cycle",
+	"maintenanceSearch.lastMaintenanceNaturalDate": "Last natural date",
+	"maintenanceSearch.naturalDateCycle": "Natural day cycle",
 	"maintenanceSearch.nextMaintTime": "Time to next maintenance",
 	"maintenanceSearch.nextMaintKil": "Mileage to next maintenance",
 	"maintenanceSearch.nextMaintDate": "Next maintenance date",

locale/ja.json

@@ -162,6 +162,15 @@
 	"maintenanceSearch.generatedNotExecuted": "生成済み未実行",
 	"maintenanceSearch.notGenerated": "未生成",
 	"maintenanceSearch.detailTitle": "保養項目詳細",
+	"maintenanceSearch.maintenanceDuration": "保養時間",
+	"maintenanceSearch.maintenanceMileage": "保養距離",
+	"maintenanceSearch.maintenanceDate": "保養日付",
+	"maintenanceSearch.lastMaintenanceOperationTime": "前回保養運行時間",
+	"maintenanceSearch.runTimeCycle": "運行時間周期",
+	"maintenanceSearch.lastMaintenanceMileage": "前回保養距離",
+	"maintenanceSearch.mileageCycle": "運行距離周期",
+	"maintenanceSearch.lastMaintenanceNaturalDate": "前回保養自然日",
+	"maintenanceSearch.naturalDateCycle": "自然日周期",
 	"maintenanceSearch.nextMaintTime": "次回保養までの時間",
 	"maintenanceSearch.nextMaintKil": "次回保養までの距離",
 	"maintenanceSearch.nextMaintDate": "次回保養日",

locale/ru.json

@@ -162,6 +162,15 @@
 	"maintenanceSearch.generatedNotExecuted": "Создано, не выполнено",
 	"maintenanceSearch.notGenerated": "Не создано",
 	"maintenanceSearch.detailTitle": "Детали обслуживания",
+	"maintenanceSearch.maintenanceDuration": "Длительность обслуживания",
+	"maintenanceSearch.maintenanceMileage": "Пробег обслуживания",
+	"maintenanceSearch.maintenanceDate": "Дата обслуживания",
+	"maintenanceSearch.lastMaintenanceOperationTime": "Последнее время работы",
+	"maintenanceSearch.runTimeCycle": "Цикл времени работы",
+	"maintenanceSearch.lastMaintenanceMileage": "Последний пробег",
+	"maintenanceSearch.mileageCycle": "Цикл пробега",
+	"maintenanceSearch.lastMaintenanceNaturalDate": "Последняя календарная дата",
+	"maintenanceSearch.naturalDateCycle": "Календарный цикл",
 	"maintenanceSearch.nextMaintTime": "Время до обслуживания",
 	"maintenanceSearch.nextMaintKil": "Пробег до обслуживания",
 	"maintenanceSearch.nextMaintDate": "Дата следующего обслуживания",

locale/zh-Hans.json

@@ -125,11 +125,11 @@
   "home.receiveInspectionWorkOrderAndSubmit": "接收巡检工单并提报",
   "home.faultReporting": "故障上报",
   "home.fillAndReportFaultWorkOrder": "故障工单的填报及上报故障问题",
-  "home.dailyReportRuiDu": "瑞都日报",
-  "home.dailyReportRuiDuTip": "填写日报",
-  "home.ruiDuReport": "瑞都报表",
-  "home.ruiDuReportTip": "查看日报报表",
-  "home.dailyReportRuiHen": "瑞恒日报",
+  "home.dailyReportRuiDu": "瑞都日报",
+  "home.dailyReportRuiDuTip": "填写日报",
+  "home.ruiDuReport": "瑞都报表",
+  "home.ruiDuReportTip": "查看日报报表",
+  "home.dailyReportRuiHen": "瑞恒日报",
   "home.dailyReportRuiHenTip": "填写日报",
   "home.dailyReportRuiHenTaskTip": "分配任务",
   "home.dailyReportRuiHenApproval": "审批日报",
@@ -139,11 +139,11 @@
   "home.dailyReportRuiYingX": "瑞鹰修井日报",
   "home.dailyReportRuiYingXTip": "填写日报",
   "home.dailyReportRuiYingXApproval": "审批日报",
-  "home.inventoryQuery": "库存查询",
-  "home.clickToQueryInventoryData": "点击查询库存数据",
-  "home.maintenanceSearch": "保养查询",
-  "home.maintenanceSearchTip": "查看设备保养距离",
-  "home.equipmentLedger": "设备台账",
+  "home.inventoryQuery": "库存查询",
+  "home.clickToQueryInventoryData": "点击查询库存数据",
+  "home.maintenanceSearch": "保养查询",
+  "home.maintenanceSearchTip": "查看设备保养距离",
+  "home.equipmentLedger": "设备台账",
   "home.viewEquipmentLedger": "查看设备台账",
   "home.equipmentStatusChange": "设备状态变更",
   "home.deviceUser": "设备责任人",
@@ -185,36 +185,45 @@
   "operationRecordFilling.totalDeviceCount": "应填设备数",
   "operationRecordFilling.filledDeviceCount": "已填设备数",
   "operationRecordFilling.unfilledDeviceCount": "未填设备数",
-  "operationRecordFilling.PleaseLoadAllItems": "请加载所有填报项后再提交",
-  // --------------------------------------- 瑞都报表 ----------------------------------------
-  "ruiDuReport.selectTitle": "选择瑞都报表",
-  "ruiDuReport.dailyDetail": "日报详情",
-  "ruiDuReport.dailyTeamStatistic": "日报单井队统计",
-  "ruiDuReport.filterAction": "筛选",
-  "ruiDuReport.filterTitle": "筛选条件",
-  "ruiDuReport.searchKey": "查询条件",
-  "ruiDuReport.searchKeyPlaceholder": "请输入查询条件",
-  "ruiDuReport.dept": "部门",
-  "ruiDuReport.constructionBrief": "施工简报",
-  "ruiDuReport.createTime": "创建时间",
-  // --------------------------------------- 保养查询 ----------------------------------------
-  "maintenanceSearch.title": "保养查询",
-  "maintenanceSearch.deviceCode": "设备编码",
-  "maintenanceSearch.deviceCodePlaceholder": "请输入设备编码",
-  "maintenanceSearch.deviceName": "设备名称",
-  "maintenanceSearch.deviceNamePlaceholder": "请输入设备名称",
-  "maintenanceSearch.deviceStatus": "设备状态",
-  "maintenanceSearch.totalRunTime": "累计运行时长H",
-  "maintenanceSearch.totalMileage": "累计运行里程KM",
-  "maintenanceSearch.multiAttrs": "多属性累计值",
-  "maintenanceSearch.noMaintenancePlan": "无保养计划",
-  "maintenanceSearch.generatedNotExecuted": "已生成未执行",
-  "maintenanceSearch.notGenerated": "未生成",
-  "maintenanceSearch.detailTitle": "保养项详情",
-  "maintenanceSearch.nextMaintTime": "距下次保养时长",
-  "maintenanceSearch.nextMaintKil": "距下次保养里程",
-  "maintenanceSearch.nextMaintDate": "下次保养日期",
-  // --------------------------------------- 状态相关 ----------------------------------------
+  "operationRecordFilling.PleaseLoadAllItems": "请加载所有填报项后再提交",
+  // --------------------------------------- 瑞都报表 ----------------------------------------
+  "ruiDuReport.selectTitle": "选择瑞都报表",
+  "ruiDuReport.dailyDetail": "日报详情",
+  "ruiDuReport.dailyTeamStatistic": "日报单井队统计",
+  "ruiDuReport.filterAction": "筛选",
+  "ruiDuReport.filterTitle": "筛选条件",
+  "ruiDuReport.searchKey": "查询条件",
+  "ruiDuReport.searchKeyPlaceholder": "请输入查询条件",
+  "ruiDuReport.dept": "部门",
+  "ruiDuReport.constructionBrief": "施工简报",
+  "ruiDuReport.createTime": "创建时间",
+  // --------------------------------------- 保养查询 ----------------------------------------
+  "maintenanceSearch.title": "保养查询",
+  "maintenanceSearch.deviceCode": "设备编码",
+  "maintenanceSearch.deviceCodePlaceholder": "请输入设备编码",
+  "maintenanceSearch.deviceName": "设备名称",
+  "maintenanceSearch.deviceNamePlaceholder": "请输入设备名称",
+  "maintenanceSearch.deviceStatus": "设备状态",
+  "maintenanceSearch.totalRunTime": "累计运行时间(H)",
+  "maintenanceSearch.totalMileage": "累计运行公里数(KM)",
+  "maintenanceSearch.multiAttrs": "多属性累计值",
+  "maintenanceSearch.noMaintenancePlan": "无保养计划",
+  "maintenanceSearch.generatedNotExecuted": "已生成未执行",
+  "maintenanceSearch.notGenerated": "未生成",
+  "maintenanceSearch.detailTitle": "保养项详情",
+  "maintenanceSearch.maintenanceDuration": "保养时长",
+  "maintenanceSearch.maintenanceMileage": "保养里程",
+  "maintenanceSearch.maintenanceDate": "保养日期",
+  "maintenanceSearch.lastMaintenanceOperationTime": "上次保养时长(H)",
+  "maintenanceSearch.runTimeCycle": "运行时长周期(H)",
+  "maintenanceSearch.lastMaintenanceMileage": "上次保养里程(KM)",
+  "maintenanceSearch.mileageCycle": "运行里程周期(KM)",
+  "maintenanceSearch.lastMaintenanceNaturalDate": "上次保养日期",
+  "maintenanceSearch.naturalDateCycle": "自然日周期(D)",
+  "maintenanceSearch.nextMaintTime": "距下次保养时长(H)",
+  "maintenanceSearch.nextMaintKil": "距下次保养里程(KM)",
+  "maintenanceSearch.nextMaintDate": "下次保养日期",
+  // --------------------------------------- 状态相关 ----------------------------------------
   "status.enable": "启用",
   "status.disable": "停用",
   "status.unaudited": "未审核",
@@ -438,14 +447,14 @@
   "inspection.pendingInspectionItems": "待填写巡检项",
   "inspection.normalInspectionItems": "正常巡检项",
   "inspection.abnormalInspectionItems": "异常巡检项",
-  // --------------------------------------- 瑞都日报 ----------------------------------------
-  "ruiDu.indexTitle": "日报",
-  "ruihen.taskTitle": "分配任务",
-  "ruihen.taskCreateTitle": "新增任务",
-  "ruihen.taskDetailTitle": "任务详情",
-  "ruihen.taskEditTitle": "编辑任务",
-  "ruiDu.detailTitle": "日报详情",
-  "ruiDu.editTitle": "日报填报",
+  // --------------------------------------- 瑞都日报 ----------------------------------------
+  "ruiDu.indexTitle": "日报",
+  "ruihen.taskTitle": "分配任务",
+  "ruihen.taskCreateTitle": "新增任务",
+  "ruihen.taskDetailTitle": "任务详情",
+  "ruihen.taskEditTitle": "编辑任务",
+  "ruiDu.detailTitle": "日报详情",
+  "ruiDu.editTitle": "日报填报",
   "ruiDu.approvalTitle": "日报填报",
   "ruiDu.createTitle": "新增日报",
   "ruiDu.shiftLeader": "带班干部",

locale/zh-Hant.json

@@ -79,17 +79,17 @@
   "home.receiveMaintenanceWorkOrderAndSubmit": "接收保养工单并提报",
   "home.equipmentMaintenance": "设备维修",
   "home.fillMaintenanceWorkOrder": "填报维修工单",
-  "home.inspectionWorkOrder": "巡检工单",
-  "home.receiveInspectionWorkOrderAndSubmit": "接收巡检工单并提报",
-  "home.faultReporting": "故障上报",
-  "home.fillAndReportFaultWorkOrder": "故障工单的填报及上报故障问题",
-  "home.ruiDuReport": "瑞都报表",
-  "home.ruiDuReportTip": "查看日报报表",
-  "home.inventoryQuery": "库存查询",
-  "home.clickToQueryInventoryData": "点击查询库存数据",
-  "home.maintenanceSearch": "保养查询",
-  "home.maintenanceSearchTip": "查看设备保养距离",
-  "home.equipmentLedger": "设备台账",
+  "home.inspectionWorkOrder": "巡检工单",
+  "home.receiveInspectionWorkOrderAndSubmit": "接收巡检工单并提报",
+  "home.faultReporting": "故障上报",
+  "home.fillAndReportFaultWorkOrder": "故障工单的填报及上报故障问题",
+  "home.ruiDuReport": "瑞都报表",
+  "home.ruiDuReportTip": "查看日报报表",
+  "home.inventoryQuery": "库存查询",
+  "home.clickToQueryInventoryData": "点击查询库存数据",
+  "home.maintenanceSearch": "保养查询",
+  "home.maintenanceSearchTip": "查看设备保养距离",
+  "home.equipmentLedger": "设备台账",
   "home.viewEquipmentLedger": "查看设备台账",
   "home.equipmentStatusChange": "设备状态变更",
   "home.adjustEquipmentStatus": "调整设备状态",
@@ -120,36 +120,45 @@
 
   // ---------------------运行记录--------------------------
   "operationRecordFilling.responsiblePerson": "负责人",
-  "operationRecordFilling.workOrderName": "工单名称",
-  "operationRecordFilling.belongToTeam": "所属队伍",
-  "operationRecordFilling.totalRunningTime": "累计运行时间",
-  "ruiDuReport.selectTitle": "选择瑞都报表",
-  "ruiDuReport.dailyDetail": "日报详情",
-  "ruiDuReport.dailyTeamStatistic": "日报单井队统计",
-  "ruiDuReport.filterAction": "筛选",
-  "ruiDuReport.filterTitle": "筛选条件",
-  "ruiDuReport.searchKey": "查询条件",
-  "ruiDuReport.searchKeyPlaceholder": "请输入查询条件",
-  "ruiDuReport.dept": "部门",
-  "ruiDuReport.constructionBrief": "施工简报",
-  "ruiDuReport.createTime": "创建时间",
-  "maintenanceSearch.title": "保养查询",
-  "maintenanceSearch.deviceCode": "设备编码",
-  "maintenanceSearch.deviceCodePlaceholder": "请输入设备编码",
-  "maintenanceSearch.deviceName": "设备名称",
-  "maintenanceSearch.deviceNamePlaceholder": "请输入设备名称",
-  "maintenanceSearch.deviceStatus": "设备状态",
-  "maintenanceSearch.totalRunTime": "累计运行时长H",
-  "maintenanceSearch.totalMileage": "累计运行里程KM",
-  "maintenanceSearch.multiAttrs": "多属性累计值",
-  "maintenanceSearch.noMaintenancePlan": "无保养计划",
-  "maintenanceSearch.generatedNotExecuted": "已生成未执行",
-  "maintenanceSearch.notGenerated": "未生成",
-  "maintenanceSearch.detailTitle": "保养项详情",
-  "maintenanceSearch.nextMaintTime": "距下次保养时长",
-  "maintenanceSearch.nextMaintKil": "距下次保养里程",
-  "maintenanceSearch.nextMaintDate": "下次保养日期",
-  // ----------------------------------------------------
+  "operationRecordFilling.workOrderName": "工单名称",
+  "operationRecordFilling.belongToTeam": "所属队伍",
+  "operationRecordFilling.totalRunningTime": "累计运行时间",
+  "ruiDuReport.selectTitle": "选择瑞都报表",
+  "ruiDuReport.dailyDetail": "日报详情",
+  "ruiDuReport.dailyTeamStatistic": "日报单井队统计",
+  "ruiDuReport.filterAction": "筛选",
+  "ruiDuReport.filterTitle": "筛选条件",
+  "ruiDuReport.searchKey": "查询条件",
+  "ruiDuReport.searchKeyPlaceholder": "请输入查询条件",
+  "ruiDuReport.dept": "部门",
+  "ruiDuReport.constructionBrief": "施工简报",
+  "ruiDuReport.createTime": "创建时间",
+  "maintenanceSearch.title": "保养查询",
+  "maintenanceSearch.deviceCode": "设备编码",
+  "maintenanceSearch.deviceCodePlaceholder": "请输入设备编码",
+  "maintenanceSearch.deviceName": "设备名称",
+  "maintenanceSearch.deviceNamePlaceholder": "请输入设备名称",
+  "maintenanceSearch.deviceStatus": "设备状态",
+  "maintenanceSearch.totalRunTime": "累计运行时间(H)",
+  "maintenanceSearch.totalMileage": "累计运行公里数(KM)",
+  "maintenanceSearch.multiAttrs": "多属性累计值",
+  "maintenanceSearch.noMaintenancePlan": "无保养计划",
+  "maintenanceSearch.generatedNotExecuted": "已生成未执行",
+  "maintenanceSearch.notGenerated": "未生成",
+  "maintenanceSearch.detailTitle": "保养项详情",
+  "maintenanceSearch.maintenanceDuration": "保养时长(H)",
+  "maintenanceSearch.maintenanceMileage": "保养里程(KM)",
+  "maintenanceSearch.maintenanceDate": "保养日期(D)",
+  "maintenanceSearch.lastMaintenanceOperationTime": "上次保养运行时长(H)",
+  "maintenanceSearch.runTimeCycle": "运行时长周期(H)",
+  "maintenanceSearch.lastMaintenanceMileage": "上次保养里程(KM)",
+  "maintenanceSearch.mileageCycle": "运行里程周期(KM)",
+  "maintenanceSearch.lastMaintenanceNaturalDate": "上次保养自然日期(D)",
+  "maintenanceSearch.naturalDateCycle": "自然日周期(D)",
+  "maintenanceSearch.nextMaintTime": "距下次保养时长(H)",
+  "maintenanceSearch.nextMaintKil": "距下次保养里程(KM)",
+  "maintenanceSearch.nextMaintDate": "下次保养日期(D)",
+  // ----------------------------------------------------
   "workOrder.addDevice": "新增设备",
   "workOrder.addMaterial": "新增物料",
   "workOrder.selectMaterial": "选择物料",

pages/maintenance/search.vue

@@ -188,39 +188,109 @@
             :key="detail.id">
             <view class="detail-name">{{ detail.name || "--" }}</view>
             <view class="detail-grid">
-              <view class="detail-item">
+              <view
+                v-if="detail.runningTimeRule === 0"
+                class="detail-item">
                 <text class="detail-label">{{
                   $t("maintenanceSearch.totalRunTime")
                 }}</text>
                 <text>{{ detail.totalRunTime ?? detail.tempTotalRunTime ?? "--" }}</text>
               </view>
-              <view class="detail-item">
+              <view
+                v-if="detail.mileageRule === 0"
+                class="detail-item">
                 <text class="detail-label">{{
                   $t("maintenanceSearch.totalMileage")
                 }}</text>
                 <text>{{ detail.totalMileage ?? detail.tempTotalMileage ?? "--" }}</text>
               </view>
-              <view v-if="detail.runningTimeRule === 0" class="detail-item">
-                <text class="detail-label">{{
-                  $t("maintenanceSearch.nextMaintTime")
-                }}</text>
-                <text :class="{ danger: isNegative(calculateTimePeriod(detail)) }">
-                  {{ calculateTimePeriod(detail) }}
-                </text>
+            </view>
+
+            <view
+              v-if="showTimeColumns && detail.runningTimeRule === 0"
+              class="detail-section">
+              <view class="detail-section-title">
+                {{ $t("maintenanceSearch.maintenanceDuration") }}
               </view>
-              <view v-if="detail.mileageRule === 0" class="detail-item">
-                <text class="detail-label">{{
-                  $t("maintenanceSearch.nextMaintKil")
-                }}</text>
-                <text :class="{ danger: isNegative(calculateKiloPeriod(detail)) }">
-                  {{ calculateKiloPeriod(detail) }}
-                </text>
+              <view class="detail-section-grid">
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.lastMaintenanceOperationTime")
+                  }}</text>
+                  <text>{{ detail.lastRunningTime ?? "--" }}</text>
+                </view>
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.runTimeCycle")
+                  }}</text>
+                  <text>{{ detail.nextRunningTime ?? "--" }}</text>
+                </view>
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.nextMaintTime")
+                  }}</text>
+                  <text :class="{ danger: isNegative(calculateTimePeriod(detail)) }">
+                    {{ calculateTimePeriod(detail) }}
+                  </text>
+                </view>
               </view>
-              <view v-if="detail.naturalDateRule === 0" class="detail-item">
-                <text class="detail-label">{{
-                  $t("maintenanceSearch.nextMaintDate")
-                }}</text>
-                <text>{{ calculateNextNaturalDate(detail) }}</text>
+            </view>
+
+            <view
+              v-if="showMileageColumns && detail.mileageRule === 0"
+              class="detail-section">
+              <view class="detail-section-title">
+                {{ $t("maintenanceSearch.maintenanceMileage") }}
+              </view>
+              <view class="detail-section-grid">
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.lastMaintenanceMileage")
+                  }}</text>
+                  <text>{{ detail.lastRunningKilometers ?? "--" }}</text>
+                </view>
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.mileageCycle")
+                  }}</text>
+                  <text>{{ detail.nextRunningKilometers ?? "--" }}</text>
+                </view>
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.nextMaintKil")
+                  }}</text>
+                  <text :class="{ danger: isNegative(calculateKiloPeriod(detail)) }">
+                    {{ calculateKiloPeriod(detail) }}
+                  </text>
+                </view>
+              </view>
+            </view>
+
+            <view
+              v-if="showNaturalDateColumns && detail.naturalDateRule === 0"
+              class="detail-section">
+              <view class="detail-section-title">
+                {{ $t("maintenanceSearch.maintenanceDate") }}
+              </view>
+              <view class="detail-section-grid">
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.lastMaintenanceNaturalDate")
+                  }}</text>
+                  <text>{{ formatDateValue(detail.lastNaturalDate) }}</text>
+                </view>
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.naturalDateCycle")
+                  }}</text>
+                  <text>{{ detail.nextNaturalDate ?? "--" }}</text>
+                </view>
+                <view class="detail-item">
+                  <text class="detail-label">{{
+                    $t("maintenanceSearch.nextMaintDate")
+                  }}</text>
+                  <text>{{ calculateNextNaturalDate(detail) }}</text>
+                </view>
               </view>
             </view>
           </view>
@@ -293,6 +363,18 @@ const selectedDeptName = computed(() => {
   return current?.text || "";
 });
 
+const showTimeColumns = computed(() => {
+  return detailList.value.some((item) => item.runningTimeRule === 0);
+});
+
+const showMileageColumns = computed(() => {
+  return detailList.value.some((item) => item.mileageRule === 0);
+});
+
+const showNaturalDateColumns = computed(() => {
+  return detailList.value.some((item) => item.naturalDateRule === 0);
+});
+
 const handleTree = (
   data,
   id = "id",
@@ -526,6 +608,10 @@ const calculateNextNaturalDate = (item) => {
     .format("YYYY-MM-DD");
 };
 
+const formatDateValue = (value) => {
+  return value ? dayjs(value).format("YYYY-MM-DD") : "--";
+};
+
 const isNegative = (value) => {
   if (value === null || value === undefined || value === "") return false;
   const num = Number(value);
@@ -827,6 +913,26 @@ onMounted(() => {
   gap: 8px 10px;
 }
 
+.detail-section {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #edf1f7;
+}
+
+.detail-section-title {
+  margin-bottom: 8px;
+  color: #004098;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.detail-section-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px 10px;
+}
+
 .detail-item {
   min-width: 0;
   color: #233044;
@@ -840,6 +946,12 @@ onMounted(() => {
   font-size: 12px;
 }
 
+@media screen and (max-width: 360px) {
+  .detail-section-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 .danger {
   color: #f56c6c;
 }