jewelry-front/pages_order/home/introduce.vue

<template>
	<view class="page">
		<navbar title="活动列表" leftClick @leftClick="$utils.navigateBack" />
		<view class="box">
			<view class="box-imgs">
				<view
				:key="index"
				@click="$utils.navigateTo(`/pages_order/home/notice?id=${item.id}&type=${type}`)"
				class="box-img"
				v-for="(item, index) in list">
					<image :src="item.icon" mode="aspectFill"></image>
					<view>{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsList],
		data() {
			return {
				mixinsListApi: 'getRiceProductList',//获取相关介绍
				title : ['公司介绍', '产品介绍', '关于我们', '其他'],
				type : 0,
			}
		},
		onLoad({type}) {
			this.type = type || 0
			this.queryParams.type = this.type
		},
		computed: {},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100Vh;
		background-color: #F3F3F3;

		.box {
			margin: 20rpx;
			image{
				width: 220rpx;
				height: 220rpx;
			}
			.box-imgs {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.box-img{
					border-radius: 20rpx;
					overflow: hidden;
					position: relative;
					view{
						// position: absolute;
						// left: 50%;
						// transform: translate(-50%);
						// bottom: 80rpx;
						margin: 0 auto;
						color: #fff;
						background-color: $uni-color;
						border-radius: 30rpx;
						width: 80%;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>