更新

src/components/common/TestDiv copy.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="test-div" v-if="dataList && dataList.length > 0">
+    <div class="test-header">
+      <span class="test-title">消息通知</span>
+      <div class="header-right">
+        <span class="test-countdown">{{ countdown }}s</span>
+        <el-icon class="close-icon" @click="handleClose">
+          <Close />
+        </el-icon>
+      </div>
+    </div>
+    <div class="test-content">
+      <Item v-for="(item, index) in dataList" :key="index" :item="item" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 测试div组件，用于在后台和大屏页面都显示
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Close } from '@element-plus/icons-vue'
+import WebSoketClass from '@/utils/webSocket.js'
+import emitter from "@/utils/eventBus.js"; // 导入事件总线
+import Item from './item.vue'
+import { AudioPlayerClass } from '@/utils/audioPlayer.js'
+const webSoket = new WebSoketClass()
+const dataList = ref([])
+const timekeeping = ref(null)
+const countdown = ref(0) // 倒计时时间（秒）
+
+// 音频播放器实例映射
+const audioPlayers = ref({
+  '02': null, // 信息上报
+  '03': null, // 研判审批
+  '04': null, // 研判指令
+  '05': null  // 线索下发
+})
+
+// 音频文件路径映射
+const audioPaths = {
+  '02': require('@/assets/images/cjyp.mp3'),
+  '03': require('@/assets/images/ypbg.mp3'),
+  '04': require('@/assets/images/ypzl.mp3'),
+  '05': require('@/assets/images/xsyp.mp3')
+}
+
+// 初始化音频播放器
+const initAudioPlayers = () => {
+  Object.keys(audioPaths).forEach(type => {
+    try {
+      audioPlayers.value[type] = new AudioPlayerClass()
+      audioPlayers.value[type].init(audioPaths[type], false)
+    } catch (error) {
+      console.error(`初始化类型${type}的音频播放器失败:`, error)
+    }
+  })
+}
+
+// 根据类型播放音频
+const playAudioByType = (type) => {
+  if (audioPlayers.value[type]) {
+    try {
+      audioPlayers.value[type].play()
+    } catch (error) {
+      console.error(`播放类型${type}的音频失败:`, error)
+    }
+  }
+}
+// 手动关闭
+const handleClose = () => {
+  if (timekeeping.value) {
+    clearInterval(timekeeping.value)
+    timekeeping.value = null
+  }
+  dataList.value = []
+}
+
+// 重置倒计时
+const resetCountdown = () => {
+  if (timekeeping.value) {
+    clearInterval(timekeeping.value)
+  }
+  countdown.value = 15
+  timekeeping.value = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      clearInterval(timekeeping.value)
+      dataList.value = []
+      timekeeping.value = null
+    }
+  }, 1000)
+}
+onMounted(() => {
+  // 初始化音频播放器
+  initAudioPlayers()
+
+  emitter.on('webSocketMessage', (newsDate) => {
+    if (newsDate) {
+        dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
+        // 根据消息类型播放音频
+        playAudioByType(newsDate.type)
+      resetCountdown()
+    }
+  })
+  // 组件挂载时执行的操作
+  webSoket.connect()
+  console.log('组件挂载时执行的操作')
+})
+onUnmounted(() => {
+  webSoket.closeConnection()
+  emitter.off('webSocketMessage')
+  if (timekeeping.value) {
+    clearInterval(timekeeping.value)
+  }
+  // 销毁所有音频播放器实例
+  Object.values(audioPlayers.value).forEach(player => {
+    if (player) {
+      player.destroy()
+    }
+  })
+  // 组件卸载时执行的操作
+  console.log('组件卸载时执行的操作')
+})
+</script>
+
+<style scoped lang="scss">
+.test-div {
+  width: 400px;
+  max-height: 250px;
+  position: fixed;
+  bottom: 2%;
+  right: 2%;
+  z-index: 1999;
+  background: linear-gradient(135deg, #0a3b6d 0%, #1a5a9e 100%);
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 255, 255, 0.3), 0 0 20px rgba(0, 255, 255, 0.1);
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+}
+
+.test-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: rgba(0, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+}
+
+.test-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #00ffff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: #00ffff;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+      box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1.2);
+      box-shadow: 0 0 20px rgba(0, 255, 255, 1);
+    }
+  }
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.test-countdown {
+  font-size: 14px;
+  color: #00ffff;
+  background: rgba(0, 255, 255, 0.1);
+  padding: 4px 12px;
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  border-radius: 12px;
+  font-weight: 500;
+  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
+}
+
+.close-icon {
+  font-size: 18px;
+  color: #00ffff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 4px;
+  border-radius: 4px;
+  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
+
+  &:hover {
+    background: rgba(0, 255, 255, 0.2);
+    transform: rotate(90deg);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
+  }
+}
+
+.test-content {
+  max-height: 150px;
+  overflow-y: auto;
+  padding: 12px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+</style>

src/components/common/TestDiv.vue

@@ -19,11 +19,11 @@
 // 测试div组件，用于在后台和大屏页面都显示
 import { ref, onMounted, onUnmounted } from 'vue'
 import { Close } from '@element-plus/icons-vue'
-import WebSoketClass from '@/utils/webSocket.js'
 import emitter from "@/utils/eventBus.js"; // 导入事件总线
+import { qcckGet } from '@/api/qcckApi'
 import Item from './item.vue'
 import { AudioPlayerClass } from '@/utils/audioPlayer.js'
-const webSoket = new WebSoketClass()
+import {getItem} from '@/utils/storage.js'
 const dataList = ref([])
 const timekeeping = ref(null)
 const countdown = ref(0) // 倒计时时间（秒）
@@ -90,24 +90,56 @@ const resetCountdown = () => {
     }
   }, 1000)
 }
