diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 62dcd70..ef76547 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,4 +1,4 @@ - + diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue index 37c8ecc..35160da 100644 --- a/src/components/HeaderNav.vue +++ b/src/components/HeaderNav.vue @@ -56,9 +56,10 @@ const searchEvent=()=>{ if(input1.value){ visible.value=false activeMenuIndex.value=null - localStorage.setItem('activeMenu',route.fullPath) menuKey.value += 1 //强制刷新 - router.push({path:'/search',query:{keyword:input1.value}}) + router.push({path:'/search',query:{keyword:input1.value}}).then(()=>{ + localStorage.setItem('activeMenu',route.fullPath) + }) } } @@ -149,8 +150,8 @@ const searchEvent=()=>{ margin-left: 160px; margin-right: auto; .logo{ - width: 131.63px; - height: 42.25px; + width: 133px; + height: 43px; } } .person{ diff --git a/src/components/SearchResults/Classify.vue b/src/components/SearchResults/Classify.vue index 484d81d..3874446 100644 --- a/src/components/SearchResults/Classify.vue +++ b/src/components/SearchResults/Classify.vue @@ -13,13 +13,17 @@ const props = defineProps({ default: '' } }) +const emit = defineEmits(['changeClassify']) +const changeClassify = (classify) => { + emit('changeClassify', classify) +}

分类

-
-
{{item.label}}（{{item.count}}） +
+
{{item.label}}（{{item.count}}）
@@ -29,8 +33,9 @@ const props = defineProps({ display: flex; flex-direction: column; align-items: flex-start; - width: 268px; + width: 310px; gap: 20px; + padding-left: 100px; .title{ font-weight: 500; font-size: 24px; @@ -44,6 +49,32 @@ const props = defineProps({ color: #666666; display: flex; align-items: center; + cursor: pointer; + .circle{ + width: 12px; + height: 12px; + border-radius: 50%; + margin-right: 10px; + border: 1px solid #D9D9D9; + } + } + .classify-item.active{ + .circle{ + border: 1px solid #1890FF; + position: relative; + &::after{ + content: ''; + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #1890FF; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } } } diff --git a/src/components/SearchResults/ResultItem.vue b/src/components/SearchResults/ResultItem.vue index d482c87..a1cd01a 100644 --- a/src/components/SearchResults/ResultItem.vue +++ b/src/components/SearchResults/ResultItem.vue @@ -1,5 +1,6 @@ @@ -30,11 +35,9 @@ const props=defineProps({
-
- {{item.title}} +
-
- {{item.description}} +
来源:{{item.source}} @@ -50,9 +53,10 @@ const props=defineProps({ .search-results-item { padding: 20px 10px; border-bottom: 1px solid #E3E3E3; - + //width: 1100px; + box-sizing: border-box; .href { - margin-bottom: 60px; + margin-bottom: 40px; font-weight: 400; font-size: 14px; line-height: 100%; @@ -67,10 +71,9 @@ const props=defineProps({ display: flex; align-items: center; justify-content: center; - + overflow: hidden; img { - width: 163.13px; - height: 93.85px; + object-fit: contain; } } //.content{ diff --git a/src/utils/api.js b/src/utils/api.js new file mode 100644 index 0000000..e69de29 diff --git a/src/utils/function.js b/src/utils/function.js index 490244d..dbb48a3 100644 --- a/src/utils/function.js +++ b/src/utils/function.js @@ -40,3 +40,33 @@ export const getImageUrl = (path) => { return ''; } } + +export function highlightKeywords(text, keywords, options = {}) { + // 处理边界情况：文本或关键字为空时直接返回原文本 + if (!text || !keywords || (Array.isArray(keywords) && keywords.length === 0)) { + return text; + } + + // 合并默认配置 + const { + color = '#2D00F5', + ignoreCase = true, + tag = 'span' + } = options; + + // 统一将关键字转为数组格式（兼容单个关键字传入） + const keywordList = Array.isArray(keywords) ? keywords : [keywords]; + // 过滤空关键字 + const validKeywords = keywordList.filter(keyword => keyword && keyword.trim()); + if (validKeywords.length === 0) return text; + + // 构建正则表达式：转义特殊字符 + 忽略大小写 + 全局匹配 + const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const regexStr = validKeywords.map(escapeRegExp).join('|'); + const regex = new RegExp(regexStr, ignoreCase ? 'gi' : 'g'); + + // 替换匹配的关键字，用指定标签包裹并设置颜色 + return text.replace(regex, (match) => { + return `<${tag} style="color: ${color};">${match}`; + }); +} diff --git a/src/views/SearchResults.vue b/src/views/SearchResults.vue index a111e1c..3b59e22 100644 --- a/src/views/SearchResults.vue +++ b/src/views/SearchResults.vue @@ -5,8 +5,10 @@ import {nextTick, ref} from "vue"; import {useRouter,useRoute} from "vue-router"; import ResultItem from "@/components/SearchResults/ResultItem.vue"; import img from "@/assets/img/search1.png" +import img1 from "@/assets/img/search2.png" import Classify from "@/components/SearchResults/Classify.vue"; + const router=useRouter() const route=useRoute() @@ -50,7 +52,21 @@ const searchResults=ref([ title:'反馈抑制模块', description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块', source:'产品中心' - } + }, + { + href:'wwww.philisense/cn/dkoudosuoaud/sodusod/', + url:'', + title:'AI 降噪模块', + description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块', + source:'服务交流' + }, + { + href:'wwww.philisense/cn/dkoudosuoaud/sodusod/', + url:img1, + title:'AI 降噪模块', + description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块', + source:'服务交流' + }, ]) const classifyList=ref([ {label:'全部',value:'全部',count:256}, @@ -58,9 +74,12 @@ const classifyList=ref([ {label:'产品',value:'解决方案',count:64}, {label:'解决方案',value:'服务交流',count:32}, {label:'服务交流',value:'关于我们',count:16}, - {label:'公司&新闻',value:'关于我们',count:8}, + {label:'公司&新闻',value:'公司&新闻',count:8}, ]) const activeClassify=ref('全部') +const changeClassify=(classify)=>{ + activeClassify.value=classify +}