<template>
  <div class="main">
    <div v-if="showTooltip" class="tooltip">
      <div class="tooltip-containner">
        <img src="../assets/images/mess/key.png" alt="">
        <div class="tooltip-containner-data">
          <li><img :src="currentItem.img" alt="" style="max-width: 100%; height: auto;"></li>
          <li><img src="../assets/images/logo/point.png" alt="">最初首发者：&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
          <li><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter }}</li>
          <li><img src="../assets/images/logo/point.png" alt="">锚点用户{{ currentItem.keyuser }}</li>
          <li><img src="../assets/images/logo/point.png" alt="">积极转发者：&nbsp;&nbsp;&nbsp;{{ currentItem.switcher }}</li>
        </div>
        <img src="../assets/images/logo/cancel.png" alt=""
          style="float: right;margin-right: 10px;margin-top: -160px;cursor: pointer;" @click="showTooltip = false">
      </div>
    </div>
    <header class="header">
      <div class="time">
        <img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
        <div class="realtime-clock" style="position: absolute; top: 20px; right:100px; color: #1EA0FD; font-family: LCD2; font-size: 20px;">
        {{ currentTime }}
      </div>
      </div>
    </header>
    <div class="search">
      <!-- 使用 el-autocomplete 组件替换原输入框 -->
      <input type="text" placeholder="南海争端系列舆情事件" style="
          width:400px;
          height: 36px;
          margin-left: 36px;
          margin-top: 6px;
          border: none;
          background-image: none;
          background-color: transparent;
          outline: none;
          color: #FFFFFF;
          font-family: OPPOSans;
          font-weight: 300;
          font-size: 18px;
        " v-model="inputValue" @input="handleInput">
      <ul v-if="suggestions.length > 0" class="suggestions">
        <li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
          {{ item.value }}
        </li>
      </ul>
      <button class="search-button" @click="handleSearch">
        <img src="../assets/images/logo/search.png" alt="" style="width: 36px; display: block;">
      </button>

    </div>
    <div class="container-wrapper">
      <div class="left-container">
        <div class="containner1">
          <img src="../assets/images/head/tuijian.png" alt="" style="margin-top: -3px;">
          <div class="suggestion">
            <div class="type-selector">
              <!-- 添加四个按钮 -->
              <button @click="switchCategory('全部')" :class="{ active: currentCategory === '全部' }">全部</button>
              <button @click="switchCategory('新闻媒体')" :class="{ active: currentCategory === '新闻媒体' }">新闻媒体</button>
              <button @click="switchCategory('自媒体')" :class="{ active: currentCategory === '自媒体' }">自媒体</button>
              <button @click="switchCategory('政府官号')" :class="{ active: currentCategory === '政府官号' }">政府官号</button>
            </div>
            <div class="suggestion-containner">
              <ul>
                <li v-for="item in filteredData" :key="item.id">
                  <!-- 显示用户头像 -->
                  <img :src="item.avatar">
                  <!-- 显示其他信息 -->
                  <div class="span-data">
                    <span class="span-1">{{ item.name }}</span>
                    <span class="span-2">粉丝数：&nbsp;{{ item.number }}</span>
                    <span class="span-3">推荐监控频率</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="containner2">
          <img src="../assets/images/head/xinxi.png" alt="" style="margin-top: -3px;">
          <div class="containner2-alldata">
            <div class="containner2-data">
              <li><img src="../assets/images/logo/point.png" alt="">锚点数量：&nbsp;&nbsp;&nbsp;{{ currentData.anchorCount }}
              </li>
              <li><img src="../assets/images/logo/point.png" alt="">平均发帖频率：{{ currentData.postFrequency }}</li>
              <li><img src="../assets/images/logo/point.png" alt="">锚点画像分布</li>
            </div>
            <div class="containner2-range">
              <li><img src="../assets/images/logo/point.png" alt="">平均粉丝数量：&nbsp;&nbsp;&nbsp;{{ currentData.fansCount }}
              </li>
              <li><img src="../assets/images/logo/point.png" alt="">平均参与互动数：&nbsp;{{ currentData.interactionCount }}
              </li>
            </div>
          </div>
          <div class="intime">
            <img src="../assets/images/percent/intime.png" alt="" style="margin-left:30px;margin-top: 30px;">
            <img src="../assets/images/percent/intime-data.png " style="margin-left:30px;margin-bottom: 10px;">
            <img src="../assets/images/logo/xingwei.png" alt="" style="margin-left:30px;margin-top: 30px;">
            <img src="../assets/images/logo/xingwei-data.png" style="margin-left:30px;margin-bottom: 30px;">
          </div>
        </div>
      </div>
      <div class="right-container">
        <div class="containner3">
          <img src="../assets/images/head/events.png" alt="" style="margin-top: -3px;">
          <div class="focus-events">
            <div class="title-list">
              <transition name="fade" mode="out-in">
                <div :key="currentDataSetIndex" class="title-list">
                  <!-- 只有当有数据时才渲染列表 -->
                  <div v-if="currentDataSet.length > 0" v-for="item in currentDataSet" :key="item.id"
                    @click="selectItem(item)" class="title-item">
                    <img :src="item.beforeimg" alt="" class="before-img">
                    {{ item.title }}
                    <img :src="item.backimg" alt="" style="width: 50px;">
                  </div>
                  <!-- 初始无数据时显示空状态 -->
                  <div v-else class="empty-state">
                    <!-- 可以添加空状态提示或留空 -->
                  </div>
                </div>
              </transition>
            </div>
          </div>
          <div class="containner3-img">
            <div id="main" style="width: 100%;height:230px;"></div>
          </div>
        </div>
        <div class="containner4">
          <img src="../assets/images/head/jiankong.png" alt="" style="margin-top: -3px;">
          <ScrollContainer :data="visibleData" :scroll-speed="40" container-class="containner4-alldata" />
        </div>
      </div>
    </div>
    <div class="containner5">
      <IndexView />
    </div>
    <div class="containner6">
      <div class="containner6-data">
        <img src="../assets/images/main-6/mao.png" alt="" style="margin-top: 20px; margin-left: 100px;">
        <p class="containner6-font1">500</p>
        <p class="containner6-font2">锚点数量</p>
      </div>
      <div class="containner6-data" style="margin-top: -180px;margin-left: 200px;">
        <img src="../assets/images/main-6/jiankong.png" alt="" style="margin-top: 10px; margin-left: 100px;">
        <p class="containner6-font1">36</p>
        <p class="containner6-font2">已监控锚点</p>
      </div>
      <div class="containner6-data" style="margin-top: -210px;margin-left: 400px;">
        <img src="../assets/images/main-6/pre.png" alt="" style="margin-top: 10px; margin-left: 100px;">
        <p class="containner6-font1">{{ counters.activeWarning }}</p>
        <p class="containner6-font2">活跃预警事件</p>
      </div>
      <div class="containner6-data" style="margin-top: -200px;margin-left: 600px;">
        <img src="../assets/images/main-6/highrisk.png" alt="" style="margin-top: 10px; margin-left: 100px;">
        <p class="containner6-font1">{{ counters.highRisk }}</p>
        <p class="containner6-font2">高风险事件</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import IndexView from './App.vue';
