1700 lines
49 KiB
Vue
1700 lines
49 KiB
Vue
<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="">最初首发者： {{ 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="">积极转发者： {{ 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">粉丝数： {{ 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="">锚点数量： {{ 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="">平均粉丝数量： {{ currentData.fansCount }}
|
||
</li>
|
||
<li><img src="../assets/images/logo/point.png" alt="">平均参与互动数： {{ 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>
|