房源筛选组件 底部一级区域字体加粗 替换学校数据

src/components/selectTabBox/selectTabBox.vue

@@ -53,10 +53,10 @@
                             <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
                                 indicator-position="none" class="s-w-100" ref="schoolData">
                                 <el-carousel-item v-for="(item, i) in shcoolData" :key="i">
-                                    <div class="school-carousel-box">
+                                    <div class="school-carousel-box" :class="{ 'jus-sp': item.length === 4 }">
                                         <div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
                                             class="carousel-info-box"
-                                            :class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
+                                            :class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-35': (i + 1) % 4 !== 0 && item.length < 4 }]">
                                             {{ items.name }}
                                         </div>
                                     </div>
@@ -205,16 +205,12 @@
     </div>
     <div class="btm-list" v-if="routePath !== '/seachPage'">
         <div class="dis-f al-item">
-            共<span class="count">{{ count || 0 }}</span>条
-            {{ routePath === '/personHousing' ?
+            共<span class="count">{{ count || 0 }}</span>条{{ routePath === '/personHousing' ?
                 '个人房源' : routePath === '/intermediaryHousing' ?
                     '中介房源' : routePath === '/needHousing' ?
-                        '求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id">
-                &nbsp
-                |
-                &nbsp</span>
+                        '求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id" style="color: #aaaaaa;margin:0 15px;">|</span>
             <div class="dis-f al-item">
-                <div v-show="selectTabCheck.id && selectTabCheck.title">{{ selectTabCheck.title }}:</div>
+                <div v-show="selectTabCheck.id && selectTabCheck.title" class="bold-text">{{ selectTabCheck.title }}:</div>
                 <div class="dis-f" style="flex-wrap: wrap;width:800px;">
                     <div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
                         {{ item.title }}
@@ -351,16 +347,17 @@ let schoolSelectObj = reactive({ id: '', title: '不限' })
 let schoolPages = ref(0) //页数
 let shcoolData = shallowReactive([])
 let setSchoolData = () => {
-    let arr = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
+    console.log(store.state)
+    let arr = routePath.value === '/' ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
     arr.unshift({ name: '不限', id: '' })
     let num = 0
     for (let i = 0; i < arr.length; i++) {
         if (!shcoolData[num]) {
             shcoolData[num] = []
         }
-        if (shcoolData[num].length < 9) shcoolData[num].push(arr[i])
+        if (shcoolData[num].length < 4) shcoolData[num].push(arr[i])
 
-        if (shcoolData[num].length === 9) {
+        if (shcoolData[num].length === 4) {
             num++
         }
     }
@@ -749,6 +746,10 @@ export default {
     align-items: center;
 }
 
+.jus-sp {
+    justify-content: space-around;
+}
+
 .s-w-100 {
     width: 100%;
 }
@@ -871,8 +872,8 @@ img {
                 display: flex;
                 align-items: center;
 
-                .mg-r-15 {
-                    margin-right: 15px;
+                .mg-r-35 {
+                    margin-right: 35px;
                 }
 
                 .carousel-info-box {
@@ -1217,7 +1218,13 @@ img {
     color: #555555;
     font-size: 15px;
 
-    .bold-text {}
+    .bold-text {
+        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+        font-weight: 650;
+        font-style: normal;
+        font-size: 14px;
+        color: #000000;
+    }
 
     .btm-btn {
         font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -1225,7 +1232,7 @@ img {
         font-style: normal;
         font-size: 14px;
         color: #333333;
-        margin-left: 15px;
+        margin-left: 20px;
 
         .img {
             width: 8px;

src/main.js

@@ -84,6 +84,7 @@ api.index().then(res => {
   store.state.nav = res.data.nav
   store.state.wechat = res.data.wechat
   store.state.apartment = res.data.config.apartment
+  store.state.schoolList=res.data.schoolList
 }).finally(() => {
   app.mount('#app')
 })