Merge branch 'master' of https://git.caner.top/Caner/busRoute

src/assets/img/1-1.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 78.54">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #f8b64c;
+      }
+
+      .cls-3 {
+        fill: #002f55;
+      }
+
+      .cls-3, .cls-4 {
+        stroke: aqua;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        fill: #eab518;
+      }
+
+      .cls-5 {
+        fill: #334a5e;
+      }
+
+      .cls-6 {
+        fill: #54c0eb;
+      }
+
+      .cls-7 {
+        fill: #84dbff;
+      }
+
+      .cls-8 {
+        fill: #ff7058;
+      }
+
+      .cls-9 {
+        fill: #acb3ba;
+      }
+    </style>
+  </defs>
+  <path class="cls-9" d="M5.71,26H3.1v-7.56c0-.91,.74-1.67,1.67-1.67h5.18v2.61H5.71v6.61Z"/>
+  <path class="cls-3" d="M8.17,39.78H.66c-.09,0-.16-.06-.16-.16v-13.46c0-.09,.06-.16,.16-.16h7.51c.09,0,.16,.06,.16,.16v13.46c0,.08-.08,.16-.16,.16Z"/>
+  <path class="cls-9" d="M77.9,26h-2.61v-6.61h-4.24v-2.61h5.18c.91,0,1.67,.74,1.67,1.67v7.56Z"/>
+  <path class="cls-3" d="M72.83,39.78h7.51c.09,0,.16-.06,.16-.16v-13.46c0-.09-.06-.16-.16-.16h-7.51c-.09,0-.16,.06-.16,.16v13.46c0,.08,.08,.16,.16,.16Z"/>
+  <path class="cls-4" d="M74.69,50.91v15.62c0,1.92-1.56,3.48-3.48,3.48H9.79c-1.92,0-3.48-1.56-3.48-3.48v-15.64c0-1.69,.63-3.29,1.78-4.52,1.15-1.23,1.78-2.85,1.78-4.52V10.8C9.87,5.11,14.48,.5,20.17,.5H60.78c5.69,0,10.3,4.61,10.3,10.3v31.04c0,1.69,.65,3.31,1.8,4.54,1.17,1.24,1.81,2.85,1.81,4.54Z"/>
+  <path class="cls-3" d="M13.4,16.36h25.1v20.35H13.4V16.36Zm29.1,0h25.1v20.35h-25.1V16.36Z"/>
+  <path class="cls-8" d="M52.72,10.06H28.28c-.13,0-.22-.09-.22-.22V5.26c0-.13,.09-.22,.22-.22h24.44c.13,0,.22,.09,.22,.22v4.57c.02,.13-.09,.24-.22,.24Z"/>
+  <path class="cls-2" d="M54.56,70.01H26.44v-17.51c0-.17,.14-.31,.31-.31h27.5c.17,0,.31,.14,.31,.31v17.51Z"/>
+  <path class="cls-1" d="M11.71,58.61c0,3.3,2.67,5.97,5.97,5.97s5.97-2.67,5.97-5.97h0c0-3.3-2.67-5.97-5.97-5.97s-5.97,2.67-5.97,5.97h0Z"/>
+  <path class="cls-1" d="M57.05,58.61c0,3.3,2.67,5.97,5.97,5.97s5.97-2.67,5.97-5.97c0-3.3-2.67-5.97-5.96-5.97s-5.97,2.67-5.97,5.96c0,0,0,0,0,0Z"/>
+  <path class="cls-3" d="M21.79,70.03v6.35c0,.93-.76,1.67-1.67,1.67H11.93c-.93,0-1.67-.74-1.67-1.67v-6.35h11.53Zm48.96,0v6.35c0,.93-.76,1.67-1.67,1.67h-8.22c-.91,0-1.67-.74-1.67-1.67v-6.35h11.56Zm-40.11-12.36c0,1.01,.82,1.81,1.81,1.81h16.08c1.01,0,1.81-.82,1.81-1.81s-.82-1.81-1.81-1.81h-16.08c-.99,0-1.81,.82-1.81,1.81Zm0,6.87c0,1.01,.82,1.81,1.81,1.81h16.08c1.01,0,1.81-.82,1.81-1.81s-.82-1.81-1.81-1.81h-16.08c-.99,0-1.81,.82-1.81,1.81Z"/>
+  <path class="cls-6" d="M58.91,58.61c0,2.27,1.84,4.11,4.11,4.11s4.11-1.84,4.11-4.11-1.84-4.11-4.11-4.11-4.11,1.84-4.11,4.11Z"/>
+  <path class="cls-7" d="M60.12,55.71c-1.61,1.61-1.61,4.2,0,5.81l5.81-5.81c-1.61-1.61-4.2-1.61-5.81,0Z"/>
+  <path class="cls-6" d="M13.57,58.61c0,2.27,1.84,4.11,4.11,4.11,2.27,0,4.11-1.84,4.11-4.11h0c0-2.27-1.84-4.11-4.11-4.11-2.27,0-4.11,1.84-4.11,4.11h0Z"/>
+  <path class="cls-7" d="M14.78,55.71c-1.61,1.61-1.61,4.2,0,5.81l5.81-5.81c-1.61-1.61-4.2-1.61-5.81,0Z"/>
+  <path class="cls-5" d="M10.26,70.03h11.53v2.5H10.26v-2.5Zm48.93,0h11.54v2.5h-11.54v-2.5Z"/>
+</svg>

