WenWuGuanJia/index_fenbao/HuoHuaLiYong/YanXue/YanXue.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 v-for="item in research" :key="item.id" class="yx_box" @click="application(item.id)">
			<view style="position: absolute; left: 6rpx; top: 6rpx">
				<image style="width: 160rpx; height: 240rpx" :src="item.image"></image>
			</view>
			<view class="info">
				<view class="wwd">{{ item.title }}</view>
				<view class="time">活动时间：{{ (item.start_time || "").split(" ")[0] || "" }}</view>
			</view>
			<view class="baoming">
				<text>报名</text>
				<image style="margin-left: 10rpx; width: 32rpx; height: 32rpx" src="/static/img/arrow-right-line.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			research: []
		};
	},
	onLoad() {
		that = this;
		this.activityLists();
	},
	methods: {
		// 文物研学
		activityLists() {
			this.$api.activityLists({ main_body_id: 1, type: 1 }, function (res) {
				that.research = res.data;
			});
		},
		application(id) {
			uni.navigateTo({
				url: '/index_fenbao/HuoHuaLiYong/YanXue/XiangQing?id=' + id
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}
.yx_box {
	position: relative;
	width: 670rpx;
	height: 252rpx;
	display: flex;
	align-items: center;
	/* keep children in a row and space for fixed button */
	margin: auto;
	margin-top: 34rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/hh_item_bg.png');
	background-size: 100% 100%;
}
.info {
	margin-left: 200rpx;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0; /* allow text to shrink and ellipsis if needed */
}
.wwd {
	font-size: 28rpx;
	font-weight: 400;
	color: #444444;
	line-height: 52rpx;
	white-space: wrap;
	/* 限制两行 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.time {
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	line-height: 44rpx;
	margin-top: 12rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.baoming {
	display: flex;
	flex: 0 0 116rpx; /* do not grow/shrink, fixed basis */
	width: 116rpx;
	height: 56rpx;
	line-height: 56rpx;
	justify-content: center;
	align-items: center;
	margin: 0 20rpx;
	font-size: 28rpx;
	color: #eba869;
	border: 2rpx solid #eba869;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 8rpx;
}
</style>