import ScrollContainer from '@/components/ScrollContainer.vue';
import * as echarts from 'echarts';
let myChart = null;
const router = useRouter();
const nodes = [{}, {}];
const links = [];
const graphData = { nodes, links }

// 实时时钟实现
const currentTime = ref('');

// 格式化时间为 HH:MM:SS 格式
const formatTime = () => {
  const now = new Date();
  return now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
};

const handleSearch = () => {
  if (inputValue.value === '南海争端系列舆情事件') {
    router.push('/Main');
  } else {
    alert('请输入正确的事件类别关键词');
  }
};

const inputValue = ref('');
const suggestions = ref([]);

// 图片加载工具函数（带错误处理）
const getImageUrl = (path) => {
  try {
    const processedPath = path.replace('src/', '')
    console.log('处理后的图片路径:', processedPath) // 添加调试日志
    return new URL(processedPath, import.meta.url).href
  } catch (e) {
    console.error('图片加载错误:', path, e)
    return loadImage('src/assets/images/logo/default.png')
  }
}

const allOptions = [
  { value: '南海争端系列舆情事件', link: './Main' },
  { value: '美国大选系列舆情事件', link: '' },
  { value: '涉台系列舆情事件', link: '' },
  { value: '俄乌冲突系列舆情事件', link: '' },
  { value: '中美贸易战系列舆情事件', link: '' },
  { value: '全球供应链系列舆情事件', link: '' },
  { value: '虚拟货币系列舆情事件', link: '' },
  { value: '企业信用危机系列舆情事件', link: '' },
  { value: '金融市场动荡系列舆情事件', link: '' },
  { value: '校园暴力系列舆情事件', link: '' },
  { value: '食品安全系列舆情事件', link: '' },
  { value: '公共卫生系列舆情事件', link: '' },
  { value: '教育公平系列舆情事件', link: '' },
  { value: '劳资纠纷系列舆情事件', link: '' },
  { value: '科技进步系列舆情事件', link: '' },
];

const handleInput = () => {
  if (inputValue.value) {
    suggestions.value = allOptions.filter((item) =>
      item.value.toLowerCase().includes(inputValue.value.toLowerCase())
    );
    console.log('过滤后的建议项:', suggestions.value);
  } else {
    suggestions.value = [];
  }
};

