完成了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;
+	* {
+		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;
-	} */
+		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>

components/student_write.vue

@@ -0,0 +1,13 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script setup>
+	
+</script>
+
+<style>
+	       
+</style>

pages.json

@@ -21,6 +21,12 @@
                 "enablePullDownRefresh": false
             }
             
+		},
+		{
+			"path": "components/student_write",
+			"style": {
+				"navigationBarTitleText": ""
+			}
 		}
     ],
 	"globalStyle": {

pages/index/index.vue

@@ -16,7 +16,7 @@
 				</view>
 				<view class="bottom_right">
 					<p>2021年河北省“最美基层高校毕业生”先进事迹发布</p>
-					<p>河北省委宣传部、省人社局在“最美河北.....</p>
+					<p>河北省委宣传部、省人社局在“最美河北最美河北最美河北最美河北最美河北最美河北最美河北最美河北</p>
 				</view>
 				>
 			</view>
@@ -30,9 +30,9 @@
 			<view class="page">
 				<view></view>
 				<view>
-					<p>中宣部授予肖文儒“时代楷模”...</p>
+					<p>中宣部授予肖文儒“时代楷模”楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模</p>
 					<p>模特姓名：肖文儒</p>
-					<p>38年来，国家安全生产应急救援中心副主任兼工程师肖文儒参与过多次重...</p>
+					<p>38年来，国家安全生产应急救援中心副主任兼工程师肖文儒参与过多次重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程</p>
 				</view>
 			</view>
 		</view>
@@ -60,7 +60,7 @@
 				return this.isRed ? 'red' : 'black'
 			},
 			imagepaths() {
-				const base_url = "http://124.93.196.45:10091/Neusoft/times-model/appStudy/app/historyList"
+				
 				let Path = Array.from({
 					length: 6
 				}, (_, x) => `../../static/c${x+1}.png`);
@@ -68,17 +68,7 @@
 				// 	length: 6
 				// }, (_, x) => `英雄故事`);
 				let value = ["楷模列表", "英雄故事", "身边英雄", "物资捐赠", "数据分析", "更多"]
-				async function text() {
-					const text = await fetch(base_url, {
-						method: "GET",
-						headers: {
-							"Content-Type": "application/json",
-							"Authorization": "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImIyOGYwYjkzLTU0ZTktNDM3MC05NTczLWUzMWE5MDA2OGM5MyJ9.Gqqt22q3ZxXWZ04gHq5F0tTKPypHRqjGOhCe1NcUjvSplv6GschoZW_3xc_MOI-T38u_81kTXX7LAt7PXemM3w"
-						}
-					})
-					return await text.json()
-				}
-				text().then(data => console.log(data));
+
 				return Path.map((path, index) => ({
 					path: path,
 					value: value[index]
@@ -89,14 +79,13 @@
 			toggleColor() {
 				this.isRed = !this.isRed
 			}
-		}
-	}
+	}}
+	
 </script>
 
 <style>
 	.begin {
 		background-color: rgb(246, 246, 246);
-
 	}
 
 	.text1 {
@@ -107,7 +96,6 @@
 		font-weight: bold;
 		padding-bottom: 3%;
 		background-color: #fff !important;
-		/* margin-right: -1px; */
 	}
 
 	.headers .div {
@@ -149,6 +137,7 @@
 	}
 
 	.bottom_right {
+		width: 80%;
 		height: 10vh;
 		border-radius: 0px 15px 15px 0px;
 	}
