yichael_zhongchuang_front_2/components/learningProcess/xqdl.vue

<template>
	<!-- 学前导览 -->
	<view class="df jcc aic myComRoot">
		<view class="df content-box jcsb">
			<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box" @click="onClick_Btn1(i)">
				<view class="btn1-icon">
					<img :src="item.src"></img>
				</view>
				<view class="btn1-text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		onLoad() {

		},
		data() {
			return {
				btn1List: [{
						"src": require("../../assets/topMenu/preludePreparation.png"),
						"text": "学习概要"
					},
					{
						"src": require("../../assets/topMenu/learningAndExperiment.png"),
						"text": "实验步骤"
					},
					{
						"src": require("../../assets/topMenu/testAndResult.png"),
						"text": "实验引导视频"
					},
					{
						"src": require("../../assets/learning/icon_ksxx_05.png"),
						"text": "学习资料下载"
					}
				],
			}
		},
		methods: {
			onClick_Btn1(index){
				this.$emit("onClick_Btn1",index);
			}
		}
	}
</script>

<style lang="scss">
	$btnN:4;

	.content-box {
		width: px2vw(312*$btnN+34*(($btnN)-1));
		height: px2vw(367);
	}
</style>