MinNan/index_fenbao/mn_jingshen/xiang_qing.vue

<template>
	<view>
		<u-navbar :autoBack="true" :title="title" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="ad">
			<view @click="projectListBtn(index)" class="box_22" v-for="(item, index) in projectList" :key="item.id">
				<view class="block_5">
					<image style="width: 100%; height: 100%; border-radius: 0 50rpx 0 20rpx" :src="item.thumbnail"></image>

					<view class="tag_1">
						<text lines="1" class="text_9">{{ item.type_text }}</text>
					</view>

					<view class="tag_2">
						<text lines="1" class="text_10">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return { main_body_id: '', title: '', projectList: [] };
	},
	onLoad(o) {
		that = this;
		this.title = o.title;
		this.main_body_id = this.$db.get('main_body_id');
		console.log(o);
		this.getContentList(o);
	},
	methods: {
		// 主体栏目内容列表查看更多
		getContentList(o) {
			this.$api.getContentList(
				{
					model_id: o.id /* 模型id */,
					main_body_id: this.main_body_id,
					main_body_column_id: o.main_body_column_id /* 栏目id */,
					page: '1',
					pageSize: '10'
				},
				function (res) {
					console.log(res, '内容列表更多');
					that.projectList = res.data;
				}
			);
		},
		// 详情
		projectListBtn(i) {
			uni.navigateTo({
				url: '/index_fenbao/mn_jingshen/PageSpirit?id=' + this.projectList[i].id
			});
		}
	}
};
</script>

<style>
.ad {
	margin: 20rpx 32rpx 0 32rpx;
}
.box_22 {
	height: 345rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin-bottom: 50rpx;
}
.block_5 {
	position: relative;
	height: 345rpx;
	width: 686rpx;
	display: flex;
	flex-direction: column;
}

.tag_1 {
	position: absolute;
	background-color: rgba(77, 113, 153, 1);
	border-radius: 9rpx 9rpx 32rpx 0rpx;
	height: 48rpx;
	display: flex;
	flex-direction: column;
	width: 86rpx;
}
.tag_2 {
	position: absolute;
	bottom: 36rpx;
	right: 20rpx;
}
.text_10 {
	width: 147rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: #ffffff;
	font-size: 34rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}
.text_9 {
	width: 47rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 12rpx 0 0 19rpx;
}
</style>