feat: widget

components/dynamic-page/page-component/templates/others/stocks/334x641.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
+  import nanoid from 'nanoid';
   import JSWidget from '@/components/widget/JSwidget.vue';
 
   const widgetOptions = {
     "locale": "vi",
+    "width": "350px",
+    "height": "250px",
     "price_line_color": "#71BDDF",
     "grid_color": "#999999",
     "label_color": "#999999",
-    "width": "350px",
-    "height": "250px"
   }
 </script>
 <template>
   <div>
     <JSWidget 
-      CONTAINER_ID="default_widget_[123123]" 
-      SCRIPT_ID="12312312" 
+      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
+      :SCRIPT_ID="nanoid(10)" 
       SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
       :options="widgetOptions" 
       widgetKey="FireAnt" 
@@ -24,8 +25,6 @@
 <style lang="scss" scoped>
 div {
   width: 100%;
-  height: 200px;
-  background-color: #ededed;
   font-size: 24px;
   display: flex;
   align-items: center;