const mediaData = [
  { id: 1, type: '新闻媒体', name: '新浪军事', avatar: 'src/views/user/xinlang.png', number: '5005.8w' },
  { id: 2, type: '新闻媒体', name: '环球时报', avatar: 'src/views/user/huanqiu.png', number: '3126.1w' },
  { id: 3, type: '自媒体', name: '大侠啊啊啊啊', avatar: 'src/views/user/daxia.png', number: '288' },
  { id: 4, type: '自媒体', name: '外贸发布BBS', avatar: 'src/views/user/bbs.png', number: '1.3w' },
  { id: 5, type: '自媒体', name: '空天砺剑', avatar: 'src/views/user/kongtian.png', number: '516.5w' },
  { id: 6, type: '自媒体', name: '爱锤盾海桃-霆恩启副', avatar: 'src/views/user/ai.png', number: '223' },
  { id: 7, type: '自媒体', name: '苍龙飞天79', avatar: 'src/views/user/79.png', number: '516.6w' },
  { id: 8, type: '自媒体', name: '盖世英雄玉椒龙', avatar: 'src/views/user/gaishi.png', number: '42w' },
  { id: 9, type: '自媒体', name: '十八子91221', avatar: 'src/views/user/91221.png', number: '1947' },
  { id: 10, type: '自媒体', name: '江夏云飞', avatar: 'src/views/user/jiang.png', number: '1629' },
  { id: 11, type: '自媒体', name: '唐宁20150903', avatar: 'src/views/user/tang.png', number: '25' },
  { id: 12, type: '自媒体', name: '钻石狗Boss', avatar: 'src/views/user/bbs.png', number: '1184' },
  { id: 13, type: '自媒体', name: '乐之567', avatar: 'src/views/user/567.png', number: '266' },
  { id: 14, type: '自媒体', name: '地瓜熊老六', avatar: 'src/views/user/lao.png', number: '667.5w' },
  { id: 15, type: '自媒体', name: 'CGTN记者团', avatar: 'src/views/user/cgtn.png', number: '322.1w' },
  { id: 16, type: '自媒体', name: '钱局长本人', avatar: 'src/views/user/qian.png', number: '40万' },
  { id: 17, type: '自媒体', name: '肥_谍_gg', avatar: 'src/views/user/gg.png', number: '245' },
  { id: 18, type: '自媒体', name: '深海一万米', avatar: 'src/views/user/shenhai.png', number: '126w' },
  { id: 19, type: '政府官号', name: '中国海警', avatar: 'src/views/user/haijing.png', number: '80.9w' },
  { id: 20, type: '政府官号', name: '平安泸县', avatar: 'src/views/user/luxian.png', number: '3.9w' },
];
const categoryData = {
  '全部': {
    anchorCount: 36,
    postFrequency: '5.1天/次',
    fansCount: '1.7w',
    interactionCount: 0
  },
  '自媒体': {
    anchorCount: 16,
    postFrequency: '4.3天/次',
    fansCount: '117.8w',
    interactionCount: 20
  },
  '政府官号': {
    anchorCount: 2,
    postFrequency: '11.2天/次',
    fansCount: '42.4w',
    interactionCount: 2
  },
  '新闻媒体': {
    anchorCount: 2,
    postFrequency: '14.8天/次',
    fansCount: '4065.5w',
    interactionCount: 0
  }
};
// 当前显示的分类
const currentCategory = ref('全部');
// 当前显示的数据
const currentData = computed(() => categoryData[currentCategory.value]);
// 计算过滤后的数据
const filteredData = computed(() => {
  if (currentCategory.value === '全部') {
    return mediaData;
  } else {
    return mediaData.filter(item => item.type === currentCategory.value);
  }
});
// 切换分类的方法
const switchCategory = (category) => {
  currentCategory.value = category;
};
const showTooltip = ref(false);

const allData = Array.from({ length: 5 }, (_, index) => ({ id: index, showTemporaryStyle: false }));
const currentIndex = ref(0);

