预约列表页面

pages.json

@@ -1,6 +1,14 @@
 {
 	"pages": [
         {
+            "path" : "pages/prebook_list/prebook_list",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "预约列表",
+                "enablePullDownRefresh": false
+            }
+        },
+        {
             "path" : "pages/user_modify/user_modify",
             "style" :                                                                                    
             {

pages/prebook_list/prebook_list.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="page-prebook-list">
+		<view class="nav">
+			<view :class="'item'+(userSelectIndex==0?' active':'')">全部</view>
+			<view class="item">帅哥</view>
+			<view class="item">马家辉</view>
+			<view class="item">刘老板</view>
+			<view class="item">张小宇</view>
+			<view class="item">刘大琪</view>
+			<view class="item">帅哥</view>
+			<view class="item">马家辉</view>
+			<view class="item">刘老板</view>
+			<view class="item">张小宇</view>
+			<view class="item">刘大琪</view>
+			<view class="item">帅哥</view>
+			<view class="item">马家辉</view>
+			<view class="item">刘老板</view>
+			<view class="item">张小宇</view>
+			<view class="item">刘大琪</view>
+		</view>
+		
+		<view class="list btPadding">
+			<view :class="'item '+item" v-for="(item, key) in data">
+				<view class="left">
+					<view class="title PfScMedium">上官梓涵</view>
+					<view class="date">2024.01.09 周二  09:30-12:00</view>
+					<view class="loction">广安门医院西单门诊部</view>
+				</view>
+				<view class="right">
+					<view class="status">候诊</view>
+					<view class="queue-num">前方<text>4</text>人</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing'],
+				userSelectIndex:0
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page-prebook-list{
+		width: 100%;
+		height: 100vh;
+		box-sizing: border-box;
+		overflow-y: auto;
+		background: #F8F8F8;
+		.nav{
+			width: 100%;
+			display: flex;
+			height: 132rpx;
+			display: flex;
+			box-sizing: border-box;
+			overflow-x: auto;
+			align-items: center;
+			padding: 0 18rpx;
+			column-gap: 20rpx;
+			.item{
+				width: auto;
+				flex-shrink: 0;
+				padding: 0 20rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				background: rgba(201,203,209,0.25);
+				border-radius: 30rpx;
+				box-sizing: border-box;
+				font-size: 24rpx;
+				color: #616266;
+				&.active{
+					border: 1rpx solid #5BD07A;
+					color: #58CA7F;
+				}
+			}
+		}
+		.list{
+			width: 714rpx;
+			height: auto;
+			background: #FFFFFF;
+			border-radius: 8rpx;
+			margin: 36rpx auto 0;
+			overflow: hidden;
+			.item{
+				display: flex;
+				justify-content: space-between;
+				margin: 0 auto;
+				width: 692rpx;
+				border-bottom: 2rpx solid rgba(151,151,151,0.15);
+				padding: 35rpx 13rpx;
+				box-sizing: border-box;
+				overflow: hidden;
+				&:last-of-type{
+					border-bottom: none !important;
+				}
+				.left{
+					flex-grow: 1;
+					flex-shrink: 0;
+					.title{
+						min-height: 42rpx;
+						font-size: 30rpx;
+						color: #000000;
+						line-height: 42rpx;
+						margin-bottom: 28rpx;
+						overflow: hidden;
+					}
+					.date{
+						height: 40rpx;
+						font-size: 28rpx;
+						color: #949699;
+						line-height: 40rpx;
+						margin-bottom: 12rpx
+					}
+					.loction{
+						height: 40rpx;
+						line-height: 40rpx;
+						color: #949699;
+					}
+				}
+				.right{
+					width: 250rpx;
+					flex-shrink: 1;
+				}
+			}
+		}
+		
+		// <view class="list btPadding">
+		// 	<view :class="'item '+item" v-for="(item, key) in data">
+		// 		<view class="left">
+		// 			<view class="title">上官梓涵</view>
+		// 			<view class="date">2024.01.09 周二  09:30-12:00</view>
+		// 			<view class="loction">广安门医院西单门诊部</view>
+		// 		</view>
+		// 		<view class="right">
+		// 			<view class="status">候诊</view>
+		// 			<view class="queue-num">前方<text>4</text>人</view>
+		// 		</view>
+		// 	</view>
+		// </view>
+	}
+</style>