个人房源

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>