我的宝箱滑块验证样式

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 {
+.popup-packet__button--bundle {
   margin-top: 5px;
-  }
+}
+
 // }
 
 [data-skip="default"] {
@@ -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 {

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')),
   },
   // 新的开宝箱活动-扫码、分享页
   {