Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a5ddcdfc 1 parent 3509a833

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

Inline Side-by-side
Showing 1 changed file with 56 additions and 11 deletions
<!--
* @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">
<div slot="label" class="customer-label">新闻&nbsp;&nbsp;<span>3</span></div>
<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">
<!-- <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">
<div slot="label" class="customer-label">解决方案&nbsp;&nbsp;<span>3</span></div>
<el-tab-pane name="success">
<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>
......