Browse Source

Merge branch 'new' of http://192.168.2.236:10080/zhouna/preliminary into new

luolei 5 years ago
parent
commit
4121b5e146
4 changed files with 49 additions and 12 deletions
  1. 10 1
      src/common/CheckBox.vue
  2. 26 7
      src/common/OptionInp.vue
  3. 11 2
      src/common/Radio.vue
  4. 2 2
      src/components/Detail.vue

+ 10 - 1
src/common/CheckBox.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="check-wrap" v-if="item">
-    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,'',true)">
+    <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,'',true)"> -->
+      <p v-for="(it,index) in datas.questionDetailList" :key="it.id" :class="['list',{'block':((it.description||it.name).indexOf('${'))!=-1}]" @click="handleClick(it,index,'',true)">
       <img :src="it.select==1?check:defaultPic">
       <span v-if="((it.description||it.name).indexOf('${'))==-1" :class="[{'check':it.select==1},{'exclu':exclusion !==999 && it.exclusion !== exclusion}]">{{it.description||it.name}}</span>
       <OptionInp v-else 
@@ -128,16 +129,24 @@ import OptionInp from '../common/OptionInp.vue';
     img{
       width:100%;
     }
+    .block{
+      width:100%;
+    }
     .list{
       color: #7C828E;
       margin:0 .1rem .1rem 0;
       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;

+ 26 - 7
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?'90%':'33%'}"
               :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>
@@ -24,7 +25,7 @@ import { getExpStr} from '@utils/tools';
       return{
         msg:{},
         txt:this.item.value || '',
-        select:0
+        select:0,
       }
     },
     props:['item','exclu'],
@@ -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: 100%;
+    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{ //取消

+ 11 - 2
src/common/Radio.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="radio-wrap" v-if="item">
-    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,true)">
+    <!-- <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index,true)"> -->
+    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" :class="['list',{'block':((it.description||it.name).indexOf('${'))!=-1}]" @click="handleClick(it,index,true)">
       <img :src="it.select==1?check:defaultPic">
       <span v-if="((it.description||it.name).indexOf('${'))==-1" :class="{'check':it.select==1}">{{it.description||it.name}}</span>
       <OptionInp v-else :item="it" @handleInp="inpVal($event,index)" @handleSelec="handleClick(it,index)"/>
@@ -80,18 +81,26 @@ import OptionInp from '../common/OptionInp.vue';
     img{
       width:100%;
     }
+    .block{
+      width:100%;
+    }
     .list{
       color: #7C828E;
       margin:0 .1rem .1rem 0;
       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;
       }

+ 2 - 2
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;