Merge branch 'watermark-adaptation'

src/CustomElement/EtaChart.ce.vue

@@ -20,6 +20,10 @@ const chartInfo=ref(null)
 const dataList=ref(null)
 const haveData=ref(false)
 const markDom=ref(null)
+
+const chartContainer=ref(null)
+const chartFooter=ref(null)
+
 async function getChartData(){
     if(!params.code) {
         haveData.value = false; 
@@ -54,6 +58,15 @@ async function getChartData(){
             })
             res.Data.WaterMark&&(markDom.value.style.backgroundImage = `url(${res.Data.WaterMark})`)
         })
+        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) {
         haveData.value = false; 
     }
@@ -75,7 +88,7 @@ getChartData()
 </script>
 
 <template>
-    <div class="hz-chart-wrap" :style="props.style+';height:'+props.height+'px'" style="margin: 0 0 10px 0;">
+    <div class="hz-chart-wrap" ref="chartContainer" :style="props.style+';height:'+props.height+'px'" style="margin: 0 0 10px 0;">
         <header class="hz-chart-head">
             <span 
                 v-if="chartInfo"
@@ -109,7 +122,7 @@ getChartData()
                 `"
             ></div>
         </div>
-        <div class="hz-chart-footer" 
+        <div class="hz-chart-footer" ref="chartFooter"
         v-if="chartInfo?.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom)?.isShow"
         :style="`
             color: ${ JSON.parse(chartInfo.SourcesFrom).color };
@@ -175,15 +188,6 @@ div{
         color: #777;
         text-align: center;
     }
-	@media (max-width: 979px) {
-		.mark {
-			width: 242PX;
-			height: 25PX;
-		}
-		.notfound {
-			font-size: 14PX;
-		}
-	}
     .chart-bottom-info{
         padding-right: 10PX;
         padding-bottom: 0;