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

2026-04-13 00:20:43 +08:00
parent b1933043a2
commit df3ae29701
5 changed files with 332 additions and 49 deletions
--- a/components/part.vue
+++ 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;
-	} */
+		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>
--- a/components/student_write.vue
+++ b/components/student_write.vue
@@ -0,0 +1,13 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script setup>
+	
+</script>
+
+<style>
+	       
+</style>
--- a/pages.json
+++ b/pages.json
@@ -21,7 +21,13 @@
                "enablePullDownRefresh": false
            }
            
-        }
+		},
+		{
+			"path": "components/student_write",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		}
    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
--- a/pages/index/index.vue
+++ b/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>
--- a/pages/index/student.vue
+++ b/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>
@@ -19,15 +51,25 @@
 <script>
 	import part from "../../components/part.vue"
 	export default {
-		components:{
+		components: {
 			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_title: "山西省委常委交流集中学习心得和体会，坚...",
+				part_content: "8月18日，山西省委常委就集体学习《论群众路线》，《厉行节约、反对浪费》两本重要论述摘编，相互交流学习心...",
+				endbottom,
+				useInput: "",
+				block_none: true,
+				write_none: false
 			}
 		},
 		methods: {
@@ -35,19 +77,143 @@
 				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 = ""
 			}
 		}
 	}
 </script>

-<style >
-	.begin{
-		background-color: rgb(244,244,244);
+<style>
+	.begin {
+		background-color: rgb(244, 244, 244);
+		height: 95vh;
+		display: flex;
+		flex-direction: column;
 	}
-	.title{
+
+	.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>