修改搜索中心布局
This commit is contained in:
zyx.net
@@ -40,18 +40,28 @@
|
||||
<div class="search-con-header">
|
||||
<div class="search-header-left">
|
||||
<!-- <span>搜索模块</span>-->
|
||||
<span class="search-header-item" v-for="item in options"
|
||||
:class="{'search-header-item-active':selectOption.indexOf(item.value) !== -1 }"
|
||||
@click="selectModel(item.value)"
|
||||
>{{item.value}}</span>
|
||||
</div>
|
||||
<div class="search-header-right" v-if="showList">
|
||||
<!-- <a-icon type="appstore" />-->
|
||||
<a-icon :type="item.type" v-for="item in listOption" class="header-list"
|
||||
:class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"
|
||||
@click="selectListModel(item.value)"
|
||||
></a-icon>
|
||||
<a-tabs default-active-key="1" @change="callback">
|
||||
<a-tab-pane key="全部" tab="全部"></a-tab-pane>
|
||||
<a-tab-pane key="文档库" tab="文档库" force-render>
|
||||
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="知识问题库" tab="知识问题库"></a-tab-pane>
|
||||
<a-tab-pane key="文档对比库" tab="文档对比库"></a-tab-pane>
|
||||
<a-tab-pane key="周报" tab="周报"></a-tab-pane>
|
||||
</a-tabs>
|
||||
<!-- <span class="search-header-item" v-for="item in options"-->
|
||||
<!-- :class="{'search-header-item-active':selectOption.indexOf(item.value) !== -1 }"-->
|
||||
<!-- @click="selectModel(item.value)"-->
|
||||
<!-- >{{item.value}}</span>-->
|
||||
</div>
|
||||
|
||||
<!-- <div class="search-header-right" v-if="showList">-->
|
||||
<!--<!– <a-icon type="appstore" />–>-->
|
||||
<!-- <a-icon :type="item.type" v-for="item in listOption" class="header-list"-->
|
||||
<!-- :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"-->
|
||||
<!-- @click="selectListModel(item.value)"-->
|
||||
<!-- ></a-icon>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="search-con-text">
|
||||
<div class="search-text-wrap">
|
||||
@@ -79,6 +89,13 @@
|
||||
<div class="search-text-title">
|
||||
<span>检索范围：</span>
|
||||
<span>纯电动</span>
|
||||
<div class="search-header-right" v-if="showList">
|
||||
<!-- <a-icon type="appstore" />-->
|
||||
<a-icon :type="item.type" v-for="item in listOption" class="header-list"
|
||||
:class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"
|
||||
@click="selectListModel(item.value)"
|
||||
></a-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-text-list">
|
||||
<a-table
|
||||
@@ -96,16 +113,22 @@
|
||||
<j-ellipsis :value="text" :length="25" />
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
<ul v-if="!searchShow">
|
||||
<li v-for="item in conList" :key="item.id">
|
||||
<div class="text-header">
|
||||
<span>{{item.type}}</span>
|
||||
<span>{{item.number}}</span>
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<div class="text-content">
|
||||
{{item.content}}
|
||||
</div>
|
||||
<a-checkbox @change="onChangecheck" style="margin-top: 20px;">
|
||||
<div :class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" style="margin-top: -67px;margin-left: 45px;padding: 24px;">
|
||||
<div class="text-header">
|
||||
<span>{{item.type}}</span>
|
||||
<span>{{item.number}}</span>
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<div class="text-content">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</div>
|
||||
</a-checkbox>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<a-pagination size="small" :total="50" class="paginationbox" :show-total="total => `总共 ${total} 条`" show-size-changer show-quick-jumper />
|
||||
@@ -124,6 +147,7 @@
|
||||
data(){
|
||||
return{
|
||||
selectedRowKeys:[],
|
||||
isNullInput:false,
|
||||
columns: [
|
||||
{
|
||||
title: '编号',
|
||||
@@ -185,6 +209,7 @@
|
||||
],
|
||||
selectOption:'全部',
|
||||
showList:false,
|
||||
showbox:false,
|
||||
listOption:[
|
||||
{
|
||||
label:'list',
|
||||
@@ -347,6 +372,14 @@
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onChangecheck(value){
|
||||
console.log(`checked = ${value.target.checked}`)
|
||||
if(`checked = ${value.target.checked}` == 'checked = true'){
|
||||
this.isNullInput = true;
|
||||
}else{
|
||||
this.isNullInput = false;
|
||||
}
|
||||
},
|
||||
selectModel(value){
|
||||
this.selectOption=value
|
||||
if(value=='文档库'){
|
||||
@@ -355,6 +388,26 @@
|
||||
this.showList=false
|
||||
}
|
||||
},
|
||||
callback(key){
|
||||
console.log(key)
|
||||
this.selectOption=key
|
||||
// if(key =='全部' || key =='知识问题库' || key =='文档对比库' || key =='周报') {
|
||||
// this.showbox = true
|
||||
// }else{
|
||||
// this.showbox = false
|
||||
// this.showList=true
|
||||
// }
|
||||
if(key=='文档库'){
|
||||
this.showList=true
|
||||
}else{
|
||||
this.showList=false
|
||||
}
|
||||
if(key=='段落'){
|
||||
this.searchShow=true
|
||||
}else{
|
||||
this.searchShow=false
|
||||
}
|
||||
},
|
||||
onSearch(){
|
||||
|
||||
},
|
||||
@@ -378,12 +431,22 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search-center{
|
||||
background-color: #ffffff;
|
||||
.null-input{
|
||||
background-color: #F2F4F8;
|
||||
}
|
||||
|
||||
.no-null-input{
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.search-center-wrap{
|
||||
margin: 10px;
|
||||
.search-detail{
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
.search-detail-wrap{
|
||||
margin-top: 30px;
|
||||
min-width: 800px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -391,6 +454,7 @@
|
||||
width: 120px;
|
||||
margin-right: 10px;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
input{
|
||||
min-width: 300px;
|
||||
@@ -428,37 +492,12 @@
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
.search-header-right{
|
||||
span{
|
||||
border: 1px solid rgba(0,0,0,0.65);
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
border-right: none;
|
||||
}
|
||||
span:last-child{
|
||||
border-right: 1px solid rgba(0,0,0,0.65) ;
|
||||
}
|
||||
.header-list{
|
||||
font-size: 20px;
|
||||
border: 1px solid gray;
|
||||
padding: 5px;
|
||||
}
|
||||
.header-list:hover{
|
||||
color:#1890FF;
|
||||
}
|
||||
.header-list-active{
|
||||
background: #1890FF;
|
||||
color: #ffffff;
|
||||
}
|
||||
.header-list-active:hover{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.search-con-text{
|
||||
.search-text-wrap{
|
||||
|
||||
.search-text-wrap{
|
||||
margin-top: -27px;
|
||||
background: #ffffff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -471,24 +510,30 @@
|
||||
.text-left-select{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
margin: 23px 0;
|
||||
line-height: 32px;
|
||||
.text-sel{
|
||||
margin-right: 10px;
|
||||
min-width: 70px;
|
||||
//span{
|
||||
// float: right;
|
||||
//}
|
||||
text-align: right;
|
||||
margin-right: 27px;
|
||||
min-width: 83px;
|
||||
}
|
||||
.text-select{
|
||||
flex: 1;
|
||||
//margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.text-left-date{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 32px;
|
||||
margin: 10px 0;
|
||||
margin: 23px 0;
|
||||
span.data-fb{
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
min-width: 70px;
|
||||
min-width: 83px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -499,7 +544,38 @@
|
||||
//border: 1px solid #000;
|
||||
margin-left: 10px;
|
||||
.search-text-title{
|
||||
padding: 3px 5px;
|
||||
padding: 16px 5px;
|
||||
.search-header-right{
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
a-icon{
|
||||
|
||||
border: 1px solid rgba(0,0,0,0.65);
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
border-right: none;
|
||||
}
|
||||
a-icon:last-child{
|
||||
border-right: 1px solid rgba(0,0,0,0.65) ;
|
||||
}
|
||||
.header-list{
|
||||
font-size: 20px;
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
.header-list:hover{
|
||||
color:#00B3BE;
|
||||
}
|
||||
.header-list-active{
|
||||
border:1px solid #00B3BE;
|
||||
color:#00B3BE;
|
||||
}
|
||||
.header-list-active:hover{
|
||||
color: gray;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.search-text-list{
|
||||
ul {
|
||||
@@ -508,7 +584,7 @@
|
||||
li{
|
||||
list-style: none;
|
||||
margin-bottom: 20px;
|
||||
background: #f6f6f6;
|
||||
//background: #f6f6f6;
|
||||
//border: 1px solid #000000;
|
||||
//border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
Reference in New Issue
Block a user