新增边框组件

zhangzzzz
1 parent c3320218
Showing 19 changed files with 922 additions and 309 deletions
src/assets/images/widget/div1.svg
src/assets/images/widget/div10.svg
src/assets/images/widget/div11.svg
src/assets/images/widget/div12.svg
src/assets/images/widget/div2.svg
src/assets/images/widget/div3.svg
src/assets/images/widget/div4.svg
src/assets/images/widget/div5.svg
src/assets/images/widget/div6.svg
src/assets/images/widget/div7.svg
src/assets/images/widget/div8.svg
src/assets/images/widget/div9.svg
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/configure/widget-div.js
src/views/bigscreenDesigner/designer/tools/index.js
src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue
src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue
src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" class="left-top border">
+  <polygon points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63" fill="#83bff6">
+    <animate attributeName="fill" values="#83bff6;#00CED1;#83bff6" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#00CED1">
+    <animate attributeName="fill" values="#00CED1;#83bff6;#00CED1" dur="0.5s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54" fill="#83bff6">
+    <animate attributeName="fill" values="#83bff6;#00CED1;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" class="left-top dv-border-svg-container">
+  <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" fill="#00CED1"></polygon>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2031" height="1297" class="dv-border-svg-container">
+  <defs>
+    <filter id="border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90" height="150%" width="150%" x="-25%" y="-25%">
+      <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken"></feMorphology>
+      <feGaussianBlur in="thicken" stdDeviation="3" result="blurred"></feGaussianBlur>
+      <feFlood result="glowColor" flood-color="#00CED1"></feFlood>
+      <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
+      <feMerge>
+        <feMergeNode in="softGlowColored"></feMergeNode>
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+  </defs>
+  <polygon fill="transparent" points="
+  20, 32 890.5, 32 910.5, 53
+  1120.5, 53 1140.5, 32
+  2011, 32 2023, 48 2023, 1272 2011, 1289
+  20, 1289 8, 1272 8, 50
+"></polygon>
+  <polyline filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
+    890.5, 30
+    20, 30 7, 50 7, 615
+    13, 620 13, 700
+    7, 705 7, 1270
+    20, 1290 2011, 1290 2024, 1270
+    2024, 705 2018, 700
+    2018, 620 2024, 615
+    2024, 50 2011, 30 1140.5, 30
+    1120.5, 7 910.5, 7
+    890.5, 30 910.5, 52
+    1120.5, 52 1140.5, 30
+  " stroke="#83bff6"></polyline>
+  <polygon fill="transparent" points="
+    1135.5, 30 1119.5, 11
+    1113.5, 11 1132.5, 34
+  " stroke="#83bff6"></polygon>
+  <polygon fill="transparent" points="
+    895.5, 30 912.5, 49
+    918.5, 49 898.5, 26
+  " stroke="#83bff6"></polygon>
+  <polygon fill="rgba(0,206,209,0.3)" filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
+    1129.5, 37 1108.5, 11
+    913.5, 11 901.5, 23
+    923.5, 49 1118.5, 49
+  " stroke="#83bff6"></polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="1" points="
+    880.5, 37 859.5, 37
+    865.5, 46 886.5, 46
+  " fill="#83bff6">
+    <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.7" points="
+    850.5, 37 829.5, 37
+    835.5, 46 856.5, 46
+  " fill="#83bff6">
+    <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.5" points="
+    820.5, 37 799.5, 37
+    805.5, 46 826.5, 46
+  " fill="#83bff6">
+    <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="1" points="
+    1170.5, 37 1149.5, 37
+    1143.5, 46 1164.5, 46
+  " fill="#83bff6">
+    <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.7" points="
+    1200.5, 37 1179.5, 37
+    1173.5, 46 1194.5, 46
+  " fill="#83bff6">
+    <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" opacity="0.5" points="
+    1230.5, 37 1209.5, 37
+    1203.5, 46 1224.5, 46
+  " fill="#83bff6">
+    <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+  </polygon>
+  <text x="1015.5" y="32" fill="#fff" font-size="18" text-anchor="middle" dominant-baseline="middle" class="dv-border-box-11-title">  </text>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
+    7, 618 11, 622
+    11, 698 7, 702
+  " fill="#83bff6"></polygon>
+  <polygon filter="url(#border-box-11-filterId-9e10ba00f15c47168cdd79131ad04c90)" points="
+    2024, 618 2020, 622
+    2020, 698 2024, 702
+  " fill="#83bff6"></polygon>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="2071" height="1531" class="dv-border-svg-container">
+  <defs>
+    <filter id="borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54" height="150%" width="150%" x="-25%" y="-25%">
+      <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken"></feMorphology>
+      <feGaussianBlur in="thicken" stdDeviation="2" result="blurred"></feGaussianBlur>
+      <feFlood flood-color="rgba(0,206,209,0.7)" result="glowColor">
+        <animate attributeName="flood-color" values="
+  rgba(0,206,209,0.7);
+  rgba(0,206,209,0.3);
+  rgba(0,206,209,0.7);
+" dur="3s" begin="0s" repeatCount="indefinite"></animate>
+      </feFlood>
+      <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
+      <feMerge>
+        <feMergeNode in="softGlowColored"></feMergeNode>
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+  </defs>
+  <path fill="transparent" stroke-width="2" stroke="#83bff6" d="
+M15 5 L 2056 5 Q 2066 5, 2066 15
+L 2066 1516 Q 2066 1526, 2056 1526
+L 15, 1526 Q 5 1526 5 1516 L 5 15
+Q 5 5 15 5
+"></path>
+  <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="M 20 5 L 15 5 Q 5 5 5 15 L 5 20" stroke="#00CED1"></path>
+  <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="M 2051 5 L 2056 5 Q 2066 5 2066 15 L 2066 20" stroke="#00CED1"></path>
+  <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="
+M 2051 1526 L 2056 1526
+Q 2066 1526 2066 1516
+L 2066 1511
+" stroke="#00CED1"></path>
+  <path stroke-width="2" fill="transparent" stroke-linecap="round" filter="url(#borderr-box-12-filterId-5d013e65635a417398391ebc6dd90c54)" d="
+M 20 1526 L 15 1526
+Q 5 1526 5 1516
+L 5 1511
+" stroke="#00CED1"></path>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2661" height="1737" class="dv-border-svg-container">
+  <polygon fill="transparent" points="
+      7, 7 2654, 7 2654, 1730 7, 1730
+    "></polygon>
+  <polyline points="2, 2 2659 ,2 2659, 1735 2, 1735 2, 2" stroke="#83bff6"></polyline>
+  <polyline points="6, 6 2655, 6 2655, 1731 6, 1731 6, 6" stroke="#00CED1"></polyline>
+  <circle cx="11" cy="11" r="1" fill="#83bff6"></circle>
+  <circle cx="2650" cy="11" r="1" fill="#83bff6"></circle>
+  <circle cx="2650" cy="1726" r="1" fill="#83bff6"></circle>
+  <circle cx="11" cy="1726" r="1" fill="#83bff6"></circle>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2058" height="1402" class="dv-border-svg-container">
+  <polygon fill="transparent" points="
+  23, 23 2034, 23 2034, 1378 23, 1378
+"></polygon>
+  <polyline points="4, 4 2036 ,4 2036, 1380 4, 1380 4, 4" class="dv-bb3-line1" stroke="#83bff6"></polyline>
+  <polyline points="10, 10 2042, 10 2042, 1386 10, 1386 10, 10" class="dv-bb3-line2" stroke="#00CED1"></polyline>
+  <polyline points="16, 16 2048, 16 2048, 1392 16, 1392 16, 16" class="dv-bb3-line2" stroke="#00CED1"></polyline>
+  <polyline points="22, 22 2054, 22 2054, 1398 22, 1398 22, 22" class="dv-bb3-line2" stroke="#00CED1"></polyline>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" fill="transparent" width="1770" height="1483" class="dv-border-svg-container false">
+  <polygon fill="transparent" points="
+  1755, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+  16, 42 16, 1451 41, 1476 1755, 1476
+"></polygon>
+  <polyline points="145, 1478 40, 1478 10, 1448
+    10, 40 40, 5 150, 5 170, 20 1755, 20" class="dv-bb4-line-1" stroke="#83bff6"></polyline>
+  <polyline points="245, 1482 36, 1482 14, 1460
+    14, 1383" class="dv-bb4-line-2" stroke="#00CED1"></polyline>
+  <polyline points="7, 1443 7, 1408" class="dv-bb4-line-3" stroke="#83bff6"></polyline>
+  <polyline points="28, 24 13, 41 13, 64" class="dv-bb4-line-4" stroke="#83bff6"></polyline>
+  <polyline points="5, 45 5, 140" class="dv-bb4-line-5" stroke="#83bff6"></polyline>
+  <polyline points="14, 75 14, 180" class="dv-bb4-line-6" stroke="#00CED1"></polyline>
+  <polyline points="55, 11 147, 11 167, 26 250, 26" class="dv-bb4-line-7" stroke="#00CED1"></polyline>
+  <polyline points="158, 5 173, 16" class="dv-bb4-line-8" stroke="#00CED1"></polyline>
+  <polyline points="200, 17 1760, 17" class="dv-bb4-line-9" stroke="#83bff6"></polyline>
+  <polyline points="385, 17 1760, 17" class="dv-bb4-line-10" stroke="#00CED1"></polyline>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2156" height="1690" class="dv-border-svg-container  false">
+  <polygon fill="transparent" points="
+  10, 22 2134, 22 2134, 1604 2072, 1666 10, 1666
+"></polygon>
+  <polyline points="8, 5 2151, 5 2151, 1590
+    2056, 1685 8, 1685 8, 5" class="dv-bb5-line-1" stroke="#83bff6"></polyline>
+  <polyline points="3, 5 2136, 5 2136, 1630
+    2082, 1685 3, 1685 3, 5" class="dv-bb5-line-2" stroke="#00CED1"></polyline>
+  <polyline points="50, 13 2121, 13" class="dv-bb5-line-3" stroke="#00CED1"></polyline>
+  <polyline points="15, 20 2121, 20" class="dv-bb5-line-4" stroke="#00CED1"></polyline>
+  <polyline points="15, 1670 2046, 1670" class="dv-bb5-line-5" stroke="#00CED1"></polyline>
+  <polyline points="15, 1677 2046, 1677" class="dv-bb5-line-6" stroke="#00CED1"></polyline>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" fill="transparent" width="1854" height="1242" class="dv-border-svg-container">
+  <polygon fill="transparent" points="
+  9, 7 1845, 7 1845, 1235 9, 1235
+"></polygon>
+  <circle cx="5" cy="5" r="2" fill="#00CED1"></circle>
+  <circle cx="1849" cy="5" r="2" fill="#00CED1"></circle>
+  <circle cx="1849" cy="1237" r="2" fill="#00CED1"></circle>
+  <circle cx="5" cy="1237" r="2" fill="#00CED1"></circle>
+  <polyline points="10, 4 1844, 4" stroke="#83bff6"></polyline>
+  <polyline points="10, 1238 1844, 1238" stroke="#83bff6"></polyline>
+  <polyline points="5, 70 5, 1172" stroke="#83bff6"></polyline>
+  <polyline points="1849, 70 1849, 1172" stroke="#83bff6"></polyline>
+  <polyline points="3, 10, 3, 50" stroke="#83bff6"></polyline>
+  <polyline points="7, 30 7, 80" stroke="#83bff6"></polyline>
+  <polyline points="1851, 10 1851, 50" stroke="#83bff6"></polyline>
+  <polyline points="1847, 30 1847, 80" stroke="#83bff6"></polyline>
+  <polyline points="3, 1232 3, 1192" stroke="#83bff6"></polyline>
+  <polyline points="7, 1212 7, 1162" stroke="#83bff6"></polyline>
+  <polyline points="1851, 1232 1851, 1192" stroke="#83bff6"></polyline>
+  <polyline points="1847, 1212 1847, 1162" stroke="#83bff6"></polyline>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" fill="transparent" width="1851" height="1317" class="dv-border-svg-container">
+  <polyline points="0, 25 0, 0 25, 0" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
+  <polyline points="1826, 0 1851, 0 1851, 25" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
+  <polyline points="1826, 1317 1851, 1317 1851, 1292" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
+  <polyline points="0, 1292 0, 1317 25, 1317" class="dv-bb7-line-width-2" stroke="#83bff6"></polyline>
+  <polyline points="0, 10 0, 0 10, 0" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
+  <polyline points="1841, 0 1851, 0 1851, 10" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
+  <polyline points="1841, 1317 1851, 1317 1851, 1307" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
+  <polyline points="0, 1307 0, 1317 10, 1317" class="dv-bb7-line-width-5" stroke="#00CED1"></polyline>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="400" height="300" class="dv-border-svg-container">
+  <defs>
+    <path id="border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" d="M2.5, 2.5 L397.5, 2.5 L397.5, 297.5 L2.5, 297.5 L2.5, 2.5" fill="transparent"></path>
+    <radialGradient id="border-box-8-gradient-d017f380de6f4b6da8ef829d8d549ca5" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
+      <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
+    </radialGradient>
+    <mask id="border-box-8-mask-d017f380de6f4b6da8ef829d8d549ca5">
+      <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-d017f380de6f4b6da8ef829d8d549ca5)">
+        <animateMotion dur="3s" path="M2.5, 2.5 L397.5, 2.5 L397.5, 297.5 L2.5, 297.5 L2.5, 2.5" rotate="auto" repeatCount="indefinite"></animateMotion>
+      </circle>
+    </mask>
+  </defs>
+  <polygon fill="transparent" points="5, 5 395, 5 395 295 5, 295"></polygon>
+  <use stroke-width="1" xlink:href="#border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" stroke="#83bff6"></use>
+  <use stroke-width="3" xlink:href="#border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" mask="url(#border-box-8-mask-d017f380de6f4b6da8ef829d8d549ca5)" stroke="#00CED1">
+    <animate attributeName="stroke-dasharray" from="0, 1390" to="1390, 0" dur="3s" repeatCount="indefinite"></animate>
+  </use>
+</svg>
 \ No newline at end of file
