全局查询大概框架
zjlnb666
6 days ago
parent
9c34fe5e08
commit
729e21039c
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@ -0,0 +1,4 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.0644 11.4512H2.96103C2.74829 11.4512 2.57617 11.2791 2.57617 11.0663V2.96298C2.57617 2.75024 2.74829 2.57812 2.96103 2.57812H6.31889C6.53163 2.57812 6.70374 2.75024 6.70374 2.96298C6.70374 3.17572 6.53163 3.34784 6.31889 3.34784H3.34588V10.6815H10.6795V7.72556C10.6795 7.51282 10.8516 7.34071 11.0644 7.34071C11.2771 7.34071 11.4492 7.51282 11.4492 7.72556V11.0663C11.4492 11.2791 11.2771 11.4512 11.0644 11.4512Z" fill="#666666"/>
|
||||
<path d="M12.6858 1.79922V1.79238C12.6844 1.76914 12.6803 1.74727 12.6762 1.72539C12.6762 1.72402 12.6762 1.72266 12.6749 1.72129C12.6694 1.69805 12.6625 1.67617 12.6543 1.6543V1.65293C12.6461 1.63105 12.6352 1.61055 12.6243 1.59004C12.6243 1.58867 12.6229 1.58867 12.6229 1.5873C12.612 1.56816 12.5997 1.54902 12.586 1.53125C12.5846 1.52988 12.5833 1.52715 12.5819 1.52578C12.575 1.51758 12.5696 1.51074 12.5627 1.50254C12.5627 1.50117 12.5614 1.50117 12.5614 1.4998C12.5545 1.4916 12.5477 1.48477 12.5395 1.47793L12.534 1.47246C12.5272 1.46562 12.519 1.45879 12.5122 1.45195L12.5108 1.45059C12.5026 1.44375 12.4944 1.43691 12.4848 1.43145C12.4834 1.43008 12.4807 1.42871 12.4793 1.42734C12.4602 1.41367 12.4411 1.40273 12.4206 1.3918L12.4192 1.39043C12.3973 1.37949 12.3754 1.36992 12.3522 1.36309C12.3303 1.35625 12.3071 1.34941 12.2838 1.34668C12.2825 1.34668 12.2811 1.34668 12.2797 1.34531L12.2469 1.34121H12.2428C12.2333 1.33984 12.225 1.33984 12.2155 1.33984H8.75102C8.47895 1.33984 8.25884 1.55996 8.25884 1.83203C8.25884 2.1041 8.47895 2.32422 8.75102 2.32422H11.0069L6.66606 6.66641C6.47329 6.85918 6.47329 7.1709 6.66606 7.3623C6.76177 7.45801 6.88755 7.50586 7.0147 7.50586C7.14048 7.50586 7.26626 7.45801 7.36333 7.3623L11.7028 3.02148V5.24727C11.7028 5.51934 11.9229 5.73945 12.195 5.73945C12.467 5.73945 12.6872 5.51934 12.6872 5.24727V1.8334C12.6872 1.82246 12.6872 1.81016 12.6858 1.79922Z" fill="#666666"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props=defineProps({
|
||||
item:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
href:'',
|
||||
url:'',
|
||||
title:'',
|
||||
description:'',
|
||||
source:''
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-results-item">
|
||||
<div class="href">
|
||||
{{item.href}}
|
||||
</div>
|
||||
<el-Row :gutter="20">
|
||||
<el-col :span="5" v-if="item.url">
|
||||
<div class="image">
|
||||
<img :src="item.url" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="19" style="flex:1 ;max-width: 100%;">
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
{{item.title}}
|
||||
</div>
|
||||
<div class="description">
|
||||
{{item.description}}
|
||||
</div>
|
||||
<div class="source" >
|
||||
<span style="margin-right: 10px">来源:</span>{{item.source}}
|
||||
<img style="margin-left: 5px;" src="@/assets/img/searchSvg.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-results-item {
|
||||
padding: 20px 10px;
|
||||
border-bottom: 1px solid #E3E3E3;
|
||||
|
||||
.href {
|
||||
margin-bottom: 60px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
color: #BDBCBC;
|
||||
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 100%;
|
||||
background-color: #F4F6F8;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 163.13px;
|
||||
height: 93.85px;
|
||||
}
|
||||
}
|
||||
//.content{
|
||||
// padding:0 10px;
|
||||
//}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06em;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 1.5em;
|
||||
letter-spacing: 0.06em;
|
||||
margin: 30px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.source{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color:#BDBCBC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
|
||||
import {Search} from "@element-plus/icons-vue";
|
||||
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 Classify from "@/components/SearchResults/Classify.vue";
|
||||
|
||||
const router=useRouter()
|
||||
const route=useRoute()
|
||||
|
||||
const searchKey=ref(route.query.keyword ||localStorage.getItem('searchKey') || '')
|
||||
if(route.query.keyword){
|
||||
localStorage.setItem('searchKey',route.query.keyword)
|
||||
}
|
||||
|
||||
const input=ref(searchKey.value)
|
||||
const searchEvent=()=>{
|
||||
if(input.value){
|
||||
// 保存搜索词到本地存储
|
||||
console.log(route)
|
||||
|
||||
|
||||
localStorage.setItem('searchKey',input.value)
|
||||
|
||||
// 跳转到搜索结果页面并携带搜索词参数
|
||||
router.push({
|
||||
path:'/search',
|
||||
query:{keyword:input.value}
|
||||
}).then(()=>{
|
||||
localStorage.setItem('activeMenu',route.fullPath)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//模拟数据
|
||||
const searchResults=ref([
|
||||
{
|
||||
href:'wwww.philisense/cn/dkoudosuoaud/sodusod/',
|
||||
url:'',
|
||||
title:'反馈抑制模块',
|
||||
description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
|
||||
source:'产品中心'
|
||||
},
|
||||
{
|
||||
href:'wwww.philisense/cn/dkoudosuoaud/sodusod/',
|
||||
url:img,
|
||||
title:'反馈抑制模块',
|
||||
description:'这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。模块这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。这是这个产品介绍内容里的介绍等文字。模块',
|
||||
source:'产品中心'
|
||||
}
|
||||
])
|
||||
const classifyList=ref([
|
||||
{label:'全部',value:'全部',count:256},
|
||||
{label:'核心技术',value:'产品中心',count:128},
|
||||
{label:'产品',value:'解决方案',count:64},
|
||||
{label:'解决方案',value:'服务交流',count:32},
|
||||
{label:'服务交流',value:'关于我们',count:16},
|
||||
{label:'公司&新闻',value:'关于我们',count:8},
|
||||
])
|
||||
const activeClassify=ref('全部')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-results">
|
||||
<div class="title">
|
||||
搜索结果
|
||||
</div>
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="input"
|
||||
:suffix-icon="Search"
|
||||
placeholder="关键词搜索产品、文档、新闻"
|
||||
size="large"
|
||||
style="height:52px; font-size: 20px; width: 573px;"
|
||||
@keyup.enter="searchEvent"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="search-results-list">
|
||||
<Classify :classifyList=classifyList :activeClassify="activeClassify"></Classify>
|
||||
<div>
|
||||
<ResultItem v-for="item in searchResults" :key="item.href" :item="item"></ResultItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-results{
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 54px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06em;
|
||||
margin-top: 200px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
.search-input{
|
||||
margin: 40px auto;
|
||||
width:573px ;
|
||||
}
|
||||
.search-results-list{
|
||||
width: 1400px;
|
||||
margin:auto;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue