公用样式提取

Squashed commit of the following:

commit 8e694142bc2308710f37ed1de0b0f1749cc5492f
Author: liucf <liucf@zjlantone.com>
Date:   Mon Sep 2 14:17:09 2019 +0800

    样式优化
    Squashed commit of the following:

    commit f404bba9a3c455484b37b20b39936096dbc4a26e
    Merge: 34c5582 7da35f6
    Author: liucf <liucf@zjlantone.com>
    Date:   Mon Sep 2 13:34:34 2019 +0800

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

    commit 34c5582d10f66fd76223a6183c9b1669ff37d0e8
    Author: liucf <liucf@zjlantone.com>
    Date:   Mon Sep 2 13:34:19 2019 +0800

        选项输入框优化-plus

    commit 7da35f692a404ab342314b75ff1f7dd50f62f0ab
    Author: luolei <16657115156@163.com>
    Date:   Mon Sep 2 11:33:04 2019 +0800

        输入框定位问题

    commit 29ebd100d97b224c36dfa6de3062ab77477db81f
    Merge: de78efe 874925a
    Author: luolei <16657115156@163.com>
    Date:   Mon Sep 2 10:20:33 2019 +0800

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

    commit de78efe70e52203b9ae0d2620949764c7b654ce8
    Author: luolei <16657115156@163.com>
    Date:   Mon Sep 2 10:20:22 2019 +0800

        6系列登录会挡住输入框的问题

    # Conflicts:
    #	src/common/OptionInp.vue

commit ebc4157a83c055855c868333e7d1bfd25a39048f
Author: liucf <liucf@zjlantone.com>
Date:   Mon Sep 2 13:32:56 2019 +0800

    选项输入框

# Conflicts:
#	src/common/OptionInp.vue

src/common/CheckBox.vue

@@ -125,6 +125,7 @@ import OptionInp from '../common/OptionInp.vue';
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .check-wrap{
     img{
       width:100%;
@@ -133,7 +134,7 @@ import OptionInp from '../common/OptionInp.vue';
       width:100%;
     }
     .list{
-      color: #7C828E;
+      color: #colors[text];
       margin:0 .1rem .1rem 0;
       padding: .12rem .1rem;
       display: inline-block;
@@ -149,10 +150,10 @@ import OptionInp from '../common/OptionInp.vue';
       }
     }
     .check{
-      color: #4F50FF;
+      color: #colors[theme];
     }
     .exclu{
-      color:#e6e7e9;
+      color:#colors[exclu];
     }
   }
 </style>

src/common/Input.vue

@@ -62,13 +62,13 @@
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .inp-wrap{
     input{
       width: 100%;
-      color: #4F50FF;
+      color: #colors[theme];
       font-size: .3rem;
       border: 0 none;
-      // border-bottom: 1px solid #7C828E;
       border-bottom: 1px solid #DFE0E4;
       margin-bottom: .3rem;
       border-radius: 0;
@@ -78,7 +78,7 @@
       background: transparent;
     }
     .change{
-      border-color:  #4F50FF;
+      border-color:  #colors[theme];
     }
   }
 </style>

src/common/MultiLineInput.vue

