feat: 横板水牌

src/views/Billboard/Billboard.vue

@@ -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>