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>
			<!-- <view class="row_1">
				<view class="uni-section">
					<view></view>
					<p @click="toggleColor()" :style="{color:textColor}">楷模列表</p>
				</view>
				<view class="section">
					<view></view>
					<p>英雄故事</p>
				</view>
				<view class="section">
					<view></view>
					<p>英雄故事</p>
				</view>
			</view>
			<view class="row_2">
				<view class="section">
					<view></view>
					<p>英雄故事</p>
				</view>
				<view class="section">
					<view></view>
					<p>英雄故事</p>
				</view> -->
			<card class="card" v-for="imagepath of imagepaths" :image_path="imagepath.path" :value="imagepath.value">
			</card>
			<!-- </view> -->
		</view>
		<view>
			<text class="title">楷模列表</text>
			<view class="page">
				<view></view>
				<view>
					<p>中宣部授予肖文儒“时代楷模”...</p>
					<p>模特姓名：肖文儒</p>
					<p>38年来，国家安全生产应急救援中心副主任兼工程师肖文儒参与过多次重...</p>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import card from "../../componets/card.vue"
	export default {
		components: {
			card
		},
		data() {
			return {
				isRed: false,
				list: [{
					id: 1,
					name: ""
				}]
			}
		},
		computed: {
			textColor() {
				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`);
				// let value = Array.from({
				// 	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]
				}))
			}
		},
		methods: {
			toggleColor() {
				this.isRed = !this.isRed
			}
		}
	}
</script>

<style>
	.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;
		/* margin-right: -1px; */
	}

	.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 {
		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;
	}

	.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) p:first-of-type {
		font-size: 1.2rem;
	}

	.page view:nth-child(2) p:nth-child(2) {
		font-size: 0.9rem;
	}

	.page view:nth-child(2) p:nth-child(3) {
		font-size: 0.9rem;
	}
</style>