+<svg version="1.1"
+  baseProfile="full"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="1715" height="1351" class="dv-border-svg-container">
+  <defs>
+    <linearGradient id="border-box-9-gradient-c5735993b5bc4fd6a14a3883485a32d3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <animate attributeName="x1" values="0%;100%;0%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+      <animate attributeName="x2" values="100%;0%;100%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+      <stop offset="0%" stop-color="#83bff6">
+        <animate attributeName="stop-color" values="#83bff6;#00CED1;#83bff6" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+      </stop>
+      <stop offset="100%" stop-color="#00CED1">
+        <animate attributeName="stop-color" values="#00CED1;#83bff6;#00CED1" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+      </stop>
+    </linearGradient>
+    <mask id="border-box-9-mask-c5735993b5bc4fd6a14a3883485a32d3">
+      <polyline stroke="#fff" stroke-width="3" fill="transparent" points="8, 540.4 8, 3, 693, 3"></polyline>
+      <polyline fill="#fff" points="8, 202.65 8, 3, 178.5, 3
+  171.5, 8 14, 8 14, 195.65
+"></polyline>
+      <polyline stroke="#fff" stroke-width="3" fill="transparent" points="857.5, 3 1712, 3, 1712, 337.75"></polyline>
+      <polyline fill="#fff" points="
+  891.8000000000001, 3 994.6999999999999, 3
+  987.6999999999999, 9 898.8000000000001, 9
+"></polyline>
+      <polyline fill="#fff" points="
+  1543.5, 3 1712, 3 1712, 135.1
+  1706, 128.1 1706, 9 1550.5, 9
+"></polyline>
+      <polyline stroke="#fff" stroke-width="3" fill="transparent" points="8, 675.5 8, 1348 521.5, 1348"></polyline>
+      <polyline fill="#fff" points="
+  8, 743.0500000000001 8, 945.6999999999999
+  2, 938.6999999999999 2, 750.0500000000001
+"></polyline>
+      <polyline stroke="#fff" stroke-width="3" fill="transparent" points="600.25, 1348 1712, 1348 1712, 472.84999999999997"></polyline>
+      <polyline fill="#fff" points="
+  1577.8000000000002, 1348 1712, 1348 1712, 1080.8
+  1706, 1087.8 1706, 1342 1584.8000000000002, 1342
+"></polyline>
+    </mask>
+  </defs>
+  <polygon fill="transparent" points="
+15, 9 172.5, 9 175.5, 6 893.8000000000001, 6
+897.8000000000001, 10 987.6999999999999, 10 992.6999999999999, 6
+1545.5, 6 1549.5, 10 1705, 10 1705, 129.1
+1709, 134.1 1709, 1081.8 1705, 1086.8
+1705, 1341 1584.8000000000002, 1341  1579.8000000000002, 1345
+11, 1345 11, 200.65 15, 195.65
+"></polygon>
+  <rect x="0" y="0" width="1715" height="1351" fill="url(#border-box-9-gradient-c5735993b5bc4fd6a14a3883485a32d3)" mask="url(#border-box-9-mask-c5735993b5bc4fd6a14a3883485a32d3)"></rect>
+</svg>
 \ No newline at end of file
