增加icon组件

src/assets/img/18.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.08 109.8">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+        stroke: #fbb03b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <rect class="cls-2" x="4.24" y=".5" width="94" height="88"/>
+      <path class="cls-1" d="M95.97,79.3c-4.48,.09-8.05,3.79-7.96,8.27,0,.01,0,.03,0,.04,.02,4.45,3.52,8.1,7.96,8.31,4.48-.09,8.05-3.79,7.96-8.27,0-.01,0-.03,0-.04,.24-4.34-3.08-8.06-7.43-8.3-.18,0-.36-.01-.53-.01Z"/>
+      <path class="cls-1" d="M7.73,8.04H98.15V43.12h7.23V.79H.5V94.84H47.51v-7.23H7.73V8.04Z"/>
+      <path class="cls-3" d="M95.97,65.91c-21.34,0-32.55,21.69-32.55,21.69,5.55,13.08,18.34,21.6,32.55,21.69,22.03,0,32.55-21.69,32.55-21.69,0,0-10.84-21.69-32.55-21.69Zm0,35.44c-7.49,.1-13.65-5.89-13.75-13.38s5.89-13.65,13.38-13.75c7.49-.1,13.65,5.89,13.75,13.38,0,0,0,0,0,0,.41,7.17-5.07,13.32-12.24,13.73-.38,.02-.76,.03-1.15,.02Z"/>
+      <path class="cls-3" d="M20.82,28.58h7.23v43.4h-7.23V28.58Zm21.69,9.39h7.23v34h-7.23s0-34,0-34Zm21.69,6.15h7.23v27.83h-7.23v-27.83Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/19.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102.31 104">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+        stroke: #fbb03b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-2" d="M23.87,95.72h-7.31V61.75c0-19.27,15.57-34.91,34.8-34.91s34.8,15.63,34.8,34.91v33.96H23.87Zm30.01-54.8l-17.17,28.36h13.73l-3.44,21.27,17.17-28.36h-13.73s3.44-21.27,3.44-21.27ZM4.63,95.72H98.09c2.02,0,3.66,1.65,3.66,3.67s-1.64,3.67-3.66,3.67H4.63c-2.02,0-3.66-1.65-3.66-3.67,0-.97,.38-1.91,1.07-2.6,.69-.69,1.62-1.08,2.59-1.07h0Z"/>
+      <path class="cls-1" d="M4.16,96.16H97.62c2.02,0,3.66,1.65,3.66,3.67s-1.64,3.67-3.66,3.67H4.16c-2.02,0-3.66-1.65-3.66-3.67,0-.97,.38-1.91,1.07-2.6,.69-.69,1.62-1.08,2.59-1.07h0Z"/>
+      <path class="cls-3" d="M80.25,8.47c1.61,.94,2.16,3.01,1.23,4.63l-6.17,10.76-5.83-3.39,6.17-10.76c.44-.77,1.17-1.34,2.03-1.58,.86-.23,1.78-.12,2.55,.33h.02s0,0,0,0Z"/>
+      <path class="cls-3" d="M51.39,.5c2.02,0,3.65,1.52,3.65,3.42v12.2h-7.3V3.91c0-1.88,1.63-3.41,3.65-3.41Z"/>
+      <path class="cls-3" d="M22.56,8.47c1.61-.93,3.67-.38,4.6,1.23,0,0,0,0,0,0l6.17,10.76-5.83,3.39-6.18-10.76c-.93-1.62-.38-3.69,1.23-4.62,0,0,0,0,0,0Z"/>
+      <path class="cls-3" d="M1.45,29.74c.44-.78,1.18-1.35,2.04-1.58,.86-.23,1.78-.11,2.56,.34l10.69,6.22-3.36,5.87-10.69-6.23c-1.61-.94-2.16-3.01-1.23-4.63h0Z"/>
+      <path class="cls-3" d="M101.36,29.74c.93,1.62,.38,3.69-1.23,4.63l-10.69,6.21-3.36-5.87,10.69-6.22c1.61-.93,3.66-.38,4.59,1.23,0,.01,0,.01,0,.02h0Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/20.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.1 130.88">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+        stroke: #fbb03b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-2" d="M101.68,62.2l26.92-3.82v72H.6v-8.47s60.84-.72,80-13.13c15.55-10.07,15.26-35.52,17.41-43.3,.47-1.73,1.91-3.01,3.68-3.28h0Z"/>
+      <path class="cls-1" d="M89.33,62.03l-6.94,3.46c-1.13,.57-2.46,.57-3.58,0l-8.84-4.42c-3.38-1.69-7.36-1.69-10.74,0l-8.84,4.42c-1.13,.57-2.46,.57-3.58,0l-8.84-4.42c-3.38-1.69-7.36-1.69-10.74,0l-8.27,4.14c-1.28,.64-2.81,.55-4-.24l-8.14-5.44c-1.8-1.28-4.3-.85-5.58,.95-1.28,1.8-.85,4.3,.95,5.58,.06,.05,.13,.09,.2,.13l8.14,5.42c3.58,2.39,8.17,2.68,12.02,.75l8.26-4.14c1.13-.57,2.46-.57,3.58,0l8.84,4.42c3.38,1.69,7.36,1.69,10.74,0l8.84-4.42c1.13-.57,2.46-.57,3.58,0l8.84,4.42c3.38,1.69,7.36,1.69,10.74,0l2.1-1.06c.27-1.91,.5-3.73,.71-5.41,.19-1.52,.37-2.91,.54-4.16h0Zm-3.35,20.88l-3.58,1.79c-1.13,.57-2.46,.57-3.58,0l-8.84-4.42c-3.38-1.69-7.36-1.69-10.74,0l-8.84,4.42c-1.13,.57-2.46,.57-3.58,0l-8.84-4.42c-3.38-1.69-7.36-1.69-10.74,0l-8.27,4.14c-1.28,.64-2.81,.55-4-.24l-8.14-5.44c-1.8-1.28-4.3-.85-5.58,.95-1.28,1.8-.85,4.3,.95,5.58,.06,.05,.13,.09,.2,.13l8.14,5.42c3.58,2.39,8.17,2.68,12.02,.75l8.26-4.14c1.13-.57,2.46-.57,3.58,0l8.84,4.42c3.38,1.69,7.36,1.69,10.74,0l8.84-4.42c1.13-.57,2.46-.57,3.58,0l8.84,4.42c2.31,1.16,4.94,1.54,7.48,1.08,1.37-3.25,2.46-6.6,3.26-10.03h0Zm-9.38,19.89l-6.64-3.31c-3.37-1.68-7.35-1.68-10.72,0l-8.85,4.42c-1.13,.57-2.46,.57-3.58,0l-8.84-4.42c-3.38-1.69-7.36-1.69-10.74,0l-8.27,4.14c-1.28,.64-2.81,.55-4-.24l-8.14-5.43c-1.8-1.28-4.3-.85-5.58,.95-1.28,1.8-.85,4.3,.95,5.58,.06,.05,.13,.09,.2,.13l8.14,5.42c3.58,2.39,8.17,2.68,12.02,.75l8.26-4.14c1.13-.57,2.46-.57,3.58,0l8.84,4.42c3.38,1.69,7.36,1.69,10.74,0l8.84-4.42c1.13-.57,2.46-.57,3.58,0l3.23,1.62c2.63-1.39,4.99-3.24,6.98-5.46h0Z"/>
+      <path class="cls-3" d="M61.87,1.42c-.51-.88-1.64-1.18-2.51-.67-.28,.16-.51,.39-.67,.67l-26.16,45.36c-.5,.87-.2,1.98,.67,2.48,.28,.16,.59,.24,.91,.24h52.34c1,0,1.82-.8,1.82-1.81,0-.32-.08-.64-.24-.91L61.88,1.43h0Zm-5.95,15c-.22-1.98,1.79-3.68,4.36-3.68s4.58,1.7,4.36,3.68l-1.98,17.33h-4.77s-1.98-17.33-1.98-17.33Zm7.89,24.32c.09,1.93-1.4,3.57-3.33,3.67s-3.57-1.4-3.67-3.33c0-.11,0-.22,0-.33,.09-1.93,1.73-3.43,3.67-3.33,1.8,.09,3.25,1.53,3.33,3.33Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/21.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.2 64.34">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #be3f28;
+      }
+
+      .cls-2 {
+        fill: aqua;
+        stroke: #fbb03b;
+      }
+
+      .cls-2, .cls-3, .cls-4 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-5 {
+        fill: #f0c949;
+      }
+
+      .cls-3 {
+        fill: #002f55;
+      }
+
+      .cls-3, .cls-4 {
+        stroke: aqua;
+      }
+
+      .cls-4 {
+        fill: #eab518;
+      }
+
+      .cls-6 {
+        fill: #e65235;
+      }
+
+      .cls-7 {
+        fill: #344f5e;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <path class="cls-2" d="M63.23,.5H12.01c-1.34,0-2.41,1.09-2.41,2.42V44.71h56.05V2.92c0-1.34-1.09-2.42-2.43-2.42Z"/>
+    <path class="cls-3" d="M11.63,42.67V2.92c0-.21,.17-.39,.39-.39H63.23c.21,0,.39,.17,.39,.39V42.67H11.63Z"/>
+    <path class="cls-6" d="M18.91,22.92l9.12-5.2v2.47l-6.4,3.71v.05l6.4,3.7v2.47l-9.12-5.2s0-2.01,0-2.01Zm10.85,8.14l5-16.92h2.36l-5,16.92h-2.36Z"/>
+    <path class="cls-2" d="M59.46,28h-9.72v-7.33c0-2.67,2.18-4.86,4.86-4.86s4.86,2.17,4.86,4.86c0,0,0,7.33,0,7.33Zm-7.88-1.85h6.04v-5.49c0-1.66-1.35-3.01-3.01-3.01s-3.01,1.35-3.01,3.01v5.49h-.01Z"/>
+    <path class="cls-5" d="M48.56,22.11h12.07v9.91h-12.07v-9.91Z"/>
+    <path class="cls-7" d="M54.19,25.54c-.51,.14-.93,.55-1.05,1.06-.21,.85,.28,1.61,1.01,1.84v1.36c0,.25,.2,.45,.45,.45s.45-.2,.45-.45v-1.36c.61-.19,1.06-.76,1.06-1.44,0-.96-.91-1.72-1.93-1.46h0Z"/>
+    <path class="cls-2" d="M72.38,61.5H.83l8.77-16.79H63.61l8.76,16.79Z"/>
+    <path class="cls-3" d="M65.45,53.2H7.76l3.21-6.72H62.23l3.22,6.72Zm-22.29,6.14h-13.12l.46-4.64h12.2l.46,4.64Z"/>
+    <path class="cls-2" d="M.83,61.5H72.36v2.34H.83v-2.34Z"/>
+    <path class="cls-6" d="M59.4,40.91l6.89,14.11c.69,1.4,2.38,1.99,3.78,1.3s1.99-2.38,1.3-3.78l-6.89-14.11s-5.07,2.47-5.08,2.47Z"/>
+    <path class="cls-1" d="M55.94,38.9l1.24,2.54c.41,.85,1.44,1.2,2.29,.79l5.99-2.93c.85-.41,1.2-1.44,.79-2.29l-1.24-2.54-9.06,4.43Z"/>
+    <path class="cls-4" d="M47.84,10.77c-7.65,3.74-10.82,12.95-7.09,20.6,3.74,7.65,12.95,10.82,20.6,7.09,7.65-3.74,10.82-12.95,7.09-20.6-3.74-7.65-12.96-10.83-20.6-7.09Zm11.76,24.1c-5.66,2.76-12.5,.41-15.26-5.25s-.41-12.5,5.25-15.26,12.5-.41,15.26,5.25,.41,12.5-5.25,15.26Z"/>
+  </g>
+</svg>

src/assets/img/22.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.34 109.06">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffdf99;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: aqua;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #ff5d50;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <path class="cls-2" d="M38.02,4.62c-.81,9.08-4.54,25.95-20.07,42.18,.47-5.99-.87-10.47-2.33-13.44-.49-.97-1.67-1.35-2.63-.87-.53,.27-.91,.75-1.03,1.33-.7,3.72-2.56,9.43-7.16,17.22-8.96,15.19-7.85,57.48,42.59,57.48s53.82-44.1,46.6-61.96c-4.65-11.69-11.69-19.08-16.06-22.81-.95-.81-2.38-.69-3.19,.26-.32,.38-.51,.86-.53,1.36-.12,3.78-.93,9.19-4.13,12.74-.06-6.57-4.77-26.01-25.31-37.06-2.2-1.22-4.98-.42-6.2,1.78-.3,.55-.49,1.15-.55,1.77Z"/>
+    <path class="cls-1" d="M45.62,45.25c-1.34-.7-2.91,.35-2.68,1.86,.76,5.88,1.57,17.57-3.03,23.1,.52-5.06-2.27-9.25-4.6-11.81-1.05-1.16-2.91-.58-3.2,.99-.41,2.79-1.57,7.04-4.54,12.22-5.29,9.25-10.88,23.56,15.59,36.83,1.34,.06,2.73,.12,4.19,.12s2.73-.06,4.07-.12c19.78-7.45,21.7-22.23,20.77-32.41-.52-5.64-7.62-20.83-26.59-30.78Z"/>
+  </g>
+</svg>

src/assets/img/23.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.13 102.66">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+        stroke: #fbb03b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        fill: #b27059;
+      }
+
+      .cls-5 {
+        fill: #f6f6f6;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+
+      .cls-6 {
+        fill: #e1dff4;
+      }
+
+      .cls-7 {
+        fill: #203b59;
+      }
+
+      .cls-8 {
+        fill: #ab5849;
+      }
+
+      .cls-9 {
+        fill: #feb19d;
+      }
+
+      .cls-10 {
+        fill: #fea742;
+      }
+
+      .cls-11 {
+        fill: #ffc64a;
+      }
+
+      .cls-12 {
+        fill: #335273;
+      }
+
+      .cls-13 {
+        fill: #feccad;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <path class="cls-2" d="M56.69,31.36l-4.29-.45c-.37-.04-.67-.32-.74-.69l-.42-2.28,.56-.56,.05,.56c.03,.39,.18,.44,.44,.15,1.73-1.94,3.09-4.17,4.02-6.59,.14-.37,.13-.78-.04-1.14l-5.92-11.95c-.45-.91-1.35-1.59-2.46-1.86-5.38-1.32-10.6-3.2-15.59-5.6,7.66,1.08,15.13,3.22,22.21,6.36,.34,.15,.63,.43,.81,.8l5.94,11.99c.26,.53,.25,1.15-.01,1.68l-4.57,9.6Z"/>
+    <path class="cls-1" d="M32.32,.95c4.99,2.4,10.21,4.28,15.59,5.6,1.11,.27,2.01,.95,2.46,1.86l5.92,11.95c.16,.35,.18,.76,.04,1.14-.93,2.42-2.29,4.66-4.02,6.59-.26,.29-.41,.25-.44-.15l-.05-.56,.66-1.18c2.61-5.15,1.07-7.5-4.6-7.05-3.06,.63-6.06,.48-8.98-.45,.68-2.2,.92-4.29,.71-6.26-.03-.39-.25-.74-.58-.96-1.28-.8-2.72-1-4.33-.6-6.85-2.16-5.78,5.07-4.29,8.48l-13.1,.12c-.37,0-.71,.22-.85,.56-.76,1.99-.79,4.02-.1,6.1l1.48,1.89-.61,2.97-3.96,.33c-2.21-3.06-4-6.35-5.38-9.85-.14-.37-.12-.78,.05-1.13L14.12,7.93c.16-.31,.47-.57,.88-.72L32.32,.95Z"/>
+    <path class="cls-11" d="M34.71,10.88c.69,3.67-.15,6.87-2.55,9.61l-1.74-1.13c-1.5-3.41-2.56-10.64,4.29-8.48Z"/>
+    <path class="cls-10" d="M34.71,10.88c1.6-.4,3.04-.2,4.33,.6,.32,.2,.54,.56,.58,.96,.2,1.98-.03,4.06-.71,6.26-1.83,2.27-4.08,2.87-6.74,1.79,2.39-2.74,3.24-5.94,2.55-9.61Z"/>
+    <path class="cls-5" d="M38.9,18.7c2.93,.93,5.92,1.08,8.98,.45,.34,2.09,.41,4.19,.23,6.31-.62,.27-.39,.48,.69,.64l-1.23,.1-31.2-.05c-.69-2.08-.66-4.12,.1-6.1,.14-.34,.47-.57,.85-.56l13.1-.12,1.74,1.13c2.66,1.08,4.91,.48,6.74-1.79Z"/>
+    <path class="cls-6" d="M47.88,19.16c5.67-.45,7.2,1.9,4.6,7.05l-3.68-.1c-1.08-.16-1.31-.37-.69-.64,.18-2.11,.1-4.22-.23-6.31Z"/>
+    <path class="cls-12" d="M16.37,26.15l31.2,.05c-3.17,3.55-7.07,6.18-11.7,7.89-6.72,.25-12.73-1.77-18.01-6.05l-1.48-1.89Z"/>
+    <path class="cls-7" d="M47.58,26.2l1.23-.1,3.68,.1-.66,1.18-.56,.56-5.04,3.6c-3.46,1.63-6.91,2.48-10.34,2.55,4.63-1.72,8.53-4.35,11.7-7.89h0Z"/>
+    <path class="cls-13" d="M17.86,28.04c5.29,4.28,11.29,6.3,18.01,6.05,3.43-.07,6.88-.92,10.34-2.55,.56,5.47,.72,10.11,.47,13.91-.61,9.12-10.83,20.21-20.39,13.88-.35-.23-.76-.29-1.08-.16l-.87,.37c.05-.76-.07-1.27-.36-1.53-3.98-3.58-6.14-8.07-6.48-13.48l-.26-13.53s.61-2.97,.61-2.97Zm9.9,13.04c.87,0,1.57-1.05,1.56-2.32-.01-1.27-.73-2.3-1.61-2.29-.87,0-1.57,1.05-1.56,2.32,.01,1.27,.73,2.3,1.61,2.29Zm13.63-.05c.4-.02,.77-.27,1.03-.71,.26-.44,.39-1.03,.37-1.64-.05-1.26-.76-2.26-1.59-2.23-.4,.02-.77,.27-1.03,.71-.26,.44-.39,1.03-.37,1.64,.05,1.26,.76,2.26,1.59,2.23Zm-3,10.5c7.92,1.34,4.55-7.19-1.73-6.91-5.13-.11-11.03-.11-10.49,5.78,.05,.48,.46,.84,.94,.85,0,0,11.27,.28,11.27,.28Z"/>
+    <path class="cls-9" d="M51.25,27.94l.42,2.28c.07,.37,.37,.64,.74,.69l4.29,.45c1.21,2.65,1.73,5.46,1.56,8.43-.22,3.92-2.38,5.56-6.18,4.84-.15-.03-.31,0-.43,.1-.12,.09-.2,.23-.21,.38-.4,5.25-2.54,9.53-6.41,12.86-.3,.25-.46,.62-.43,1l.22,4.51-2.76,2.45-7.12,6.63c-.25,.23-.64,.22-.92-.02l-9.73-8.75,.05-4.24,.87-.37c.32-.13,.73-.07,1.08,.16,9.56,6.32,19.78-4.77,20.39-13.88,.25-3.8,.1-8.44-.47-13.91,0,0,5.04-3.6,5.04-3.6Zm-37.97,3.39l3.96-.33,.26,13.53c-9.88,2.45-7.51-12.81-4.22-13.2Z"/>
+    <path class="cls-12" d="M16.63,61.74c-.49,.09-.95,.29-1.38,.59-.29,.2-.44,.58-.39,.99,.29,2.83-.96,4.08-3.73,3.77-.46-.05-.87,.03-1.14,.22-2.92,2.07,3,2.65,3.7,2.75,.19,.02,.36,.11,.49,.25,.12,.12,.17,.28,.15,.44l-.65,4.33c-3.31,.15-4.89-1.66-4.75-5.42l.39-14.63c.02-.45,.16-.84,.4-1.09,.72-.75,1.45-.75,2.21,.01,.25,.25,.39,.64,.39,1.08l.06,5.76c0,.32,.27,.59,.61,.63,0,0,3.64,.33,3.64,.33Z"/>
+    <path class="cls-7" d="M16.63,61.74c3.79-1.1,2.73,4.14,2.81,6.08v2.76c.12,3.71-1.81,5.21-5.76,4.5l.65-4.33c.02-.16-.03-.33-.15-.44-.13-.14-.3-.22-.49-.25-.7-.1-6.62-.67-3.7-2.75,.27-.19,.68-.27,1.14-.22,2.77,.31,4.01-.95,3.73-3.77-.05-.41,.11-.8,.39-.99,.43-.3,.89-.5,1.38-.59Z"/>
+    <path class="cls-2" d="M44.82,63.48l4.9,4.9c-.81,1.68-6.15,16.14-9.24,11.08l-.18-.96c-.07-.36,0-.76,.2-1.14l3.86-7.76c.19-.37,.22-.79,.1-1.16-.4-1.16-1.2-2-2.39-2.51,0,0,2.76-2.45,2.76-2.45Z"/>
+    <path class="cls-3" d="M24.29,63.79l9.73,8.75c.28,.25,.67,.25,.92,.02l7.12-6.63c1.19,.51,1.99,1.35,2.39,2.51,.13,.38,.09,.8-.1,1.16l-3.86,7.76c-.2,.38-.27,.78-.2,1.14l.18,.96h-1.13c-.75-2.37-2.22-4.12-4.4-5.25-.34-.18-.76-.17-1.09,.02-2.04,1.2-3.41,2.94-4.11,5.22l-3.68,.96c-.34,.09-.7-.08-.88-.42-.94-1.81-4.12-9.29-5.76-9.42v-2.76l4.85-4.03h0Z"/>
+    <path class="cls-1" d="M55.34,68.51c4.42,3.07,7.12,7.16,8.1,12.25,.09,.44,.37,.75,.69,.77l1.83,.12c-1.21-.02-2.33,.21-3.36,.67-.35,.16-.61,.48-.69,.86-.9,4.14-.26,7.77,1.9,10.89l-1.23,8h-23.28c-.39-7.77-2.07-14.52,.05-22.62h1.13c3.09,5.06,8.43-9.4,9.24-11.08,0,0,5.63,.12,5.63,.12Zm-5.98,16.78c-7.17-2.12-5.99,7.48-1.48,9.75,6.04,2.1,7.72-4.19,6.84-8.79-.07-.39-.34-.71-.7-.86-1.49-.6-3.14-.63-4.66-.11Z"/>
+    <path class="cls-2" d="M55.34,68.51c8.15,.87,12.48,5.34,13.01,13.41l-2.4-.26-1.83-.12c-.32-.02-.6-.34-.69-.77-.98-5.1-3.68-9.18-8.1-12.25Z"/>
+    <path class="cls-1" d="M8.92,69.66c-.14,3.76,1.45,5.56,4.75,5.42,3.95,.71,5.88-.79,5.76-4.5,1.64,.13,4.82,7.61,5.76,9.42,.18,.33,.54,.5,.88,.42l3.68-.96c1.12,7.51,1.05,15.05-.21,22.63-7.6,.04-15.38,.05-23.33,.04-4.61,0-6.78-2.16-5.21-6.79,6.46-.44,7.18-7.25,6.19-12.49-.06-.37-.34-.67-.7-.77-1.91-.51-3.94-.36-5.75,.44-.03-6.09,2.69-10.38,8.17-12.87Zm16.84,18.97c0-.81-.65-1.46-1.45-1.46h0l-10.15-.02c-.81,0-1.46,.65-1.46,1.46h0v.1c0,.81,.65,1.46,1.46,1.46h0l10.15,.02c.81,0,1.46-.65,1.46-1.46h0v-.1h0Z"/>
+    <path class="cls-12" d="M39.35,79.46c-2.12,8.1-.44,14.85-.05,22.62h-9.75c1.26-7.57,1.33-15.11,.21-22.62,.69-2.28,2.06-4.02,4.11-5.22,.33-.2,.75-.21,1.09-.02,2.18,1.13,3.65,2.88,4.4,5.25Z"/>
+    <path class="cls-10" d="M65.96,81.66l2.4,.26v13.48c-1.36,.16-2.88-.28-4.55-1.31-2.16-3.12-2.8-6.75-1.9-10.89,.08-.38,.33-.7,.69-.86,1.06-.47,2.2-.7,3.36-.67Z"/>
+    <path class="cls-11" d="M1.01,95.35l-.26-12.82c1.81-.8,3.84-.95,5.75-.44,.35,.09,.63,.39,.7,.77,.99,5.23,.27,12.05-6.19,12.49Z"/>
+    <path class="cls-2" d="M63.81,94.08c1.67,1.03,3.18,1.47,4.55,1.31,1.03,4.98-.89,7.21-5.77,6.69,0,0,1.23-8,1.23-8Z"/>
+    <path class="cls-12" d="M27.71,36.47c-.87,0-1.57,1.05-1.56,2.32,.01,1.27,.73,2.3,1.6,2.29,.87,0,1.57-1.05,1.56-2.32-.01-1.27-.73-2.3-1.6-2.29,0,0,0,0,0,0Z"/>
+    <path class="cls-12" d="M41.19,36.45c-.82,.03-1.45,1.09-1.4,2.35,.05,1.26,.76,2.26,1.59,2.23s1.45-1.09,1.4-2.35c-.05-1.26-.76-2.26-1.59-2.23h0Z"/>
+    <path class="cls-4" d="M36.66,44.62l1.73,6.91-11.27-.28c-.48,0-.89-.36-.94-.85-.54-5.89,5.36-5.89,10.49-5.78Z"/>
+    <path class="cls-8" d="M36.66,44.62c6.27-.28,9.64,8.25,1.73,6.91l-1.73-6.91Z"/>
+    <path class="cls-10" d="M47.88,95.04c2.13-2.96,2.62-6.21,1.48-9.75,1.52-.52,3.17-.49,4.66,.11,.36,.15,.63,.47,.7,.86,.88,4.6-.8,10.88-6.84,8.79Z"/>
+    <path class="cls-11" d="M49.36,85.28c1.14,3.55,.64,6.8-1.48,9.75-4.51-2.28-5.69-11.88,1.48-9.75Z"/>
+    <path class="cls-5" d="M14.16,87.15l10.15,.02c.97,0,1.46,.49,1.46,1.46v.1c0,.97-.49,1.46-1.46,1.46l-10.15-.02c-.97,0-1.46-.49-1.46-1.46v-.1c0-.97,.49-1.46,1.46-1.46Z"/>
+  </g>
+</svg>

src/assets/img/25.svg

@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.14 109.9">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #722424;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: #63ddfa;
+      }
+
+      .cls-3, .cls-4, .cls-5 {
+        isolation: isolate;
+        opacity: .1;
+      }
+
+      .cls-6 {
+        fill: #002f55;
+      }
+
+      .cls-6, .cls-7, .cls-8 {
+        stroke: aqua;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-9 {
+        fill: #ffffaf;
+      }
+
+      .cls-10 {
+        fill: #ffa858;
+      }
+
+      .cls-11 {
+        fill: #ffd977;
+      }
+
+      .cls-12 {
+        fill: #ffc46e;
+      }
+
+      .cls-13 {
+        fill: #ffdb7b;
+      }
+
+      .cls-14, .cls-7 {
+        fill: #fca663;
+      }
+
+      .cls-8 {
+        fill: #ffc666;
+      }
+
+      .cls-15 {
+        fill: #7f1919;
+      }
+
+      .cls-16 {
+        fill: #00c5f1;
+      }
+
+      .cls-5 {
+        fill: #00cffe;
+      }
+
+      .cls-17 {
+        fill: #ff845a;
+      }
+
+      .cls-18 {
+        fill: #ff3131;
+      }
+
+      .cls-19 {
+        fill: #66defb;
+      }
+
+      .cls-20 {
+        fill: #ffc961;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-19" d="M64.25,40.73l-9.96-9.96L9.68,75.38l9.96,9.96,44.61-44.61Zm19.93,19.93l-3.34-3.34-44.61,44.61,3.34,3.34s44.61-44.61,44.61-44.61Z"/>
+      <path class="cls-7" d="M8.11,62.57l4.32-4.32c5.64-5.64,20.21-.22,32.51,12.09,12.31,12.31,17.72,26.88,12.09,32.51l-4.32,4.32c-5.64,5.64-20.21,.22-32.51-12.08-12.31-12.31-17.72-26.88-12.08-32.51Z"/>
+      <path class="cls-12" d="M44.94,70.34c12.31,12.31,17.72,26.88,12.09,32.51-5.64,5.64-20.21,.22-32.51-12.09-12.31-12.31-17.72-26.88-12.09-32.51,5.64-5.64,20.21-.22,32.51,12.09Z"/>
+      <path class="cls-6" d="M18.4,78.65c-2.93-5.27-4.54-10.54-4.95-14.81-.2-2.16,.57-4.29,2.1-5.83,7.32-7.32,30.97-30.98,30.97-30.98l41.72,41.72-30.97,30.98c-1.53,1.53-3.67,2.31-5.83,2.1-3.74-.36-8.25-1.64-12.86-3.93l.98-3.02c.35-1.06,.07-2.23-.73-3.02l-13.69-13.69c-.79-.79-1.96-1.07-3.02-.73,0,0-3.72,1.21-3.72,1.21Z"/>
+      <path class="cls-16" d="M42.93,72.36c9.93,9.93,14.73,21.26,10.7,25.28-4.02,4.02-15.35-.77-25.28-10.7-9.93-9.93-14.72-21.26-10.7-25.28,4.02-4.02,15.35,.77,25.28,10.7Z"/>
+      <path class="cls-14" d="M34.15,103.86l-21.01-21,8.37-2.72c1.26-.41,2.65-.08,3.59,.86l10.91,10.91c.94,.94,1.27,2.32,.86,3.59,0,0-2.72,8.37-2.72,8.37Z"/>
+      <path class="cls-4" d="M43.32,30.24l3.21-3.21,41.72,41.72-3.21,3.21c-3.74,.35-8.58-1.02-13.72-3.82-.92-.5-1.39-1.54-1.17-2.56,.07-.35,.13-.61,.13-.61,.28-1.27-.11-2.6-1.03-3.52l-15.41-15.41c-.92-.92-2.25-1.31-3.52-1.03l-.61,.13c-1.02,.22-2.07-.25-2.57-1.17-2.79-5.14-4.16-9.97-3.82-13.72h0Z"/>
+      <path class="cls-5" d="M42.93,72.36c9.93,9.93,14.73,21.26,10.7,25.28-4.02,4.02-15.35-.77-25.28-10.7-9.93-9.93-14.72-21.26-10.7-25.28,4.02-4.02,15.35,.77,25.28,10.7Z"/>
+      <path class="cls-3" d="M64.25,40.73l-9.96-9.96L9.68,75.38l9.96,9.96,44.61-44.61Zm19.93,19.93l-3.34-3.34-44.61,44.61,3.34,3.34s44.61-44.61,44.61-44.61Z"/>
+      <path class="cls-17" d="M51.12,43.47c-.83,.18-1.69-.2-2.1-.95-4.46-8.07-5.44-15.42-1.81-19.05l6.62-6.62c5.62-5.62,20.17-.19,32.48,12.12,12.31,12.31,17.74,26.86,12.12,32.48l-6.62,6.62c-3.63,3.63-10.98,2.65-19.05-1.81-.74-.41-1.13-1.27-.95-2.1,.1-.49,.2-.92,.2-.92,.28-1.27-.11-2.6-1.03-3.52l-15.41-15.41c-.92-.92-2.25-1.31-3.52-1.03,0,0-.92,.2-.92,.2Z"/>
+      <path class="cls-8" d="M86.3,28.98c12.31,12.31,17.74,26.86,12.12,32.48-5.62,5.62-20.17,.19-32.48-12.12-12.31-12.31-17.74-26.86-12.12-32.48,5.62-5.62,20.17-.19,32.48,12.12Z"/>
+      <path class="cls-13" d="M83,61.43c-5.45-2.37-11.48-6.53-17.05-12.1-5.06-5.06-8.96-10.5-11.41-15.55,3.73,.77,10.38,5.31,16.92,11.86,5.93,5.93,10.21,11.94,11.54,15.79Z"/>
+      <path class="cls-17" d="M84.36,30.92c6.43,6.43,9.53,13.78,6.91,16.4-2.62,2.62-9.97-.47-16.4-6.91-6.43-6.43-9.53-13.78-6.91-16.4,2.62-2.62,9.97,.47,16.4,6.91Z"/>
+      <path class="cls-10" d="M71.56,25.02l3.88-3.88c2.14-2.14,8.07,.31,13.24,5.47,5.16,5.16,7.61,11.09,5.47,13.24l-3.88,3.88c-2.14,2.14-8.08-.31-13.24-5.47-5.16-5.16-7.61-11.09-5.47-13.24Z"/>
+      <path class="cls-11" d="M88.68,26.6c5.16,5.16,7.61,11.09,5.47,13.24-2.14,2.14-8.08-.31-13.24-5.47-5.16-5.16-7.61-11.09-5.47-13.24,2.14-2.14,8.07,.31,13.24,5.47Z"/>
+      <path class="cls-20" d="M74.68,22.91c.07-.73,.31-1.34,.76-1.78,2.14-2.14,8.07,.31,13.24,5.47,2.54,2.54,4.43,5.28,5.43,7.65-.07,.73-.31,1.33-.76,1.78-2.14,2.14-8.08-.31-13.24-5.47-2.54-2.54-4.43-5.28-5.43-7.65Z"/>
+      <path class="cls-9" d="M55.29,59.99c.45-.44,.45-1.16,0-1.61-.28-.28-.69-.4-1.08-.3l-17.29,4.27c-1,.25-1.61,1.26-1.36,2.26,.08,.33,.25,.63,.49,.87l5.54,5.54c.58,.58,.58,1.51,0,2.09l-5.01,5.01c-.44,.44-.44,1.17,0,1.61,.28,.28,.69,.39,1.07,.3l17.87-4.31c1-.24,1.61-1.25,1.37-2.25-.08-.33-.25-.64-.49-.88l-5.81-5.81c-.58-.58-.58-1.51,0-2.09,0,0,4.7-4.7,4.7-4.7Z"/>
+      <path class="cls-18" d="M12.81,.3h2.66c1.21,0,1.82,.61,1.82,1.82V26.22c0,1.21-.61,1.82-1.82,1.82h-2.66c-1.21,0-1.82-.61-1.82-1.82V2.12c0-1.21,.61-1.82,1.82-1.82Z"/>
+      <path class="cls-18" d="M5.61,33.28c0,4.71,3.82,8.54,8.54,8.54s8.54-3.82,8.54-8.54-3.82-8.54-8.54-8.54-8.54,3.82-8.54,8.54Z"/>
+      <path class="cls-1" d="M12.11,42.25c-5.04,0-9.15-4.1-9.15-9.15,.01-3.46,1.96-6.61,5.04-8.18V4.11C8.01,1.84,9.85,0,12.12,0c2.27,0,4.1,1.84,4.11,4.11V24.92c3.08,1.56,5.03,4.72,5.04,8.18,0,5.04-4.1,9.15-9.15,9.15ZM12.11,.6c-1.93,0-3.5,1.57-3.5,3.5V25.11c0,.12-.07,.22-.17,.27-4.26,2.03-6.07,7.13-4.04,11.39,2.03,4.26,7.13,6.07,11.39,4.04s6.07-7.13,4.04-11.39c-.84-1.77-2.27-3.2-4.04-4.04-.11-.05-.17-.16-.17-.27V4.11c0-1.93-1.57-3.5-3.5-3.5h0Z"/>
+      <path class="cls-1" d="M14.15,5.15h-4.16c-.17,0-.3-.14-.3-.3s.14-.3,.3-.3h4.15c.17,0,.3,.14,.3,.3s-.14,.3-.3,.3h0Zm0,6.19h-4.16c-.17,0-.3-.14-.3-.3s.14-.3,.3-.3h4.15c.17,0,.3,.14,.3,.3s-.14,.3-.3,.3h0Zm0-4.95h-2.79c-.17,0-.3-.14-.3-.3s.14-.3,.3-.3h2.79c.17,0,.3,.14,.3,.3s-.14,.3-.3,.3Zm0,1.24h-2.79c-.17,0-.3-.14-.3-.3s.14-.3,.3-.3h2.79c.17,0,.3,.14,.3,.3s-.14,.3-.3,.3Zm0,1.24h-2.79c-.17,0-.3-.14-.3-.3s.14-.3,.3-.3h2.79c.17,0,.3,.14,.3,.3s-.14,.3-.3,.3Zm0,1.24h-2.79c-.17,0-.3-.14-.3-.3s.14-.3,.3-.3h2.79c.17,0,.3,.14,.3,.3s-.14,.3-.3,.3ZM2.28,24.04c-.23,0-.42-.19-.42-.42V10.55l-1.1,1.41c-.14,.19-.4,.23-.59,.09-.19-.14-.23-.4-.09-.59,0,0,.01-.01,.02-.02l1.85-2.38c.14-.18,.41-.22,.59-.07,.1,.08,.16,.2,.16,.33v14.3c0,.23-.19,.42-.42,.42Z"/>
+      <path class="cls-1" d="M4.17,12.02c-.13,0-.25-.06-.33-.15l-1.88-2.28c-.15-.18-.13-.44,.04-.6s.44-.13,.6,.04c0,0,0,0,.01,.01l1.88,2.28c.15,.18,.12,.45-.06,.6-.08,.06-.17,.1-.27,.1Z"/>
+      <path class="cls-15" d="M13.43,27.49c.4,0,.4-.63,0-.63s-.4,.63,0,.63Zm-3.81,4.41c.4,0,.4-.63,0-.63s-.4,.63,0,.63Zm6.04,3.38c.4,0,.4-.63,0-.63s-.4,.63,0,.63Zm-4.95,3.5c.4,0,.4-.63,0-.63s-.4,.63,0,.63Zm7.67-9.24c.4,0,.4-.63,0-.63s-.4,.63,0,.63Z"/>
+      <path class="cls-2" d="M13.86,27.27c.27,0,.27-.42,0-.42s-.27,.42,0,.42Zm-2.84,11.05c.27,0,.27-.42,0-.42s-.27,.42,0,.42Zm2.54-6.04c.27,0,.27-.42,0-.42s-.27,.42,0,.42Zm5.19,3.68c.27,0,.27-.42,0-.42s-.27,.42,0,.42Zm-11.84-2.96c.27,0,.27-.42,0-.42s-.27,.42,0,.42Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/26.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102.06 87.64">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-1, .cls-4 {
+        stroke: #fbb03b;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+
+      .cls-5 {
+        fill: #ffb04b;
+      }
+
+      .cls-4 {
+        fill: #cae1ff;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-1" d="M3.05,5.62H99.05V82.42H3.05V5.62Z"/>
+      <path class="cls-2" d="M94.34,.5H7.71C3.73,.51,.51,3.74,.5,7.72V79.92c0,3.98,3.24,7.21,7.22,7.22H94.34c3.98-.01,7.21-3.24,7.22-7.22V7.72c0-3.98-3.24-7.21-7.22-7.22Zm.17,80.38H6.99V22.45H94.52v58.44h0Z"/>
+      <path class="cls-4" d="M62.18,69v7.68h-22.3v-7.68h22.3Zm27.38,0v7.68h-22.31v-7.68h22.31Zm-27.38-14.11v7.7h-22.3v-7.72h22.3v.02Zm27.38,0v7.7h-22.31v-7.72h22.33l-.02,.02Zm-27.38-14.11v7.7h-22.3v-7.68h22.3v-.02Zm27.38,0v7.7h-22.31v-7.68h22.33l-.02-.02Zm-27.38-14.1v7.68h-22.3v-7.68h22.3Zm27.38,0v7.68h-22.31v-7.68h22.31Z"/>
+      <path class="cls-2" d="M34.82,69v7.68H12.5v-7.68h22.31Zm0-42.33v7.68H12.5v-7.68h22.31Z"/>
+      <path class="cls-3" d="M34.82,40.78v7.68H12.5v-7.68h22.31Zm0,14.1v7.71H12.5v-7.71h22.31Z"/>
+      <path class="cls-5" d="M20.18,7.48v7.68h-7.68V7.48s7.68,0,7.68,0Z"/>
+      <path class="cls-5" d="M36.18,7.48v7.68h-7.68V7.48s7.68,0,7.68,0Z"/>
+      <path class="cls-5" d="M52.18,7.48v7.68h-7.68V7.48s7.68,0,7.68,0Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/27.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 84.61">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+        stroke: #fbb03b;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-2" d="M105.59,.99h8.03l-8.27,15.28c1.46-1.2,3.32-1.8,5.51-1.8,2.87,0,5.2,1.06,6.74,3.14,1.36,1.76,2.02,4.02,2.02,6.7s-.66,4.86-2.03,6.72c-1.62,2.04-3.92,3.08-6.73,3.08s-5.15-1.03-6.78-3.1c-1.38-1.79-2.06-4.04-2.06-6.7,0-.76,.05-1.49,.16-2.18l-6.77,12.54h-8.03l8.24-15.22c-1.47,1.16-3.3,1.74-5.4,1.74-2.83,0-5.15-1.03-6.78-3.1-1.38-1.79-2.06-4.04-2.06-6.7s.68-5.02,2.04-6.68c1.57-2.1,3.9-3.16,6.8-3.16s5.2,1.06,6.74,3.14c1.36,1.76,2.02,4.02,2.02,6.7,0,.74-.05,1.46-.16,2.14L105.59,.99h0Zm5.19,20.4c-.06,0-.08,.03-.12,.15l-.06,.15c-.21,.52-.34,1.41-.34,2.62s.12,2.05,.35,2.6c.11,.29,.09,.28,.25,.28,.03,0,.04,0,.07-.04l.12-.27c.21-.59,.33-1.45,.33-2.57,0-.94-.08-1.69-.23-2.24l-.22-.62s-.01-.03-.02-.04l-.13-.02h0Zm-20.64-12.92c-.06,0-.08,.03-.12,.15l-.06,.15c-.21,.52-.34,1.41-.34,2.62s.12,2.05,.35,2.6c.11,.29,.09,.28,.25,.28,.03,0,.04,0,.07-.04l.12-.27c.21-.59,.33-1.45,.33-2.57,0-.94-.08-1.69-.23-2.24l-.22-.62s-.01-.03-.02-.04l-.13-.02h0Zm18.36,35.64c11.05,0,20,8.95,20,20s-8.95,20-20,20H20.5c-11.05,0-20-8.95-20-20s8.95-20,20-20H108.5Zm0,8H20.5c-6.63,0-12.01,5.36-12.01,11.99,0,6.36,4.96,11.62,11.31,11.99l.7,.02H108.5c6.63,0,12.01-5.36,12.01-11.99,0-6.36-4.96-11.62-11.31-11.99l-.7-.02Z"/>
+      <path class="cls-1" d="M20.5,44.11H60.5c13.33,0,20,6.67,20,20s-6.67,20-20,20H20.5c-13.33,0-20-6.67-20-20s6.67-20,20-20Z"/>
+      <path class="cls-3" d="M61.3,.5c4,0,7.22,1.72,9.46,5.05,2,3,2.98,6.94,2.98,11.79s-.97,8.79-2.99,11.81c-2.26,3.32-5.48,5.03-9.45,5.03s-7.26-1.72-9.46-5.05c-1.23-1.85-2.08-4.05-2.54-6.6-.46,2.55-1.3,4.76-2.54,6.62-2.26,3.32-5.48,5.03-9.45,5.03s-7.26-1.72-9.46-5.05c-2-3-2.98-6.94-2.98-11.79s.97-8.79,2.97-11.78c2.18-3.34,5.42-5.06,9.47-5.06s7.22,1.72,9.46,5.05c1.23,1.84,2.07,4.05,2.54,6.6,.46-2.55,1.3-4.74,2.52-6.58,2.19-3.34,5.42-5.06,9.48-5.06Z"/>
+      <path class="cls-3" d="M18.46,1.06V33.62H9.78V12.52l-.91,.46-.98,.42-1.02,.38-1.06,.33-2.55,.73V6.03l2.16-.62c.92-.3,1.92-.73,2.93-1.27,1.01-.61,1.88-1.26,2.62-1.94l.52-.52,.59-.62s6.38,0,6.38,0Z"/>
+      <path class="cls-2" d="M37.3,8.46c-1.4,0-2.28,.7-2.93,2.5-.54,1.45-.83,3.58-.83,6.38s.29,4.88,.84,6.39c.66,1.79,1.54,2.49,2.92,2.49s2.25-.71,2.92-2.48c.55-1.52,.84-3.66,.84-6.4s-.29-4.93-.83-6.37c-.68-1.8-1.58-2.51-2.93-2.51Z"/>
+      <path class="cls-2" d="M61.3,8.46c-1.4,0-2.28,.7-2.93,2.5-.54,1.45-.83,3.58-.83,6.38s.29,4.88,.84,6.39c.66,1.79,1.54,2.49,2.92,2.49s2.25-.71,2.92-2.48c.55-1.52,.84-3.66,.84-6.4s-.29-4.93-.83-6.37c-.68-1.8-1.58-2.51-2.93-2.51h0Z"/>
+    </g>
+  </g>
+</svg>

src/components/icon.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  name: string,
+  size?: number,
+  color?: string
+}>()
+const symbolId = computed(() => `#icon-${props.name}`)
+const newColor = computed(() => `${props.color ?? '#ccc'}`)
+const newSize = computed(() => `${props.size ?? 16}`)
+</script>
+<template>
+  <svg
+    aria-hidden="true"
+    :font-size="newSize"
+    :width="newSize"
+    :height="newSize"
+  >
+
+    <use
+      :href="symbolId"
+      :fill="newColor"
+      :fill-rule="undefined"
+    />
+  </svg>
+</template>

src/pages/main.ts

@@ -5,6 +5,8 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import piniaPersist from 'pinia-plugin-persist'
 import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
 import '@vuemap/vue-amap/dist/style.css'
+import Icon from '@/components/icon.vue'
+import 'virtual:svg-icons-register'
 
 initAMapApiLoader({
   key: 'YOUR_KEY',
@@ -34,6 +36,7 @@ const router = createRouter({
 app.use(store)
   .use(router)
   .use(VueAMap)
+  .component('Icon', Icon)
 
 router.isReady().then(() => {
   const vm = app.mount('#app')

src/pages/views/home/components/HomePage.vue

@@ -13,7 +13,12 @@
                 :key="id"
               >
                 <div>
-                  <img :src="it.icon">
+                  <!-- <img :src="it.icon"> -->
+                  <Icon
+                    :name="it.icon"
+                    :size="96"
+                    style="margin-right: 20px;"
+                  />
                   <div>
                     <p>
                       <span>{{ it.num }}</span>
@@ -45,16 +50,69 @@
     </template>
     <template #right>
       <div class="right">
-        <template
-          v-for="(item, index) in rightContentChart"
-          :key="index"
+        <Box
+          :width="655"
+          :height="622"
+          :name="rightContent[0].name"
         >
-          <Box
-            :width="655"
-            :height="622"
-            :name="item.name"
-          />
-        </template>
+          <div class="statistics">
+            <div class="statistics-top">
+              <template
+                v-for="(item, index) in rightContent[0].content[0]"
+                :key="index"
+              >
+                <div>
+                  <p>{{ item.num }}</p>
+                  <p>{{ item.name }}</p>
+                </div>
+              </template>
+            </div>
+            <div class="statistics-content">
+              <template
+                v-for="(item, ids) in rightContent[0].content[1]"
+                :key="ids"
+              >
+                <div>
+                  <!-- <img :src="item.icon"> -->
+                  <Icon
+                    :name="item.icon"
+                    :size="74"
+                  />
+                  <div>
+                    <p>
+                      {{ item.name }}
+                    </p>
+                    <p>
+                      <span>{{ item.num }}</span>
+                      件
+                    </p>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </Box>
+        <Box
+          :width="655"
+          :height="622"
+          name="班次完成率"
+        >
+          123123
+        </Box>
+        <Box
+          :width="655"
+          :height="622"
+          name="班次准点率"
+        >
+          123123
+        </Box>
+        <Box
+          :width="655"
+          :height="622"
+          name="发车准点率"
+        >
+          123123
+        </Box>
       </div>
     </template>
   </Layout>
@@ -63,35 +121,29 @@
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
 import { ref } from 'vue'
-import icon11 from '@/assets/img/11.svg'
-import icon12 from '@/assets/img/12.svg'
-import icon13 from '@/assets/img/13.svg'
-import icon14 from '@/assets/img/14.svg'
-import icon15 from '@/assets/img/15.svg'
-import icon16 from '@/assets/img/16.svg'
 import Box from '@/components/box.vue'
 
 const leftTopCount = ref([
   [
     {
-      num: 6.8, icon: icon11, name: '总刷卡量', until: '亿人次'
+      num: 6.8, icon: '11', name: '总刷卡量', until: '亿人次'
     },
     {
-      num: 6.8, icon: icon12, name: '总客流量', until: '亿人次'
+      num: 6.8, icon: '12', name: '总客流量', until: '亿人次'
     },
     {
-      num: 6.8, icon: icon13, name: '安全行驶', until: '万公里'
+      num: 6.8, icon: '13', name: '安全行驶', until: '万公里'
     }
   ],
   [
     {
-      num: 6.8, icon: icon14, name: '累计减少碳排放', until: '吨'
+      num: 6.8, icon: '14', name: '累计减少碳排放', until: '吨'
     },
     {
-      num: 6.8, icon: icon15, name: '累计责任事故率', until: '起/百万公里'
+      num: 6.8, icon: '15', name: '累计责任事故率', until: '起/百万公里'
     },
     {
-      num: 6.8, icon: icon16, name: '乘客满意度', until: '%'
+      num: 6.8, icon: '16', name: '乘客满意度', until: '%'
     }
   ]
 ])
@@ -103,11 +155,29 @@ const leftContentChart = ref([
   { name: '线路客流排名', option: '' }
 ])
 
-const rightContentChart = ref([
-  { name: '舆情统计', option: '' },
-  { name: '班次完成率', option: '' },
-  { name: '班次准点率', option: '' },
-  { name: '发车准点率', option: '' }
+const rightContent = ref([
+  {
+    name: '舆情统计',
+    content: [
+      [
+        { name: '报警总数', num: 0 },
+        { name: '报警企业', num: 0 },
+        { name: '待反馈', num: 0 },
+        { name: '待解除', num: 0 }
+      ],
+      [
+        { name: '事件', num: 0, icon: '17' },
+        { name: '舆情', num: 0, icon: '18' },
+        { name: '高风险', num: 0, icon: '19' },
+        { name: '汛情', num: 0, icon: '20' },
+        { name: '网络检查', num: 0, icon: '21' },
+        { name: '火险', num: 0, icon: '22' },
+        { name: '驾驶员报警', num: 0, icon: '23' },
+        { name: '充电', num: 0, icon: '24' },
+        { name: '电池高温', num: 0, icon: '25' }
+      ]
+    ]
+  }
 ])
 </script>
 
@@ -133,12 +203,6 @@ const rightContentChart = ref([
         align-items: center;
         justify-content: center;
 
-        img {
-          width: 96px;
-          height: 96px;
-          margin-right: 20px;
-        }
-
         &>div {
 
           &>p:first-child {
@@ -163,10 +227,74 @@ const rightContentChart = ref([
     flex-wrap: wrap;
   }
 }
-.right{
+
+.right {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding-left: 40px;
+  white-space: nowrap;
+  text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);
+
+  .statistics {
+    padding: 20px;
+
+    &-top {
+      display: flex;
+      justify-content: space-between;
+
+      &>div {
+        width: 145px;
+        height: 145px;
+        font-size: 20px;
+        color: #80FFFF;
+        text-align: center;
+        background: rgba(33, 133, 232, 0.098);
+        border: 1px solid rgba(0, 255, 255, 0.298);
+
+        &>p:first-child {
+          padding-top: 33px;
+          padding-bottom: 10px;
+          font-weight: 700;
+          font-style: normal;
+          font-size: 40px;
+          color: #FFFFFF;
+          text-align: center;
+        }
+
+        &>p:last-child {
+          font-size: 20px;
+        }
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      &>div {
+        display: flex;
+        width: 205px;
+        overflow: hidden;
+        margin-top: 40px;
+
+        &>div {
+          width: 100px;
+          color: white;
+          padding-left: 20px;
+
+          &>p {
+            font-size: 20px;
+
+            span {
+              font-size: 34px;
+              font-weight: 400;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

vite.config.ts

@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import eslint from 'vite-plugin-eslint'
 import viteCompression from 'vite-plugin-compression'
 import { resolve } from 'path'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
@@ -21,7 +22,12 @@ export default ({ mode }) => {
     },
     plugins: [
       vue(), viteCompression(),
-      eslint({ fix: true, include: [ '**/*.ts', '**/*.vue' ] })
+      eslint({ fix: true, include: [ '**/*.ts', '**/*.vue' ] }),
+      createSvgIconsPlugin({
+        iconDirs: [ resolve(__dirname, './src/assets/img') ],
+        // Specify symbolId format
+        symbolId: 'icon-[dir]-[name]'
+      })
     ],
     server: {
       host: '0.0.0.0',