样式优化

src/common/CheckBox.vue

@@ -186,7 +186,7 @@ import OptionInp from '../common/OptionInp.vue';
     .list{
       color: #colors[text];
       margin:0 .1rem .07rem 0;
-      padding: .06rem .1rem .06rem 0;
+      padding: .1rem .1rem .1rem 0;
       display: inline-block;
       white-space: nowrap;
       overflow-x: hidden;
@@ -201,10 +201,10 @@ import OptionInp from '../common/OptionInp.vue';
     }
     .radioCheck {
       display: inline-block;
-      line-height: .35rem;
+      line-height: .66rem;
       // min-width: 2rem;
       // text-align: center;
-      padding:.1rem .1rem;
+      padding:0 .2rem;
       box-sizing: border-box;
       border-radius: .38rem;
       border: 1px solid #DFE0E4;

src/common/Label.vue

@@ -145,9 +145,9 @@
     font-size: .3rem;
      .symp{
       display: inline-block;
-      min-width:1.9rem;
+      min-width:2.05rem;
       height: .72rem;
-      border-radius: .36rem;
+      border-radius: .08rem;
       span{
         display: inline-block;
         vertical-align: top;
@@ -173,7 +173,7 @@
       background: #colors[btn];
     }
     .exclu{
-      background:#E3E4E8;
+      // background:#E3E4E8;
     }
   }
   

src/common/Radio.vue

@@ -123,7 +123,7 @@ import OptionInp from '../common/OptionInp.vue';
     .list{
       color: #colors[text];
       margin:0 .1rem .07rem 0;
-      padding: .06rem .1rem .06rem 0;
+      padding: .1rem .1rem .1rem 0;
       display: inline-block;
       white-space: nowrap;
       overflow-x: hidden;
@@ -139,10 +139,10 @@ import OptionInp from '../common/OptionInp.vue';
       }
       .radioCheck {
         display: inline-block;
-        line-height: .35rem;
+        line-height: .66rem;
         // min-width: 2rem;
         // text-align: center;
-        padding:.1rem .1rem;
+        padding:0 .2rem;
         box-sizing: border-box;
         border-radius: .38rem;
         border: 1px solid #DFE0E4;

src/common/Submit.vue

@@ -124,7 +124,6 @@ export default {
       to(#4f4fff)
     );
     background: #colors[btn];
-    box-shadow: 0 0.12rem 0.24rem 0 rgba(79, 129, 255, 0.4);
     border-radius: 0.2rem;
   }
 }

src/components/AddContent.vue

@@ -43,8 +43,8 @@
           </li>
         </ul>
         <div class="result" v-if="allStr">
-          <p class="title">{{allMoudles.name}}</p>
-          <p>{{allStr}}</p>
+          <p class="title"><span class="line"></span>{{allMoudles.name}}</p>
+          <p class="bgResult">{{allStr}}</p>
         </div>
         <div class="thanks">
           <p>感谢您的回答，您的病历已经自动生成。</p>
@@ -151,6 +151,10 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "../less/base.less";
+.comArea {
+  padding-left:0 !important;
+  padding-right: 0 !important;
+} 
 .questionImg {
   width: 100%;
 }

src/components/Detail.vue

@@ -12,7 +12,7 @@
     <div class="viewPrew">
       <div class="content">
         <div class="preQuestion" v-for="(item,index) in checkDatas.questionMapping">
-          <div class="quest" @click="slideToggle(index)">
+          <div class="quest" @click="slideToggle($event,index)">
             <img class="sign" v-if="item.required==1" src="../images/important.svg" alt="">
             <p class="title clearfix">{{index + 1 +'.'+(item.description || item.name)}}{{item.controlType==1?'(单选)':item.controlType==2?'(多选)':''}}</p>
             <p class="result" v-if="item.valueP&&item.slide!=1">{{item.valueP}}</p>
@@ -84,6 +84,7 @@ import RadioSelect from '../common/RadioSelect.vue';
 import MultiLineInput from '../common/MultiLineInput.vue';
 import PickTime from '../common/PickTime.vue';
 import {patt,trimDots,imageUrlPrefix,setScroll} from '@utils/tools.js';
+import $ from 'jquery';
 // 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
   export default {
     name:'Detail',
@@ -157,8 +158,9 @@ import {patt,trimDots,imageUrlPrefix,setScroll} from '@utils/tools.js';
         }
         this.checkDatas = Object.assign({},this.checkDatas);
       },