@@ -164,6 +153,9 @@
 
 	.bottom_right p:nth-child(2) {
 		font-size: 0.9rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	.headers+view {
@@ -175,7 +167,10 @@
 		justify-items: center;
 	}
 
-	.card {width: 55%;text-align: center;}
+	.card {
+		width: 55%;
+		text-align: center;
+	}
 
 	.headers+view+view {
 		background-color: rgb(246, 246, 246);
@@ -207,15 +202,31 @@
 		background-color: red;
 	}
 
+
+	.page view:nth-child(2) {
+		width: 75%;
+	}
+
 	.page view:nth-child(2) p:first-of-type {
 		font-size: 1.2rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	.page view:nth-child(2) p:nth-child(2) {
 		font-size: 0.9rem;
+
 	}
 
 	.page view:nth-child(2) p:nth-child(3) {
+		width: 100%;
 		font-size: 0.9rem;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-break: break-word;
 	}
 </style>

pages/index/student.vue

@@ -7,10 +7,42 @@
 			activeColor="red"></uni-segmented-control>
 		<view class="content">
 			<view v-show="current === 0">
-				<part class="student_part" :part_title="part_title" :part_content="part_content"></part>
+				<part v-for="index in 3" class="student_part" :part_title="part_title" :part_content="part_content">
+				</part>
+				<view class="student_button">
+					新建感言
+				</view>
 			</view>
 			<view v-show="current === 1">
-				选项卡2的内容
+				<view class="page_div">
+					<view>
+						<p>中宣部授予肖文儒“时代楷模”称号</p>
+						<p>2022-04-15 08:00</p>
+						<p>为了贯彻落实习近平总书记在中央人才工作会议上的重要讲话精神，大力倡导尊重知识尊重人才理念，中央宣传部以云计算工程的算工程的算工程的算工程的</p>
+					</view>
+
+					<view v-show="write_none">
+						<view>
+							<p>学习笔记</p>
+							<p @click="if_none">删除</p>
+						</view>
+						<view v-show="block_none">
+							{{useInput}}
+						</view>
+					</view>
+					<view @click="insertShow()">
+						<image src="/static/template.png"></image>
+						<p>添加笔记</p>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="student_end">
+
+			<view class="nav_bottom" v-for="path_image in endbottom">
+				<image :src="path_image[0]"></image>
+				<p>{{path_image[1]}}</p>
 			</view>
 		</view>
 	</view>
@@ -23,11 +55,21 @@
 			part
 		},
 		data() {
+			const imagepath = Array.from({
+				length: 4
+			}).map((_, x) => `../../static/c${x+1}.png`)
+			const textarray = ["首页", "公益", "心得", "我的"]
+			const endbottom = imagepath.map((value, index) => [value, textarray[index]])
+			console.log(endbottom)
 			return {
 				current: 0,
 				value: ["学习感言", "学习历史"],
 				part_title: "山西省委常委交流集中学习心得和体会，坚...",
-				part_content:"8月18日，山西省委常委就集体学习《论群众路线》，《厉行节约、反对浪费》两本重要论述摘编，相互交流学习心..."
+				part_content: "8月18日，山西省委常委就集体学习《论群众路线》，《厉行节约、反对浪费》两本重要论述摘编，相互交流学习心...",
+				endbottom,
+				useInput: "",
+				block_none: true,
+				write_none: false
 			}
 		},
 		methods: {
@@ -35,6 +77,25 @@
 				if (this.current != e.currentIndex) {
 					this.current = e.currentIndex
 				}
+			},
+			insertShow() {
+				uni.showModal({
+					title: "写入的",
+					content: "",
+					editable: true,
+					placeholderText: "请输入内容",
+					success: res => {
+						if (res.confirm) {
+							this.useInput = res.content + this.useInput;
+							console.log(this.useInput)
+							this.write_none = true
+						}
+					}
+				})
+			},
+			if_none() {
+				this.block_none = !this.block_none;
+				this.useInput = ""
 			}
 		}
 	}
@@ -43,11 +104,116 @@
 <style>
 	.begin {
 		background-color: rgb(244, 244, 244);
+		height: 95vh;
+		display: flex;
+		flex-direction: column;
 	}
+
 	.title {
 		font-size: 1.3rem;
 		font-weight: bold;
 		text-align: center;
+
 	}
 
+	.content {
+		margin-top: 20px;
+		flex: 1;
+	}
+
+	.student_button {
+		position: absolute;
+		left: 25%;
+		bottom: 20%;
+		text-align: center;
+		border-radius: 50px;
+		background-color: #C2050F;
+		color: white;
+		width: 200px;
+		height: 50px;
+		line-height: 50px;
+		font-size: 1.1rem;
+	}
+
+	.page_div {
+		background-color: #fff;
+		border-radius: 15px;
+		padding: 3%;
+		margin: 2%;
+	}
+
+	.page_div>view:first-child {
+		border-bottom: 1px solid darkgray;
+		padding-bottom: 10px;
+	}
+
+	.page_div>view:first-child p:first-child {
+		font-size: 1.1rem;
+	}
+
+	.page_div>view:first-child p:nth-child(2) {
+		font-size: 0.8rem;
+	}
+
+	.page_div>view:first-child p:nth-child(3) {
+		font-size: 0.9rem;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+	}
+
+	.page_div>view:nth-child(2) {
+		display: flex;
+		flex-direction: column;
+		padding-bottom:5px ;
+		border-bottom: 1px solid darkgray;
+	}
+
+	.page_div>view:nth-child(2)>view:first-child {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.page_div>view:nth-child(2)>view:first-child p:nth-child(2) {
+		color: #C2050F;
+	}
+
+	.page_div>view:nth-child(2)>view:nth-child(2) {
+		background-color: darkgray;
+		border-radius: 10px;
+		padding: 5px;
+
+	}
+
+	.page_div>view:last-child {
+		margin-top: 10px;
+		height: 5vh;
+		color: rgb(255, 56, 59);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+	}
+
+	.page_div>view:last-child image {
+		height: 3vh;
+		width: 3vh;
+	}
+
+	.student_end {
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.nav_bottom image {
+		width: 40px;
+		height: 40px;
+	}
+
+	.nav_bottom:nth-child(3) p {
+		color: #C2050F;
+	}
 </style>