搜索自适应页面调整

hookehuyr
Commit 2dc0f55104cc910161c2e055bee5b51d5f98ab79 2dc0f551 1 parent 997549de
Showing 2 changed files with 61 additions and 15 deletions
components.d.ts
src/views/search.vue
--- a/components.d.ts
View file @2dc0f55
+++ b/components.d.ts
View file @2dc0f55
@@ -11,16 +11,13 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
     ElCarousel: typeof import('element-ui/lib/carousel')['default']
     ElCarouselItem: typeof import('element-ui/lib/carousel-item')['default']
-    ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
     ElCol: typeof import('element-ui/lib/col')['default']
     ElCollapse: typeof import('element-ui/lib/collapse')['default']
     ElCollapseItem: typeof import('element-ui/lib/collapse-item')['default']
     ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
     ElImage: typeof import('element-ui/lib/image')['default']
     ElInput: typeof import('element-ui/lib/input')['default']
-    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']
--- a/src/views/search.vue
View file @2dc0f55
+++ b/src/views/search.vue
View file @2dc0f55
 <!--
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-20 18:50:25
+ * @LastEditTime: 2024-10-22 17:41:01
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
 -->
@@ -13,23 +13,33 @@
         <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', is_xs ? 'xs' : '']" v-for="(item, index) in product_list" :key="index">
-              <div class="search-product-item-img">
+              <div :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
-                <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
+              <p @click="goToDetail(item)" class="search-product-item-title">{{ item.title }}</p>
-              </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 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 separator="/">
               <el-breadcrumb-item>首页</el-breadcrumb-item>
               <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
-            </el-breadcrumb>
+            </el-breadcrumb> -->
-            <div class="search-news-wrapper">
+            <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
+              <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-tab-pane name="solution">
+          <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">
+            <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
               <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">
@@ -47,6 +57,7 @@
 import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import $ from 'jquery';
+import objectFitImages from 'object-fit-images';
 export default {
   components: { hagerBox },
@@ -63,6 +74,19 @@ export default {
         id: '456',
         title: '里程碑时刻！海格电气首台全新一代HW+空气断路器',
         content: '全新一代HW+空气断路器的整机下线，标志着海格电气在低压配电领域的进一步技术升级。作为海格电气在中国市场重磅推出的里程碑式产品，全新一代HW+空气断路器为大型建筑复杂、高负荷的用电需求提供高质量解决方案。',
+      }],
+      product_list: [{
+        id: '',
+        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
+        title: 'acb hw 空气断路器'
+      }, {
+        id: '',
+        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
+        title: 'acb hw 空气断路器'
+      }, {
+        id: '',
+        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
+        title: 'acb hw 空气断路器'
       }]
     }
   },
@@ -72,6 +96,7 @@ export default {
     }
   },
   mounted () {
+    objectFitImages(this.$el); // 对当前组件的 DOM 元素应用
   },
   methods: {
     handleClick(tab, event) {
@@ -93,6 +118,14 @@ export default {
           id: id
         }
       });
+    },
+    goToDetail (v) { // 跳转产品详情
+      this.$router.push({
+        path: '/product/detail',
+        query: {
+          id: v.id
+        }
+      });
     }
   }
 }
@@ -114,7 +147,7 @@ export default {
       margin-top: 1rem;
     }
     .search-product-item {
-      width: calc(33.33% - 1rem);
+      width: calc(33.54% - 1rem);
       &.xs {
         width: calc(50% - 1rem);
       }
@@ -129,11 +162,23 @@ export default {
       box-sizing: border-box;
       border-radius: 5px;
       border: 1px solid #ECECEC;
+      background-position: center;
+      background-size: 70%;
+      background-repeat: no-repeat;
+      &.xs {
+        padding: 3rem 1rem;
+        background-size: 100%;
+        img {
+          width: 100%;
+        }
+      }
     }
     .search-product-item-title {
-      text-align: center;
+      text-align: left;
       margin-top: 0.75rem;
       color: @text-color;
+      padding-left: 0.5rem;
+      font-weight: bold;
       &:hover {
         cursor: pointer;
         text-decoration: underline;
@@ -142,6 +187,9 @@ export default {
     .search-news-wrapper {
       margin: 1.5rem 0;
+      &.xs {
+        border-bottom: 1px solid #ECECEC;
+      }
       .search-news-title {
         font-size: 1.15rem;
         font-weight: bold;
@@ -157,6 +205,7 @@ export default {
           color: #F56400;
           padding: 0.5rem 2rem;
           border: 1px solid #F56400;
+          margin: 1rem 0;
           &:hover {
             cursor: pointer;
           }