@@ -7,45 +7,51 @@
  !-->
 <template>
   <div class="layout">
-    <div
-      v-if="toolIsShow"
-      class="layout-left"
-      :style="{ width: widthLeftForTools + 'px' }"
-    >
-      <el-tabs type="border-card" :stretch="true">
+    <div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }">
+      <el-tabs type="border-card" :stretch="true" class="border-card">
         <!-- 左侧组件栏-->
-        <el-tab-pane label="工具栏">
+        <el-tab-pane label="工具栏" class="toolBar">
           <!-- <el-divider content-position="center">html</el-divider>-->
-          <li
-            v-for="widget in widgetTools"
-            :key="widget.code"
-            draggable="true"
-            @dragstart="dragStart(widget.code)"
-            @dragend="dragEnd()"
-          >
+
+          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#242f3b" text-color="#fff"
+            active-text-color="#ffd04b">
+            <el-submenu index="1">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span>装饰</span>
+              </template>
+              <el-menu-item v-for="widget in widgetTools" :key="widget.code">
+                <li draggable="true" @dragstart="dragStart(widget.code)" @dragend="dragEnd()">
+                  <div class="tools-item">
+                    <span class="tools-item-icon">
+                      <i class="iconfont" :class="widget.icon"></i>
+                    </span>
+                    <span class="tools-item-text">{{ widget.label }}</span>
+                  </div>
+                </li>
+              </el-menu-item>
+            </el-submenu>
+          </el-menu>
+
+
+
+
+          <!-- <li v-for="widget in widgetTools" :key="widget.code" draggable="true" @dragstart="dragStart(widget.code)"
+            @dragend="dragEnd()">
             <div class="tools-item">
               <span class="tools-item-icon">
                 <i class="iconfont" :class="widget.icon"></i>
               </span>
               <span class="tools-item-text">{{ widget.label }}</span>
             </div>
