Selaa lähdekoodia

自定义封面布局

cxmo 1 vuosi sitten
vanhempi
commit
ed2801af1a

+ 1 - 0
src/views/ppt_manage/newVersion/components/Cover.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- ETA1.4.9之前的展示封面组件,若该版本上线后无回滚需求,可删除 -->
     <div class="flex-column cover" :style="`width:100%;height:100%;color: ${$parent.pptCoverTextColor||'#fff'};`" v-if="pageInfo">
         <!-- <img :src="pageInfo.BackgroundImg" class="pptbg" /> -->
         <!-- <img :src="base64Url" class="pptbg" /> -->

+ 1 - 0
src/views/ppt_manage/newVersion/components/CoverEn.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- ETA1.4.9之前的展示封面组件,若该版本上线后无回滚需求,可删除 -->
     <div class="flex-column cover" style="width:100%;height:100%;" v-if="pageInfo">
         <img :src="pageInfo.BackgroundImg" class="pptbg"  style="width:100%;height:100%;object-fit: fill !important;"/>
         <div

+ 1 - 0
src/views/ppt_manage/newVersion/components/catalog/mergePPTDialog.vue

@@ -91,6 +91,7 @@
 <script>
 import {pptInterface} from '@/api/api.js';
 import {pptEnInterface} from '@/api/modules/pptEnApi.js';
+import {etaBaseConfigInterence} from '@/api/modules/etaBaseConfigApi.js';
 import {changeCatalogArr,createRandomCode} from '../../utils/untils';
 export default {
   props:{

+ 1 - 0
src/views/ppt_manage/newVersion/components/editor/ChooseCover.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- ETA1.4.9之前的选择封面组件,若该版本上线后无回滚需求,可删除 -->
     <div class="first_dialog">
         <div class="dialog-min">
             <header class="dialog-top">

+ 1 - 0
src/views/ppt_manage/newVersion/components/editor/ChooseCoverEn.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- ETA1.4.9之前的选择封面组件,若该版本上线后无回滚需求,可删除 -->
     <div class="first_dialog">
         <div class="dialog-min">
             <header class="dialog-top">

+ 93 - 3
src/views/ppt_manage/newVersion/components/editor/ChooseCoverNew.vue

@@ -1,12 +1,50 @@
 <template>
     <!-- ppt自定义封面编辑 -->
-    <div class="choose-cover-new-wrap">
+    <el-dialog
+        :visible.sync="isShowChooseCover" 
+        :close-on-click-modal="false" 
+        :modal-append-to-body="false"
+        title="自定义封面页"
+        custom-class="choose-cover-new-wrap"
+        v-dialogDrag center width="80%" top="5vh"
+        @close="$emit('close')"
+    >
+        <div class="container">
+            <div class="edit-cover-wrap">
+                <div class="cover">
+                    <div class="editor-area">
+
+                    </div>
+                </div>
+                <div class="editor-tool">
+                    <div class="dialog-btn">
+                        <el-button>保存</el-button>
+                        <el-button>换一个模板</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </el-dialog>
 
-    </div>
 </template>
 
 <script>
 export default {
+    props:{
+        isShowChooseCover:{
+            type:Boolean,
+            default:false
+        },
+        firstPage:{
+            type:Object,
+            default:{}
+        },
+        pptCoverList:{
+            type:Array,
+            default:[]
+        }
+    },
     data() {
         return {
 
@@ -18,6 +56,58 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.choose-cover-new-wrap{
+    max-width:1360px;
+    height: 90%;
+    overflow: hidden !important;
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    .el-dialog__body{
+        padding:25px !important;
+        flex: 1;
+        overflow: hidden;
+    }
+}
+</style>
 <style scoped lang="scss">
-
+.choose-cover-new-wrap{
+    .container{
+        width:100%;
+        height:100%;
+        display: flex;
+        flex-direction: column;
+        .edit-cover-wrap{
+            display: flex;
+            flex: 1;
+            overflow: auto;
+            .cover,.editor-tool{
+                box-sizing: border-box;
+                overflow-y: auto;
+            }
+            .cover{
+                flex:1;
+                background-color: rebeccapurple;
+                display: flex;
+                align-items: center;
+                .editor-area{
+                    position: relative;
+                    width:100%;
+                    height: 0;
+                    padding-bottom: 70%;
+                    background-color:bisque;
+                }
+            }
+            .editor-tool{
+                min-width:320px;
+                background-color: burlywood;
+            }
+        }
+        .dialog-btn{
+            text-align: right;
+        }
+        
+    }
+}
 </style>

+ 23 - 0
src/views/ppt_manage/newVersion/components/editor/chooseCover/TextEl.vue

@@ -0,0 +1,23 @@
+<template>
+    <!-- 自定义封面-文本编辑框 -->
+    <div class="cover-el el-text">
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

+ 0 - 0
src/views/ppt_manage/newVersion/components/editor/chooseCover/elMixin.js


+ 14 - 5
src/views/ppt_manage/newVersion/pptEditor.vue

@@ -223,12 +223,19 @@
     </div>
 
     <!-- 选择封面弹窗 -->
-    <choose-cover  v-if="isShowChooseCover"
+    <!-- <choose-cover  v-if="isShowChooseCover"
         :firstPage="firstPage"
         :pptCoverList="pptCoverList"
         :PptId="pptId"
         @close="closeChooseCover"
         @save="saveCover"
+    /> -->
+    <ChooseCoverNew 
+        :isShowChooseCover="isShowChooseCover"
+        :firstPage="firstPage"
+        :pptCoverList="pptCoverList"
+        :PptId="pptId"
+        @close="isShowChooseCover=false"
     />
     <!-- 批量删除弹窗 -->
     <delete-page-dialog 
@@ -292,16 +299,18 @@ import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyD
 import InsertCharts from './components/editor/InsertCharts.vue';
 import ContextMenu from './components/ContextMenu.vue';
 import InsertSemantics from './components/editor/InsertSemantics.vue';
+import ChooseCoverNew from './components/editor/ChooseCoverNew.vue';
 export default {
   mixins:[pptmixin,//ppt页面共同逻辑
           mixins,//图表加载逻辑
           layerMixins,//图层操作逻辑
           pptEditorMixins,//编辑页共同逻辑
           ],
-  components: { 
-        IndexItem, ChooseCover, AddFormat,ShapePreview,
-    LayerEditTool,DeletePageDialog,ChangeFormatDialog,InsertPageDialog,addMyClassifyDia,InsertCharts,ContextMenu,InsertSemantics
-  },
+  components: {
+    IndexItem, ChooseCover, AddFormat, ShapePreview,
+    LayerEditTool, DeletePageDialog, ChangeFormatDialog, InsertPageDialog, addMyClassifyDia, InsertCharts, ContextMenu, InsertSemantics,
+    ChooseCoverNew
+},
   data() {
     return {
         pageList:[],//ppt数组