UI规范

src/common/ComTextArea.vue

@@ -90,7 +90,7 @@ export default {
       color: #4F50FF;
       resize: none;
       box-shadow: none;
-      font-size: 0.3rem;
+      font-size: #font[select];
       box-sizing: border-box;
       border: 1px solid #DFE0E4;
       border-radius: .08rem /* 8/100 */;

src/common/Dialog.vue

@@ -66,7 +66,7 @@ export default {
     background-color: #colors[bgques];
     border-radius: 0 0.24rem 0.24rem 0.24rem;
     margin-top: 0.3rem;
-    font-size: 0.28rem;
+    font-size: #font[dialog];
     padding: 0.24rem;
     display: inline-block;
   }
@@ -93,7 +93,7 @@ export default {
   .edit{
     color: #colors[theme];
     font-style: normal;
-    font-size: .26rem;
+    font-size: #font[dialog];
     float: right;
     display: inline-block;
     margin-top: .56rem;

src/common/HomePage.vue

@@ -120,10 +120,10 @@ export default {
   color: #fff;
   font-size: 0.32rem;
   font-weight: 500;
-  width: 5.2rem;
+  width: 5.1rem;
   position: absolute;
   bottom: 15%;
   left: 50%;
   margin-left: -2.6rem;
 }
-</style>
+</style>

src/common/MultSelect.vue

@@ -102,6 +102,7 @@ export default {
       this.$emit("updata",newData);*/
     },
     makeSuer() {
+      if(!this.sure)return;
       let result = this.result;
       // if(this.numPlus == 1){
       let tmpResult=[],tmpResultp=[];
@@ -180,7 +181,7 @@ export default {
     padding: 0.14rem 0.2rem;
     border:1px #DFE0E4 solid;
     border-radius: 0.36rem;
-    font-size: 0.26rem;
+    font-size: #font[select];
     margin: 0.15rem 0.15rem 0;
     float: left;
     color: #666;

src/common/OptionInp.vue

@@ -87,7 +87,7 @@ import $ from 'jquery';
      input{
       height: 100%;
       color: #colors[btn];
-      font-size: .26rem;
+      font-size: #font[select];
       border-bottom: 1px solid #E6E6E6 !important;
       border-radius: 0;
       padding-left: .05rem;

src/common/PushSymptom.vue

@@ -201,7 +201,7 @@
     margin-bottom: .8rem;
     .title{
       color: #aaa;
-      font-size: .26rem;
+      font-size: #font[dialog];
       margin-bottom: .4rem;
       text-indent: .28rem;
     }
@@ -214,7 +214,7 @@
         background-color: #colors[btn];
         border:1px #colors[btn] solid;
         border-radius: 0.36rem;
-        font-size: 0.26rem;
+        font-size: #font[select];
         margin: 0.15rem;
         float: left;
         color: #fff;

src/common/Radio.vue

@@ -170,7 +170,7 @@ export default {
     padding: 0.14rem 0.2rem;
     border:1px #DFE0E4 solid;
     border-radius: 0.36rem;
-    font-size: 0.26rem;
+    font-size: #font[select];
     margin: 0.15rem;
     float: left;
     color: #colors[text];

src/common/Select.vue

@@ -185,7 +185,7 @@ export default {
     padding: 0.14rem 0.2rem;
     border:1px #DFE0E4 solid;
     border-radius: 0.36rem;
-    font-size: 0.26rem;
+    font-size: #font[select];
     margin: 0.15rem;
     float: left;
     color: #colors[text];

src/common/Toast.vue

@@ -50,7 +50,7 @@ import $ from 'jquery';
       top:50%;
       left: 50%;
       transform: translate(-50%,-50%);
-      padding: 0.6rem 0.5rem 1.5rem .5rem;
+      padding: 0.6rem 0.6rem 1.5rem;
       box-sizing: border-box;
       border-radius: .2rem;
       z-index: 1000;
@@ -73,8 +73,8 @@ import $ from 'jquery';
         bottom: 0;
         left: 0;
         width: 6.3rem;
-        height: .9rem;
-        line-height: .9rem;
+        height: .88rem;
+        line-height: .88rem;
         border-top: 1px solid #colors[line];
         // font-weight: bold;
         span{
@@ -98,4 +98,4 @@ import $ from 'jquery';
       z-index: 999;
     }
   }
-</style>
+</style>

src/common/UsualSymptom.vue

@@ -126,7 +126,7 @@
     box-shadow: 0 0 30px -10px rgba(104, 124, 189, 0.25);
   }
   .title-bar{
-    font-size: .28rem;
+    font-size: #font[title];
     margin:0 0 .5rem .2rem;
     img{
       width: .16rem;
@@ -138,10 +138,10 @@
       padding: 0.14rem 0.2rem;
       border:1px #DFE0E4 solid;
       border-radius: 0.36rem;
-      font-size: 0.26rem;
+      font-size: #font[select];
       margin: 0.15rem 0.12rem 0.15rem 0.15rem;
       float: left;
-      color: #666;
+      color: #colors[text];
       position: relative;
       &.big{
          margin: 0.15rem .65rem .15rem .15rem;
@@ -159,7 +159,7 @@
     }
   }
   .searchWrap {
-    margin:1.2rem .2rem 0 .2rem;
+    margin:.8rem .2rem 0 .2rem;
     height: .68rem;
     line-height: .25rem;
     box-sizing: border-box;
@@ -169,7 +169,7 @@
     padding-left:.7rem;
     color: #AAAAAA;
     .placeholder{
-      font-size: .24rem;
+      font-size: #font[placeholder];
     }
     .searchImg {
       width: 0.44rem;

src/components/Department.vue

@@ -228,6 +228,7 @@
                 p {
                     position: relative;
                     color: #fff;
+                    font-size: #font[title];
                     img {
                         position: absolute;
                         right: 0;

src/components/MainPage.vue

@@ -469,8 +469,9 @@ export default {
      }
   }
   .active{
-    font-size: .28rem;
+    font-size: #font[dialog];
     color: #colors[theme];
+    font-weight: 500;
   }
   .progress{
     height:0.06rem;
@@ -491,7 +492,7 @@ export default {
     background-color: #colors[theme];
     border-radius: .24rem 0 .24rem .24rem;
     margin-top: .3rem;
-    font-size: .28rem;
+    font-size: #font[dialog];
     padding: .24rem;
     display: inline-block;
     p {
@@ -513,7 +514,7 @@ export default {
     background-color: #colors[bgques];
     border-radius: 0 .24rem .24rem .24rem;
     margin-top: .3rem;
-    font-size: .28rem;
+    font-size: #font[dialog];
     padding: .24rem;
     display: inline-block;
   }
@@ -526,7 +527,7 @@ export default {
   .edit{
     color: #colors[theme];
     font-style: normal;
-    font-size: .26rem;
+    font-size: #font[dialog];
     float: right;
     display: inline-block;
     margin-top: .56rem;
@@ -540,7 +541,7 @@ export default {
       display: inline-block;
       width: 100%;
       height: 0.88rem;
-      font-size: .28rem;
+      font-size: #font[dialog];
       background-color: #colors[btn];
       line-height: 0.88rem;
       margin-top: 0.8rem;

src/components/PathInfo.vue

@@ -370,12 +370,12 @@
 
     }
     .btmContent {
-      width: 94%;
+      width: 6.9rem;
       height: .88rem;
       line-height: .88rem;
       text-align: center;
       background-color: #colors[btn];
-      font-size: .32rem;
+      font-size: #font[title];
       color: #fff;
       margin: 0 auto;
       border-radius: .44rem;

src/less/base.less

@@ -11,6 +11,14 @@
   line:#E6E6E6;//按钮颜色
   bgques:#F3F4F6;//问题背景颜色
 }
+#font(){
+  banner:.36rem;    //导航文字
+  title:.32rem;   //标题文字
+  select:0.3rem;    //选项文字
+  dialog:.28rem;    //对话内容文字
+  placeholder:.24rem; //placeholder
+}
+
 .mask{
   width:100%;
   height: 100%;
@@ -20,7 +28,7 @@
   background:rgba(0,0,0,.5);
 }
 input::placeholder,textarea::placeholder {
-  font-size: .24rem!important;
+  font-size: #font[placeholder]!important;
   color: #ccc!important;
 }
 .footer{