files/pages/index/index.vue

<template>
	<view class="begin">
		<view class="headers">
			<text class="text1">时代楷模</text>
			<view class="div">
				学习雷锋同志，弘扬雷锋精神
			</view>
			<view class="headers_middle">

			</view>

			<view class="headers_bottom">
				<view class="bottom_left">
					<text>楷模</text>
					<br>公告
				</view>
				<view class="bottom_right">
					<p>2021年河北省“最美基层高校毕业生”先进事迹发布</p>
					<p>河北省委宣传部、省人社局在“最美河北最美河北最美河北最美河北最美河北最美河北最美河北最美河北</p>
				</view>
				>
			</view>
		</view>
		<view>
			<card class="card" v-for="imagepath of imagepaths" :image_path="imagepath.path" :value="imagepath.value">
			</card>
		</view>
		<view>
			<text class="title">楷模列表</text>
			<view class="page">
				<view></view>
				<view>
					<p>中宣部授予肖文儒“时代楷模”楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模楷模</p>
					<p>模特姓名：肖文儒</p>
					<p>38年来，国家安全生产应急救援中心副主任兼工程师肖文儒参与过多次重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程重大建设工程</p>
				</view>
			</view>
		</view>
		<view class="index_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 card from "../../components/card.vue"
	export default {
		components: {
			card
		},
		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]])
			return {
				isRed: false,
				endbottom
			}
		},
		computed: {
			imagepaths() {
				let Path = Array.from({
					length: 6
				}, (_, x) => `../../static/c${x+1}.png`);
				let value = ["楷模列表", "英雄故事", "身边英雄", "物资捐赠", "数据分析", "更多"]
				return Path.map((path, index) => ({
					path: path,
					value: value[index]
				}))
			}
		},
		methods: {
			toggleColor() {
				this.isRed = !this.isRed
			}
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.begin {
		background-color: rgb(246, 246, 246);
	}

	.text1 {
		display: block;
		text-align: center;
		font-size: 1.4rem;
		color: rgb(195, 5, 15);
		font-weight: bold;
		padding-bottom: 3%;
		background-color: #fff !important;
	}

	.headers .div {
		color: #ffffff;
		background-color: rgb(195, 5, 15);
		text-align: center;
		padding: 3%;
		font-size: 1.1rem;
	}

	.headers_middle {
		height: 20vh;
		border: 1px red solid;
		background-color: #fff !important;
	}

	.headers_bottom {
		height: 10vh;
		display: flex;
		margin: 5px 15px;
		align-items: center;
		border-radius: 15px;
		background-color: #fff !important;
	}

	.bottom_left {
		width: 20%;
		font-weight: bold;
		font-size: 1.3rem;
		text-align: center;
		border-right: 2px #999999 solid;

	}

	.bottom_left text {
		color: rgb(195, 5, 15);
		margin-bottom: 1%;

	}

	.bottom_right {
		width: 80%;
		height: 10vh;
		border-radius: 0px 15px 15px 0px;
	}

	.bottom_right p {
		margin-left: 5%;
	}

	.bottom_right p:first-child {
		font-size: 1.2rem;
		margin-bottom: 2%;
	}

	.bottom_right p:nth-child(2) {
		font-size: 0.9rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.headers+view {
		background-color: #fff;
		margin: 10px 15px;
		border-radius: 15px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		justify-items: center;
	}

	.card {
		width: 55%;
		text-align: center;
	}

	.headers+view+view {
		background-color: rgb(246, 246, 246);
		margin: 10px 15px;
		padding-bottom: 10px;
	}

	.title {
		display: block;
		border-left: 5px firebrick solid;
		font-weight: bold;
		font-size: 1.3rem;
		margin-bottom: 10px;
	}

	.page {
		border-radius: 15px;
		background-color: #fff;
		height: 12vh;
		display: flex;
		border-radius: 15px;
		align-items: center;
	}

	.page view:first-of-type {
		width: 25%;
		height: 75%;
		margin: 3%;
		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;
	}

	.index_end {
		display: flex;
		justify-content: space-around;
	}

	.nav_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav_bottom image {
		width: 6vw;
		height: 3vh;
	}

	.nav_bottom:nth-child(1) p {
		color: #C2050F;
	}
</style>