完善结果总览模型区卡片展示与联动修复

ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue

@@ -374,7 +374,7 @@ export default {
 
 .model-card-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 16px;
 }
 
@@ -506,4 +506,16 @@ export default {
   justify-content: flex-end;
   margin-top: 16px;
 }
+
+@media (max-width: 1200px) {
+  .model-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .model-card-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

ruoyi-ui/tests/unit/preliminary-check-model-card-grid.test.js

@@ -0,0 +1,32 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/RiskModelSection.vue"
+  ),
+  "utf8"
+);
+
+assert(
+  source.includes("grid-template-columns: repeat(5, minmax(0, 1fr));"),
+  "桌面端模型卡片应固定为每行 5 张"
+);
+assert(
+  source.includes("@media (max-width: 1200px)"),
+  "应存在平板断点"
+);
+assert(
+  source.includes("grid-template-columns: repeat(2, minmax(0, 1fr));"),
+  "平板端模型卡片应降为 2 列"
+);
+assert(
+  source.includes("@media (max-width: 768px)"),
+  "应存在手机断点"
+);
+assert(
+  source.includes("grid-template-columns: 1fr;"),
+  "手机端模型卡片应降为 1 列"
+);