选项带输入框宽度适配问题

src/common/CheckBox.vue

@@ -134,10 +134,15 @@ import OptionInp from '../common/OptionInp.vue';
       padding: .12rem .1rem;
       display: inline-block;
       white-space: nowrap;
+      overflow-x: hidden;
       img{
         width: .38rem;
         vertical-align: middle;
       }
+      >span{
+        white-space: normal;
+        vertical-align: middle;
+      }
     }
     .check{
       color: #4F50FF;

src/common/OptionInp.vue

@@ -2,9 +2,10 @@
 <template>
   <div :class="['inpbox',{'check':item.select},{'exclu':exclu}]">
     <span class="prefix" v-if="msg.prefix">{{msg.prefix}}</span>
-    <div class="inp" @click="preClick">
+    <!-- <div class="inp" @click="preClick"> -->
       <input :type="msg.type=='number'?'tel':'text'" 
               :placeholder="msg.placeholder"
+              :style="{'width':msg.prefix&&msg.suffix?'33%':(msg.prefix || msg.suffix?'50%':'100%')}"
               :disabled="exclu"
               :maxlength="msg.type=='number'?10:''"
               :class="[{'exclu':exclu},{'cancel':item.select==0}]"
@@ -12,7 +13,7 @@
               @click="handleCli"
               @blur="handleBlur"
               @input="changeVal">
-    </div>
+    <!-- </div> -->
     <span class="suffix" v-if="msg.suffix">{{msg.suffix}}</span>
   </div>
 </template>
@@ -59,6 +60,7 @@ import { getExpStr} from '@utils/tools';
         e.stopPropagation();
       },
       handleCli(e){
+        e.stopPropagation();
         // const select = this.item.select;
         if(!this.select){//聚焦时自动选中该项
           this.$emit('handleSelec');
@@ -80,11 +82,15 @@ import { getExpStr} from '@utils/tools';
   .inpbox{
     color:#7C828E;
     display: inline-block;
-    .inp{
+    width: 94%;
+    white-space: normal;
+    vertical-align: middle;
+    // padding-right: .3rem;
+    /* height: .42rem;
+    line-height: .42rem; */
+    /* .inp{
       display: inline-block;
       vertical-align: top;
-      // position: relative;
-      // top:1px;
       input{
         color: #4F50FF;
         font-size: .28rem;
@@ -92,11 +98,24 @@ import { getExpStr} from '@utils/tools';
         border-radius: 0;
         padding-left: .05rem;
       }
+    } */
+    .prefix,.suffix{
+      display: inline-block;
+      vertical-align: middle;
+    }
+    input{
+      height: .42rem;
+      color: #4F50FF;
+      font-size: .28rem;
+      border-bottom: 1px solid #DFE0E4 !important;
+      border-radius: 0;
+      padding-left: .05rem;
     }
     .check{//选中
       color: #4F50FF;
     }
-    .inp .exclu{ //互斥
+    // .inp .exclu{ //互斥
+    .exclu{ //互斥
       color:#e6e7e9 !important;
     }
     .cancel{ //取消

src/common/Radio.vue

@@ -86,12 +86,17 @@ import OptionInp from '../common/OptionInp.vue';
       padding: .12rem .1rem;
       display: inline-block;
       white-space: nowrap;
-      -webkit-white-space: nowrap;
+      overflow-x: hidden;
+      // -webkit-white-space: nowrap;
       // -webkit-box-orient: vertical;
       img{
         width: .38rem;
         vertical-align: middle;
       }
+      >span{
+        white-space: normal;
+        vertical-align: middle;
+      }
       .check{
         color: #4F50FF;
       }

src/components/Detail.vue

@@ -192,7 +192,7 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
             }
           }
         }
-        
+
         this.checkDatas = Object.assign({},this.checkDatas,{questionMapping:datas});
         // 已有选中内容重新进来，点清空时并非真的清空
         if(this.checkDatas.select ==1){return}
@@ -244,7 +244,7 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
 <style lang="less" scoped>
   .detail-wrap{
     // padding: .3rem .5rem 1.2rem .6rem;
-    padding: .3rem .5rem 1rem .6rem;
+    padding: .3rem .4rem 1rem ;
     font-size: .3rem;
     .quest{
       color:#000;