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

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

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

const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')

</script>

<template>
	<div :class="['ppt-item-box ppt-item-page',lang=='en'?'ppt-item-box_en':'']">
		<!-- <div class="ppt-title-box">{{pageData.title}}</div> -->
		<!-- 自定义标题 -->
		<div class="custom-title-wrap" 
			:style="pageData.titleDetail?{
				 left:pageData.titleDetail.left+'%',
						top:pageData.titleDetail.top+'%',
						width:pageData.titleDetail.width+'%',
						height:pageData.titleDetail.height+'%',
				}:{
						left:'10%',top:'6.6%',width:'68%',height:'5%',
				}"
		>
			<div class="title" v-html="pageData.title"
				:style="pageData.titleDetail?{
						color:pageData.titleDetail.color||'#333',
						fontSize:(pageData.titleDetail.fontSize||22)+'px',
						fontFamily:pageData.titleDetail.fontFamily||'helvetica'
				}:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"
			></div>
		</div>
		<div class="ppt-content-box">
			<div class="container">
				<div class="line">
					<div class="line-item">
						<component 
							:is="getPPTContentType(1,pageData.elements)"
							:itemData="getPPTContentItemData(1,pageData)"
						/>
					</div>
					<div class="line-item">
						<component 
							:is="getPPTContentType(2,pageData.elements)"
							:itemData="getPPTContentItemData(2,pageData)"
						/>
					</div>
				</div>
				<div class="line">
					<div class="line-item">
						<component 
							:is="getPPTContentType(3,pageData.elements)"
							:itemData="getPPTContentItemData(3,pageData)"
						/>
					</div>
					<div class="line-item">
						<component 
							:is="getPPTContentType(4,pageData.elements)"
							:itemData="getPPTContentItemData(4,pageData)"
						/>
					</div>
				</div>
				<div class="bottom-18">
					<component 
							:is="getPPTContentType(5,pageData.elements)"
							:itemData="getPPTContentItemData(5,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{
	.container{
		.line{
			display: flex;
			justify-content: space-between;
			height:40%;
			.line-item{
				width:45%;
			}
		}
		.bottom-18{
			width:100%;
			height:18%;
			
			.rich-text-box{
				width:90%;
				height:100%;
			}
		}
	}
}
</style>