表单样式调整

pages/lr/index.vue

@@ -8,7 +8,7 @@
 
     <view>
       <uni-section padding>
-        <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
+        <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-width="95px" label-align="right">
           <view v-if="active==0">
             <uni-forms-item label="照片">
               <uni-file-picker limit="1" v-model="baseFormData.head" fileMediatype="image" @select="select" />
@@ -51,7 +51,7 @@
             <uni-forms-item label="监护人">
               <uni-easyinput v-model="baseFormData.jhr" placeholder="请输入监护人姓名" />
             </uni-forms-item>
-            <uni-forms-item label="监护人手机号码">
+            <uni-forms-item label="监护人手机号">
               <uni-easyinput v-model="baseFormData.jhrsjhm" placeholder="请输入监护人手机号码" />
             </uni-forms-item>
             <uni-forms-item label="与老人关系">
@@ -82,43 +82,43 @@
               <uni-data-checkbox v-model="baseFormData.jntcIszy" :localdata="dicts.CZ035" />
             </uni-forms-item>
             <view class="bottomButton">
-              <button type="primary" @click="next()">下一步</button>
+              <button type="primary" size="mini" @click="next()">下一步</button>
             </view>
           </view>
           <view v-else-if="active==1">
-            <uni-forms-item label="血糖">
+            <uni-forms-item label="血糖" label-width="75px">
               <uni-data-select v-model="baseFormData.datzXt" placeholder="请选择血糖" :localdata="dicts.KH001" />
             </uni-forms-item>
-            <uni-forms-item label="血压">
+            <uni-forms-item label="血压" label-width="75px">
               <uni-data-select v-model="baseFormData.datzXy" placeholder="请选择血压" :localdata="dicts.KH002" />
             </uni-forms-item>
-            <uni-forms-item label="血脂">
+            <uni-forms-item label="血脂" label-width="75px">
               <uni-data-select v-model="baseFormData.datzXz" placeholder="请选择血脂" :localdata="dicts.KH002" />
             </uni-forms-item>
-            <uni-forms-item label="吸烟情况">
+            <uni-forms-item label="吸烟情况" label-width="75px">
               <uni-data-select v-model="baseFormData.datzXyqk" placeholder="请选择吸烟情况" :localdata="dicts.KH003" />
             </uni-forms-item>
-            <uni-forms-item label="饮酒情况">
+            <uni-forms-item label="饮酒情况" label-width="75px">
               <uni-data-select v-model="baseFormData.datzYjqk" placeholder="请选择饮酒情况" :localdata="dicts.KH003" />
             </uni-forms-item>
-            <uni-forms-item>
-              <uni-data-checkbox mode="button" multiple v-model="baseFormData.bs" :localdata="bsData" />
-            </uni-forms-item>
-            <uni-forms-item label="睡眠作息">
+            <view class="line-item">
+              <uni-forms-item label-width="0px">
+                <uni-data-checkbox mode="button" multiple v-model="baseFormData.bs" :localdata="bsData" />
+              </uni-forms-item>
+            </view>
+            <uni-forms-item label="睡眠作息" label-width="75px">
               <uni-easyinput type="textarea" v-model="baseFormData.daShxgSmzx" placeholder="请输入睡眠作息" />
             </uni-forms-item>
-            <uni-forms-item label="饮食喜好">
+            <uni-forms-item label="饮食喜好" label-width="75px">
               <uni-easyinput type="textarea" v-model="baseFormData.daShxgYsxh" placeholder="请输入饮食喜好" />
             </uni-forms-item>
-            <uni-forms-item label="其他习惯">
+            <uni-forms-item label="其他习惯" label-width="75px">
               <uni-easyinput type="textarea" v-model="baseFormData.daShxgQtxg" placeholder="请输入其他习惯" />
             </uni-forms-item>
 
             <view class="bottomButton">
-              <view class="twoButton">
-                <button type="primary" @click="active=0">上一步</button>
-                <button type="primary" @click="next(true)">保存</button>
-              </view>
+              <button type="primary" size="mini" @click="active=0">上一步</button>
+              <button type="primary" size="mini" @click="next(true)">保存</button>
             </view>
           </view>
           <view v-else-if="active==2">
@@ -858,49 +858,28 @@
 
   .bottomButton {
     height: 140rpx;
-    width: 80%;
-    margin-left: 10%;
-  }
-
-  .twoButton {
-    display: flex;
+    width: 60%;
+    margin: 0 auto;
+    text-align: center;
 
     button {
       width: 40%;
     }
+
+    button+button {
+      margin-left: 15px;
+    }
   }
 
-  // .map_container {
-  // 	position: absolute;
-  // 	top: 0;
-  // 	bottom: 80px;
-  // 	left: 0;
-  // 	right: 0;
-  // }
-
-  // .map {
-  // 	width: 100%;
-  // 	height: 100%;
-  // }
-
-  // .map_text {
-  // 	position: absolute;
-  // 	left: 0;
-  // 	right: 0;
-  // 	bottom: 0px;
-  // 	height: 80px;
-  // 	background: #fff;
-  // 	padding: 0 15px;
-  // }
-
-  // text {
-  // 	margin: 5px 0;
-  // 	display: block;
-  // 	font-size: 12px;
-  // }
-
-  // .h1 {
-  // 	margin: 15px 0;
-  // 	font-size: 15px;
-  // }
+
+  .line-item {
+    /deep/ .checklist-group {
+      justify-content: space-around;
+
+      .checklist-box.is--button {
+        width: 36%;
+        margin-right: 0;
+      }
+    }
+  }
 </style>

uni.scss

@@ -74,3 +74,7 @@ $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph:15px;
+
+  // .uni-forms-item__label {
+  //   padding: 0 8px 0 0 !important;
+  // }

uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue

@@ -477,7 +477,7 @@
 			font-size: 14px;
 			color: #606266;
 			height: 36px;
-			padding: 0 12px 0 0;
+			padding: 0 8px 0 0;
 			/* #ifndef APP-NVUE */
 			vertical-align: middle;
 			flex-shrink: 0;