|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<View> |
|
|
|
<Teleport to="body"> |
|
|
|
<ScrollView scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn"> |
|
|
|
<ScrollView v-if="!isH" scroll-x :list="currentBuildingFloorsList" class="floors-list animate__fast animate__animated animate__fadeIn"> |
|
|
|
<div style="display: inline-block; white-space: nowrap"> |
|
|
|
<div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div> |
|
|
|
<div |
|
|
|
@ -15,7 +15,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ScrollView> |
|
|
|
<div class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="showAll"> |
|
|
|
<div class="allFloors" animate__fast animate__animated animate__fadeInUp v-if="!isH && showAll"> |
|
|
|
<ScrollView> |
|
|
|
<div> |
|
|
|
<div class="row" :class="{ current: currentFloor.floorCode === item.floorCode }" v-for="item of currentBuildingFloorsList" :key="item.floorCode"> |
|
|
|
@ -34,7 +34,34 @@ |
|
|
|
</ScrollView> |
|
|
|
</div> |
|
|
|
</Teleport> |
|
|
|
|
|
|
|
<Teleport to="body"> |
|
|
|
<ScrollView v-if="isH" :list="currentBuildingFloorsList" class="floors-list-h animate__fast animate__animated animate__fadeIn" :class="{ all: showAll }"> |
|
|
|
<div> |
|
|
|
<div class="floor-wrapper"> |
|
|
|
<div class="all-item" v-if="showAll"></div> |
|
|
|
<div class="floors-item all" @click="showAll = true" :class="{ active: showAll }">全部楼层</div> |
|
|
|
</div> |
|
|
|
<div class="floor-wrapper" v-for="(item, index) of currentBuildingFloorsList" :key="item.floorCode"> |
|
|
|
<div class="all-item" :class="{ current: currentFloor.floorCode === item.floorCode }" v-if="showAll"> |
|
|
|
<div class="facs"> |
|
|
|
<div class="fac" v-for="fac of facMap[item.floorOrder]" :key="fac.type"> |
|
|
|
<img :src="fac.imgUrl" alt="" /> |
|
|
|
{{ fac.title }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="format">{{ formatMap[item.floor] }}</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@click="handleSelectFloor(index)" |
|
|
|
:class="{ active: !showAll && floorIdx === index, current: currentFloor.floorCode === item.floorCode }" |
|
|
|
class="floors-item" |
|
|
|
> |
|
|
|
{{ item.floor }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ScrollView> |
|
|
|
</Teleport> |
|
|
|
<Teleport to="body"> |
|
|
|
<div class="control-area"> |
|
|
|
<div class="map-control-wrapper animate__fast animate__animated animate__fadeInUp"> |
|
|
|
@ -69,6 +96,9 @@ import { hideMapDialog, setShopActive, setShopInactive } from '@/composables/use |
|
|
|
import { getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api' |
|
|
|
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue' |
|
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|
|
|
import { useMediaQuery } from '@vueuse/core' |
|
|
|
|
|
|
|
const isH = useMediaQuery('(min-aspect-ratio: 1/1)') |
|
|
|
|
|
|
|
const shopList = ref([]) |
|
|
|
const showAll = ref(false) |
|
|
|
@ -402,6 +432,120 @@ watch( |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.floors-list-h { |
|
|
|
position: absolute; |
|
|
|
right: 510px; |
|
|
|
width: 100px; |
|
|
|
top: 280px; |
|
|
|
height: calc(100vh - 280px); |
|
|
|
z-index: 60; |
|
|
|
display: block; |
|
|
|
overflow: hidden; |
|
|
|
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%); |
|
|
|
&.all { |
|
|
|
width: calc(100vw - 510px); |
|
|
|
background: right / 100px 100vh no-repeat linear-gradient(113.71deg, #435acd 0%, #749cf3 100%), |
|
|
|
left / calc(100vw - 510px - 100px) 100vh no-repeat linear-gradient(113.71deg, #dee6f6 0%, #dee6f6 100%); |
|
|
|
} |
|
|
|
&::-webkit-scrollbar { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.floor-wrapper { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.all-item { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
padding: 0 68px; |
|
|
|
&.current { |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
border-bottom: 1px solid #fff; |
|
|
|
.format { |
|
|
|
flex: 1; |
|
|
|
font-weight: 700; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 23px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
justify-content: flex-end; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
.facs { |
|
|
|
flex: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
|
|
|
|
.fac { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
img { |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
font-weight: 700; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 14px; |
|
|
|
text-align: center; |
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.fac + .fac { |
|
|
|
margin-left: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.floors-item { |
|
|
|
flex: 0 0 100px; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
position: relative; |
|
|
|
height: 94.44px; |
|
|
|
font-family: 'Montserrat'; |
|
|
|
font-style: normal; |
|
|
|
font-weight: 700; |
|
|
|
font-size: 28px; |
|
|
|
line-height: 96%; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
transition: all 0.5s; |
|
|
|
&.all { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 18px; |
|
|
|
line-height: 96%; |
|
|
|
vertical-align: bottom; |
|
|
|
} |
|
|
|
&.current { |
|
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
|
&::after { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
height: 20px; |
|
|
|
display: flex; |
|
|
|
content: '您在本层'; |
|
|
|
background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%); |
|
|
|
font-weight: 700; |
|
|
|
font-size: 12px; |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
} |
|
|
|
&.active { |
|
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%); |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.shop-list-wrapper { |
|
|
|
position: absolute; |
|
|
|
width: 1080px; |
|
|
|
@ -473,4 +617,33 @@ watch( |
|
|
|
text-align: center; |
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
} |
|
|
|
@media (min-aspect-ratio: 1/1) { |
|
|
|
.shop-list-wrapper { |
|
|
|
width: 510px; |
|
|
|
height: calc(100vh - 280px); |
|
|
|
right: 0px; |
|
|
|
bottom: 0; |
|
|
|
left: auto; |
|
|
|
top: auto; |
|
|
|
.switch { |
|
|
|
top: 24px; |
|
|
|
} |
|
|
|
.shop-scroll { |
|
|
|
height: 100%; |
|
|
|
margin-left: 54px; |
|
|
|
} |
|
|
|
} |
|
|
|
.control-area { |
|
|
|
left: 68px; |
|
|
|
bottom: 40px; |
|
|
|
right: auto; |
|
|
|
top: auto; |
|
|
|
height: auto; |
|
|
|
.hands { |
|
|
|
top: 280px; |
|
|
|
left: 68px; |
|
|
|
right: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
