From 8aa43635185adb96781a69476aa8e5353bfbfc45 Mon Sep 17 00:00:00 2001
From: yuyinws <lyc657508366@gmail.com>
Date: Thu, 30 Nov 2023 10:49:54 +0800
Subject: [PATCH] feat: scroll card

---
 components/ScrollCard.vue     | 13 +++++++------
 package.json                  |  3 ++-
 plugins/Vue3Marquee.client.ts |  5 +++++
 pnpm-lock.yaml                | 17 +++++++++++++++--
 4 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 plugins/Vue3Marquee.client.ts

diff --git a/components/ScrollCard.vue b/components/ScrollCard.vue
index 342334b..ce6ed6e 100644
--- a/components/ScrollCard.vue
+++ b/components/ScrollCard.vue
@@ -5,12 +5,13 @@ const ORIGIN = __ORIGIN__ || window.location.origin
 <template>
   <div class="container mt-10">
     <div class="horizontal-scrolling-items gap-4">
-      <div v-for="i in 2" :key="i" class="flex gap-4">
-        <NuxtImg class="sm:h-[150px] sm:w-[400px] w-[311px] h-[117px]" :src="`${ORIGIN}/example/1.svg`" />
-        <NuxtImg class="sm:h-[150px] sm:w-[400px] w-[311px] h-[117px]" :src="`${ORIGIN}/example/2.svg`" />
-        <NuxtImg class="sm:h-[150px] sm:w-[400px] w-[311px] h-[117px]" :src="`${ORIGIN}/example/3.svg`" />
-        <NuxtImg class="sm:h-[150px] sm:w-[400px] w-[311px] h-[117px]" :src="`${ORIGIN}/example/4.svg`" />
-      </div>
+      <Vue3Marquee
+        :loop="0"
+        clone
+        pause-on-hover
+      >
+        <NuxtImg v-for="i in 4" :key="i" class="sm:h-[150px] sm:w-[400px] w-[311px] h-[117px] mr-5" :src="`${ORIGIN}/example/${i}.svg`" />
+      </Vue3Marquee>
     </div>
   </div>
 </template>
diff --git a/package.json b/package.json
index e8c768a..c617dc1 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "openid": "^2.0.10",
     "sass": "^1.67.0",
     "uuid": "^9.0.1",
-    "vue-sonner": "^0.4.4"
+    "vue-sonner": "^0.4.4",
+    "vue3-marquee": "^4.1.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.1.1",
diff --git a/plugins/Vue3Marquee.client.ts b/plugins/Vue3Marquee.client.ts
new file mode 100644
index 0000000..7e3c54c
--- /dev/null
+++ b/plugins/Vue3Marquee.client.ts
@@ -0,0 +1,5 @@
+import Vue3Marquee from 'vue3-marquee'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Vue3Marquee, { name: 'Vue3Marquee' })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c50f4d2..579556e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   vue-sonner:
     specifier: ^0.4.4
     version: 0.4.4
+  vue3-marquee:
+    specifier: ^4.1.0
+    version: 4.1.0(vue@3.3.9)
 
 devDependencies:
   '@antfu/eslint-config':
@@ -4973,7 +4976,7 @@ packages:
     resolution: {integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       memory-fs: 0.5.0
       tapable: 1.1.3
 
@@ -6083,6 +6086,7 @@ packages:
 
   /graceful-fs@4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+    dev: true
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -6780,7 +6784,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
 
   /jsonparse@1.3.1:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
@@ -10839,6 +10843,15 @@ packages:
     resolution: {integrity: sha512-Cu8IqjpZF+B7KWu0FHkNTWpTuufn92S0s2c3YuCUG4dL4KNWvAv0Ox+TPWN525gJ1mijG2UUIccEx0lVNga58A==}
     dev: false
 
+  /vue3-marquee@4.1.0(vue@3.3.9):
+    resolution: {integrity: sha512-AkvpNC6+7CwvIBgiAr8qMs1XvhGhfSS2ahlMEp80YXAmDOP8nDdn/smQ6eWtusf+hLX21yTaSOoKGcill4bCRg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: ^3.2
+    dependencies:
+      vue: 3.3.9(typescript@5.2.2)
+    dev: false
+
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies: