筛选文字 认证房源修改为认证中介 首页骨架增加圆角

src/components/detail/imageWatch.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="watch-box">
+        <div class="pos-r dis-f al-item mg-t-60">
+            <div class="s-w-100">
+                <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
+                    <el-carousel-item v-for="(item, i) in list" :key="i">
+                        <div class="dis-f jus-x al-item">
+                            <div class="img-box">
+                                {{ item }}
+                                <img src="" class="img" alt="">
+                            </div>
+                        </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="next" alt="">
+            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="prev" alt="">
+        </div>
+        <div class="tab-text">
+            {{ `${imageTab + 1}/${list.length}` }}
+        </div>
+        <div class="dis-f jus-x al-item">
+            <div class="list-img-box dis-f al-item">
+                <div v-for="(item, i) in list" :key="i">
+                    <div class="voide" :class="{ 'select-box': imageTab === i }">
+                        <div class="icon-box dis-f jus-x al-item">
+                            <img src="" class="icon" alt="">
+                        </div>
+                    </div>
+                    <!-- <div class="img" :class="{ 'select-box': imageTab === i }"></div> -->
+                </div>
+            </div>
+        </div>
+        <img src="../../assets/img/detail/imageClose.svg" class="close-img" alt="">
+    </div>
+</template>
+  
+<script setup>
+import { reactive, onMounted, ref, defineProps } from 'vue'
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: function () {
+            return [1, 2, 3, 4, 5]
+        }
+    }
+})
+let list = props.list
+
+let carousel = ref(null)
+let imageTab = ref(0)
+//上一张
+let prev = () => {
+    if (imageTab.value === list.length) return
+    imageTab.value++
+    carousel.value.prev()
+    console.log(imageTab.value)
+}
+
+//下一张
+let next = () => {
+    if (imageTab.value <= 0) return
+    imageTab.value--
+    carousel.value.next()
+    console.log(imageTab.value)
+}
+</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%;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.close-img {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+}
+
+.right-arrow {
+    right: 30px;
+    z-index: 66;
+}
+
+.left-arrow {
+    left: 30px;
+    z-index: 66;
+    transform: rotate(180deg);
+}
+
+.image-arrow-icon {
+    width: 18px;
+    height: 30px;
+    position: absolute;
+}
+
+.mg-t-60 {
+    margin-top: 60px;
+}
+
+.watch-box {
+    width: 100%;
+    height: 100%;
+    background: #4c4c4c;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    .tab-text {
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 14px;
+        color: #FFFFFF;
+        text-align: center;
+        padding: 20px 0;
+    }
+
+    .list-img-box {
+        overflow-x: scroll;
+        width: 800px;
+        height: 100px;
+
+        .select-box {
+            border: 1px solid #50e3c2;
+        }
+
+        .img {
+            height: 60px;
+            border: 1px solid transparent;
+            margin-left: 5px;
+            border-radius: 8px;
+        }
+
+        .voide {
+            width: 60px;
+            height: 60px;
+            border: 1px solid transparent;
+            margin-left: 5px;
+            border-radius: 8px;
+
+            .icon-box {
+                width: 60px;
+                height: 60px;
+                background: inherit;
+                background-color: rgba(51, 51, 51, 0.733333333333333);
+                border: none;
+                border-radius: 8px;
+
+                .icon {
+                    width: 18px;
+                    height: 18px;
+                }
+            }
+        }
+    }
+
+    .img-box {
+        width: 800px;
+        height: 600px;
+        background: #fff;
+        border-radius: 10px;
+        overflow: hidden;
+
+        .img {
+            height: 600px;
+        }
+    }
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+</style>
+  

src/components/selectTabBox/selectTabBox.vue

@@ -243,23 +243,23 @@ import store from '../../store/index';
 let configData = reactive({ data: {} })
 
 //保存筛选参数
