首页顶部导航

src/components/pageTopBar/pageTopBar.vue

@@ -33,7 +33,9 @@
           <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
             :key="i">
             <el-badge :value="12">
+              <div style="padding:0 10px;">
                 {{ item.title }}
+              </div>
             </el-badge>
 
           </div>
@@ -191,7 +193,7 @@ export default {
 
 .top-bg-img-box .info-box .btm-seach-btn-box {
   width: 100%;
-  height: 43px;
+  height: 50px;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -201,7 +203,7 @@ export default {
 
 .top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
   width: 120px;
-  height: 43px;
+  height: 47px;
   font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
   font-weight: 400;
   font-style: normal;

src/components/public/head.vue

@@ -4,7 +4,7 @@
             <div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">
                 {{ item }}</div>
             <img class="header-nav-item header-user-img"
-                src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
+                src="">
         </nav>
         <div class="logo-box flexacenter">
             <img class="logo-icon" src="@/assets/img/edit/logo.png" />
@@ -15,7 +15,15 @@
 
         <nav class="nav-box flexflex">
             <div class="nav-list wid1200 flexflex">
-                <div class="nav-item" v-for="item in tabList" :key="item">{{ item.name }}</div>
+                <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in tabList"
+                    :key="i">
+                    <el-badge :value="12">
+                        <div class="pd-rl-10">
+                           {{ item.name }} 
+                        </div>
+                    </el-badge>
+
+                </div>
             </div>
         </nav>
     </header>
@@ -140,15 +148,55 @@ const tabList = [{
         transform: translateX(-50%);
         margin: 0 auto;
         width: 100%;
-        height: 43px;
+        height: 50px;
         background: rgba(0, 0, 0, 0.596078431372549);
         border-bottom: 4px solid rgba(78, 144, 204, 1);
 
         .nav-list {
-            background: red;
+            color: #E2EDF7;
+            text-align: center;
             margin: 0 auto;
         }
 
     }
 }
+
+.tab-btn {
+    width: 120px;
+    height: 46px;
+    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 18px;
+    color: #E2EDF7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .pd-rl-10{
+       padding:0 10px;
+    }
+}
+
+.tab-btn-click {
+    background-color: rgba(98, 177, 255, 1);
+    border: none;
+    border-bottom: 0px;
+    border-radius: 8px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 18px;
+    color: #FFFFFF;
+}
+
+.carousel-img {
+    margin: 0 auto;
+    width: 660px;
+    height: 280px;
+}
 </style>

src/utils/axios.js

@@ -86,6 +86,8 @@ const $post = (url, params) => {
 }
 //下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
 export default {
+    get:$get,
+    post:$post,
     install: (app) => {
         app.config.globalProperties['$get'] = $get;
         app.config.globalProperties['$post'] = $post;

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
-    <!-- <pageTopBar></pageTopBar> -->
+    <pageTopBar></pageTopBar>
-    <header></header>
+    <!-- <headerNavigation></headerNavigation> -->
     <!-- 搜索模块 -->
     <seachModule></seachModule>
     <!-- 房源展示 -->
@@ -171,7 +171,7 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
 import seachModule from "../components/seachModule/seachModule.vue";
 import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
-import header from '../components/public/head.vue'
+import headerNavigation from '../components/public/head.vue'
 
 // 
 let informationData = [