二维码添加随机运动动画

Reviewed-on: #3

.drone.yml

@@ -136,11 +136,11 @@ steps:
     commands:
       # # 自动授权
       # - export projectCode="projectCode=project-inluar4ppcxvciefgb_ila"
-      - export name="长沙永旺顾客心声大屏展示端_测试版" # 应用名称（自行填写 必填）
+      - export name="长沙湘江永旺顾客心声大屏展示端_竖版_测试版" # 应用名称（自行填写 必填）
       - export version=$(cat .tags) # 应用版本
       - export sourceId="8" # 应用来源id（默认为8 即测试环境专用） //如需更改查看测试环境平台级下应用管理新增应用的/api/platform/v1/platformProgram/platformProgramAdd接口
       - export genre="localpack" # 应用类型 本地资源包 [outchain, localpack]
-      - export resolution="1920*1080横屏" # 分辨率（自行填写）[1080*1920竖屏, 1920*1080横屏, 3840*2160横屏, 2160*3840竖屏]
+      - export resolution="1080*1920竖屏" # 分辨率（自行填写）[1080*1920竖屏, 1920*1080横屏, 3840*2160横屏, 2160*3840竖屏]
       - export package="/drone/src/target/$DRONE_REPO_NAME.$(cat .tags).zip" # zip包名称
       - export des=$CI_COMMIT_MESSAGE # 应用描述
       - python3 iot_upload.py
@@ -158,11 +158,11 @@ steps:
       cdn_url: 'https://qianmu-iot.1000my.com'
       # genre: "Samsung"
     commands:
-      - export name="长沙永旺顾客心声大屏展示端_正式版" # 应用名称（自行填写）
+      - export name="长沙湘江永旺顾客心声大屏展示端_竖版_正式版" # 应用名称（自行填写）
       - export version=$(cat .tags) # 应用版本
       - export sourceId="3" # 应用来源id
       - export genre="localpack" # 应用类型 本地资源包
-      - export resolution="1920*1080横屏" # 分辨率（自行填写）[1080*1920竖屏, 1920*1080横屏, 3840*2160横屏, 2160*3840竖屏]
+      - export resolution="1080*1920竖屏" # 分辨率（自行填写）[1080*1920竖屏, 1920*1080横屏, 3840*2160横屏, 2160*3840竖屏]
       - export package="/drone/src/target/$DRONE_REPO_NAME.$(cat .tags).zip" # zip包名称
       - export des=$CI_COMMIT_MESSAGE # 应用描述
       - python3 iot_upload.py

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>