选项卡样式修改

src/assets/img/detail/videoStop.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -444 -741 )">
+    <path d="M 7.470703125 2.01171875  C 9.76888020833333 0.670572916666664  12.2786458333333 0  15 0  C 17.7213541666667 0  20.2311197916667 0.670572916666664  22.529296875 2.01171875  C 24.8274739583333 3.35286458333333  26.6471354166667 5.17252604166667  27.98828125 7.470703125  C 29.3294270833333 9.76888020833333  30 12.2786458333333  30 15  C 30 17.7213541666667  29.3294270833333 20.2311197916667  27.98828125 22.529296875  C 26.6471354166667 24.8274739583333  24.8274739583333 26.6471354166667  22.529296875 27.98828125  C 20.2311197916667 29.3294270833333  17.7213541666667 30  15 30  C 12.2786458333333 30  9.76888020833333 29.3294270833333  7.470703125 27.98828125  C 5.17252604166667 26.6471354166667  3.35286458333333 24.8274739583333  2.01171875 22.529296875  C 0.670572916666667 20.2311197916667  0 17.7213541666667  0 15  C 0 12.2786458333333  0.670572916666667 9.76888020833333  2.01171875 7.470703125  C 3.35286458333333 5.17252604166667  5.17252604166667 3.35286458333333  7.470703125 2.01171875  Z M 11.875 22.32421875  L 22.5 16.07421875  C 22.9166666666667 15.83984375  23.125 15.4817708333333  23.125 15  C 23.125 14.5182291666667  22.9166666666667 14.16015625  22.5 13.92578125  L 11.875 7.67578125  C 11.4713541666667 7.42838541666667  11.0546875 7.421875  10.625 7.65625  C 10.2083333333333 7.90364583333333  10 8.26822916666666  10 8.75  L 10 21.25  C 10 21.7317708333333  10.2083333333333 22.0963541666667  10.625 22.34375  C 10.8333333333333 22.4479166666667  11.0416666666667 22.5  11.25 22.5  C 11.4713541666667 22.5  11.6796875 22.44140625  11.875 22.32421875  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.8" transform="matrix(1 0 0 1 444 741 )" />
+  </g>
+</svg>

src/components/seachModule/seachModule.vue

@@ -171,7 +171,7 @@ let seachList = (item) => {
         query: {
             keyword: seachAllType.keyword,
             isNeedHousing:routePath.value === '/needHousing',
-            houseingPageType:routePath.value === '/needHousing'?6:routePath.value === '/intermediaryHousing'?1:routePath.value === '/personHousing'?0:''
+            houseingPageType:routePath.value === '/needHousing'?6:routePath.value === '/intermediaryHousing'?1:routePath.value === '/personHousing'?0:0
         }
     })
     // if (routePath.value === '/') {

src/components/seachPage/input.vue

@@ -46,6 +46,14 @@
                         </div>
                         求房源
                     </div>
+                    <div class="top-btn dis-f jus-x al-item second" v-if="isNeedHousing"
+                        @click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
+                        <div class="first-select">
+                            <div class="box">
+
+                            </div>
+                        </div>
+                    </div>
                     <div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing"
                         @click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
                         <div class="first-select" v-show="tabType === 'person'">
@@ -77,6 +85,13 @@
                         </div>
                         学生公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
                     </div>
+                    <div class="top-btn dis-f jus-x al-item four" v-if="!isNeedHousing">
+                        <div class="second-select-third-box" v-show="tabType === 'apartment'">
+                            <div class="box">
+
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
                     <apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo">
