perf(external/Componse): 修复大标题无法自适应

@@ -11,10 +11,10 @@ export const option = {
     y: 0,
     y: 0,
     w: 1920,
     w: 1920,
     h: 100,
     h: 100,
-    size: 40,
+    size: 20,
     textPos:{
     textPos:{
       x: 50,
       x: 50,
-      y: 0,
+      y: 10,
     },
     },
     gradient: {
     gradient: {
       from: '#0000FFFF',
       from: '#0000FFFF',

 <template>
 <template>
+<!-- 10
+0,2  54,2  60,4  75,4  81,6  216,6  225,4  240,4  245.3,2  300,2
+90,8 210,8
+20
+0,4  54,4 60,8 75,8 81,12 216,12 225,8 240,8 245.3,4 300,4
+90,16 210,16
+30
+0,6 54,6 60,12 75,12 81,18 216,18 225,12 240,12 245.3,6 300,6
+90,24 210,24
+40
+0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.3,8 300,8 -->
+<!-- 200 200
+60,160 140,160 -->
+
   <div class="go-animat">
   <div class="go-animat">
-    <div class="go-animat-item" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
+    <div class="go-svg" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
       <svg :width="w" :height="h">
       <svg :width="w" :height="h">
         <polyline
         <polyline
           fill="transparent"
           fill="transparent"
           stroke-width="3"
           stroke-width="3"
-          :points="`0,20 ${w / 5.555555555555556},20   ${w / 5},40  ${w / 4},40  ${
-            w / 3.703703703703704
-          },60  ${w / 1.388888888888889},60  ${w / 1.333333333333333},40  ${w / 1.25},40  ${
-            w / 1.219512195121951
-          },20  ${w},20`"
+          :points="`0,${h / 5} ${w / 5.555555555555556},${h / 5}  ${w / 5},${h/2.5}  ${w / 4},${h/2.5} ${w / 3.703703703703704},${h/1.666666666666667}  ${
+            w / 1.388888888888889
+          },${h/1.666666666666667} ${w / 1.333333333333333},${h/2.5}   ${w / 1.25},${h/2.5}   ${w / 1.219512195121951},${h / 5}  ${w},${h / 5}`"
           :stroke="animat.colors[0]"
           :stroke="animat.colors[0]"
         >
         >
           <animate
           <animate
@@ -28,7 +40,7 @@
         <polyline
         <polyline
           fill="transparent"
           fill="transparent"
           stroke-width="2"
           stroke-width="2"
-          :points="`${w / 3.333333333333333},80 ${w / 1.428571428571429},80`"
+          :points="`${w / 3.333333333333333},${h/1.25} ${w / 1.428571428571429},${h/1.25}`"
           :stroke="animat.colors[1]"
           :stroke="animat.colors[1]"
         >
         >
           <animate
           <animate
@@ -45,11 +57,11 @@
           ></animate>
           ></animate>
         </polyline>
         </polyline>
       </svg>
       </svg>
-      <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }">
-        <n-gradient-text :size="animat.size" :gradient="animat.gradient">
-          {{ animat.text }}
-        </n-gradient-text>
-      </div>
+    </div>
+    <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }">
+      <n-gradient-text :size="animat.size" :gradient="animat.gradient">
+        {{ animat.text }}
+      </n-gradient-text>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -64,12 +76,6 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-//默认设置宽高距离位置
-props.chartConfig.attr.w = 1920
-props.chartConfig.attr.h = 300
-props.chartConfig.attr.x = 0
-props.chartConfig.attr.y = 0
-
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
 const { animat } = toRefs(props.chartConfig.option)
 const { animat } = toRefs(props.chartConfig.option)
@@ -77,17 +83,19 @@ const { animat } = toRefs(props.chartConfig.option)
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .go-animat {
 .go-animat {
-  width: 1920px;
-  height: 1080px;
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
   display: flex;
   display: flex;
-  margin: 0 auto;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
-  .go-animat-item {
-    position: relative;
+  position: relative;
+  .go-svg {
   }
   }
   .go-text {
   .go-text {
     position: absolute;
     position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
   }
   }
 }
 }
 </style>
 </style>