Przeglądaj źródła

ppt页内标题支持富文本

cxmo 10 miesięcy temu
rodzic
commit
574dc3b18d

+ 17 - 0
src/views/ppt/style/common.scss

@@ -24,6 +24,23 @@ $pptItemH:630PX;
         align-items: center;
         transform-origin: 0 0;
     }
+    .custom-title-wrap{
+        position: absolute;
+        transform-origin: 0 0;
+        .title{
+            width:100%;
+            height:100%;
+            font-size: 24px;
+            ul{
+                margin-left: 1em;
+                list-style-type: disc;
+              }
+              ol{
+                margin-left: 1em;
+                list-style-type: decimal;
+              }
+        }
+    }
     .ppt-content-box{
         position: relative;
         top: 14%;

+ 13 - 1
src/views/ppt/template/FormatEight.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="top-box">

+ 13 - 1
src/views/ppt/template/FormatEle.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="line">

+ 13 - 1
src/views/ppt/template/FormatFive.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="item-half-box">

+ 13 - 1
src/views/ppt/template/FormatFour.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="item-half-box">

+ 13 - 1
src/views/ppt/template/FormatNine.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="top-box">

+ 13 - 1
src/views/ppt/template/FormatOne.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<component 

+ 13 - 1
src/views/ppt/template/FormatSeven.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="half-box">

+ 13 - 1
src/views/ppt/template/FormatSix.vue

@@ -12,7 +12,19 @@ const props=defineProps({
 
 <template>
 	<div class="ppt-item-box ppt-item-page">
-		<div class="ppt-title-box">{{pageData.title}}</div>
+		<!-- <div class="ppt-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<component 

+ 13 - 1
src/views/ppt/template/FormatTen.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="line">

+ 13 - 1
src/views/ppt/template/FormatThirteen.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="top-box">

+ 13 - 1
src/views/ppt/template/FormatThree.vue

@@ -12,7 +12,19 @@ const props=defineProps({
 
 <template>
 	<div class="ppt-item-box ppt-item-page">
-		<div class="ppt-title-box">{{pageData.title}}</div>
+		<!-- <div class="ppt-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="left-box">

+ 13 - 1
src/views/ppt/template/FormatTwelve.vue

@@ -15,7 +15,19 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 
 <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-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="line">

+ 13 - 1
src/views/ppt/template/FormatTwo.vue

@@ -13,7 +13,19 @@ const props=defineProps({
 
 <template>
 	<div class="ppt-item-box ppt-item-page">
-		<div class="ppt-title-box">{{pageData.title}}</div>
+		<!-- <div class="ppt-title-box">{{pageData.title}}</div> -->
+		<!-- 自定义标题 -->
+		<div class="custom-title-wrap" 
+			:style="pageData.titleDetail?{
+				left:pageData.titleDetail.baseLeft+'px',
+				top:pageData.titleDetail.baseTop+'px',
+				width:pageData.titleDetail.baseWidth+'px',
+				height:pageData.titleDetail.baseHeight+'px',
+			}:{
+				left:'90px',top:'34.65px',width:'612px',height:'44.1px'
+			}">
+			<div class="title" v-html="pageData.title"></div>
+		</div>
 		<div class="ppt-content-box">
 			<div class="container">
 				<div class="left-box">