任务卡片滑动效果

pages/task/Task.vue

@@ -17,6 +17,8 @@
 		<div><drawer ref="drawer"></drawer></div>
 		<div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div>
 
+		<scroll-view @tap="hideModal" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
+		
 		<!-- 任务组件 -->
 		<view class="taskcard solid">
 			<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务一</view></view>
@@ -44,6 +46,7 @@
 				<button class="cu-btn ">取消</button>
 			</view>
 		</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -253,4 +256,56 @@ page {
 	float: right;
 	margin-left: 3px;
 }
+.DrawerPage {
+					position: fixed;
+					width: 100vw;
+					height: 100vh;
+					left: 0vw;
+					background-color: #1f1f1f;
+					transition: all 0.4s;
+				}
+				
+				.DrawerPage.show {
+					transform: scale(0.9, 0.9);
+					left: 85vw;
+					box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
+					transform-origin: 0;
+				}
+				.DrawerPage .cu-bar.tabbar .action button.cuIcon {
+					width: 64upx;
+					height: 64upx;
+					line-height: 64upx;
+					margin: 0;
+					display: inline-block;
+				}
+				
+				.DrawerPage .cu-bar.tabbar .action .cu-avatar {
+					margin: 0;
+				}
+				
+				.DrawerPage .nav {
+					flex: 1;
+				}
+				
+				.DrawerPage .nav .cu-item.cur {
+					border-bottom: 0;
+					position: relative;
+				}
+				
+				.DrawerPage .nav .cu-item.cur::after {
+					content: '';
+					width: 10upx;
+					height: 10upx;
+					background-color: currentColor;
+					position: absolute;
+					bottom: 10upx;
+					border-radius: 10upx;
+					left: 0;
+					right: 0;
+					margin: auto;
+				}
+				
+				.DrawerPage .cu-bar.tabbar .action {
+					flex: initial;
+				}
 </style>