+
+
+// 做一个定时器15s一次
+const checkNews = ref(null)
+const checkNewsInterval = 15000 // 15秒
+checkNews.value = setInterval(() => {
+  dataModel()
+}, checkNewsInterval)
 onMounted(() => {
   // 初始化音频播放器
   initAudioPlayers()
-
   emitter.on('webSocketMessage', (newsDate) => {
     if (newsDate) {
-        dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
+      dataList.value = newsDate
-        // 根据消息类型播放音频
+      // dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
-        playAudioByType(newsDate.type)
+      // 根据消息类型播放音频
+      playAudioByType(newsDate[0].typeMasgeLx)
       resetCountdown()
     }
   })
-  // 组件挂载时执行的操作
-  webSoket.connect()
-  console.log('组件挂载时执行的操作')
 })
+const idEntityCard = ref(getItem('idEntityCard'))
+const dataModel = () => {
+  qcckGet({}, '/mosty-gsxt/dsjJbxx/message').then(res => {
+    if (res) {
+      const yjmasg = res.filter(item => item.type === '01')
+      if (yjmasg.length > 0) {
+        emitter.emit('openYp', yjmasg[0].obj); // 触发音频播放
+      } else {
+const data=res.filter(item=>item.sfzList.includes(idEntityCard.value))
+        const infoMasge =data.map(item => {
+          return {
+            ...item.obj,
+            typeMasgeLx: item.type
+          }
+        })
+        console.log(infoMasge);
+        emitter.emit('webSocketMessage', infoMasge)
+      }
+    }
+  })
+
+}
+
+// if (newsDate.type === '01') {
+//           // 触发音频播放
+//           console.log('触发音频播放');
+//           emitter.emit('openYp', newsDate.data); // 传递消息数据
+//         } else {
 onUnmounted(() => {
-  webSoket.closeConnection()
   emitter.off('webSocketMessage')
   if (timekeeping.value) {
     clearInterval(timekeeping.value)
@@ -118,6 +150,11 @@ onUnmounted(() => {
       player.destroy()
     }
   })
+  // 清除定时器
+  if (checkNews.value) {
+    clearInterval(checkNews.value)
+    checkNews.value = null
+  }
   // 组件卸载时执行的操作
   console.log('组件卸载时执行的操作')
 })
