@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/popconfirm/type.vue

@@ -1,30 +1,40 @@
 <template>
   <div>
-    <tiny-popconfirm :title="title" type="info" trigger="click">
+    <tiny-popconfirm :title="title" type="info">
       <template #reference>
         <tiny-button>info</tiny-button>
       </template>
     </tiny-popconfirm>
-    <tiny-popconfirm :title="title" type="error" trigger="click">
+
+    <tiny-popconfirm :title="title" type="error">
       <template #reference>
         <tiny-button>error</tiny-button>
       </template>
     </tiny-popconfirm>
-    <tiny-popconfirm :title="title" type="warning" trigger="click">
+
+    <tiny-popconfirm :title="title" type="warning">
       <template #reference>
         <tiny-button>warning</tiny-button>
       </template>
     </tiny-popconfirm>
-    <tiny-popconfirm :title="title" type="success" trigger="click">
+
+    <tiny-popconfirm :title="title" type="success">
       <template #reference>
         <tiny-button>success</tiny-button>
       </template>
     </tiny-popconfirm>
+
+    <tiny-popconfirm :title="title" :type="TinyIconDel">
+      <template #reference>
+        <tiny-button>自定义</tiny-button>
+      </template>
+    </tiny-popconfirm>
   </div>
 </template>
 
 <script>
 import { Popconfirm, Button } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -33,7 +43,8 @@ export default {
   },
   data() {
     return {
-      title: '确定要删除该安全组规则吗?'
+      title: '确定要删除该安全组规则吗?',
+      TinyIconDel: iconDel()
     }
   }
 }
