feat: 水牌逻辑优化

src/views/Billboard/Billboard.vue

@@ -54,15 +54,16 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { storeToRefs } from 'pinia'
 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'
+import { useMediaQuery, useWindowSize } from '@vueuse/core'
 
 const isH = useMediaQuery('(min-aspect-ratio: 1/1)')
+const { width } = useWindowSize()
 const timeout = 30000
 const heights = { shop: 44, format: 49, placeholder: 40 }
 const setValue = refInstance => value => Object.assign(refInstance, { value })
@@ -169,7 +170,11 @@ watch(shops, (formats, _, onCleanup) => {
     }
   }
 })
-
+watch(width, () => {
+  if (shops.value.length) {
+    setScrollWidth(listRef.value.scrollWidth)
+  }
+})
 watch(index, (nxt, _, onCleanup) => {
   if (nxt === null) return
   listRef.value.scrollLeft = scrollLefts.value[nxt]
@@ -188,7 +193,6 @@ 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 - (isH.value ? 1326 : 68))
       .reduce((acc, nxt) => {
@@ -201,7 +205,10 @@ watch(scrollWidth, _scrollWidth => {
 })
 watch(scrollLefts, _scrollLefts => {
   if (_scrollLefts.length > 1) {
+    setIndex(null)
+    nextTick(() => {
       setIndex(0)
+    })
   }
 })
 </script>