公共卫生风险模块高亮

src/components/MyAlert/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="device-alert-mask" v-if="visible">
+    <div class="device-alert-box">
+      <div class="header">
+        <span class="title">提示</span>
+        <span class="close-btn" @click="close">×</span>
+      </div>
+      <div class="body">{{ message }}</div>
+      <div class="footer">
+        <button class="confirm-btn" @click="close">
+          知道了 ({{ countdown }}s)
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted,watch } from 'vue'
+
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 3,
+  },
+  message: {
+    type: String,
+    default: '暂未检测到设备信号',
+  },
+  onClose: Function,
+})
+
+
+
+const visible = ref(true)
+const countdown = ref(props.duration)
+let timer = null
+
+const close = () => {
+  visible.value = false
+  props.onClose?.()
+  clearInterval(timer)
+}
+
+onMounted(() => {
+  timer = setInterval(() => {
+    if (countdown.value <= 1) {
+      close()
+    } else {
+      countdown.value--
+    }
+  }, 1000)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+<style scoped lang="scss">
+.device-alert-mask {
+  position: fixed; /* 使遮罩层固定在页面 */
+  top: 0; /* 从顶部开始 */
+  left: 0; /* 从左边开始 */
+  width: 100vw; /* 覆盖整个屏幕宽度 */
+  height: 100vh; /* 覆盖整个屏幕高度 */
+  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
+  display: flex;
+  align-items: flex-start; /* 使提示框在垂直方向上从顶部开始 */
+  justify-content: center; /* 水平居中 */
+  z-index: 9999; /* 使其位于页面最上层 */
+}
+
+.device-alert-box {
+  background: linear-gradient(180deg, #1e2f4f 0%, #27446e 100%);
+  color: #ffffff;
+  padding: 20px;
+  border-radius: 10px;
+  width: 300px;
+  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+  position: relative;
+  animation: fadeIn 0.3s ease;
+  position: absolute;
+  top: 165px; /* 设置提示框距离顶部165px */
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.close-btn {
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.body {
+  text-align: center;
+  font-size: 14px;
+  margin: 20px 0;
+}
+
+.footer {
+  text-align: center;
+}
+
+.confirm-btn {
+  background-color: #ffca0c;
+  border: none;
+  color: #2d4c7f;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.2s ease;
+}
+
+.confirm-btn:hover {
+  background-color: #ffd94c;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

src/components/TitleHeader/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title_container">
-    <div class="title">{{ title }}</div>
+    <div class="title" @click="setActiveModule">{{ title }}</div>
     <div class="btn_box">
       <div class="right_btn" :class="{ right_btn_active: activeIndex === index }" v-for="(item, index) in buttons" @click="btnClick(item, index)">{{ item.name }}</div>
     </div>
@@ -16,10 +16,14 @@ const props = defineProps({
   btnActiveIndex: 0
 })
 let activeIndex = ref(1)
-const emit = defineEmits(['btnClick'])
+const emit = defineEmits(['btnClick','setActiveModule'])
 function btnClick(item, index) {
   activeIndex.value = index
-  emit('btnClick', item)
+  emit('btnClick', item,props.title)
+}
+
+function setActiveModule () {
+  emit('setActiveModule', props.title)
 }
 </script>
 <style lang="scss" scoped>
@@ -31,6 +35,7 @@ function btnClick(item, index) {
   background: url('../../assets/img/一级标题样式(14).png') no-repeat;
 
   .title {
+    cursor: pointer;
     width: 100%;
     margin-left: 45px;
     font-family: YouSheBiaoTiHei;

src/components/TitleHeaderLong/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title_container" :style="backgroundStyle">
-    <div class="title">{{ title }}</div>
+    <div class="title" @click="setActiveModule">{{ title }}</div>
     <div class="btn_box">
       <div class="right_btn" :class="{ 'right_btn_active': activeIndex === index }" v-for="(item,index) in buttons"
         @click="btnClick(item,index)">{{ item.name }}</div>
@@ -39,11 +39,11 @@ watch(
 )
 
 let activeIndex=ref(1)
-const emit = defineEmits(['btnClick'])
+const emit = defineEmits(['btnClick','setActiveModule'])
 
 function btnClick (item, index) {
   activeIndex.value = index
-  emit('btnClick', item)
+  emit('btnClick', item,props.title)
 }
 onMounted(() => {
   
@@ -51,6 +51,11 @@ onMounted(() => {
 
 function getImgSrc (picName) {
   return new URL(`../../assets/img/一级标题样式(${picName}).png`, import.meta.url).href
+  }
+
+function setActiveModule () {
+  console.log('props.title')
+  emit('setActiveModule', props.title)
 }
 </script>
 <style lang="scss" scoped>

src/components/TitleHeadermini/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title_container">
-    <div class="title">{{ title }}</div>
+    <div class="title" @click="setActiveModule">{{ title }}</div>
     <div class="btn_box">
       <div class="right_btn" :class="{ 'right_btn_active': activeIndex === index }" v-for="(item, index) in buttons"
         @click="btnClick(item, index)">{{ item.name }}</div>
@@ -17,11 +17,15 @@ const props = defineProps({
   btnActiveIndex: 0,
 })
 let activeIndex = ref(1)
-const emit = defineEmits(['btnClick'])
+const emit = defineEmits(['btnClick','setActiveModule'])
 
 function btnClick (item, index) {
   activeIndex.value = index
-  emit('btnClick', item)
+  emit('btnClick', item,props.title)
+}
+
+function setActiveModule () {
+  emit('setActiveModule', props.title)
 }
 </script>
 <style lang="scss" scoped>
@@ -36,6 +40,7 @@ function btnClick (item, index) {
 
 
   .title {
+    cursor: pointer;
     width: 100%;
     margin-left: 37px;
     font-family: YouSheBiaoTiHei;

src/components/TitleHeadersmall/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title_container">
-    <div class="title">{{ title }}</div>
+    <div class="title" @click="setActiveModule">{{ title }}</div>
     <div class="btn_box">
       <div class="right_btn" :class="{ 'right_btn_active': activeIndex === index }" v-for="(item, index) in buttons"
         @click="btnClick(item, index)">{{ item.name }}</div>
@@ -33,11 +33,16 @@ watch(
   }
 )
 
-const emit = defineEmits(['btnClick'])
+const emit = defineEmits(['btnClick','setActiveModule'])
 
 function btnClick (item, index) {
   activeIndex.value = index
-  emit('btnClick', item)
+  emit('btnClick', item,props.title)
+}
+
+function setActiveModule () {
+  console.log('props.title')
+  emit('setActiveModule', props.title)
 }
 </script>
 <style lang="scss" scoped>
@@ -52,6 +57,7 @@ function btnClick (item, index) {
 
 
   .title {
+    cursor: pointer;
     width: 100%;
     margin-left: 37px;
     font-family: YouSheBiaoTiHei;

src/components/TowLevelTitle/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="title_container">
     <div class="title_content">
-      <div class="title">
+      <div class="title" @click="setActiveModule">
         <img src="../../assets/img/Group 4645(1).png" alt="" />
-        <div> {{ title }}</div>
+        <div  > {{ title }}</div>
       </div>
       <div class="btn_box" >
         <div class="right_btn" :class="{ 'right_btn_active': activeIndex === index }" v-for="(item, index) in buttons"
@@ -35,7 +35,7 @@ const props = defineProps({
 })
 
 let activeIndex = ref(0)
-const emit = defineEmits(['twoBtnClick','openDialog'])
+const emit = defineEmits(['twoBtnClick','openDialog','setActiveModule'])
 
 function btnClick (item, index) {
   activeIndex.value = index
@@ -46,6 +46,11 @@ function openDialog () {
    emit('openDialog',)
 }
 
+function setActiveModule () {
+  emit('setActiveModule',props.title)
+   
+}
+
 </script>
 <style lang="scss" scoped>
 .title_container {
@@ -64,6 +69,7 @@ function openDialog () {
     align-items: center;
     margin-bottom:3px;
     .title {
+      cursor: pointer;
       // width: 100%;
       width: 260px;
       display: flex;

src/store/common.js

@@ -10,6 +10,10 @@ export const useCommonStore = defineStore('common', {
         '图例': true,
         '色阶图': true,
       }, //存储当前激活的工具
+      activeModule: '风险总览',
+      showAlert: '',  //提示框开关
+      alertMessage: '', //提示框内容
+      alertKey: 0, //更新此值即可重启倒计时
     }
   },
   actions: {

src/views/index.vue

@@ -1,30 +1,18 @@
 <template>
   <div class="home_container">
-    <Map/>
+    <Map />
     <!-- 头部 -->
     <div class="home_container_header">
       <div class="home_container_header-left">
         <div class="home_container_header-left_time">
-          <img
-            class="time_icon"
-            src="../assets/img/risk_info_icon-1.png"
-            alt=""
-          />
+          <img class="time_icon" src="../assets/img/risk_info_icon-1.png" alt="" />
           <div class="clock">{{ currentTime }}</div>
         </div>
         <div class="home_container_header-left_tab">
           <div class="button-container">
-            <div
-              v-for="(item, index) in buttons"
-              :key="index"
-              class="parallelogram-button"
-              :class="{ highlight: commonStore.activeIndex === index }"
-              @click="setActive(index, item)"
-            >
-              <div
-                class="text-container"
-                :class="{ 'text-container-highlight': activeIndex === index }"
-              >
+            <div v-for="(item, index) in buttons" :key="index" class="parallelogram-button"
+              :class="{ highlight: commonStore.activeIndex === index }" @click="setActive(index, item)">
+              <div class="text-container" :class="{ 'text-container-highlight': activeIndex === index }">
                 {{ item.title }}
               </div>
             </div>
@@ -50,9 +38,14 @@
     </div>
     <!-- 底部片区图层按钮 -->
     <AreaLayerSwitch></AreaLayerSwitch>
+
+    <!-- 提示框 -->
+    <MyAlert v-if="commonStore.showAlert" :message="commonStore.alertMessage" :duration="3" 
+      :onClose="() => (commonStore.showAlert = false)"></MyAlert>
   </div>
 </template>
 <script setup>
+import MyAlert from '../components/MyAlert/index'
 import AreaLayerSwitch from "../components/AreaLayerSwitch/index";
 import LeftPage from "./left/index.vue";
 import RightPage from "./right/index.vue";
@@ -69,8 +62,8 @@ import {
   onUnmounted,
   watch,
 } from "vue";
-import {useRiskTableStore} from "@/store/riskTable.js";
-import {handleJtlxPoints, initDistrict} from "@/utils/map/baseMethod.js";
+import { useRiskTableStore } from "@/store/riskTable.js";
+import { handleJtlxPoints, initDistrict } from "@/utils/map/baseMethod.js";
 let userStore = useUserStore();
 let commonStore = useCommonStore();
 let riskTableStore = useRiskTableStore();
@@ -112,12 +105,12 @@ let buttons = ref([
 ]);
 let activeIndex = ref(0); // 存储当前高亮按钮的索引
 
-function setActive(index, item) {
+function setActive (index, item) {
   // 切换高亮按钮，点击时高亮切换
   activeIndex.value = index;
   commonStore.setActiveIndex(index);
   riskTableStore.setCurrentBackground(1)
-  if(index === 0){
+  if (index === 0) {
     initDistrict()
   }
 
@@ -247,23 +240,27 @@ function setActive(index, item) {
       }
     }
   }
+
   .home_container_header-right {
     position: absolute;
     right: 51px;
     top: 35px;
     display: flex;
     align-items: center;
+
     .telephone-directory {
       display: flex;
       align-items: center;
       margin-right: 15px;
       cursor: pointer;
+
       .icon-img {
         width: 40px;
         height: 40px;
         background-image: url("../assets/img/通讯录@2x.png");
         background-size: 100% 100%;
       }
+
       .text {
         font-family: Alibaba PuHuiTi;
         font-weight: normal;
@@ -276,18 +273,21 @@ function setActive(index, item) {
         text-transform: none;
       }
     }
+
     .height-line {
       width: 1px;
       background: #6ebbef;
       height: 22px;
       margin-right: 15px;
     }
+
     .duoyun {
       width: 35px;
       height: 35px;
       background-image: url("../assets/img/多云.png");
       background-size: 100% 100%;
     }
+
     .right-text {
       width: 113px;
       height: 17px;
@@ -308,7 +308,8 @@ function setActive(index, item) {
 .home_content_left {
   position: absolute;
   left: 31px;
-  top: 108px;
+  // top: 108px;
+  top: 100px;
   width: 1124px;
   height: 945px;
   // background-color: pink;

src/views/left/index.vue

@@ -96,9 +96,10 @@ function changeRiskView() {
 <style lang="scss" scoped>
 .left_container {
   width: 100%;
-  height: 100%;
-
+  // height: 100%;
+  height: 970px;
   .left_container_header-left_tab {
+    margin-bottom: 12px;
     .button-container {
       display: flex;
       justify-content: center;

src/views/left/modules/BigRiskTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="risk_table_container">
+  <div class="risk_table_container" >
     <TitleHeaderLong :title="'风险列表'" :buttons="[]"></TitleHeaderLong>
     <div class="risk_table_content">
       <div class="risk_table_header">
@@ -540,9 +540,10 @@ function goBack() {
 <style lang="scss" scoped>
 .risk_table_container {
   margin-top: 15px;
-  width: 1092px;
+  // width: 1092px;
   // height: 100%;
-  height: 932px;
+  width: 100%;
+  height: 946px;
   background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.6) 100%);
   border-radius: 0px 0px 0px 0px;
   position: relative;
@@ -685,7 +686,7 @@ function goBack() {
 
 .dialog_table {
   width: 100%;
-  height: 740px;
+  height: 760px;
 }
 
 :deep(.el-table) {

src/views/left/modules/ReportDisposal.vue

@@ -3,16 +3,16 @@
     <!-- 1.============= -->
     <div class="content_one">
       <!-- 风险报告 -->
-      <div class="modules_bg_color modules_bg">
-        <TitleHeadermini :title="'风险报告'"></TitleHeadermini>
+      <div class="modules_bg_color modules_bg" :class="{ modules_bg_color_active: commonStore.activeModule === '风险报告' }">
+        <TitleHeadermini :title="'风险报告'" @setActiveModule="setActiveModule"></TitleHeadermini>
         <div>
           <RiskReport :levelObj="riskReportObj"></RiskReport>
         </div>
       </div>
 
       <!-- 风险总览 -->
-      <div class="modules_bg_color modules_bg2">
-        <TitleHeader :title="'风险总览'" :buttons="riskOverViewButtons"></TitleHeader>
+      <div class="modules_bg_color modules_bg2" :class="{ modules_bg_color_active: commonStore.activeModule === '风险总览' }">
+        <TitleHeader :title="'风险总览'" :buttons="riskOverViewButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeader>
         <div class="modules_bg2_body">
           <div>
             <RiskReport :levelObj="riskOverViewObj"></RiskReport>
@@ -31,24 +31,24 @@
     <!-- 2.=================== -->
     <div class="content_two">
       <!-- 风险处置 -->
-      <div class="modules_bg_color modules_bg_340">
-        <TitleHeadersmall :title="'风险处置'" :buttons="timeButtons"></TitleHeadersmall>
+      <div class="modules_bg_color modules_bg_340" :class="{ modules_bg_color_active: commonStore.activeModule === '风险处置' }">
+        <TitleHeadersmall :title="'风险处置'" :buttons="timeButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeadersmall>
         <div class="two_level_body">
           <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView>
         </div>
       </div>
 
       <!-- 重大活动保障 -->
-      <div class="modules_bg_color modules_bg_340">
-        <TitleHeadersmall :title="'重大活动保障'" :buttons="timeButtons"></TitleHeadersmall>
+      <div class="modules_bg_color modules_bg_340" :class="{ modules_bg_color_active: commonStore.activeModule === '重大活动保障' }">
+        <TitleHeadersmall :title="'重大活动保障'" :buttons="timeButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeadersmall>
         <div class="two_level_body">
           <RiskTwoView :levelObj="majorEventGuaranteeObj"></RiskTwoView>
         </div>
       </div>
 
       <!-- 已结案风险 -->
-      <div class="modules_bg_color modules_bg_412">
-        <TitleHeadersmall :title="'已结案风险'" :buttons="timeButtons"></TitleHeadersmall>
+      <div class="modules_bg_color modules_bg_412" :class="{ modules_bg_color_active: commonStore.activeModule === '已结案风险' }">
+        <TitleHeadersmall :title="'已结案风险'" :buttons="timeButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeadersmall>
         <div class="two_level_body">
           <RiskTwoView :levelObj="riskClosedCaseObj"></RiskTwoView>
         </div>
@@ -59,12 +59,12 @@
     <RiskTableContent></RiskTableContent>
 
     <!-- 4.===================== -->
-    <div class="content_four">
-      <TitleHeaderLong :title="'应急处置资源'" :buttons="[]"></TitleHeaderLong>
-      <div class="modules_bg_color content_four_body">
+    <div class="content_four modules_bg_color" :class="{ modules_bg_color_active: commonStore.activeModule === '应急处置资源' }">
+      <TitleHeaderLong :title="'应急处置资源'" :buttons="[]" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeaderLong>
+      <div class="content_four_body">
         <!-- 检测设备 -->
-        <div class="modules_bg_color2 modules_bg_jcsb">
-          <TowLevelTitle :title="'检测设备'"></TowLevelTitle>
+        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '检测设备' }">
+          <TowLevelTitle :title="'检测设备'" @setActiveModule="setActiveModule"></TowLevelTitle>
           <div class="modules_bg_jcsb_body">
             <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
             <div class="modules_bg_jcsb_body_left">
@@ -92,8 +92,8 @@
         </div>
 
         <!-- 派单情况 -->
-        <div class="modules_bg_color2 modules_bg_pdqk">
-          <TowLevelTitle :title="'派单情况'"></TowLevelTitle>
+        <div class="modules_bg_color2 modules_bg_pdqk" :class="{ modules_bg_color_active: commonStore.activeModule === '派单情况' }">
+          <TowLevelTitle :title="'派单情况'" @setActiveModule="setActiveModule"></TowLevelTitle>
           <div class="modules_bg_pdqk_body">
             <div class="modules_bg_pdqk_body_item">
               <img src="../../../assets//img/发出指令.png" alt="" />
@@ -121,8 +121,8 @@
         </div>
 
         <!-- 应急人员 -->
-        <div class="modules_bg_color2 modules_bg_yjry">
-          <TowLevelTitle :title="'应急人员'"></TowLevelTitle>
+        <div class="modules_bg_color2 modules_bg_yjry" :class="{ modules_bg_color_active: commonStore.activeModule === '应急人员' }">
+          <TowLevelTitle :title="'应急人员'" @setActiveModule="setActiveModule"></TowLevelTitle>
           <div class="modules_bg_yjry_body">
             <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
             <div class="modules_bg_yjry_body_zhz">
@@ -160,8 +160,8 @@
         </div>
 
         <!-- 应急车辆 -->
-        <div class="modules_bg_color2 modules_bg_jcsb">
-          <TowLevelTitle :title="'应急车辆'"></TowLevelTitle>
+        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '应急车辆' }">
+          <TowLevelTitle :title="'应急车辆'" @setActiveModule="setActiveModule"></TowLevelTitle>
           <div class="modules_bg_jcsb_body">
             <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
             <div class="modules_bg_jcsb_body_left">
@@ -189,7 +189,7 @@
       </div>
     </div>
 
-      <!-- 地图工具 -->
+    <!-- 地图工具 -->
     <MapTools></MapTools>
   </div>
 </template>
@@ -202,18 +202,66 @@ import TitleHeader from '../../../components/TitleHeader'
 import TitleHeaderLong from '../../../components/TitleHeaderLong'
 // import RiskTableHeader from '../../../components/TitleHeaderLong/RiskTableHeader'
 import RiskTableContent from './common/RiskTableContent.vue'
-
 import TowLevelTitle from '../../../components/TowLevelTitle'
 import RiskReport from '../comp/RiskReport.vue'
 import RiskTwoView from '../comp/RiskTwoView.vue'
-
 import MyProgress from './common/MyProgress'
-
 import { ref, nextTick, toRaw, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
 
 // let riskReportObj = ref([{ id: 1, level: 'A', count: 0 }, { id: 2, level: 'B', count: 0 }, { id: 3, level: 'C', count: 0 }, { id: 4, level: 'D', count: 0 },])
 const emit = defineEmits(['openRiskBigTable'])
 
+function setActiveModule(module) {
+  console.log(module, 'module')
+  commonStore.activeModule = module
+  switch (module) {
+    case '检测设备':
+      commonStore.alertMessage = '暂未检测到设备信号'
+      break
+    case '派单情况':
+      commonStore.alertMessage = '暂未获取派单情况'
+      break
+    case '应急人员':
+      commonStore.alertMessage = '暂未检测到应急人员信号'
+      break
+    case '应急车辆':
+      commonStore.alertMessage = '暂未检测到应急车辆信号'
+      break
+
+    default:
+      break
+  }
+  if (['检测设备', '派单情况', '应急人员', '应急车辆'].includes(module)) {
+      commonStore.alertKey = Date.now()
+      commonStore.showAlert = true
+  }
+}
+
+// 模块 年 月 日
+function btnClick (item, module) {
+   console.log(item,'item=btnClick')
+    switch (module) {
+    case '风险总览':
+      
+      break
+    case '风险处置':
+     
+      break
+    case '重大活动保障':
+      
+      break
+    case '已结案风险':
+      
+      break
+
+    default:
+      break
+  }
+
+}
+
 // 1.=====================================
 let riskReportObj = ref({
   name: '当日新增',
@@ -337,7 +385,8 @@ function openRiskBigTable() {
 <style lang="scss" scoped>
 .body_container {
   width: 100%;
-  height: 100%;
+  // height: 100%;
+  height: 1;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -353,15 +402,14 @@ function openRiskBigTable() {
   position: relative;
   background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.6) 100%);
   border-radius: 0px 0px 0px 0px;
-
 }
 
 .modules_bg_color2 {
   position: relative;
   background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.6) 100%);
   border-radius: 0px 0px 0px 0px;
-
 }
+
 .modules_bg_color::after {
   position: absolute;
   content: '';
@@ -376,21 +424,23 @@ function openRiskBigTable() {
 .modules_bg {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  // justify-content: center;
   align-items: center;
   width: 300px;
-  height: 253px;
+  // height: 253px;
+  height: 244px;
 
   // background: url('../../../assets/img/m_bg.png');
 }
 
 .modules_bg2 {
   width: 808px;
-  height: 253px;
+  // height: 253px;
+  height: 244px;
   padding-left: 10px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  // justify-content: center;
 }
 
 .modules_bg2_body {
@@ -439,8 +489,6 @@ function openRiskBigTable() {
   box-sizing: border-box;
 }
 
-
-
 .content_four {
   // flex: 1;
   width: 100%;
@@ -466,17 +514,21 @@ function openRiskBigTable() {
     padding: 0px 5px 0px;
     // padding-left: 5px;
     box-sizing: border-box;
+
     .modules_bg_jcsb_body {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .modules_bg_jcsb_body_left {
         width: 140px;
+
         .modules_bg_jcsb_body_left_content {
           display: flex;
           align-items: end;
           justify-content: space-between;
           width: 140;
+
           > div {
             display: flex;
             flex-direction: column;
@@ -487,6 +539,7 @@ function openRiskBigTable() {
             color: rgba(255, 255, 255, 0.9);
             font-style: normal;
             text-transform: none;
+
             > span {
               font-family: Roboto;
               font-weight: bold;
@@ -498,6 +551,7 @@ function openRiskBigTable() {
               -webkit-text-fill-color: transparent;
             }
           }
+
           > img {
             width: 22px;
             height: 21px;
@@ -505,6 +559,7 @@ function openRiskBigTable() {
           }
         }
       }
+
       .progress {
         margin-top: 5px;
         width: 54px;
@@ -523,6 +578,7 @@ function openRiskBigTable() {
           text-transform: none;
           margin-top: 6px;
         }
+
         .circle {
           display: flex;
           justify-content: center;
@@ -530,6 +586,7 @@ function openRiskBigTable() {
           margin-top: 12px;
           width: 48px;
           height: 48px;
+
           :deep(.el-progress-circle) {
             width: 48px !important;
             height: 48px !important;
@@ -545,11 +602,13 @@ function openRiskBigTable() {
     height: 126px;
     padding: 0px 20px 10px;
     box-sizing: border-box;
+
     .modules_bg_pdqk_body {
       display: flex;
       align-items: center;
       justify-content: space-between;
       position: relative;
+
       .modules_bg_pdqk_body_item {
         display: flex;
         flex-direction: column;
@@ -560,6 +619,7 @@ function openRiskBigTable() {
         color: rgba(255, 255, 255, 0.9);
         font-style: normal;
         text-transform: none;
+
         > span {
           font-family: Roboto;
           font-weight: bold;
@@ -570,6 +630,7 @@ function openRiskBigTable() {
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }
+
         .line_img {
           width: 16px;
           height: 16px;
@@ -583,6 +644,7 @@ function openRiskBigTable() {
         width: 192px;
         height: 16px;
         border-bottom: 2px dashed #175a7e;
+
         // position: relative;
         .line_img1 {
           //  position: absolute;
@@ -594,6 +656,7 @@ function openRiskBigTable() {
           margin-top: 4px;
           margin-right: 70px;
         }
+
         .line_img2 {
           margin-top: 4px;
           width: 26px;
@@ -610,6 +673,7 @@ function openRiskBigTable() {
     padding: 0px 5px 5px;
     // padding-left: 10px;
     box-sizing: border-box;
+
     .modules_bg_yjry_body {
       display: flex;
       align-items: center;
@@ -617,6 +681,7 @@ function openRiskBigTable() {
       height: 82px;
       padding-left: 5px;
       box-sizing: border-box;
+
       .modules_bg_yjry_body_zhz {
         display: flex;
         flex-direction: column;
@@ -627,6 +692,7 @@ function openRiskBigTable() {
         color: rgba(255, 255, 255, 0.9);
         font-style: normal;
         text-transform: none;
+
         > div {
           display: flex;
           align-items: center;
@@ -636,6 +702,7 @@ function openRiskBigTable() {
           color: #08ffe5;
           font-style: normal;
           text-transform: none;
+
           > img {
             width: 24px;
             height: 24px;
@@ -643,19 +710,23 @@ function openRiskBigTable() {
           }
         }
       }
+
       .modules_bg_yjry_left_content {
         display: flex;
         // align-items: center;
         align-items: end;
         width: 150px;
+
         .modules_bg_yjry_left {
           width: 150px;
           margin-right: 15px;
+
           .modules_bg_yjry_left_content {
             display: flex;
             align-items: end;
             justify-content: space-between;
             width: 150;
+
             > div {
               display: flex;
               flex-direction: column;
@@ -666,6 +737,7 @@ function openRiskBigTable() {
               color: rgba(255, 255, 255, 0.9);
               font-style: normal;
               text-transform: none;
+
               > span {
                 font-family: Roboto;
                 font-weight: bold;
@@ -677,6 +749,7 @@ function openRiskBigTable() {
                 -webkit-text-fill-color: transparent;
               }
             }
+
             > img {
               width: 22px;
               height: 21px;
@@ -684,6 +757,7 @@ function openRiskBigTable() {
             }
           }
         }
+
         .progress {
           width: 54px;
           height: 76px;
@@ -701,6 +775,7 @@ function openRiskBigTable() {
             text-transform: none;
             margin-top: 6px;
           }
+
           .circle {
             display: flex;
             justify-content: center;
@@ -708,6 +783,7 @@ function openRiskBigTable() {
             margin-top: 12px;
             width: 48px;
             height: 48px;
+
             :deep(.el-progress-circle) {
               width: 48px !important;
               height: 48px !important;
@@ -715,6 +791,7 @@ function openRiskBigTable() {
           }
         }
       }
+
       .line {
         height: 50px;
         width: 2px;
@@ -732,3 +809,14 @@ function openRiskBigTable() {
   }
 }
 </style>
+<style lang="scss">
+.modules_bg_color_active {
+  // border: 2px solid #00ffff; /* 高亮边框颜色可自定义 */
+  // box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+  box-sizing: border-box;
+  box-shadow: 0 0 20px 6px rgba(0, 255, 255, 0.5) !important;
+  /* 柔和背光效果 */
+  z-index: 1;
+  transition: box-shadow 0.3s ease;
+}
+</style>

src/views/left/modules/common/RiskTableContent.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="risk_table_container">
-    <div class="title_container" :style="backgroundStyle">
-      <div class="title">风险列表</div>
+  <div class="risk_table_container" :class="{ modules_bg_color_active: commonStore.activeModule === '风险列表' }">
+    <div class="title_container" >
+      <div class="title" @click="setActiveModule">风险列表</div>
       <div class="btn_box">
         <div class="right_btn" :class="{ right_btn_active: activeIndex1 === index }" v-for="(item, index) in buttons" @click="btnClick(item, index)">{{ item.name }}</div>
         <div class="right_btn" :class="{ right_btn_active: activeIndex2 === index }" v-for="(item, index) in timeButtons" @click="btnClick2(item, index)">{{ item.name }}</div>
@@ -21,6 +21,11 @@ let commonStore = useCommonStore()
 
 const props = defineProps({})
 
+function setActiveModule () {
+  console.log('风险列表')
+  commonStore.activeModule = '风险列表'
+}
+
 const buttons = ref([
   { id: 1, name: '处置中', active: false },
   { id: 2, name: '已结案', active: true },
@@ -145,13 +150,19 @@ const riskTableconfig = ref({
 })
 const emit = defineEmits(['btnClick'])
 
+
 function btnClick(item, index) {
   activeIndex1.value = index
-  emit('btnClick', item)
+  // buttons[activeIndex1.value]
+  // timeButtons[activeIndex2.value]
+
+  // emit('btnClick', item)
 }
 function btnClick2(item, index) {
   activeIndex2.value = index
-  emit('btnClick2', item)
+  // buttons[activeIndex1.value]
+  // timeButtons[activeIndex2.value]
+  // emit('btnClick2', item)
 }
 function openRiskBigTable() {
   riskTableStore.setInitShow(false)
@@ -220,6 +231,7 @@ onMounted(() => {})
   background-size: 100% 100%;
 
   .title {
+    cursor: pointer;
     width: 100%;
     margin-left: 45px;
     font-family: YouSheBiaoTiHei;
@@ -369,4 +381,12 @@ onMounted(() => {})
   font-style: normal;
   text-transform: none;
 }
+.modules_bg_color_active {
+  // border: 2px solid #00ffff; /* 高亮边框颜色可自定义 */
+  // box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+  box-sizing: border-box;
+  box-shadow: 0 0 20px 6px rgba(0, 255, 255, 0.5) !important; /* 柔和背光效果 */
+  z-index: 1;
+  transition: box-shadow 0.3s ease;
+}
 </style>