WenWuGuanJia/index_fenbao/fuWu/fengCai/fengCai.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="志愿风采" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>

		<view class="kc_box" @click="volunteerDetails(item.id)" v-for="item in list" :key="item.id">
			<view class="b-cover">
				<image style="width: 100%; height: 100%" :src="item.image" mode="aspectFill"></image>
			</view>
			<view class="b-main">
				<view class="text_23">
					<view class="">{{ item.title }}</view>

					<!-- <view class="text_25">2024-3-18</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		that = this;
		this.getMainBodyColumnContentList();
	},
	methods: {
		getMainBodyColumnContentList() {
			this.$api.getMainBodyColumnContentList({ main_body_id: 1, model_id: 12 }, function (res) {
				console.log(res, '志愿风采');
				that.list = res.data[1].content_list;
			});
		},
		volunteerDetails(id) {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/fengCai/xiangQing?id=' + id
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-size: 100% 100%;
	min-height: 100%;
	height: auto;
}

.kc_box {
	width: 92%;
	margin: auto;
	padding: 30upx;
	display: flex;
	align-items: center;
	margin-top: 30rpx;
}
.b-cover {
	width: 225rpx;
	height: 125rpx;
}
.b-main {
	flex: 1;
	margin-left: 20upx;
}
.text_23 {
	color: #272727;
	font-size: 28rpx;
	margin-top: 10rpx;
	font-weight: 600;
}
.text_25 {
	font-size: 26rpx;
	color: #727070;
	margin-top: 10rpx;
	font-weight: 400;
}
</style>