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">
				<studentwrite></studentwrite>
				<studentwrite></studentwrite>
			</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"
	import studentwrite from "../../components/student_write.vue"
	export default {
		components: {
			part,
			studentwrite
		},
		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: "",
				write_none: false
			}
		},
		methods: {
			onCheck(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			insertShow() {
				this.write_none =true;
			},
			if_none() {
				this.write_none =false;
				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 {
		width: 3vw;
		height: 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>