个人房源

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