feat: vue-anti反爬弹窗不同尺寸屏幕兼容

packages/vue-anti/src/components/AntiPopup.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="j-anti-popup-container" v-if="value">
-    <div class="j-anti-popup-overlay" :class="overlayClass"  :style="`z-index: ${zIndex};`"></div>
+    <div class="j-anti-popup-overlay" @touchmove.prevent :class="overlayClass"  :style="`z-index: ${zIndex};`"></div>
     <div class="j-anti-popup j-anti-popup--center" :class="contentClass" :style="`z-index: ${zIndex + 1};`">
       <slot name="default"></slot>
     </div>
@@ -51,7 +51,6 @@ export default {
 .j-anti-popup {
   position: fixed;
   max-height: 100%;
-  overflow-y: auto;
   transition: transform .3s;
   -webkit-overflow-scrolling: touch;
 }

packages/vue-anti/src/components/VerifyPoints.vue

@@ -108,9 +108,10 @@ export default {
       const pointsPanelMain = this.$refs.pointsPanelMain
       const pointsPanelMainRect = pointsPanelMain.getBoundingClientRect()
       // 校正坐标（圆点的半径）圆的位置看起来正确
-      const correctNum = 9
+      // 使用相似计算，以图片宽度256px为例，其下坐标点的半径为9
+      const correctNum = parseInt(9 * (pointsPanelMainRect.width / 256))
 
-      // offsetX/offsetY圆点的位置坐标(需要偏移进行微调)
+      // offsetX/offsetY圆点的位置坐标(需要偏移进行微调) === pointDom.offsetX/offsetY
       // offset = 鼠标相对视口坐标 - pointsMain相对视口坐标 - 校正坐标
       const offsetX = e.clientX - pointsPanelMainRect.left - correctNum
       const offsetY = e.clientY - pointsPanelMainRect.top - correctNum
@@ -177,6 +178,8 @@ $black: #000;
 .verify-points {
   position: relative;
   width: 280Px;
+  transform-origin: center center;
+  transition: transform 0.2s ease;
   .verify-points-logo {
     width: 100%;
     height: 160Px;
@@ -228,4 +231,18 @@ $black: #000;
     background-size: contain;
   }
 }
+
+// 卡片适配不同屏幕的网页
+// 屏幕大于 1024px 或小于 1440px 时应用该样式
+@media screen and (min-width: 1024px) and (max-width: 1440px) {
+  .verify-points {
+    transform: scale(1.1);
+  }
+}
+// 屏幕大于 1440px
+@media screen and (min-width: 1440px) {
+  .verify-points {
+    transform: scale(1.2);
+  }
+}
 </style>