个人房源

src/assets/homeImage/topAuthenticationBg.svg

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

src/components/biserialListItem/biserialListItem.vue

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

src/components/pageTopBar/pageTopBar.vue

@@ -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 }"
+          <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">
+            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 {

src/components/seachModule/seachModule.vue

@@ -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'
+import { useRoute } from 'vue-router';
-//监听路由
+import store from '../../store/index';
-const router = useRouter()
+
-watch(()=>router.currentRoute.value,(nVal)=>{
-    console.log(nVal)
-})
 
-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 : []
+    seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
-    hireType.data = props.list[2] ? props.list[2].where[0].data : []
+    hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
-    allHireType.data = props.list[2] ? props.list[2].where[1].data : []
+    allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
-    seachArea.data = props.list[1] ? props.list[1].where : []
+    seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
-    hotArr.data=props.hotList
+    hotArr.data=store.state.indexData.hotSearcheWords
 })
 
 //获取历史搜索记录
@@ -126,8 +115,6 @@ let seachList=()=>{
     localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
 }
 
-
-
 defineExpose({
     historyShow,
     seachValue

src/components/selectTabBox/selectTabBox.vue

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

src/views/HomeView.vue

@@ -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()
 }
 

src/views/housingView/person.vue

@@ -1,41 +1,62 @@
 <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 {
-  object-fit: contain;
+    object-fit: contain;
 }
 
 .dis-f {
-  display: flex;
+    display: flex;
 }
 
 .jus-x {
-  justify-content: center;
+    justify-content: center;
 }
 
 .al-item {
-  align-items: center;
+    align-items: center;
 }
 
 .pos-r {
-  position: relative;
+    position: relative;
 }
 
 .body-maxWidth {
-  width: 1200px;
+    width: 1200px;
-  min-width: 1200px;
+    min-width: 1200px;
 }
 
 .s-w-100 {
-  width: 100%;
+    width: 100%;
 }
 
+.jus-bet {
+    justify-content: space-between;
+}
+
+.mg-t-35 {
+    margin-top: 35px;
+}
 </style>