cnq/pages/index/joinus.vue

<template>
	<view class="">
		<view class="" style="height: 10rpx;">
			
		</view>
		<view class="list-item flex" v-for="(item,index) in navList" :key="index">
			<view class="item-left">
				<image :src="'../../static/icon/bm0' + item.id + '.png'" mode=""></image>
			</view>
			<view class="item-center">
				<view class="center-name">{{item.name}}</view>
				<view class="center-val">{{item.val}}</view>
			</view>
			<view class="item-right" @click="navTo(item.path)">
				{{item.btn}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [
					{
						id: 1,
						name: '志愿者报名',
						val: '志愿服务你我他',
						path: '/pages/form/tovolApply',
						btn: '去报名'
					},
					// {
					// 	id: 2,
					// 	name: '普及培训报名',
					// 	val: '扶危济困爱心无限',
					// 	path: '/pages/train/index'
					// },
					{
						id: 3,
						name: '红十字会员登记',
						val: '做慈善事业的行动者',
						path: '/pages/cart/cart',
						btn: '去登记'
					}
				]
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		width: 702rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 46rpx 0px rgba(196, 196, 196, 0.16);
		border-radius: 20rpx;
		margin: 20rpx auto;
		align-items: center;
		padding: 0 30rpx 0 20rpx;
		.item-left {
			width: 156rpx;
			height: 157rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-center {
			flex-grow: 1;
			.center-name {
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}
			.center-val {
				font-size: 28rpx;
				font-weight: 400;
				color: #B7B7BA;
				margin-top: 15rpx;
			}
		}
		.item-right {
			width: 154rpx;
			height: 57rpx;
			background: linear-gradient(-90deg, #FF8E8E, #F3392C);
			box-shadow: 0px 4rpx 16rpx 0px rgba(255, 0, 0, 0.39);
			border-radius: 29rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 57rpx;
		}
	}
</style>