验证码控件部分样式调整

src/vendor/tianai-captcha/captcha/captcha.js

@@ -8,7 +8,7 @@ import WordImageClick from "./word_image_click/word_image_click";
 import { CaptchaConfig, wrapConfig, wrapStyle } from "./config/config";
 import { clearAllPreventDefault } from "./common/common";
 const template = `
-  <div class="captcha-parent">
+  <div class="__captcha-parent">
   <div class="captcha-bg-img"></div>
   <div class="captcha-box">
   <div class="captcha-loading loading"></div>
@@ -55,7 +55,7 @@ class TianAiCaptcha {
   init() {
     this.destroyWindow();
     this.config.domBindEl.append(template);
-    this.domTemplate = this.config.domBindEl.find(".captcha-parent");
+    this.domTemplate = this.config.domBindEl.find(".__captcha-parent");
     clearAllPreventDefault(this.domTemplate);
     this.loadStyle();
     // 绑定按钮事件

src/vendor/tianai-captcha/captcha/captcha.less

@@ -1,6 +1,6 @@
-.captcha-parent {
+.__captcha-parent {
   box-shadow: 0 0 11px 0 #999999;
-  width: 318px;
+  width: 316px;
   overflow: hidden;
   position: relative;
   z-index: 997;
@@ -29,7 +29,7 @@
       transform-style: preserve-3d;
       will-change: transform;
       transition-duration: 0.45s;
-      transform: translateX(-300px);
+      transform: translateX(-100%);
     }
   }
   .captcha-bg-img {
@@ -46,8 +46,12 @@
   }
 
   .slider-bottom {
+    text-align: right;
+    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
     .close-btn, .refresh-btn {
-      display: inline-block;
       width: 20px;
       height: 20px;
       background-repeat: no-repeat;
@@ -56,18 +60,15 @@
     .close-btn {
       background-image: url("../images/icon.png");
       background-position: 0 -14px;
-      margin-right: 2px;
     }
     .refresh-btn {
       background-image: url("../images/icon.png");
       background-position: 0 -167px;
-      margin-right: 10px;
     }
-    text-align: right;
-    margin-top: 8px;
+    
   }
   .slider-move-shadow {
-    animation: myanimation 2s infinite;
+    animation: move-shadow 2s infinite;
     height: 100%;
     width: 5px;
     background-color: #fff;
@@ -92,6 +93,14 @@
     left: -1px;
     border-radius: 5px;
   }
+  @keyframes move-shadow {
+    from {
+      left: 0;
+    }
+    to {
+      left: 289px;
+    }
+  }
   @import "./common/common.less";
   @import "./slider/slider.less";
   @import "./rotate/rotate.less";

src/vendor/tianai-captcha/captcha/common/common.less

@@ -1,7 +1,7 @@
 .captcha {
   text-align: left;
   box-sizing: content-box;
-  width: 300px;
+  width: 100%;
   height: 260px;
   z-index: 999;
   .slider-bottom .logo {
@@ -21,12 +21,8 @@
       z-index: 999;
       font-size: 15px;
       line-height: 25px;
-      /*background-color: #FF5D39;*/
       color: #fff;
       text-align: center;
-      /* transform: translateY(0px); */
-      /* display: none; */
-      /* transition: max-height 0.5s; */
       transition: bottom 0.3s ease-in-out;
     }
     .captcha-tips.captcha-tips-error {
@@ -75,11 +71,3 @@
     }
   }
 }
-@keyframes myanimation {
-  from {
-    left: 0;
-  }
-  to {
-    left: 289px;
-  }
-}