Browse Source

feat: 反爬虫弹窗兼容大屏幕

cuiyalong 1 year ago
parent
commit
3cca356aba

+ 1 - 15
packages/vue-anti/src/components/VerifyPoints.vue

@@ -179,7 +179,7 @@ $black: #000;
   position: relative;
   width: 280Px;
   transform-origin: center center;
-  transition: transform 0.2s ease;
+  transition: transform,width 0.2s ease;
   .verify-points-logo {
     width: 100%;
     height: 160Px;
@@ -231,18 +231,4 @@ $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>

+ 13 - 3
packages/vue-anti/src/components/VerifyPointsPopup.vue

@@ -65,9 +65,19 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.use-anti-popup-container {
-  ::v-deep {
-    .verify-points-popup {}
+// 卡片适配不同屏幕的网页
+// 屏幕大于 1024px 或小于 1440px 时应用该样式
+::v-deep {
+  @media screen and (min-width: 1024px) and (max-width: 1440px) {
+    .verify-points {
+      width: 320Px;
+    }
+  }
+  // 屏幕大于 1440px
+  @media screen and (min-width: 1440px) {
+    .verify-points {
+      width: 340Px;
+    }
   }
 }
 </style>