@@ -181,11 +196,11 @@ let selectTabBoxInfo = ref(null)//个人/中介筛选实例
 let apartmentSelectInfo = ref(null)//公寓筛选实例
 //设置请求数据
 let selectPage = (type) => {
-    if(type===seachAllType['tabType'])return
+    if (type === seachAllType['tabType']) return
     if (type === 'apartment') {
         selectTabBoxInfo.value.cleanSelect()//清空筛选数据
     } else {
-        apartmentSelectInfo.value.cleanSelect&&apartmentSelectInfo.value.cleanSelect()
+        apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect()
     }
     //清空数据
     if (type === 'apartment')
@@ -369,15 +384,15 @@ let getLocationData = (data) => {
 }
 
 //更新当前数据数量
-let setListCount=(item,num)=>{
+let setListCount = (item, num) => {
-    console.log(item,num)
+    console.log(item, num)
     console.log(seachKey.key)
-    if(item.tabType==="intermediary"){
+    if (item.tabType === "intermediary") {
-        seachKey.key['intermediary']['count']=num
+        seachKey.key['intermediary']['count'] = num
-    }else if(item.tabType==="person"){
+    } else if (item.tabType === "person") {
-        seachKey.key['personal']['count']=num
+        seachKey.key['personal']['count'] = num
-    }else if(item.tabType==="apartment"){
+    } else if (item.tabType === "apartment") {
-        seachKey.key['studentapartment']['count']=num
+        seachKey.key['studentapartment']['count'] = num
     }
 }
 
@@ -641,6 +656,31 @@ img {
             }
         }
 
+        .four {
+            left:600px;
+            bottom: 0;
+            background: #62b1ff;
+
+            .second-select-third-box {
+                position: absolute;
+                background: #fff;
+                top: 0;
+                left: -4px;
+                height: 45px;
+                width: 30px;
+                z-index: 88;
+
+                .box {
+                    border-radius: 0 0 0 16px;
+                    background: #62b1ff;
+                    height: 45px;
+                    width: 30px;
+                    position: absolute;
+                    left:0;
+                }
+            }
+        }
+
         .top-btn {
             width: 200px;
             height: 45px;

src/views/detail.vue

@@ -51,16 +51,79 @@
                                 <img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
                                 <div class="num-box">2</div>
                             </div>
-                            <div>
+                            <div class="img-list-box dis-f jus-x al-item">
-                                <img src="../assets/img/detail/moreNot.svg" alt="">
+                                <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
-                                <img src="../assets/img/detail/moreAllow.svg" alt="">
+                                    @click="moveImageList('left')">
-                                <el-carousel indicator-position="outside" height="150" :autoplay="false" ref="imgCarousel">
+                                <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
-                                    <el-carousel-item v-for="item in 1" :key="item">
+                                    @click="moveImageList('right')">
-                                        <div >
+                                <div class="dis-f al-item list-box" ref="imageList">
-
+                                    <div v-for="(item, i) in imgList" :key="i">
+                                        <div class="video" v-if="item === 1">
+                                            <div class="icon-box dis-f jus-x al-item">
+                                                <img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
+                                            </div>
+                                            <img class="video" ref="imgData" src="" @load="setImageWidth(i)"
+                                                @error="setImageWidth(i)" alt="">
                                         </div>
-                                    </el-carousel-item>
+                                        <div class="img" v-if="item > 1"
-                                </el-carousel>
+                                            :style="{ 'background': i % 2 === 0 ? '#000' : '#eee' }">
+                                            <img class="img" ref="imgData" src="" @load="setImageWidth(i)"
+                                                @error="setImageWidth(i)" alt="">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="housing-info">
+                            <div class="title dis-f al-item">
+                                <img src="../assets/img/detail/infoIcon.png" class="img" alt="">
+                                <span>
+                                    基本信息
+                                </span>
+                            </div>
+                            <div class="info-box-s dis-f">
+                                <div class="info">
+                                    <span>
+                                        房屋类型
+                                    </span>
+                                    <span class="text">
+                                        洋楼
+                                    </span>
+                                </div>
+                                <div class="info">
+                                    <span>
+                                        所在楼层
+                                    </span>
+                                    <span class="text">
+                                        28
+                                    </span>|<span class="text">
+                                        有电梯
+                                    </span>
+                                </div>
+                                <div class="info">
+                                    <span>
+                                        晾晒区
+                                    </span>
+                                    <span class="text">
+                                        阳台
+                                    </span>
+                                </div>
+                                <div class="info">
+                                    <span>
+                                        面积
+                                    </span>
+                                    <span class="text">
+                                        680 平方呎
+                                    </span>
+                                </div>
+                                <div class="info">
+                                    <span>
+                                        性别要求
+                                    </span>
+                                    <span class="text">
+                                        男女皆可
+                                    </span>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -80,14 +143,47 @@
 </template>
   
 <script setup>
-import { reactive, onMounted, ref } from 'vue'
+import { reactive, onMounted, ref, nextTick } from 'vue'
 import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import circleBtn from '@/components/public/circle-btn.vue'
 import api from "../utils/api";
 import footerTool from '@/components/footer/footer.vue'
 import breadcrumb from '../components/detail/breadcrumb.vue'
 
+//视频实例
+let imageList = ref(null)
 
+let imgList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
+
+let imgListTab = ref(0)
+//计时器
+let interval = ''
+//点击方向按钮
+let moveImageList = (type) => {
+    if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return
+    type === 'left' ? imgListTab.value-- : imgListTab.value++
+    setOffsetWidth(imgList.value[imgListTab.value] * imgListTab.value, type)
+}
+//设置滚动
+let setOffsetWidth = (num, type) => {
+    let scroll = null
+    interval = setInterval(() => {
+        scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
+        if (num === scroll) {
+            clearInterval(interval)
+        }
+    })
+}
+
+let imgData = ref(null)
+//获取图片宽度
+let setImageWidth = (num) => {
+    imgList.value[num] = imgData.value[num].offsetWidth + 10
+}
+
+onMounted(() => {
+
+})
 
 </script>
 <style scoped>
@@ -214,7 +310,7 @@ img {
         .img-icon {
             width: 22px;
             height: 22px;
-            margin: 0 5px 0 10px
+            margin: 0 5px 0 10px;
         }
 
         .num-box {
@@ -230,6 +326,116 @@ img {
             font-style: normal;
             font-size: 14px;
         }
+
+        .img-list-box {
+            padding: 0 20px;
+            position: relative;
+            overflow: hidden;
+            height: 100px;
+            width: 100%;
+            cursor: pointer;
+            margin-top: 20px;
+
+            .list-box::-webkit-scrollbar {
+                display: none;
+            }
+
+            .list-box {
+                overflow-x: scroll;
+                height: 100px;
+                color: #fff;
+
+                .icon-box {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    background: rgba(51, 51, 51, 0.733333333333333);
+                    width: 100px;
+                    height: 100px;
+                    border-radius: 10px;
+
+                    .icon {
+                        width: 30px;
+                        height: 30px;
+                    }
+                }
+
+                .video {
+                    width: 100px;
+                    height: 100px;
+                    border-radius: 10px;
+                    background: #000;
+                    margin-right: 10px;
+                    flex-shrink: 0;
+                    position: relative;
+                }
+
+                .img {
+                    height: 100px;
+                    width: 120px;
+                    border-radius: 10px;
+                    background: #000;
+                    margin-right: 10px;
+                    flex-shrink: 0
+                }
+            }
+
+            .icon {
+                width: 10px;
+                height: 17px;
+            }
+
+            .left-icon {
+                position: absolute;
+                left: 0px;
+            }
+
+            .right-icon {
+                position: absolute;
+                right: 0px;
+            }
+        }
+    }
+
+    .housing-info {
+        margin-top: 50px;
+
+        .info-box-s {
+            margin-top: 30px;
+            flex-wrap: wrap;
+
+            .info {
+                width: 150px;
+                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                color: #7F7F7F;
+                font-size: 14px;
+
+                .text {
+                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+                    font-weight: 400;
+                    font-style: normal;
+                    font-size: 16px;
+                    color: #333;
+                    margin-left:30px;
+                }
+            }
+        }
+
+        .img {
+            width: 20px;
+            height: 22px;
+            margin-right: 10px;
+        }
+
+        .title {
+            font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+            font-weight: 650;
+            font-style: normal;
+            font-size: 20px;
+            color: #000000;
+        }
     }
 }
 </style>