登陆页左侧新广告特效

src/views/Login.vue

@@ -562,8 +562,9 @@ function fitVisualStage() {
   const offsetX = (rect.width - baseWidth * scale) / 2
   const offsetY = (rect.height - baseHeight * scale) / 2
   stage.style.setProperty('--stage-scale', scale.toFixed(5))
-  stage.style.setProperty('--stage-x', `${offsetX.toFixed(2)}px`)
-  stage.style.setProperty('--stage-y', `${offsetY.toFixed(2)}px`)
+  // translate 使用 rem（÷100）
+  stage.style.setProperty('--stage-x', `${(offsetX / 100).toFixed(4)}rem`)
+  stage.style.setProperty('--stage-y', `${(offsetY / 100).toFixed(4)}rem`)
 }
 
 /** 创建一个浮动节点面板并播放动画 */
@@ -575,10 +576,11 @@ function createPanel(spec: { src: string; x: number; y: number; w: number; h: nu
   img.src = spec.src
   img.alt = ''
   img.draggable = false
-  img.style.setProperty('--x', `${spec.x}px`)
-  img.style.setProperty('--y', `${spec.y}px`)
-  img.style.setProperty('--w', `${spec.w}px`)
-  img.style.setProperty('--h', `${spec.h}px`)
+  // 使用 rem 单位（1rem = 100px）
+  img.style.setProperty('--x', `${(spec.x / 100).toFixed(4)}rem`)
+  img.style.setProperty('--y', `${(spec.y / 100).toFixed(4)}rem`)
+  img.style.setProperty('--w', `${(spec.w / 100).toFixed(4)}rem`)
+  img.style.setProperty('--h', `${(spec.h / 100).toFixed(4)}rem`)
   img.style.setProperty('--life-ms', `${animTiming.lifeMs}ms`)
 
   let fallbackTimer: ReturnType<typeof setTimeout> | null = null