XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

个人房源

Browse Source
This commit is contained in:
luJianJun
2023-07-13 18:08:54 +08:00
parent c051c60e7e
commit 5a918cda3e
7 changed files with 367 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/homeImage/topAuthenticationBg.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="590px" height="32px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="591.381733021077" y1="14" x2="67.7049180327869" y2="14" id="LinearGradient1124">
<stop id="Stop1125" stop-color="#fff9fd" stop-opacity="0" offset="0" />
<stop id="Stop1126" stop-color="#8080ff" offset="1" />
</linearGradient>
</defs>
<g>
<path d="M 0 15 A 15 15 0 0 1 15 0 L 575 0 A 15 15 0 0 1 590 15 L 590 32 L 0 32 L 0 15 Z " fill-rule="nonzero" fill="url(#LinearGradient1124)" stroke="none" />
</g>
</svg>

261
src/components/biserialListItem/biserialListItem.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<div class="list-item">
<div class="authentication-box dis-f al-item">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
</div>
<div class="top-box">
<div class="title-text">
123456789
</div>
<div class="mg-t-10 dis-f al-item jus-bet s-w-100">
<div>
<div class="dis-f al-item">
<div class="tab-item" :class="[{ 'mg-l-5': i > 0 }, { 'first-tab': i === 0 }]"
v-for="(item, i) in 5" :key="i">
{{ item }}
</div>
</div>
<div class="address-text dis-f al-item">
<img src="" class="img" alt="">
<span>九龙 > 尖沙咀/佐敦</span>
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price">5600</span>
<span>/月</span>
</div>
</div>
<div class="img">
<img src="" class="img" alt="">
</div>
</div>
<img src="../../assets/homeImage/corner.svg" class="tab-img" alt="">
</div>
<div class="btm-box dis-f al-item">
<img src="" class="user-img" alt="">
<span class="user-name">123</span>
<div class="btn">456456</div>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.jus-bet {
justify-content: space-between;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.authentication-box {
width: 100%;
height: 30px;
.bg {
height: 100%;
height: 100%;
}
.logo {
width: 18px;
height: 18px;
position: absolute;
left: 15px;
}
.text-img {
width: 81px;
height: 81px;
position: absolute;
left: 35px;
}
}
.list-item {
width: 590px;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
position: relative;
.mg-t-10 {
margin-top: 10px;
}
.img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px;
}
.top-box {
padding: 20px;
.tab-img {
width: 32px;
height: 32px;
position: absolute;
top: 0;
right: 0;
z-index: 66;
}
.title-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #000000;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mg-l-5 {
margin-left: 5px;
}
.tab-item {
padding: 5px;
background: inherit;
background-color: rgba(242, 242, 242, 1);
border: none;
border-radius: 6px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
}
.address-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
margin-top: 15px;
.img {
width: 18px;
height: 18px;
margin-right: 10px;
}
}
.price-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
margin-top: 15px;
.price {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
font-size: 20px;
color: #F95D5D;
line-height: 20px;
}
.unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif;
font-weight: 900;
color: #000000;
font-size: 14px;
}
}
.first-tab {
background: #000;
color: #fff;
}
}
.btm-box {
padding: 20px;
border-top: 1px dashed #d7d7d7;
.user-img {
width: 24px;
height: 24px;
border-radius: 50%;
}
.user-name {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 14px;
margin-left: 10px;
}
.btn {
margin-left: 10px;
padding: 3px 5px;
background: inherit;
background-color: rgba(242, 242, 242, 0);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(215, 215, 215, 1);
border-radius: 42px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
text-align: center;
}
}
}
</style>

