373 lines
9.9 KiB
Vue
373 lines
9.9 KiB
Vue
<template>
|
|
<div class="main">
|
|
|
|
<header>
|
|
<img src="../assets/images/head/mainhead.png" alt="" style="width: 100%;">
|
|
<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="realtime-clock" style="position: absolute; top: 20px; right: 20px; color: #1EA0FD; font-family: LCD2; font-size: 18px;">
|
|
{{ currentTime }}
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="main1">
|
|
<img src="../assets/images/head/zhengzhi.png" alt="" style="margin-top: -12px;">
|
|
<img src="../assets/images/percent/1.png" alt="" style="width: 157px;margin-left:75px;margin-top: 15px;">
|
|
<img src="../assets/images/percent/1-1.png" alt=""
|
|
style=" width: 180px;margin-top: 30px;margin-right: 50px;float: right;">
|
|
<img src="../assets/images/percent/1-2.png" alt=""
|
|
style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
|
|
<img src="../assets/images/percent/1-1-1.png" alt="" style="margin-left: 45px;">
|
|
<button
|
|
class="mao-button"
|
|
:class="{ active: route.path === '/Main' }"
|
|
@click="goToPage('/Main')"
|
|
>
|
|
<img src="../assets/images/logo/mao.png" alt="" style="
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
">
|
|
</button>
|
|
<img src="../assets/images/percent/1-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
|
|
</div>
|
|
<div class="main2">
|
|
<img src="../assets/images/head/jingji.png" alt="" style="margin-top: -12px;">
|
|
<img src="../assets/images/percent/2.png" alt="" style="width: 157px;margin-left:75px;margin-top: 15px;">
|
|
<img src="../assets/images/percent/2-1.png" alt=""
|
|
style=" width: 180px;margin-top: 30px;margin-right: 50px;float: right;">
|
|
<img src="../assets/images/percent/2-2.png" alt=""
|
|
style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
|
|
<img src="../assets/images/percent/2-1-1.png" alt="" style="margin-left: 45px;">
|
|
<img src="../assets/images/percent/2-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
|
|
</div>
|
|
<div class="main3">
|
|
<img src="../assets/images/head/shehui.png" alt="" style="margin-top: -12px;">
|
|
<img src="../assets/images/percent/3.png" alt="" style="width: 157px;margin-left:75px;margin-top: 15px;">
|
|
<img src="../assets/images/percent/3-1.png" alt=""
|
|
style=" width: 180px;margin-top: 30px;margin-right: 50px;float: right;">
|
|
<img src="../assets/images/percent/3-2.png" alt=""
|
|
style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
|
|
<img src="../assets/images/percent/3-1-1.png" alt="" style="margin-left: 45px;">
|
|
<img src="../assets/images/percent/3-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router';
|
|
import { ref, onMounted,onUnmounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
const route = useRoute();
|
|
import { ElLoading } from 'element-plus';
|
|
// 实时时钟实现
|
|
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 timers = [];
|
|
|
|
|
|
const router = useRouter();
|
|
let loadingInstance = null;
|
|
|
|
// 显示 Loading 组件
|
|
const showLoading = () => {
|
|
loadingInstance = ElLoading.service({
|
|
lock: true,
|
|
text: '加载中...',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
};
|
|
|
|
// 隐藏 Loading 组件
|
|
const hideLoading = () => {
|
|
if (loadingInstance) {
|
|
loadingInstance.close();
|
|
}
|
|
};
|
|
|
|
// 页面加载完成后，显示 Loading 组件，一秒后隐藏
|
|
onMounted(() => {
|
|
// 初始化时钟并每秒更新
|
|
currentTime.value = formatTime();
|
|
const clockTimer = setInterval(() => {
|
|
currentTime.value = formatTime();
|
|
}, 1000);
|
|
timers.push(clockTimer);
|
|
});
|
|
|
|
// 监听路由变化，跳转页面时显示 Loading 组件，一秒后隐藏
|
|
router.afterEach(() => {
|
|
showLoading();
|
|
setTimeout(() => {
|
|
hideLoading();
|
|
}, 1000);
|
|
});
|
|
|
|
const handleSearch = () => {
|
|
if (inputValue.value === '南海争端系列舆情事件') {
|
|
router.push('/Main');
|
|
} else {
|
|
alert('请输入正确的事件类别关键词');
|
|
}
|
|
};
|
|
|
|
const goToPage = (pagePath) => {
|
|
router.push(pagePath);
|
|
};
|
|
|
|
const inputValue = ref('');
|
|
const suggestions = ref([]);
|
|
|
|
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 selectSuggestion = (item) => {
|
|
inputValue.value = item.value;
|
|
suggestions.value = [];
|
|
console.log('选中项:', item);
|
|
};
|
|
onUnmounted(() => {
|
|
// 清理定时器
|
|
timers.forEach(timer => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
clearTimeout(timer);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mao-button {
|
|
/* 保留原有样式 */
|
|
transition: all 0.3s ease;
|
|
border-color: red;
|
|
}
|
|
|
|
.mao-button.active {
|
|
background-color: #409eff; /* 蓝色高亮 */
|
|
color: rgb(252, 5, 5);
|
|
box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
|
|
border-color: #f80202;
|
|
}
|
|
|
|
.mao-button:hover:not(.active) {
|
|
border-color: #409eff;
|
|
color: #409eff;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden; /* 防止出现水平滚动条 */
|
|
}
|
|
.main {
|
|
height: 1080px;
|
|
background-image: url("../assets/images/bci.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: #02131F;
|
|
}
|
|
|
|
.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: 680px;
|
|
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;
|
|
}
|
|
.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);
|
|
}
|
|
.container {
|
|
display: flex;
|
|
gap: 100px;
|
|
/* 增加 div 之间的间距 */
|
|
margin-top: 50px;
|
|
margin-left: 25px;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.main1,
|
|
.main2,
|
|
.main3 {
|
|
width: 540px;
|
|
height: 810px;
|
|
background-color: #04142166;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-image: linear-gradient(to bottom, #214A8E00, #214A8E) 1;
|
|
background-image: linear-gradient(to bottom, #0A1A344D, #0A1A34);
|
|
border-radius: 2px;
|
|
box-shadow: 0px 0px 18px 0px #0A2E55 inset;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
.mao-button {
|
|
float: right;
|
|
border: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
width: auto;
|
|
height: auto;
|
|
margin-top: -136.4px;
|
|
margin-right: 55.3px;
|
|
cursor: pointer;
|
|
/* 添加 z-index 属性 */
|
|
position: relative;
|
|
z-index: 1001;
|
|
animation: breathe 2s infinite ease-in-out;
|
|
|
|
}
|
|
/* 定义呼吸效果关键帧 */
|
|
@keyframes breathe {
|
|
0% {
|
|
opacity: 0.4;
|
|
transform: scale(0.9);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
}
|
|
100% {
|
|
opacity: 0.4;
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
</style> |