const visibleData = ref([
  {
    avatar: './src/views/user/boss.png',
    commenter: '钻石狗Boss',
    comment: '干的漂亮，赞一个！',
    time: '2024-06-19 16:03:26'
  },
  {
    avatar: './src/views/user/ai.png',
    commenter: '爱锤盾海桃-霆恩启副',
    comment: '转发微博',
    time: '2024-06-20 18:25:02 '
  },
  {
    avatar: './src/views/user/kongtian.png',
    commenter: '空天砺剑',
    comment: '#中国海警首次登检菲律宾运补船只# 有了第一次就会有第二次第三次，以后登检就形成常态了，一步...   ',
    time: '2024-06-19 18:15:53'
  },
  {
    avatar: './src/views/user/luxian.png',
    commenter: '平安泸县 ',
    comment: '@金台法院 ',
    time: '2024-06-21 11:20:01 '
  },
  {
    avatar: './src/views/user/xinlang.png',
    commenter: '新浪军事',
    comment: '中国海警从菲方夺回被盗渔网# 【独家视频！菲方偷盗中国渔民渔网，中国海警夺回归还】中国海警...',
    time: '2024-06-20 17:31:07'
  },
  {
    avatar: './src/views/user/79.png',
    commenter: '苍龙飞天79',
    comment: '#菲律宾##中方回应菲称我海警挥舞刀具##热门视频# 视频为霸占咱中业岛的菲猴们，武器大炮已...',
    time: '2024-06-27 12:54:00'
  },



  {
    avatar: './src/views/user/79.png',
    commenter: '苍龙飞天79',
    comment: '转发微博',
    time: '2024-06-20 23:09:47'
  },
  {
    avatar: './src/views/user/xinlang.png',
    commenter: '新浪军事',
    comment: '#中国海警首提对菲船只登临检查#，如何理解这一新表述】6月17日，中国海警依法对非法闯入我... ',
    time: '2024-06-20 13:08:44'
  },
  {
    avatar: './src/views/user/xinlang.png',
    commenter: '新浪军事',
    comment: '#中国海警首提对菲船只登临检查#，如何理解这一新表述】6月17日，中国海警依法对非法闯入我... ',
    time: '2024-06-20 13:08:44'
  },
  {
    avatar: './src/views/user/xinlang.png',
    commenter: '新浪军事',
    comment: '#外交部回应菲军方声称中国海警发射催泪弹#【菲军方声称中国海警发射催泪弹、破坏设备，外交部：... ',
    time: '2024-06-20 16:14:58'
  },
  {
    avatar: './src/views/user/huanqiu.png',
    commenter: '环球时报',
    comment: ' #中国海警从菲方缴回被盗渔网# 【独家视频！菲方偷盗中国渔民渔网，中国海警夺回归还】#中国海... ',
    time: '2024-06-20 17:13:31'
  },
  {
    avatar: './src/views/user/huanqiu.png',
    commenter: '环球时报',
    comment: ' #中国海警从菲方缴回被盗渔网# 【独家视频！菲方偷盗中国渔民渔网，中国海警夺回归还】#中国海... ',
    time: '2024-06-20 17:13:31'
  },
  {
    avatar: './src/views/user/xinlang.png',
    commenter: '新浪军事',
    comment: '#菲方非法坐滩军舰航拍影像公开#【独家影像！#中国仁爱礁高清航拍画面发布#，菲非法“坐滩”军... ',
    time: '2024-06-20 17:13:31'
  },
  {
    avatar: './src/views/user/kongtian.png',
    commenter: '空天砺剑',
    comment: ' #中国海警夺回菲方盗窃赃物# 你偷，我就有理由上你的破船，只要上了船，我干什么就由不得你了，... ',
    time: '2024-06-20 17:13:31'
  },
  {
    avatar: './src/views/user/bbs.png',
    commenter: '外贸发布BBS',
    comment: ' 我海警耍猴还是有点技巧的！#菲媒称中国万吨大驱驶过菲沿岸# #中国海警夺回菲方盗窃赃物#',
    time: '2024-06-20 17:13:31'
  },

  {
    avatar: './src/views/user/bbs.png',
    commenter: ' 外贸发布BBS',
    comment: '特种部队丢手指，普通部队丢胳膊！',
    time: '2024-06-20 18:25:02 '
  },
  {
    avatar: './src/views/user/boss.png',
    commenter: ' 钻石狗Boss',
    comment: '打的就是他精锐……',
    time: '2024-06-20 18:25:02 '
  }, {
    avatar: './src/views/user/boss.png',
    commenter: ' 钻石狗Boss',
    comment: '别怂，叫你的“精锐”接着来……',
    time: '2024-06-20 18:25:02 '
  }, {
    avatar: './src/views/user/bbs.png',
    commenter: ' 外贸发布BBS',
    comment: '特种部队丢手指，普通部队丢胳膊！#菲自曝被中国海警缴枪的是顶级特种部队#   ',
    time: '2024-06-20 18:25:02 '
  }, {
    avatar: './src/views/user/gg.png',
    commenter: '  肥_谍_gg',
    comment: '//@帝吧官微:拿着自拍杆邀请菲律宾顶级特种部队合影而已，你们看那些平常喜欢聒噪的公知大v都...    ',
    time: '2024-06-20 18:25:02 '
  }, {
    avatar: './src/views/user/tang.png',
    commenter: ' 唐宁20150903',
    comment: '转发微博',
    time: '2024-06-24 22:53:02 '
  }, {
    avatar: './src/views/user/boss.png',
    commenter: ' 钻石狗Boss',
    comment: '“金手指” ',
    time: '2024-06-20 18:25:02 '
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: ' 新浪军事',
    comment: '【#菲自曝被中国海警缴枪的是顶级特种部队#】近日，菲律宾船只侵闯我仁爱礁，中国海警对其进行登...       ',
    time: '2024-06-23 11:05:46  '
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: ' 新浪军事',
    comment: '#中国海警将菲非法所得渔网送归中国渔民#】据新华社6月21日报道，近期，在中国仁爱礁及其附...  ',
    time: '2024-06-23 13:07:47 '
  }, {
    avatar: './src/views/user/kongtian.png',
    commenter: '  空天砺剑',
    comment: '#菲自曝被中国海警缴枪的是顶级特种部队# 菲律宾：我派出的可是精锐部队 中国海警：就这？老子... ',
    time: '2024-06-23 14:05:32 '
  }, {
    avatar: './src/views/user/qian.png',
    commenter: ' 钱局长本人',
    comment: '菲律宾特种部队被中国的警察叔叔缴了械，断指士兵获奖章，俄罗斯网友：这是我今年听过最搞笑的笑话...   ',
    time: '2024-06-23 14:46:29'
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: '  新浪军事',
    comment: '#台退将分析中菲仁爱礁冲突#：解放军"关门打狗" 菲律宾敢动就是团灭（海峡新干线）#菲自曝被...',
    time: '2024-06-23 14:55:23  '
  }, {
    avatar: './src/views/user/bbs.png',
    commenter: ' 外贸发布BBS',
    comment: '特种部队丢手指，普通部队丢胳膊！#菲自曝被中国海警缴枪的是顶级特种部队# ',
    time: '2024-06-23 14:56:42  '
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: '新浪军事',
    comment: ' #菲自曝被中国海警缴枪的是顶级特种部队# 近日，菲律宾船只侵闯我仁爱礁，中国海警对其进行登临...   ',
    time: '2024-06-23 15:55:24 '
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: '   新浪军事',
    comment: ' #驻越使馆驳斥美高官越南期间肆意攻击中国#【美高官访越南期间就南海问题肆意攻击中国',
    time: '2024-06-23 16:12:54 '
  }, {
    avatar: './src/views/user/bbs.png',
    commenter: ' 外贸发布BBS',
    comment: '#菲自曝被中国海警缴枪的是顶级特种部队# 菲律宾特种部队就这？怪不得现在菲律宾网友各种找补洗白  ',
    time: '盖世英雄玉椒龙'
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: ' 新浪军事',
    comment: ' #菲总统最新言论话里有话#【警惕！菲总统最新言论，话里有话】什么叫做一意孤行地碰瓷？菲律宾方...',
    time: '2024-06-23 18:47:55  '
  }, {
    avatar: './src/views/user/xinlang.png',
    commenter: ' 新浪军事',
    comment: '【外媒：#菲律宾外长称希望与中国就南海问题进行对话#，以解决分歧】据路透社、《菲律宾星报》报... ',
    time: '2024-06-25 17:30:20'
  },

]);
// 时间切换
const tooltipDdata1 = [
  {
    id: '01-1',
    title: '#中国海警首次登检菲律宾运补船只#',
    comenter: '诗林一鬼16',
    switcher: '四泉-先生-郭辉',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main1.png',
    beforeimg: 'src/assets/images/logo/ruank1.png',
    backimg: 'src/assets/images/logo/high3.png'
  }
]
const tooltipDdata2 = [
  {
    id: '02-1',
    title: '#中国海警首次登检菲律宾运补船只#',
    comenter: '诗林一鬼16',
    switcher: '四泉-先生-郭辉',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main1.png',
    beforeimg: 'src/assets/images/logo/ruank1.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '03-2',
    title: '#中方回应菲称我海警挥舞刀具#',
    comenter: '黄龙检察',
    switcher: '枸杞菊花煮泡面',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main2.png',
    beforeimg: 'src/assets/images/logo/ruank2.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
]
const tooltipDdata3 = [
  {
    id: '03-1',
    title: '#中国海警首次登检菲律宾运补船只#',
    comenter: '诗林一鬼16',
    switcher: '四泉-先生-郭辉',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main1.png',
    beforeimg: 'src/assets/images/logo/ruank1.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '03-2',
    title: '#中方回应菲称我海警挥舞刀具#',
    comenter: '黄龙检察',
    switcher: '枸杞菊花煮泡面',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main2.png',
    beforeimg: 'src/assets/images/logo/ruank2.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '03-3',
    title: '#中国海警夺回菲方盗窃赃物#',
    comenter: '入山花露水',
    switcher: '入山花露水',
    earler: '新浪军事',
    keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
    img: 'src/assets/images/mess/main3.png',
    beforeimg: 'src/assets/images/logo/ruank3.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
]
const tooltipDdata4 = [
  {
    id: '04-1',
    title: '#中国海警首次登检菲律宾运补船只#',
    comenter: '诗林一鬼16',
    switcher: '四泉-先生-郭辉',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main1.png',
    beforeimg: 'src/assets/images/logo/ruank1.png',
    backimg: 'src/assets/images/logo/high2.png'
  },
  {
    id: '04-2',
    title: '#中方回应菲称我海警挥舞刀具#',
    comenter: '黄龙检察',
    switcher: '枸杞菊花煮泡面',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main2.png',
    beforeimg: 'src/assets/images/logo/ruank2.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '04-3',
    title: '#中国海警夺回菲方盗窃赃物#',
    comenter: '入山花露水',
    switcher: '入山花露水',
    earler: '新浪军事',
    keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
    img: 'src/assets/images/mess/main3.png',
    beforeimg: 'src/assets/images/logo/ruank3.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '04-4',
    title: '#菲自曝被中国海警缴枪的是顶级特种部队#',
    comenter: '端木舒林',
    switcher: '杨毅妻儿',
    earler: '白俄罗斯大宽',
    keyuser: '盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑',
    img: 'src/assets/images/mess/main4.png',
    beforeimg: 'src/assets/images/logo/ruank4.png',
    backimg: 'src/assets/images/logo/high4.png'
  },
]
const tooltipDdata5 = [
  {
    id: '05-1',
    title: '#中国海警首次登检菲律宾运补船只#',
    comenter: '诗林一鬼16',
    switcher: '四泉-先生-郭辉',
    earler: '玉渊谭天',
    keyuser: '爱锤盾海桃-霆恩启副,钻石狗Boss,空天砺剑',
    img: 'src/assets/images/mess/main1.png',
    beforeimg: 'src/assets/images/logo/ruank1.png',
    backimg: 'src/assets/images/logo/high1.png'
  },
  {
    id: '05-2',
    title: '#中方回应菲称我海警挥舞刀具#',
    comenter: '黄龙检察',
    switcher: '枸杞菊花煮泡面',
    earler: '白俄罗斯大宽',
    keyuser: '苍龙飞天79,平安泸县,新浪军事',
    img: 'src/assets/images/mess/main2.png',
    beforeimg: 'src/assets/images/logo/ruank2.png',
    backimg: 'src/assets/images/logo/high2.png'
  },
  {
    id: '05-3',
    title: '#中国海警夺回菲方盗窃赃物#',
    comenter: '入山花露水',
    switcher: '入山花露水',
    earler: '新浪军事',
    keyuser: '环球时报, 苍龙飞天79, 外贸发布BBS, 新浪军事, 空天砺剑',
    img: 'src/assets/images/mess/main3.png',
    beforeimg: 'src/assets/images/logo/ruank3.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '05-4',
    title: '#菲自曝被中国海警缴枪的是顶级特种部队#',
    comenter: '端木舒林',
    switcher: '杨毅妻儿',
    earler: '白俄罗斯大宽',
    keyuser: '盖世英雄玉椒龙, 肥_谍_gg, 钻石狗Boss, 外贸发布BBS, 新浪军事, 钱局长本人, 地瓜熊老六,唐宁20150903,空天砺剑',
    img: 'src/assets/images/mess/main4.png',
    beforeimg: 'src/assets/images/logo/ruank4.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
  {
    id: '05-5',
    title: '#菲律宾希望与中国就南海问题进行对话#',
    comenter: '美雨_12',
    switcher: '彼岸星光德尔塔',
    earler: '今日俄罗斯RT',
    keyuser: '新浪军事',
    img: 'src/assets/images/mess/main5.png',
    beforeimg: 'src/assets/images/logo/ruank5.png',
    backimg: 'src/assets/images/logo/high3.png'
  },
]
const dataSets = ref([tooltipDdata1, tooltipDdata2, tooltipDdata3, tooltipDdata4, tooltipDdata5]);
const currentDataSetIndex = ref(-1);
// 计算属性 - 当前显示的数据集
const currentDataSet = computed(() => {
  // 初始状态(-1)返回空数组，否则返回对应数据集
  return currentDataSetIndex.value === -1 ? [] : dataSets.value[currentDataSetIndex.value];
});
// 当前选中的项（默认为当前数据集第一项）
const currentItem = ref(currentDataSet.value[0]);


// 切换选中项的方法
const selectItem = (item) => {
  currentItem.value = item;
  showTooltip.value = true; // 点击时显示 tooltip
};

// 数据切换方法
const switchToNextDataSet = () => {
  currentDataSetIndex.value++;
  // 当数据索引超过最后一个数据集时重置
  if (currentDataSetIndex.value >= dataSets.value.length) {
    currentDataSetIndex.value = 0;
  }
};

// 活跃预警事件计数器 (6秒加1，到5停止)
const activeWarningCount = ref(0);
// 高风险事件计数器 (24秒后加1，再6秒后加1停止)
const highRiskCount = ref(0);
// 提取常量便于维护
const TIMER = {
  ACTIVE_WARNING_INTERVAL: 12000, // 活跃预警间隔(ms)
  ACTIVE_WARNING_MAX: 5,         // 活跃预警最大值
  HIGH_RISK_DELAY1: 48000,       // 高风险首次延迟(ms)
  HIGH_RISK_DELAY2: 12000,        // 高风险第二次延迟(ms)
  DATA_SWITCH_INTERVAL: 12000,   // 数据切换间隔(ms)
  DATA_SWITCH_DURATION: 60000    // 数据切换总时长(ms)
};

// 计数器状态管理
const counters = ref({
  activeWarning: 0,
  highRisk: 0
});

// 定时器统一管理
const timers = [];

// 活跃预警事件计数逻辑
const startActiveWarningTimer = () => {
  const timer = setInterval(() => {
    if (counters.value.activeWarning < TIMER.ACTIVE_WARNING_MAX) {
      counters.value.activeWarning++;
    } else {
      clearInterval(timer);
    }
  }, TIMER.ACTIVE_WARNING_INTERVAL);
  timers.push(timer);
};

// 高风险事件计数逻辑
const startHighRiskTimer = () => {
  // 24秒后第一次加1
  const timer1 = setTimeout(() => {
    counters.value.highRisk++;

    // 再加6秒后第二次加1
    const timer2 = setTimeout(() => {
      counters.value.highRisk++;
    }, TIMER.HIGH_RISK_DELAY2);
    timers.push(timer2);
  }, TIMER.HIGH_RISK_DELAY1);
  timers.push(timer1);
};

// 数据切换逻辑
const startDataSwitchTimer = () => {
  const interval = setInterval(switchToNextDataSet, TIMER.DATA_SWITCH_INTERVAL);
  const timeout = setTimeout(() => {
    clearInterval(interval);
    console.log('数据切换已在1分钟后终止');
  }, TIMER.DATA_SWITCH_DURATION);
  timers.push(interval, timeout);
};

onMounted(() => {
  // ... 现有代码 ...
  startActiveWarningTimer();
  startHighRiskTimer();
  startDataSwitchTimer();

 // 初始化时钟并每秒更新
 currentTime.value = formatTime();
  const clockTimer = setInterval(() => {
    currentTime.value = formatTime();
  }, 1000);
  
  // 将时钟定时器添加到现有定时器管理数组
  timers.push(clockTimer);

  const chartDom = document.getElementById('main');
  if (chartDom) {
    myChart = echarts.init(chartDom);
    // Set option here
    const option = {
      title: {
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['活跃预警事件', '高风险事件']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,//坐标轴两边留白
        data: ['1-4', '2.8', '3-6', '4-7', '5-8', '5-29', '6-20'],
        axisLabel: { //坐标轴刻度标签的相关设置。
          interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
          formatter: function (params) {
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = 4;  //一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }

            } else {
              newParamsName = params;
            }
            return newParamsName
          },
          //rotate:50,
        },
        axisTick: {//坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {//坐标轴轴线相关设置
          lineStyle: {
            color: '#E5E9ED',
            // opacity:0.2
          }
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
          show: true,
          lineStyle: {
            color: '#E5E9ED',
            // 	opacity:0.1
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12,
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E9ED',
              // 	opacity:0.1
            }
          }

        }
      ],
      series: [
        {
          name: '活跃预警事件',
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3A84FF',
              lineStyle: {
                color: "#3A84FF",
                width: 1
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(58,132,255,0)'
                }, {
                  offset: 1,
                  color: 'rgba(58,132,255,0.35)'
                }]),
              }
            }
          },
          data: [0, 1, 2, 3, 4, 5, 5]
        },
        {
          name: '高风险事件',
          type: 'line',
          itemStyle: {
            normal: {
              color: 'rgba(255,80,124,1)',
              lineStyle: {
                color: "rgba(255,80,124,1)",
                width: 1
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(255,80,124,0)'
                }, {
                  offset: 1,
                  color: 'rgba(255,80,124,0.35)'
                }]),
              }
            }
          },
          data: [0, 0, 0, 0, 1, 2, 2]
        }
      ]
    };

    myChart.setOption(option);
  }
});

