You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
3.3 KiB
144 lines
3.3 KiB
<template>
|
|
<div class="search-list">
|
|
<span style="height: 28px; line-height: 28px; font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">栏目：</span>
|
|
<!-- <a-select allow-clear style="width: 120px" @change="handleChange">
|
|
<a-select-option v-for="(item, index) in bannerList" :key="index" :value="index + 1"> {{ item }} </a-select-option>
|
|
</a-select> -->
|
|
<span
|
|
class="ban-style"
|
|
:class="bannerNum === index + 1 ? 'ban-act' : ''"
|
|
@click="onClick(index)"
|
|
v-for="(item, index) in bannerList"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</span>
|
|
<br />
|
|
<span style="font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">类型：</span>
|
|
<span
|
|
class="ban-style"
|
|
:class="typeNum === index + 1 ? 'ban-act' : ''"
|
|
@click="onClick1(index)"
|
|
v-for="(item, index) in typeList"
|
|
:key="index + 10"
|
|
>
|
|
{{ item }}
|
|
</span>
|
|
<br />
|
|
<span style="font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">时间：</span>
|
|
<span
|
|
class="ban-style"
|
|
:class="timeNum === index + 1 ? 'ban-act' : ''"
|
|
@click="onClick2(index)"
|
|
v-for="(item, index) in timeList"
|
|
:key="item"
|
|
>
|
|
{{ item }}
|
|
</span>
|
|
<a-input placeholder="搜索标题..." class="search-ipt" allow-clear style="width: 30%" v-model="titleText" />
|
|
<a-button class="search-btn" type="primary" @click="submit">搜索</a-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
typeList: ['视频', '音频', '文档', '全部'],
|
|
typeNum: 0,
|
|
bannerList: ['栏目1', '栏目2', '栏目3', '全部'],
|
|
bannerNum: 0,
|
|
titleText: '',
|
|
timeList: ['近七天', '近一个月', '近一年', '全部'],
|
|
timeNum: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
submit() {
|
|
// console.log(this.getParam);
|
|
const getParam = {
|
|
typeNum: this.typeNum,
|
|
bannerNum: this.bannerNum,
|
|
titleText: this.titleText,
|
|
};
|
|
this.$emit('getData', getParam);
|
|
},
|
|
handleChange(e) {
|
|
if (e) {
|
|
this.bannerNum = e;
|
|
} else {
|
|
this.bannerNum = '';
|
|
}
|
|
},
|
|
handleChange1(e) {
|
|
if (e) {
|
|
this.typeNum = e;
|
|
} else {
|
|
this.typeNum = '';
|
|
}
|
|
},
|
|
onClick1(index) {
|
|
if (index + 1 === this.typeNum) {
|
|
this.typeNum = 0;
|
|
} else {
|
|
this.typeNum = index + 1;
|
|
}
|
|
},
|
|
onClick(index) {
|
|
if (index + 1 === this.bannerNum) {
|
|
this.bannerNum = 0;
|
|
} else {
|
|
this.bannerNum = index + 1;
|
|
}
|
|
},
|
|
onClick2(index) {
|
|
if (index + 1 === this.timeNum) {
|
|
this.timeNum = 0;
|
|
} else {
|
|
this.timeNum = index + 1;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.search-list {
|
|
position: relative;
|
|
height: 108px;
|
|
line-height: 36px;
|
|
// background: #fff;
|
|
box-shadow: 0 0 4px #ccc;
|
|
border-radius: 4px;
|
|
padding: 0 24px;
|
|
position: relative;
|
|
margin: 40px auto;
|
|
}
|
|
|
|
.search-btn {
|
|
position: absolute;
|
|
right: 19px;
|
|
height: 34px;
|
|
top: 38px;
|
|
width: 80px;
|
|
font-size: 16px;
|
|
// color: white !important;
|
|
// background-color: #0195DA !important;
|
|
// border-color: #0195DA !important;
|
|
}
|
|
|
|
.ban-style {
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ban-act {
|
|
color: #E77816;
|
|
}
|
|
|
|
.search-ipt {
|
|
position: absolute;
|
|
right: 100px;
|
|
top: 39px;
|
|
}
|
|
</style>
|
|
|