bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
	<view>
		<view class="menu">
			<view v-for="item in menuOptions" :key="item.active" :class="{menu_item:true,active:activeIndex==item.active}" @click="()=>{activeIndex = item.active;activeIndexChange(item)}">
				{{item.label}}
			</view>
		</view>
		<iframe v-show="activeIndex == 1" src="https://www.baidu.com"></iframe>
		<iframe v-show="activeIndex == 2" src="https://www.baidu.com"></iframe>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuOptions:[
					{active:1,label:"123"},
					{active:2,label:"456"}
				],
				activeIndex:1,
			}
		},
		methods: {
			// 选项卡改变
			activeIndexChange(item){
				// 
			}
		},
	}
</script>

<style lang="scss" scoped>
	.menu{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border: 1px solid #E4E7ED;
		.menu_item{
			flex: 1;
			text-align: center;
			box-sizing: border-box;
			line-height: 36px;
			border: 1px solid #E4E7ED;
			position: relative;
		}
		.menu_item.active::after{
			content: "";
			display: block;
			background-color: #409EFF;
			position: absolute;
			width: 50%;
			height: 2px;
			left: 0;right: 0;
			margin: auto;
			bottom: 0;
		}
	}
	iframe{
		width: 100%;
		height: calc(100vh - 40px);
	}
</style>