123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <style lang="less">
- .component-floor {
- border-radius: 16rpx;
- background: rgba(255, 255, 255, 0.9);
- .component-wrapper {
- display: flex;
- justify-content: space-between;
- .building-wrapper {
- padding: 16rpx;
- border-right: 1px solid #c4c9cf4d;
- .building-item {
- max-width: 240rpx;
- height: 72rpx;
- line-height: 72rpx;
- font-size: 32rpx;
- font-weight: 400;
- color: #626c78;
- text-align: center;
- }
- }
- }
- .floor-wrapper {
- display: flex;
- padding: 16rpx;
- flex-direction: column-reverse;
- }
- }
- .component-floor.fold .floor-item {
- background: none;
- }
- .component-floor.fold .building-item {
- background: none;
- }
- .component-floor.expand {
- .component-wrapper {
- max-height: 800rpx;
- }
- }
- .component-floor .floor-item {
- width: 112rpx;
- height: 72rpx;
- line-height: 72rpx;
- font-size: 32rpx;
- font-weight: 400;
- color: #626c78;
- text-align: center;
- }
- .component-floor.building .floor-item {
- width: 224rpx;
- }
- .floor-item:first-child {
- border-radius: 16rpx 16rpx 0 0;
- }
- .floor-item.selected,
- .building-item.selected {
- background: #d4faf4;
- }
- .floor-item:last-child {
- border-radius: 0 0 8px 8px;
- }
- .icon-arrow {
- text-align: right;
- .icon-arrow-box {
- box-sizing: border-box;
- padding: 16rpx;
- display: inline-block;
- // width: 152rpx;
- height: 88rpx;
- label {
- display: inline-block;
- vertical-align: middle;
- font-family: PingFang SC;
- font-size: 32rpx;
- font-weight: 500;
- letter-spacing: 0px;
- }
- image {
- display: inline-block;
- vertical-align: middle;
- margin-left: 20rpx;
- width: 24rpx;
- height: 24rpx;
- }
- }
- }
- .icon-arrow .icon {
- width: 24rpx;
- height: 24rpx;
- }
- </style>
- <template>
- <!-- && selectedFloor == item.id -->
- <!-- :class="{'selected' :selectedBuilding == item.id}" -->
- <div class="{{'component-floor '+status}}">
- <div class="component-wrapper">
- <div class="building-wrapper">
- <div class="building-item"
- :key="index+'building-map'"
- v-for="(item,index) in buildings">
- {{item.localName}}
- </div>
- </div>
- <!-- :class="{'selected' :selectedFloor == item.id}" -->
- <div class="floor-wrapper">
- <div
- class="floor-item"
- :key="index+'map'"
- v-for="(item,index) in floors"
- v-on:click.stop="changeFloor(item.id)"
- v-if="status=='expand' || (status=='fold' && selectedFloor == item.id)"
- >
- {{item.localName}}
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import wepy from '@wepy/core';
- import config from '@/config';
- let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
- wepy.component({
- data: {
- h5StaticPath
- },
- props: {
- floors: Array,
- buildings: Array,
- status: 'fold',
- selectedBuilding: String, //选中的building id
- selectedFloor: String //选中的floor id
- },
- created() {},
- ready() {},
- didUpdate() {},
- didUnmount() {},
- methods: {
- changeFloor(id) {
- if (id !== this.selectedFloor) {
- this.$emit('component-floor-change', id);
- }
- this.$emit('component-floor-click');
- },
- flodFloor() {
- this.$emit('component-floor-fold');
- }
- }
- });
- </script>
|