@@ -43,4 +54,8 @@ export default {
 .tiny-popconfirm + .tiny-popconfirm {
   margin-left: 8px;
 }
+
+.tiny-button {
+  margin-bottom: 10px;
+}
 </style>

package/demos/pc/app/popconfirm/webdoc/popconfirm.js

@@ -7,8 +7,9 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>title</code> 设置标题内容，通过 <code>content</code> 设置正文内容，通过 <code>reference</code> 设置触发显示的元素。</p>\n',
-        'en-US': 'For details, see the following example.'
+          '<p>通过 <code>title</code> 设置标题内容， <code>content</code> 设置正文内容，通过 <code>reference</code> 插槽自定义触发显示的元素。</p>',
+        'en-US':
+          'Set the title content through <code>title</code> , set the body content through <code>content</code> , and customize the elements that trigger display through <code>reference</code> slots.'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -16,8 +17,8 @@ export default {
       'demoId': 'trigger',
       'name': { 'zh-CN': '触发方式', 'en-US': 'Trigger' },
       'desc': {
-        'zh-CN': '<p><code>trigger</code> 设置触发显示气泡确认框的方式。</p>\n',
-        'en-US': '<p><code>trigger</code> Sets hot to show the pop confirm. </p>\n'
+        'zh-CN': '<p>通过 <code>trigger</code> 设置触发显示气泡确认框的方式。</p>',
+        'en-US': '<p> <code>trigger</code> Sets hot to show the pop confirm. </p>'
       },
       'codeFiles': ['trigger.vue']
     },
@@ -25,158 +26,206 @@ export default {
       'demoId': 'type',
       'name': { 'zh-CN': '图标类型', 'en-US': 'Type' },
       'desc': {
-        'zh-CN': '<p><code>type</code> 设置提示的图标类型。</p>\n',
-        'en-US': '<p><code>type</code> Sets the icon type. </p>\n'
+        'zh-CN': '<p>通过 <code>type</code> 设置提示的图标类型，或者传入自定义图标。</p>',
+        'en-US': '<p> <code>type</code> Sets the icon type. </p>'
       },
       'codeFiles': ['type.vue']
     },
     {
       'demoId': 'placement',
-      'name': { 'zh-CN': '提示框显示位置', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>placement</code> 设置提示框显示位置。</p>\n', 'en-US': '' },
+      'name': { 'zh-CN': '提示框显示位置', 'en-US': 'Display position of prompt box' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>placement</code> 设置提示框显示位置。</p>',
+        'en-US': '<p>Set the display position of the prompt box through<code>placement</code>.</p>'
+      },
       'codeFiles': ['placement.vue']
     },
     {
-      'demoId': 'popper-class',
-      'name': { 'zh-CN': '自定义类名', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>popper-class</code> 自定义气泡提示框的类名。</p>\n', 'en-US': '' },
-      'codeFiles': ['popper-class.vue']
+      'demoId': 'custom-class',
+      'name': { 'zh-CN': '自定义类名', 'en-US': 'Custom class' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>custom-class</code> 自定义气泡提示框的类名。</p>',
+        'en-US': '<p>Customize the class name of the bubble prompt box through<code>custom class</code>.</p>'
+      },
+      'codeFiles': ['custom-class.vue']
     },
     {
       'demoId': 'slot-footer',
-      'name': { 'zh-CN': '底部插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>footer</code> 插槽自定义底部内容。</p>\n', 'en-US': '' },
+      'name': { 'zh-CN': '底部插槽', 'en-US': 'Footer slot' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>footer</code> 插槽自定义底部内容。</p>',
+        'en-US': '<p>Customize the bottom content through the<code>footer</code>slot.</p>'
+      },
       'codeFiles': ['slot-footer.vue']
     },
     {
       'demoId': 'width',
-      'name': { 'zh-CN': '设置宽度', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>width</code> 设置提示框宽度。</p>\n', 'en-US': '' },
+      'name': { 'zh-CN': '设置宽度', 'en-US': 'Set width' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>width</code> 设置提示框宽度。</p>',
+        'en-US': '<p>Set the width of the prompt box through<code>width</code></ P>'
+      },
       'codeFiles': ['width.vue']
     },
     {
       'demoId': 'cancel-button',
-      'name': { 'zh-CN': '隐藏取消按钮', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>cancelButton</code> 设置是否展示取消按钮。</p>\n', 'en-US': '' },
+      'name': { 'zh-CN': '隐藏取消按钮', 'en-US': 'Hide Cancel Button' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>cancel-button</code> 设置是否展示取消按钮。</p>',
+        'en-US': '<p>Set whether to display the cancel button through<code>cancel button</code></ P>'
+      },
       'codeFiles': ['cancel-button.vue']
     },
     {
-      'demoId': 'visible-event',
-      'name': { 'zh-CN': '隐藏、显示事件', 'en-US': '' },
+      'demoId': 'event',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p>当气泡确认框显示时触发 <code>show</code> 事件，当确认框隐藏时触发 <code>hide</code> 事件。</p>\n',
-        'en-US': ''
+        'zh-CN':
+          '<p>当气泡确认框显示时触发 <code>show</code> 事件，当确认框隐藏时触发 <code>hide</code> 事件。<br />当点击底部确认按钮时会同时触发 <code>hide</code> 和 <code>confirm</code> 事件。</p>',
+        'en-US':
+          '<p>The<code>show</code>event is triggered when the bubble confirmation box is displayed, and the<code>hide</code>event is triggered when the confirmation box is hidden< When clicking the confirm button at the bottom, both the<code>hide</code>and<code>confirm</code>events will be triggered simultaneously.</p>'
       },
-      'codeFiles': ['visible-event.vue']
-    },
-    {
-      'demoId': 'confirm-event',
-      'name': { 'zh-CN': '确认事件', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>当点击底部确认按钮时触发 <code>confirm</code> 事件。</p>\n', 'en-US': '' },
-      'codeFiles': ['confirm-event.vue']
+      'codeFiles': ['event.vue']
     }
   ],
   apis: [
     {
       'name': 'popconfirm',
       'type': 'component',
-      'properties': [
+      'props': [
         {
-          'name': 'title',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置气泡提示框的标题', 'en-US': 'Set the pop confirm title.' },
-          'demoId': 'basic-usage'
+          'name': 'cancel-button',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否展示取消按钮',
+            'en-US': 'Is show the cancel button'
+          },
+          'demoId': 'cancel-button'
         },
         {
           'name': 'content',
           'type': 'string',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置气泡提示框的内容', 'en-US': 'Set the pop confirm content.' },
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '气泡提示框的内容',
+            'en-US': 'Set the pop confirm content'
+          },
           'demoId': 'basic-usage'
         },
         {
-          'name': 'popperClass',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '为气泡提示框自定义类名', 'en-US': 'Set the pop confirm popper class name.' },
-          'demoId': 'popper-class'
+          'name': 'placement',
+          'type':
+            "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
+          'defaultValue': "'top'",
+          'desc': {
+            'zh-CN': '气泡提示框显示位置',
+            'en-US': 'Set the pop confirm placement'
+          },
+          'demoId': 'placement'
         },
         {
-          'name': 'trigger',
+          'name': 'custom-class',
           'type': 'string',
-          'defaultValue': 'hover',
-          'desc': { 'zh-CN': '气泡提示框显示触发方式', 'en-US': 'How to show the pop confirm.' },
-          'demoId': 'trigger'
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '为气泡提示框自定义类名',
+            'en-US': 'Set the pop confirm popper class name'
+          },
+          'demoId': 'custom-class'
         },
         {
-          'name': 'placement',
+          'name': 'title',
           'type': 'string',
-          'defaultValue': 'top',
-          'desc': { 'zh-CN': '气泡提示框显示位置', 'en-US': 'Set the pop confirm placement.' },
-          'demoId': 'placement'
-        },
-        {
-          'name': 'cancelButton',
-          'type': 'boolean',
-          'defaultValue': 'true',
-          'desc': { 'zh-CN': '是否展示取消按钮', 'en-US': 'Is show the cancel button' },
-          'demoId': 'cancel-button'
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '设置气泡提示框的标题',
+            'en-US': 'Set the pop confirm title'
+          },
+          'demoId': 'basic-usage'
         },
         {
-          'name': 'width',
-          'type': 'string, number',
-          'defaultValue': '350',
-          'desc': { 'zh-CN': '设置气泡提示框宽度', 'en-US': 'Set the pop confirm box with.' },
-          'demoId': 'width'
+          'name': 'trigger',
+          'type': "'click' | 'hover'",
+          'defaultValue': "'hover'",
+          'desc': {
+            'zh-CN': '气泡提示框显示触发方式',
+            'en-US': 'How to show the pop confirm'
+          },
+          'demoId': 'trigger'
         },
         {
           'name': 'type',
-          'type': 'string, object',
-          'defaultValue': '',
+          'type': "'info' | 'success' | 'warning' | 'error' | VueComponent",
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '提示图标类型，可选值有info,success,warning,error。或者可以传入自定义图标',
-            'en-US': 'Set the icon type, info,success,warning,error can be set.'
+            'zh-CN': '提示图标类型，可以传入自定义图标',
+            'en-US': 'Prompt icon type, custom icons can be passed in'
           },
           'demoId': 'type'
+        },
+        {
+          'name': 'width',
+          'type': 'string | number',
+          'defaultValue': '350',
+          'desc': {
+            'zh-CN': '气泡提示框宽度',
+            'en-US': 'Set the pop confirm box with'
+          },
+          'demoId': 'width'
         }
       ],
       'events': [
         {
-          'name': 'show',
-          'type': 'Function(params)',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '气泡确认框显示时触发', 'en-US': 'Triggered when pop confirm show' },
-          'demoId': 'visible-event'
+          'name': 'confirm',
+          'type': '(visible: boolean) => void',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '点击确认按钮时触发',
+            'en-US': 'Triggered when confirm button is clicked'
+          },
+          'demoId': 'confirm-event'
         },
         {
           'name': 'hide',
-          'type': 'Function(params)',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '气泡确认框关闭时触发', 'en-US': 'Triggered when pop confirm hide' },
-          'demoId': 'visible-event'
+          'type': '(visible: boolean) => void',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '气泡确认框关闭时触发',
+            'en-US': 'Triggered when pop confirm hide'
+          },
+          'demoId': 'event'
         },
         {
-          'name': 'confirm',
-          'type': 'Function(params)',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '点击确认按钮时触发', 'en-US': 'Triggered when confirm button is clicked' },
-          'demoId': 'confirm-event'
+          'name': 'show',
+          'type': '(visible: boolean) => void',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '气泡确认框显示时触发',
+            'en-US': 'Triggered when pop confirm show'
+          },
+          'demoId': 'event'
         }
       ],
       'slots': [
         {
           'name': 'footer',
           'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '底部插槽', 'en-US': 'default slot' },
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '底部插槽',
+            'en-US': 'default slot'
+          },
           'demoId': 'slot-footer'
         },
         {
           'name': 'reference',
           'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '触发气泡提示框显示的 HTML 元素', 'en-US': 'reference slot' },
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '触发气泡提示框显示的 HTML 元素',
+            'en-US': 'reference slot'
+          },
           'demoId': 'basic-usage'
         }
       ]