48
src/components/pageTopBar/pageTopBar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="top-bg-img-box pos-r">
<div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }">
<img src="../../assets/homeImage/indexBg.png" class="bg-img" alt="">
<div class="info-box">
<!-- 顶部导航 -->
@@ -18,7 +18,7 @@
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="">
</div>
</div>
<div class="dis-f jus-x al-item" style="margin-top:20px;">
<div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="routePath === '/'">
<div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
<el-carousel-item v-for="item in 4" :key="item">
@@ -31,14 +31,13 @@
</div>
<div class="btm-seach-btn-box dis-f al-item jus-x">
<div class="body-maxWidth dis-f" style="height:48px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }"
v-for="(item, i) in seachTab.data" :key="i">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
<el-badge :value="12">
<div style="padding:0 10px;">
{{ item.name }}
</div>
</el-badge>
</div>
</div>
</div>
@@ -48,11 +47,33 @@
<script setup>
import store from '../../store/index';
import { useRoute, useRouter } from 'vue-router'
import { reactive, watchEffect, ref } from "vue";
//组件数据
let topTab = reactive({ data: [] })
let seachTab = reactive({ data: [] })
watchEffect(() => {
console.log(store.state.indexData.menu)
if (!store.state.indexData.menu) return
store.state.indexData.menu.map(res => {
if (res.name === '首页') {
res.path = '/'
} else if (res.name === '个人房源') {
res.path = '/personHousing'
}
else if (res.name === '中介房源') {
}
else if (res.name === '品牌公寓') {
}
else if (res.name === '求房源') {
}
else if (res.name === '我的') {
}
})
seachTab.data = store.state.indexData.menu
topTab.data = store.state.indexData.nav
})
@@ -64,6 +85,22 @@ let topTabSelect = (type, item) => {
window.open(item.url)
}
//页面跳转
const router=useRouter()
let tabBtnType = ref('/')
let changeTabBtnType = (item) => {
tabBtnType.value = item.path
router.push({
path: item.path
})
}
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
tabBtnType.value = route.path
</script>
<style scoped>
.pos-r {
@@ -97,7 +134,6 @@ let topTabSelect = (type, item) => {
.top-bg-img-box {
width: 100%;
height: 568px;
}
.top-bg-img-box .bg-img {

51
src/components/seachModule/seachModule.vue
View File

@@ -51,21 +51,21 @@
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
发布房源
</div>
<div class=" dis-f jus-x al-item authentication-btn">
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath==='/personHousing'">
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
</div>
</div>
<div class="seach-info-box dis-f">
<div class="seach-info-box dis-f" v-if="routePath==='/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"></seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<!-- <div>
<div v-if="routePath==='/personHousing'">
<selectTabBox></selectTabBox>
</div> -->
</div>
</div>
</div>
</div>
@@ -73,30 +73,13 @@
</template>
<script setup>
import { ref, defineProps, watchEffect,reactive,watch } from 'vue';
import { ref, watchEffect,reactive,watch } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRouter} from 'vue-router'
//监听路由
const router = useRouter()
watch(()=>router.currentRoute.value,(nVal)=>{
console.log(nVal)
})
import { useRoute } from 'vue-router';
import store from '../../store/index';
const props = defineProps({
list: {
type: Array,
default: function () {
return []
}
},
hotList:{
type:Array,
default:function(){
return []
}
}
})
//搜索框
let seachValue = ref('')
let historyShow = ref(false);
@@ -109,12 +92,18 @@ let allHireType={};//合租
let seachArea={};//区域找房
let historyArr =reactive({data:[]})//历史查找记录
let hotArr =reactive({data:[]})
//监听路由
const route = useRoute()
let routePath=ref('')
routePath.value=route.path
watchEffect(() => {
seachSchoolBtn.data = props.list[0] ? props.list[0].where : []
hireType.data = props.list[2] ? props.list[2].where[0].data : []
allHireType.data = props.list[2] ? props.list[2].where[1].data : []
seachArea.data = props.list[1] ? props.list[1].where : []
hotArr.data=props.hotList
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
hotArr.data=store.state.indexData.hotSearcheWords
})
//获取历史搜索记录
@@ -126,8 +115,6 @@ let seachList=()=>{
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
}
defineExpose({
historyShow,
seachValue

2
src/components/selectTabBox/selectTabBox.vue
View File

@@ -106,7 +106,7 @@
</div>
</div>
</div>
<div class="select-box s-w-50 bor-r">
<div class="select-box s-w-50">
<div class="dis-f bor-b-das">
<div class="tab-title">租期</div>
<div class="select-btn-box">

3
src/views/HomeView.vue
View File

@@ -3,7 +3,7 @@
<pageTopBar></pageTopBar>
<!-- <headerNavigation></headerNavigation> -->
<!-- 搜索模块 -->
<seachModule :list="seachTypeData.data" :hotList="indexData.data.hotSearcheWords"></seachModule>
<seachModule></seachModule>
<!-- 房源展示 -->
<div class="dis-f jus-x al-item" style="margin-top:25px;">
<div class="body-maxWidth dis-f al-item">
@@ -269,6 +269,7 @@ let listDataTypeChange = (item) => {
waterfallList[2] = []
waterfallList[3] = []
waterfallList[4] = []
pages.value=1
getRecommendList()
}

21
src/views/housingView/person.vue
View File

@@ -1,11 +1,25 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule></seachModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet">
<div>
<biserialItem></biserialItem>
</div>
<div></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
</script>
<style scoped>
img {
@@ -37,5 +51,12 @@ img {
width: 100%;
}
.jus-bet {
justify-content: space-between;
}
.mg-t-35 {
margin-top: 35px;
}
</style>