-let setStoreSelectData=(obj,data,type)=>{
-    console.log(store.state.seachSelect)
-    // otherCheck['list']
-    // releaseObj.id
-    // gender.id 
-    // hireDate.id 
-    // hireDate.title 
-    // hireTypeObj.id
-    // hireTypeObj.title
-    // hireTypeObj.hireId 
-    // selectTabCheck.id
-    // selectTabCheck.title 
-    // selectTabCheck.data
-    // selectData.data
-    // schoolSelectObj.id
-    // schoolSelectObj.title
-}
+// let setStoreSelectData=(obj,data,type)=>{
+//     console.log(store.state.seachSelect)
+//     // otherCheck['list']
+//     // releaseObj.id
+//     // gender.id 
+//     // hireDate.id 
+//     // hireDate.title 
+//     // hireTypeObj.id
+//     // hireTypeObj.title
+//     // hireTypeObj.hireId 
+//     // selectTabCheck.id
+//     // selectTabCheck.title 
+//     // selectTabCheck.data
+//     // selectData.data
+//     // schoolSelectObj.id
+//     // schoolSelectObj.title
+// }
 
 //监听路由
 const route = useRouter()
@@ -491,7 +491,7 @@ let setHireId = (item) => {
 let dropdownCommand = (obj) => {
     hireTypeObj.id = obj.id
     hireTypeObj.title = obj.title
-    store.state.routeList['hireTypeObj']=JSON.parse(JSON.stringify(hireTypeObj))
+    store.state.routeList['hireTypeObj'] = JSON.parse(JSON.stringify(hireTypeObj))
     setSeachCondition('types', obj.id)
 }
 
@@ -572,9 +572,13 @@ let cleanSelect = () => {
 //根据路由设置参数
 let setRouterQuerySet = ref(true)
 let routerQuerySet = () => {
-    // console.log(setRouterQuerySet.value)
     if (!setRouterQuerySet.value) return
     //路由参数设置
+    if ((routeQuery.data && routeQuery.data.houseingPageType === '1') || (routePath.value === '/intermediaryHousing')) {
+        otherData = reactive([{ title: '认证中介', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
+    } else {
+        otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
+    }
     if (Object.keys(routeQuery.data).length > 0) {
         if (!routeQuery.data || routeQuery.data && !routeQuery.data.data) return
         let data = JSON.parse(routeQuery.data.data)
@@ -589,12 +593,10 @@ let routerQuerySet = () => {
             hireTypeObj.hireId = type == 1 ? '合租' : type == 2 ? '整租' : '不限'
         } else if (routeQuery.data.type === 'location') {
             let areaItem = JSON.parse(routeQuery.data.areaItem)
-            console.log(areaItem)
             selectTabCheck.id = areaItem.id;
             selectTabCheck.title = areaItem.name
             selectTabCheck.data = list[areaItem.id].data;
             selectData.data = seachAreaId(data)
-            console.log(selectData.data)
             setCheckBoxData(data)//设置地区选项
         }
     }
@@ -970,14 +972,17 @@ img {
         margin-right: 10px;
         text-align: center;
         cursor: pointer;
-        border:1px solid transparent;
+        border: 1px solid transparent;
     }
-    .btn:hover{
-        border:1px solid rgba(235,235,235,1)
+
+    .btn:hover {
+        border: 1px solid rgba(235, 235, 235, 1)
     }
-    .dropdown-btn:hover{
-        border:1px solid rgba(235,235,235,1);
+
+    .dropdown-btn:hover {
+        border: 1px solid rgba(235, 235, 235, 1);
     }
+
     .dropdown-btn {
         height: 30px;
         display: flex;
@@ -992,7 +997,7 @@ img {
         text-align: center;
         padding: 5px 10px;
         cursor: pointer;
-        border:1px solid transparent;
+        border: 1px solid transparent;
 
         .mg-l-30 {
             margin-left: 30px !important;

src/components/skeletonBox/skeletonBox.vue

@@ -2,7 +2,7 @@
     <div>
         <el-skeleton style="width: 240px" :animated="true">
             <template #template>
-                <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
+                <el-skeleton-item variant="image" style="width: 240px; height: 240px;border-radius:8px;" />
                 <div style="padding: 14px">
                     <el-skeleton-item variant="p" style="width: 50%" />
                     <div style="