package/demos/pc/app/popconfirm/width-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-popconfirm :title="title" :content="content" width="600">
+    <tiny-popconfirm :title="title" :content="content" width="200">
       <template #reference>
         <tiny-button>悬浮我提示</tiny-button>
       </template>

package/demos/pc/app/popconfirm/width.spec.ts

@@ -10,5 +10,5 @@ test('设置气泡确认框宽度', async ({ page }) => {
 
   await popConfirm.hover()
   await expect(popConfirmPopover).toBeVisible()
-  await expect(popConfirmPopover).toHaveCSS('width', '600px')
+  await expect(popConfirmPopover).toHaveCSS('width', '200px')
 })

package/demos/pc/app/popconfirm/width.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-popconfirm :title="title" :content="content" width="600">
+    <tiny-popconfirm :title="title" :content="content" width="200">
       <template #reference>
         <tiny-button>悬浮我提示</tiny-button>
       </template>

package/demos/pc/app/popeditor/{base.spec.ts → basic-usage.spec.ts}

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('PopEditor 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('popeditor#base')
+  await page.goto('popeditor#basic-usage')
 
   const preview = page.locator('#preview')
   const textBox = preview.getByPlaceholder('请选择')

package/demos/pc/app/popeditor/draggable-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h5>组件属性draggable默认为true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</h5>
+    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <h5>如果设置属性draggable为false，那么就不能拖动弹出窗口：</h5>
+    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"

package/demos/pc/app/popeditor/draggable.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h5>组件属性draggable默认为true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</h5>
+    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <h5>如果设置属性draggable为false，那么就不能拖动弹出窗口：</h5>
+    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"

package/demos/pc/app/popeditor/events-composition-api.vue

@@ -8,6 +8,8 @@
     :show-pager="true"
     :pager-op="pagerOp"
     @page-change="handlePageChange"
+    @popup="handlePopup"
+    @close="handleClose"
   ></tiny-popeditor>
 </template>
 
@@ -120,4 +122,12 @@ function handlePageChange(val) {
   const offset = (val - 1) * pagerOp.value.pageSize
   gridOp.value.data = dataset.slice(offset, offset + pagerOp.value.pageSize)
 }
+
+function handlePopup() {
+  Modal.message('popup 弹窗打开事件')
+}
+
+function handleClose() {
+  Modal.message('close 弹窗关闭事件')
+}
 </script>

package/demos/pc/app/popeditor/events.vue

@@ -8,6 +8,8 @@
     :show-pager="true"
     :pager-op="pagerOp"
     @page-change="handlePageChange"
+    @popup="handlePopup"
+    @close="handleClose"
   ></tiny-popeditor>
 </template>
 
@@ -126,6 +128,12 @@ export default {
       ]
       const offset = (val - 1) * this.pagerOp.pageSize
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
+    },
+    handlePopup() {
+      Modal.message('popup 弹窗打开事件')
+    },
+    handleClose() {
+      Modal.message('close 弹窗关闭事件')
     }
   }
 }

