eta_mobile_front/src/views/ppt/template/FormatNine.vue

<script setup>
import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'

const props=defineProps({
    pageData:{
        type:Object,
        default:{}
    }
})

</script>

<template>
	<div class="ppt-item-box">
		<div class="ppt-title-box">{{pageData.title}}</div>
		<div class="ppt-content-box">
			<div class="container">
				<div class="top-box">
					<div class="top-half-box">
						<component 
							:is="getPPTContentType(1,pageData.elements)"
							:itemData="getPPTContentItemData(1,pageData)"
						/>
					</div>
					<div class="top-half-box">
						<component 
							:is="getPPTContentType(2,pageData.elements)"
							:itemData="getPPTContentItemData(2,pageData)"
						/>
					</div>
				</div>
				<div class="bot-box">
					<component 
						:is="getPPTContentType(3,pageData.elements)"
						:itemData="getPPTContentItemData(3,pageData)"
					/>
				</div>
			</div>
			<div class="layer-wrap">
				<template v-for="item in pageData.layers" :key="item.id">
					<component 
						:is="getPPTLayerType(item)"
						:itemData="item"
					/>
				</template>
			</div>
		</div>
	</div>
</template>



<style scoped lang="scss">
@import '../style/common.scss';
.ppt-content-box{
	.top-box{
		width: 100%;
		height: 70%;
		display: flex;
		.top-half-box{
			width: 50%;
			height: 100%;
		}
	}
	.bot-box{
		width: 100%;
		height: 30%;
	}
}
</style>