就诊人页面

App.vue

@@ -151,6 +151,7 @@
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 		text-overflow: ellipsis;
+		word-break: break-all;
 	}
 	.over3{
 		-webkit-line-clamp: 3 !important;

pages/add_visitor/add_visitor.vue

@@ -3,7 +3,7 @@
 		<view class="header block flex line40">
 			<img :src="cssUrl+'add.svg'" alt="">增加就诊人
 		</view>
-		<view class="list-wrapper">
+		<view class="list-wrapper" v-if="type == 1">
 			<view class="item block">
 				<view class="top flex">
 					<view class="PfScSemibold">张杨明</view>
@@ -15,23 +15,28 @@
 				<img class="status" :src="cssUrl+'visitor_select_active.svg'">
 				<img class="bg" :src="cssUrl+'visitor_list__bg.svg'">
 			</view>
+		</view>
+		<view class="submit"  v-if="type == 1">
+			<view class="bot primary btn btn2 submitbtn" hover-class="hover">
+				确认预约（已选1位）
+			</view>
+			<view class="tip height40">请确保预约就诊前在门诊先挂号</view>
+		</view>
+		
+		<view class="list-wrapper2" v-if="type == 2">
 			<view class="item block">
 				<view class="top flex">
 					<view class="PfScSemibold">张杨明</view>
-					<view>剩余3次</view>
-				</view>
-				<view class="bot line36">
-					身份证尾号：0909备份
+					<view>身份证尾号：9000</view>
 				</view>
-				<img class="status" :src="cssUrl+'visitor_select_active.svg'" v-if="false">
-				<img class="bg" :src="cssUrl+'visitor_list__bg.svg'">
+				<view class="bt">
+					<view class="bt-item flex">
+						<view class="left flex"><view class="over3">广安门中医医院西单门诊部</view><view>100周未看病</view></view>
+						<view class="more right" v-if="res">剩余<text>2000</text>次</view>
+						<view class="owe right" v-else>超<text>10</text>次</view>
 					</view>
 				</view>
-		<view class="submit">
-			<view class="bot primary btn btn2 submitbtn" hover-class="hover">
-				确认预约（已选1位）
 			</view>
-			<view class="tip height40">请确保预约就诊前在门诊先挂号</view>
 		</view>
 	</view>
 </template>
@@ -40,7 +45,9 @@
 	export default {
 		data() {
 			return {
-				cssUrl:this.cssUrl
+				cssUrl:this.cssUrl,
+				type:2,
+				res:true,
 			}
 		},
 		methods: {
@@ -138,5 +145,78 @@
 			margin-top: 33rpx;
 		}
 	}
+	.list-wrapper2{
+		.item{
+			.top{
+				background: #5CD378;
+				width: 100%;
+				height: 118rpx;
+				line-height: 118rpx;
+				box-sizing: border-box;
+				box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03), 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
+				border-radius: 8rpx 8rpx 0rpx 0rpx;
+				padding: 0 24rpx 0 24rpx;
+				justify-content: space-between;
+				color: #FFFFFF;
+				view:first-of-type{
+					font-size: 38rpx;
+					letter-spacing: 3rpx;
+				}
+				view:last-of-type{
+					font-size: 28rpx;
+					letter-spacing: 2rpx;
+				}
+			}
+			.bt{
+				padding: 30rpx;
+				min-height: 118rpx;
+				box-sizing: border-box;
+				.bt-item{
+					min-height: 55rpx;
+					align-items: flex-end;
+					align-items:center;
+					.left{
+						max-width: 580rpx;
+						align-items:center;
+						view:first-of-type{
+							min-height: 40rpx;
+							line-height: 40rpx;
+							font-size: 28rpx;
+							color: #949699;
+							letter-spacing: 2rpx;
+							max-width: 280rpx;
+							align-items: flex-end;
+						}
+						
+						view:last-of-type{
+							height: 38rpx;
+							background: #FFE9E9;
+							line-height: 38rpx;
+							padding: 0 7rpx;
+							font-size: 28rpx;
+							color: #FD0000;
+							margin-left: 8rpx;
+						}
+					}
+					.right{
+						flex-grow: 1;
+						&.more{
+							font-size: 28rpx;
+							color: #949699;
+							letter-spacing: 2rpx;
+							text-align: right;
+						}
+						// <view class="more right" v-if="res">剩余<text>2</text>次</view>
+						// <view class="owe right" v-else>超<text>1</text>次</view>
+					}
+				}
+			}
+		}
+	}
+	// <view class="bt-item flex">
+	// 	<view>广安门中医医院西单门诊部<text>停诊</text></view>
+	// 	<view class="more" v-if="res">剩余<text>2</text>次</view>
+	// 	<view class="owe" v-else>超<text>1</text>次</view>
+	// </view>
 }
 </style>