yichael_zhongchuan_manager/components/introductionToTheExperiment/introductionToTheExperiment.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>
	import TopMenu from '../../components/topMenu.vue'
	export default {
		components: {
			TopMenu,
		},
		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/topMenu/testAndResult.png"),
						"text": "使用环境/技术架构"
					},
					{
						"src": require("../../assets/topMenu/testAndResult.png"),
						"text": "实验简介视频"
					},
				],
			}
		},
		methods: {
			onClick_Btn1(index){
				this.$emit("onClick_Btn1",index);
			}
		}
	}
</script>

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

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