|
|
@@ -10,7 +10,7 @@
|
|
|
v-model="form.name"
|
|
|
style="width: 1484px;height: 84px"
|
|
|
placeholder="请输入你要访谈的职业"
|
|
|
- @change="byKeyword"
|
|
|
+ @input="byKeyword"
|
|
|
>
|
|
|
<template #suffix>
|
|
|
<span style="font-size: 38px;color: #444040;margin-left: 37px;">
|
|
|
@@ -21,20 +21,21 @@
|
|
|
<div>
|
|
|
开始查询
|
|
|
</div>
|
|
|
-<!-- <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">-->
|
|
|
</div>
|
|
|
- <!-- <div class="result-box">
|
|
|
- <div class="two-page-result">
|
|
|
- <div v-for="(item,index) in universityList"
|
|
|
- :class="[item.selected?'item-result-box-active':'item-result-box']"
|
|
|
- @click="toDetail(item)">
|
|
|
- <div v-html="item.name"></div>
|
|
|
+ </div>
|
|
|
+ <div style="overflow: auto;height: 720px;margin-top: 16px">
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center;">
|
|
|
+ <div class="result-box" v-if="occupationList.length>0">
|
|
|
+ <div class="two-page-result">
|
|
|
+ <div v-for="(item,index) in occupationList"
|
|
|
+ :class="[item.selected?'item-result-box-active':'item-result-box']"
|
|
|
+ @click="toDetail(item)">
|
|
|
+ <div v-html="item.name"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>-->
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
- <div style="overflow: auto;height: 720px;margin-top: 16px">
|
|
|
<div class="hot-search">
|
|
|
<div class="title">热门搜索：</div>
|
|
|
<div style="display: flex;flex-wrap:wrap;
|
|
|
@@ -93,17 +94,15 @@
|
|
|
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
|
|
|
const headinfo = ref({})
|
|
|
+ import {getOccupationByKeyword} from "@/api/xjc-integratedmachine/environment/occupation.js";
|
|
|
|
|
|
const form = ref({
|
|
|
- areaid: null,
|
|
|
- areaname: null,
|
|
|
- educationlevel: null,
|
|
|
- educationlevelName: null,
|
|
|
- characteristic: null,
|
|
|
- characteristicName: null,
|
|
|
name: null
|
|
|
})
|
|
|
|
|
|
+ // 职业列表
|
|
|
+ const occupationList = ref([])
|
|
|
+
|
|
|
function setHeadinfo(){
|
|
|
headinfo.value = {
|
|
|
title: 'AI生涯访谈',
|
|
|
@@ -115,6 +114,36 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 定义一个函数，用于将关键词变为红色
|
|
|
+ function highlightKeywords(text, keywords) {
|
|
|
+ // 遍历关键词列表
|
|
|
+ keywords.forEach(keyword => {
|
|
|
+ // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
|
|
|
+ // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
|
|
|
+ console.log("keywords", keywords)
|
|
|
+ let regex = new RegExp(keyword, 'g');
|
|
|
+ text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
|
|
|
+ console.log("text", text)
|
|
|
+ });
|
|
|
+ return text;
|
|
|
+ }
|
|
|
+
|
|
|
+ function byKeyword() {
|
|
|
+ if(form.value.name){
|
|
|
+ getOccupationByKeyword(form.value).then(resp => {
|
|
|
+ resp.list.map(item => {
|
|
|
+ item.selected = false;
|
|
|
+ let keyWord = form.value.name
|
|
|
+ item.name = highlightKeywords(item.name, [keyWord]);
|
|
|
+ console.log(" item.name", item.name)
|
|
|
+ // 遍历数据数组，并处理每个字符串
|
|
|
+ })
|
|
|
+
|
|
|
+ occupationList.value = resp.list
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
setHeadinfo()
|
|
|
})
|
|
|
@@ -195,74 +224,73 @@
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .result-box {
|
|
|
- width: 1484px;
|
|
|
- height: 750px;
|
|
|
- overflow: auto;
|
|
|
+ .result-box {
|
|
|
+ width: 1484px;
|
|
|
+ /*height: 750px;*/
|
|
|
+ /*overflow: auto;*/
|
|
|
|
|
|
- .two-page-result {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .two-page-result {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /*justify-content: space-between;*/
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .item-result-box-active {
|
|
|
- min-width: 320px;
|
|
|
- height: 92px;
|
|
|
- background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
- box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- border: 1px solid #A2F57F;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 30px;
|
|
|
- color: #0DE6A1;
|
|
|
- line-height: 90px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 50px;
|
|
|
- margin-right: 50px;
|
|
|
- margin-top: 32px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-result-box {
|
|
|
- min-width: 320px;
|
|
|
- height: 92px;
|
|
|
- background: #E0EEF4;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 30px;
|
|
|
- color: #000000;
|
|
|
- line-height: 90px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 50px;
|
|
|
- margin-right: 50px;
|
|
|
- margin-top: 32px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-result-box:hover {
|
|
|
- min-width: 320px;
|
|
|
- height: 92px;
|
|
|
- background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
- box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- border: 1px solid #A2F57F;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 30px;
|
|
|
- color: #000000;
|
|
|
- line-height: 90px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 50px;
|
|
|
- margin-top: 32px;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
+ .item-result-box-active {
|
|
|
+ min-width: 320px;
|
|
|
+ height: 92px;
|
|
|
+ background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
+ box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ border: 1px solid #A2F57F;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #0DE6A1;
|
|
|
+ line-height: 90px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
+ .item-result-box {
|
|
|
+ min-width: 320px;
|
|
|
+ height: 92px;
|
|
|
+ background: #E0EEF4;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 90px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-result-box:hover {
|
|
|
+ min-width: 320px;
|
|
|
+ height: 92px;
|
|
|
+ background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
|
|
|
+ box-shadow: inset 0px -2px 7px 0px #1E410E;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ border: 1px solid #A2F57F;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 90px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-top: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.hot-search {
|
hizhangling