<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>