-      slideToggle(idx){
+      slideToggle(e,idx){
         document.activeElement.blur();
+        console.log(e.currentTarget,$(e.currentTarget).next().height(),this.scroll.maxScrollY)
         let mapping = this.checkDatas.questionMapping;
         let num = 0;
         for(let i in mapping){
@@ -375,6 +377,7 @@ import {patt,trimDots,imageUrlPrefix,setScroll} from '@utils/tools.js';
       color:#colors[quest];
       position: relative;
       .pubques;
+      padding-right: 1.1rem;
       .sign {
         display: inline-block;
         position: absolute;
@@ -398,7 +401,7 @@ import {patt,trimDots,imageUrlPrefix,setScroll} from '@utils/tools.js';
       }
       i{
         position: absolute;
-        right: .2rem;
+        right: .25rem;
         top: 50%;
         margin-top: -.16rem;
         width: .32rem;
@@ -439,7 +442,7 @@ import {patt,trimDots,imageUrlPrefix,setScroll} from '@utils/tools.js';
         position: absolute;
         bottom:0;
         left:0;
-        font-size: .22rem;
+        font-size: .24rem;
         width:100%;
         height: .6rem;
         line-height: .6rem;

src/components/DiagTreat.vue

@@ -52,8 +52,8 @@
             @updata="updataData($event,it.id,i)"/>
       </div>
       <div class="result" v-if="getText()">
-        <p class="title">{{datas.name}}</p>
-        <p class="contentP">{{getText()}}</p>
+        <p class="title"><span class="line"></span>{{datas.name}}</p>
+        <p class="contentP bgResult">{{getText()}}</p>
       </div>
     </div>
 

src/components/Login.vue

@@ -110,9 +110,9 @@ export default {
       this.he = (window.innerHeight,'focus')      
     },
     blur() {
+      document.activeElement.scrollIntoViewIfNeeded(false);
       if(MobileDevice.getModels().join(' or ').indexOf('6') == -1){
         document.activeElement.scrollIntoView({behavior: "smooth",block:'end'})
-        // document.activeElement.scrollIntoViewIfNeeded(true);
         // setTimeout(() => {
         //   document.activeElement.scrollIntoView({behavior: "smooth",block:'center'})
         //   // document.activeElement.scrollIntoViewIfNeeded(true);

src/components/Others.vue

@@ -47,8 +47,8 @@
             @updata="updataData($event,it.id,i)"/>
       </div>
       <div class="result" v-if="getText()">
-        <p class="title">{{datas.name}}</p>
-        <p>{{getText()}}</p>
+        <p class="title"><span class="line"></span>{{datas.name}}</p>
+        <p class="bgResult">{{getText()}}</p>
       </div>
     </div>
     <div class="foot" v-if="modluesLen==3&&!nextName||modluesLen==2">
@@ -139,10 +139,8 @@
             }
           }
         }
-        
         this.$store.commit('setDatas',{type:moduleCP['other'],data:data,pId:data.id,ppId:id});
         this.$store.commit('setText',{type:moduleCP['other'],text:value.replace(patt,'').replace(/\#\{/g,'').replace(/\}/g,''),textP:valueP.replace(patt,'').replace(/\#\{/g,'').replace(/\}/g,''),pId:data.id,flag:true,order:order}); 
-        
         this.$nextTick(()=>{
           this.scroll.refresh()
         })
@@ -196,6 +194,10 @@
   .other-wrap{
     font-size: .3rem;
     // .btscroll;
+    .check-wrap {
+      padding-left:0;
+      padding-right: 0;
+    } 
     .quest{
       color: #colors[quest];
       font-weight: 700;

src/components/PathInfo.vue

@@ -256,7 +256,7 @@
       width: 90%;
       box-shadow:0px 12px 24px 0px rgba(198,187,224,0.15);
       position: relative;
-      top: -0.7rem;
+      top: -0.9rem;
       background-color: #fff;
       margin: 0 auto;
       .msg {
@@ -302,7 +302,7 @@
       margin: 0 auto;
       border-radius: 5px;
       position: absolute;
-      bottom: .88rem;
+      bottom: .68rem;
       transform: translateX(-50%);
       left: 50%;
     }

src/components/Symptom.vue

@@ -39,7 +39,7 @@
         class="result"
         v-if="checkText.length>0"
       >
-        <p class="title">{{nameStr}}</p>
+        <p class="title"><span class="line"></span>{{nameStr}}</p>
         <div class="bgResult">
           <p v-for="(value,index) in checkText">{{value.textP}}</p>
         </div>
@@ -116,7 +116,7 @@ export default {
       start:{},
       end:{},
       slide:false,
-      slideTxt:'展开全部'
+      slideTxt:'展开'
     }
   },
   created() {
@@ -154,12 +154,12 @@ export default {
   methods: {
     slideToggle(){
       let flg = this.slideTxt
-      if(flg == '展开全部'){
+      if(flg == '展开'){
         this.$refs.showHide.style.height = 'auto'
         this.slideTxt = '收起'
       }else{
         this.$refs.showHide.style.height = '3rem'
-        this.slideTxt = '展开全部'
+        this.slideTxt = '展开'
       }
     },  
     touchend(item,flg) {//症状点开详情
@@ -171,7 +171,7 @@ export default {
       let endTime = +new Date();
       if(endTime - this.startTime < 500){//点击事件
         this.common(item,flg);
-        this.slideTxt = '展开全部'
+        this.slideTxt = '展开'
       }
       this.startTime = "";
     },
@@ -366,10 +366,10 @@ export default {
 .tip span {
   color: #colors[theme];
   float: right;
+  font-size: .28rem;
 }
 .symp-wrap {
   font-size: 0.3rem;
-  // .btscroll;
   .quest {
     color: #colors[quest];
     margin-bottom: 0.36rem;
@@ -385,10 +385,9 @@ export default {
   padding-bottom: .2rem;
   .choo-symp{
       display: inline-block;
-      min-width:1.9rem;
+      min-width:2.05rem;
       height: .74rem;
       background: #colors[btn];
-      box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
       border-radius: .08rem;
       white-space: nowrap;
       margin: 0 .25rem .3rem 0;
@@ -416,13 +415,12 @@ export default {
   }
   .result{
     padding-right: .3rem;
-    .title{
-      color: #colors[btn];
-      padding-left: .1rem;
-      border-left: .08rem solid #colors[btn];
-      margin-bottom: .19rem;
-      font-weight: 700;
-    }
+    // .title{
+    //   color: #colors[btn];
+    //   padding-left: .1rem;
+    //   margin-bottom: .19rem;
+    //   font-weight: 700;
+    // }
     p{
       color: #666;
       line-height: .44rem;

src/components/TabPage.vue

@@ -7,8 +7,9 @@
         :key="it.id"
         @click="clickTab(it,index)">
         <span :class="{current:index==number,comp:finish[it.type]}" v-if="type[it.type]==1">
-          <i>{{index+1}}</i>
+          <i class="order">{{index+1}}</i>
           {{it.name}}
+          <i class="line" v-if="index==number"></i>
         </span>
       </p>
     </div>
@@ -21,7 +22,6 @@
           :nameStr="item.name"
           :modluesLen="modluesLen"
         />
-      
         <DiagTreat
           v-if="flag==moduleCP['diagT']&&item.type==moduleCP['diagT']&&moduleShow"
           :datas="item"
@@ -31,7 +31,6 @@
           @next="toNext"
           @back="beBack"
         />
-
         <Others
           v-if="flag==moduleCP['other']&&item.type==moduleCP['other']&&moduleShow"
           :modluesLen="modluesLen"
@@ -239,7 +238,7 @@ export default {
       box-sizing: border-box;
     }
     span {
-      font-size: 0.24rem;
+      font-size: 0.28rem;
       display: inline-block;
       vertical-align: top;
       width: 100%;
@@ -247,14 +246,22 @@ export default {
       line-height: 0.5rem;
       color: #colors[text];
       text-align: center;
+      position: relative;
+    }
+    .line {
+      width: .6rem;
+      height: .04rem;
+      background-color: #colors[btn];
+      display: inline-block;
+      position: relative;
+      bottom: .2rem;
     }
     .current {
-      color: #0043e8;
-      background: #e5ecfc;
+      color: #colors[btn];
       border-radius: 25px;
     }
     .comp{
-      color: #0043e8;
+      color: #colors[btn];
     }
 }
   .content {

src/less/base.less

@@ -5,7 +5,7 @@
 #colors(){
   theme:#6678FF; //主题色，选中色
   text:#7C828E; //患者信息及选项文字颜色
-  quest:#000000; //问题颜色
+  quest:#333333; //问题颜色
   exclu:#e6e7e9; //互斥文字颜色
   btn:#6678FF;//按钮颜色
   line:#E6E6E6;//按钮颜色
@@ -82,7 +82,7 @@
   padding-bottom: .2rem;
   .symp{
     display: inline-block;
-    min-width:1.9rem;
+    min-width:2.05rem;
     height: .74rem;
     line-height: .74rem;
     border: 1px solid #DFE0E4;
@@ -110,14 +110,22 @@
 .result{
   // padding-right: .3rem;
   .title{
-    // color: #4F50FF;
-    // color: #colors[theme];
-    padding-left: .1rem;
-    border-left: .08rem solid #colors[theme];
+    color: #333;
+    // padding-left: .1rem;
     margin-bottom: .19rem;
     font-weight: 700;
+    .line {
+      width: .08rem;
+      height: .32rem;
+      background-color: #colors[btn];
+      display: inline-block;
+      border-radius: .04rem;
+      position: relative;
+      top: .03rem;
+      margin-right: .08rem;
+    }
   }
-  p{
+  p {
     color: #666;
     line-height: .44rem;
   }