搜索页面
This commit is contained in:
223
src/components/seachPage/input.vue
Normal file
223
src/components/seachPage/input.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x">
|
||||
<div class="body-maxWidth ">
|
||||
<div class="input-box dis-f al-item jus-bet body-maxWidth">
|
||||
<div class="dis-f al-item">
|
||||
<el-input v-model="seachVal" class="input-s" placeholder="Pick a date">
|
||||
<template #suffix>
|
||||
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="">
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="map-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/mapImg.png" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f al-item">
|
||||
<div class="tool-btn dis-f al-item jus-x">
|
||||
<img src="../../assets/homeImage/Mycollect.png" class="img" alt="">
|
||||
我的收藏
|
||||
</div>
|
||||
<div class="tool-btn dis-f al-item jus-x mg-l-10">
|
||||
<img src="../../assets/homeImage/informationO.png" class="img" alt="">
|
||||
我的发布
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-info-box body-maxWidth">
|
||||
<div class="top-box dis-f al-item">
|
||||
<div class="top-btn dis-f jus-x al-item">
|
||||
个人房源 521
|
||||
</div>
|
||||
<div class="top-btn dis-f jus-x al-item">
|
||||
中介房源 82
|
||||
</div>
|
||||
<div class="top-btn dis-f jus-x al-item">
|
||||
学生公寓 6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
let seachVal = ref('')
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mg-t-35 {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.seach-info-box {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
|
||||
.top-box {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
background: #62b1ff;
|
||||
position: relative;
|
||||
border-radius: 16px 16px 0 0;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.select-top-btn{
|
||||
|
||||
}
|
||||
|
||||
.first{
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
.second{
|
||||
left:180px;
|
||||
bottom:0;
|
||||
}
|
||||
.third{
|
||||
left:360px;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
.top-btn {
|
||||
width: 180px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
height: 92px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
transform: translateY(-35px);
|
||||
padding: 20px;
|
||||
|
||||
.mg-l-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
width: 150px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-s {
|
||||
width: 560px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 155px;
|
||||
margin-left: 10px;
|
||||
|
||||
.img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
color: #333333 !important;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px !important;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 0px !important;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
}</style>
|
||||
|
||||
Reference in New Issue
Block a user