初始化

pages/home/index.js

@@ -0,0 +1,14 @@
+Page({
+
+	data: {
+
+	},
+
+	onShow() {
+		this.getTabBar((tabBar) => {
+			tabBar.setData({
+				selected: '首页',
+			})
+		})
+	}
+})

pages/home/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/home/index.scss

@@ -0,0 +1,127 @@
+page {
+	background-color: rgba(247, 249, 252, 1);
+}
+
+.header {
+	background: var(--background);
+	color: white;
+	padding: 30rpx;
+
+	.h-1 {
+		display: flex;
+		gap: 30rpx;
+
+		.left {
+			flex: 1;
+
+			.t-1 {
+				font-size: 60rpx;
+				font-weight: 700;
+			}
+
+			.t-2 {
+				font-size: 28rpx;
+
+			}
+		}
+
+		.right {
+			width: 140rpx;
+			aspect-ratio: 1;
+			background-color: rgba(255, 255, 255, 0.2);
+			border-radius: 20rpx;
+
+			.d {
+				font-weight: 700;
+				font-size: 60rpx;
+			}
+
+			.c {
+				font-size: 24rpx;
+			}
+		}
+	}
+
+	.h-2 {
+		margin-top: 30rpx;
+		background-color: rgba(255, 255, 255, 0.15);
+		padding: 30rpx;
+		border-radius: 30rpx;
+
+		.title {
+			margin-bottom: 20rpx;
+		}
+
+		.num {
+			font-weight: 700;
+		}
+	}
+}
+
+.list {
+	padding: 30rpx;
+
+	.item {
+		background-color: white;
+		box-shadow: 0 4rpx 8rpx rgba(11, 27, 61, 0.04);
+		border-radius: 20rpx;
+		padding: 30rpx;
+		--color: rgba(0, 106, 106, 0.1);
+		align-items: flex-start;
+		gap: 30rpx;
+
+		&+.item {
+			margin-top: 30rpx;
+		}
+
+		.icon {
+			width: 90rpx;
+			aspect-ratio: 1;
+			border-radius: 20rpx;
+			background-color: var(--color);
+			color: rgba(99, 63, 0, 1);
+		}
+
+		.content {
+			.time {
+				margin-left: 20rpx;
+				color: rgba(69, 70, 78, 1);
+				font-size: 28rpx;
+			}
+
+			.title {
+				font-weight: 700;
+				margin-top: 10rpx;
+			}
+
+			.desc {
+				color: rgb(154, 156, 158);
+				font-size: 28rpx;
+				margin-top: 10rpx;
+			}
+		}
+
+		.btn {
+			width: fit-content;
+			font-size: 28rpx;
+			margin: 20rpx 0 0;
+			background-color: rgba(242, 244, 247, 1);
+			color: rgba(0, 106, 106, 1);
+
+			&.active {
+				opacity: 0.7;
+				background-color: rgba(232, 245, 233, 1);
+				color: rgba(46, 139, 87, 1);
+			}
+		}
+	}
+}
+
+.tip {
+	margin: 0 30rpx;
+	padding: 30rpx;
+	background-color: rgba(0, 106, 106, 0.08);
+	border-radius: 30rpx;
+	color: rgba(0, 106, 106, 1);
+	font-size: 28rpx;
+}

pages/home/index.wxml

@@ -0,0 +1,50 @@
+<view class="header">
+	<t-navbar class="fixed-nav"
+			  fixed="{{false}}" />
+	<view class="h-1">
+		<view class="left">
+			<view class="t-1">术后第 2 天</view>
+			<view class="t-2">康复进行中</view>
+		</view>
+		<view class="right flex-column-center ">
+			<view class="d">2</view>
+			<view class="c">DAYS</view>
+		</view>
+	</view>
+	<view class="h-2">
+		<view class="flex-between title">
+			<view>今日任务完成度</view>
+			<view class="num">0/5</view>
+		</view>
+		<t-progress percentage="80"
+					color="{{ ['white', 'white'] }}"
+					track-color="rgba(255, 255, 255, 0.2)"
+					label="" />
+	</view>
+</view>
+
+<view class="list">
+	<view class="item flex-align"
+		  wx:for="{{5}}"
+		  wx:key="index">
+		<view class="icon flex-center">
+			<t-icon name="apple" />
+		</view>
+		<view class="content">
+			<view class="flex-align">
+				<t-tag variant="light"
+					   theme="success">用药</t-tag>
+				<view class="time">08:00</view>
+			</view>
+			<view class="title">服用抗生素</view>
+			<view class="desc">头孢类抗生素，饭后服用</view>
+			<button class="btn">标记完成</button>
+		</view>
+	</view>
+</view>
+
+<view class="tip">
+	<view class="title">💡 温馨提示：</view>
+	<view class="text"> 请按时完成康复任务，如有任何不适请及时联系医护人员</view>
+</view>
+<view style="height: 30rpx;"></view>