From bbe194b0a24cc52a5ed79a6c030255480bda79fc Mon Sep 17 00:00:00 2001
From: unknown <525765282@qq.com>
Date: Tue, 15 Nov 2022 15:47:36 +0800
Subject: [PATCH] 工具栏分类功能；装饰组件；

---
 src/assets/images/widget/decorate1.svg                                  |  77 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/assets/images/widget/decorate10.svg                                 |  32 ++++++++++++++++++++++++++++++++
 src/assets/images/widget/decorate11.svg                                 |  14 ++++++++++++++
 src/assets/images/widget/decorate12.svg                                 |  65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/assets/images/widget/decorate2.svg                                  |  10 ++++++++++
 src/assets/images/widget/decorate3.svg                                  | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/assets/images/widget/decorate4.svg                                  |   6 ++++++
 src/assets/images/widget/decorate5.svg                                  |  10 ++++++++++
 src/assets/images/widget/decorate6.svg                                  | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/assets/images/widget/decorate7_1.svg                                |   6 ++++++
 src/assets/images/widget/decorate7_2.svg                                |   6 ++++++
 src/assets/images/widget/decorate8.svg                                  |   7 +++++++
 src/assets/images/widget/decorate9.svg                                  |  74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/components/customUploadNew.vue     | 193 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/components/dynamicForm.vue         |  10 +++++++++-
 src/views/bigscreenDesigner/designer/index.vue                          |  14 +++++++-------
 src/views/bigscreenDesigner/designer/tools/configure/widget-decorate.js |  90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/widget-div.js      |   1 +
 src/views/bigscreenDesigner/designer/tools/configure/widget-image.js    |   3 ++-
 src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js  |   1 +
 src/views/bigscreenDesigner/designer/tools/configure/widget-table.js    |   1 +
 src/views/bigscreenDesigner/designer/tools/configure/widget-text.js     |   1 +
 src/views/bigscreenDesigner/designer/tools/configure/widget-video.js    |   1 +
 src/views/bigscreenDesigner/designer/tools/index.js                     |  68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 src/views/bigscreenDesigner/designer/tools/main.js                      |   4 +++-
 src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue       | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/widget.vue                  |   4 +++-
 src/views/bigscreenDesigner/designer/widget/widgetImage.vue             |  27 ++++++++++++++++++---------
 28 files changed, 1181 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/images/widget/decorate1.svg
 create mode 100644 src/assets/images/widget/decorate10.svg
 create mode 100644 src/assets/images/widget/decorate11.svg
 create mode 100644 src/assets/images/widget/decorate12.svg
 create mode 100644 src/assets/images/widget/decorate2.svg
 create mode 100644 src/assets/images/widget/decorate3.svg
 create mode 100644 src/assets/images/widget/decorate4.svg
 create mode 100644 src/assets/images/widget/decorate5.svg
 create mode 100644 src/assets/images/widget/decorate6.svg
 create mode 100644 src/assets/images/widget/decorate7_1.svg
 create mode 100644 src/assets/images/widget/decorate7_2.svg
 create mode 100644 src/assets/images/widget/decorate8.svg
 create mode 100644 src/assets/images/widget/decorate9.svg
 create mode 100644 src/views/bigscreenDesigner/designer/components/customUploadNew.vue
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/widget-decorate.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue

