图表说明文字位置调整

src/views/ppt_manage/newVersion/components/formatEl/ChartEl.vue

@@ -1,8 +1,7 @@
 <template>
-<div style="width:100%;height:100%; position:relative;" class="flex-center el-wrap"
+<div style="width:100%;height:100%; position:relative;" class="flex-center el-wrap chart-out-wrap"
   :draggable="isBtnShow"
 >
-    <!-- :style="(chartSourcesFrom&&chartSourcesFrom.isShow || chartInstructions&&chartInstructions.isShow) ? 'margin-bottom:20px' : ''" -->
   <div
     class="chart-wrap"
     :id="`${$parent.isPreview?'preview_':''}chart_${index}_${position}`"
@@ -122,7 +121,7 @@ export default {
 .tool-list{
   position:absolute;
   width:95%;
-  top:2%;
+  top:0;
   left:2%;
   display: flex;
   justify-content: space-between;
@@ -133,11 +132,12 @@ export default {
     margin-left: auto;
   }
 }
+//图表自定义信息
 .chart-bottom-insruction-info{
-  width: 90%;
+  width: 95%;
   position: absolute;
-  left: 5%;
-  bottom: 20px;
+  left: 2%;
+  //bottom: 4%;//top,bottom在具体版式单独设置
   align-items: center;
   justify-content: space-between;
 }

src/views/ppt_manage/newVersion/components/formatPage/FormatEle.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+    <div class="total-wrap flex-column wrap-format-new format-ele" :style="{'pointer-events' :isPreview?'none':'auto'}">
         <div class="line flex-center">
             <div class="line-item flex-center" 
                 :style="pageItem.layers&&!isLayerShow()?TypeName(1)==='ChartEl'?'z-index:5':'z-index:3':''">
@@ -70,42 +70,13 @@
         },
     };
 </script>
-<style lang="scss">
-.line{
-    justify-content: space-around !important;
-    .line-item{
-        .el-wrap .chart-wrap{
-            width:100%;
-            height:90%;
-        }
-        .editor-wrap{
-            width:90%;
-            height:90%
-        }
-    }
-}
-</style>
 <style scoped lang="scss">
-    .total-wrap {
-        .line{
-            height:41%;
-            .line-item{
-                width:50%;
-                height:100%;
-                .el-wrap .chart-wrap{
-                    width:100%;
-                    height:90%;
-                }
-            }
-        }
-
-        .wrap-full-bottom {
-            position: absolute;
-            bottom: 0;
-            justify-content: space-around;
-        }
-        .bottom-15{
-            height: 18%;
+.format-ele{
+    .line{
+        height: 41%;
+        .line-item{
+            width: 50%;
         }
     }
+}
 </style>

src/views/ppt_manage/newVersion/components/formatPage/FormatNine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+  <div class="total-wrap flex-column format-nine" :style="{'pointer-events' :isPreview?'none':'auto'}">
 <!--     <div class="wrap-full-top top-70 flex-center" 
       :style="{zIndex:pageItem.layers&&!isLayerShow()?'3':'',
       justifyContent:'space-between'}"> -->

src/views/ppt_manage/newVersion/components/formatPage/FormatTen.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+    <div class="total-wrap flex-column wrap-format-new format-ten" :style="{'pointer-events' :isPreview?'none':'auto'}">
         <div class="line flex-center">
             <div class="line-item flex-center"
                 :style="pageItem.layers&&!isLayerShow()?TypeName(1)==='ChartEl'?'z-index:5':'z-index:3':''">
@@ -82,40 +82,13 @@
         },
     };
 </script>
