我的宝箱滑块验证样式

src/common/Captcha-ali/index.js

@@ -7,14 +7,14 @@ const scene = 'nc_login_h5'
 
 class CaptchaAli extends Component {
   nc = null
+  el = null
   state = {
     isLoaded: false
   }
 
   componentDidMount() {
     const _this = this
-    const el = document.querySelector('#nc')
-    el && initCaptchaNC(() => {
+    this.el && initCaptchaNC(() => {
       const nc_token = [appkey, (new Date()).getTime(), Math.random()].join(':');
       this.nc = NoCaptcha.init({
         renderTo: '#nc',
@@ -46,7 +46,7 @@ class CaptchaAli extends Component {
     const {mb = 30} = this.props
     return (
       <div id={'captcha'} style={{marginBottom: `${mb}px`}}>
-        <div id="nc"></div>
+        <div id="nc" ref={el => this.el = el}></div>
       </div>
     );
   }

src/common/bindPhone/index.js

@@ -204,7 +204,7 @@ class BindPhone extends Component {
                 }}
               />
             </div>
-            <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
+            <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify} mb={15}/>
             <div className="popup-form__item">
               <Field
                 name="code"

src/common/bindPhone/index.scss

@@ -2,9 +2,10 @@
 // .popup-form {
 //   text-align: center;
 
-  .popup-packet__button--bundle {
-    margin-top: 5px;
-  }
+.popup-packet__button--bundle {
+  margin-top: 5px;
+}
+
 // }
 
 [data-skip="default"] {
@@ -17,7 +18,7 @@
     border-right-style: none;
     border-radius: 6px 0 0 6px;
   }
-  
+
   .popup-form__button--code {
     border-radius: 6px;
   }
@@ -28,7 +29,7 @@
     border-radius: 15px;
     font-size: 13px;
   }
-  
+
   .popup-form__ipt {
     border: 1px solid #99D6FF;
     border-radius: 6px;
@@ -90,10 +91,44 @@
 }
 
 .popup-form {
-  // width: 290px;
-  // height: 257px;
-  // padding: 20px 20px 0;
   box-sizing: border-box;
+
+  #captcha {
+    margin: 0 auto;
+    width: 269px;
+    height: 40px;
+
+    #nc {
+      height: 100%;
+    }
+
+    ._nc {
+      .stage1 {
+        height: 100%;
+
+        .slider {
+          height: 100%;
+
+          .label {
+            height: 40px;
+            line-height: 40px;
+          }
+
+          .button {
+            width: 40px;
+            height: 40px;
+            .icon{
+              left: 5px;
+            }
+          }
+          .bg-green{
+            height: 40px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+  }
 }
 
 .popup-form__item {
@@ -101,7 +136,7 @@
   align-items: center;
   justify-content: center;
   margin: 0 auto 15px;
-  
+
   .popup-form__ipt {
     flex: 1;
   }
@@ -173,8 +208,8 @@
   width: 110px;
   height: 36px;
   padding: 0;
-    border: 1px solid #E5E5E5;
-    box-sizing: border-box;
+  border: 1px solid #E5E5E5;
+  box-sizing: border-box;
   font-size: 13px;
   color: #999;
   text-align: center;

src/router/router-config.js

@@ -301,7 +301,7 @@ export default [
   },
   //限时免费落地页
   {
-    path:'/free',
+    path: '/free',
     exact: true,
     component: loadable(() => import(/*limit-free*/'@/components/limit-free'))
   },
@@ -313,7 +313,7 @@ export default [
   // 新的开宝箱活动-我的宝箱
   {
     path: '/box/yearTreasure',
-    component: loadable(() => import(/* webpackChunkName: 'treasure-box-mybox' */ '@components/activity/treasure-box/myTreasure/index'))
+    component: loadable(() => import(/* webpackChunkName: 'treasure-box-mybox' */ '@components/activity/treasure-box/myTreasure/index')),
   },
   // 新的开宝箱活动-扫码、分享页
   {