Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
62c01d6c 1 parent cb7ec068

新增搜索页面

Inline Side-by-side
Showing 4 changed files with 207 additions and 10 deletions
......@@ -21,6 +21,8 @@ declare module 'vue' {
ElOption: typeof import('element-ui/lib/option')['default']
ElRow: typeof import('element-ui/lib/row')['default']
ElSelect: typeof import('element-ui/lib/select')['default']
ElTabPane: typeof import('element-ui/lib/tab-pane')['default']
ElTabs: typeof import('element-ui/lib/tabs')['default']
ElTooltip: typeof import('element-ui/lib/tooltip')['default']
HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 18:16:17
* @LastEditTime: 2024-10-20 17:01:09
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -186,4 +186,13 @@ export default [{
},
},
]
}, {
path: '/search',
name: '搜索结果',
component: () => import('@/views/search'),
meta: {
title: '海格电器',
tag: 'search'
},
children: []
}]
......
......@@ -129,15 +129,15 @@ export default {
}
}
.product-item-img {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 8px;
}
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 8px;
}
.product-item-title {
text-align: center;
margin-top: 0.75rem;
......
<!--
* @Date: 2024-10-20 16:57:48
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 18:28:43
* @FilePath: /hager/src/views/search.vue
* @Description: 文件描述
-->
<template>
<div class="hager-search-page">
<hager-box>
<div class="search-title">与“{{ keyword }}”相关的搜索结果</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="product">
<div slot="label" class="customer-label">产品&nbsp;&nbsp;<span>2</span></div>
<div class="search-product-list">
<div class="search-product-item" v-for="(item, index) in 6" :key="index">
<div class="search-product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="search-product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
</el-tab-pane>
<el-tab-pane name="news">
<div slot="label" class="customer-label">新闻和解决方案&nbsp;&nbsp;<span>3</span></div>
<div style="margin-top: 1rem;" v-for="(item, index) in news_list" :key="index">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>新闻中心</el-breadcrumb-item>
</el-breadcrumb>
<div class="search-news-wrapper">
<div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
<div class="search-news-content" v-html="highlightKeyword(keyword, item.content)"></div>
<div class="search-news-more">
<div class="search-news-more-btn" @click="goTo(item.id)">MORE</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import $ from 'jquery';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
activeName: 'product',
keyword: this.$route.query.keyword,
news_list: [{
id: '123',
title: '海格电气全新智能型hw+空气断路器重磅上市',
content: '11 月 24 日，海格电气在惠州举办了 2023 海格匠心之旅暨 hw+ 全系列新品发布会,面向中国市场正式推出了全新一代智能型 hw+ 空气断路器。海格电气管理层及员工代表，行业客户及合作伙伴等齐聚惠州工厂，共同见证海格电气新一代',
}, {
id: '456',
title: '里程碑时刻！海格电气首台全新一代HW+空气断路器',
content: '全新一代HW+空气断路器的整机下线，标志着海格电气在低压配电领域的进一步技术升级。作为海格电气在中国市场重磅推出的里程碑式产品，全新一代HW+空气断路器为大型建筑复杂、高负荷的用电需求提供高质量解决方案。',
}]
}
},
mounted () {
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
highlightKeyword (keyword, text) {
// 创建一个正则表达式来查找关键词
var regex = new RegExp(`(${keyword})`, 'gi');
// 用 <span> 标签替换匹配到的关键词并加上高亮类
var highlightedText = text.replace(regex, '<span style="color: #00ABE5;">$1</span>');
return highlightedText;
},
goTo (id) {
this.$router.push({
path: '/news/detail',
query: {
id: id
}
});
}
}
}
</script>
<style lang="less" scoped>
.hager-search-page {
.search-title {
font-size: 1.25rem;
color: @secondary-color;
margin: 2rem 0;
font-weight: bold;
}
.search-product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.search-product-item {
width: calc(33.33% - 1rem);
&.xs {
width: calc(50% - 1rem);
}
}
.search-product-item-img {
background-color: #FFF;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ECECEC;
}
.search-product-item-title {
text-align: center;
margin-top: 0.75rem;
color: @text-color;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
.search-news-wrapper {
margin: 1.5rem 0;
.search-news-title {
font-size: 1.15rem;
font-weight: bold;
margin-bottom: 1rem;
}
.search-news-content {
line-height: 2rem;
}
.search-news-more {
display: flex;
justify-content: flex-end;
.search-news-more-btn {
color: #F56400;
padding: 0.5rem 2rem;
border: 1px solid #F56400;
&:hover {
cursor: pointer;
}
}
}
}
}
:deep(.el-tabs__item.is-active, ) {
color: @secondary-color;
}
:deep(.el-tabs__active-bar) {
background-color: @secondary-color;
}
:deep(.el-tabs__item:hover) {
color: @secondary-color;
}
:deep(.el-tabs__item) {
color: @text-color;
}
.customer-label {
font-size: 0.95rem;
padding: 0 0.5rem;
span {
color: #F56400;
}
}
</style>