66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="title">以人找房</div>
|
||
<div class="search">
|
||
<input type="text" placeholder="请输入人名以查找房" v-model="keywords">
|
||
<Icon class="search-btn" @click="onSearchClick">
|
||
<Search24Filled />
|
||
</Icon>
|
||
</div>
|
||
<div class="notes">请输入关键字：姓名、身份证、手机号等</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, inject } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { Search24Filled } from '@vicons/fluent';
|
||
import { Icon } from '@vicons/utils';
|
||
|
||
const router = useRouter();
|
||
const keywords = ref('');
|
||
|
||
const onSearchClick = () => {
|
||
router.push({
|
||
path: '/house-list',
|
||
query: {
|
||
keywords: keywords.value
|
||
}
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.container
|
||
margin-top 200px
|
||
display flex
|
||
flex-direction column
|
||
align-items center
|
||
justify-content center
|
||
.title
|
||
font-size 28px
|
||
font-weight bold
|
||
.search
|
||
margin-top 30px
|
||
border 2px solid #03DCDCDC
|
||
border-radius 3px
|
||
position relative
|
||
.search-btn
|
||
font-size 30px
|
||
padding 3px
|
||
color #525e71
|
||
position absolute
|
||
top 1px
|
||
right 0px
|
||
cursor pointer
|
||
input
|
||
width 600px
|
||
padding 0 40px 0 15px
|
||
height 37px
|
||
border none
|
||
outline none
|
||
.notes
|
||
margin-top 22px
|
||
font-size 12px
|
||
</style> |