css

assets/css/mine/forget.scss

@@ -102,5 +102,30 @@
                 color: #979797;
             }
         }
+        &.verification-code {
+            padding: 0 24rpx;
+            .uni-input {
+                font-size: 26rpx;
+            }
+            .pic {
+                width: 160rpx;
+                height: 62rpx;
+            }
+        }
     }
+    .btn {
+        margin: 0 60rpx;
+        height: 88rpx;
+        background: #1969f9;
+        border-radius: 10rpx;
+        font-size: 28rpx;
+        color: #ffffff;
+    }
+}
+
+.mb24 {
+    margin-bottom: 24rpx;
+}
+.mb40 {
+    margin-bottom: 40rpx;
 }

pages/mine/forget.vue

@@ -19,7 +19,7 @@
                 <text class="tt">完成</text>
             </view>
         </view>
-        <view class="input-box mobile row verCenter mb24">
+        <view class="input-box mobile row verCenter" style="margin-bottom: 24rpx;">
             <view class="picker-box">
                 <picker @change="bindPickerChange" :value="index" :range="array">
                     <view class="row verCenter bothSide">
@@ -30,10 +30,15 @@
             </view>
             <input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
         </view>
-        <view class="input-box code row bothSide verCenter mb40">
-            <input type="number" placeholder="请输入验证码" placeholder-style="color:#919399;" class="uni-input" />
+        <view class="input-box verification-code row bothSide verCenter" style="margin-bottom: 24rpx;">
+            <input type="text" placeholder="请输入图中字符，不区分大小写" placeholder-style="color:#919399;" class="uni-input" />
+            <image src="https://www.ichunt.com/v3/public/verify" class="pic"></image>
+        </view>
+        <view class="input-box code row bothSide verCenter" style="margin-bottom: 40rpx;">
+            <input type="number" placeholder="请输入短信验证码" placeholder-style="color:#919399;" class="uni-input" />
             <text class="code">获取验证码</text>
         </view>
+        <view class="btn row rowCenter verCenter" @click="submit()">提交</view>
     </view>
 </template>
 

uni.scss

@@ -79,10 +79,3 @@ image {
 .verCenter {
     align-items: center;
 }
-
-.mb24 {
-    margin-bottom: 24rpx;
-}
-.mb40 {
-    margin-bottom: 40rpx;
-}