封装组件

h5/common/WeeklyCalendar.vue

@@ -0,0 +1,133 @@
+<template>
+	<view>
+		<view class="zhou">
+			<view class="day" v-for="(item,index) in 7">
+				<view class="day_top">
+					<view>08/03</view>
+					<view class="zhou_title">周六</view>
+				</view>
+				<view class="yu">余20</view>
+			</view>
+			<view class="xian_k">
+				<view class="xian"></view>
+			</view>
+			<view class="rili_icon">
+				<uni-icons type="calendar" size="30" color="#239EA3"></uni-icons>
+				<text>更多</text>
+			</view>
+		</view>
+		<view class="hengxian"></view>
+		<view class="timelist">
+			<view v-for="(item,index) in 24" class="time">07:33</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style scoped>
+	.zhou {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.day {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 25rpx;
+		font-weight: 500;
+		color: #131313;
+	}
+
+	.day_top {
+		font-size: 24rpx;
+		font-weight: 500;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		padding: 10rpx;
+		border-radius: 16rpx;
+	}
+
+	.selected {
+		background-color: #239EA3;
+		color: #fff;
+	}
+
+	.zhou_title {
+		font-size: 28rpx;
+		font-weight: 500;
+		margin-top: 6rpx;
+	}
+
+	.yu {
+		background-color: #EFEFEF;
+		margin-top: 8rpx;
+		border-radius: 10rpx;
+		padding: 2rpx 8rpx;
+		font-size: 22rpx;
+	}
+
+	.xian_k {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.xian {
+
+		height: 70rpx;
+		border-left: 1px solid #d8d8d8;
+	}
+
+	.rili_icon {
+		font-size: 26rpx;
+		font-weight: 500;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		color: #239EA3;
+		font-weight: 500;
+	}
+
+	.hengxian {
+		width: 100%;
+		border-top: 1px solid #C0C6C7;
+		margin-top: 18rpx;
+	}
+
+	.timelist {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		justify-content: flex-start;
+	}
+
+	.timelist::after {
+		content: '';
+		flex: auto;
+		/* 或者 flex: 1; */
+	}
+
+	.time {
+		font-size: 28rpx;
+		width: 104rpx;
+		text-align: center;
+		margin-top: 40rpx;
+		border-radius: 14rpx;
+		padding: 8rpx 0rpx;
+		flex: 0 0 calc(20% - 32rpx);
+		/* 假设一行有4个项目，减去想要的间隔 */
+		margin-right: 40rpx;
+		/* 设置右侧边距 */
+		color: #111111;
+
+	}
+
+	.time:nth-child(5n) {
+		margin-right: 0;
+	}
+</style>

h5/pages.json

@@ -1,6 +1,5 @@
 {
-	"pages": [
-		{
+	"pages": [{
 			"path": "pages/main/index/index",
 			"style": {
 				"navigationBarTitleText": "海南现代妇女儿童医院",
@@ -212,7 +211,16 @@
 			"style": {
 				"navigationBarTitleText": "优惠券"
 			}
+		},
+		{
+			"path" : "pages/main/ctime/ctime",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh" : false
+			}
 		}
+
 	],
 	"easycom": {
 		"^w-(.*)": "@/uni_modules/wmf-code/components/w-$1/w-$1.vue"

h5/pages/main/ctime/ctime.vue

@@ -0,0 +1,14 @@
+<template>
+	<view>
+		<WeeklyCalendar/>
+	</view>
+</template>
+
+<script setup>
+	 import { ref } from 'vue';
+	 import WeeklyCalendar from '@/common/WeeklyCalendar.vue';
+</script>
+
+<style>
+
+</style>

h5/pages/main/index/index.vue

@@ -261,7 +261,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="botm_blank_wrapper" style="font-size: 18rpx;color: #ccc;">10081008</view>
+			<view class="botm_blank_wrapper" style="font-size: 18rpx;color: #ccc;">10082019</view>
 		</view>
 	</view>
 </template>