-          </li>
+          </li> -->
         </el-tab-pane>
         <!-- 左侧图层-->
         <el-tab-pane label="图层">
-          <draggable
-            v-model="layerWidget"
-            @update="datadragEnd"
-            :options="{ animation: 300 }"
-          >
+          <draggable v-model="layerWidget" @update="datadragEnd" :options="{ animation: 300 }">
             <transition-group>
-              <div
-                v-for="(item, index) in layerWidget"
-                :key="'item' + index"
-                class="tools-item"
-                :class="widgetIndex == index ? 'is-active' : ''"
-                @click="layerClick(index)"
-              >
+              <div v-for="(item, index) in layerWidget" :key="'item' + index" class="tools-item"
+                :class="widgetIndex == index ? 'is-active' : ''" @click="layerClick(index)">
                 <span class="tools-item-icon">
                   <i class="iconfont" :class="item.icon"></i>
                 </span>
@@ -57,80 +63,40 @@
       </el-tabs>
     </div>
  
-    <div
-      class="layout-left-fold"
-      :style="{ width: widthLeftForToolsHideButton + 'px' }"
-      @click="toolIsShow = !toolIsShow"
-    >
+    <div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }"
+      @click="toolIsShow = !toolIsShow">
       <i class="el-icon-arrow-right" />
     </div>
  
-    <div
-      class="layout-middle"
-      :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"
-    >
+    <div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
       <div class="top-button">
         <span class="btn">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="保存"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
             <i class="iconfont iconsave" @click="saveData"></i>
           </el-tooltip>
         </span>
         <span class="btn">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="预览"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" content="预览" placement="bottom">
             <i class="iconfont iconyulan" @click="viewScreen"></i>
           </el-tooltip>
         </span>
  
         <span class="btn">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="撤销"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" content="撤销" placement="bottom">
             <i class="iconfont iconundo" @click="handleUndo"></i>
           </el-tooltip>
         </span>
  
         <span class="btn">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="恢复"
-            placement="bottom"
-          >
+          <el-tooltip class="item" effect="dark" content="恢复" placement="bottom">
             <i class="iconfont iconhuifubeifen" @click="handleRedo"></i>
           </el-tooltip>
         </span>
  
         <span class="btn" v-permission="'bigScreenManage:export'">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="导入"
-            placement="bottom"
-          >
-            <el-upload
-              class="el-upload"
-              ref="upload"
-              :action="uploadUrl"
-              :headers="headers"
-              accept=".zip"
-              :on-success="handleUpload"
-              :on-error="handleError"
-              :show-file-list="false"
-              :limit="1"
-            >
+          <el-tooltip class="item" effect="dark" content="导入" placement="bottom">
+            <el-upload class="el-upload" ref="upload" :action="uploadUrl" :headers="headers" accept=".zip"
+              :on-success="handleUpload" :on-error="handleError" :show-file-list="false" :limit="1">
               <i class="iconfont icondaoru"></i>
             </el-upload>
           </el-tooltip>
@@ -138,26 +104,15 @@
         <span class="btn border-left" v-permission="'bigScreenManage:import'">
           <ul class="nav">
             <li>
-              <i class="iconfont icondaochu"></i
-              ><i class="el-icon-arrow-down"></i>
+              <i class="iconfont icondaochu"></i><i class="el-icon-arrow-down"></i>
               <ul>
                 <li>
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    content="适合当前系统"
-                    placement="right"
-                  >
+                  <el-tooltip class="item" effect="dark" content="适合当前系统" placement="right">
                     <div @click="exportDashboard(1)">导出(包含数据集)</div>
                   </el-tooltip>
                 </li>
                 <li>
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    content="适合跨系统"
-                    placement="right"
-                  >
+                  <el-tooltip class="item" effect="dark" content="适合跨系统" placement="right">
                     <div @click="exportDashboard(0)">导出(不包含数据集)</div>
                   </el-tooltip>
                 </li>
@@ -166,58 +121,30 @@
           </ul>
         </span>
       </div>
