yichael_zhongchuang_front_2/pages/startLearning/startLearning.vue

<template>
	<view class="mybody bgclF8 df fdc">
<!-- 			<canvas></canvas> -->
		<TopMenu ref="TopMenu"></TopMenu>
		<view class="df jcc aic content">
			<view class="df content-box jcsb">
				<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box">
					<view class="btn1-icon">
						<img :src="item.src"></img>
					</view>
					<view class="btn1-text">{{item.text}}</view>
				</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": "测试与结果"
					},
				],
			}
		},
		methods: {

		}
	}
</script>

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

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