Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2dc0f551 1 parent 997549de

搜索自适应页面调整

Inline Side-by-side
Showing 2 changed files with 61 additions and 15 deletions
......@@ -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']
......
<!--
* @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-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 :class="['search-product-item', is_xs ? 'xs' : '']" v-for="(item, index) in product_list" :key="index">
<div :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
<p @click="goToDetail(item)" class="search-product-item-title">{{ item.title }}</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>
<div class="search-news-wrapper">
</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-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;
}
......