MinNan/index_fenbao/mn_jingshen/mn_jingshen.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="闽南精神" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="header">
			<image style="width: 100%; height: 100%" src="http://mms2.baidu.com/it/u=4012979722,1550976495&fm=253&app=120&f=JPEG?w=1080&h=324"></image>
		</view>
		<view class="banner" v-for="item in list" :key="item.name">
			<view class="box_img">
				<image style="width: 100%; height: 100%; border-radius: 50%" :src="item.img" mode=""></image>
			</view>
			<view class="" style="line-height: 65rpx">
				<view class="">{{ item.name }}</view>
				<view class="" style="width: 450rpx">{{ item.title }}</view>
			</view>
			<view class="">
				<uni-icons type="forward" size="24"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					img: 'https://img2.baidu.com/it/u=2106717653,1595552958&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=337',
					name: '郑成功',
					title: '汉族，明末清初军事家，民族英雄'
				},
				{
					img: 'https://img2.baidu.com/it/u=2734408568,2157410577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=318',
					name: '人文精神',
					title: '追寻先人精神，品读闽南文化 '
				},
				{
					img: 'https://img2.baidu.com/it/u=2106717653,1595552958&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=337',
					name: '闽南华侨华人人文精神探析',
					title: '拼搏进取，敢打敢拼的奋进精神'
				},
				{
					img: 'https://img1.baidu.com/it/u=2520995424,4290269983&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1698858000&t=09b27eddc6fdec5ea15fb8c979a60ba6',
					name: '李光地',
					title: '名相故里安溪湖头'
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

.header {
	width: 100%;
	height: 255rpx;
}
.banner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-left: 32rpx;
	margin-bottom: 20rpx;
	height: 198rpx;
	background: #ffffff;
	border-radius: 99rpx 0rpx 0rpx 99rpx;
	padding-left: 10rpx;
}
.box_img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}
</style>