请输入激活码

src/components/cme/change-card.vue

@@ -16,10 +16,17 @@
         </div>
       </article>
       <section class="input-wrapper">
-        <article class="code">
-          <span>激活码</span>
-          <input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码">
-        </article>
+        <div class="code">
+          <van-field
+            maxlength="26"
+            v-model="activationCode"
+            label="激活码"
+            placeholder="请输入激活码"
+          />
+          <!-- <span>激活码</span>
+          <input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
+        </div>
+        <div class="cover"></div>
         <span class="error">{{errorMsg}}</span>
         <img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" />
       </section>
@@ -146,30 +153,20 @@ export default {
   }
   .input-wrapper {
     position: relative;
+    .cover {
+      position: relative;
+      top: px2rem(-77px);
+      z-index: 1;
+      height: px2rem(2px);
+      margin-left: px2rem(58px);
+      margin-right: px2rem(2px);
+      background: #fff;
+    }
     .code {
       display: flex;
-      flex-direction: row;
-      height: px2rem(40px);
-      line-height: px2rem(40px);
-      font-size: px2rem(14px);
-      margin: px2rem(20px) 0;
-      margin-bottom: px2rem(40px);
-      // padding: px2rem(20px) 0;
-      // padding-top: 0;
-      span {
-        display: inline-block;
-        margin-right: px2rem(10px);
-        color: #373839;
-        // width: px2rem(50px);
-      }
-      input {
-        flex: 1;
-        border: 1px solid #C7C8C9;
-        border-radius: px2rem(4px);
-        padding: 0 px2rem(10px);
-        color: #373839;
-        box-shadow: none !important;
-      }
+      flex-direction: column;
+      padding: px2rem(20px) 0;
+      padding-top: 0;
     }
     .error {
       position: absolute;