新增搜索页面

@@ -21,6 +21,8 @@ declare module 'vue' {
     ElOption: typeof import('element-ui/lib/option')['default']
     ElOption: typeof import('element-ui/lib/option')['default']
     ElRow: typeof import('element-ui/lib/row')['default']
     ElRow: typeof import('element-ui/lib/row')['default']
     ElSelect: typeof import('element-ui/lib/select')['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']
     ElTooltip: typeof import('element-ui/lib/tooltip')['default']
     HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
     HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
     HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
     HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']

 /*
 /*
  * @Date: 2024-08-26 10:42:15
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 18:16:17
+ * @LastEditTime: 2024-10-20 17:01:09
  * @FilePath: /hager/src/route.js
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  * @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 {
     .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 {
     .product-item-title {
       text-align: center;
       text-align: center;
       margin-top: 0.75rem;
       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>