|
@@ -6,19 +6,21 @@
|
|
|
<template>
|
|
|
<div class='floor-box'>
|
|
|
<div class='floor-list'>
|
|
|
- <div v-if='floorsArr.length>5'>
|
|
|
- <i
|
|
|
- class='el-icon-caret-top icon-top'
|
|
|
+ <div class='icon-top' v-if='floorsArr.length>8'>
|
|
|
+ <img
|
|
|
:class='{disabled:currentFloorId == floorsArr[0].seq }'
|
|
|
v-if='showT'
|
|
|
@click='changeFloor(1)'
|
|
|
@mousedown='mousedown'
|
|
|
@mouseup='mouseup'
|
|
|
- ></i>
|
|
|
- <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
|
|
|
+ src='@/assets/imgs/iconBlackTop.png'
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <img :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else src='@/assets/imgs/iconLightTop.png' alt />
|
|
|
</div>
|
|
|
<div class='floor-out'>
|
|
|
- <div class='floor-center' :style='{ marginTop : marginTop }'>
|
|
|
+ <!-- :style='{ marginTop : marginTop }' -->
|
|
|
+ <div class='floor-center'>
|
|
|
<div
|
|
|
class='floor-item'
|
|
|
:class='item.seq == currentFloorId?"isActive":""'
|
|
@@ -28,19 +30,15 @@
|
|
|
>{{item.code}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if='floorsArr.length>5'>
|
|
|
- <i
|
|
|
- class='el-icon-caret-bottom icon-bottom'
|
|
|
+ <div class='icon-bottom' v-if='floorsArr.length>8'>
|
|
|
+ <img
|
|
|
:class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
|
|
|
v-if='showB'
|
|
|
@click='changeFloor(-1)'
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- class='el-icon-caret-bottom icon-bottom'
|
|
|
- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
|
|
|
- v-else
|
|
|
- style='color:#ccc'
|
|
|
- ></i>
|
|
|
+ src='@/assets/imgs/iconBlackBottom.png'
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.png' alt />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -70,38 +68,14 @@ export default {
|
|
|
props: {
|
|
|
floorsArr: {
|
|
|
type: Array
|
|
|
- /* default: () => {
|
|
|
- return [
|
|
|
- { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
|
|
|
- { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
|
|
|
- { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
|
|
|
- { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
|
|
|
- { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
|
|
|
- { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
|
|
|
- { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
|
|
|
- { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
|
|
|
- { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
|
|
|
- { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
|
|
|
- ]
|
|
|
- } */
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init()
|
|
|
},
|
|
|
- watch: {
|
|
|
- // 监听floorsArr的变化
|
|
|
- // '$store.state.floorsArr': {
|
|
|
- // handler(newV, oldV) {
|
|
|
- // newV && this.init()
|
|
|
- // },
|
|
|
- // deep: true
|
|
|
- // }
|
|
|
- },
|
|
|
methods: {
|
|
|
mousedown() {
|
|
|
this.startTime = new Date()
|
|
|
- console.log()
|
|
|
},
|
|
|
mouseup() {
|
|
|
this.endTime = new Date()
|
|
@@ -239,57 +213,56 @@ export default {
|
|
|
box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
border-radius: 2px;
|
|
|
position: relative;
|
|
|
- padding: 28px 4px;
|
|
|
+ padding: 6px 4px;
|
|
|
text-align: center;
|
|
|
.floor-out {
|
|
|
overflow: hidden;
|
|
|
- // overflow-y: auto;
|
|
|
position: relative;
|
|
|
- // &::-webkit-scrollbar {
|
|
|
- // display: none;
|
|
|
- // }
|
|
|
-
|
|
|
.floor-center {
|
|
|
transition: all linear 0.8s;
|
|
|
.floor-item {
|
|
|
- width: 36px;
|
|
|
- height: 32px;
|
|
|
+ line-height: 28px;
|
|
|
+ height: 28px;
|
|
|
cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -20%;
|
|
|
+ bottom: -6px;
|
|
|
+ content: '';
|
|
|
+ width: 14px;
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(195, 199, 203, 1);
|
|
|
+ border: 0px solid rgba(228, 229, 231, 1);
|
|
|
+ }
|
|
|
+ & + .floor-item {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon-top {
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 26px;
|
|
|
+ height: 18px;
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 100%;
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
}
|
|
|
.icon-bottom {
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 26px;
|
|
|
+ height: 18px;
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 100%;
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
}
|
|
|
.isActive {
|
|
|
border-radius: 4px;
|
|
|
color: #025baa;
|
|
|
background: #e1f2ff;
|
|
|
- line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
.disabled {
|