From fe9f6124558006b026fa1f08467b5b11a15b2092 Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Wed, 8 Jan 2025 17:05:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0Marquees=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E5=AE=9E=E7=8E=B0=E6=BB=9A=E5=8A=A8=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E6=95=88=E6=9E=9C=E5=B9=B6=E5=9C=A8Billboard=E4=B8=AD?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/base/Marquees/Marquees.vue    | 115 ++++++++++++++++++++++++++++++
 src/views/Billboard/Billboard.vue |  12 ++--
 2 files changed, 122 insertions(+), 5 deletions(-)
 create mode 100644 src/base/Marquees/Marquees.vue

diff --git a/src/base/Marquees/Marquees.vue b/src/base/Marquees/Marquees.vue
new file mode 100644
index 0000000..8013872
--- /dev/null
+++ b/src/base/Marquees/Marquees.vue
@@ -0,0 +1,115 @@
+<template>
+  <div ref="wrapElRef" class="relative h-full w-full overflow-hidden p-0">
+    <div ref="contentElRef" class="absolute h-full whitespace-nowrap" :class="state.animationClass" :style="contentStyle" @animationend="animationend">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
+
+const props = defineProps(['content', 'delay', 'speed'])
+
+const emit = defineEmits(['end'])
+const state = reactive({
+  wrapWidth: 0, //父盒子宽度
+  firstRound: true, //判断是否第一次动画
+  duration: 0, //一次动画需要的时间
+  offsetWidth: 0, //子盒子的宽度
+  animationClass: '' //添加animate动画
+})
+
+const wrapElRef = ref(null)
+const contentElRef = ref(null)
+
+const contentStyle = computed(() => ({
+  //第一次从头开始,第二次动画的时候需要从最右边出来所以宽度需要多出父盒子的宽度
+  paddingLeft: (state.firstRound ? 0 : state.wrapWidth) + 'px',
+  //只有第一次的时候需要延迟
+  animationDelay: (state.firstRound ? props.delay || 0.8 : 0) + 's',
+  animationDuration: state.duration + 's'
+}))
+
+function animationend() {
+  state.firstRound = false
+  emit('end')
+  state.duration = (state.offsetWidth + state.wrapWidth) / (props.speed || 40)
+  state.animationClass = 'animate-infinite'
+}
+
+let timer
+watch(
+  () => props.content,
+  () => {
+    state.firstRound = true
+    state.animationClass = ''
+    state.duration = 0
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      clearTimeout(timer)
+      const wrapWidth = wrapElRef.value.getBoundingClientRect().width
+      const offsetWidth = contentElRef.value.getBoundingClientRect().width
+      state.wrapWidth = wrapWidth
+      state.offsetWidth = offsetWidth
+      if (state.offsetWidth > state.wrapWidth) {
+        state.duration = offsetWidth / props.speed
+        state.animationClass = 'animate'
+      } else {
+        emit('end')
+        state.animationClass = ''
+        state.duration = 0
+      }
+    }, 1000)
+  },
+  {
+    immediate: true
+  }
+)
+
+onBeforeUnmount(() => {
+  clearTimeout(timer)
+  timer = null
+})
+</script>
+<style scoped>
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.w-full {
+  width: 100%;
+}
+.h-full {
+  height: 100%;
+}
+.animate {
+  animation: paomadeng linear;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.p-0 {
+  padding: 0;
+}
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+.animate-infinite {
+  animation: paomadeng-infinite linear infinite;
+}
+
+@keyframes paomadeng {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes paomadeng-infinite {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+</style>
diff --git a/src/views/Billboard/Billboard.vue b/src/views/Billboard/Billboard.vue
index 56d977c..3a9ea1a 100644
--- a/src/views/Billboard/Billboard.vue
+++ b/src/views/Billboard/Billboard.vue
@@ -28,7 +28,7 @@
               <div class="left">
                 <img class="dir" :src="data.dir" />
                 <div class="text">
-                  {{ data.shopName }}
+                  <Marquees :content="data.shopName">{{ data.shopName }}</Marquees>
                 </div>
               </div>
               <div class="right">{{ data.distance ? data.distance + '米' : '' }}</div>
@@ -76,6 +76,8 @@ import { getBrandListByFormat } from '@/http/brand/api'
 import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
 import { useMediaQuery, useWindowSize } from '@vueuse/core'
 import { setShopInactive } from '@/composables/useInitMap'
+import Marquees from '@/base/Marquees/Marquees.vue'
+
 const vmin = Math.min(window.innerWidth, window.innerHeight)
 const scale = vmin / 1080
 const isH = useMediaQuery('(min-aspect-ratio: 1/1)')
@@ -305,20 +307,20 @@ watch(scrollLefts, _scrollLefts => {
           overflow: hidden;
           text-overflow: hidden;
           .text {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            width: 100%;
+            height: 24px;
           }
         }
         .right {
           display: inline-flex;
-          flex: 0 0 100px;
+          flex: 0 0 60px;
           font-weight: 500;
           font-size: 16px;
           line-height: 19px;
           justify-content: flex-end;
           padding-right: 16px;
           color: rgba(0, 0, 0, 0.6);
+          white-space: nowrap;
         }
         .dir {
           width: 24px;