楼层切换按钮

guanqb

2022-09-30 0d8460241bbd6e0d71d1aa53814802d10b293228

楼层切换按钮

 src/views/house/index.vue

@@ -238,7 +238,7 @@
                                <i class="el-icon-caret-left"></i>
                            </div>
                            <div class="floor-box">
                                <div class="floor-num">
                                <div class="floor-num" style="left: 0">
                                    <div :class="{on:floorsType == 1}" @click="floorsType = 1">1~5层</div>
                                    <div :class="{on:floorsType == 2}" @click="floorsType = 2">6~10层</div>
                                    <div
@@ -1086,11 +1086,22 @@
        },
        lastFloorBtn () {
            console.log(111)
            document.querySelector(".floor-num").style.left = parseInt(document.querySelector(".floor-num").style.left) + 84 + 'px'
            this.nextFloorShow = true
            if (Math.abs(parseInt(document.querySelector(".floor-num").style.left)) == 0) {
                this.lastFloorShow = false
            }
            console.log('111', Math.abs(parseInt(document.querySelector(".floor-num").style.left)))
        },
        nextFloorBtn () {
            console.log('点击了有按钮')
            console.log(document.querySelector(".floor-box").style.left)//NaN
            // document.querySelector(".floor-box").style.left = '-50px'
            if (parseInt(document.querySelector(".floor-num").offsetWidth) > Math.abs(parseInt(document.querySelector(".floor-num").style.left)) + 84) {
                document.querySelector(".floor-num").style.left = parseInt(document.querySelector(".floor-num").style.left) - 84 + 'px'
                this.lastFloorShow = true
                if (parseInt(document.querySelector(".floor-num").offsetWidth) == Math.abs(parseInt(document.querySelector(".floor-num").style.left)) + 252) {
                    this.nextFloorShow = false
                }
            }
        },
    },

@@ -1434,7 +1445,7 @@
                            left: 350px;
                        }
                        .floor-box {
                            width: 276px;
                            width: 252px;
                            height: 26px;
                            position: absolute;
                            overflow: hidden;
@@ -1443,7 +1454,7 @@
                                display: flex;
                                align-items: center;
                                position: absolute;
                                width: 700px;
                                width: 504px;
                                left: 0;
                                transition: all 1s;