<template>
|
<div class="custom-search3">
|
<div class="custom-search-before" @click="ActionSheet">
|
<input class="input-inner" type="text" readonly="readonly" autocomplete="off" placeholder="请选择"
|
v-model="searchType.text">
|
<span class="input-append">
|
<svg t="1638954207837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
p-id="6664" width="128" height="128"><path
|
d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6665"
|
fill="#606060"></path></svg>
|
</span>
|
</div>
|
<div class="custom-search-after">
|
<input class="input-inner" type="text" autocapitalize="off" placeholder="请输入检索词" v-model="searchName"/>
|
<div class="input-append" v-on:click="Search">
|
<svg t="1638943404588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
p-id="6664" width="200" height="200">
|
<path
|
d="M469.333 192c153.174 0 277.334 124.16 277.334 277.333 0 68.054-24.534 130.411-65.216 178.688L846.336 818.24l-48.341 49.877L630.4 695.125a276.053 276.053 0 0 1-161.067 51.542C316.16 746.667 192 622.507 192 469.333S316.16 192 469.333 192z m0 64C351.51 256 256 351.51 256 469.333s95.51 213.334 213.333 213.334 213.334-95.51 213.334-213.334S587.157 256 469.333 256z"
|
p-id="6665" fill="#BC0000"></path>
|
</svg>
|
</div>
|
</div>
|
<actionsheet
|
:actions="searchTypeItems"
|
v-model="actionsheet">
|
</actionsheet>
|
</div>
|
</template>
|
|
<script>
|
import {Actionsheet} from 'mint-ui';
|
|
export default {
|
name: "CustomSearch3",
|
components: {Actionsheet},
|
data() {
|
return {
|
actionsheet: false,
|
searchType: {
|
text: "名称",
|
value: "title",
|
},
|
searchName: "",
|
searchTypeItems: [{
|
name: "名称",
|
value: "title",
|
method: this.SearchTypeItem
|
}, {
|
name: "关键字",
|
value: "keywords",
|
method: this.SearchTypeItem
|
}, {
|
name: "简介",
|
value: "descriprion",
|
method: this.SearchTypeItem
|
}],
|
}
|
},
|
methods: {
|
ActionSheet: function () {
|
this.actionsheet = true;
|
},
|
SearchTypeItem: function (obj) {
|
this.searchType = {
|
text: obj.name,
|
value: obj.value,
|
}
|
},
|
Search: function () {
|
this.$emit('search', this.searchType.value, this.searchName)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.icon {
|
fill: currentColor;
|
color: #EFC587;
|
}
|
|
.custom-search3 {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
justify-content: center;
|
align-items: center;
|
|
width: 100%;
|
}
|
|
.custom-search-before {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
justify-content: center;
|
align-items: center;
|
|
width: 25%;
|
height: 4vh;
|
background: #FAFAFA;
|
border: 2px solid #EAEAEA;
|
border-radius: 6px;
|
margin-right: 1rem;
|
}
|
|
.custom-search-before .input-inner {
|
width: 70%;
|
height: 100%;
|
border: 0;
|
background-color: rgba(0, 0, 0, 0);
|
|
font-size: 1.5rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 1.5rem;
|
color: #606060;
|
cursor: pointer
|
}
|
|
.custom-search-before .input-inner:focus {
|
outline: none;
|
}
|
|
.custom-search-before .input-append {
|
width: 30%;
|
height: 100%;
|
cursor: pointer;
|
}
|
|
.custom-search-before .input-append svg {
|
max-width: 2rem;
|
width: 100%;
|
height: 100%;
|
}
|
|
|
.custom-search-after {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
justify-content: center;
|
align-items: center;
|
|
width: 75%;
|
height: 4vh;
|
background: white;
|
border: 2px solid #BC0000;
|
opacity: 1;
|
border-radius: 6px;
|
}
|
|
.custom-search-after .input-inner {
|
width: 85%;
|
height: 3vh;
|
border: 0;
|
border-radius: 200px;
|
|
font-size: 1.4rem;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
line-height: 1.4rem;
|
color: #767676;
|
opacity: 1;
|
}
|
|
.custom-search-after .input-inner:focus {
|
outline: none;
|
}
|
|
.custom-search-after .input-append {
|
width: 9%;
|
height: 95%;
|
cursor: pointer;
|
}
|
|
.custom-search-after .input-append svg {
|
max-width: 2rem;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
