同步嘉悦的新版式

src/views/ppt/hooks/createPPTContent.js

@@ -14,6 +14,9 @@ import FormatSix from '../template/FormatSix.vue'
 import FormatSeven from '../template/FormatSeven.vue'
 import FormatEight from '../template/FormatEight.vue'
 import FormatNine from '../template/FormatNine.vue'
+import FormatTen from '../template/FormatTen.vue'
+import FormatEle from '../template/FormatEle.vue'
+import FormatTwelve from '../template/FormatTwelve.vue'
 import ChartWrap from '../components/ChartWrap.vue'
 import RichText from '../components/RichText.vue'
 import ImageWrap from '../components/ImageWrap.vue'
@@ -114,6 +117,9 @@ export function getTemplate(modelId){
         [7,FormatSeven],
         [8,FormatEight],
         [9,FormatNine],
+        [10,FormatTen],
+        [11,FormatEle],
+        [12,FormatTwelve],
         [-1,Footer],
     ])
     return modelMap.get(modelId)

src/views/ppt/template/FormatEle.vue

@@ -0,0 +1,93 @@
+<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="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>

src/views/ppt/template/FormatTen.vue

@@ -0,0 +1,105 @@
+<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="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 class="line-item">
+						<component 
+							:is="getPPTContentType(3,pageData.elements)"
+							:itemData="getPPTContentItemData(3,pageData)"
+						/>
+					</div>
+				</div>
+				<div class="line">
+					<div class="line-item">
+						<component 
+							:is="getPPTContentType(4,pageData.elements)"
+							:itemData="getPPTContentItemData(4,pageData)"
+						/>
+					</div>
+					<div class="line-item">
+						<component 
+							:is="getPPTContentType(5,pageData.elements)"
+							:itemData="getPPTContentItemData(5,pageData)"
+						/>
+					</div>
+					<div class="line-item">
+						<component 
+							:is="getPPTContentType(6,pageData.elements)"
+							:itemData="getPPTContentItemData(6,pageData)"
+						/>
+					</div>
+				</div>
+				<div class="bottom-18">
+					<component 
+							:is="getPPTContentType(7,pageData.elements)"
+							:itemData="getPPTContentItemData(7,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: center;
+			height:40%;
+			.line-item{
+				width:33%;
+			}
+		}
+		.bottom-18{
+			width:100%;
+			height:18%;
+			
+			.rich-text-box{
+				width:90%;
+				height:100%;
+			}
+		}
+	}
+}
+</style>

src/views/ppt/template/FormatTwelve.vue

@@ -0,0 +1,90 @@
+<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="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 class="line-item">
+						<component 
+							:is="getPPTContentType(3,pageData.elements)"
+							:itemData="getPPTContentItemData(3,pageData)"
+						/>
+					</div>
+				</div>
+				<div class="line">
+					<div class="line-item">
+						<component 
+							:is="getPPTContentType(4,pageData.elements)"
+							:itemData="getPPTContentItemData(4,pageData)"
+						/>
+					</div>
+					<div class="line-item">
+						<component 
+							:is="getPPTContentType(5,pageData.elements)"
+							:itemData="getPPTContentItemData(5,pageData)"
+						/>
+					</div>
+					<div class="line-item">
+						<component 
+							:is="getPPTContentType(6,pageData.elements)"
+							:itemData="getPPTContentItemData(6,pageData)"
+						/>
+					</div>
+				</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: center;
+			height:48%;
+			.line-item{
+				width:33%;
+			}
+		}
+	}
+}
+</style>

src/views/ppt/utils/config.js

@@ -264,5 +264,133 @@ export const modelConfig = [
         y:60
     }
     ]
+    },
+    {
+        modelId:12,
+        elements:[{
+            position:1,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight*0.48*0.1)/2
+        },{
+            position:2,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight*0.48*0.1)/2
+        },
+        {
+            position:3,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight*0.48*0.1)/2
+        },
+        {
+            position:4,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight)*0.48
+        },
+        {
+            position:5,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight)*0.48
+        },
+        {
+            position:6,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight)*0.48
+        }]
+    },{
+        modelId:11,
+        elements:[{
+            position:1,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2,
+            y:(restHeight*0.4*0.1)/2
+        },{
+            position:2,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2+50,
+            y:(restHeight*0.4*0.1)/2
+        },{
+            position:3,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2,
+            y:38
+        },{
+            position:4,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2+50,
+            y:38
+        },{
+            position:5,
+            width:100*0.9,
+            height:(restHeight)*0.18*0.8,
+            x:(100-100*0.9)/2,
+            y:74
+        }]
+    },{
+        modelId:10,
+        elements:[{
+            position:1,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight*0.4*0.1)/2
+        },{
+            position:2,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight*0.4*0.1)/2
+        },
+        {
+            position:3,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight*0.4*0.1)/2
+        },
+        {
+            position:4,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2,
+            y:38
+        },
+        {
+            position:5,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2+33,
+            y:38
+        },
+        {
+            position:6,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2+33*2,
+            y:38
+        },
+        {
+            position:7,
+            width:100*0.9,
+            height:(restHeight)*0.18*0.8,
+            x:(100-100*0.9)/2,
+            y:74
+        }]
     }
+
 ]