285 lines
8.1 KiB
Vue
285 lines
8.1 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>
|
||
|
|
</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"
|
||
|
|
@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 } from 'vue';
|
||
|
|
import { ElLoading } from 'element-plus';
|
||
|
|
|
||
|
|
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(() => {
|
||
|
|
showLoading();
|
||
|
|
setTimeout(() => {
|
||
|
|
hideLoading();
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听路由变化，跳转页面时显示 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);
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.main {
|
||
|
|
width: 1920px;
|
||
|
|
height: 1080px;
|
||
|
|
background-image: url("../assets/images/bci.png");
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-color: #02131F;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
.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: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|