yichael_zhongchuan_manager/components/learningProcess/learningProcess.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">
				<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: {

		}
	}
</script>

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

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