-      <div
-        class="workbench-container"
-        :style="{
-          width: bigscreenWidthInWorkbench + 'px',
-          height: bigscreenHeightInWorkbench + 'px'
-        }"
-        @mousedown="handleMouseDown"
-      >
-        <vue-ruler-tool
-          v-model="dashboard.presetLine"
-          class="vueRuler"
-          :step-length="50"
-          :parent="true"
-          :position="'relative'"
-          :is-scale-revise="true"
-          :visible.sync="dashboard.presetLineVisible"
-        >
-          <div
-            id="workbench"
-            class="workbench"
-            :style="{
-              transform: workbenchTransform,
-              width: bigscreenWidth + 'px',
-              height: bigscreenHeight + 'px',
-              'background-color': dashboard.backgroundColor,
-              'background-image': 'url(' + dashboard.backgroundImage + ')',
-              'background-position': '0% 0%',
-              'background-size': '100% 100%',
-              'background-repeat': 'initial',
-              'background-attachment': 'initial',
-              'background-origin': 'initial',
-              'background-clip': 'initial'
-            }"
-            @click.self="setOptionsOnClickScreen"
-            @drop="widgetOnDragged($event)"
-            @dragover="dragOver($event)"
-          >
+      <div class="workbench-container" :style="{
+        width: bigscreenWidthInWorkbench + 'px',
+        height: bigscreenHeightInWorkbench + 'px'
+      }" @mousedown="handleMouseDown">
+        <vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true"
+          :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible">
+          <div id="workbench" class="workbench" :style="{
+            transform: workbenchTransform,
+            width: bigscreenWidth + 'px',
+            height: bigscreenHeight + 'px',
+            'background-color': dashboard.backgroundColor,
+            'background-image': 'url(' + dashboard.backgroundImage + ')',
+            'background-position': '0% 0%',
+            'background-size': '100% 100%',
+            'background-repeat': 'initial',
+            'background-attachment': 'initial',
+            'background-origin': 'initial',
+            'background-clip': 'initial'
+          }" @click.self="setOptionsOnClickScreen" @drop="widgetOnDragged($event)" @dragover="dragOver($event)">
             <div v-if="grade" class="bg-grid"></div>
-            <widget
-              ref="widgets"
-              v-for="(widget, index) in widgets"
-              :key="index"
-              v-model="widget.value"
-              :index="index"
-              :step="step"
-              :type="widget.type"
-              :bigscreen="{ bigscreenWidth, bigscreenHeight }"
-              @onActivated="setOptionsOnClickWidget"
-              @contextmenu.prevent.native="rightClick($event, index)"
-              @mousedown.prevent.native="widgetsClick(index)"
-              @mouseup.prevent.native="widgetsMouseup"
-            />
+            <widget ref="widgets" v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :index="index"
+              :step="step" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }"
+              @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)"
+              @mousedown.prevent.native="widgetsClick(index)" @mouseup.prevent.native="widgetsMouseup" />
           </div>
         </vue-ruler-tool>
       </div>
@@ -225,54 +152,26 @@
  
     <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
       <el-tabs v-model="activeName" type="border-card" :stretch="true">
-        <el-tab-pane
-          v-if="
-            isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
-          "
-          name="first"
-          label="配置"
-        >
-          <dynamicForm
-            ref="formData"
-            :options="widgetOptions.setup"
-            @onChanged="val => widgetValueChanged('setup', val)"
-          />
+        <el-tab-pane v-if="
+          isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
+        " name="first" label="配置">
+          <dynamicForm ref="formData" :options="widgetOptions.setup"
+            @onChanged="val => widgetValueChanged('setup', val)" />
         </el-tab-pane>
-        <el-tab-pane
-          v-if="isNotNull(widgetOptions.data)"
-          name="second"
-          label="数据"
-        >
-          <dynamicForm
-            ref="formData"
-            :options="widgetOptions.data"
-            @onChanged="val => widgetValueChanged('data', val)"
-          />
+        <el-tab-pane v-if="isNotNull(widgetOptions.data)" name="second" label="数据">
+          <dynamicForm ref="formData" :options="widgetOptions.data"
+            @onChanged="val => widgetValueChanged('data', val)" />
         </el-tab-pane>
-        <el-tab-pane
-          v-if="isNotNull(widgetOptions.position)"
-          name="third"
-          label="坐标"
-        >
-          <dynamicForm
-            ref="formData"
-            :options="widgetOptions.position"
-            @onChanged="val => widgetValueChanged('position', val)"
-          />
+        <el-tab-pane v-if="isNotNull(widgetOptions.position)" name="third" label="坐标">
+          <dynamicForm ref="formData" :options="widgetOptions.position"
+            @onChanged="val => widgetValueChanged('position', val)" />
         </el-tab-pane>
       </el-tabs>
     </div>
  
-    <content-menu
-      :visible.sync="visibleContentMenu"
-      :style-obj="styleObj"
-      @deletelayer="deletelayer"
-      @copylayer="copylayer"
-      @istopLayer="istopLayer"
-      @setlowLayer="setlowLayer"
-      @moveupLayer="moveupLayer"
-      @movedownLayer="movedownLayer"
-    />
+    <content-menu :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer"
+      @copylayer="copylayer" @istopLayer="istopLayer" @setlowLayer="setlowLayer" @moveupLayer="moveupLayer"
+      @movedownLayer="movedownLayer" />
   </div>
 </template>
  
