多选

components/en-checkbox/en-checkbox.vue

@@ -5,7 +5,7 @@
         {{ label }}
       </view>
       <view class="input-box-right">
-          <checkbox-group @change="checkboxChange">
+          <checkbox-group class="checkbox-data" @change="checkboxChange">
             <label class="checkbox-item" v-for="(checkboxItem,index) in checkboxArr">
               <checkbox  :id="name+index" :value="checkboxItem.id"  />
               <text  class="iconfont icon-ok" v-if="checkboxItem.isChecked"> &#xe609;</text>
@@ -15,7 +15,6 @@
           </checkbox-group>
       </view>
     </view>
-    <view class="box-solid"></view>
   </view>
 </template>
 
@@ -140,7 +139,8 @@ export default {
   }
   .box{
     background-color: #ffffff;
-    padding: 34rpx 0 12rpx 0;
+    border-bottom: 2rpx solid #F0F0F0;
+    padding: 34rpx 0 32rpx 0;
     .input-box {
       display: flex;
       align-items: center;
@@ -153,20 +153,20 @@ export default {
       .input-box-right{
         display: flex;
         align-items: center;
-        .checkbox-item{
-          padding-right: 20rpx;
-          margin-bottom: 20rpx;
-          checkbox{
-            display: none;
+        .checkbox-data{
+          display: flex;
+          flex-wrap: wrap;
+          .checkbox-item{
+            margin: 6rpx 20rpx 0 6rpx;
+            checkbox{
+              display: none;
+            }
           }
         }
+
       }
 
     }
-    .box-solid{
-      border-bottom: 1px solid #F0F0F0;
-      margin-top:22rpx;
-    }
   }
 
 </style>

components/en-input/en-input.vue

@@ -12,7 +12,6 @@
           v-model="inputValue"
       />
     </view>
-    <view class="box-solid"></view>
   </view>
 </template>
 
@@ -70,7 +69,8 @@ export default {
 <style lang="scss" scoped>
   .box{
     background-color: #ffffff;
-    padding: 34rpx 0 12rpx 0;
+    border-bottom: 2rpx solid #F0F0F0;
+    padding: 34rpx 0 32rpx 0;
     .input-box {
       display: flex;
       align-items: center;
@@ -80,10 +80,6 @@ export default {
         color: #333333;
       }
     }
-    .box-solid{
-      border-bottom: 1px solid #F0F0F0;
-      margin-top:22rpx;
-    }
   }
 
 </style>

components/en-send/en-send.vue

@@ -18,7 +18,6 @@
         {{timeNum}} s
       </view>
     </view>
-    <view class="box-solid"></view>
   </view>
 </template>
 
@@ -105,7 +104,8 @@ export default {
 <style lang="scss" scoped>
   .box{
     background-color: #ffffff;
-    padding: 34rpx 0 12rpx 0;
+    border-bottom: 2rpx solid #F0F0F0;
+    padding: 34rpx 0 32rpx 0;
     .input-box {
       display: flex;
       align-items: center;
@@ -119,10 +119,6 @@ export default {
         color: #3169FA;
       }
     }
-    .box-solid{
-      border-bottom: 1rpx solid #F0F0F0;
-      margin-top:22rpx;
-    }
   }
 
 </style>

pages/index/index.vue

@@ -1,10 +1,9 @@
 <template>
 	<view class="box">
     <Nav title="首页"></Nav>
-    <enCheckbox v-model="type"  label="用户类型" :checkboxData="checkboxData"></enCheckbox>
     <enInput v-model="text" label="用户姓名"></enInput>
     <enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
-    <enInput v-model="text" label="用户姓名"></enInput>
+    <enCheckbox v-model="type"  label="用户爱好" :checkboxData="checkboxData"></enCheckbox>
 	</view>
 
 </template>