116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<view class="search-ipt">
|
||
|
|
<view
|
||
|
|
class="check-type"
|
||
|
|
@click="
|
||
|
|
() => {
|
||
|
|
isSelectShow = !isSelectShow
|
||
|
|
}
|
||
|
|
"
|
||
|
|
>
|
||
|
|
{{ activeTypeName }}
|
||
|
|
<van-icon name="arrow-down" />
|
||
|
|
|
||
|
|
<view class="check-item" v-if="isSelectShow">
|
||
|
|
<view
|
||
|
|
@click.stop="
|
||
|
|
() => {
|
||
|
|
activeTypeName = '机具'
|
||
|
|
isSelectShow = !isSelectShow
|
||
|
|
}
|
||
|
|
"
|
||
|
|
>
|
||
|
|
机具
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
@click.stop="
|
||
|
|
() => {
|
||
|
|
activeTypeName = '需求'
|
||
|
|
isSelectShow = !isSelectShow
|
||
|
|
}
|
||
|
|
"
|
||
|
|
>
|
||
|
|
需求
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<van-field v-model="searchModelValue" />
|
||
|
|
<van-button square type="primary" icon="search" @click="onSearchBtn" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
const isSelectShow = ref(false)
|
||
|
|
const activeTypeName = ref('机具')
|
||
|
|
const searchModelValue = ref('')
|
||
|
|
const emits = defineEmits(['onSearchByType'])
|
||
|
|
const onSearchBtn = () => {
|
||
|
|
emits('onSearchByType', searchModelValue.value, activeTypeName.value === '机具' ? 1 : 2)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.search-ipt {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.check-type {
|
||
|
|
position: relative;
|
||
|
|
height: 36px;
|
||
|
|
width: 100px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
background-color: #fff;
|
||
|
|
border: 1px solid #22ab9b;
|
||
|
|
border-right: none;
|
||
|
|
border-top-left-radius: 18px;
|
||
|
|
border-bottom-left-radius: 18px;
|
||
|
|
|
||
|
|
.check-item {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
width: 70px;
|
||
|
|
left: 0;
|
||
|
|
transform: translateY(100%);
|
||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
|
|
transition: all 0.5s;
|
||
|
|
background-color: #fff;
|
||
|
|
z-index: 9;
|
||
|
|
view {
|
||
|
|
padding: 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.check-item view:hover {
|
||
|
|
background-color: #00a288;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.van-field {
|
||
|
|
padding: 0;
|
||
|
|
height: 36px;
|
||
|
|
line-height: 36px;
|
||
|
|
border: 1px solid #22ab9b;
|
||
|
|
// border-top-left-radius: 18px;
|
||
|
|
// border-bottom-left-radius: 18px;
|
||
|
|
padding-left: 18px;
|
||
|
|
border-left: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.van-button {
|
||
|
|
height: 36px;
|
||
|
|
width: 70px;
|
||
|
|
line-height: 36px;
|
||
|
|
background: #22ab9b;
|
||
|
|
border: none;
|
||
|
|
border-top-right-radius: 18px;
|
||
|
|
border-bottom-right-radius: 18px;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|