@@ -143,6 +180,7 @@ onUnmounted(() => {
       transform: translateX(100%);
       opacity: 0;
     }
+
     to {
       transform: translateX(0);
       opacity: 1;
@@ -180,11 +218,14 @@ onUnmounted(() => {
   }
 
   @keyframes pulse {
-    0%, 100% {
+
+    0%,
+    100% {
       opacity: 1;
       transform: scale(1);
       box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
     }
+
     50% {
       opacity: 0.8;
       transform: scale(1.2);
@@ -230,11 +271,14 @@ onUnmounted(() => {
   max-height: 150px;
   overflow-y: auto;
   padding: 12px;
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
-  -ms-overflow-style: none; /* IE and Edge */
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
 
   &::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
+    display: none;
+    /* Chrome, Safari and Opera */
   }
 }
 </style>

src/components/common/item.vue

@@ -49,6 +49,7 @@ const informationMap = {
   '04': '研判指令',
   '05': '线索下发',
 }
+const emit=defineEmits(['goDetail'])
 const goDetail = (id, lx) => {
   let path = ''
   switch (lx) {

src/plugins/utils/webSocket.js

@@ -1,5 +1,5 @@
 // let url = "ws://80.155.0.82:8006/mosty-api/mosty-websocket/socket/"; //线上
-let url = "ws://155.240.22.30:2109/mosty-api/mosty-websocket/socket/"; //线上
+let url = "wss://sg.lz.dsj.xz/websocket/mosty-websocket/socket/"; //线上
 
 if(process.env.NODE_ENV === 'development') {
   url = "ws://47.108.232.77:9537/mosty-api/mosty-websocket/socket/"; //本地

src/router/index.js

@@ -15,9 +15,7 @@ import store from "@/store";
  * 私有路由表
  */
 
-export const privateRoutes = [
+export const privateRoutes = [];
-
-];
 
 /**
  * 公开路由表

src/views/home/index copy.vue

@@ -134,29 +134,29 @@ const getDepId = () => {
   const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
   if (deptLevel.startsWith('2')) {
     const data = Object.values(bm).map(item => item);
-    changeXzqh(data, true)
+    changeXzqh(data, true);
   } else {
     switch (deptCode) {
       case '54040200000'://巴宜区
-        changeXzqh(bm[542621])
+        changeXzqh(bm[542621]);
         break;
       case '54042400000'://波密县
-        changeXzqh(bm[542625])
+        changeXzqh(bm[542625]);
         break;
       case '54042500000'://察隅县
-        changeXzqh(bm[542626])
+        changeXzqh(bm[542626]);
         break;
       case '54042100000'://工布江达县
-        changeXzqh(bm[542622])
+        changeXzqh(bm[542622]);
         break;
       case '54042600000'://朗县
-        changeXzqh(bm[542627])
+        changeXzqh(bm[542627]);
         break;
       case '54042200000'://米林县
-        changeXzqh(bm[542623])
+        changeXzqh(bm[542623]);
         break;
       case '54042300000'://墨脱县
-        changeXzqh(bm[542624])
+        changeXzqh(bm[542624]);
         break;
       default:
         const data = Object.values(bm).map(item => item);

src/views/home/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="homeBox" style="background-color: #07274d;">
     <!-- 头部 -->
-
     <Head></Head>
     <!-- 左边 -->
     <div class="home-aside asideL">
@@ -59,15 +58,13 @@
     </div>
     <!-- 中间 -->
     <div class="home-center">
-      <div class="middle-top">
+      <div class="middle-top"><Yszs /></div>
-        <Yszs />
-      </div>
       <div class="flex middle-bottom mt10">
         <div style="width: 30px;position: absolute;z-index: 100;left: 0;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
           <el-icon :size="20" v-if="ispLayBack" @click="closeLayBack">
             <Bell />
           </el-icon>
-          <el-icon :size="20" v-else @click="openLayBack">
+          <el-icon :size="20" v-else @click="ispLayBack=true">
             <MuteNotification />
           </el-icon>
         </div>
@@ -124,7 +121,6 @@
         <Bkcz></Bkcz>
       </div>
     </div>
-
   </div>
   <TestDiv />
   <!-- 左边弹窗 -->
@@ -160,7 +156,7 @@ import WarningDistrict from './model/WarningDistrict.vue'
 import WarningPoints from './model/warningPoints.vue'
 import { getItem, setItem } from "@/utils/storage";
 import emitter from "@/utils/eventBus.js";
-import { bm, centralPoint } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
+import { bm } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
 import Judgment from './model/judgment.vue'
 import { tbYjxxGetList } from '@/api/zdr.js'
 import GeneralWindow from './model/generalWindow.vue'
@@ -171,12 +167,21 @@ import MyCase from './model/myCase.vue'
 import audioPlayer from '@/utils/audioPlayer'
 import TestDiv from "@/components/common/TestDiv.vue";
 const { proxy } = getCurrentInstance();
-const { D_BZ_JQDJ } = proxy.$dict('D_BZ_JQDJ')
 const modelWarning = ref(true)
 const modelQbsb = ref(true)
 const searchText = ref('')
 const peoDialogRef = ref()
 const showSeatch = ref(false)
+const ispLayBack = ref(true)//播放音频
+const indexNum = ref(0) //当前展示的气泡框
+const showNotification = ref(false) //是否自动展开提示
+const allDep = ref([]) //所有部门
+const bnTimer = ref(null)
+const popupTimer = ref(null)
+const timing = ref(true)
+const reversalPushShow = ref(true)// 情报翻转
+const reversalShow = ref(true)// 论坛翻转
+
 const changeXzqh = (val, trg) => {
   setTimeout(() => {
     // 先移除已有的边界
@@ -264,10 +269,6 @@ const getDepId = () => {
   }
 }
 
-const indexNum = ref(0) //当前展示的气泡框
-const showNotification = ref(false) //是否自动展开提示
-const allDep = ref([]) //所有部门
-
 const handleOpenNotification = () => {
   clearInterval(popupTimer.value)
   showNotification.value = !showNotification.value;
@@ -282,6 +283,7 @@ const handleOpenNotification = () => {
     startPopupLoop()
   }
 }
+
 const makerCenter = () => {
   const dw = require("@/assets/point/dingwei.png")
   qcckGet({}, '/mosty-gsxt/lzJcjPjdb/selectCountNew').then(res => {
@@ -291,20 +293,12 @@ const makerCenter = () => {
   })
 
 }
-//播放音频
-const ispLayBack = ref(true)
-
-// 打开播放
-const openLayBack = () => {
-  ispLayBack.value = true
-}
 
 // 关闭播放
 const closeLayBack = () => {
   ispLayBack.value = false
   audioPlayer.pause()
 }
-
 // 初始化音频播放器
 const initAudioPlayer = () => {
   // 使用工具类初始化音频播放器
@@ -320,8 +314,6 @@ const initAudioPlayer = () => {
       console.error('初始化音频播放器失败:', error);
     })
 }
-const bnTimer = ref(null)
-const popupTimer = ref(null)
 
 const startPopupLoop = () => {
   clearInterval(popupTimer.value)
@@ -333,6 +325,62 @@ const startPopupLoop = () => {
     }
   }, 10000)
 }
+
+// 搜索
+const handleSearch = () => {
+  if(!searchText.value) return proxy.$message.warning('请输入身份证号');
+  qcckPost({ rysfzh: searchText.value },'/mosty-gsxt/tbYjxx/getPageAllList').then(res => {
+    peoDialogRef.value.init(res.records || [])
+  })
+}
+
+// 布控预警上图
+const getTbYjxxGetList = () => {
+  // 设置为当天时间范围：00:00:00 到 23:59:59
+  const today = new Date();
+  const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).getTime();
+  const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).getTime();
+  const promes = { startTime:timeValidate(startTime), endTime:timeValidate(endTime), }
+  tbYjxxGetList(promes).then(res => {
+    const coords = res.map(item => {
+      return { id: item.id, jd: item.jd, wd: item.wd, yjtp: item.yjTp, yjnr: item.yjNr, yjLx: item.yjlx, yjlx: '01', yjsj: item.yjSj, rysfzh: item.yjRysfzh, ryxm: item.yjRyxm }
+    })
+    const icon = require("@/assets/point/yj.png")
+    emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
+  })
+}
+
+const reversalPush = () => {
+  reversalPushShow.value = !reversalPushShow.value
+  // 移除clearInterval调用，避免定时器被清除
+}
+
+const reversal= () => {
+  reversalShow.value = !reversalShow.value
+  // 移除clearInterval调用，避免定时器被清除
+}
+
+// 鼠标移入
+const mouseEnter = () => {
+  clearInterval(timing.value)
+}
+
+// 鼠标移出
+const mouseLeave = () => {
+  // 清除可能存在的旧定时器，避免多个定时器同时运行
+  clearInterval(timing.value)
+  // 设置为5秒自动切换，更容易测试效果
+  timing.value = setInterval(() => {
+    reversalPush()
+    reversal()
+    changeModel()
+  }, 30000)
+}
+
+function changeModel(){
+  modelWarning.value = !modelWarning.value
+}
+
 // 组件挂载时初始化音频播放器
 onMounted(() => {
   getDepId()
@@ -345,7 +393,6 @@ onMounted(() => {
   getTbYjxxGetList()
   // 初始化音频播放器
   initAudioPlayer()
-
   // 监听音频播放事件，获取WebSocket消息数据
   emitter.on("openYp", (newsDate) => {
     // 使用工具类播放音频，自动处理静音切换
@@ -379,96 +426,17 @@ onMounted(() => {
   })
 })
 
-// 搜索
-const handleSearch = () => {
-  if(!searchText.value){
-    proxy.$message.warning('请输入身份证号')
-  }else{
-    qcckPost({ rysfzh: searchText.value },'/mosty-gsxt/tbYjxx/getPageAllList').then(res => {
-      peoDialogRef.value.init(res.records || [])
-    })
-  }
-}
-
-// 布控预警上图
-const getTbYjxxGetList = () => {
-  // 设置为当天时间范围：00:00:00 到 23:59:59
-  const today = new Date();
-  const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).getTime();
-  const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).getTime();
-  const promes = {
-    startTime:timeValidate(startTime),
-    endTime:timeValidate(endTime),
-  }
-  tbYjxxGetList(promes).then(res => {
-    const coords = res.map(item => {
-      return {
-        id: item.id,
-        jd: item.jd,
-        wd: item.wd,
-        yjtp: item.yjTp,
-        yjnr: item.yjNr,
-        yjLx: item.yjlx,
-        yjlx: '01',
-        yjsj: item.yjSj,
-        rysfzh: item.yjRysfzh,
-        ryxm: item.yjRyxm,
-      }
-    })
-    const icon = require("@/assets/point/yj.png")
-    emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
-  })
-}
-
-let timing = ref(true)
-// 情报翻转
-const reversalPushShow = ref(true)
-const reversalPush = () => {
-  reversalPushShow.value = !reversalPushShow.value
-  // 移除clearInterval调用，避免定时器被清除
-}
-// 论坛翻转
-const reversalShow = ref(true)
-const reversal= () => {
-  reversalShow.value = !reversalShow.value
-  // 移除clearInterval调用，避免定时器被清除
-}
-
-// 鼠标移入
-const mouseEnter = () => {
-  clearInterval(timing.value)
-}
-// 鼠标移出
-const mouseLeave = () => {
-  // 清除可能存在的旧定时器，避免多个定时器同时运行
-  clearInterval(timing.value)
-  // 设置为5秒自动切换，更容易测试效果
-  timing.value = setInterval(() => {
-    reversalPush()
-    reversal()
-    changeModel()
-  }, 30000)
-}
-
-function changeModel(){
-  modelWarning.value = !modelWarning.value
-}
 onUnmounted(() => {
   clearInterval(timing.value)
   clearInterval(bnTimer.value)
   clearInterval(popupTimer.value)
   // 组件卸载时停止音频播放并释放资源
-  if (audioPlayer) {
+  if (audioPlayer) audioPlayer.destroy();
-    audioPlayer.destroy()
-  }
 })
-
-
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/css/homeScreen.scss";
-
 .fxq {
   border-radius: 35px;
   width: 35px;
@@ -477,7 +445,6 @@ onUnmounted(() => {
   transform-origin: left center;
   overflow: hidden;
   margin-bottom: 10px;
-
   .icon {
     display: flex;
     align-items: center;
@@ -502,32 +469,24 @@ onUnmounted(() => {
     }
   }
 }
-
 .fxq2 {
   background-color: #9d88f9;
 }
-
 .fxq1:hover {
   width: 120px;
 }
-
 .fxq2:hover {
   width: 120px;
-
-  // background-color: red;
 }
-
 .fxq3:hover {
   width: 120px;
 }
-
 ::v-deep .badge-top-left .el-badge__content {
   top: 0;
   right: auto;
   left: -10px;
   transform: translateY(-50%) translateX(-50%);
 }
-
 .badge-content {
   display: flex;
   flex-direction: column;
@@ -538,11 +497,9 @@ onUnmounted(() => {
   min-height: 45px;
   /* 确保收缩时有足够空间显示第一个图标 */
 }
-
 .badge-content:not(.expanded) {
   max-height: 45px;
 }
-
 /* 收缩时只显示第一个图标，隐藏其他内容 */
 .badge-content:not(.expanded)> :not(:first-child) {
   opacity: 0;
@@ -589,7 +546,6 @@ onUnmounted(() => {
 .flip-wrapper {
   position: relative;
   width: 100%;
-  // height: calc(100%/3 - 8px);
   height: 100%;
   backface-visibility: hidden;
   perspective: 1000px;