onUnmounted(() => {
  // 统一清理所有定时器
  // 设置每6秒切换一次数据
  const dataSwitchTimer = setInterval(switchToNextDataSet, 6000);
  timers.push(dataSwitchTimer);
  timers.forEach(timer => {
    if (timer) {
      clearInterval(timer);
      clearTimeout(timer);
    }
    if (myChart) {
      myChart.dispose();
      myChart = null;
    }
  });
});
</script>
<style scoped>
#main {
  width: 100% !important;
  height: 100% !important;
}

.main {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #050B23;
}

.header {
  height: 140px;
  background-image: url('../assets/images/head/main.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 1;
}



.time span {
  font-family: LCD2;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 9.5%;
  color: #1EA0FD;
  float: right;
  margin-right: 90px;
  margin-top: -148px;
}

.search {
  width: 530px;
  height: 48px;
  margin-left: 695px;
  margin-top: -50px;
  border-radius: 58px;
  border-width: 1px;
  background-image: linear-gradient(to top, #051634, #081D40, #04285C);
  border: 1px solid;
  border-image: linear-gradient(to right, #214A8E, #214A8E00);
  position: relative;
  z-index: 999;
}

.search-button {
  float: right;
  border: none;
  padding: 0;
  background: transparent;
  width: auto;
  height: auto;
  margin-top: 6px;
  margin-right: 6px;
  cursor: pointer;
}

.suggestions {
  position: absolute;
  width: 400px;
  margin-left: 36px;
  padding: 0;
  list-style-type: none;
  color: rgb(49, 52, 54);
  background-color: rgba(222, 241, 250, 0.9);
  border: 1px solid;
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestions li {
  padding: 8px;
  cursor: pointer;
}

.suggestions li:hover {
  background-color: rgba(186, 230, 250, 0.9);
}

.containner1 {
  width: 457px;
  height: 545px;
  margin-left: 16px;
  margin-top: -60px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.containner2 {
  width: 457px;
  height: 394px;
  margin-left: 16px;
  margin-top: 30px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.containner3 {
  width: 457px;
  height: 545px;
  display: flexbox;
  float: right;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.data-container {
  width: 457px;
  height: 545px;
}

.containner4 {
  width: 457px;
  height: 394px;
  margin-left: 16px;
  margin-top: 30px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.temporary-style {
  background-image: linear-gradient(to right, #003F7D, #5DB9FF7A);
  border-image: linear-gradient(to bottom, #95CEFF, #3AA1F833);
  border: 0px solid;
  border-radius: 3px;
  cursor: pointer;
}

.containner5 {
  width: 850px;
  height: 682px;
  margin-left: 530px;
  margin-top: -900px;
  margin-bottom: 200px;
}

.hiden {
  width: 1410px;
  height: 900px;
  margin-top: -900px;
  margin-left: 280px;
  flex-direction: column;
  display: flex;
}

/* 添加一个容器来包裹 containner1 - 4 */
.container-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: space-between;
  margin-top: -50px;

}

.left-container {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  gap: 30px;
  margin-left: 16px;
  margin-bottom: 15px;
}

.right-container {
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 15px;
}

.containner1,
.containner2,
.containner3,
.containner4 {
  margin: 0;
  /* 移除原有的外边距设置 */
}

/* 修改模板结构 */
.type-selector {
  margin-left: 110px;
  margin-top: 10px;
}

.suggestion button {
  height: 24px;
  margin-left: 0px;
  font-family: OPPOSans;
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  text-align: center;
  cursor: pointer;
  background-color: #04142166;
  color: #E1F4FF;
  border: 1px solid #1C588F;
  border-radius: 0px;
  /* 确保默认没有圆角 */
  display: inline-block;
  /* 让按钮横向排列 */
  vertical-align: middle;
  /* 垂直居中对齐 */
}

/* 第一个按钮添加左圆角 */
.suggestion button:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* 最后一个按钮添加右圆角 */
.suggestion button:nth-child(4) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 激活按钮样式 */
.suggestion button.active {
  background-color: #236291;
}

.suggestion button:hover {
  background-color: #236291;
}

.suggestion ul {
  margin-left: 10px;
  width: 400px;
  height: 480px;
  list-style-type: none;
  padding: 0;
}

.suggestion li {
  width: 360px;
  height: 48px;
  color: #FFFFFF;
  margin-top: 15px;
  margin-left: 30px;
}

.suggestion li img {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border-radius: 4px;
}

.suggestion-containner {
  margin-left: 10px;
  margin-top: 15px;
  width: 360px;
  height: 480px;
  max-height: 380px;
  /* 可根据需要调整最大高度 */
  overflow-y: auto;
  /* 当内容超出最大高度时显示垂直滚动条 */
  overflow-x: hidden;
  /* 隐藏水平滚动条 */
  scrollbar-width: none;
  /* Firefox */
  ;
}

.suggestion-containner::-webkit-scrollbar {
  display: none;
}

.span-data {
  display: flex;
  flex-direction: column;
  margin-left: 80px;
  margin-top: -50px;
}

.span-1 {
  font-family: OPPOSans;
  font-weight: 300;
  font-size: 16px;
  margin-top: -5px;
}

.span-2 {
  font-family: PingFang SC;
  font-weight: 200;
  font-size: 14px;
  margin-top: 5px;
}

.span-3 {
  font-family: PingFang SC;
  font-weight: 200;
  font-size: 14px;
  margin-left: 150px;
  margin-top: -20px;
}

.suggestions li {
  padding: 8px;
  cursor: pointer;
}

.suggestions li:hover {
  background-color: rgba(186, 230, 250, 0.9);
}

.containner1 {
  width: 457px;
  height: 545px;
  margin-left: 16px;
  margin-top: -60px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.containner2 {
  width: 457px;
  height: 394px;
  margin-left: 16px;
  margin-top: 30px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);

}

.containner2-alldata {
  margin-left: 25px;
  width: 420px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.containner2-alldata li {
  margin-top: 15px;
}

.containner2-alldata li img {
  width: 15px;
  margin-right: 12px;
}

.containner2-data,
.containner2-range {
  font-family: PingFang SC;
  font-weight: 200;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  justify-content: center;
  align-items: center;
  color: #C6E3F5;
  width: 200px;
  list-style-type: none;
  flex: 1;
  min-width: 0;
}

.intime {
  margin-left: 5px;
  width: 420px;
  height: 200px;
  max-height: 200px;
  /* 可根据需要调整最大高度 */
  overflow-y: auto;
  /* 当内容超出最大高度时显示垂直滚动条 */
  overflow-x: hidden;
  /* 隐藏水平滚动条 */
  scrollbar-width: none;
  /* Firefox */
  ;

}

.color-block1 {
  width: 10px;
  height: 10px;
  background-color: #D83D6C;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.color-block2 {
  width: 10px;
  height: 10px;
  background-color: #00CEFF;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.color-block3 {
  width: 10px;
  height: 10px;
  background-color: #D3ADF7;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.color-block4 {
  width: 10px;
  height: 10px;
  background-color: #1890FF;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.intime li {
  list-style-type: none;
  padding-left: 0;
  margin-top: 10px;
  font-family: PingFang SC;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0%;
  color: #FFFFFF;
}

.containner3 {
  width: 457px;
  height: 545px;
  display: flexbox;
  float: right;
  margin-right: 16px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.focus-events {
  width: 440px;
  height: 200px;
  max-height: 200px;
  /* 可根据需要调整最大高度 */
  overflow-y: auto;
  /* 当内容超出最大高度时显示垂直滚动条 */
  overflow-x: hidden;
  /* 隐藏水平滚动条 */
  scrollbar-width: none;
  /* Firefox */
}

.title-list {
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  margin-left: 10px;
}

.title-image {
  width: 24px;
  /* 图片宽度 */
  height: 24px;
  /* 图片高度 */
  object-fit: contain;
  /* 保持图片比例 */
}

.before-img {
  width: 24px;
  /* 图片宽度 */
  height: 24px;
  /* 图片高度 */
  /* 保持图片比例 */
}

.back-img {
  margin-left: 4px;
}

.title-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
  color: #C6E3F5;
  display: flex;
  /* 启用Flex布局 */
  align-items: center;
  /* 垂直居中对齐 */
  gap: 8px;
  /* 元素间距 */
  padding: 8px 12px;
  margin-top: 15px;
}

.title-item:hover {
  background-color: #1c6291;
}

.title-item.active {
  background-color: #1c487a;
  color: rgb(88, 207, 236);
  font-weight: bold;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tooltip {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1920px;
  height: 1080px;
  position: fixed;
  z-index: 9999;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.7);
}

.containner4 {
  width: 457px;
  height: 394px;
  margin-left: 16px;
  margin-top: 30px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #67A4E199, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
}

.containner4-alldata {
  height: 300px;
  overflow: hidden;
}

::v-deep .containner4-alldata {
  padding: 10px;
}

.containner6 {
  width: 900px;
  height: 200px;
  margin-left: 490px;
  margin-top: -195px;
  margin-bottom: 10px;
  background-color: #04142166;
  border-style: solid;
  border-width: 0px;
  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
  border-radius: 2px;
  /* 添加内阴影 */
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  /* 添加背景模糊 */
  backdrop-filter: blur(4px);
  /* 为了兼容 Safari 浏览器 */
  -webkit-backdrop-filter: blur(4px);
  vertical-align: middle;
  display: inline-block;

}

.containner6-data {
  width: 200px;
  height: 200px;

}

.containner6-font1 {
  color: #00C5FF;
  text-align: center;
  text-shadow: 0px 3px 1px rgba(0, 0, 0, 0.47);
  font-family: "微软雅黑";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  height: 10PX;
  width: 100px;
  margin-top: 0PX;
  margin-left: 95PX;
}

.containner6-font2 {
  color: #00C5FF;
  margin-left: 100px;
  text-align: center;
}

.container-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 940px;
}

.left-container,
.right-container {
  height: 100%;
  /* 根据需要调整左右容器的宽度比例 */
  flex: 1;
}

.containner1,
.containner2,
.containner3,
.containner4 {
  margin: 0;
  /* 移除原有的外边距设置 */
}


.circular-image {
  border-radius: 50%;
  object-fit: cover;
  width: 100px;
  height: 100px;
}

.circular-gradient-container {
  border-radius: 50%;
  background: radial-gradient(circle, #ff0000, #00ff00);
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip-containner {
  width: 590px;
  height: 650px;
  margin-left: 670px;
  margin-top: 150px;
  background-image: linear-gradient(to bottom, #050B23, #07293D);
  border-style: solid;
  border-width: 2px;
  border-image: linear-gradient(to bottom, #0090FF00, #0090FF00)1;
  border-radius: 8px !important;
  /* 添加内阴影 */
}

.tooltip-containner-data {
  font-family: PingFang SC;
  font-weight: 200;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  justify-content: center;
  align-items: center;
  color: #C6E3F5;
  width: 200px;
  list-style-type: none;
  flex: 1;
  min-width: 0;
}
</style>
