files/pages/index/student.vue

<template>
	<view class="begin">
		<view class="title">
			学习心得
		</view>
		<uni-segmented-control :current="current" :values="value" style-type="text" @clickItem="onCheck"
			activeColor="red"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<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">
				<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>
</template>

<script>
	import part from "../../components/part.vue"
	export default {
		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日，山西省委常委就集体学习《论群众路线》，《厉行节约、反对浪费》两本重要论述摘编，相互交流学习心...",
				endbottom,
				useInput: "",
				block_none: true,
				write_none: false
			}
		},
		methods: {
			onCheck(e) {
				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);
		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>