搜索页面新增tab标签，自适应模式下左右箭头颜色状态优化

hookehuyr
Commit a5ddcdfc105be37cead2f6220d802fd59c671e51 a5ddcdfc 1 parent 3509a833
Showing 1 changed file with 56 additions and 11 deletions
src/views/search.vue
--- a/src/views/search.vue
View file @a5ddcdf
+++ b/src/views/search.vue
View file @a5ddcdf
 <!--
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 17:41:01
+ * @LastEditTime: 2024-10-25 15:39:59
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
 -->
@@ -20,13 +20,9 @@
           </div>
           <div style="height: 5rem;"></div>
         </el-tab-pane>
-        <el-tab-pane name="news">
+        <el-tab-pane name="solution">
-          <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-item>首页</el-breadcrumb-item>
-              <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
-            </el-breadcrumb> -->
             <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>
@@ -36,8 +32,8 @@
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane name="solution">
+        <el-tab-pane name="success">
-          <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">
             <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
               <div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
@@ -48,6 +44,22 @@
             </div>
           </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', 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-tabs>
     </hager-box>
   </div>
@@ -87,18 +99,44 @@ export default {
         id: '',
         img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
         title: 'acb hw 空气断路器'
-      }]
+      }],
+      is_end: false
     }
   },
   watch: {
     '$route.query.keyword': function(newKeyword) {
       this.keyword = newKeyword || '';
-    }
+    },
   },
   mounted () {
     objectFitImages(this.$el); // 对当前组件的 DOM 元素应用
+    if (this.is_xs) { // 自适应模式下，左右箭头的颜色修改
+      this.modifyTabColor();
+    }
+    // 监听窗口的 resize 事件
+    window.addEventListener('resize', this.modifyTabColor);
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除监听器，防止内存泄漏
+    window.removeEventListener('resize', this.modifyTabColor);
   },
   methods: {
+    modifyTabColor () {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          // next按钮修改颜色
+          $('.el-tabs__nav-wrap').children('span.el-tabs__nav-next').css('color', '#F56400');
+          $('.el-tabs__nav-wrap').children('span.el-tabs__nav-next').on('click', (e) => {
+            $('.el-tabs__nav-wrap').children('span.el-tabs__nav-next').css('color', '#333')
+            $('.el-tabs__nav-wrap').children('span.el-tabs__nav-prev').css('color', '#F56400')
+          })
+          $('.el-tabs__nav-wrap').children('span.el-tabs__nav-prev').on('click', (e) => {
+            $('.el-tabs__nav-wrap').children('span.el-tabs__nav-next').css('color', '#F56400')
+            $('.el-tabs__nav-wrap').children('span.el-tabs__nav-prev').css('color', '#333')
+          })
+        }, 100);
+      })
+    },
     handleClick(tab, event) {
       console.log(tab, event);
     },
@@ -237,4 +275,11 @@ export default {
       color: #F56400;
     }
   }
+
+  :deep(.el-tabs__nav-prev) {
+    font-size: 1rem;
+  }
+  :deep(.el-tabs__nav-next) {
+    font-size: 1rem;
+  }
 </style>