|
@@ -1,7 +1,21 @@
|
|
|
<template>
|
|
|
<div class='floor-box'>
|
|
|
<div class='floor-list'>
|
|
|
- <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
|
|
|
+ <i class='el-icon-caret-top icon-top' v-if='showT' @click='removeTop'></i>
|
|
|
+ <i class='el-icon-caret-top icon-top' v-else style='color:#ccc'></i>
|
|
|
+ <div class='floor-out'>
|
|
|
+ <div class='floor-center'>
|
|
|
+ <div
|
|
|
+ class='floor-item'
|
|
|
+ :class='item.id==floorId?"isActive":""'
|
|
|
+ @click='tabFloor(item)'
|
|
|
+ v-for='(item,index) in floors'
|
|
|
+ :key='index'
|
|
|
+ >{{item.floorName}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 611 299 607 329 609 360 -->
|
|
|
+ <!-- <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
|
|
|
<a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
|
|
|
<span class='floors'>
|
|
|
<span class='font-group'>
|
|
@@ -15,7 +29,9 @@
|
|
|
</span>
|
|
|
</span>
|
|
|
<a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
|
|
|
- <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
|
|
|
+ <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />-->
|
|
|
+ <i class='el-icon-caret-bottom icon-bottom' v-if='showB' @click='removeBottom'></i>
|
|
|
+ <i class='el-icon-caret-bottom icon-bottom' v-else style='color:#ccc'></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -25,6 +41,8 @@ export default {
|
|
|
return {
|
|
|
floorId: 'f1',
|
|
|
floorName: 'F3',
|
|
|
+ showT: true,
|
|
|
+ showB: true,
|
|
|
showTopButton: true,
|
|
|
showBottomButton: true
|
|
|
}
|
|
@@ -36,7 +54,6 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
tabFloor(item) {
|
|
|
- console.log(item)
|
|
|
this.showTopButton = true
|
|
|
this.showBottomButton = true
|
|
|
this.floorId = item.id
|
|
@@ -58,29 +75,37 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
removeTop() {
|
|
|
- let tempFloorIdList = []
|
|
|
- let tempFloorIndex = 0
|
|
|
- let clickCount = 0
|
|
|
- this.floors.map(el => {
|
|
|
- tempFloorIdList.push(el.id)
|
|
|
- })
|
|
|
- tempFloorIdList.forEach((el, index) => {
|
|
|
- if (el == this.floorId) {
|
|
|
- tempFloorIndex = index
|
|
|
- if (tempFloorIndex == 1) {
|
|
|
- this.showTopButton = false
|
|
|
- }
|
|
|
- if (tempFloorIndex != 0) {
|
|
|
- tempFloorIndex--
|
|
|
- clickCount += 1
|
|
|
- let fontGroup = document.querySelector('.font-group')
|
|
|
- fontGroup.style.top = 254 - clickCount * 40 + 'px'
|
|
|
- this.showBottomButton = true
|
|
|
- }
|
|
|
- console.log(tempFloorIndex)
|
|
|
- }
|
|
|
- })
|
|
|
- this.floorId = tempFloorIdList[tempFloorIndex]
|
|
|
+ // let tempFloorIdList = []
|
|
|
+ // let tempFloorIndex = 0
|
|
|
+ // let clickCount = 0
|
|
|
+ // this.floors.map(el => {
|
|
|
+ // tempFloorIdList.push(el.id)
|
|
|
+ // })
|
|
|
+ // tempFloorIdList.forEach((el, index) => {
|
|
|
+ // if (el == this.floorId) {
|
|
|
+ // tempFloorIndex = index
|
|
|
+ // if (tempFloorIndex == 1) {
|
|
|
+ // this.showT = false
|
|
|
+ // }
|
|
|
+ // console.log(tempFloorIndex)
|
|
|
+ // if (tempFloorIndex != 0) {
|
|
|
+ // tempFloorIndex--
|
|
|
+ // clickCount++
|
|
|
+ // console.log(clickCount)
|
|
|
+ // let fontGroup = document.querySelector('.floor-center')
|
|
|
+ // fontGroup.style.top = clickCount * -28 + 'px'
|
|
|
+ // console.log(fontGroup.style.top)
|
|
|
+ // this.showB = true
|
|
|
+ // }
|
|
|
+ // console.log(tempFloorIndex)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // this.floorId = tempFloorIdList[tempFloorIndex]
|
|
|
+ // let map = document.querySelector('.floor-center')
|
|
|
+ // console.log(map.style.height)
|
|
|
+ // let floor = document.querySelector('.floor-item')
|
|
|
+ // map.style.bottom = -28 + 'px'
|
|
|
+ // console.log(map.style.bottom)
|
|
|
},
|
|
|
removeBottom() {
|
|
|
let tempFloorIdList = []
|
|
@@ -99,9 +124,9 @@ export default {
|
|
|
if (tempFloorIndex != tempFloorIdList.length - 1) {
|
|
|
tempFloorIndex++
|
|
|
clickCount += 1
|
|
|
- let fontGroup = document.querySelector('.font-group')
|
|
|
- fontGroup.style.top += clickCount * 40 + 'px'
|
|
|
- this.showTopButton = true
|
|
|
+ let fontGroup = document.querySelector('.floor-center')
|
|
|
+ fontGroup.style.top += clickCount + 28 + 'px'
|
|
|
+ this.showB = true
|
|
|
}
|
|
|
}
|
|
|
})
|
|
@@ -113,75 +138,134 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.floor-box {
|
|
|
position: fixed;
|
|
|
- top: 154px;
|
|
|
right: 32px;
|
|
|
-
|
|
|
+ top: 196px;
|
|
|
.floor-list {
|
|
|
- position: fixed;
|
|
|
- right: 32px;
|
|
|
- top: 208px;
|
|
|
- width: 40px;
|
|
|
- background: #ffffff;
|
|
|
+ width: 44px;
|
|
|
+ height: 212px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ position: relative;
|
|
|
+ padding: 28px 4px;
|
|
|
text-align: center;
|
|
|
- .floors {
|
|
|
- position: fixed;
|
|
|
- right: 32px;
|
|
|
- top: 234px;
|
|
|
- width: 40px;
|
|
|
- height: 140px;
|
|
|
- background: #ffffff;
|
|
|
- text-align: center;
|
|
|
+ .floor-out {
|
|
|
+ height: 160px;
|
|
|
overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .font-group {
|
|
|
- position: fixed;
|
|
|
- right: 36px;
|
|
|
- top: 234px;
|
|
|
- width: 36px;
|
|
|
- background: #ffffff;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .eq-floor {
|
|
|
+ // overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+ // &::-webkit-scrollbar {
|
|
|
+ // display: none;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .floor-center {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ .floor-item {
|
|
|
width: 36px;
|
|
|
height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- text-align: center;
|
|
|
- background: #fff;
|
|
|
- display: block;
|
|
|
+ margin: 3px 0;
|
|
|
cursor: pointer;
|
|
|
- font-size: 14px;
|
|
|
- margin-left: 2px;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- .isActive {
|
|
|
- border-radius: 4px;
|
|
|
- color: #025baa;
|
|
|
- background: #e1f2ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .i-style1 {
|
|
|
- right: 32px;
|
|
|
- position: fixed;
|
|
|
- top: 210px;
|
|
|
- width: 40px;
|
|
|
- height: 28px;
|
|
|
- background: #fff;
|
|
|
+
|
|
|
+ .icon-top {
|
|
|
text-align: center;
|
|
|
- line-height: 28px;
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
- .i-style2 {
|
|
|
- right: 32px;
|
|
|
- position: fixed;
|
|
|
- top: 374px;
|
|
|
- width: 40px;
|
|
|
- height: 28px;
|
|
|
- background: #fff;
|
|
|
+ .icon-bottom {
|
|
|
text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .isActive {
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #025baa;
|
|
|
+ background: #e1f2ff;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
+ // background: #ffffff;
|
|
|
+ // text-align: center;
|
|
|
+ // .floors {
|
|
|
+ // position: fixed;
|
|
|
+ // right: 32px;
|
|
|
+ // top: 234px;
|
|
|
+ // width: 40px;
|
|
|
+ // height: 140px;
|
|
|
+ // background: #ffffff;
|
|
|
+ // text-align: center;
|
|
|
+ // overflow: hidden;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // .font-group {
|
|
|
+ // position: fixed;
|
|
|
+ // right: 36px;
|
|
|
+ // top: 234px;
|
|
|
+ // width: 36px;
|
|
|
+ // background: #ffffff;
|
|
|
+ // text-align: center;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // border: 2px solid green;
|
|
|
+ // .eq-floor {
|
|
|
+ // width: 36px;
|
|
|
+ // height: 28px;
|
|
|
+ // line-height: 28px;
|
|
|
+ // text-align: center;
|
|
|
+ // background: #fff;
|
|
|
+ // display: block;
|
|
|
+ // cursor: pointer;
|
|
|
+ // font-size: 14px;
|
|
|
+ // margin-left: 2px;
|
|
|
+ // border-radius: 4px;
|
|
|
+ // border: 1px solid red;
|
|
|
+ // }
|
|
|
+ // .isActive {
|
|
|
+ // border-radius: 4px;
|
|
|
+ // color: #025baa;
|
|
|
+ // background: #e1f2ff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .i-style1 {
|
|
|
+ // right: 32px;
|
|
|
+ // position: fixed;
|
|
|
+ // top: 210px;
|
|
|
+ // width: 40px;
|
|
|
+ // height: 28px;
|
|
|
+ // background: #fff;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 28px;
|
|
|
+ // }
|
|
|
+ // .i-style2 {
|
|
|
+ // right: 32px;
|
|
|
+ // position: fixed;
|
|
|
+ // top: 374px;
|
|
|
+ // width: 40px;
|
|
|
+ // height: 28px;
|
|
|
+ // background: #fff;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 28px;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
</style>
|