修改显示
suixy
17 hours ago
parent
fd3277c342
commit
1f04de6d40
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="searchBtn">
|
||||
<el-button @click="dialogVisible = true" size="small" icon="el-icon-search" circle></el-button>
|
||||
</div>
|
||||
<el-dialog top="5vh" width="80%" :append-to-body="true" title="搜索" :visible.sync="dialogVisible">
|
||||
<el-input @keyup.enter.native="onSubmit" style="width: 100%" v-model="form.keyword" placeholder="搜索内容">
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="onSubmit"></i>
|
||||
</el-input>
|
||||
<div style="width: 100%;text-align: center;font-size: 1.4vw;line-height: 3vw;font-weight: 600">{{
|
||||
(list.length + list1.length) || 0
|
||||
}}个相关结果
|
||||
</div>
|
||||
<div class="container" v-if="list.length > 0">
|
||||
<div class="tabs">
|
||||
<div class="content">
|
||||
<div @click="checkTabs(k)"
|
||||
style="width:calc(50% - 2px - 4vw);white-space: nowrap;overflow: auto;text-align: center"
|
||||
:class="`tab ${tabsActive == k ? 'active':''}`" v-for="(i,k) in ['行业方案','产品中心']">
|
||||
{{ i }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="classify" v-if="tabsActive == 0">
|
||||
<div class="item" v-for="i in list" @click="toLink(i.link)">
|
||||
<div class="img">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 10vw"
|
||||
:src="i.img"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="itemTime">
|
||||
{{ i.time }}
|
||||
</div>
|
||||
<div class="itemTitle" v-html="i.snippet">
|
||||
</div>
|
||||
<div class="itemText">
|
||||
{{ i.title }}
|
||||
</div>
|
||||
<div class="itemViewMore">
|
||||
查看详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="classify" v-if="tabsActive == 1">
|
||||
<div class="item" v-for="i in list1" @click="toLink1(i.link)">
|
||||
<div class="img">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 10vw"
|
||||
:src="i.img"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="itemTime">
|
||||
{{ i.time }}
|
||||
</div>
|
||||
<div class="itemTitle" v-html="i.snippet">
|
||||
</div>
|
||||
<div class="itemText">
|
||||
{{ i.title }}
|
||||
</div>
|
||||
<div class="itemViewMore">
|
||||
查看详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {search} from '@/api/search'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {},
|
||||
list: [],
|
||||
list1: [],
|
||||
tabsActive: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
search(this.form).then(res => {
|
||||
this.list = []
|
||||
this.list1 = []
|
||||
res.data?.rows?.forEach(e => {
|
||||
if (e.sourceType === 'web1') {
|
||||
this.list1.push({
|
||||
snippet: e.snippet,
|
||||
title: e.title,
|
||||
link: e.title?.split('详情#')?.[1]?.split('-')
|
||||
})
|
||||
}
|
||||
if (e.sourceType === 'web') {
|
||||
this.list.push({
|
||||
snippet: e.snippet,
|
||||
title: e.title,
|
||||
link: e.routeQuery?.id
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
toLink(e) {
|
||||
this.$router.push(`/test?id=${e}`)
|
||||
this.dialogVisible = false
|
||||
},
|
||||
toLink1(e) {
|
||||
this.$router.push(`/productCenter/detail?type=${e[0]}&typeId=${e[1]}&id=${e[2]}`)
|
||||
this.dialogVisible = false
|
||||
},
|
||||
checkTabs(k) {
|
||||
console.log(k)
|
||||
this.tabsActive = k
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import "~@/style.less";
|
||||
|
||||
.searchBtn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: calc(100% - 40px);
|
||||
background-color: #0001;
|
||||
height: calc(80vh - 125px - 3vw);
|
||||
padding: 0 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
em {
|
||||
color: red;
|
||||
background: yellow;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.classify {
|
||||
position: relative;
|
||||
|
||||
.classifyName {
|
||||
background-color: #eee;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
color: #42b983;
|
||||
font-size: 1.2vw;
|
||||
line-height: 4vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: calc(25% - 2vw);
|
||||
margin-right: 2vw;
|
||||
margin-bottom: 2vw;
|
||||
background-color: #fff;
|
||||
//border-bottom: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
.itemViewMore {
|
||||
color: @standard-color;
|
||||
}
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
line-height: 3vw;
|
||||
font-size: 0.8vw;
|
||||
font-weight: bold;
|
||||
color: #0006;
|
||||
}
|
||||
|
||||
.itemViewMore {
|
||||
line-height: 3vw;
|
||||
font-size: 0.8vw;
|
||||
font-weight: bold;
|
||||
color: #0006;
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
line-height: 1.8vw;
|
||||
font-size: 1vw;
|
||||
font-weight: bold;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
/deep/ em {
|
||||
color: #42b983;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.itemText {
|
||||
width: 100%;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
cursor: pointer;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.tab {
|
||||
display: inline-block;
|
||||
line-height: 6.2vw;
|
||||
letter-spacing: 3px;
|
||||
font-size: 1vw;
|
||||
position: relative;
|
||||
padding: 0 2vw;
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 1vw;
|
||||
background-color: #409eff;
|
||||
top: calc(50% - 0.5vw);
|
||||
}
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: @standard-color;
|
||||
//border: 1px solid #fff6;
|
||||
//box-shadow: 0 0 3px #0002;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue