|
|
|
@ -1,32 +1,14 @@ |
|
|
|
<template> |
|
|
|
<div class="billboard" :style="{ backgroundImage: theme.images.billboardBackgroundImg ? `url(${theme.images.billboardBackgroundImg})` : '' }"> |
|
|
|
<div class="ip"></div> |
|
|
|
<div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })"></div> |
|
|
|
<div class="header" :style="{ backgroundImage: `url(${theme.images.billBoardBg})` }"> |
|
|
|
<div class="r1">当前位置 <img :src="theme.images.billboardLoc" alt="" /></div> |
|
|
|
<div class="r2">{{ bf }}</div> |
|
|
|
<div class="r3"></div> |
|
|
|
<QRCodeFromText |
|
|
|
v-if="currentFloor" |
|
|
|
class="qrcode" |
|
|
|
:size="100" |
|
|
|
:text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`" |
|
|
|
></QRCodeFromText> |
|
|
|
</div> |
|
|
|
<div class="list-container" ref="listRef"> |
|
|
|
<div |
|
|
|
class="list" |
|
|
|
:style="{ |
|
|
|
height: `calc(${columnHeight / 1080} * 100vw)`, |
|
|
|
width: `calc(484px * ${Math.ceil(columns.length / 2) * 2} + 68px)` |
|
|
|
height: `${columnHeight}px`, |
|
|
|
width: `${(isH ? 286 : 484) * Math.ceil(columns.length / 2) * 2 + (isH ? 38 : 68)}px` |
|
|
|
}" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="(col, i) of columns" |
|
|
|
:key="'col' + i" |
|
|
|
class="column" |
|
|
|
:style="{ height: `calc(${columnHeight / 1080} * 100vw)`, opacity: Math.floor(i / 2) === index ? 1 : 0.5 }" |
|
|
|
> |
|
|
|
<div v-for="(col, i) of columns" :key="'col' + i" class="column" :style="{ height: `${columnHeight}px`, opacity: Math.floor(i / 2) === index ? 1 : 0.5 }"> |
|
|
|
<template v-for="(data, j) of col.list"> |
|
|
|
<div v-if="data.type === 'format'" class="format" :key="data.name"> |
|
|
|
{{ data.name }} |
|
|
|
@ -56,6 +38,19 @@ |
|
|
|
<div class="meta">{{ remainingMinutes }}秒后切页</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="ip"></div> |
|
|
|
<div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })"></div> |
|
|
|
<div class="header" :style="{ backgroundImage: `url(${isH ? theme.images.billboardHeaderBgH : theme.images.billboardHeaderBgV})` }"> |
|
|
|
<div class="r1">当前位置 <img :src="theme.images.billboardLoc" alt="" /></div> |
|
|
|
<div class="r2">{{ bf }}</div> |
|
|
|
<div class="r3"></div> |
|
|
|
<QRCodeFromText |
|
|
|
v-if="currentFloor" |
|
|
|
class="qrcode" |
|
|
|
:size="100" |
|
|
|
:text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`" |
|
|
|
></QRCodeFromText> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
@ -65,7 +60,9 @@ import { useStore } from '@/store/root' |
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
import { getBrandListByFormat } from '@/http/brand/api' |
|
|
|
import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue' |
|
|
|
import { useMediaQuery } from '@vueuse/core' |
|
|
|
|
|
|
|
const isH = useMediaQuery('(min-aspect-ratio: 1/1)') |
|
|
|
const timeout = 30000 |
|
|
|
const heights = { shop: 44, format: 49, placeholder: 40 } |
|
|
|
const setValue = refInstance => value => Object.assign(refInstance, { value }) |
|
|
|
@ -88,7 +85,7 @@ const remainingMinutes = ref(Math.ceil(timeout / 1000)) |
|
|
|
const setRemainingMinutes = setValue(remainingMinutes) |
|
|
|
|
|
|
|
const showBullets = computed(() => scrollLefts.value.length > 1) |
|
|
|
const columnHeight = 746 |
|
|
|
const columnHeight = computed(() => (isH.value ? 706 : 746)) |
|
|
|
|
|
|
|
Promise.all([getBrandListByFormat()]).then(([{ data: brandListByFormat }]) => { |
|
|
|
shops.value = brandListByFormat.list.map(brand => { |
|
|
|
@ -141,7 +138,7 @@ watch(shops, (formats, _, onCleanup) => { |
|
|
|
const lastColumn = acc[acc.length - 1] |
|
|
|
const nxtHeight = heights[nxt.type] |
|
|
|
|
|
|
|
if (!lastColumn || lastColumn.height + nxtHeight > columnHeight) { |
|
|
|
if (!lastColumn || lastColumn.height + nxtHeight > columnHeight.value) { |
|
|
|
if (nxt.type === 'placeholder') return [...acc, { height: 0, list: [], spStartHeight: null }] |
|
|
|
return [ |
|
|
|
...acc, |
|
|
|
@ -191,8 +188,9 @@ watch(index, (nxt, _, onCleanup) => { |
|
|
|
|
|
|
|
watch(scrollWidth, _scrollWidth => { |
|
|
|
if (_scrollWidth > 0) { |
|
|
|
console.log(Array.from(document.querySelectorAll('.shop')).map(el => el.getBoundingClientRect().left)) |
|
|
|
const list = Array.from(document.querySelectorAll('.shop')) |
|
|
|
.map(el => el.getBoundingClientRect().left - (72 / 1080) * window.innerWidth) |
|
|
|
.map(el => el.getBoundingClientRect().left - (isH.value ? 1326 : 68)) |
|
|
|
.reduce((acc, nxt) => { |
|
|
|
const last = acc[acc.length - 1] |
|
|
|
return nxt === last ? acc : [...acc, nxt] |
|
|
|
@ -207,17 +205,6 @@ watch(scrollLefts, _scrollLefts => { |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
@keyframes counter { |
|
|
|
0% { |
|
|
|
counter-decrement: count 30; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
counter-decrement: count 0; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.billboard { |
|
|
|
position: absolute; |
|
|
|
@ -226,76 +213,15 @@ watch(scrollLefts, _scrollLefts => { |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: var(--billboard-background); |
|
|
|
z-index: 100; |
|
|
|
.ip { |
|
|
|
position: absolute; |
|
|
|
width: 180px; |
|
|
|
height: 257.5px; |
|
|
|
right: 56px; |
|
|
|
top: -57.5px; |
|
|
|
background: center / cover no-repeat url(./ip.png); |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
.guide { |
|
|
|
position: absolute; |
|
|
|
height: 200px; |
|
|
|
width: 500px; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
.header { |
|
|
|
position: relative; |
|
|
|
height: 200px; |
|
|
|
padding-top: 48px; |
|
|
|
padding-left: 68px; |
|
|
|
background: top / contain no-repeat; |
|
|
|
z-index: 0; |
|
|
|
.r1 { |
|
|
|
display: flex; |
|
|
|
height: 23px; |
|
|
|
font-weight: 700; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 23px; |
|
|
|
color: var(--billboard-legendColor, rgba(0, 0, 0, 0.6)); |
|
|
|
img { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
.r2 { |
|
|
|
margin-top: 9px; |
|
|
|
margin-bottom: 9px; |
|
|
|
font-weight: 900; |
|
|
|
font-size: 48px; |
|
|
|
line-height: 56px; |
|
|
|
color: var(--billboard-titleColor); |
|
|
|
} |
|
|
|
.r3 { |
|
|
|
width: 184px; |
|
|
|
height: 32px; |
|
|
|
background: center / cover no-repeat url(./meta.png); |
|
|
|
} |
|
|
|
.qrcode { |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 314px; |
|
|
|
top: 57px; |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 12px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
z-index: 10; |
|
|
|
|
|
|
|
.list-container { |
|
|
|
position: fixed; |
|
|
|
left: 68px; |
|
|
|
top: 1056px; |
|
|
|
overflow-x: scroll; |
|
|
|
overflow-y: hidden; |
|
|
|
scroll-behavior: smooth; |
|
|
|
margin-left: 68px; |
|
|
|
padding-top: 56px; |
|
|
|
width: 1012px; |
|
|
|
&::-webkit-scrollbar { |
|
|
|
display: none; |
|
|
|
@ -383,7 +309,7 @@ watch(scrollLefts, _scrollLefts => { |
|
|
|
} |
|
|
|
|
|
|
|
.bullets { |
|
|
|
position: absolute; |
|
|
|
position: fixed; |
|
|
|
display: flex; |
|
|
|
width: 123px; |
|
|
|
left: 0; |
|
|
|
@ -402,11 +328,6 @@ watch(scrollLefts, _scrollLefts => { |
|
|
|
line-height: 19px; |
|
|
|
text-align: center; |
|
|
|
color: var(--billboard-legendColor, rgba(0, 0, 0, 0.6)); |
|
|
|
.num { |
|
|
|
content: counter(count); |
|
|
|
|
|
|
|
counter-reset: count 30; |
|
|
|
} |
|
|
|
} |
|
|
|
.bullet { |
|
|
|
display: flex; |
|
|
|
@ -430,4 +351,137 @@ watch(scrollLefts, _scrollLefts => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.ip { |
|
|
|
position: fixed; |
|
|
|
width: 180px; |
|
|
|
height: 257.5px; |
|
|
|
right: 56px; |
|
|
|
top: 742.5px; |
|
|
|
background: center / cover no-repeat url(./ip.png); |
|
|
|
z-index: 12; |
|
|
|
} |
|
|
|
.guide { |
|
|
|
position: fixed; |
|
|
|
height: 200px; |
|
|
|
width: 500px; |
|
|
|
right: 0; |
|
|
|
top: 800px; |
|
|
|
z-index: 13; |
|
|
|
} |
|
|
|
.header { |
|
|
|
position: fixed; |
|
|
|
width: 100vw; |
|
|
|
height: 200px; |
|
|
|
left: 0; |
|
|
|
top: 800px; |
|
|
|
background: top / contain no-repeat; |
|
|
|
z-index: 11; |
|
|
|
.r1 { |
|
|
|
position: fixed; |
|
|
|
top: 848px; |
|
|
|
left: 68px; |
|
|
|
display: flex; |
|
|
|
height: 23px; |
|
|
|
font-weight: 700; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 23px; |
|
|
|
color: var(--billboard-legendColor, rgba(0, 0, 0, 0.6)); |
|
|
|
img { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
.r2 { |
|
|
|
position: fixed; |
|
|
|
top: 880px; |
|
|
|
left: 68px; |
|
|
|
font-weight: 900; |
|
|
|
font-size: 48px; |
|
|
|
line-height: 56px; |
|
|
|
color: var(--billboard-titleColor); |
|
|
|
} |
|
|
|
.r3 { |
|
|
|
position: fixed; |
|
|
|
top: 945px; |
|
|
|
left: 68px; |
|
|
|
width: 184px; |
|
|
|
height: 32px; |
|
|
|
background: center / cover no-repeat url(./metaV.png); |
|
|
|
} |
|
|
|
.qrcode { |
|
|
|
position: fixed; |
|
|
|
display: flex; |
|
|
|
left: 314px; |
|
|
|
top: 857px; |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 12px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
@media (min-aspect-ratio: 1/1) { |
|
|
|
.billboard { |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
z-index: 1; |
|
|
|
|
|
|
|
.list-container { |
|
|
|
left: 1326px; |
|
|
|
top: 322px; |
|
|
|
width: 594px; |
|
|
|
.column { |
|
|
|
width: 286px; |
|
|
|
.format { |
|
|
|
width: 270px; |
|
|
|
} |
|
|
|
.shop { |
|
|
|
width: 270px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.bullets { |
|
|
|
left: auto; |
|
|
|
right: 253px; |
|
|
|
bottom: 35px; |
|
|
|
} |
|
|
|
} |
|
|
|
.ip { |
|
|
|
width: 147.15px; |
|
|
|
height: 210.5px; |
|
|
|
left: 1738.3px; |
|
|
|
top: 71px; |
|
|
|
} |
|
|
|
.guide { |
|
|
|
height: 139px; |
|
|
|
top: 143px; |
|
|
|
} |
|
|
|
.header { |
|
|
|
height: 139px; |
|
|
|
top: 143px; |
|
|
|
.r1 { |
|
|
|
left: 220px; |
|
|
|
top: 163px; |
|
|
|
} |
|
|
|
.r2 { |
|
|
|
left: 220px; |
|
|
|
top: 190px; |
|
|
|
font-size: 40px; |
|
|
|
line-height: 47px; |
|
|
|
} |
|
|
|
.r3 { |
|
|
|
left: 220px; |
|
|
|
top: 241px; |
|
|
|
background: center / cover no-repeat url(./metaH.png); |
|
|
|
} |
|
|
|
.qrcode { |
|
|
|
left: 68px; |
|
|
|
top: 153px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
