js

assets/css/mine/coupdz.scss

@@ -71,11 +71,16 @@
     padding: 0 24rpx 30rpx 24rpx;
     background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 88rpx);
     border-radius: 10rpx 10rpx 0px 0px;
+    width: 640rpx;
+    padding: 24rpx;
     .title {
         height: 88rpx;
         margin-bottom: 30rpx;
         .left {
             width: 33.3%;
+            font-size: 26rpx;
+            color: #292b33;
+            font-weight: 600;
         }
         .right {
             justify-content: flex-end;
@@ -92,6 +97,49 @@
             font-weight: bold;
         }
     }
+    .btn {
+        height: 68rpx;
+        background: #1969f9;
+        border-radius: 10px;
+        font-size: 28rpx;
+        color: #ffffff;
+    }
+    .show-input {
+        .t1 {
+            font-size: 26rpx;
+            color: #919399;
+        }
+        .t2 {
+            font-size: 26rpx;
+            color: #484b59;
+            font-weight: bold;
+        }
+    }
+    .input-box {
+        .t1 {
+            font-size: 26rpx;
+            color: #919399;
+        }
+        .uni-input {
+            width: 260rpx;
+            height: 72rpx;
+            background: #f5f5f7;
+            border-radius: 10rpx;
+            text-indent: 15rpx;
+            font-size: 26rpx;
+        }
+        .code-pic {
+            width: 160rpx;
+            height: 72rpx;
+            margin-left: 16rpx;
+        }
+        .text {
+            margin-left: 30rpx;
+            margin-top: 17rpx;
+            font-size: 26rpx;
+            color: #1969f9;
+        }
+    }
 }
 
 .no-data {

pages/mine/coupdz.vue

@@ -29,16 +29,25 @@
         <!-- 获取电子券信息 -->
         <uni-popup ref="popup" type="center">
             <view class="layer-box">
-                <view class="title row verCenter">
-                    <view class="left"></view>
-                    <view class="center row rowCenter verCenter">筛选</view>
+                <view class="title row verCenter bothSide">
+                    <view class="left">获取电子券信息</view>
                     <view class="right row"><text class="iconfont icon-xxx" @click="close()"></text></view>
                 </view>
-
-                <view class="btn row bothSide verCenter">
-                    <view class="btn0 row rowCenter verCenter">重置</view>
-                    <view class="btn1 row rowCenter verCenter">筛选</view>
+                <view class="show-input row verCenter" style="margin-bottom: 24rpx;">
+                    <text class="t1">手机号：</text>
+                    <text class="t2">13800138000</text>
+                </view>
+                <view class="input-box row" style="margin-bottom: 16rpx;">
+                    <text class="t1">图形验证码：</text>
+                    <input type="text" placeholder="" class="uni-input" />
+                    <image src="" mode="aspectFill" class="code-pic"></image>
+                </view>
+                <view class="input-box row" style="margin-bottom: 32rpx;">
+                    <text class="t1">短信验证码：</text>
+                    <input type="text" placeholder="" class="uni-input" />
+                    <text class="text">发送验证码</text>
                 </view>
+                <view class="btn row rowCenter verCenter">提 交</view>
             </view>
         </uni-popup>
     </view>