信息报告点位布局中问题

src/views/left/comp/RiskReport.vue

@@ -151,6 +151,7 @@ function getImgSrc(picName) {
       transition: all 0.3s ease;
       .risk_report_level_count {
         text-align: center;
+        font-family: Roboto;
         > img {
           width: 41px;
           height: 24px;

src/views/left/comp/RiskTwoView.vue

@@ -204,7 +204,7 @@ function getImgSrc(picName) {
         pointer-events: auto !important; // 强制允许接收事件
         position: relative; // 确保元素在布局中可交互
         z-index: 3; // 避免被父元素覆盖
-
+        font-family: Roboto;
         > img {
           width: 41px;
           height: 24px;

src/views/left/comp/dispose/InformationReport.vue

@@ -9,11 +9,11 @@
       <StepsTool :step-list="stepList" :active-index="1">
         <template #title="{ data, index }">
           <div class="title-info1">
-            <div class="title">{{ data.title || '' }}</div>
+            <div class="title">{{ data.title || "" }}</div>
             <div class="right-item">
-              <div class="depart">{{ data.depart1 || '' }}</div>
+              <div class="depart">{{ data.depart1 || "" }}</div>
               <div class="arrow-box"></div>
-              <div class="depart">{{ data.depart2 || '' }}</div>
+              <div class="depart">{{ data.depart2 || "" }}</div>
             </div>
           </div>
         </template>
@@ -21,11 +21,23 @@
         <template #infoReport="{ data, index }">
           <div class="info-box">
             <div class="info-item">
-              <span class="content" :class="{ 'no-expend': !data.expendFlag }" v-html="data.strContent"></span>
+              <span
+                class="content"
+                :class="{ 'no-expend': !data.expendFlag }"
+                v-html="data.strContent"
+              ></span>
             </div>
             <div class="collapse-box">
-              <div class="icon-box" :class="{ 'up-icon': data.expendFlag }" @click="data.expendFlag = !data.expendFlag"></div>
-              <span class="text-box" @click="data.expendFlag = !data.expendFlag">{{ !data.expendFlag ? '展开' : '收起' }}</span>
+              <div
+                class="icon-box"
+                :class="{ 'up-icon': data.expendFlag }"
+                @click="data.expendFlag = !data.expendFlag"
+              ></div>
+              <span
+                class="text-box"
+                @click="data.expendFlag = !data.expendFlag"
+                >{{ !data.expendFlag ? "展开" : "收起" }}</span
+              >
             </div>
           </div>
         </template>
@@ -62,7 +74,7 @@ const stepList = ref([
       经共同研判，目前该起事件达到A级风险标准，为一级突发公共卫生事件。
       市疾控中心同长宁区疾控中心开展现场调查处置和采样检测。   
     `,
-    expendFlag: false
+    expendFlag: false,
   },
   {
     date: "10-07",
@@ -76,7 +88,6 @@ const stepList = ref([
 市疾控中心同长宁区疾控中心开展现场调查处置和采样检测，完成病例追踪、病例转运2，并开展区级专家会诊；标本采集及运送：采样 4，病例实验室检测：检测 4 阳性 3，并完成检测结果上报；实行人员管控：密接 2，场所管控：排查 2 消毒 1。`,
     expendFlag: false,
   },
-  
 ]);
 
 const headerObj = ref({
@@ -94,86 +105,89 @@ const infoList = ref([
 ]);
 
 function getImgSrc(picName) {
-  return new URL(`../../../../assets/img/risk_info_icon-${picName}.png`, import.meta.url).href
+  return new URL(
+    `../../../../assets/img/risk_info_icon-${picName}.png`,
+    import.meta.url
+  ).href;
 }
 
 //4.时间分布 地区分布
 // 初始化时间分布图（蓝色渐变）
 const initTimeChart = () => {
-  if (!timeChart.value) return
-  const chart = echarts.init(timeChart.value)
+  if (!timeChart.value) return;
+  const chart = echarts.init(timeChart.value);
   chart.setOption({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
+    tooltip: { trigger: "axis" },
+    grid: { left: "10%", right: "5%", top: "15%", bottom: "18%" }, // 调整四周距离
     xAxis: {
-      type: 'category',
-      data: ['12/04', '12/05', '12/06', '12/07', '12/08', '12/09', '12/10'],
-      axisLine: { lineStyle: { color: '#4A90E2' } } // X 轴颜色
+      type: "category",
+      data: ["12/04", "12/05", "12/06", "12/07", "12/08", "12/09", "12/10"],
+      axisLine: { lineStyle: { color: "#4A90E2" } }, // X 轴颜色
     },
     yAxis: {
-      type: 'value',
-      axisLine: { lineStyle: { color: '#4A90E2' } }, // Y 轴颜色
-      splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
+      type: "value",
+      axisLine: { lineStyle: { color: "#4A90E2" } }, // Y 轴颜色
+      splitLine: { lineStyle: { type: "dashed", color: "#ccc" } }, // Y 轴背景横线虚线
     },
     series: [
       {
-        type: 'bar',
+        type: "bar",
         data: [3, 6, 2, 9, 5, 8, 10],
         barWidth: 30,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            { offset: 0, color: 'rgba(63, 174, 253, 0)' },
-            { offset: 1, color: '#3FAEFD' }
-          ])
+            { offset: 0, color: "rgba(63, 174, 253, 0)" },
+            { offset: 1, color: "#3FAEFD" },
+          ]),
         },
-        barBackgroundStyle: { color: 'rgba(74, 144, 226, 0.2)' } // 背景透明色
-      }
-    ]
-  })
-}
+        barBackgroundStyle: { color: "rgba(74, 144, 226, 0.2)" }, // 背景透明色
+      },
+    ],
+  });
+};
 
 // 初始化地区分布图（黄色渐变）
 const initAreaChart = () => {
-  if (!areaChart.value) return
-  const chart = echarts.init(areaChart.value)
+  if (!areaChart.value) return;
+  const chart = echarts.init(areaChart.value);
   chart.setOption({
-    tooltip: { trigger: 'axis' },
-    grid: { left: '10%', right: '5%', top: '15%', bottom: '18%' }, // 调整四周距离
+    tooltip: { trigger: "axis" },
+    grid: { left: "10%", right: "5%", top: "15%", bottom: "18%" }, // 调整四周距离
     xAxis: {
-      type: 'category',
-      data: ['长宁区', '闵行区'],
-      axisLine: { lineStyle: { color: '#FBA541' } } // X 轴颜色
+      type: "category",
+      data: ["长宁区", "闵行区"],
+      axisLine: { lineStyle: { color: "#FBA541" } }, // X 轴颜色
     },
     yAxis: {
-      type: 'value',
-      axisLine: { lineStyle: { color: '#FBA541' } }, // Y 轴颜色
-      splitLine: { lineStyle: { type: 'dashed', color: '#ccc' } } // Y 轴背景横线虚线
+      type: "value",
+      axisLine: { lineStyle: { color: "#FBA541" } }, // Y 轴颜色
+      splitLine: { lineStyle: { type: "dashed", color: "#ccc" } }, // Y 轴背景横线虚线
     },
     series: [
       {
-        type: 'bar',
+        type: "bar",
         data: [5, 9],
         barWidth: 30,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            { offset: 0, color: 'rgba(251,165,65,0)' },
-            { offset: 1, color: '#FBA541' }
-          ])
-        }
-      }
-    ]
-  })
-}
+            { offset: 0, color: "rgba(251,165,65,0)" },
+            { offset: 1, color: "#FBA541" },
+          ]),
+        },
+      },
+    ],
+  });
+};
 
 // 绑定 ECharts 容器