-<style lang="scss">
-.line{
-    .line-item{
-        .el-wrap .chart-wrap{
-            width:100%;
-            height:90%;
-        }
-        .editor-wrap{
-            width:90%;
-            height:90%
+<style lang="scss" scoped>
+.format-ten{
+    .line{
+        height:41%;
+        .line-item{
+            width:33%;
         }
     }
 }
-</style>
-<style scoped lang="scss">
-    .total-wrap {
-        .line{
-            height:41%;
-            .line-item{
-                width:33%;
-                height:100%;
-                .el-wrap .chart-wrap{
-                    width:100%;
-                    height:90%;
-                }
-            }
-        }
-
-        .wrap-full-bottom {
-            position: absolute;
-            bottom: 0;
-        }
-        .bottom-15{
-            height: 18%;
-        }
-    }
 </style>

src/views/ppt_manage/newVersion/components/formatPage/FormatTwelve.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+    <div class="total-wrap flex-column wrap-format-new format-twelve" :style="{'pointer-events' :isPreview?'none':'auto'}">
         <div class="line flex-center">
             <div class="line-item flex-center"
                 :style="pageItem.layers&&!isLayerShow()?TypeName(1)==='ChartEl'?'z-index:5':'z-index:3':''">
@@ -76,40 +76,13 @@
         },
     };
 </script>
-<style lang="scss">
-.line{
+<style scoped lang="scss">
+.format-twelve{
+    .line{
+        height:48%;
+    }
     .line-item{
-        .el-wrap .chart-wrap{
-            width:100%;
-            height:90%;
-        }
-        .editor-wrap{
-            width:90%;
-            height:90%
-        }
+        width:33%;
     }
 }
-</style>
-<style scoped lang="scss">
-    .total-wrap {
-        .line{
-            height:48%;
-            .line-item{
-                width:33%;
-                height:100%;
-                .el-wrap .chart-wrap{
-                    width:100%;
-                    height:90%;
-                }
-            }
-        }
-
-        .wrap-full-bottom {
-            position: absolute;
-            bottom: 0;
-        }
-        .bottom-15{
-            height: 18%;
-        }
-    }
 </style>

src/views/ppt_manage/newVersion/css/format.scss

@@ -144,9 +144,12 @@ $marginTop:14%;
       width: 100%;
       height: calc(100% - #{$marginTop});
       display: flex;
+      .chart-bottom-insruction-info{
+            margin-top: 0 !important;
+        }
     }
-    //24.1.25 产品调整各个版式的位置,将chart-wrap宽度置为100%
-    //版式1,6 不用改，还是用这个
+    //24.1.25 产品调整各个版式的位置,将chart-wrap宽度置为100% 高度尽量调高
+    //版式1,6 
     .full {
         width: 100%;
         height: 100%;
@@ -157,8 +160,6 @@ $marginTop:14%;
         .chart-wrap {
             width: 90%;
             height: 90%;
-            margin-top: 10px;
-            /* background-color: rgba(255, 192, 203, 0.507); */
         }
         .editor-wrap {
             width: 90%;
@@ -170,6 +171,9 @@ $marginTop:14%;
             top:0;
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            bottom:4%;
+        }
     }
 
     //版式2
@@ -191,6 +195,9 @@ $marginTop:14%;
             top:calc(10% - 10px);
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            top:89%;
+        }
     }
 
     .word-full-right {
@@ -208,7 +215,10 @@ $marginTop:14%;
         .chart-wrap {
           width: 100%;
           height: 80%;
-      }
+        }
+        .chart-bottom-insruction-info{
+            top:89%;
+        }
     }
 
     //版式345 7
@@ -231,6 +241,9 @@ $marginTop:14%;
                     top:calc(4% - 10px);
                     right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:89%;
+                }
             }
 
             &.bottom {
@@ -242,18 +255,20 @@ $marginTop:14%;
                     top:-1.5% !important;
                   }
                   .tool-list{
-                    top:-20px !important;
+                    top:-10px !important;
                   }
                 }
                 .chart-wrap {
                     width: 100%;
                     height: 84%;
-                    /* background-color: coral; */
                 }
                 .closeBtn{
                     top:0;
                     right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:84%;
+                }
             }
         }
         .chart-wrap {
@@ -268,6 +283,9 @@ $marginTop:14%;
             top:calc(10% - 10px);
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            top:90%;
+        }
     }
 
     .wrap-full-right {
@@ -289,6 +307,9 @@ $marginTop:14%;
                   top:calc(4% - 10px);
                   right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:89%;
+                }
             }
 
             &.bottom {
@@ -300,7 +321,7 @@ $marginTop:14%;
                     top:-1.5% !important;
                   }
                   .tool-list{
-                    top:-20px !important;
+                    top:-10px !important;
                   }
                 }
                 .chart-wrap {
@@ -312,6 +333,9 @@ $marginTop:14%;
                     top:0;
                     right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:84%;
+                }
             }
         }
         .editor-wrap {
@@ -326,6 +350,9 @@ $marginTop:14%;
             top:calc(10% - 10px);
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            top:90%;
+        }
     }
 
     //版式8 9
@@ -335,9 +362,15 @@ $marginTop:14%;
       position:relative;
       &.top-70{
         height:70%;
+        .chart-bottom-insruction-info{
+            top:93%;
+        }
       }
       &.bottom-30{
         height: 30%;
+        .chart-bottom-insruction-info{
+            top:85%;
+        }
       }
       .half{
         height:100%;
@@ -365,7 +398,6 @@ $marginTop:14%;
       .chart-wrap {
         width: 100%;
         height: 90%;
-       /*  margin-top: 10px; */
       }
       .editor-wrap {
         width: 90%;
@@ -388,6 +420,11 @@ $marginTop:14%;
 
       }
     }
+    .format-nine{
+        .chart-bottom-insruction-info{
+            top:93%;
+        }
+    }
     
     //layer-mask 更改版式345 9布局, ↑原先样式保留不动
     .wrap-full-left-half{
@@ -480,4 +517,35 @@ $marginTop:14%;
       }
     }
 
+    //版式10 11 12
+    .wrap-format-new{
+        .line{
+            .line-item{
+                height:100%;
+                .chart-wrap{
+                    width:100%;
+                    height:90%;
+                }
+                .editor-wrap{
+                    width:90%;
+                    height:90%
+                }
+                .chart-bottom-insruction-info{
+                    top:92%;
+                }
+            }
+        }
+
+        .wrap-full-bottom {
+            position: absolute;
+            bottom: 0;
+        }
+        .bottom-15{
+            height: 18%;
+            .chart-bottom-insruction-info{
+                top:80%;
+            }
+        }
+    }
+
 }