Merge branch 'requirements_210'

src/CustomElement/EtaChart.ce.vue

@@ -60,11 +60,6 @@ async function getChartData(){
         })
         nextTick(()=>{
             // console.log(chartContainer.value.clientWidth);
-            // 设置logo宽度，换成webcomponent就不是单独的页面，不能用 媒体查询
-            if(chartContainer.value?.clientWidth<979){
-                markDom.value && (markDom.value.style.width="242px")
-                markDom.value && (markDom.value.style.height="25px")
-            }
             chartFooter.value && (chartFooter.value.style.maxWidth=chartContainer.value?.clientWidth+'px')
         })
     }catch (e) {
@@ -102,10 +97,10 @@ getChartData()
                 {{ params.language === 'en'?chartInfo.ChartNameEn: chartInfo.ChartName}}
             </span>
         </header>
-        <template v-if="haveData">
+        <div v-if="haveData" class="chart-wrapper">
             <div :id="chartBoxId" ref="chartContentEl" class="hz-chart-content"></div>
             <div class="mark" ref="markDom"></div>
-        </template>
+        </div>
         <div class="notfound" v-else>
             哎吆，你的图飞了，赶快去找管理员救命吧~
         </div>
@@ -164,23 +159,30 @@ div{
             width: 100%;
         }
     }
-    .hz-chart-content{
+    .chart-wrapper{
+        position: relative;
+        display: flex;
+        height: 100%;
         width: 100%;
-        flex: 1;
-    }
-    .mark{
-        position:absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        background-image: none;
-        background-position:center center;
-        background-repeat:  no-repeat;
-        background-size: contain;
-        pointer-events: none;
-        width: 580PX;
-        height: 60PX;
+        .hz-chart-content{
+            width: 100%;
+            flex: 1;
+        }
+        .mark{
+            position:absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            background-image: none;
+            background-position:center center;
+            background-repeat:  no-repeat;
+            background-size: contain;
+            pointer-events: none;
+            width: 80%;
+            height: 80%;
+        }
     }
+
     .notfound {
         flex: 1;
         overflow: hidden;