完成了b部分的第二块，还有一个组件没有完成

components/part.vue

@@ -1,9 +1,14 @@
 <template>
-	<view>
-		<view class="part">
+	<view class="part_content" :class="{ 'overflow-visible': isopen }">
+		<view class="part" @touchstart="part_start" @touchmove="part_move" @touchend="part_end"
+			:style="{ transform: 'translateX(' + offsetx + 'px)'}">
 			<p>{{part_title}}</p>
 			<p>{{part_content}}</p>
 		</view>
+		<view class="detele" :style="{ transform: 'translateX('+ (movemax +rightoffsetx+5) + 'px)' }"
+			@click="deleteItem">
+			删除
+		</view>
 	</view>
 </template>
 
@@ -11,31 +16,113 @@
 	export default {
 		props: {
 			part_title: {},
-			part_content: {}
+			part_content: {},
+			index: Number
 		},
 		data() {
-			return {}
+			return {
+				startX: 0,
+				startOffset: 0,
+				offsetx: 0,
+				rightoffsetx: 20,
+				movemax: 100,
+				isopen: false
+			}
 		},
 		methods: {
+			part_start(e) {
+				this.startX = e.touches[0].clientX;
+				this.startOffset = this.offsetx;
+			},
+			part_move(e) {
+				this.isopen = true;
+				let moveX = e.touches[0].clientX - this.startX;
+				let newOffset = this.startOffset + moveX;
 
+				if (newOffset > 0) {
+					newOffset = 0;
+				} else if (newOffset < -this.movemax) {
+					newOffset = -this.movemax;
+
+				}
+				this.rightoffsetx = newOffset;
+				this.offsetx = newOffset;
+			},
+			part_end(e) {
+				if (this.offsetx < -this.movemax / 2) {
+					this.offsetx = -this.movemax;
+					this.isopen = true;
+				} else {
+					this.offsetx = 0;
+					this.rightoffsetx = 20;
+					this.isopen = false;
+				}
+			},
+			deleteItem() {
+				this.$emit('delete', this.index);
+			}
 		}
 	}
 </script>
 
-<style >
-	.part {
-		height: 12vh;
-		background-color: white;
-		border-radius: 15px;
-		padding: 10px;
-		background-color: #007AFF;
+<style>
+	* {
+		margin: 0;
+		padding: 0;
 	}
 
-	/* .part p:first-child{
+	.part_content {
+		height: 10vh;
+		background-color: white;
+		border-radius: 15px;
+		padding: 3%;
+		margin: 2%;
+		background-color: #fff;
+		overflow: hidden;
+		position: relative;
+		z-index: 2;
+	}
+
+	.part_content.overflow-visible {
+		overflow: visible !important;
+	}
+
+	.part {
+		width: 100%;
+	}
+
+	.part p:first-child {
 		font-size: 1.2rem;
-		background-color: green;
-	} */
-	/* .part p:nth-child(2){
-		background-color: green;
-	} */
-</style>
+		margin-bottom: 10px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.part p:nth-child(2) {
+		font-size: 0.8rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.detele {
+		text-align: center;
+		background-color:#C2050F;
+		position: absolute;
+		top: 0;
+		right: 0px;
+		bottom: 0;
+		width: 100px;
+		z-index: 1;
+		transform: translateX(100px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+	}
+</style>