二维码添加随机运动动画

Reviewed-on: #2

src/components/List/List.vue

@@ -22,14 +22,14 @@
           <ListItem :customer="item" />
         </SwiperSlide>
       </Swiper>
-      <div
-        class="absolute bottom-3 right-3 z-10 flex h-[252px] w-[184px] flex-col items-center justify-start gap-4 rounded-xl border border-solid border-black/5 bg-white bg-gradient-to-b from-[#ededed] to-[#fcfcfc] px-3 pt-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
-      >
-        <img :src="qr" class="size-40" alt="" />
-        <div class="text-center text-18 leading-relaxed text-[#333]">欢迎微信扫码留言<br />期待您的宝贵意见</div>
-      </div>
     </div>
   </div>
+  <div
+    class="random leftt-0 fixed top-0 z-200 flex h-[252px] w-[184px] flex-col items-center justify-start gap-4 rounded-xl border border-solid border-black/5 bg-white bg-gradient-to-b from-[#ededed] to-[#fcfcfc] px-3 pt-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]"
+  >
+    <img :src="qr" class="size-40" alt="" />
+    <div class="text-center text-18 leading-relaxed text-[#333]">欢迎微信扫码留言<br />期待您的宝贵意见</div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -85,23 +85,26 @@ defineExpose({
 </script>
 
 <style>
-.tb {
-  writing-mode: tb;
-}
-/* stylelint-disable-next-line selector-class-pattern */
-.fadeInRight {
-  animation: fade-in-right 1s infinite;
+.random {
+  animation: random 60s linear infinite alternate;
 }
 
-@keyframes fade-in-right {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
+@keyframes random {
+  0% {
+    transform: translate(0, 0);
   }
 
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
+  25% {
+    transform: translate(70vw, 10vh);
+  }
+  50% {
+    transform: translate(40vw, 70vh);
+  }
+  75% {
+    transform: translate(10vw, 40vh);
+  }
+  100% {
+    transform: translate(0, 0);
   }
 }
 </style>