个人房源

src/components/pageTopBar/pageTopBar.vue

@@ -5,10 +5,8 @@
       <!-- 顶部导航 -->
       <div class="dis-f jus-x al-item index-top-navigation-box">
         <div class="index-top-navigation dis-f al-item body-maxWidth">
-          <div class="navigation-text" 
-          @click="topTabSelect(i,item)"
-          :class="{ 'navigation-text-click': item.key === topTabNum }" 
-          v-for="(item, i) in topTab.data" :key="i">
+          <div class="navigation-text" @click="topTabSelect(i, item)"
+            :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
             {{
               item.name }}</div>
           <img src="" class="user-img" alt="">
@@ -33,8 +31,8 @@
       </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': i === 0 }"
+            v-for="(item, i) in seachTab.data" :key="i">
             <el-badge :value="12">
               <div style="padding:0 10px;">
                 {{ item.name }}
@@ -49,26 +47,19 @@
 </template>
   
 <script setup>
-import { defineProps, reactive, watchEffect, ref } from "vue";
-const props=defineProps({
-  tabMens:{
-    type:Object,
-    default:function(){
-      return {}
-    }
-  }
-})
+import store from '../../store/index';
+import { reactive, watchEffect, ref } from "vue";
 //组件数据
-let topTab=reactive({data:[]})
-let seachTab = reactive({data:[]})
-watchEffect(()=>{
-  seachTab.data=props.tabMens.menu
-  topTab.data=props.tabMens.nav
+let topTab = reactive({ data: [] })
+let seachTab = reactive({ data: [] })
+watchEffect(() => {
+  seachTab.data = store.state.indexData.menu
+  topTab.data = store.state.indexData.nav
 })
 
 //顶部导航跳转
-let topTabNum=ref('fang')
-let topTabSelect=(type,item)=>{
+let topTabNum = ref('fang')
+let topTabSelect = (type, item) => {
   // topTabNum.value=type
   window.open(item.url)
 }
@@ -97,6 +88,7 @@ let topTabSelect=(type,item)=>{
 
 .body-maxWidth {
   width: 1200px;
+  min-width: 1200px;
 }
 
 .s-w-100 {
@@ -219,5 +211,45 @@ let topTabSelect=(type,item)=>{
   width: 660px;
   height: 280px;
 }
+
+/deep/.el-carousel__arrow {
+  border: 2px solid #545454;
+  width: 50px;
+  height: 50px;
+}
+
+/deep/.el-icon {
+  font-size: 20px;
+}
+
+/deep/.el-carousel__indicator--horizontal {
+  padding: var(--el-carousel-indicator-padding-vertical) 2px;
+}
+
+/deep/ .el-carousel__button {
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+}
+
+/deep/ .is-active button {
+  background: #62b1ff;
+}
+
+/deep/ .el-input__wrapper {
+  background: inherit;
+  background-color: rgba(246, 246, 246, 1);
+  border-right: 0px;
+  border-radius: 8px 0 0 8px;
+}
+
+/deep/ .el-input__inner {
+  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #7F7F7F;
+  text-align: left;
+}
 </style>
   

src/router/index.js

@@ -35,6 +35,10 @@ const routes = [
     meta: {
       title: "我的"
     }
+  },
+  {//个人房源
+    path:'/personHousing',
+    component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
   }
 ]
 

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <pageTopBar :tabMens="indexData.data"></pageTopBar>
+    <pageTopBar></pageTopBar>
     <!-- <headerNavigation></headerNavigation> -->
     <!-- 搜索模块 -->
     <seachModule :list="seachTypeData.data" :hotList="indexData.data.hotSearcheWords"></seachModule>
@@ -246,7 +246,7 @@ let loadMore = ref(true)
 //瀑布流数据
 let getRecommendList = () => {
   api.recommendList({
-    page: pages,
+    page: pages.value,
     limit: 30,
     type: ListSelectBtn.selectType
   }).then(res => {

src/views/housingView/person.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <pageTopBar></pageTopBar> 
+    </div>
+</template>
+  
+<script setup>
+import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
+</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%;
+}
+
+</style>
+