-const timeChart = ref(null)
-const areaChart = ref(null)
+const timeChart = ref(null);
+const areaChart = ref(null);
 
 // 在组件挂载后初始化 ECharts
 onMounted(() => {
-  initTimeChart()
-  initAreaChart()
-})
+  initTimeChart();
+  initAreaChart();
+});
 </script>
 <style lang="scss" scoped>
 * {
@@ -191,7 +205,12 @@ onMounted(() => {
   background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
   box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(7, 108, 208, 1)) 1 1;
+  border-image: linear-gradient(
+      180deg,
+      rgba(0, 150, 255, 1),
+      rgba(7, 108, 208, 1)
+    )
+    1 1;
 
   .risk_profile_header {
     width: 100%;
@@ -233,7 +252,8 @@ onMounted(() => {
         color: transparent;
 
         /* 光泽效果：文本阴影 */
-        text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
+        text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4),
+          -2px -2px 5px rgba(0, 0, 0, 0.4);
 
         /* 给文字加一些柔和的过渡效果 */
         transition: all 0.3s ease;
@@ -298,8 +318,8 @@ onMounted(() => {
           height: 28px;
           top: 0px;
           left: 0px;
-          content: '';
-          background-image: url('../../../../assets/img/原创-箭头right.png');
+          content: "";
+          background-image: url("../../../../assets/img/原创-箭头right.png");
         }
         .content {
           margin-top: 5px;
@@ -333,7 +353,7 @@ onMounted(() => {
         .icon-box {
           width: 25px;
           height: 25px;
-          background-image: url('../../../../assets/img/a-shouqi1 1@2x.png');
+          background-image: url("../../../../assets/img/a-shouqi1 1@2x.png");
           background-size: 100% 100%;
           transform: rotate(-90deg);
           cursor: pointer;
@@ -355,6 +375,17 @@ onMounted(() => {
         }
       }
     }
+    :deep(.node-box) {
+      &.active {
+        left: unset!important;
+      }
+    }
+    :deep(.icon-content) {
+      &::after {
+        left: 50%!important;
+        transform: translateX(-50%);
+      }
+    }
     .title-info1 {
       .title {
         min-width: 79px;
@@ -376,7 +407,12 @@ onMounted(() => {
         padding-left: 10px;
         width: 510px;
         height: 35px;
-        background: linear-gradient(270deg, rgba(62, 174, 255, 0) 0%, #1b82cbb1 85%, rgba(27, 129, 203, 0.3) 100%);
+        background: linear-gradient(
+          270deg,
+          rgba(62, 174, 255, 0) 0%,
+          #1b82cbb1 85%,
+          rgba(27, 129, 203, 0.3) 100%
+        );
         border-radius: 0px 0px 0px 0px;
         .depart {
           font-family: Alibaba PuHuiTi;
@@ -387,7 +423,7 @@ onMounted(() => {
         .arrow-box {
           width: 26px;
           height: 29px;
-          background-image: url('../../../../assets/img/连线方向箭头.png');
+          background-image: url("../../../../assets/img/连线方向箭头.png");
           background-size: 100% 100%;
         }
       }
@@ -397,12 +433,12 @@ onMounted(() => {
 
 .risk_profile_container::after {
   position: absolute;
-  content: '';
+  content: "";
   left: 0%;
   right: 0%;
   bottom: 0;
   height: 3px;
-  background-image: url('@/assets/img/image-bottom.png');
+  background-image: url("@/assets/img/image-bottom.png");
   background-size: 100% 50%;
 }
 .risk_bg_color {
@@ -414,7 +450,12 @@ onMounted(() => {
   height: 24px;
   width: 2px;
   background: #88eaff;
-  background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(34, 73, 127, 0) 0%,
+    rgba(136, 234, 255, 0.6) 50%,
+    rgba(34, 73, 127, 0) 100%
+  );
   margin: 0 10px;
 }
 </style>