@@ -120,6 +120,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .multipIpt {
     width: 100%;
     // height: .74rem /* 74/100 */;
@@ -132,7 +133,7 @@ export default {
     margin: .3rem 0;
     .contentVal {
       font-size: .3rem /* 30/100 */;
-      color: #4F50FF;
+      color: #colors[theme];
       text-align: left;
       border: 0 none;
       // border-bottom: 1px solid #b0afaf !important;
@@ -154,7 +155,7 @@ export default {
   .inline{
     display: inline-block;
     vertical-align: middle;
-    color: #7C828E;
+    color: #colors[text];
     padding: 0;
     margin:0;
     height: auto /* 74/100 */;
@@ -177,7 +178,6 @@ export default {
   }
   .sticP {
     width: 100%;
-    // position: relative;
     padding-right: 1rem;
     box-sizing: border-box;
     .iptWrap {
@@ -191,6 +191,6 @@ export default {
     }
   }
   .check{
-    color: #4F50FF;
+    color: #colors[theme];
   }
 </style>

src/common/OptionInp.vue

@@ -89,31 +89,20 @@ import $ from 'jquery';
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .inpbox{
-    color:#7C828E;
+    color:#colors[text];
     display: inline-block;
     width: 100%;
     white-space: normal;
     vertical-align: middle;
-    // padding-right: .3rem;
     height: .42rem;
-    line-height: .42rem; 
-    /* .inp{
-      display: inline-block;
-      vertical-align: top;
-      input{
-        color: #4F50FF;
-        font-size: .28rem;
-        border-bottom: 1px solid #DFE0E4 !important;
-        border-radius: 0;
-        padding-left: .05rem;
-      }
-    } */
+    line-height: .42rem;
     .prefix,.suffix{
       display: inline-block;
       vertical-align: middle;
     }
-    input{
+     input{
       height: .42rem;
       color: #4F50FF;
       font-size: .28rem;
@@ -124,11 +113,11 @@ import $ from 'jquery';
       line-height: 0.38rem;
     }
     .check{//选中
-      color: #4F50FF;
+      color: #colors[theme];
     }
     // .inp .exclu{ //互斥
     .exclu{ //互斥
-      color:#e6e7e9 !important;
+      color:#colors[exclu] !important;
     }
     .cancel{ //取消
       color: #bbbbbb !important;

src/common/Radio.vue

@@ -77,6 +77,7 @@ import OptionInp from '../common/OptionInp.vue';
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .radio-wrap{
     img{
       width:100%;
@@ -85,7 +86,7 @@ import OptionInp from '../common/OptionInp.vue';
       width:100%;
     }
     .list{
-      color: #7C828E;
+      color: #colors[text];
       margin:0 .1rem .1rem 0;
       padding: .12rem .1rem;
       display: inline-block;
@@ -102,7 +103,7 @@ import OptionInp from '../common/OptionInp.vue';
         vertical-align: middle;
       }
       .check{
-        color: #4F50FF;
+        color: #colors[theme];
       }
     }
   }

src/common/RadioSelect.vue

@@ -82,17 +82,17 @@ import OptionInp from '../common/OptionInp.vue';
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .radio-wrap{
     img{
       width:100%;
     }
     .list{
-      color: #7C828E;
+      color: #colors[text];
       margin:0 .1rem .1rem 0;
       padding: .12rem .1rem;
       white-space: nowrap;
       -webkit-white-space: nowrap;
-      // -webkit-box-orient: vertical;
       span {
           margin-left:1.2rem;
       }
@@ -101,7 +101,7 @@ import OptionInp from '../common/OptionInp.vue';
         vertical-align: middle;
       }
       .check{
-        color: #4F50FF;
+        color: #colors[theme];
       }
     }
   }

src/common/Tiptoast.vue

@@ -71,7 +71,7 @@
         font-weight: 700;
       }
       .text{
-        color:#000;
+        color:#colors[quest];
         padding-top: .3rem;
         font-size: .3rem;
       }

src/common/Toast.vue

@@ -54,7 +54,7 @@ import $ from 'jquery';
       border-radius: .2rem;
       z-index: 1000;
       .text{
-        color:#000;
+        color:#colors[quest];
         text-align: center;
         height: 1.25rem;
         // overflow-y: auto;
@@ -72,11 +72,7 @@ import $ from 'jquery';
           height: .70rem;
           line-height: .70rem;
           text-align: center;
-          // color: #fff;
           font-size: .30rem;
-          // background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
-          // background: linear-gradient(right, #4F8BFF, #4F4FFF);
-          // box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
           border-radius: .35rem;
         }
         .comf{
@@ -84,7 +80,7 @@ import $ from 'jquery';
           border:2px solid rgba(246,75,68,1);
         }
         .canc{
-          color: #4F50FF;
+          color: #colors[theme];
           border:2px solid rgba(79,80,255,1);
         }
       }

src/components/AddContent.vue

@@ -154,7 +154,7 @@ export default {
   }
   // .btscroll;  
   h3 {
-    color: #000;
+    color: #colors[quest];
     margin-bottom: 0.36rem;
   }
 }

src/components/Detail.vue

@@ -242,12 +242,13 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .detail-wrap{
     // padding: .3rem .5rem 1.2rem .6rem;
     padding: .3rem .4rem 1rem ;
     font-size: .3rem;
     .quest{
-      color:#000;
+      color:#colors[quest];
       margin-bottom: .2rem;
     }
     .questionImg {

src/components/DiagTreat.vue

@@ -191,7 +191,7 @@
     font-size: .3rem;
     // .btscroll;    
     .quest{
-      color: #000;
+      color: #colors[quest];
       margin-bottom: .36rem;
       font-weight: 700;
     }

src/components/Others.vue

@@ -187,7 +187,7 @@
     font-size: .3rem;
     // .btscroll;
     .quest{
-      color: #000;
+      color: #colors[quest];
       margin-bottom: .36rem;
       font-weight: 700;
     }

src/components/PathInfo.vue

@@ -203,6 +203,7 @@
   }
 </script>
 <style lang="less" scoped>
+@import '../less/base.less';
   .path-wrap{
     font-size: .28rem;
     position: absolute;
@@ -224,11 +225,11 @@
       margin-left: .6rem;
       position: relative;
       >p{
-        color: #7C828E;
+        color: #colors[text];
         margin-top: .27rem;
       }
       .name{
-        color: #7C828E;
+        color: #colors[text];
         margin-top: .27rem;
         span{
           margin-right: .08rem;
@@ -239,7 +240,7 @@
           display: inline-block;
           margin-top: .27rem;
           span{
-            color: #7C828E;
+            color: #colors[text];
           }
         }
         p:first-child{
@@ -250,7 +251,7 @@
         position: absolute;
         left: 0;
         bottom:-.6rem;
-        color: #7C828E;
+        color: #colors[text];
       }
     }
     .out-box{

src/components/Preview.vue

@@ -419,7 +419,7 @@ export default {
       padding-left: 0;
     }
     h4 {
-      color: #000;
+      color: #colors[quest];
       font-size: .32rem;
       font-weight: bold;
       position: relative;
@@ -443,7 +443,7 @@ export default {
   }
   .baseMsg {
     font-size: 0.32rem;
-    color: #000000;
+    color: #colors[quest];
     letter-spacing: 0;
     text-align: justify;
     font-weight: bold;

src/components/Symptom.vue

@@ -334,7 +334,7 @@ export default {
   font-size: 0.3rem;
   // .btscroll;
   .quest {
-    color: #000;
+    color: #colors[quest];
     margin-bottom: 0.36rem;
     font-weight: 700;
     .searchImg {

src/components/TabPage.vue

@@ -245,7 +245,7 @@ export default {
       width: 100%;
       height: 0.5rem;
       line-height: 0.5rem;
-      color: #7c828e;
+      color: #colors[text];
       text-align: center;
     }
     .current {

src/less/base.less

@@ -1,6 +1,13 @@
 // 公用less
 @font-size: 13.33333333vw !important;
-@theme-color:#4F50FF;
+// @theme-color:#4F50FF;
+// 命名空间和访问符,映射
+#colors(){
+  theme:#4F50FF; //主题色，选中色
+  text:#7C828E; //患者信息及选项文字颜色
+  quest:#000000; //问题颜色
+  exclu:#e6e7e9; //互斥文字颜色
+}
 .mask{
   width:100%;
   height: 100%;
@@ -62,7 +69,8 @@
     border: 1px solid #DFE0E4;
     border-radius: .08rem;
     text-align: center;
-    color: #7C828E;
+    // color: #7C828E;
+    color: #colors[text];
     margin: 0 .25rem .3rem 0;
     padding: 0 .05rem;
     box-sizing: border-box;
@@ -83,9 +91,10 @@
 .result{
   padding-right: .3rem;
   .title{
-    color: #4F50FF;
+    // color: #4F50FF;
+    // color: #colors[theme];
     padding-left: .1rem;
-    border-left: .08rem solid #4F50FF;
+    border-left: .08rem solid #colors[theme];
     margin-bottom: .19rem;
     font-weight: 700;
   }
@@ -111,5 +120,5 @@
 }
 
 .toastWrapper {
-  background-color: #000;
+  background-color: #colors[quest];
 }