diff --git a/src/assets/images/widget/decorate1.svg b/src/assets/images/widget/decorate1.svg
new file mode 100644
index 0000000..707903b
--- /dev/null
+++ b/src/assets/images/widget/decorate1.svg
@@ -0,0 +1,77 @@
+<svg version="1.1"
+baseProfile="full"
+xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="200px" height="50px" style="transform: scale(9.11, 24.58);">
+  <rect fill="#00CED1" x="36.845238095238095" y="8.75" width="2.5" height="2.5">
+  </rect>
+  <rect fill="#00CED1" x="84.46428571428571" y="8.75" width="2.5" height="2.5"> 
+  </rect>  
+  <rect fill="#00CED1" x="113.03571428571428" y="8.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="0.41202722151409565" repeatCount="indefinite"></animate>
+  </rect> 
+  <rect fill="#00CED1" x="132.08333333333334" y="8.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="0.691915838830659" repeatCount="indefinite"></animate>
+  </rect>  
+  <rect fill="#00CED1" x="160.6547619047619" y="8.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="0.2880164292057623" repeatCount="indefinite"></animate>
+  </rect>  
+  <rect fill="#00CED1" x="189.22619047619048" y="8.75" width="2.5" height="2.5"> 
+  </rect>       
+  <rect fill="#00CED1" x="74.94047619047619" y="18.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="0.39891746024340735" repeatCount="indefinite"></animate>
+  </rect>   
+  <rect fill="#00CED1" x="113.03571428571428" y="18.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="0.35078035913569083" repeatCount="indefinite"></animate>
+  </rect>  
+  <rect fill="#00CED1" x="141.60714285714286" y="18.75" width="2.5" height="2.5"> 
+  </rect>     
+  <rect fill="#00CED1" x="8.273809523809524" y="28.75" width="2.5" height="2.5"> 
+  </rect>  
+  <rect fill="#00CED1" x="36.845238095238095" y="28.75" width="2.5" height="2.5"> 
+  </rect>    
+  <rect fill="#00CED1" x="84.46428571428571" y="28.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="0.3992796711422115" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="93.98809523809524" y="28.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="113.03571428571428" y="28.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="132.08333333333334" y="28.75" width="2.5" height="2.5"> 
+  </rect>
+  <rect fill="#00CED1" x="141.60714285714286" y="28.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="160.6547619047619" y="28.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="1.6727816580051433" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="170.17857142857142" y="28.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="189.22619047619048" y="28.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="17.797619047619047" y="38.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="36.845238095238095" y="38.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="1.683706890385123" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="46.36904761904762" y="38.75" width="2.5" height="2.5"> 
+  </rect>
+  <rect fill="#00CED1" x="55.89285714285714" y="38.75" width="2.5" height="2.5">
+    <animate attributeName="fill" values="#00CED1;transparent" dur="1s" begin="1.006582018814096" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="65.41666666666667" y="38.75" width="2.5" height="2.5"> 
+  </rect>    
+  <rect fill="#00CED1" x="113.03571428571428" y="38.75" width="2.5" height="2.5"> 
+  </rect> 
+  <rect fill="#00CED1" x="132.08333333333334" y="38.75" width="2.5" height="2.5"> 
+  </rect>     
+  <rect fill="#00CED1" x="189.22619047619048" y="38.75" width="2.5" height="2.5"> 
+  </rect>
+  <rect fill="#FAD400" x="187.97619047619048" y="17.5" width="5" height="5">
+    <animate attributeName="width" values="0;5" dur="2s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="0;5" dur="2s" repeatCount="indefinite"></animate>
+    <animate attributeName="x" values="190.47619047619048;187.97619047619048" dur="2s" repeatCount="indefinite"></animate>
+    <animate attributeName="y" values="20;17.5" dur="2s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="131.42857142857142" y="17.5" width="40" height="5">
+    <animate attributeName="width" values="0;40;0" dur="2s" repeatCount="indefinite"></animate>
+    <animate attributeName="x" values="171.42857142857142;131.42857142857142;171.42857142857142" dur="2s" repeatCount="indefinite"></animate>
+  </rect>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate10.svg b/src/assets/images/widget/decorate10.svg
new file mode 100644
index 0000000..accecf8
--- /dev/null
+++ b/src/assets/images/widget/decorate10.svg
@@ -0,0 +1,32 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2104" height="1129">
+  <polyline stroke-width="2" points="0, 564.5 2104, 564.5" stroke="#FAD400"></polyline>
+  <polyline stroke-width="2" points="5, 564.5 417.8, 564.5" stroke-dasharray="0, 420.8" fill="freeze" stroke="#00CED1">
+    <animate id="d10ani23c523652ab744c6ab8afeff10246e1ec" attributeName="stroke-dasharray" values="0, 420.8;420.8, 0;" dur="3s" begin="d10ani13c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+    <animate attributeName="stroke-dasharray" values="420.8, 0;0, 420.8" dur="0.01s" begin="d10ani73c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+  </polyline>
+  <polyline stroke-width="2" points="423.8, 564.5 1680.2, 564.5" stroke-dasharray="0, 1262.3999999999999" stroke="#00CED1">
+    <animate id="d10ani43c523652ab744c6ab8afeff10246e1ec" attributeName="stroke-dasharray" values="0, 1262.3999999999999;1262.3999999999999, 0" dur="3s" begin="d10ani33c523652ab744c6ab8afeff10246e1ec.end + 1s" fill="freeze"></animate>
+    <animate attributeName="stroke-dasharray" values="1262.3999999999999, 0;0, 1262.3999999999999" dur="0.01s" begin="d10ani73c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+  </polyline>
+  <polyline stroke-width="2" points="1686.2, 564.5 2099, 564.5" stroke-dasharray="0, 420.8" stroke="#00CED1">
+    <animate id="d10ani63c523652ab744c6ab8afeff10246e1ec" attributeName="stroke-dasharray" values="0, 420.8;420.8, 0" dur="3s" begin="d10ani53c523652ab744c6ab8afeff10246e1ec.end + 1s" fill="freeze"></animate>
+    <animate attributeName="stroke-dasharray" values="420.8, 0;0, 631.1999999999999" dur="0.01s" begin="d10ani73c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+  </polyline>
+  <circle cx="2" cy="564.5" r="2" fill="#FAD400">
+    <animate id="d10ani13c523652ab744c6ab8afeff10246e1ec" attributeName="fill" values="#FAD400;#00CED1" begin="0s;d10ani73c523652ab744c6ab8afeff10246e1ec.end" dur="0.3s" fill="freeze"></animate>
+  </circle>
+  <circle cx="420.8" cy="564.5" r="2" fill="#FAD400">
+    <animate id="d10ani33c523652ab744c6ab8afeff10246e1ec" attributeName="fill" values="#FAD400;#00CED1" begin="d10ani23c523652ab744c6ab8afeff10246e1ec.end" dur="0.3s" fill="freeze"></animate>
+    <animate attributeName="fill" values="#FAD400;#FAD400" dur="0.01s" begin="d10ani73c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+  </circle>
+  <circle cx="1683.2" cy="564.5" r="2" fill="#FAD400">
+    <animate id="d10ani53c523652ab744c6ab8afeff10246e1ec" attributeName="fill" values="#FAD400;#00CED1" begin="d10ani43c523652ab744c6ab8afeff10246e1ec.end" dur="0.3s" fill="freeze"></animate>
+    <animate attributeName="fill" values="#FAD400;#FAD400" dur="0.01s" begin="d10ani73c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+  </circle>
+  <circle cx="2102" cy="564.5" r="2" fill="#FAD400">
+    <animate id="d10ani73c523652ab744c6ab8afeff10246e1ec" attributeName="fill" values="#FAD400;#00CED1" begin="d10ani63c523652ab744c6ab8afeff10246e1ec.end" dur="0.3s" fill="freeze"></animate>
+    <animate attributeName="fill" values="#FAD400;#FAD400" dur="0.01s" begin="d10ani73c523652ab744c6ab8afeff10246e1ec.end" fill="freeze"></animate>
+  </circle>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate11.svg b/src/assets/images/widget/decorate11.svg
new file mode 100644
index 0000000..9c7b4a6
--- /dev/null
+++ b/src/assets/images/widget/decorate11.svg
@@ -0,0 +1,14 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2104" height="1129">
+  <polygon fill="rgba(250,212,0,0.1)" points="20 10, 25 4, 55 4 60 10" stroke="#FAD400"></polygon>
+  <polygon fill="rgba(250,212,0,0.1)" points="20 1119, 25 1125, 55 1125 60 1119" stroke="#FAD400"></polygon>
+  <polygon fill="rgba(250,212,0,0.1)" points="2084 10, 2079 4, 2049 4 2044 10" stroke="#FAD400"></polygon>
+  <polygon fill="rgba(250,212,0,0.1)" points="2084 1119, 2079 1125, 2049 1125 2044 1119" stroke="#FAD400"></polygon>
+  <polygon fill="rgba(0,206,209,0.2)" points="
+        20 10, 5 564.5 20 1119
+        2084 1119 2099 564.5 2084 10
+      " stroke="#00CED1"></polygon>
+  <polyline fill="transparent" stroke="rgba(0,206,209,0.7)" points="25 18, 15 564.5 25 1111"></polyline>
+  <polyline fill="transparent" stroke="rgba(0,206,209,0.7)" points="2079 18, 2089 564.5 2079 1111"></polyline>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate12.svg b/src/assets/images/widget/decorate12.svg
new file mode 100644
index 0000000..7d17d90
--- /dev/null
+++ b/src/assets/images/widget/decorate12.svg
@@ -0,0 +1,65 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2297" height="1302">
+  <defs>
+    <g id="decoration-12-g-3394b47e413b415b9b29d89f4bb757e9">
+      <path stroke="rgba(0,206,209,1)" stroke-width="1148.5" fill="transparent" d="M1148.5,76.75 A574.25, 574.25 0 0 0 1128.45896,77.09982"></path>
+      <path stroke="rgba(0,206,209,0.9655172413793103)" stroke-width="1148.5" fill="transparent" d="M1128.45896,77.09982 A574.25, 574.25 0 0 0 1108.44234,78.14884"></path>
+      <path stroke="rgba(0,206,209,0.9310344827586207)" stroke-width="1148.5" fill="transparent" d="M1108.44234,78.14884 A574.25, 574.25 0 0 0 1088.47453,79.89580"></path>
+      <path stroke="rgba(0,206,209,0.896551724137931)" stroke-width="1148.5" fill="transparent" d="M1088.47453,79.89580 A574.25, 574.25 0 0 0 1068.57985,82.33856"></path>
+      <path stroke="rgba(0,206,209,0.8620689655172414)" stroke-width="1148.5" fill="transparent" d="M1068.57985,82.33856 A574.25, 574.25 0 0 0 1048.78253,85.47415"></path>
+      <path stroke="rgba(0,206,209,0.8275862068965517)" stroke-width="1148.5" fill="transparent" d="M1048.78253,85.47415 A574.25, 574.25 0 0 0 1029.10671,89.29874"></path>
+      <path stroke="rgba(0,206,209,0.7931034482758621)" stroke-width="1148.5" fill="transparent" d="M1029.10671,89.29874 A574.25, 574.25 0 0 0 1009.57635,93.80768"></path>
+      <path stroke="rgba(0,206,209,0.7586206896551724)" stroke-width="1148.5" fill="transparent" d="M1009.57635,93.80768 A574.25, 574.25 0 0 0 990.21525,98.99547"></path>
+      <path stroke="rgba(0,206,209,0.7241379310344829)" stroke-width="1148.5" fill="transparent" d="M990.21525,98.99547 A574.25, 574.25 0 0 0 971.04699,104.85580"></path>
+      <path stroke="rgba(0,206,209,0.6896551724137931)" stroke-width="1148.5" fill="transparent" d="M971.04699,104.85580 A574.25, 574.25 0 0 0 952.09493,111.38151"></path>
+      <path stroke="rgba(0,206,209,0.6551724137931035)" stroke-width="1148.5" fill="transparent" d="M952.09493,111.38151 A574.25, 574.25 0 0 0 933.38216,118.56467"></path>
+      <path stroke="rgba(0,206,209,0.6206896551724138)" stroke-width="1148.5" fill="transparent" d="M933.38216,118.56467 A574.25, 574.25 0 0 0 914.93148,126.39652"></path>
+      <path stroke="rgba(0,206,209,0.5862068965517241)" stroke-width="1148.5" fill="transparent" d="M914.93148,126.39652 A574.25, 574.25 0 0 0 896.76537,134.86752"></path>
+      <path stroke="rgba(0,206,209,0.5517241379310345)" stroke-width="1148.5" fill="transparent" d="M896.76537,134.86752 A574.25, 574.25 0 0 0 878.90596,143.96734"></path>
+      <path stroke="rgba(0,206,209,0.5172413793103449)" stroke-width="1148.5" fill="transparent" d="M878.90596,143.96734 A574.25, 574.25 0 0 0 861.37500,153.68491"></path>
+      <path stroke="rgba(0,206,209,0.48275862068965525)" stroke-width="1148.5" fill="transparent" d="M861.37500,153.68491 A574.25, 574.25 0 0 0 844.19386,164.00838"></path>
+      <path stroke="rgba(0,206,209,0.4482758620689655)" stroke-width="1148.5" fill="transparent" d="M844.19386,164.00838 A574.25, 574.25 0 0 0 827.38348,174.92517"></path>
+      <path stroke="rgba(0,206,209,0.41379310344827586)" stroke-width="1148.5" fill="transparent" d="M827.38348,174.92517 A574.25, 574.25 0 0 0 810.96432,186.42199"></path>
+      <path stroke="rgba(0,206,209,0.37931034482758624)" stroke-width="1148.5" fill="transparent" d="M810.96432,186.42199 A574.25, 574.25 0 0 0 794.95640,198.48482"></path>
+      <path stroke="rgba(0,206,209,0.34482758620689663)" stroke-width="1148.5" fill="transparent" d="M794.95640,198.48482 A574.25, 574.25 0 0 0 779.37922,211.09898"></path>
+      <path stroke="rgba(0,206,209,0.31034482758620696)" stroke-width="1148.5" fill="transparent" d="M779.37922,211.09898 A574.25, 574.25 0 0 0 764.25175,224.24908"></path>
+      <path stroke="rgba(0,206,209,0.2758620689655173)" stroke-width="1148.5" fill="transparent" d="M764.25175,224.24908 A574.25, 574.25 0 0 0 749.59243,237.91912"></path>
+      <path stroke="rgba(0,206,209,0.24137931034482762)" stroke-width="1148.5" fill="transparent" d="M749.59243,237.91912 A574.25, 574.25 0 0 0 735.41912,252.09243"></path>
+      <path stroke="rgba(0,206,209,0.20689655172413793)" stroke-width="1148.5" fill="transparent" d="M735.41912,252.09243 A574.25, 574.25 0 0 0 721.74908,266.75175"></path>
+      <path stroke="rgba(0,206,209,0.17241379310344826)" stroke-width="1148.5" fill="transparent" d="M721.74908,266.75175 A574.25, 574.25 0 0 0 708.59898,281.87922"></path>
+      <path stroke="rgba(0,206,209,0.13793103448275873)" stroke-width="1148.5" fill="transparent" d="M708.59898,281.87922 A574.25, 574.25 0 0 0 695.98482,297.45640"></path>
+      <path stroke="rgba(0,206,209,0.10344827586206903)" stroke-width="1148.5" fill="transparent" d="M695.98482,297.45640 A574.25, 574.25 0 0 0 683.92199,313.46432"></path>
+      <path stroke="rgba(0,206,209,0.06896551724137936)" stroke-width="1148.5" fill="transparent" d="M683.92199,313.46432 A574.25, 574.25 0 0 0 672.42517,329.88348"></path>
+      <path stroke="rgba(0,206,209,0.03448275862068968)" stroke-width="1148.5" fill="transparent" d="M672.42517,329.88348 A574.25, 574.25 0 0 0 661.50838,346.69386"></path>
+      <path stroke="rgba(0,206,209,0)" stroke-width="1148.5" fill="transparent" d="M661.50838,346.69386 A574.25, 574.25 0 0 0 651.18491,363.87500"></path>
+    </g>
+    <radialGradient id="decoration-12-gradient-3394b47e413b415b9b29d89f4bb757e9" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="transparent" stop-opacity="1"></stop>
+      <stop offset="100%" stop-color="rgba(250,212,0,0.3)" stop-opacity="1"></stop>
+    </radialGradient>
+  </defs>
+  <circle r="382.6666666666667" cx="1148.5" cy="651" stroke="#FAD400" stroke-width="0.5" fill="transparent"></circle>
+  <circle r="765.3333333333334" cx="1148.5" cy="651" stroke="#FAD400" stroke-width="0.5" fill="transparent"></circle>
+  <circle r="1148" cx="1148.5" cy="651" stroke="#FAD400" stroke-width="0.5" fill="transparent"></circle>
+  <circle r="1" cx="1148.5" cy="651" stroke="transparent" fill="url(#decoration-12-gradient-3394b47e413b415b9b29d89f4bb757e9)">
+    <animate attributeName="r" values="1;1148.5" dur="2s" repeatCount="indefinite"></animate>
+    <animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite"></animate>
+  </circle>
+  <circle r="2" cx="1148.5" cy="651" fill="#FAD400"></circle>
+  <g>
+    <polyline points="2143.1301762464277,1225.25 153.86982375357206,76.75000000000034" stroke="#FAD400" stroke-width="0.5" opacity="0.5"></polyline>
+    <polyline points="1722.75,1645.6301762464277 574.2499999999995,-343.6301762464276" stroke="#FAD400" stroke-width="0.5" opacity="0.5"></polyline>
+    <polyline points="1148.5,1799.5 1148.4999999999998,-497.5" stroke="#FAD400" stroke-width="0.5" opacity="0.5"></polyline>
+    <polyline points="574.2500000000002,1645.6301762464277 1722.749999999999,-343.6301762464283" stroke="#FAD400" stroke-width="0.5" opacity="0.5"></polyline>
+    <polyline points="153.8698237535724,1225.2500000000005 2143.1301762464273,76.74999999999955" stroke="#FAD400" stroke-width="0.5" opacity="0.5"></polyline>
+    <polyline points="0,651.0000000000001 2297,650.9999999999998" stroke="#FAD400" stroke-width="0.5" opacity="0.5"></polyline>
+  </g>
+  <path d="M2142.264150842643,1224.75 A1148.5, 651 0 0 1 1722.25,1644.7641508426432" stroke="#FAD400" stroke-width="2" fill="transparent"></path>
+  <path d="M574.7500000000002,1644.7641508426434 A1148.5, 651 0 0 1 154.73584915735682,1224.7500000000005" stroke="#FAD400" stroke-width="2" fill="transparent"></path>
+  <path d="M154.73584915735648,77.25000000000034 A1148.5, 651 0 0 1 574.7499999999995,-342.7641508426432" stroke="#FAD400" stroke-width="2" fill="transparent"></path>
+  <path d="M1722.249999999999,-342.76415084264374 A1148.5, 651 0 0 1 2142.264150842643,77.24999999999955" stroke="#FAD400" stroke-width="2" fill="transparent"></path>
+  <use xlink:href="#decoration-12-g-3394b47e413b415b9b29d89f4bb757e9">
+    <animateTransform attributeName="transform" type="rotate" values="0, 1148.5 651;360, 1148.5 651" dur="3s" repeatCount="indefinite"></animateTransform>
+  </use>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate2.svg b/src/assets/images/widget/decorate2.svg
new file mode 100644
index 0000000..40564e5
--- /dev/null
+++ b/src/assets/images/widget/decorate2.svg
@@ -0,0 +1,10 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="1877px" height="537px">
+  <rect x="0" y="268.5" width="1877" height="2" fill="#00CED1">
+    <animate attributeName="width" from="0" to="1877" dur="3s" calcMode="spline" keyTimes="0;1" keySplines=".42,0,.58,1" repeatCount="indefinite"></animate>
+  </rect>
+  <rect x="0" y="268.5" width="1" height="2" fill="#FAD400">
+    <animate attributeName="x" from="0" to="1877" dur="3s" calcMode="spline" keyTimes="0;1" keySplines="0.42,0,0.58,1" repeatCount="indefinite"></animate>
+  </rect>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate3.svg b/src/assets/images/widget/decorate3.svg
new file mode 100644
index 0000000..ad18613
--- /dev/null
+++ b/src/assets/images/widget/decorate3.svg
@@ -0,0 +1,154 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="300px" height="35px" style="transform: scale(4.95667, 12.6571);">
+  <rect fill="#00CED1" x="8.038461538461538" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="19.576923076923077" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="31.115384615384613" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="42.65384615384615" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="54.19230769230769" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.8412841766923513s" begin="0.5176353550935606" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="65.73076923076923" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.6927204138415908s" begin="0.7393420019617922" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="77.26923076923077" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="88.8076923076923" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.8801016132688009s" begin="1.9827949800271267" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="100.34615384615384" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.4748339843750133s" begin="1.7307829937924968" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="111.88461538461539" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="123.42307692307692" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="134.96153846153845" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="146.5" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="158.03846153846155" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="169.57692307692307" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="181.1153846153846" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.9349783319032743s" begin="1.2101534989114424" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="192.65384615384616" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.9799917657896928s" begin="0.22932654948701225" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="204.19230769230768" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.9405039586884445s" begin="1.009966034638008" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="215.73076923076923" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="227.26923076923077" y="8.166666666666666" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.164239580741545s" begin="0.4225201577520772" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="238.8076923076923" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="250.34615384615384" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="261.88461538461536" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="273.4230769230769" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="284.96153846153845" y="8.166666666666666" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="8.038461538461538" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.4835336005023403s" begin="0.6548669246433421" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="19.576923076923077" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.714200625595007s" begin="1.5399438162183285" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="31.115384615384613" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="42.65384615384615" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.1921417475606229s" begin="0.4034075352192983" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="54.19230769230769" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="65.73076923076923" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="77.26923076923077" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.3395991935002942s" begin="1.7658684683666475" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="88.8076923076923" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.4409707095120556s" begin="0.40435784511961703" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="100.34615384615384" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="111.88461538461539" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="123.42307692307692" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="134.96153846153845" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="146.5" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="158.03846153846155" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="169.57692307692307" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="181.1153846153846" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="192.65384615384616" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.7454717685713368s" begin="0.4742332518067256" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="204.19230769230768" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.3671084393277293s" begin="1.0375987161980946" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="215.73076923076923" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="227.26923076923077" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.444470242907152s" begin="1.036913711848415" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="238.8076923076923" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.7494598105696535s" begin="1.1200880072376669" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="250.34615384615384" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="261.88461538461536" y="19.833333333333332" width="7" height="7">
+    <animate attributeName="fill" values="#00CED1;#FAD400" dur="1.5104561335422264s" begin="1.5325133106543087" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="273.4230769230769" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+  <rect fill="#00CED1" x="284.96153846153845" y="19.833333333333332" width="7" height="7">
+    <!---->
+  </rect>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate4.svg b/src/assets/images/widget/decorate4.svg
new file mode 100644
index 0000000..5043660
--- /dev/null
+++ b/src/assets/images/widget/decorate4.svg
@@ -0,0 +1,6 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="5" height="1528">
+  <polyline points="2.5, 0 2.5, 1528" stroke="#00CED1"></polyline>
+  <polyline stroke-width="3" stroke-dasharray="20, 80" stroke-dashoffset="-30" points="2.5, 0 2.5, 1528" class="bold-line" stroke="#FAD400"></polyline>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate5.svg b/src/assets/images/widget/decorate5.svg
new file mode 100644
index 0000000..348e709
--- /dev/null
+++ b/src/assets/images/widget/decorate5.svg
@@ -0,0 +1,10 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="1393" height="1186">
+  <polyline fill="transparent" stroke-width="3" points="0,237.20000000000002 250.73999999999998,237.20000000000002 278.6,474.40000000000003 348.25,474.40000000000003 376.11,711.6 1002.9599999999999,711.6 1044.75,474.40000000000003 1114.4,474.40000000000003 1142.26,237.20000000000002 1393,237.20000000000002" stroke="#00CED1">
+    <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 1112.4873666705153, 0, 1112.4873666705153" to="0, 0, 2224.9747333410305, 0" dur="3s" begin="0s" calcMode="spline" keyTimes="0;1" keySplines="0.4,1,0.49,0.98" repeatCount="indefinite"></animate>
+  </polyline>
+  <polyline fill="transparent" stroke-width="2" points="417.9,948.8000000000001 975.0999999999999,948.8000000000001" stroke="#FAD400">
+    <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 278.59999999999997, 0, 278.59999999999997" to="0, 0, 557.1999999999999, 0" dur="3s" begin="0s" calcMode="spline" keyTimes="0;1" keySplines=".4,1,.49,.98" repeatCount="indefinite"></animate>
+  </polyline>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate6.svg b/src/assets/images/widget/decorate6.svg
new file mode 100644
index 0000000..637109e
--- /dev/null
+++ b/src/assets/images/widget/decorate6.svg
@@ -0,0 +1,164 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="300px" height="35px" style="transform: scale(4.64333, 33.8857);">
+  <rect fill="#FAD400" x="3.8170731707317076" y="8.5" width="7" height="18">
+    <animate attributeName="y" values="12.489649024107809;8.5;12.489649024107809" dur="1.7371767380377356s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="10.020701951784382;18;10.020701951784382" dur="1.7371767380377356s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="11.134146341463415" y="11" width="7" height="13">
+    <animate attributeName="y" values="14.50479462111376;11;14.50479462111376" dur="2.150646602851556s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="5.990410757772478;13;5.990410757772478" dur="2.150646602851556s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="18.451219512195124" y="3.5" width="7" height="28">
+    <animate attributeName="y" values="4.1432322457607285;3.5;4.1432322457607285" dur="1.9674580011274339s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="26.713535508478543;28;26.713535508478543" dur="1.9674580011274339s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="25.76829268292683" y="9.5" width="7" height="16">
+    <animate attributeName="y" values="12.1291063648255;9.5;12.1291063648255" dur="2.0866524302543032s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="10.741787270349;16;10.741787270349" dur="2.0866524302543032s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="33.08536585365854" y="11.5" width="7" height="12">
+    <animate attributeName="y" values="14.868723497776367;11.5;14.868723497776367" dur="1.9540075415235314s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="5.262553004447265;12;5.262553004447265" dur="1.9540075415235314s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="40.40243902439025" y="9" width="7" height="17">
+    <animate attributeName="y" values="11.312293082979414;9;11.312293082979414" dur="1.6490684469429517s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="12.375413834041172;17;12.375413834041172" dur="1.6490684469429517s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="47.71951219512195" y="12" width="7" height="11">
+    <animate attributeName="y" values="12.479724077328662;12;12.479724077328662" dur="2.3849621641498366s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="10.040551845342675;11;10.040551845342675" dur="2.3849621641498366s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="55.03658536585366" y="13" width="7" height="9">
+    <animate attributeName="y" values="13.768706335369108;13;13.768706335369108" dur="1.5480273705586503s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="7.462587329261783;9;7.462587329261783" dur="1.5480273705586503s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="62.35365853658537" y="9" width="7" height="17">
+    <animate attributeName="y" values="17.474330361968345;9;17.474330361968345" dur="1.7748736928207105s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="0.051339276063309125;17;0.051339276063309125" dur="1.7748736928207105s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="69.67073170731707" y="11.5" width="7" height="12">
+    <animate attributeName="y" values="14.43678545709783;11.5;14.43678545709783" dur="2.3115516332116415s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="6.12642908580434;12;6.12642908580434" dur="2.3115516332116415s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="76.98780487804878" y="4" width="7" height="27">
+    <animate attributeName="y" values="11.36495870595566;4;11.36495870595566" dur="2.092521323911517s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="12.27008258808868;27;12.27008258808868" dur="2.092521323911517s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="84.3048780487805" y="9" width="7" height="17">
+    <animate attributeName="y" values="13.80484663215403;9;13.80484663215403" dur="2.3782686855278734s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="7.390306735691941;17;7.390306735691941" dur="2.3782686855278734s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="91.6219512195122" y="13" width="7" height="9">
+    <animate attributeName="y" values="15.791598362015636;13;15.791598362015636" dur="1.687549743557982s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="3.4168032759687286;9;3.4168032759687286" dur="1.687549743557982s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="98.9390243902439" y="8.5" width="7" height="18">
+    <animate attributeName="y" values="16.957938428218284;8.5;16.957938428218284" dur="1.6108455419112175s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="1.0841231435634295;18;1.0841231435634295" dur="1.6108455419112175s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="106.25609756097562" y="13" width="7" height="9">
+    <animate attributeName="y" values="13.301033167945585;13;13.301033167945585" dur="1.7758292458014888s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="8.39793366410883;9;8.39793366410883" dur="1.7758292458014888s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="113.57317073170732" y="8.5" width="7" height="18">
+    <animate attributeName="y" values="13.981288826687901;8.5;13.981288826687901" dur="1.7143195178967472s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="7.037422346624199;18;7.037422346624199" dur="1.7143195178967472s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="120.89024390243902" y="11" width="7" height="13">
+    <animate attributeName="y" values="15.539731254830206;11;15.539731254830206" dur="2.222740386271892s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="3.920537490339588;13;3.920537490339588" dur="2.222740386271892s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="128.20731707317074" y="11.5" width="7" height="12">
+    <animate attributeName="y" values="13.56922944287059;11.5;13.56922944287059" dur="1.755756116765689s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="7.861541114258821;12;7.861541114258821" dur="1.755756116765689s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="135.52439024390245" y="2.5" width="7" height="30">
+    <animate attributeName="y" values="12.480532383845375;2.5;12.480532383845375" dur="1.7356425245231268s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="10.03893523230925;30;10.03893523230925" dur="1.7356425245231268s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="142.84146341463415" y="9.5" width="7" height="16">
+    <animate attributeName="y" values="11.931634663889215;9.5;11.931634663889215" dur="2.1111733770809398s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="11.13673067222157;16;11.13673067222157" dur="2.1111733770809398s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="150.15853658536585" y="13.5" width="7" height="8">
+    <animate attributeName="y" values="15.764476998644938;13.5;15.764476998644938" dur="2.0285780613603364s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="3.4710460027101266;8;3.4710460027101266" dur="2.0285780613603364s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="157.47560975609755" y="10" width="7" height="15">
+    <animate attributeName="y" values="12.760453980094127;10;12.760453980094127" dur="1.615174296474167s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="9.479092039811746;15;9.479092039811746" dur="1.615174296474167s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="164.7926829268293" y="10.5" width="7" height="14">
+    <animate attributeName="y" values="16.15143525756067;10.5;16.15143525756067" dur="1.847960682235302s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="2.697129484878661;14;2.697129484878661" dur="1.847960682235302s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="172.109756097561" y="3.5" width="7" height="28">
+    <animate attributeName="y" values="16.374606225562758;3.5;16.374606225562758" dur="2.218334072988883s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="2.2507875488744835;28;2.2507875488744835" dur="2.218334072988883s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="179.4268292682927" y="2.5" width="7" height="30">
+    <animate attributeName="y" values="7.243326529019107;2.5;7.243326529019107" dur="1.5237630498057575s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="20.513346941961785;30;20.513346941961785" dur="1.5237630498057575s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="186.7439024390244" y="3.5" width="7" height="28">
+    <animate attributeName="y" values="5.374900390122772;3.5;5.374900390122772" dur="1.6858478329996411s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="24.250199219754457;28;24.250199219754457" dur="1.6858478329996411s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="194.0609756097561" y="10.5" width="7" height="14">
+    <animate attributeName="y" values="14.067423890151598;10.5;14.067423890151598" dur="2.06740399858901s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="6.865152219696805;14;6.865152219696805" dur="2.06740399858901s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="201.3780487804878" y="9" width="7" height="17">
+    <animate attributeName="y" values="13.704867185641083;9;13.704867185641083" dur="1.8182256145623714s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="7.590265628717834;17;7.590265628717834" dur="1.8182256145623714s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="208.69512195121953" y="12" width="7" height="11">
+    <animate attributeName="y" values="12.113047388337371;12;12.113047388337371" dur="2.344605576272745s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="10.77390522332526;11;10.77390522332526" dur="2.344605576272745s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="216.01219512195124" y="12.5" width="7" height="10">
+    <animate attributeName="y" values="14.74895774348461;12.5;14.74895774348461" dur="2.4357703210585675s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="5.5020845130307805;10;5.5020845130307805" dur="2.4357703210585675s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="223.32926829268294" y="10.5" width="7" height="14">
+    <animate attributeName="y" values="11.337429388165837;10.5;11.337429388165837" dur="2.257280226061432s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="12.325141223668323;14;12.325141223668323" dur="2.257280226061432s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="230.64634146341464" y="11.5" width="7" height="12">
+    <animate attributeName="y" values="17.15271016024779;11.5;17.15271016024779" dur="1.8250958311452106s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="0.6945796795044226;12;0.6945796795044226" dur="1.8250958311452106s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="237.96341463414635" y="12" width="7" height="11">
+    <animate attributeName="y" values="15.72528772804125;12;15.72528772804125" dur="1.5302615861202706s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="3.549424543917499;11;3.549424543917499" dur="1.5302615861202706s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="245.28048780487805" y="12.5" width="7" height="10">
+    <animate attributeName="y" values="16.45622586544628;12.5;16.45622586544628" dur="2.079210847967716s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="2.08754826910744;10;2.08754826910744" dur="2.079210847967716s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="252.59756097560978" y="4.5" width="7" height="26">
+    <animate attributeName="y" values="17.142736086839708;4.5;17.142736086839708" dur="1.8416285237993788s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="0.7145278263205812;26;0.7145278263205812" dur="1.8416285237993788s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="259.9146341463415" y="13" width="7" height="9">
+    <animate attributeName="y" values="15.842519593006104;13;15.842519593006104" dur="2.120600624905032s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="3.3149608139877915;9;3.3149608139877915" dur="2.120600624905032s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="267.2317073170732" y="14" width="7" height="7">
+    <animate attributeName="y" values="15.202955627634406;14;15.202955627634406" dur="1.7393307634337856s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="4.594088744731188;7;4.594088744731188" dur="1.7393307634337856s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="274.5487804878049" y="10.5" width="7" height="14">
+    <animate attributeName="y" values="13.708926508916964;10.5;13.708926508916964" dur="1.5275449327129411s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="7.582146982166073;14;7.582146982166073" dur="1.5275449327129411s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#FAD400" x="281.8658536585366" y="10.5" width="7" height="14">
+    <animate attributeName="y" values="15.63209643196394;10.5;15.63209643196394" dur="1.801221664684202s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="3.7358071360721166;14;3.7358071360721166" dur="1.801221664684202s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+  <rect fill="#00CED1" x="289.1829268292683" y="11.5" width="7" height="12">
+    <animate attributeName="y" values="12.474927833621306;11.5;12.474927833621306" dur="1.5270936847633303s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+    <animate attributeName="height" values="10.050144332757387;12;10.050144332757387" dur="1.5270936847633303s" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate7_1.svg b/src/assets/images/widget/decorate7_1.svg
new file mode 100644
index 0000000..81750dc
--- /dev/null
+++ b/src/assets/images/widget/decorate7_1.svg
@@ -0,0 +1,6 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="21px" height="20px">
+  <polyline stroke-width="4" fill="transparent" points="10, 0 19, 10 10, 20" stroke="#00CED1"></polyline>
+  <polyline stroke-width="2" fill="transparent" points="2, 0 11, 10 2, 20" stroke="#FAD400"></polyline>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate7_2.svg b/src/assets/images/widget/decorate7_2.svg
new file mode 100644
index 0000000..3ed58b2
--- /dev/null
+++ b/src/assets/images/widget/decorate7_2.svg
@@ -0,0 +1,6 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="21px" height="20px">
+  <polyline stroke-width="4" fill="transparent" points="11, 0 2, 10 11, 20" stroke="#00CED1"></polyline>
+  <polyline stroke-width="2" fill="transparent" points="19, 0 10, 10 19, 20" stroke="#FAD400"></polyline>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate8.svg b/src/assets/images/widget/decorate8.svg
new file mode 100644
index 0000000..50741d6
--- /dev/null
+++ b/src/assets/images/widget/decorate8.svg
@@ -0,0 +1,7 @@
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2104" height="1129">
+  <polyline stroke-width="2" fill="transparent" points="0, 0 30, 564.5" stroke="#00CED1"></polyline>
+  <polyline stroke-width="2" fill="transparent" points="20, 0 50, 564.5 2104, 564.5" stroke="#00CED1"></polyline>
+  <polyline fill="transparent" stroke-width="3" points="0, 1126, 200, 1126" stroke="#FAD400"></polyline>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/widget/decorate9.svg b/src/assets/images/widget/decorate9.svg
new file mode 100644
index 0000000..2788a77
--- /dev/null
+++ b/src/assets/images/widget/decorate9.svg
@@ -0,0 +1,74 @@
+<svg version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" style="transform: scale(21.04, 11.29);">
+  <defs>
+    <polygon id="decoration-9-polygon-26e8b308d360462fa403612bbd197d19" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"></polygon>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="transparent" stroke-width="10" stroke-dasharray="80, 100, 30, 100" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" repeatCount="indefinite"></animateTransform>
+  </circle>
+  <circle cx="50" cy="50" r="45" fill="transparent" stroke-width="6" stroke-dasharray="50, 66, 100, 66" stroke="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;-360 50 50" dur="3s" repeatCount="indefinite"></animateTransform>
+  </circle>
+  <circle cx="50" cy="50" r="38" fill="transparent" stroke="rgba(250,212,0,0.3)" stroke-width="1" stroke-dasharray="5, 1"></circle>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="#00CED1" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0.15s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="transparent" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0.3s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0.45s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="transparent" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0.6s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="#00CED1" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0.75s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="0.9s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="#00CED1" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.05s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="transparent" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.2s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.35s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="transparent">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.5s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.65s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.8s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" fill="transparent" stroke="#FAD400">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="1.95s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="2.1s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="2.25s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="transparent">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="2.4s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="2.55s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="transparent">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="2.7s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <use xlink:href="#decoration-9-polygon-26e8b308d360462fa403612bbd197d19" stroke="#FAD400" fill="#00CED1">
+    <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="3s" begin="2.85s" repeatCount="indefinite"></animateTransform>
+  </use>
+  <circle cx="50" cy="50" r="26" fill="transparent" stroke="rgba(250,212,0,0.3)" stroke-width="1" stroke-dasharray="5, 1"></circle>
+</svg>
\ No newline at end of file
diff --git a/src/views/bigscreenDesigner/designer/components/customUploadNew.vue b/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
new file mode 100644
index 0000000..89064df
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput">
+      <template slot="append">
+        <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i>
+        <!-- <input type="file" class="file" ref="files" @change="getImages" /> -->
+      </template>
+    </el-input>
+
+
+    <!-- 弹窗 -->
+    <el-dialog title="图库" :visible.sync="dialogVisible">
+      <el-upload class="upload-demo" :on-change="changeInput">
+        <el-button size="medium" type="info" icon="el-icon-upload2">点击上传</el-button>
+      </el-upload>
+      <div class="image-list">
+        <el-image class="image" v-for="url in urls" :key="url" :src="url" lazy></el-image>
+      </div>
+    </el-dialog>
+
+
+
+
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+export default {
+  name: 'custom-upload-new',
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    value: {
+      type: "",
+      default: ""
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false, // 弹窗状态
+      urls: [
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+      ],
+
+      requestUrl: process.env.BASE_API + "/file/upload",
+      headers: {
+        Authorization: getToken()
+      },
+      fileList: [],
+      uploadImgUrl: ""
+    };
+  },
+  created() {
+    this.uploadImgUrl = this.value;
+  },
+  methods: {
+    openDialog() {
+      console.log(12313123213)
+    },
+
+
+
+    getImages(el) {
+      let file = el.target.files[0];
+      let type = file.type.split("/")[0];
+      if (type === "image") {
+        this.upload(file);
+      } else {
+        this.$message.warn("只能上传图片格式");
+      }
+    },
+    upload(imgUrl) {
+      let that = this;
+      console.log(that.headers);
+      let formdata = new FormData();
+      formdata.append("file", imgUrl);
+      axios
+        .post(this.requestUrl, formdata, {
+          headers: that.headers
+        })
+        .then(response => {
+          let res = response.data;
+          if (res.code == "200") {
+            that.uploadImgUrl = res.data.urlPath;
+            that.$emit("input", that.uploadImgUrl);
+            that.$emit("change", that.uploadImgUrl);
+          }
+        });
+    },
+    changeInput(e) {
+      if (e) {
+        this.uploadImgUrl = e;
+      } else {
+        this.$refs.files.value = "";
+        this.uploadImgUrl = "";
+      }
+      this.$emit("input", this.uploadImgUrl);
+      this.$emit("change", this.uploadImgUrl);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.file {
+  position: absolute;
+  width: 100%;
+  padding: 100%;
+  right: 0;
+  top: 0;
+  opacity: 0;
+}
+
+/deep/.el-input-group__append,
+/deep/.el-input-group__prepend {
+  padding: 0 10px !important;
+  overflow: hidden;
+}
+
+.iconfont {
+  cursor: pointer;
+  font-size: 12px;
+}
+
+
+/deep/ .el-dialog .el-dialog__header,
+/deep/ .el-dialog__body {
+  background: #1b1e25;
+}
+
+.image-list {
+  margin-top: 20px;
+  height: 50vh;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    background: #535353;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    /*滚动条里面轨道*/
+    border-radius: 10px;
+    background: #1b1e25;
+  }
+
+  .image {
+    width: 20%;
+  }
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
index 9544eca..c6773d8 100644
--- a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
+++ b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
@@ -60,6 +60,12 @@
               v-model="formData[item.name]"
               @change="val => changed(val, item.name)"
             />
+            
+            <CustomUploadNew v-if="item.type == 'custom-upload-new'"
+              v-model="formData[item.name]"
+              @change="changed($event, item.name)">
+            </CustomUploadNew>
+
             <customUpload
               v-if="item.type == 'custom-upload'"
               v-model="formData[item.name]"
@@ -276,6 +282,7 @@ import dynamicComponents from "./dynamicComponents.vue";
 import customColorComponents from "./customColorComponents";
 import dynamicAddTable from "./dynamicAddTable.vue";
 import customUpload from "./customUpload.vue";
+import CustomUploadNew from "./customUploadNew";
 export default {
   name: "DynamicForm",
   components: {
@@ -284,7 +291,8 @@ export default {
     dynamicComponents,
     customColorComponents,
     dynamicAddTable,
-    customUpload
+    customUpload,
+    CustomUploadNew
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue
index 0d0d9bd..1bcd8db 100644
--- a/src/views/bigscreenDesigner/designer/index.vue
+++ b/src/views/bigscreenDesigner/designer/index.vue
@@ -14,13 +14,13 @@
           <!-- <el-divider content-position="center">html</el-divider>-->
 
           <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#242f3b" text-color="#fff"
-            active-text-color="#ffd04b">
-            <el-submenu index="1">
+            active-text-color="#ffd04b" :default-openeds="['decorate', 'text']">
+            <el-submenu :index="group.groupType" v-for="group in widgetToolsGroup" :key="group.groupType">
               <template slot="title">
                 <i class="el-icon-location"></i>
-                <span>装饰</span>
+                <span>{{ group.groupName }}</span>
               </template>
-              <el-menu-item v-for="widget in widgetTools" :key="widget.code">
+              <el-menu-item v-for="widget in group.data" :key="widget.code">
                 <li draggable="true" @dragstart="dragStart(widget.code)" @dragend="dragEnd()">
                   <div class="tools-item">
                     <span class="tools-item-icon">
@@ -35,7 +35,6 @@
 
 
 
-
           <!-- <li v-for="widget in widgetTools" :key="widget.code" draggable="true" @dragstart="dragStart(widget.code)"
             @dragend="dragEnd()">
             <div class="tools-item">
@@ -182,7 +181,7 @@ import {
   importDashboard,
   exportDashboard
 } from "@/api/bigscreen";
-import { widgetTools, getToolByCode } from "./tools/index";
+import { widgetTools, getToolByCode, getWidgetToolsGroup } from "./tools/index";
 import widget from "./widget/widget.vue";
 import dynamicForm from "./components/dynamicForm.vue";
 import draggable from "vuedraggable";
@@ -270,7 +269,8 @@ export default {
       },
       visibleContentMenu: false,
       rightClickIndex: -1,
-      activeName: "first"
+      activeName: "first",
+      widgetToolsGroup: getWidgetToolsGroup(), // 组件分组
     };
   },
   computed: {
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-decorate.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-decorate.js
new file mode 100644
index 0000000..6bbf1e0
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-decorate.js
@@ -0,0 +1,90 @@
+/**
+ * 装饰json
+ */
+export const widgetDecorate = {
+  code: "widget-decorate",
+  type: "html",
+  label: "装饰",
+  icon: "icontupian1",
+  group: "decorate",
+  options: {
+    // 配置
+    setup: [
+      {
+        type: "el-input-text",
+        label: "图层名称",
+        name: "layerName",
+        required: false,
+        placeholder: "",
+        value: "装饰"
+      },
+      {
+        type: "el-select",
+        label: "装饰类型",
+        name: "decorateType",
+        required: false,
+        placeholder: "",
+        selectOptions: [
+          // { code: "div_Style_1", name: "装饰1_?" },
+          { code: "div_Style_2", name: "装饰1" },
+          // { code: "div_Style_3", name: "装饰3_?" },
+          { code: "div_Style_4", name: "装饰2" },
+          { code: "div_Style_5", name: "装饰3" },
+          // { code: "div_Style_6", name: "装饰6_?" },
+          { code: "div_Style_7", name: "装饰4" },
+          { code: "div_Style_8", name: "装饰5" },
+          // { code: "div_Style_9", name: "装饰9_?" },
+          { code: "div_Style_10", name: "装饰6" },
+          { code: "div_Style_11", name: "装饰7" },
+          { code: "div_Style_12", name: "装饰8" }
+        ],
+        value: "div_Style_11"
+      },
+      {
+        type: "el-input-text",
+        label: "标题",
+        name: "text",
+        required: false,
+        placeholder: "",
+        value: ""
+      },
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: "el-input-number",
+        label: "左边距",
+        name: "left",
+        required: false,
+        placeholder: "",
+        value: 0
+      },
+      {
+        type: "el-input-number",
+        label: "上边距",
+        name: "top",
+        required: false,
+        placeholder: "",
+        value: 0
+      },
+      {
+        type: "el-input-number",
+        label: "宽度",
+        name: "width",
+        required: false,
+        placeholder: "该容器在1920px大屏中的宽度",
+        value: 1000
+      },
+      {
+        type: "el-input-number",
+        label: "高度",
+        name: "height",
+        required: false,
+        placeholder: "该容器在1080px大屏中的高度",
+        value: 600
+      }
+    ]
+  }
+};
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js
index 47ba9a7..3ca8d92 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js
@@ -6,6 +6,7 @@ export const widgetDiv =  {
   type: 'html',
   label: '边框',
   icon: 'icontupian1',
+  group: 'decorate',
   options: {
     // 配置
     setup: [
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js
index 37fff15..b988c72 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js
@@ -11,6 +11,7 @@ export const widgetImage = {
     type: 'html',
     label: '图片',
     icon: 'icontupian',
+    group: 'decorate',
     options: {
       // 配置
       setup: [
@@ -55,7 +56,7 @@ export const widgetImage = {
           value: '0'
         },
         {
-          type: 'custom-upload',
+          type: 'custom-upload-new',
           label: '图片地址',
           name: 'imageAdress',
           required: false,
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js
index 151ed62..a905068 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-marquee.js
@@ -11,6 +11,7 @@ export const widgetMarquee = {
     type: 'html',
     label: '滚动文本',
     icon: 'iconhengxiangwenzi',
+    type: 'text',
     options: {
       // 配置
       setup: [
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js
index ee0cb1a..c1bbfdb 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-table.js
@@ -11,6 +11,7 @@ export const widgetTable = {
     type: 'html',
     label: '表格',
     icon: 'iconbiaoge',
+    group: 'grid',
     options: {
       setup: [
         {
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js
index 4431e61..eeaa7c4 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-text.js
@@ -11,6 +11,7 @@ export const widgetText =  {
     type: 'html',
     label: '文本',
     icon: 'iconziyuan',
+    type: 'text',
     options: {
       // 配置
       setup: [
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js
index d9089f8..51cc397 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-video.js
@@ -11,6 +11,7 @@ export const widgetVideo =  {
     type: 'html',
     label: '视频',
     icon: 'iconshipin',
+    group: 'media',
     options: {
       // 配置
       setup: [
diff --git a/src/views/bigscreenDesigner/designer/tools/index.js b/src/views/bigscreenDesigner/designer/tools/index.js
index ebfd230..ca0eb4d 100644
--- a/src/views/bigscreenDesigner/designer/tools/index.js
+++ b/src/views/bigscreenDesigner/designer/tools/index.js
@@ -82,12 +82,70 @@ const getToolByCode = function(code) {
 };
 console.log(widgetTools);
 
-const widgetToolsGroup = () => {
-  let chartGroup = [];
+const getWidgetToolsGroup = () => {
+  let [
+    chartGroup,
+    decorateGroup,
+    textGroup,
+    gridGroup,
+    mediaGroup,
+    otherGroup
+  ] = [[], [], [], [], [], []];
 
   for (const item of widgetTools) {
-    
+    switch (item.group || item.type) {
+      case "chart":
+        chartGroup.push(item);
+        break;
+      case "decorate":
+        decorateGroup.push(item);
+        break;
+      case "text":
+        textGroup.push(item);
+        break;
+      case "grid":
+        gridGroup.push(item);
+        break;
+      case "media":
+        mediaGroup.push(item);
+        break;
+      default:
+        otherGroup.push(item);
+        break;
+    }
   }
-
+  return [
+    {
+      groupType: "chart",
+      groupName: "图表",
+      data: chartGroup
+    },
+    {
+      groupType: "decorate",
+      groupName: "装饰",
+      data: decorateGroup
+    },
+    {
+      groupType: "text",
+      groupName: "文字",
+      data: textGroup
+    },
+    {
+      groupType: "grid",
+      groupName: "表格",
+      data: gridGroup
+    },
+    {
+      groupType: "media",
+      groupName: "媒体",
+      data: mediaGroup
+    },
+    {
+      groupType: "other",
+      groupName: "其他",
+      data: otherGroup
+    }
+  ];
 };
-export { widgetTools, getToolByCode, widgetToolsGroup };
+
+export { widgetTools, getToolByCode, getWidgetToolsGroup };
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 3e0208b..ff224df 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -37,6 +37,7 @@ import {widgetDecoratePie} from "./configure/widget-decorate-pie";
 import {widgetMoreBarLine} from "./configure/widget-more-bar-line";
 import {widgetWordCloud} from "./configure/widget-word-cloud";
 import {widgetHeatmap} from "./configure/widget-heatmap";
+import {widgetDecorate} from "./configure/widget-decorate";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -69,5 +70,6 @@ export const widgetTool = [
   widgetDecoratePie,
   widgetMoreBarLine,
   widgetWordCloud,
-  widgetHeatmap
+  widgetHeatmap,
+  widgetDecorate
 ]
diff --git a/src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue b/src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue
new file mode 100644
index 0000000..11d13a4
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue
@@ -0,0 +1,163 @@
+<!-- 
+  decorate 图层
+-->
+<template>
+  <div :style="styleColor">
+    <div :class="['div_Style', 'div_Style_7']" v-if="styleColor.divClass === 'div_Style_7'">
+      <div class="div_Style_7_1"></div>
+      <div class="text">{{ styleColor.text }}</div>
+      <div class="div_Style_7_2"></div>
+    </div>
+    <div :class="['div_Style', styleColor.divClass]" v-else>
+      <div class="text" v-if="styleColor.divClass === 'div_Style_11'">{{ styleColor.text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'widget-decorate',
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {},
+      optionsData: {},
+    };
+  },
+  computed: {
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+    styleColor() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        color: this.transStyle.colorOne,
+        text: this.transStyle.text,
+        divClass:
+          this.transStyle.decorateType == undefined
+            ? "div_Style_1"
+            : this.transStyle.decorateType,
+        background: this.transStyle.background,
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        left: this.transStyle.left + "px",
+        top: this.transStyle.top + "px",
+        right: this.transStyle.right + "px",
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.options = this.value;
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.div_Style {
+  width: 100%;
+  height: 100%;
+}
+
+.div_Style_1 {
+  background: url("../../../../../assets/images/widget/decorate1.svg") center no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_2 {
+  background: url("../../../../../assets/images/widget/decorate2.svg") center no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_3 {
+  background: url("../../../../../assets/images/widget/decorate3.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_4 {
+  background: url("../../../../../assets/images/widget/decorate4.svg") center no-repeat;
+  background-size: 10px 100%;
+}
+
+.div_Style_5 {
+  background: url("../../../../../assets/images/widget/decorate5.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_6 {
+  background: url("../../../../../assets/images/widget/decorate6.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_7 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .text {
+    color: #E8E9EA;
+    font-size: 1.5em;
+  }
+}
+
+.div_Style_7_1 {
+  width: 20px;
+  height: 20px;
+  background: url("../../../../../assets/images/widget/decorate7_1.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_7_2 {
+  width: 20px;
+  height: 20px;
+  background: url("../../../../../assets/images/widget/decorate7_2.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_8 {
+  height: 100%;
+  background: url("../../../../../assets/images/widget/decorate8.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_9 {
+  background: url("../../../../../assets/images/widget/decorate9.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_10 {
+  width: 100%;
+  background: url("../../../../../assets/images/widget/decorate10.svg") center no-repeat;
+  background-size: 100% auto;
+}
+
+.div_Style_11 {
+  width: 100%;
+  background: url("../../../../../assets/images/widget/decorate11.svg") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .text {
+    color: #E8E9EA;
+    font-size: 1.5em;
+  }
+}
+
+.div_Style_12 {
+  background: url("../../../../../assets/images/widget/decorate12.svg") no-repeat;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index 7928495..1ed879e 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -51,6 +51,7 @@ import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
 import widgetWordCloud from "./wordcloud/widgetWordCloud";
 import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetDiv from "./div/widgetDiv"
+import widgetDecorate from "./decorate/decorate"
 
 export default {
   name: "Widget",
@@ -83,7 +84,8 @@ export default {
     widgetMoreBarLineChart,
     widgetWordCloud,
     widgetHeatmap,
-    widgetDiv
+    widgetDiv,
+    widgetDecorate
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/widgetImage.vue b/src/views/bigscreenDesigner/designer/widget/widgetImage.vue
index 16794c4..b23bc24 100644
--- a/src/views/bigscreenDesigner/designer/widget/widgetImage.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widgetImage.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="imagebox" :style="styleColor">
-    <img
-      :class="transStyle.startRotate ? 'startImg' : ''"
-      :style="imgStyle"
-      :src="imgStyle.imageAdress"
-      alt=""
-    />
+    <div class="bg"></div>
+    <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt="" />
   </div>
 </template>
 <script>
@@ -42,7 +38,7 @@ export default {
         imageAdress: this.transStyle.imageAdress,
         "border-radius": this.transStyle.borderRadius + "px",
         opacity: this.transStyle.transparency / 100,
-        animation: this.transStyle.startRotate? "turn "+(101-this.transStyle.rotationSpeed)/10+"s linear infinite":"none"
+        animation: this.transStyle.startRotate ? "turn " + (101 - this.transStyle.rotationSpeed) / 10 + "s linear infinite" : "none"
       };
     }
   },
@@ -57,7 +53,7 @@ export default {
   created() {
     this.options = this.value;
   },
-  mounted() {},
+  mounted() { },
   methods: {}
 };
 </script>
@@ -67,13 +63,26 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  position: relative;
+
+  .bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url(data:image/png;base64,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) no-repeat;
+    background-size: 100% 100%;
+  }
 }
+
+
 .imagebox img {
   width: 100%;
   height: 100%;
 }
+
 .startImg {
   animation: turn 1s linear infinite;
 }
-
 </style>
--
libgit2 0.22.2