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