package/demos/pc/app/popeditor/multi-composition-api.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/multi-value-array-composition-api.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -107,3 +107,9 @@ const gridOp = ref({
   data: dataset
 })
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/multi-value-array.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -115,3 +115,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/multi.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/selected-box-composition-api.vue

@@ -11,7 +11,7 @@
       show-selected-box
       :selected-box-op="selectedBoxOp"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -117,3 +117,9 @@ const selectedBoxOp = ref({
   }
 })
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/selected-box.vue

@@ -11,7 +11,7 @@
       show-selected-box
       :selected-box-op="selectedBoxOp"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -125,3 +125,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/{showOverflow-composition-api.vue → show-overflow-composition-api.vue}

@@ -8,7 +8,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/{showOverflow.vue → show-overflow.vue}

@@ -8,7 +8,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/size-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-popeditor-size">
     <tiny-popeditor
       size="medium"
       v-model="value"
@@ -9,7 +9,32 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <tiny-popeditor
+      size="small"
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
+    <tiny-popeditor
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
+    <tiny-popeditor
+      size="mini"
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
   </div>
 </template>
 
@@ -106,3 +131,9 @@ const gridOp = ref({
   data: dataset
 })
 </script>
+
+<style scoped>
+.demo-popeditor-size .tiny-popeditor {
+  margin-bottom: 8px;
+}
+</style>