minman-tv/components/commonItems/commonItems.vue

<template>
	<view class="harder_box">
		<view class="box_banner">
			<view class="box_item">
				<view @click="detailsBtn(index)" class="banner_item" v-for="(item, index) in projectList" :key="item.index">
					<view class="banner_bgimg">
						<view class="banner_img">
							<image class="img" :src="item.image"></image>
						</view>
					</view>
					<view class="item_tit">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'commonItems',
	props: {
		projectList: {
			type: Array,
			default: null
		},

		titList: {
			type: Array,
			default: null
		}
	},
	data() {
		return {
			// 闽南精神
			MnList: [
				{
					title: '人物名称',
					img: '/static/img/card_民俗宗教.png'
				},
				{
					title: '人物名称',
					img: '/static/img/card_民俗宗教.png'
				},
				{
					title: '人物名称',
					img: '/static/img/card_民俗宗教.png'
				},
				{
					title: '人物名称',
					img: '/static/img/card_民俗宗教.png'
				}
			]
		};
	},
	onLoad() {
		console.log(this.titList, 555);
	},
	methods: {
		detailsBtn(i) {
			uni.navigateTo({
				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${this.projectList[i].id}`
			});
		}
	}
};
</script>

<style>
.harder_box {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 60vh;
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 5px 25px 5px 25px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
}
.img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
	z-index: -1;
}
.box_banner {
	width: 82%;
	height: 28%;
	margin: auto;
}

.banner_img {
	position: absolute;
	top: 6%;
	left: 5%;
	width: 90%;
	height: 75%;
}
.banner_bgimg {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('/static/img/bg_logo.png') no-repeat center;
	background-size: 100% 100%;
}
.box_item {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}
.banner_item {
	width: 23%;
	height: 120%;
	margin-bottom: 2%;
	position: relative;
	margin-left: 2%;
}
.item_tit {
	width: 90%;
	position: absolute;
	top: 83%;
	left: 5%;
	text-align: center;
	z-index: 1;
	font-size: 10px;
	color: #fbfcdc;
	/* text-shadow: 0px 4px 0px #8e5938; */
}
</style>