Bläddra i källkod

【用户-扫描核销】页面样式优化

1004749546@qq.com 4 år sedan
förälder
incheckning
b72ca04cf8
1 ändrade filer med 57 tillägg och 30 borttagningar
  1. 57 30
      pages/checkOut/checkOut.vue

+ 57 - 30
pages/checkOut/checkOut.vue

@@ -1,33 +1,36 @@
 <template>
 	<view class="page-content">
-		<u-gap height="10" bg-color="#f8f8f8"></u-gap>
-		<u-field
-			class="field-item"
-			:value="store.name"
-			disabled
-			input-align="right"
-			label="收取门店"
-		>
-		</u-field>
-		<u-field
-			v-model="remarks"
-			label="备注"
-			input-align="right"
-			auto-height
-			:maxlength="10"
-			placeholder="请填写备注(最多10个字符)"
-			type="textarea"
-		>
-		</u-field>
-		<view class="num-cont">
-			<text class="u-required">支付数量</text>
-			<view class="num-input">
-				<u-input v-model="number" type="number" placeholder="请输入数量" />
-				<text>个乐豆</text>
+		<view class="content">
+			<u-field
+				class="field-item"
+				:value="store.name"
+				disabled
+				input-align="right"
+				label="收取门店"
+			>
+			</u-field>
+			<u-field
+				v-model="remarks"
+				label="备注"
+				input-align="right"
+				auto-height
+				:maxlength="10"
+				placeholder="请填写备注(最多10个字符)"
+			>
+			</u-field>
+			<view class="num-cont">
+				<text class="u-required">支付数量</text>
+				<view class="num-input">
+					<u-input v-model="number" input-align="right" type="number" placeholder="请输入数量" />
+					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
+				</view>
 			</view>
 		</view>
-		<u-gap height="50" bg-color="#f8f8f8"></u-gap>
 		<view class="pay-btn">
+			<view class="total">
+				<text>{{number||0}}</text>
+				<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
+			</view>
 			<u-button  @click="handlePay" type="error" >确认支付</u-button>
 		</view>
 		 <!-- 确认支付弹窗 -->
@@ -42,7 +45,8 @@
 					<view class="num-text">
 						<text>支付数量:</text>
 						<view>
-							<text class="num-big">{{number}}</text>乐豆
+							<text class="num-big">{{number}}</text>
+							<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
 						</view>
 					</view>
 					<view>
@@ -52,7 +56,6 @@
 				</view>
 				<view class="footer">
 					<input v-model="password" 
-					style="text-align: center;" 
 					type="password" 
 					placeholder="请输入支付密码" 
 					:maxlength="30"
@@ -176,22 +179,37 @@
 	.page-content{
 		width: 100%;
 		height: 100%;
-		background-color: #fff;
+		padding: 20upx;
+		background-color: #f8f8f8;
+		.content{
+			background-color: #fff;
+		}
 		.num-cont{
 			width: 100%;
-			padding: 30upx;
+			padding: 16upx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
 			.num-input{
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				>u-input {
 					width: 300upx;
-					border-bottom: 1px solid #f8f8f8;
 				}
 			}
 		}
 		.pay-btn{
 			padding: 0 30upx;
+			.total {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 48upx;
+				font-weight: 600;
+				color: red;
+				padding: 60upx 0;
+			}
 		}
 	}
 	.slot-content{
@@ -218,16 +236,25 @@
 					font-size: 36upx;
 					color: red;
 					padding-left: 30upx;
+					font-weight: 600;
 				}
 			}
 			.num-text{
 				align-items: center;
+				>view {
+					display: flex;
+					align-items: center;
+				}
 			}
 			
 		}
 		.footer{
 			width: 80%;
 			border-bottom: 1px solid #b1b1b1;
+			>input {
+				text-align: center;
+				padding: 10upx 0;
+			}
 		}
 		.fot-btn{
 			margin-top: 30upx;