src/assets/img/1-2.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 95.5">
+  <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;
+      }
+
+      .cls-4 {
+        fill: #ffd6c2;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="M21.66,27.33c-9.83,0-17.8,8-17.8,17.88,0,14.08,17.8,29.31,17.8,29.31,0,0,17.79-15.89,17.79-29.31,0-9.88-7.96-17.88-17.79-17.88Zm0,27.62c-5.42,0-9.81-4.41-9.81-9.85s4.39-9.86,9.81-9.86,9.81,4.41,9.81,9.86-4.4,9.85-9.81,9.85ZM81.26,2.19c-7.86,0-14.24,6.4-14.24,14.3,0,11.26,14.24,23.45,14.24,23.45,0,0,14.24-12.71,14.24-23.45,0-7.9-6.38-14.3-14.24-14.3Zm0,22.1c-4.34,0-7.85-3.54-7.85-7.89s3.51-7.89,7.85-7.89,7.85,3.54,7.85,7.89-3.51,7.89-7.85,7.89Z"/>
+  <path class="cls-1" d="M18.3,23.95C8.47,23.95,.5,31.95,.5,41.83c0,14.08,17.8,29.31,17.8,29.31,0,0,17.79-15.89,17.79-29.31,0-9.88-7.96-17.88-17.79-17.88Zm0,27.62c-5.42,0-9.81-4.41-9.81-9.85s4.39-9.86,9.81-9.86,9.81,4.41,9.81,9.86-4.4,9.85-9.81,9.85ZM77.9,.5c-7.86,0-14.24,6.4-14.24,14.3,0,11.26,14.24,23.45,14.24,23.45,0,0,14.24-12.7,14.24-23.45,0-7.9-6.38-14.3-14.24-14.3Zm0,22.1c-4.34,0-7.85-3.54-7.85-7.89s3.51-7.89,7.85-7.89,7.85,3.54,7.85,7.89-3.51,7.89-7.85,7.89Z"/>
+  <path class="cls-4" d="M19.92,95.05c9.27-4.65,18.05-5.57,28.1-5.21,5.94,.21,10.47-.2,15.54-3.85,5.79-4.18,9.89-9.75,12.91-16.41,3-6.59,4.15-12.78,12.19-12.38,5.18,.26,5.47-8.35,.3-8.6-16.51-.83-16.03,15.61-25.04,25.95-6.56,7.51-12.11,6.6-20.74,6.49-9.59-.14-18.38,2.09-27.06,6.44-4.69,2.36-.89,9.93,3.8,7.57Z"/>
+  <path class="cls-3" d="M18.42,89.93c9.27-4.65,18.05-5.57,28.1-5.21,5.94,.21,10.47-.2,15.54-3.85,5.79-4.18,9.89-9.75,12.91-16.41,3-6.59,4.15-12.78,12.19-12.38,5.18,.26,5.47-8.35,.3-8.6-16.51-.83-16.03,15.61-25.04,25.95-6.56,7.51-12.11,6.6-20.74,6.49-9.59-.14-18.38,2.09-27.06,6.44-4.69,2.36-.89,9.94,3.8,7.57Z"/>
+</svg>

src/assets/img/1-3.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.66 95.62">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+      }
+
+      .cls-2 {
+        fill: #002f55;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: aqua;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        fill: #eab518;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="M48.38,93c-24.62,0-44.66-20.04-44.66-44.66S23.75,3.68,48.38,3.68s44.66,20.04,44.66,44.66-20.04,44.66-44.66,44.66Z"/>
+  <path class="cls-3" d="M48.33,17.38c-1.45,0-2.62-1.17-2.62-2.62V7.98c0-1.45,1.17-2.62,2.62-2.62s2.62,1.17,2.62,2.62v6.77c0,1.45-1.18,2.62-2.62,2.62Zm0,74.08c-1.45,0-2.62-1.18-2.62-2.62v-6.78c0-1.45,1.17-2.62,2.62-2.62s2.62,1.18,2.62,2.62v6.78c0,1.45-1.18,2.62-2.62,2.62ZM14.64,50.96H7.86c-1.45,0-2.62-1.18-2.62-2.62s1.17-2.62,2.62-2.62h6.77c1.45,0,2.62,1.17,2.62,2.62s-1.17,2.62-2.62,2.62Zm74.07,0h-6.78c-1.45,0-2.62-1.18-2.62-2.62s1.18-2.62,2.62-2.62h6.78c1.45,0,2.62,1.17,2.62,2.62s-1.18,2.62-2.62,2.62Z"/>
+  <path class="cls-1" d="M48.38,6.3c11.22,0,21.79,4.38,29.72,12.31,7.94,7.94,12.31,18.5,12.31,29.72s-4.38,21.79-12.31,29.72-18.5,12.31-29.72,12.31-21.79-4.38-29.72-12.31S6.33,59.56,6.33,48.34s4.38-21.79,12.31-29.72S37.14,6.3,48.38,6.3m0-5.25C22.26,1.05,1.09,22.23,1.09,48.34s21.17,47.29,47.29,47.29,47.29-21.17,47.29-47.29S74.49,1.05,48.38,1.05Z"/>
+  <path class="cls-3" d="M42.4,48.34c0,3.3,2.67,5.98,5.97,5.98,3.3,0,5.98-2.67,5.98-5.97h0c0-3.31-2.68-5.98-5.97-5.98-3.3,0-5.98,2.68-5.98,5.98h0Z"/>
+  <path class="cls-3" d="M48.33,50.76c-.54,0-1.09-.16-1.55-.51-1.16-.86-1.41-2.5-.56-3.66l18.84-25.61c.86-1.16,2.5-1.41,3.66-.56,1.16,.86,1.41,2.5,.56,3.66l-18.82,25.61c-.53,.7-1.31,1.07-2.12,1.08Z"/>
+  <path class="cls-3" d="M19.88,39.25C9.2,39.25,.5,30.56,.5,19.88S9.19,.5,19.88,.5s19.38,8.69,19.38,19.38-8.7,19.38-19.38,19.38Z"/>
+  <path class="cls-2" d="M8.81,24.8c3.92-3.58,6.58-6.42,6.58-8.7,0-1.44-.8-2.21-2.05-2.21-1.08,0-1.92,.71-2.66,1.52l-2.05-2.02c1.54-1.62,2.98-2.42,5.21-2.42,3.04,0,5.15,1.94,5.15,4.94,0,2.7-2.33,5.69-4.74,8.11,.79-.1,1.86-.21,2.55-.21h2.89v3.16H8.79v-2.16h.02Z"/>
+  <path class="cls-2" d="M31,23.03h-1.75v3.92h-3.5v-3.92h-6.59v-2.6l5.47-9.19h4.62v8.94h1.75v2.85h-.01Zm-5.26-2.86v-2.3c0-.99,.1-2.49,.15-3.49h-.09c-.4,.89-.83,1.8-1.26,2.69l-1.8,3.1h3Z"/>
+</svg>

src/assets/img/1-4.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.5 90.8">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: aqua;
+        stroke: #fbb03b;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #ffe000;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M73.55,35.66h25.98v6.34h-25.98v-6.34m0-12.72h25.98v6.35h-25.98v-6.35"/>
+  <path class="cls-1" d="M103.7,90.3H9.42c-4.92,0-8.92-4.85-8.92-10.82V11.32C.5,5.35,4.5,.5,9.42,.5H103.7c4.92,0,9.31,4.85,9.31,10.82V79.48c0,5.97-4.39,10.82-9.31,10.82ZM10.5,6.86c-2,0-3.64,2-3.64,4.45V79.48c0,2.45,1.63,4.46,3.64,4.46H103.77c2,0,4.01-2,4.01-4.46V11.32c0-2.45-2.01-4.45-4.01-4.45,0,0-93.28,0-93.28,0Z"/>
+  <path class="cls-1" d="M17.17,51.92h47.68v5.13h-19.87v5.13c0,1.59-.4,2.83-1.19,3.68-.79,.85-2.02,1.32-3.69,1.41-1.66,.09-3.96,.15-6.89,.15-.42-2.11-.84-3.9-1.24-5.37,1.79,.09,3.4,.15,4.84,.15,1.12,0,1.67-.69,1.67-2.06v-3.07h-8.01l3.06,4.13-13.17,6.03c-1.15-1.98-2.28-3.74-3.4-5.28,2.79-.81,6.93-2.44,12.4-4.9h-12.21v-5.13h0Zm3.4-7.15H61.43v4.75H20.57v-4.75Z"/>
+  <path class="cls-2" d="M50.78,57.19c4.03,1.38,8.55,2.97,13.58,4.79l-2.83,5.03c-3.83-1.63-8.31-3.4-13.43-5.32,0,0,2.68-4.5,2.68-4.5ZM20.08,29.95h11.85v-2.97h-13.52v-4.99H63.55v4.99h-13.43v2.97h11.9v12.52H20.08s0-12.52,0-12.52Zm6.2,7.92h5.67v-3.31h-5.67v3.31Zm11.9-7.92h5.71v-2.97h-5.71v2.97Zm0,7.92h5.71v-3.31h-5.71v3.31Zm17.65,0v-3.31h-5.71v3.31h5.71Zm38.74,11.45l-5.9,5.42h5.02c.71,0,1.28,.57,1.28,1.27s-.58,1.27-1.28,1.27h-5.64v2.53h5.64c.71,0,1.28,.57,1.28,1.27s-.58,1.27-1.28,1.27h-5.64v3.81c0,.7-.62,1.27-1.38,1.27s-1.38-.57-1.38-1.27v-3.81h-5.64c-.7,0-1.28-.57-1.28-1.27s.58-1.27,1.28-1.27h5.64v-2.53h-5.64c-.7,0-1.28-.57-1.28-1.27s.58-1.27,1.28-1.27h5.22l-5.37-4.93c-.54-.5-.54-1.3,0-1.8s1.41-.5,1.96,0l5.29,4.85,5.85-5.36c.54-.5,1.43-.5,1.98,0,.56,.51,.56,1.31,0,1.82Z"/>
+</svg>

src/assets/img/1-5.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" 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>
+  <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"/>
+</svg>

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

@@ -1,6 +1,346 @@
 <template>
   <Layout>
     <template #left>
+      <div class="left">
+        <Box
+          :width="560"
+          :height="1224"
+          :name="'线路基本情况'"
+          class="left-left"
+        >
+          <div class="linebase">
+            <div class="car">
+              <div class="top">
+                <Icon
+                  name="1-1"
+                  :size="80"
+                  style="margin-right: 20px;"
+                />
+                <div class="name bold">
+                  1
+                </div>
+                <div class="road">
+                  路
+                </div>
+              </div>
+              <div class="current">
+                当前线路
+              </div>
+            </div>
+            <div class="info">
+              <div
+                v-for="item in lineInfo"
+                :key="item.label"
+              >
+                <div class="label">
+                  {{ item.label }}
+                </div>
+                <div class="val">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="header">
+            <div>
+              <Icon
+                name="1-2"
+                :size="30"
+              />
+              起讫点
+            </div>
+            <div>
+              <Icon
+                name="1-3"
+                :size="30"
+              />
+              运营时间
+            </div>
+          </div>
+          <div class="detail">
+            <div>
+              <div class="row">
+                <div class="type orange">
+                  上行
+                </div>
+                <div class="name">
+                  始发点名称 → 终点站名称
+                </div>
+                <div class="value">
+                  06:00~22:00
+                </div>
+              </div>
+              <div class="row">
+                <div class="type">
+                  下行
+                </div>
+                <div class="name">
+                  始发点名称 → 终点站名称
+                </div>
+                <div class="value">
+                  06:00~22:00
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="row">
+                <div class="type orange">
+                  上
+                </div>
+                <div class="name">
+                  线路上行里程
+                </div>
+                <div class="value">
+                  20km
+                </div>
+              </div>
+              <div class="row">
+                <div class="type">
+                  下
+                </div>
+                <div class="name">
+                  线路下行里程
+                </div>
+                <div class="value">
+                  20km
+                </div>
+              </div>
+              <div class="row">
+                <Icon
+                  name="1-4"
+                  :size="38"
+                />
+                <div class="name">
+                  票价
+                </div>
+                <div class="value">
+                  2元
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="title">
+                <div class="flex">
+                  <Icon
+                    name="1-5"
+                    :size="30"
+                  />
+                  <div class="name">
+                    驾驶员数量
+                  </div>
+                </div>
+                <div class="value">
+                  <div
+                    class="bold"
+                    style="font-size: 40px"
+                  >
+                    10
+                  </div>
+                  <div class="">
+                    人
+                  </div>
+                </div>
+              </div>
+              <div class="starlist">
+                <div
+                  v-for="item in starlist"
+                  :key="item.label"
+                  class="star"
+                >
+                  <div>{{ item.label }}</div>
+                  <div class="flex">
+                    <span class="num bold">{{ item.value }}</span>人
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div style="border: 0;">
+              <div class="title">
+                <div class="flex">
+                  <Icon
+                    name="1-1"
+                    :size="30"
+                  />
+                  <div class="name">
+                    车辆数占比
+                  </div>
+                </div>
+                <div class="value">
+                  共
+                  <div
+                    class="bold"
+                    style="font-size: 40px"
+                  >
+                    10
+                  </div>
+                  辆
+                </div>
+              </div>
+              <Echart
+                style="width: 560px;height:318px"
+                :option="leftContent.leftOp"
+              />
+            </div>
+          </div>
+        </Box>
+        <Box
+          :width="560"
+          :height="1224"
+          :name="'线路发班情况'"
+          class="left-right"
+        >
+          <div class="filter">
+            <div class="name bold">
+              筛选
+            </div>
+            <div class="odds">
+              <div
+                v-for="item in odds"
+                :key="item.label"
+                class="odd"
+              >
+                {{ item.label }} {{ item.value }}
+              </div>
+            </div>
+          </div>
+          <div class="frequency">
+            <div class="title bold">
+              上行
+            </div>
+            <div class="content">
+              <div
+                v-for="item in status"
+                :key="item"
+                class="bus"
+              >
+                <img
+                  src="../../../../assets/img/1-1.png"
+                  alt="bus"
+                >
+                <div
+                  :class="item"
+                  class="status"
+                >
+                  执行中
+                </div>
+                <div class="info">
+                  <div>
+                    <div class="bold">
+                      1路
+                    </div>
+                    <div class="busNum">
+                      川T 12345
+                    </div>
+                  </div>
+                  <div>司机：小A </div>
+                  <div>电量： </div>
+                </div>
+                <div class="table">
+                  <div>
+                    <div class="label">
+                      调度时间
+                    </div>
+                    <div class="value">
+                      06:30:00
+                    </div>
+                  </div>
+                  <div>
+                    <div class="label">
+                      实际发车时间
+                    </div>
+                    <div class="value">
+                      06:30:00
+                    </div>
+                  </div>
+                  <div>
+                    <div class="label">
+                      发车间隔
+                    </div>
+                    <div class="value">
+                      1 分钟
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="page">
+              <n-pagination :item-count="30">
+                <template #prefix="{ itemCount }">
+                  总共 {{ itemCount }} 个项目
+                </template>
+              </n-pagination>
+            </div>
+          </div>
+          <div class="frequency">
+            <div class="title bold">
+              下行
+            </div>
+            <div class="content">
+              <div
+                v-for="item in 3"
+                :key="item"
+                class="bus"
+              >
+                <img
+                  src="../../../../assets/img/1-1.png"
+                  alt="bus"
+                >
+                <div
+                  :class="item"
+                  class="status"
+                >
+                  执行中
+                </div>
+                <div class="info">
+                  <div>
+                    <div class="bold">
+                      1路
+                    </div>
+                    <div class="busNum">
+                      川T 12345
+                    </div>
+                  </div>
+                  <div>司机：小A </div>
+                  <div>电量： </div>
+                </div>
+                <div class="table">
+                  <div>
+                    <div class="label">
+                      调度时间
+                    </div>
+                    <div class="value">
+                      06:30:00
+                    </div>
+                  </div>
+                  <div>
+                    <div class="label">
+                      实际发车时间
+                    </div>
+                    <div class="value">
+                      06:30:00
+                    </div>
+                  </div>
+                  <div>
+                    <div class="label">
+                      发车间隔
+                    </div>
+                    <div class="value">
+                      1 分钟
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="page">
+              <n-pagination :item-count="30">
+                <template #prefix="{ itemCount }">
+                  总共 {{ itemCount }} 个项目
+                </template>
+              </n-pagination>
+            </div>
+          </div>
+        </Box>
+      </div>
       <div>2222</div>
     </template>
     <template #center>
@@ -14,9 +354,390 @@
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
+import Box from '@/components/box.vue'
+import Echart from '@/components/chart.vue'
+import { ref } from 'vue'
+/* 线路类型：干线公交 车辆总数： 运 营 中：9 辆 非 运 营：1 辆 */
+const lineInfo = ref([
+  { label: '线路类型：', value: '干线公交' },
+  { label: '车辆总数：', value: '10 辆' },
+  { label: '运 营 中：', value: '9 辆' },
+  { label: '非 运 营：', value: '1 辆' }
+])
+const starlist = ref([
+  { label: '五星', value: '1' },
+  { label: '四星', value: '2' },
+  { label: '三星', value: '3' },
+  { label: '二星', value: '4' },
+  { label: '一星', value: '5' }
+])
+const odds = ref([
+  { label: '全部', value: '10' },
+  { label: '已完成', value: '4' },
+  { label: '执行中', value: '1' },
+  { label: '已处理', value: '1' },
+  { label: '已下发', value: '1' },
+  { label: '待发', value: '1' },
+  { label: '调停', value: '1' },
+  { label: '非运营', value: '1' }
+])
 
+const status = [ 'success', 'warning', 'error' ]
+
+const leftContent = ref({
+  leftOp: {
+    grid: {
+      containLabel: true
+    },
+    // 图表图例
+    legend: {
+      show: true,
+      type: 'scroll',
+      orient: 'horizontal', // 图例排列方向
+      icon: 'circle', // 图例样式为圆形
+      itemWidth: 10, // 图例图形的宽度
+      itemHeight: 16, // 图例图形的高度
+      itemGap: 10, // 图例项之间的间隔
+      left: 'center', // 图例距离容器右侧的距离
+      bottom: 0, // 图例垂直居中
+      textStyle: {
+        color: 'white', // 图例文字颜色
+        fontSize: 16
+      }
+    },
+
+    // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+    series: [
+      {
+        type: 'pie', // 图表类型为饼图
+        radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
+        showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
+        label: {
+          show: true,
+          fontSize: 16,
+          formatter: '{b}： {c}条',
+          color: 'white'
+        },
+        data: [
+          { key: 2, name: '2023', value: 130 },
+          { key: 2, name: '2022', value: 50 },
+          { key: 2, name: '2021', value: 50 },
+          { key: 2, name: '2020', value: 50 },
+          { key: 2, name: '2019', value: 50 }
+        ]
+      }
+    ]
+  }
+})
 </script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+.left {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  color: #fff;
+  font-size: 18px;
+
+  &-left {
+    .linebase {
+      height: 216px;
+      padding: 20px 60px 35px 60px;
+      display: flex;
+      align-items: center;
+      gap: 70px;
+
+      .car {
+        .top {
+          display: flex;
+          position: relative;
+          font-size: 18px;
+
+          .name {
+            width: 63px;
+            height: 74px;
+            line-height: 74px;
+            text-align: center;
+            border: 2px solid #2185E8;
+            font-size: 50px;
+            border-radius: 10px;
+            background: rgba(33, 133, 232, 0.298);
+          }
+
+          .road {
+            position: absolute;
+            bottom: 0;
+            right: -25px;
+          }
+        }
+
+        .current {
+          text-align: center;
+          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
+          margin-top: 10px;
+        }
+      }
+
+      .info {
+        width: 100%;
+
+        >div {
+          display: flex;
+          gap: 10px;
+          margin: 15.2px 0;
+
+          .label {
+            color: #80FFFF
+          }
+        }
+      }
+    }
+
+    .header {
+      height: 50px;
+      background: rgba(33, 133, 232, 0.298);
+      display: flex;
+
+      >div {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+      }
+    }
+
+    .detail {
+      padding: 0 20px 0 30px;
+
+      >div {
+        border-bottom: 1px solid rgba(128, 255, 255, 0.298);
+        padding-bottom: 30px;
+        padding-top: 16px;
+
+        .value {
+          color: #80FFFF;
+          width: 200px;
+          text-align: center;
+        }
+
+        .row {
+          height: 50px;
+          display: flex;
+          align-items: center;
+
+          .type {
+            border: 1px solid #80FFFF;
+            background: rgba(128, 255, 255, 0.098);
+            border-radius: 5px;
+            color: #80FFFF;
+            padding: 5px 9px;
+
+            &.orange {
+              border: 1px solid #FAAD0E;
+              background: rgba(250, 173, 14, 0.098);
+              color: #FAAD0E;
+            }
+          }
+
+          .name {
+            flex: 1;
+            margin-left: 10px;
+
+          }
+
+        }
+
+        .title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .name {
+            font-size: 24px;
+            margin-left: 10px;
+          }
+
+          .value {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            gap: 10px;
+          }
+        }
+
+        .starlist {
+          display: flex;
+          justify-content: space-around;
+          margin-top: 17px;
+
+          .star {
+            color: #80FFFF;
+
+            .num {
+              font-size: 24px;
+            }
+          }
+        }
+      }
+
+    }
+  }
+
+  &-right {
+    flex: 1;
+    font-size: 18px;
+
+    .filter {
+      display: flex;
+      align-items: center;
+      padding: 20px 40px;
+
+      .name {
+        width: 120px;
+      }
+
+      .odds {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+
+        .odd {
+          border-radius: 5px;
+          border: 1px solid #2185E8;
+          background: rgba(0, 191, 191, 0);
+          padding: 2px 8px;
+          min-width: 90px;
+          text-align: center;
+
+          &.checkd {
+            background: #2185E8;
+          }
+        }
+      }
+    }
+
+    .frequency {
+      margin-top: 15px;
+      .title {
+        background: rgba(24, 145, 255, 0.498);
+        height: 40px;
+        line-height: 40px;
+        font-size: 20px;
+        text-align: center;
+        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
+      }
+
+      .content {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 10px 13px;
+
+        .bus {
+          width: 236px;
+          height: 401px;
+          flex: 1;
+          border: 1px solid #1891FF;
+          background: rgba(27, 175, 255, 0.098);
+          overflow: hidden;
+          position: relative;
+
+          .status {
+            position: absolute;
+            height: 31px;
+            line-height: 31px;
+            text-align: right;
+            width: 100%;
+            top: 119px;
+            padding-right: 10px;
+            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, #333333 100%);
+
+            &.success {
+              background: linear-gradient(90deg, rgba(0, 238, 200, 0) 4%, #00EEC8 100%);
+            }
+
+            &.warning {
+              background: linear-gradient(90deg, rgba(250, 173, 14, 0) 1%, #FAAD0E 100%);
+            }
+
+            &.error {
+              background: linear-gradient(90deg, rgba(231, 61, 65, 0) 1%, #E73D41 100%);
+            }
+          }
+
+          img {
+            height: 150px;
+            width: 100%;
+          }
+
+          .info {
+            padding: 10px;
+
+            >div {
+              display: flex;
+              height: 35px;
+              align-items: center;
+
+              .bold {
+                font-size: 24px;
+              }
+
+              .busNum {
+                border: 2px solid #FFFFFF;
+                border-radius: 3px;
+                background: #1891FF;
+                padding: 2px 5px;
+                margin-left: 10px;
+              }
+            }
+          }
+
+          .table {
+            >div {
+              display: flex;
+              height: 40px;
+              align-items: center;
+
+              .label {
+                width: 135px;
+                height: 40px;
+                line-height: 40px;
+                background: rgba(33, 133, 232, 0.298);
+                color: #80FFFF;
+                text-align: right;
+                padding-right: 10px;
+              }
+
+              .value {
+                text-align: center;
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+
+      .page {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 25px;
+      }
+    }
+
+  }
+
+  .flex {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 
-  </style>
+  .bold {
+    color: #fff;
+    font-weight: bold;
+    font-family: Impact Normal;
+  }
+}
+</style>

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

@@ -20,7 +20,7 @@
             :key="index"
           >
             <Box
-              :width="450"
+              :width="438"
               :height="400"
               :name="item.name"
             >