f

src/ui/DWBG9FB2/components/SuggestionSection.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="hy-card">
+    <div class="hy-card-title hy-card-title--lg">综合建议</div>
+    <div class="intro">基于当前风险评估结果，建议：</div>
+    <div class="suggestion-grid">
+      <div
+        v-for="(item, i) in suggestions"
+        :key="i"
+        class="suggestion-item"
+        :class="item.tone"
+      >
+        <div class="suggestion-header">
+          <div class="suggestion-icon">{{ item.icon }}</div>
+          <div class="suggestion-title">{{ item.title }}</div>
+        </div>
+        <div class="suggestion-desc">{{ item.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { buildSuggestions } from '../reportHelper';
+
+const props = defineProps({
+  riskLevel: { type: String, default: 'F' },
+});
+
+const suggestions = computed(() => buildSuggestions(props.riskLevel));
+</script>
+
+<style lang="scss" scoped>
+.intro {
+  font-size: 14px;
+  color: #4a5568;
+  margin-bottom: 16px;
+}
+
+.suggestion-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.suggestion-item {
+  border-radius: 8px;
+  padding: 16px;
+
+  &.red { background-color: #fff5f5; }
+  &.orange { background-color: #fffaf0; }
+  &.blue { background-color: #ebf8ff; }
+  &.green { background-color: #f0fff4; }
+}
+
+.suggestion-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.suggestion-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.suggestion-item.red .suggestion-icon { background-color: #fed7d7; color: #c53030; }
+.suggestion-item.orange .suggestion-icon { background-color: #feebc8; color: #dd6b20; }
+.suggestion-item.blue .suggestion-icon { background-color: #bee3f8; color: #2b6cb0; }
+.suggestion-item.green .suggestion-icon { background-color: #c6f6d5; color: #276749; }
+
+.suggestion-title { font-weight: 600; }
+.suggestion-item.red .suggestion-title { color: #c53030; }
+.suggestion-item.orange .suggestion-title { color: #dd6b20; }
+.suggestion-item.blue .suggestion-title { color: #2b6cb0; }
+.suggestion-item.green .suggestion-title { color: #276749; }
+
+.suggestion-desc {
+  font-size: 13px;
+  color: #4a5568;
+  margin-left: 40px;
+}
+
+@media (max-width: 900px) {
+  .suggestion-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .suggestion-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>