@@ -407,9 +306,8 @@ export default {
       return Math.min(widthScale, heightScale);
     },
     workbenchTransform() {
-      return `scale(${this.bigscreenScaleInWorkbench}, ${
-        this.bigscreenScaleInWorkbench
-      })`;
+      return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench
+        })`;
     },
     // 大屏在设计模式的大小
     bigscreenWidthInWorkbench() {
@@ -616,7 +514,7 @@ export default {
         if (type == "application/json") {
           let reader = new FileReader();
           reader.readAsText(res, "utf-8");
-          reader.onload = function() {
+          reader.onload = function () {
             const data = JSON.parse(reader.result);
             that.$message.error(data.message);
           };
@@ -1021,8 +919,8 @@ export default {
         border: 1px solid #3a4659;
         background: #282a30;
       }
-      .tools-item-text {
-      }
+
+      .tools-item-text {}
     }
   }
  
@@ -1076,10 +974,14 @@ export default {
  
         .el-icon-arrow-down {
           transform: rotate(0deg);
-          -ms-transform: rotate(0deg); /* IE 9 */
-          -moz-transform: rotate(0deg); /* Firefox */
-          -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
-          -o-transform: rotate(0deg); /* Opera */
+          -ms-transform: rotate(0deg);
+          /* IE 9 */
+          -moz-transform: rotate(0deg);
+          /* Firefox */
+          -webkit-transform: rotate(0deg);
+          /* Safari 和 Chrome */
+          -o-transform: rotate(0deg);
+          /* Opera */
           transition: all 0.4s ease-in-out;
         }
  
@@ -1088,10 +990,14 @@ export default {
  
           .el-icon-arrow-down {
             transform: rotate(180deg);
-            -ms-transform: rotate(180deg); /* IE 9 */
-            -moz-transform: rotate(180deg); /* Firefox */
-            -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
-            -o-transform: rotate(180deg); /* Opera */
+            -ms-transform: rotate(180deg);
+            /* IE 9 */
+            -moz-transform: rotate(180deg);
+            /* Firefox */
+            -webkit-transform: rotate(180deg);
+            /* Safari 和 Chrome */
+            -o-transform: rotate(180deg);
+            /* Opera */
             transition: all 0.4s ease-in-out;
           }
         }
@@ -1132,10 +1038,8 @@ export default {
         width: 100%;
         height: 100%;
         background-size: 30px 30px, 30px 30px;
-        background-image: linear-gradient(
-            hsla(0, 0%, 100%, 0.1) 1px,
-            transparent 0
-          ),
+        background-image: linear-gradient(hsla(0, 0%, 100%, 0.1) 1px,
+            transparent 0),
           linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
         // z-index: 2;
       }
@@ -1255,13 +1159,13 @@ li {
   clear: both;
 }
  
-.nav > li {
+.nav>li {
   width: 55px;
   text-align: left;
   position: relative;
 }
  
-.nav > li a {
+.nav>li a {
   float: left;
   padding: 12px 30px;
   color: #999;
@@ -1269,11 +1173,11 @@ li {
   text-decoration: none;
 }
  
-.nav > li:hover {
+.nav>li:hover {
   color: #788994;
 }
  
-.nav > li ul {
+.nav>li ul {
   visibility: hidden;
   position: absolute;
   z-index: 1000;
@@ -1287,7 +1191,7 @@ li {
   transition: all 0.2s ease-in-out;
 }
  
-.nav > li:hover > ul {
+.nav>li:hover>ul {
   opacity: 1;
   visibility: visible;
   margin: 0;
@@ -1320,7 +1224,7 @@ li {
   border: 1px solid #3c5e88;
 }
  
-.nav ul li:first-child > a:hover:before {
+.nav ul li:first-child>a:hover:before {
   border-bottom-color: #04acec;
 }
  
@@ -1353,4 +1257,26 @@ li {
 /deep/ .vue-ruler-v {
   opacity: 0.3;
 }
+
+
+.border-card {
+  /deep/ .el-tabs__content {
+    padding: 0;
+  }
+}
+
+.toolBar {
+  /deep/ .el-submenu__title {
+    padding: 0 0 0 15px !important;
+  }
+
+  .el-menu {
+    border: 0;
+  }
+
+  /deep/ .el-menu-item {
+    padding: 0 !important;
+    min-width: none !important;
+  }
+}
 </style>
@@ -17,14 +17,14 @@ export const widgetDiv =  {
         placeholder: '',
         value: '边框',
       },
-      {
-        type: 'el-input-text',
-        label: '隐藏',
-        name: 'bHide',
-        required: false,
-        placeholder: '',
-        value: false,
-      },
+      // {
+      //   type: 'el-input-text',
+      //   label: '隐藏',
+      //   name: 'bHide',
+      //   required: false,
+      //   placeholder: '',
+      //   value: false,
+      // },
       {
         type: 'el-select',
         label: '边框类型',
@@ -37,41 +37,48 @@ export const widgetDiv =  {
           {code: 'div_Style_3', name: '边框3'},
           {code: 'div_Style_4', name: '边框4'},
           {code: 'div_Style_5', name: '边框5'},
+          {code: 'div_Style_6', name: '边框6'},
+          {code: 'div_Style_7', name: '边框7'},
+          {code: 'div_Style_8', name: '边框8'},
+          {code: 'div_Style_9', name: '边框9'},
+          {code: 'div_Style_10', name: '边框10'},
+          {code: 'div_Style_11', name: '边框11'},
+          {code: 'div_Style_12', name: '边框12'},
         ],
         value: 'div_Style_1'
       },
-      {
-        type: 'vue-color',
-        label: '边框主颜色',
-        name: 'colorOne',
-        required: false,
-        placeholder: '',
-        value: '#FAD400',
-      },
-      {
-        type: 'vue-color',
-        label: '边框副颜色',
-        name: 'colorTwo',
-        required: false,
-        placeholder: '',
-        value: '#FAD400',
-      },
+      // {
+      //   type: 'vue-color',
+      //   label: '边框主颜色',
+      //   name: 'colorOne',
+      //   required: false,
+      //   placeholder: '',
+      //   value: '#FAD400',
+      // },
+      // {
+      //   type: 'vue-color',
+      //   label: '边框副颜色',
+      //   name: 'colorTwo',
+      //   required: false,
+      //   placeholder: '',
+      //   value: '#FAD400',
+      // },
       {
         type: 'vue-color',
         label: '背景色',
         name: 'background',
         required: false,
         placeholder: '',
-        value: 'rgba(115,170,229,.5)',
-      },
-      {
-        type: 'el-input-text',
-        label: '动画时长(秒)',
-        name: 'time',
-        required: false,
-        placeholder: '',
-        value: '3',
+        value: '',
       },
+      // {
+      //   type: 'el-input-text',
+      //   label: '动画时长(秒)',
+      //   name: 'time',
+      //   required: false,
+      //   placeholder: '',
+      //   value: '3',
+      // },
     ],
     // 数据
     data: [],
@@ -99,7 +106,7 @@ export const widgetDiv =  {
         name: 'width',
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 100,
+        value: 1000,
       },
       {
         type: 'el-input-number',
@@ -107,7 +114,7 @@ export const widgetDiv =  {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 40,
+        value: 600,
       },
     ],
   }
@@ -6,80 +6,88 @@
  * @LastEditors: qianlishi
  * @LastEditTime: 2022-03-11 10:35:35
  */
-import { widgetTool } from "./main"
+import { widgetTool } from "./main";
 const screenConfig = {
-  code: 'screen',
-  type: 'screen',
-  label: '大屏设置',
-  icon: '',
+  code: "screen",
+  type: "screen",
+  label: "大屏设置",
+  icon: "",
   options: {
     setup: [
       {
-        type: 'el-input-number',
-        label: '大屏宽度',
-        name: 'width',
+        type: "el-input-number",
+        label: "大屏宽度",
+        name: "width",
         required: false,
-        placeholder: 'px',
-        value: '1920',
+        placeholder: "px",
+        value: "1920"
       },
       {
-        type: 'el-input-number',
-        label: '大屏高度',
-        name: 'height',
+        type: "el-input-number",
+        label: "大屏高度",
+        name: "height",
         required: false,
-        placeholder: 'px',
-        value: '1080',
+        placeholder: "px",
+        value: "1080"
       },
       {
-        type: 'el-input-text',
-        label: '标题',
-        name: 'title',
+        type: "el-input-text",
+        label: "标题",
+        name: "title",
         require: false,
-        placeholder: '',
-        value: '大屏',
+        placeholder: "",
+        value: "大屏"
       },
       {
-        type: 'el-input-textarea',
-        label: '大屏简介',
-        name: 'description',
+        type: "el-input-textarea",
+        label: "大屏简介",
+        name: "description",
         required: false,
-        placeholder: '',
+        placeholder: ""
       },
       {
-        type: 'vue-color',
-        label: '背景颜色',
-        name: 'backgroundColor',
+        type: "vue-color",
+        label: "背景颜色",
+        name: "backgroundColor",
         required: false,
-        placeholder: '',
-        value: '#000',
+        placeholder: "",
+        value: "#000"
       },
       {
-        type: 'custom-upload',
-        label: '图片地址',
-        name: 'backgroundImage',
+        type: "custom-upload",
+        label: "图片地址",
+        name: "backgroundImage",
         required: false,
-        placeholder: '',
-        value: 'https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b',
-      },
+        placeholder: "",
+        value:
+          "https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b"
+      }
     ],
     data: [],
-    position: [],
+    position: []
   }
-}
-const widgetTools = [
-  ...widgetTool
-]
+};
+const widgetTools = [...widgetTool];
  
-const getToolByCode = function (code) {
+const getToolByCode = function(code) {
   // 获取大屏底层设置属性
-  if (code == 'screen') {
-    return screenConfig
+  if (code == "screen") {
+    return screenConfig;
   }
   // 获取组件
-  let item = widgetTools.find(function (item, index, arrs) {
-    return item.code === code
-  })
-  return item
-}
-console.log(widgetTools)
-export {widgetTools, getToolByCode}
+  let item = widgetTools.find(function(item, index, arrs) {
+    return item.code === code;
+  });
+  return item;
+};
+console.log(widgetTools);
+
+const widgetToolsGroup = () => {
+  let chartGroup = [];
+
+  for (const item of widgetTools) {
+    
+  }
+
+};
+export { widgetTools, getToolByCode, widgetToolsGroup };
+<template>
+  <div class="bg">
+    <!-- <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" fill="transparent" width="400" height="300"
+      class="bgColor">
+      <polygon :fill="bgColor" points="10, 27 10, 273 13, 276 13, 279 24, 289
+    38, 289 41, 292 73, 292 75, 290 81, 290
+    85, 294 315, 294 319, 290 325, 290
+    327, 292 359, 292 362, 289
+    376, 289 387, 279 387, 276
+    390, 273 390, 27 387, 25 387, 21
+    376, 11 362, 11 359, 8 327, 8 325, 10
+    319, 10 315, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"></polygon>
+    </svg> -->
+    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
+      class="top-left">
+      <polygon
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
+        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+    </svg>
+    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
+      class="top-right">
+      <polygon
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
+        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+    </svg>
+    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
+      class="bottom-left">
+      <polygon
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
+        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+    </svg>
+    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="150px" height="150px"
+      class="bottom-right">
+      <polygon
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[0]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" :fill="secondaryColor">
+        <animate attributeName="fill" :value="valuesArr[1]" dur="0.5s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+      <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+        :fill="mainColor">
+        <animate attributeName="fill" :value="valuesArr[2]" dur="1s" begin="0s" repeatCount="indefinite">
+        </animate>
+      </polygon>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'widget-div-1',
+  props: {
+    mainColor: {
+      type: String,
+      default: "#83bff6",
+    },
+    secondaryColor: {
+      type: String,
+      default: "#00CED1",
+    },
+    // bgColor: {
+    //   type: String,
+    //   default: "transparent",
+    // },
+  },
+  computed: {
+    valuesArr() {
+      return [`${this.mainColor};${this.secondaryColor};${this.mainColor};`,
+      `${this.secondaryColor};${this.mainColor};${this.secondaryColor};`,
+      `${this.mainColor};${this.secondaryColor};transparent;`];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  svg {
+    position: absolute;
+    width: 6em;
+    height: 6em;
+  }
+
+  .bgColor {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .top-left {
+    top: 0;
+    left: 0;
+  }
+
+  .top-right {
+    top: 0;
+    right: 0;
+    transform: rotateY(180deg);
+  }
+
+  .bottom-left {
+    left: 0;
+    bottom: 0;
+    transform: rotateX(180deg);
+  }
+
+  .bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="bg">
+    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" fill="transparent" width="2661"
+      height="1737" class="dv-border-svg-container">
+      <polygon fill="transparent" points="
+      7, 7 2654, 7 2654, 1730 7, 1730
+    "></polygon>
+      <polyline points="2, 2 2659 ,2 2659, 1735 2, 1735 2, 2" :stroke="mainColor"></polyline>
+      <polyline points="6, 6 2655, 6 2655, 1731 6, 1731 6, 6" :stroke="secondaryColor"></polyline>
+      <circle cx="11" cy="11" r="1" :fill="mainColor"></circle>
+      <circle cx="2650" cy="11" r="1" :fill="mainColor"></circle>
+      <circle cx="2650" cy="1726" r="1" :fill="mainColor"></circle>
+      <circle cx="11" cy="1726" r="1" :fill="mainColor"></circle>
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'widget-div-2',
+  props: {
+    mainColor: {
+      type: String,
+      default: "mainColor",
+    },
+    secondaryColor: {
+      type: String,
+      default: "secondaryColor",
+    },
+  },
+  computed: {
+    valuesArr() {
+      return [`${this.mainColor};${this.secondaryColor};${this.mainColor};`,
+      `${this.secondaryColor};${this.mainColor};${this.secondaryColor};`,
+      `${this.mainColor};${this.secondaryColor};transparent;`];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>
 \ No newline at end of file
 <!-- 
   Div 图层
 -->
- <template>
-  <div :class="[divClass]" :style="styleColor">
-    {{ styleColor.text }}
+<template>
+  <div :style="styleColor">
+
+    <!-- <component :is="styleColor.divClass" :mainColor="transStyle.colorOne" :secondaryColor="transStyle.colorTwo">
+    </component> -->
+    <div :class="['div_Style', styleColor.divClass]" v-if="
+      styleColor.divClass === 'div_Style_1' ||
+      styleColor.divClass === 'div_Style_10'
+    ">
+      <div class="topLeft"></div>
+      <div class="topRight"></div>
+      <div class="bottomLeft"></div>
+      <div class="bottomRight"></div>
+    </div>
+    <div :class="['div_Style', styleColor.divClass]" v-else></div>
   </div>
 </template>
  
 <script>
+// import WidgeDiv1 from './svg/div1.vue';
+// import WidgeDiv2 from './svg/div2.vue';
 export default {
   name: "WidgetDiv",
-  components: {},
+  components: {
+    // div_Style_1: WidgeDiv1,
+    // div_Style_2: WidgeDiv2
+  },
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
   },
   data() {
     return {
       options: {},
-      optionsData: {}
+      optionsData: {},
     };
   },
   computed: {
@@ -30,7 +47,8 @@ export default {
         position: this.ispreview ? "absolute" : "static",
         color: this.transStyle.colorOne,
         text: this.transStyle.text,
-        divClass: this.transStyle.divType == undefined
+        divClass:
+          this.transStyle.divType == undefined
             ? "div_Style_1"
             : this.transStyle.divType,
         background: this.transStyle.background,
@@ -38,9 +56,9 @@ export default {
         height: this.transStyle.height + "px",
         left: this.transStyle.left + "px",
         top: this.transStyle.top + "px",
-        right: this.transStyle.right + "px"
+        right: this.transStyle.right + "px",
       };
-    }
+    },
   },
   watch: {
     value: {
@@ -49,21 +67,21 @@ export default {
         this.optionsData = val.data;
         this.setOptionsData();
       },
-      deep: true
-    }
-  }, 
+      deep: true,
+    },
+  },
   watch: {
     value: {
       handler(val) {
         this.options = val;
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.options = this.value;
   },
-  methods: {}
+  methods: {},
 };
 </script>
  
@@ -75,4 +93,135 @@ export default {
   border-color: aqua;
   overflow: hidden;
 }
+
+.div_Style {
+  width: 100%;
+  height: 100%;
+}
+
+.div_Style_1 {
+  fill: red;
+  position: relative;
+
+  >div {
+    position: absolute;
+    width: 6em;
+    height: 6em;
+    background: url("../../../../../assets/images/widget/div1.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .topLeft {
+    top: 0;
+    left: 0;
+  }
+
+  .topRight {
+    top: 0;
+    right: 0;
+    transform: rotateY(180deg);
+  }
+
+  .bottomLeft {
+    left: 0;
+    bottom: 0;
+    transform: rotateX(180deg);
+  }
+
+  .bottomRight {
+    bottom: 0;
+    right: 0;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+}
+
+.div_Style_2 {
+  background: url("../../../../../assets/images/widget/div2.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_3 {
+  background: url("../../../../../assets/images/widget/div3.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_4 {
+  background: url("../../../../../assets/images/widget/div4.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_5 {
+  background: url("../../../../../assets/images/widget/div5.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_6 {
+  background: url("../../../../../assets/images/widget/div6.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_7 {
+  box-shadow: rgb(131, 191, 246) 0px 0px 40px inset;
+  border: 1px solid rgb(131, 191, 246);
+  background: url("../../../../../assets/images/widget/div7.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_8 {
+  height: 100%;
+  background: url("../../../../../assets/images/widget/div8.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_9 {
+  background: url("../../../../../assets/images/widget/div9.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_10 {
+  position: relative;
+  box-shadow: rgb(131, 191, 246) 0px 0px 25px 3px inset;
+
+  >div {
+    position: absolute;
+    width: 6em;
+    height: 6em;
+    background: url("../../../../../assets/images/widget/div10.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .topLeft {
+    top: 0;
+    left: 0;
+  }
+
+  .topRight {
+    top: 0;
+    right: 0;
+    transform: rotateY(180deg);
+  }
+
+  .bottomLeft {
+    left: 0;
+    bottom: 0;
+    transform: rotateX(180deg);
+  }
+
+  .bottomRight {
+    bottom: 0;
+    right: 0;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+}
+
+.div_Style_11 {
+  width: 100%;
+  background: url("../../../../../assets/images/widget/div11.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.div_Style_12 {
+  background: url("../../../../../assets/images/widget/div12.svg") no-repeat;
+  background-size: 100% 100%;
+}
 </style>
@@ -50,6 +50,7 @@ import widgetDecoratePieChart from &quot;./decorate/widgetDecoratePieChart&quot;;
 import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
 import widgetWordCloud from "./wordcloud/widgetWordCloud";
 import widgetHeatmap from "./heatmap/widgetHeatmap";
+import widgetDiv from "./div/widgetDiv"
  
 export default {
   name: "Widget",
@@ -81,7 +82,8 @@ export default {
     widgetDecoratePieChart,
     widgetMoreBarLineChart,
     widgetWordCloud,
-    widgetHeatmap
+    widgetHeatmap,
+    widgetDiv
   },
   model: {
     prop: "value",