首页，组件化布局，增加天气

src/assets/img/11.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 112.24 95.76">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #002f55;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke: aqua;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #eab518;
+      }
+
+      .cls-4 {
+        fill: url(#_未命名的渐变_19);
+      }
+
+      .cls-3 {
+        fill: aqua;
+      }
+    </style>
+    <linearGradient id="_未命名的渐变_19" data-name="未命名的渐变 19" x1="6.6" y1="47.88" x2="107.17" y2="47.88" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset=".15" stop-color="#f9fcff"/>
+      <stop offset=".33" stop-color="#ebf4ff"/>
+      <stop offset=".52" stop-color="#d2e8ff"/>
+      <stop offset=".73" stop-color="#b0d7ff"/>
+      <stop offset=".94" stop-color="#85c1ff"/>
+      <stop offset="1" stop-color="#77baff"/>
+    </linearGradient>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-2" d="M72.12,83.58c0,1.68-1.46,3.05-3.25,3.05H3.75c-1.8,0-3.25-1.37-3.25-3.05V40.91c0-1.68,1.46-3.05,3.25-3.05h2.08v40.38c0,1.68,1.36,3.05,3.05,3.05h62.48c.26,0,.51-.03,.76-.1v2.38h0Z"/>
+      <path class="cls-3" d="M78.21,79c1.68,0,3.05-1.36,3.05-3.05h0V42.93c-1.58,1.53-2.99,3.3-4.44,5.12l-.7,.87c-1.26,1.57-2.74,3.35-4.41,4.55-1.85,1.33-4.29,2.17-7.08,1.18-2.22-.79-3.85-2.24-4.77-4.19-.87-1.84-.96-3.81-.75-5.53,.42-3.38,2.15-6.79,3.95-9.07,.28-.35,.64-.78,1.04-1.27,.98-1.17,2.25-2.68,3.43-4.36H11.17c-1.68,0-3.05,1.36-3.05,3.05v42.67c0,1.68,1.36,3.05,3.05,3.05h0s67.05,0,67.05,0Zm-6.5-48.76c-1.48,2.49-3.7,5.14-5.05,6.76-.36,.43-.66,.78-.86,1.04-2.99,3.78-5.59,11.32,0,13.3,3.05,1.08,5.39-1.86,8.31-5.54,1.98-2.49,4.22-5.32,7.14-7.47v-5.05c0-1.68-1.36-3.05-3.05-3.05h-6.5Z"/>
+      <path class="cls-1" d="M99.33,28.68s-3.19,6.28-15.96,8.31c-8.78,4.83-11.97,16.34-17.56,14.36-5.59-1.98-2.99-9.53,0-13.3,1.6-2.02,8.78-9.89,7.18-12.85-3.99-6.11-15.17-.06-18.36,.69h-17.56c4.79-4.53,20.52-17.99,22.35-19.88,2.93-3.02,5.59-3.55,9.58-3.02,1.95,.26,24.23,2.66,34.32,3.7l.8,.08-.8,21.91h-3.99Z"/>
+      <path class="cls-4" d="M12.73,0c1.08,4.15,1.99,4.98,6.05,6.14-4.15,1.08-4.98,1.99-6.05,6.05-1.08-4.15-1.99-4.98-6.14-6.05,4.15-1.16,5.06-2.07,6.14-6.14ZM87.36,86.62c.82,3.1,1.47,3.76,4.57,4.57-3.1,.82-3.75,1.47-4.57,4.57-.82-3.1-1.47-3.75-4.57-4.57,3.1-.65,3.59-1.3,4.57-4.57Zm15.24-30.48c.82,3.1,1.47,3.76,4.57,4.57-3.1,.82-3.75,1.47-4.57,4.57-.82-3.1-1.47-3.75-4.57-4.57,3.1-.65,3.59-1.3,4.57-4.57Z"/>
+      <path class="cls-2" d="M42.94,59.65c.97,0,1.75,.79,1.75,1.75,0,.97-.78,1.75-1.75,1.75H15.97c-.97,0-1.75-.78-1.75-1.75,0-.97,.78-1.75,1.75-1.75h26.97Zm-15.24-8.07c.97,0,1.75,.78,1.75,1.75,0,.97-.78,1.75-1.75,1.75H15.97c-.97,0-1.75-.79-1.75-1.75,0-.97,.78-1.75,1.75-1.75h11.73Zm47.47,19.81c0,.84-.68,1.52-1.52,1.52h-9.14c-.84,0-1.52-.68-1.52-1.52h0v-4.57c0-.84,.68-1.52,1.52-1.52h9.14c.84,0,1.52,.68,1.52,1.52h0v4.57ZM111.74,31.77c0,.84-.68,1.52-1.52,1.52h-6.1c-.84,0-1.52-.68-1.52-1.52h0V4.34c0-.84,.68-1.52,1.52-1.52h6.1c.84,0,1.52,.68,1.52,1.52h0V31.77Z"/>
+      <path class="cls-2" d="M61.45,38.26v-.4H8.12v6.1H59.27c.39-2.01,1.21-3.99,2.19-5.7Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/12.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.04 124.77">
+  <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>
+      <g>
+        <path class="cls-2" d="M47.7,40.08c-.62-.33-1.3-.5-2-.5-2.39,0-4.33,1.95-4.33,4.34,0,2.39,1.95,4.33,4.34,4.33,1.34,0,2.6-.62,3.42-1.68l20.36,13.93c-.31,.6-.47,1.27-.48,1.95-.11,2.6,1.91,4.79,4.5,4.91,2.6,.11,4.79-1.91,4.91-4.5s-1.91-4.79-4.5-4.91c-.07,0-.13,0-.2,0-1.2,0-2.35,.45-3.23,1.25l-20.62-14.1c.1-.38,.15-.76,.15-1.15,0-.9-.3-1.78-.83-2.5l11.2-11.07c.67,.41,1.44,.63,2.23,.63,.78,0,1.55-.21,2.23-.6l8.99,10.22c-1.21,2.06-.53,4.72,1.54,5.93,2.06,1.21,4.72,.53,5.93-1.54,1-1.7,.73-3.85-.66-5.25l11.97-11.85c.47,.17,.96,.25,1.45,.25,2.41,.01,4.37-1.93,4.38-4.33,.01-2.41-1.93-4.37-4.33-4.38-2.41-.01-4.37,1.93-4.38,4.33,0,1.13,.42,2.21,1.2,3.03l-11.95,11.85c-.47-.16-.96-.25-1.45-.25-.89-.02-1.77,.23-2.5,.73l-8.92-10.17c1.31-2.01,.74-4.69-1.27-6s-4.69-.74-6,1.27c-.46,.71-.7,1.53-.7,2.37,0,.83,.23,1.64,.68,2.33l-11.15,11.15Zm-2.88,10.3l-12.32,20.82-1.5-9.34c1.66-1.02,2.18-3.2,1.15-4.86-1.02-1.66-3.2-2.18-4.86-1.15-1.66,1.02-2.18,3.2-1.15,4.86,.29,.47,.68,.86,1.15,1.15l-1.48,9.19-12.25-20.67c-6.91,3.01-11.77,7.94-12.83,13.65l-.23,25.75c9.45,1.9,19.05,2.95,28.68,3.13,9.63-.18,19.23-1.23,28.68-3.13l-.23-25.75c-1.03-5.71-5.89-10.65-12.83-13.65ZM14,33.62h.23c1.88,8.54,7.87,16.11,15.03,16.11s13.1-7.51,15.03-16.08h.18c2.15,.45,4.38-1.6,5.01-4.61s-.55-5.81-2.71-6.26c-.31-.06-.64-.06-.95,0v-.5c-.25-8.89-7.65-15.89-16.53-15.66-8.89-.24-16.29,6.77-16.53,15.66v.5c-.34-.07-.69-.07-1.03,0-2.13,.45-3.36,3.26-2.71,6.26,.65,3.01,2.86,5.03,4.98,4.58Z"/>
+        <path class="cls-3" d="M128.25,38.43c-1.17-4.21-4.33-7.57-8.47-8.99l-8.09,13.68-.98-6.11c1.08-.69,1.4-2.13,.71-3.22-.69-1.08-2.13-1.4-3.22-.71s-1.4,2.13-.71,3.22c.18,.29,.43,.53,.71,.71l-.93,6.11-8.07-13.63c-4.15,1.38-7.35,4.73-8.54,8.94v17.01c6.24,1.26,12.58,1.96,18.94,2.08,6.35-.12,12.68-.82,18.91-2.08l-.28-17.01Zm-28.73-20.04h.15c1.23,5.64,5.19,10.62,9.89,10.62s8.64-5.01,9.89-10.62c1.43,.3,2.91-1.05,3.33-3.03s-.38-3.83-1.78-4.13c-.21-.03-.42-.03-.63,0v-.33c-.29-6.02-5.41-10.67-11.43-10.39-5.62,.27-10.12,4.77-10.39,10.39v.33c-.22-.04-.45-.04-.68,0-1.4,.3-2.2,2.15-1.78,4.13,.43,1.98,2.08,3.33,3.41,3.03Zm-3.41,76.05l-8.64,14.58-1.05-6.54c1.2-.69,1.61-2.22,.92-3.42-.69-1.2-2.22-1.61-3.42-.92s-1.61,2.22-.92,3.42c.22,.38,.54,.7,.92,.92l-1.05,6.44-8.59-14.48c-4.4,1.51-7.76,5.09-8.99,9.57l-.15,18.06c6.6,1.33,13.31,2.07,20.04,2.2,6.73-.13,13.44-.87,20.04-2.2l-.15-18.06c-1.22-4.47-4.57-8.05-8.94-9.57Zm-10.95-30.71c-6.23-.17-11.42,4.74-11.6,10.97v.35c-.24-.04-.49-.04-.73,0-1.5,.33-2.35,2.28-1.9,4.38s2.03,3.56,3.53,3.23h.18c1.3,5.99,5.51,11.3,10.5,11.3s9.19-5.29,10.5-11.27c1.5,.33,3.08-1.13,3.53-3.23s-.4-4.06-1.9-4.38c-.22-.04-.45-.04-.68,0v-.35c-.16-6.17-5.25-11.07-11.42-11h0Z"/>
+      </g>
+      <path class="cls-1" d="M96.29,94.24l-8.64,14.58-1.05-6.54c1.2-.69,1.61-2.22,.92-3.42-.69-1.2-2.22-1.61-3.42-.92s-1.61,2.22-.92,3.42c.22,.38,.54,.7,.92,.92l-1.05,6.44-8.59-14.48c-4.4,1.51-7.76,5.09-8.99,9.57l-.15,18.06c6.6,1.33,13.31,2.07,20.04,2.2,6.73-.13,13.44-.87,20.04-2.2l-.15-18.06c-1.22-4.47-4.57-8.05-8.94-9.57Z"/>
+      <path class="cls-1" d="M85.35,63.53c-6.23-.17-11.42,4.74-11.6,10.97v.35c-.24-.04-.49-.04-.73,0-1.5,.33-2.35,2.28-1.9,4.38s2.03,3.56,3.53,3.23h.18c1.3,5.99,5.51,11.3,10.5,11.3s9.19-5.29,10.5-11.27c1.5,.33,3.08-1.13,3.53-3.23s-.4-4.06-1.9-4.38c-.22-.04-.45-.04-.68,0v-.35c-.16-6.17-5.25-11.07-11.42-11h0Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/13.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.02 113.04">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #002f55;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke: aqua;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        fill: #eab518;
+      }
+
+      .cls-3 {
+        fill: aqua;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <g>
+      <path class="cls-1" d="M48.56,.5c-1.14,0-2.5,0-4,1.5C32.57,13.47,8.58,16.47,8.58,16.47c-4.4,0-7.99,3.6-7.99,7.99v43.94c0,11.99,23.99,43.94,47.96,43.94s47.96-31.95,47.96-43.94V24.46c0-4.39-3.6-7.99-7.99-7.99,0,0-23.97-2.75-35.97-14.23-1.5-1.75-2.85-1.75-4-1.75Z"/>
+      <path class="cls-2" d="M88.53,16.6s-23.97-2.75-35.97-14.23c-1.47-1.73-2.81-1.75-3.94-1.75V56.49h47.9V24.59c0-4.39-3.59-7.99-7.99-7.99ZM48.62,56.49H.61v11.91c0,11.99,23.99,43.94,47.96,43.94h.06V56.49h-.01Z"/>
+      <path class="cls-3" d="M48.51,56.69H.5v11.91c0,11.99,23.99,43.94,47.96,43.94h.06V56.69h-.01Z"/>
+      <path class="cls-1" d="M24.42,73.25c0,.1-.03,.2-.03,.31v4.22c0,2.94,2.38,5.32,5.33,5.32h2.79c2.94,0,5.32-2.38,5.33-5.32v-3.86h21.54v3.86c0,2.94,2.38,5.32,5.33,5.32h2.79c2.94,0,5.32-2.38,5.33-5.32h0v-4.22c0-.09-.02-.18-.03-.27,1.93-.96,3.27-2.93,3.27-5.24v-9.37c0-2.76-1.92-5.07-4.49-5.69l-3.81-13.18c-.94-3.28-3.94-5.55-7.36-5.55h-23.38c-3.42,0-6.42,2.27-7.36,5.55l-3.79,13.13c-2.65,.56-4.64,2.92-4.64,5.74v9.37c0,2.27,1.3,4.22,3.19,5.19Zm33.91-2.98h-19.37v-4.07h19.37v4.07Zm12.77-10.41c0,1.94-1.57,3.52-3.51,3.52h0c-1.94,0-3.52-1.57-3.52-3.51h0c0-1.95,1.58-3.52,3.52-3.52h0c1.94,0,3.52,1.58,3.52,3.52ZM31.75,42.98c.83-3.27,3.51-5.53,6.57-5.53h20.79c3.05,0,5.71,2.26,6.57,5.53l2.52,9.83H29.23s2.52-9.83,2.52-9.83Zm-2.12,13.35c1.94,0,3.52,1.58,3.52,3.52,0,1.94-1.57,3.52-3.51,3.52h0c-1.94,0-3.52-1.57-3.52-3.52h0c0-1.94,1.57-3.52,3.52-3.52h0Zm24.24-26.77c-1.83,0-3.5,1.06-4.27,2.72h8.51c-.76-1.66-2.42-2.73-4.25-2.72Zm-13.33,1.74v1.97l5.83-.99-5.83-.99Zm4.6-9.14l-1.4,1.39,4.82,3.43-3.43-4.82Zm9.72-3.21h-1.98l.99,5.83,.99-5.83Zm7.74,3.21l-3.43,4.82,4.82-3.43-1.4-1.39Zm4.6,11.11v-1.97l-5.83,.99,5.83,.99Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/14.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 107.62 107.69">
+  <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>
+      <g>
+        <path class="cls-1" d="M19.17,.5c9.91,0,18.1,7.75,18.64,17.64l.03,1.02v13.33h-10.67v-13.33c0-4.42-3.59-8-8-8-4.12,0-7.56,3.13-7.96,7.23l-.04,.77V88.5c0,4.42,3.59,8,8,8,4.12,0,7.56-3.13,7.96-7.23l.04-.77v-13.33h10.67v13.33c.01,10.31-8.33,18.68-18.64,18.69-9.93,.01-18.14-7.75-18.67-17.67l-.03-1.02V19.17c0-10.31,8.36-18.67,18.67-18.67ZM96.97,76.11c-3.29,0-5.93,1.11-7.94,3.33-1.96,2.09-2.94,4.82-2.99,8.23h4.99c.09-2.39,.6-4.22,1.54-5.42,.94-1.28,2.35-1.92,4.22-1.92,1.75,0,3.07,.38,3.97,1.19,.85,.81,1.32,2.05,1.32,3.71s-.68,3.33-2.01,4.82c-.85,.9-2.22,2.05-4.18,3.41-3.54,2.43-5.89,4.31-7,5.59-2,2.22-3.09,5.12-3.03,8.11h21.25v-4.39h-15.02c.68-1.54,2.56-3.33,5.67-5.38,2.99-2.01,5.12-3.63,6.31-4.91,1.96-2.18,2.99-4.57,2.99-7.21s-.94-4.91-2.82-6.61c-1.92-1.71-4.35-2.56-7.3-2.56ZM61.83,.5c10.31,0,18.67,8.36,18.67,18.67V88.5c0,10.31-8.36,18.67-18.67,18.66-10.31,0-18.66-8.36-18.66-18.66V19.17C43.17,8.86,51.52,.5,61.83,.5h0Zm.02,10.67c-4.12,0-7.57,3.13-7.97,7.23l-.04,.77-.04,69.33c0,4.42,3.58,8,8,8,4.12,0,7.56-3.13,7.96-7.22l.04-.77,.04-69.33c0-4.42-3.58-8-8-8Z"/>
+        <path class="cls-3" d="M96.81,75.37c-3.29,0-5.93,1.11-7.94,3.33-1.96,2.09-2.94,4.82-2.99,8.23h4.99c.09-2.39,.6-4.22,1.54-5.42,.94-1.28,2.35-1.92,4.22-1.92,1.75,0,3.07,.38,3.97,1.19,.85,.81,1.32,2.05,1.32,3.71s-.68,3.33-2.01,4.82c-.85,.9-2.22,2.05-4.18,3.41-3.54,2.43-5.89,4.31-7,5.59-2,2.22-3.09,5.12-3.03,8.11h21.25v-4.39h-15.02c.68-1.54,2.56-3.33,5.67-5.38,2.99-2.01,5.12-3.63,6.31-4.91,1.96-2.18,2.99-4.57,2.99-7.21s-.94-4.91-2.82-6.61c-1.92-1.71-4.35-2.56-7.3-2.56Z"/>
+      </g>
+      <path class="cls-2" d="M61.85,.5c10.31,0,18.67,8.36,18.67,18.67V88.5c0,10.31-8.36,18.67-18.67,18.66-10.31,0-18.66-8.36-18.66-18.66V19.17C43.19,8.86,51.55,.5,61.85,.5h0Zm.02,10.67c-4.12,0-7.57,3.13-7.97,7.23l-.04,.77-.04,69.33c0,4.42,3.58,8,8,8,4.12,0,7.56-3.13,7.96-7.22l.04-.77,.04-69.33c0-4.42-3.58-8-8-8Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/16.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 112.72 113.01">
+  <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-1" d="M8.36,36.5c0,19.88,16.12,36,36,36s36-16.12,36-36h0C80.36,16.62,64.24,.5,44.36,.5S8.36,16.62,8.36,36.5h0Z"/>
+      <path class="cls-3" d="M98.47,71.35c-7.25,0-13.19,5.61-13.71,12.72-.53-7.11-6.46-12.72-13.71-12.72s-13.74,6.09-13.74,13.72c0,13.69,20.65,27.44,27.48,27.44s27.44-13.72,27.44-27.4c0-7.55-6.16-13.76-13.75-13.76Z"/>
+      <path class="cls-2" d="M57.3,85.06c0-2.64,.74-5.1,2.01-7.18-3.07,1.11-6.31,1.89-9.66,2.29,.01,.11,.01,.22,.01,.34,0,3.03-2.45,5.49-5.49,5.49s-5.49-2.45-5.49-5.49c0-.12,0-.25,.01-.38-7.24-.93-13.92-3.61-19.61-7.61-10.34,.47-18.59,9.03-18.59,19.49v12.04c0,4.64,3.76,8.4,8.4,8.4h31.48c-1.04-7.07-1.67-14.7-1.67-16.25,0-3.03,2.45-5.49,5.49-5.49s5.49,2.45,5.49,5.49c0,1.55-.64,9.18-1.67,16.25h32.31c.78,0,1.53-.1,2.22-.3-8.26-2.21-25.24-14.68-25.24-27.09Z"/>
+    </g>
+  </g>
+</svg>

src/assets/img/5.svg

@@ -0,0 +1,114 @@
+<svg width="1109.699219" height="100.000000" viewBox="0 0 1109.7 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<filter id="filter_2_4459_dd" x="144.099609" y="-13.000000" width="828.000000" height="139.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="17.6667" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4460_dd" x="329.099609" y="-13.000000" width="458.000000" height="139.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="17.6667" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4463_dd" x="388.099609" y="48.000000" width="290.000000" height="18.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="0.666667" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4542_dd" x="165.099609" y="10.000000" width="779.000000" height="90.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="7.66667" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4543_dd" x="187.099609" y="54.000000" width="735.000000" height="5.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="0.333333" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4544_dd" x="367.099609" y="52.000000" width="375.000000" height="9.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="1" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4545_dd" x="482.099609" y="52.000000" width="145.000000" height="9.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="1" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4546_dd" x="520.099609" y="51.000000" width="69.000000" height="11.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="1" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_2_4547_dd" x="519.099609" y="55.000000" width="71.000000" height="3.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="0.333333" result="effect_layerBlur_1"/>
+		</filter>
+		<linearGradient id="paint_linear_2_4457_0" x1="558.349548" y1="1.000000" x2="558.349548" y2="56.585690" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#4FA7FF" stop-opacity="0.000000"/>
+			<stop offset="1.000000" stop-color="#4FA7FF" stop-opacity="0.125490"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_4462_0" x1="558.349548" y1="1.000000" x2="558.349548" y2="56.585690" gradientUnits="userSpaceOnUse">
+			<stop offset="0.373968" stop-color="#5B9AE5" stop-opacity="0.000000"/>
+			<stop offset="1.000000" stop-color="#5B9AE5" stop-opacity="0.349020"/>
+		</linearGradient>
+		<radialGradient id="paint_radial_2_4464_0" cx="0.000000" cy="0.000000" r="1.000000" gradientUnits="userSpaceOnUse" gradientTransform="translate(551.1 57) rotate(90) scale(28.5 202.348)">
+			<stop stop-color="#5C9BE3" stop-opacity="0.866667"/>
+			<stop offset="1.000000" stop-color="#5C9BE3" stop-opacity="0.000000"/>
+		</radialGradient>
+		<linearGradient id="paint_linear_2_4547_0" x1="521.452576" y1="56.999878" x2="589.099609" y2="56.999878" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#FFFFFF" stop-opacity="0.000000"/>
+			<stop offset="0.355380" stop-color="#FFFFFF"/>
+			<stop offset="0.746039" stop-color="#FFFFFF"/>
+			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_4548_0" x1="543.550598" y1="56.999878" x2="566.099609" y2="56.999878" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#FFFFFF" stop-opacity="0.000000"/>
+			<stop offset="0.355380" stop-color="#FFFFFF"/>
+			<stop offset="0.746039" stop-color="#FFFFFF"/>
+			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.000000"/>
+		</linearGradient>
+	</defs>
+	<path id="1" d="M7.09961 1C27.0996 3 80.7988 20.3 97.5996 25.5C118.6 32 173.6 52.5 224.1 54C264.5 55.2 458.6 57 550.6 56.5C642.6 57 852.199 55.2 892.6 54C943.1 52.5 998.1 32 1019.1 25.5C1035.9 20.3 1089.6 3 1109.6 1L7.09961 1Z" fill-rule="evenodd" fill="url(#paint_linear_2_4457_0)" fill-opacity="0.650000"/>
+	<mask id="mask2_4458" mask-type="alpha" maskUnits="userSpaceOnUse" x="7.099609" y="1.000000" width="1102.500000" height="55.585693">
+		<path id="11" d="M7.09961 1C27.0996 3 80.7988 20.3 97.5996 25.5C118.6 32 173.6 52.5 224.1 54C264.5 55.2 458.6 57 550.6 56.5C642.6 57 852.199 55.2 892.6 54C943.1 52.5 998.1 32 1019.1 25.5C1035.9 20.3 1089.6 3 1109.6 1L7.09961 1Z" fill-rule="evenodd" fill="#D9D9D9"/>
+	</mask>
+	<g mask="url(#mask2_4458)">
+		<g filter="url(#filter_2_4459_dd)">
+			<ellipse id="Ellipse 195" rx="361.000000" ry="16.500000" transform="matrix(1 0 0 1 558.1 56.5)" fill="#178EFF" fill-opacity="0.34"/>
+		</g>
+	</g>
+	<g mask="url(#mask2_4458)">
+		<g filter="url(#filter_2_4460_dd)">
+			<ellipse id="Ellipse 196" rx="176.000000" ry="16.500000" transform="matrix(1 0 0 1 558.1 56.5)" fill="#178EFF" fill-opacity="0.34"/>
+		</g>
+	</g>
+	<path id="3" d="M97.5996 25.5C118.6 32 173.6 52.5 224.1 54C264.5 55.2 458.6 57 550.6 56.5C642.6 57 852.199 55.2 892.6 54C943.1 52.5 998.1 32 1019.1 25.5C1035.9 20.3 1089.6 3 1109.6 1L7.09961 1C27.0996 3 80.7988 20.3 97.5996 25.5Z" stroke="url(#paint_linear_2_4462_0)" stroke-width="2.000000"/>
+	<g opacity="0.600000" filter="url(#filter_2_4463_dd)">
+		<ellipse id="Ellipse 197" rx="143.000000" ry="7.000000" transform="matrix(1 0 0 1 533.1 57)" fill="#70B7FF" fill-opacity="0.098"/>
+	</g>
+	<path id="11" d="M90.5996 25.5C111.6 32 166.6 52.5 217.1 54C257.5 55.2 451.6 57 543.6 56.5C635.6 57 845.199 55.2 885.6 54C936.1 52.5 991.1 32 1012.1 25.5C1028.9 20.3 1082.6 3 1102.6 1L0.0996094 1C20.0996 3 73.7988 20.3 90.5996 25.5Z" stroke="url(#paint_radial_2_4464_0)" stroke-width="2.000000"/>
+	<g filter="url(#filter_2_4542_dd)">
+		<ellipse id="Ellipse 224" cx="554.599609" cy="55.000000" rx="366.500000" ry="22.000000" fill="#0FAFFF" fill-opacity="0.13"/>
+	</g>
+	<g filter="url(#filter_2_4543_dd)">
+		<ellipse id="Ellipse 225" rx="366.500000" ry="1.500000" transform="matrix(1 0 0 1 554.6 56.5)" fill="#0DA8F7" fill-opacity="0.26"/>
+	</g>
+	<g opacity="0.600000" filter="url(#filter_2_4544_dd)">
+		<ellipse id="Ellipse 226" rx="184.500000" ry="1.500000" transform="matrix(1 0 0 1 554.6 56.5)" fill="#15BBFF"/>
+	</g>
+	<g opacity="0.300000" filter="url(#filter_2_4545_dd)">
+		<ellipse id="Ellipse 227" rx="69.500000" ry="1.500000" transform="matrix(1 0 0 1 554.6 56.5)" fill="#4ECAFF"/>
+	</g>
+	<g opacity="0.300000" filter="url(#filter_2_4546_dd)">
+		<ellipse id="Ellipse 228" rx="31.500000" ry="2.500000" transform="matrix(1 0 0 1 554.6 56.5)" fill="#9CDFFF" fill-opacity="1"/>
+	</g>
+	<g filter="url(#filter_2_4547_dd)">
+		<ellipse id="Ellipse 229" rx="34.500000" ry="0.500000" transform="matrix(1 0 0 1 554.6 56.5)" fill="url(#paint_linear_2_4547_0)"/>
+	</g>
+	<ellipse id="Ellipse 230" rx="11.500000" ry="0.500000" transform="matrix(1 0 0 1 554.6 56.5)" fill="url(#paint_linear_2_4548_0)"/>
+</svg>

src/assets/img/6.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1163 99">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#_未命名的渐变_4-11);
+      }
+
+      .cls-2 {
+        fill: url(#_未命名的渐变_4-2);
+      }
+
+      .cls-3 {
+        fill: url(#_未命名的渐变_4-8);
+      }
+
+      .cls-4 {
+        fill: url(#_未命名的渐变_4-5);
+      }
+
+      .cls-5 {
+        fill: url(#_未命名的渐变_4);
+      }
+
+      .cls-6 {
+        fill: url(#_未命名的渐变_4-10);
+      }
+
+      .cls-7 {
+        filter: url(#drop-shadow-1);
+      }
+
+      .cls-8 {
+        fill: url(#_未命名的渐变_4-4);
+      }
+
+      .cls-9 {
+        fill: url(#_未命名的渐变_4-3);
+      }
+
+      .cls-10 {
+        fill: url(#_未命名的渐变_4-6);
+      }
+
+      .cls-11 {
+        fill: url(#_未命名的渐变_4-7);
+      }
+
+      .cls-12 {
+        fill: url(#_未命名的渐变_4-9);
+      }
+    </style>
+    <filter id="drop-shadow-1" filterUnits="userSpaceOnUse">
+      <feOffset dx="5" dy="10"/>
+      <feGaussianBlur result="blur" stdDeviation="5"/>
+      <feFlood flood-color="#0089e5" flood-opacity=".75"/>
+      <feComposite in2="blur" operator="in"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <linearGradient id="_未命名的渐变_4" data-name="未命名的渐变 4" x1="54.01" y1="5.99" x2="54.01" y2="73.28" gradientUnits="userSpaceOnUse">
+      <stop offset=".34" stop-color="#fff"/>
+      <stop offset=".44" stop-color="#f9fcff"/>
+      <stop offset=".56" stop-color="#ebf4ff"/>
+      <stop offset=".68" stop-color="#d2e8ff"/>
+      <stop offset=".82" stop-color="#b0d7ff"/>
+      <stop offset=".96" stop-color="#85c1ff"/>
+      <stop offset="1" stop-color="#77baff"/>
+    </linearGradient>
+    <linearGradient id="_未命名的渐变_4-2" data-name="未命名的渐变 4" x1="158.79" x2="158.79" y2="71.79" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-3" data-name="未命名的渐变 4" x1="263.66" y1="7.77" x2="263.66" y2="73.38" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-4" data-name="未命名的渐变 4" x1="368.48" x2="368.48" y2="73.38" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-5" data-name="未命名的渐变 4" x1="473.31" y1="7.77" x2="473.31" y2="71.79" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-6" data-name="未命名的渐变 4" x1="578.08" y1="6.18" x2="578.08" y2="73.38" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-7" data-name="未命名的渐变 4" x1="682.91" x2="682.91" y2="73.38" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-8" data-name="未命名的渐变 4" x1="787.73" x2="787.73" y2="73.38" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-9" data-name="未命名的渐变 4" x1="892.65" y1="6.08" x2="892.65" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-10" data-name="未命名的渐变 4" x1="997.42" x2="997.42" y2="73.38" xlink:href="#_未命名的渐变_4"/>
+    <linearGradient id="_未命名的渐变_4-11" data-name="未命名的渐变 4" x1="1102.2" y1="6.18" x2="1102.2" y2="71.32" xlink:href="#_未命名的渐变_4"/>
+  </defs>
+  <g class="cls-7">
+    <path class="cls-5" d="M29.4,41.74l-8.98,31.54H10.77l8.89-31.54h9.73Zm19.47-2.9h-4.68l-3.93,28.36c-.31,1.81-.89,3.26-1.73,4.35-.84,1.09-1.76,1.64-2.76,1.64h-13.66l5.24-8.52,3.65-25.83H15.73l1.12-8.14,4.02-10.86h9.73l-3,10.58h4.49l1.97-13.66h-15.07l1.31-8.89h31.35l-1.31,8.89h-3.09l-1.96,13.66h4.77l-1.22,8.42Zm18.81-24.52h6.83l.47-2.9-2.99-3.56h16.75l-.94,6.46h9.45l-1.22,8.89h-9.45l-1.03,7.3h7.58l-1.31,8.89h-7.58l-1.03,7.3h7.58l-1.22,8.89h-7.58l-1.03,7.3h9.55l-1.22,8.8h-29.67l-.19,1.5h-12.92l7.21-51.38-2.43,.84,1.5-10.67,16.1-5.99-1.22,8.33Zm-6.83,48.57h6.93l1.03-7.3h-6.93l-1.03,7.3Zm2.25-16.19h6.93l1.03-7.3h-6.93l-1.03,7.3Zm2.34-16.19h6.83l1.03-7.3h-6.83l-1.03,7.3Z"/>
+    <path class="cls-2" d="M191.78,28.27l-.66,4.4h7.11l-1.22,8.89h-7.11l-1.4,9.83-17.13,7.96,23.21,12.45h-28.45l-9.92-5.33-11.42,5.33h-28.45l26.58-12.45-14.88-7.96,1.4-9.83h-7.11l1.22-8.89h7.11l.66-4.4h16l-.66,4.4h28.45l.65-4.4h16Zm-11.33-8.05h-35.56l-.75,5.33h-19.56l1.96-14.23h28.45l.28-1.87-3-3.46h21.25l-.75,5.33h28.45l-1.96,14.23h-19.56l.75-5.33Zm-7.02,24.9l.47-3.56h-28.45l-.47,3.56,13.2,7.11,15.25-7.11Z"/>
+    <path class="cls-9" d="M242.32,38h-17.78l20.4-27.98-1.97-2.25h21.34l-21.99,30.23Zm36.78,35.38l-1.12-2.43-49.51,2.43,1.5-10.48,26.58-37.34h16.85l-24.99,36.41,24.8-1.31-6.27-13.76h16l12.17,26.49h-16Zm8.33-65.61l15.35,30.23h-17.78l-15.35-30.23h17.78Z"/>
+    <path class="cls-8" d="M349.3,23.77h17.78l-9.83,10.67h4.4l8.42,7.67,10.67-7.67h3.74l-6.74-10.67h17.78l10.2,16h-9.64l-15.91,11.51,24.33,22.09h-23.12l-14.13-12.82-17.88,12.82h-23.12l30.88-22.09-12.54-11.51h-10.01l14.69-16Zm16-12.45l.28-1.78-3-3.56h21.34l-.75,5.33h27.52l-1.31,8.89h-72.91l1.31-8.89h27.52Z"/>
+    <path class="cls-4" d="M482.95,22l-5.24,37.34h-42.68l4.68-33.79-3-3.56h46.23Zm28.64-14.23l-1.22,8.89h-3.56l-6.93,48.76c-.25,1.75-1.06,3.25-2.43,4.49-1.37,1.25-2.96,1.87-4.77,1.87h-18.53l8.33-8.89,6.55-46.23h-53.35l1.22-8.89h74.69Zm-45.95,23.12h-10.67l-2.71,19.56h10.67l2.71-19.56Z"/>
+    <path class="cls-10" d="M564.09,60.46l-5.43-5.52-2.53,18.34h-14.41l2.99-21.9h-6.74l16.47-24.43h-11.89l1.31-8.8h24.52l-1.68,11.51-6.08,8.89,5.71,5.8-2.25,16.1Zm1.22-43.9h-12.07l-1.5-8.14-1.78-2.25h13.48l1.87,10.39Zm36.59,3.65l-22.18,53.16h-13.2l22.27-53.16h13.1Zm-27.24,28.45h-6.36l5.71-40.9h44.18l-5.71,40.9h-13.38l4.59-32.94h-17.03l-.84,6.18-11.14,26.77Zm12.17,24.71l5.52-22.27h13.29l-3,12.07h7.58l4.4-3.84-2.06,14.04h-25.74Z"/>
+    <path class="cls-11" d="M670.04,16.66l-8.05,56.72h-17.78l7.67-54.19-7.3,1.03,1.5-10.58,25.46-3.65-1.5,10.67Zm49.79,12.45l-20.59,7.21-3.46,24.8h17.78l4.02-3.56-1.97,14.23h-39.12l4.02-28.83-11.23,3.93,1.78-12.45,11.14-3.93,3-20.96-3-3.56h21.34l-2.53,17.97,20.59-7.3-1.78,12.45Z"/>
+    <path class="cls-3" d="M815.85,39.78l-1.96,14.23h-44.55l-.38,2.62h46.33l-2.43,16.75h-64.02l4.77-33.6h-7.11l1.97-14.23h28.83l-.38-2.53h20.68l.37,2.53h28.73l-1.96,14.23h-8.89Zm-43.61-30.23h17.6l-.94,7.11h-7.3l3,5.33h-14.23l-2.62-4.68-2.71,4.68h-16l7.86-13.57-2.06-2.43h19.56l-2.15,3.56Zm-7.58,27.52h42.68l.37-2.62h-42.68l-.37,2.62Zm3.28,26.67l-.37,2.71h28.54l.38-2.71h-28.55Zm2.81-19.56l-.37,2.71h26.67l.37-2.71h-26.67Zm38.93-34.63h19.28l-.94,7.11h-8.98l2.9,5.33h-14.23l-2.62-4.68-2.71,4.68h-16l7.86-13.57-2.06-2.43h19.56l-2.06,3.56Z"/>
+    <path class="cls-12" d="M862.27,18.06l1.31-9.17-2.34-2.71h18.44l-1.68,11.89h3.28l-1.22,8.33h-3.28l-1.4,10.11,2.53-.75-1.4,9.73-2.43,.75-2.9,20.87c-.25,1.81-1.08,3.29-2.48,4.45-1.4,1.15-2.98,1.73-4.73,1.73h-14.51l6.27-8.42,1.87-13.38-5.24,1.59,1.4-9.83,5.24-1.59,2.15-15.26h-4.96l1.22-8.33h4.87Zm32.29,44.92l1.78-12.92h-14.23l1.22-8.42h46.23l-1.22,8.42h-14.51l-1.78,12.92h16.85l-1.22,8.7h-50.17l1.22-8.7h15.82Zm-13.01-23.12l7.58-11.79h16.1l-7.58,11.79h-16.1Zm38.37-20.31h-20.87l-.94,6.55h-15.35l1.96-13.48h16.57l.47-3-3.56-3.56h21.71l-.94,6.55h16.85l-1.97,13.48h-14.88l.94-6.55Zm-4.02,20.31l-4.4-11.79h16.1l4.4,11.79h-16.1Z"/>
+    <path class="cls-6" d="M986.38,49.51h-28.45l4.3-30.14h28.36l1.4-9.83-3-3.56h21.34l-1.96,13.38h28.55l-4.31,30.14h-28.45l-3.37,23.87h-17.78l3.37-23.87Zm1.22-8.89l1.78-12.35h-10.67l-1.68,12.35h10.58Zm19.56-12.35l-1.78,12.35h10.76l1.68-12.35h-10.67Z"/>
+    <path class="cls-1" d="M1084.28,24.99l-7.86,35.19h-14.23l7.86-35.19h14.23Zm13.95,35.66h21.34l4.21-4.3-2.15,14.97h-40.81l8.05-57.18-3.09-3.46h19.47l-7.02,49.98Zm24.24-54.47l.94,21.62h-14.23l-.94-21.62h14.23Zm19.75,16.57l-1.97,42.58h-14.41l1.97-42.58h14.41Z"/>
+  </g>
+</svg>

src/assets/img/8.svg

@@ -0,0 +1,70 @@
+<svg width="33.000000" height="1059.074097" viewBox="0 0 33 1059.07" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<filter id="filter_2_3741_dd" x="2.000000" y="445.039429" width="54.000000" height="160.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="6" result="effect_layerBlur_1"/>
+		</filter>
+		<linearGradient id="paint_linear_2_3738_0" x1="32.000000" y1="505.042297" x2="8.000000" y2="505.042297" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#4087E5"/>
+			<stop offset="0.711239" stop-color="#4087E5" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3743_0" x1="22.500000" y1="0.039429" x2="22.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.009966" stop-color="#6293E6" stop-opacity="0.000000"/>
+			<stop offset="0.039818" stop-color="#6293E6" stop-opacity="0.203922"/>
+			<stop offset="0.546942" stop-color="#638FE4" stop-opacity="0.341176"/>
+			<stop offset="0.952498" stop-color="#6192E4" stop-opacity="0.266667"/>
+			<stop offset="0.986289" stop-color="#638FE4" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3744_0" x1="22.500000" y1="0.039429" x2="22.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.050243" stop-color="#B2CCFF" stop-opacity="0.000000"/>
+			<stop offset="0.144521" stop-color="#B2CCFF" stop-opacity="0.039216"/>
+			<stop offset="0.265633" stop-color="#A7CFFF" stop-opacity="0.125490"/>
+			<stop offset="0.561372" stop-color="#ABD3FF" stop-opacity="0.250980"/>
+			<stop offset="0.684881" stop-color="#AAD4FF" stop-opacity="0.094118"/>
+			<stop offset="0.862919" stop-color="#AAD4FF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3744_1" x1="22.500000" y1="0.039429" x2="22.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.390089" stop-color="#B7D8FF" stop-opacity="0.000000"/>
+			<stop offset="0.436701" stop-color="#B7D8FF" stop-opacity="0.572549"/>
+			<stop offset="0.505342" stop-color="#B7D6FF" stop-opacity="0.545098"/>
+			<stop offset="0.555147" stop-color="#B7D8FF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3745_0" x1="12.500000" y1="0.039429" x2="12.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.366736" stop-color="#6D91DA" stop-opacity="0.000000"/>
+			<stop offset="0.390089" stop-color="#6D91DA" stop-opacity="0.027451"/>
+			<stop offset="0.436701" stop-color="#5E8BDD" stop-opacity="0.329412"/>
+			<stop offset="0.469187" stop-color="#5C8BDE" stop-opacity="0.788235"/>
+			<stop offset="0.532680" stop-color="#5C8BDD" stop-opacity="0.992157"/>
+			<stop offset="0.604397" stop-color="#5C8BDD" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3746_0" x1="12.500000" y1="0.039429" x2="12.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.366736" stop-color="#6D91DA" stop-opacity="0.000000"/>
+			<stop offset="0.435996" stop-color="#ACCFFF" stop-opacity="0.000000"/>
+			<stop offset="0.464768" stop-color="#ABCDFF" stop-opacity="0.203922"/>
+			<stop offset="0.480826" stop-color="#ADCFFF" stop-opacity="0.996078"/>
+			<stop offset="0.514715" stop-color="#ADCFFF" stop-opacity="0.996078"/>
+			<stop offset="0.557943" stop-color="#ADCFFF" stop-opacity="0.000000"/>
+		</linearGradient>
+	</defs>
+	<g opacity="0.250000">
+		<path id="1" d="M13 0.0394287L16 231.539C17 274.039 19.6992 361.339 22.5 370.539C26 382.039 32 413.539 32 435.539C32 453.139 32 497.206 32 517.039C32 536.873 32 581.939 32 599.539C32 621.539 26 653.039 22.5 664.539C19.6992 673.739 17 761.039 16 803.539L13 1059.04L8 1059.04L8 0.0394287L13 0.0394287Z" fill-rule="evenodd" fill="url(#paint_linear_2_3738_0)"/>
+	</g>
+	<path id="2" d="M13 0.0394287L16 228.539C17 271.039 19.6992 358.339 22.5 367.539C26 379.039 32 410.539 32 432.539C32 450.139 32 494.206 32 514.039C32 533.873 32 578.939 32 596.539C32 618.539 26 650.039 22.5 661.539C19.6992 670.739 17 758.039 16 800.539L13 1059.04L10 1059.04L10 0.0394287L13 0.0394287Z" fill-rule="evenodd" fill="#3F88E3" fill-opacity="0.109804"/>
+	<mask id="mask2_3740" mask-type="alpha" maskUnits="userSpaceOnUse" x="9.000000" y="0.039429" width="22.000000" height="1058.999878">
+		<path id="11" d="M12 0.0394287L15 228.539C16 271.039 18.6992 358.339 21.5 367.539C25 379.039 31 410.539 31 432.539C31 450.139 31 494.206 31 514.039C31 533.873 31 578.939 31 596.539C31 618.539 25 650.039 21.5 661.539C18.6992 670.739 16 758.039 15 800.539L12 1059.04L9 1059.04L9 0.0394287L12 0.0394287Z" fill-rule="evenodd" fill="#3F88E3"/>
+	</mask>
+	<g mask="url(#mask2_3740)">
+		<g filter="url(#filter_2_3741_dd)">
+			<ellipse id="Ellipse 179" rx="9.000000" ry="62.000000" transform="matrix(1 0 0 1 29 525.039)" fill="#489CFF" fill-opacity="0.23"/>
+		</g>
+	</g>
+	<path id="4" d="M13 0.0394287L16 228.539C17 271.039 19.6992 358.339 22.5 367.539C26 379.039 32 410.539 32 432.539C32 450.139 32 494.206 32 514.039C32 533.873 32 578.939 32 596.539C32 618.539 26 650.039 22.5 661.539C19.6992 670.739 17 758.039 16 800.539L13 1059.04" stroke="url(#paint_linear_2_3743_0)" stroke-width="2.000000"/>
+	<path id="5" d="M13 0.0394287L16 228.539C17 271.039 19.6992 358.339 22.5 367.539C26 379.039 32 410.539 32 432.539C32 450.139 32 494.206 32 514.039C32 533.873 32 578.939 32 596.539C32 618.539 26 650.039 22.5 661.539C19.6992 670.739 17 758.039 16 800.539L13 1059.04" stroke="url(#paint_linear_2_3744_0)" stroke-width="2.000000"/>
+	<path id="5" d="M13 0.0394287L16 228.539C17 271.039 19.6992 358.339 22.5 367.539C26 379.039 32 410.539 32 432.539C32 450.139 32 494.206 32 514.039C32 533.873 32 578.939 32 596.539C32 618.539 26 650.039 22.5 661.539C19.6992 670.739 17 758.039 16 800.539L13 1059.04" stroke="url(#paint_linear_2_3744_1)" stroke-width="2.000000"/>
+	<path id="6" d="M3 0.0394287L6 228.539C7 271.039 9.69922 358.339 12.5 367.539C16 379.039 22 410.539 22 432.539C22 450.139 22 494.206 22 514.039C22 533.873 22 578.939 22 596.539C22 618.539 16 650.039 12.5 661.539C9.69922 670.739 7 758.039 6 800.539L3 1059.04" stroke="url(#paint_linear_2_3745_0)" stroke-width="6.000000"/>
+	<path id="7" d="M3 0.0394287L6 228.539C7 271.039 9.69922 358.339 12.5 367.539C16 379.039 22 410.539 22 432.539C22 450.139 22 494.206 22 514.039C22 533.873 22 578.939 22 596.539C22 618.539 16 650.039 12.5 661.539C9.69922 670.739 7 758.039 6 800.539L3 1059.04" stroke="url(#paint_linear_2_3746_0)" stroke-width="6.000000"/>
+</svg>

src/assets/img/9.svg

@@ -0,0 +1,70 @@
+<svg width="29.000000" height="1059.074097" viewBox="0 0 29 1059.07" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<filter id="filter_2_3751_dd" x="-23.000000" y="445.039429" width="54.000000" height="160.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="6" result="effect_layerBlur_1"/>
+		</filter>
+		<linearGradient id="paint_linear_2_3748_0" x1="1.000000" y1="505.042297" x2="25.000000" y2="505.042297" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#4087E5"/>
+			<stop offset="0.711239" stop-color="#4087E5" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3753_0" x1="10.500000" y1="0.039429" x2="10.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.009966" stop-color="#6293E6" stop-opacity="0.000000"/>
+			<stop offset="0.039818" stop-color="#6293E6" stop-opacity="0.203922"/>
+			<stop offset="0.546942" stop-color="#638FE4" stop-opacity="0.341176"/>
+			<stop offset="0.952498" stop-color="#6192E4" stop-opacity="0.266667"/>
+			<stop offset="0.986289" stop-color="#638FE4" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3754_0" x1="10.500000" y1="0.039429" x2="10.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.050243" stop-color="#B2CCFF" stop-opacity="0.000000"/>
+			<stop offset="0.144521" stop-color="#B2CCFF" stop-opacity="0.039216"/>
+			<stop offset="0.265633" stop-color="#A7CFFF" stop-opacity="0.125490"/>
+			<stop offset="0.561372" stop-color="#ABD3FF" stop-opacity="0.250980"/>
+			<stop offset="0.684881" stop-color="#AAD4FF" stop-opacity="0.094118"/>
+			<stop offset="0.862919" stop-color="#AAD4FF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3754_1" x1="10.500000" y1="0.039429" x2="10.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.390089" stop-color="#B7D8FF" stop-opacity="0.000000"/>
+			<stop offset="0.436701" stop-color="#B7D8FF" stop-opacity="0.572549"/>
+			<stop offset="0.505342" stop-color="#B7D6FF" stop-opacity="0.545098"/>
+			<stop offset="0.555147" stop-color="#B7D8FF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3755_0" x1="16.500000" y1="0.039429" x2="16.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.366736" stop-color="#6D91DA" stop-opacity="0.000000"/>
+			<stop offset="0.390089" stop-color="#6D91DA" stop-opacity="0.027451"/>
+			<stop offset="0.436701" stop-color="#5E8BDD" stop-opacity="0.329412"/>
+			<stop offset="0.469187" stop-color="#5C8BDE" stop-opacity="0.788235"/>
+			<stop offset="0.532680" stop-color="#5C8BDD" stop-opacity="0.992157"/>
+			<stop offset="0.604397" stop-color="#5C8BDD" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_2_3756_0" x1="16.500000" y1="0.039429" x2="16.500000" y2="1059.039307" gradientUnits="userSpaceOnUse">
+			<stop offset="0.366736" stop-color="#6D91DA" stop-opacity="0.000000"/>
+			<stop offset="0.435996" stop-color="#ACCFFF" stop-opacity="0.000000"/>
+			<stop offset="0.464768" stop-color="#ABCDFF" stop-opacity="0.203922"/>
+			<stop offset="0.480826" stop-color="#ADCFFF" stop-opacity="0.996078"/>
+			<stop offset="0.514715" stop-color="#ADCFFF" stop-opacity="0.996078"/>
+			<stop offset="0.557943" stop-color="#ADCFFF" stop-opacity="0.000000"/>
+		</linearGradient>
+	</defs>
+	<g opacity="0.250000">
+		<path id="1" d="M20 0.0394287L17 231.539C16 274.039 13.3008 361.339 10.5 370.539C7 382.039 1 413.539 1 435.539C1 453.139 1 497.206 1 517.039C1 536.873 1 581.939 1 599.539C1 621.539 7 653.039 10.5 664.539C13.3008 673.739 16 761.039 17 803.539L20 1059.04L25 1059.04L25 0.0394287L20 0.0394287Z" fill-rule="evenodd" fill="url(#paint_linear_2_3748_0)"/>
+	</g>
+	<path id="2" d="M20 0.0394287L17 228.539C16 271.039 13.3008 358.339 10.5 367.539C7 379.039 1 410.539 1 432.539C1 450.139 1 494.206 1 514.039C1 533.873 1 578.939 1 596.539C1 618.539 7 650.039 10.5 661.539C13.3008 670.739 16 758.039 17 800.539L20 1059.04L23 1059.04L23 0.0394287L20 0.0394287Z" fill-rule="evenodd" fill="#3F88E3" fill-opacity="0.109804"/>
+	<mask id="mask2_3750" mask-type="alpha" maskUnits="userSpaceOnUse" x="2.000000" y="0.039429" width="22.000000" height="1058.999878">
+		<path id="11" d="M21 0.0394287L18 228.539C17 271.039 14.3008 358.339 11.5 367.539C8 379.039 2 410.539 2 432.539C2 450.139 2 494.206 2 514.039C2 533.873 2 578.939 2 596.539C2 618.539 8 650.039 11.5 661.539C14.3008 670.739 17 758.039 18 800.539L21 1059.04L24 1059.04L24 0.0394287L21 0.0394287Z" fill-rule="evenodd" fill="#3F88E3"/>
+	</mask>
+	<g mask="url(#mask2_3750)">
+		<g filter="url(#filter_2_3751_dd)">
+			<ellipse id="Ellipse 179" rx="9.000000" ry="62.000000" transform="matrix(-1 0 0 1 4 525.039)" fill="#489CFF" fill-opacity="0.23"/>
+		</g>
+	</g>
+	<path id="4" d="M20 0.0394287L17 228.539C16 271.039 13.3008 358.339 10.5 367.539C7 379.039 1 410.539 1 432.539C1 450.139 1 494.206 1 514.039C1 533.873 1 578.939 1 596.539C1 618.539 7 650.039 10.5 661.539C13.3008 670.739 16 758.039 17 800.539L20 1059.04" stroke="url(#paint_linear_2_3753_0)" stroke-width="2.000000"/>
+	<path id="5" d="M20 0.0394287L17 228.539C16 271.039 13.3008 358.339 10.5 367.539C7 379.039 1 410.539 1 432.539C1 450.139 1 494.206 1 514.039C1 533.873 1 578.939 1 596.539C1 618.539 7 650.039 10.5 661.539C13.3008 670.739 16 758.039 17 800.539L20 1059.04" stroke="url(#paint_linear_2_3754_0)" stroke-width="2.000000"/>
+	<path id="5" d="M20 0.0394287L17 228.539C16 271.039 13.3008 358.339 10.5 367.539C7 379.039 1 410.539 1 432.539C1 450.139 1 494.206 1 514.039C1 533.873 1 578.939 1 596.539C1 618.539 7 650.039 10.5 661.539C13.3008 670.739 16 758.039 17 800.539L20 1059.04" stroke="url(#paint_linear_2_3754_1)" stroke-width="2.000000"/>
+	<path id="6" d="M26 0.0394287L23 228.539C22 271.039 19.3008 358.339 16.5 367.539C13 379.039 7 410.539 7 432.539C7 450.139 7 494.206 7 514.039C7 533.873 7 578.939 7 596.539C7 618.539 13 650.039 16.5 661.539C19.3008 670.739 22 758.039 23 800.539L26 1059.04" stroke="url(#paint_linear_2_3755_0)" stroke-width="6.000000"/>
+	<path id="7" d="M26 0.0394287L23 228.539C22 271.039 19.3008 358.339 16.5 367.539C13 379.039 7 410.539 7 432.539C7 450.139 7 494.206 7 514.039C7 533.873 7 578.939 7 596.539C7 618.539 13 650.039 16.5 661.539C19.3008 670.739 22 758.039 23 800.539L26 1059.04" stroke="url(#paint_linear_2_3756_0)" stroke-width="6.000000"/>
+</svg>

src/components/box.vue

@@ -3,7 +3,9 @@
     class="box"
     :style="`width:${width}px;height:${height}px`"
   >
-    <div class="box-top" />
+    <div class="box-top">
+      {{ name }}
+    </div>
     <div class="box-content">
       <slot />
     </div>
@@ -12,22 +14,35 @@
 
 <script setup lang='ts'>
 const props = defineProps<{
-        width: number,
-        height: number
+  width: number,
+  height: number,
+  name: string
 }>()
 </script>
 
 <style lang="scss" scoped>
 .box {
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);
+  width: 100%;
+  height: 100%;
+
+  &-top {
+    background: url(/src/assets/img/1.png) no-repeat left top;
+    width: 100%;
+    height: 50px;
+    background-size: cover;
+    font-weight: 700;
+    font-style: oblique;
+    white-space: nowrap;
+    text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.6980392157);
+    font-size: 24px;
+    color: white;
+    line-height: 58px;
+    text-indent: 73px;
+  }
 
-        &-top {
-                background: url(../assets/img/1.png) no-repeat left center;
-                width: 100%;
-                height: 60px;
-                background-size: contain;
-        }
+  &-content {
+    height: calc(100% - 60px);
+    background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);
+  }
 }
 </style>

src/components/layout.vue

@@ -13,45 +13,35 @@
   </div>
 </template>
 
-<script setup lang='ts'>
-
-</script>
-
 <style lang="scss" scoped>
 .layout {
-    height: 100%;
-    padding: 0 30px;
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    &>div {
-        height: 100%;
-    }
-
-    &-left {
-        width: 1370px;
+  height: 100%;
+  padding: 0 50px;
+  display: flex;
+  align-items: center;
+  position: relative;
 
-        border: solid 1px red;
-    }
-
-    &-center {
-        width: calc(100% - 1370px - 1370px);
-        border: solid 1px green;
-    }
-
-    &-right {
-        width: 1370px;
-        border: solid 1px red;
-    }
-
-    &-bg {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: calc(100% - 1260px - 1260px);
-        transform: translate(-50%, -50%);
-        background: url(../assets/img/4.png) no-repeat top center;
-        background-size: cover;
-    }
-}</style>
+  &>div {
+    height: 100%;
+  }
+
+  &-right,
+  &-left {
+    width: 1370px;
+  }
+
+  &-center {
+    width: calc(100% - 1370px - 1370px);
+  }
+
+  &-bg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: calc(100% - 1260px - 1260px);
+    transform: translate(-50%, -50%);
+    background: url(../assets/img/4.png) no-repeat top center;
+    background-size: cover;
+  }
+}
+</style>

src/pages/App.vue

@@ -16,5 +16,6 @@ const show = computed(() => store.loading)
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    user-select: none;
   }
 </style>

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

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <template #left>
+      <div>2222</div>
+    </template>
+    <template #center>
+      <div>2222</div>
+    </template>
+    <template #right>
+      <div>2222</div>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang='ts'>
+import Layout from '@/components/layout.vue'
+
+</script>
+
+  <style lang="scss" scoped>
+
+  </style>

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

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <template #left>
+      <div>555</div>
+    </template>
+    <template #center>
+      <div>555</div>
+    </template>
+    <template #right>
+      <div>555</div>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang='ts'>
+import Layout from '@/components/layout.vue'
+
+</script>
+
+  <style lang="scss" scoped>
+
+  </style>

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

@@ -0,0 +1,172 @@
+<template>
+  <Layout>
+    <template #left>
+      <div class="left">
+        <div class="left-top">
+          <template
+            v-for="(item, index) in leftTopCount"
+            :key="index"
+          >
+            <div>
+              <template
+                v-for="(it, id) in item"
+                :key="id"
+              >
+                <div>
+                  <img :src="it.icon">
+                  <div>
+                    <p>
+                      <span>{{ it.num }}</span>
+                      {{ it.until }}
+                    </p>
+                    <p>{{ it.name }}</p>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+        <div class="left-content">
+          <template
+            v-for="(item, index) in leftContentChart"
+            :key="index"
+          >
+            <Box
+              :width="655"
+              :height="455"
+              :name="item.name"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+    <template #center>
+      <div>111111</div>
+    </template>
+    <template #right>
+      <div class="right">
+        <template
+          v-for="(item, index) in rightContentChart"
+          :key="index"
+        >
+          <Box
+            :width="655"
+            :height="622"
+            :name="item.name"
+          />
+        </template>
+      </div>
+    </template>
+  </Layout>
+</template>
+
+<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: icon12, name: '总客流量', until: '亿人次'
+    },
+    {
+      num: 6.8, icon: icon13, name: '安全行驶', until: '万公里'
+    }
+  ],
+  [
+    {
+      num: 6.8, icon: icon14, name: '累计减少碳排放', until: '吨'
+    },
+    {
+      num: 6.8, icon: icon15, name: '累计责任事故率', until: '起/百万公里'
+    },
+    {
+      num: 6.8, icon: icon16, name: '乘客满意度', until: '%'
+    }
+  ]
+])
+
+const leftContentChart = ref([
+  { name: '客运量', option: '' },
+  { name: '消费占比', option: '' },
+  { name: '客流排名', option: '' },
+  { name: '线路客流排名', option: '' }
+])
+
+const rightContentChart = ref([
+  { name: '舆情统计', option: '' },
+  { name: '班次完成率', option: '' },
+  { name: '班次准点率', option: '' },
+  { name: '发车准点率', option: '' }
+])
+</script>
+
+<style lang="scss" scoped>
+.left {
+  padding-right: 40px;
+
+  &-top {
+    &>div {
+      display: flex;
+    }
+
+    &>div:first-child,
+    &>div:nth-child(2) {
+      background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);
+
+      &>div {
+        display: flex;
+        color: white;
+        text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);
+        width: 440px;
+        height: 160px;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 96px;
+          height: 96px;
+          margin-right: 20px;
+        }
+
+        &>div {
+
+          &>p:first-child {
+            font-size: 18px;
+
+            span {
+              font-size: 50px;
+            }
+          }
+
+          &>p:last-child {
+            font-size: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+}
+.right{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-left: 40px;
+}
+</style>

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

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <template #left>
+      <div>3333</div>
+    </template>
+    <template #center>
+      <div>3333</div>
+    </template>
+    <template #right>
+      <div>333</div>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang='ts'>
+import Layout from '@/components/layout.vue'
+
+</script>
+
+  <style lang="scss" scoped>
+
+  </style>

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

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <template #left>
+      <div>444</div>
+    </template>
+    <template #center>
+      <div>444</div>
+    </template>
+    <template #right>
+      <div>444</div>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang='ts'>
+import Layout from '@/components/layout.vue'
+
+</script>
+
+  <style lang="scss" scoped>
+
+  </style>

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

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <template #left>
+      <div>777</div>
+    </template>
+    <template #center>
+      <div>777</div>
+    </template>
+    <template #right>
+      <div>777</div>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang='ts'>
+import Layout from '@/components/layout.vue'
+
+</script>
+
+  <style lang="scss" scoped>
+
+  </style>

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

@@ -0,0 +1,22 @@
+<template>
+  <Layout>
+    <template #left>
+      <div>666</div>
+    </template>
+    <template #center>
+      <div>666</div>
+    </template>
+    <template #right>
+      <div>666</div>
+    </template>
+  </Layout>
+</template>
+
+<script setup lang='ts'>
+import Layout from '@/components/layout.vue'
+
+</script>
+
+  <style lang="scss" scoped>
+
+  </style>

src/pages/views/home/index.vue

@@ -1,13 +1,75 @@
 <script setup lang="ts">
-import Layout from '@/components/layout.vue'
+import { markRaw, ref } from 'vue'
+import WeatherService from '@/services/weather.service'
+import homePage from './components/HomePage.vue'
+import cehicleOperation from './components/CehicleOperation.vue'
+import lineAnalysis from './components/LineAnalysis.vue'
+import maintenanceDynamics from './components/MaintenanceDynamics.vue'
+import facilityManagement from './components/FacilityManagement.vue'
+import stationManagement from './components/StationManagement.vue'
+import passengerFlow from './components/PassengerFlow.vue'
+
+const weatherService = new WeatherService()
+const menus = [
+  { name: '主页', component: markRaw(homePage) },
+  { name: '车辆运营', component: markRaw(cehicleOperation) },
+  { name: '线路分析', component: markRaw(lineAnalysis) },
+  { name: '维保动态', component: markRaw(maintenanceDynamics) },
+  { name: '设施管理', component: markRaw(facilityManagement) },
+  { name: '场站管理', component: markRaw(stationManagement) },
+  { name: '客流分析', component: markRaw(passengerFlow) }
+]
+const active = ref(0)
+const currentComponent = ref(menus[active.value].component)
+const weather = ref()
+
+function changMenu(_id: number) {
+  active.value = _id
+  currentComponent.value = menus[_id].component
+}
+
+weatherService.getWeather().then((res) => { weather.value = res })
 </script>
 <template>
   <div class="home">
-    <div class="home-top" />
+    <div class="home-top">
+      <img src="../../../assets/img/6.svg">
+      <div class="home-top-user">
+        <div>安全运营<span>100</span>天</div>
+        <div v-if="weather">
+          <img :src="weather.icon">
+          {{ weather.weather }}
+          <span>{{ weather.temperature }}℃</span>
+        </div>
+        <div>
+          <img src="../../../assets/img/10.svg">
+          你的名称
+        </div>
+      </div>
+    </div>
     <div class="home-content">
-      <Layout />
+      <div class="home-content-top">
+        <div class="home-content-top-menus">
+          <template
+            v-for="(item, index) in menus"
+            :key="index"
+          >
+            <div
+              :class="{ active: index === active }"
+              @click="changMenu(index)"
+            >
+              {{ item.name }}
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="home-content-left" />
+      <div class="home-content-right" />
+      <component :is="currentComponent" />
+    </div>
+    <div class="home-bottom">
+      雅安市公共交通集团有限公司
     </div>
-    <div class="home-bottom" />
   </div>
 </template>
 <style lang="scss" scoped>
@@ -15,18 +77,151 @@ import Layout from '@/components/layout.vue'
   height: 1456px;
   width: 4784px;
   background: #030E25;
+
   &-top {
-    height: 195px;
-    background: url(../../../assets//img/2.svg) no-repeat center;
+    height: 160px;
+    background: url(../../../assets//img/2.svg) no-repeat top center;
     background-size: cover;
+    text-align: center;
+    position: relative;
+
+    &>img {
+      width: 900px;
+      height: 130px;
+    }
+
+    &-user {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      right: 30px;
+      top: 30px;
+
+      &>div {
+        margin: 0 25px;
+        font-size: 24px;
+
+        &:first-child {
+          font-weight: 400;
+          color: #80FFFF;
+
+          span {
+            color: white;
+            font-weight: 700;
+            font-size: 50px;
+            margin: 0 5px;
+          }
+        }
+
+        &:last-child {
+          color: white;
+          display: flex;
+          align-items: center;
+          margin-right: 0;
+
+          img {
+            border-radius: 50%;
+            width: 80px;
+            height: 80px;
+            overflow: hidden;
+            margin-right: 15px;
+          }
+        }
+
+        &:nth-child(2) {
+          display: flex;
+          align-items: flex-end;
+          color: white;
+
+          img {
+            width: 56px;
+            height: 56px;
+            margin-right: 10px;
+          }
+
+          span {
+            color: #80FFFF;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
   }
-  &-content{
-    height: calc(1456px - 195px - 72px);
+
+  &-content {
+    height: calc(1456px - 160px - 72px);
+    position: relative;
+
+    &-top {
+      position: absolute;
+      left: 50%;
+      top: -30px;
+      transform: translate(-50%, 0);
+      height: 185px;
+      width: calc(100% - 1370px - 1370px);
+      background: url(../../../assets//img/5.svg) no-repeat center;
+      background-size: cover;
+      z-index: 1;
+
+      &-menus {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        padding: 0 410px;
+
+        &>div {
+          text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.698);
+          font-family: Arial Normal;
+          font-size: 24px;
+          text-align: center;
+          letter-spacing: 0px;
+          color: #D7D7D7;
+          cursor: pointer;
+          height: 111px;
+          width: 175px;
+          line-height: 111px;
+        }
+
+        .active {
+          color: white;
+          background: url(../../../assets/img/7.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+
+    }
+
+    &-left,
+    &-right {
+      position: absolute;
+      height: 110%;
+      width: 40px;
+      top: -117px;
+    }
+
+    &-left {
+      left: 7px;
+      background: url(../../../assets/img/8.svg) no-repeat left top;
+      background-size: cover;
+    }
+
+    &-right {
+      right: 7px;
+      background: url(../../../assets/img/9.svg) no-repeat left top;
+      background-size: cover;
+    }
   }
-  &-bottom{
+
+  &-bottom {
     height: 72px;
     background: url(../../../assets/img/3.svg) no-repeat center;
     background-size: cover;
+    text-align: center;
+    line-height: 72px;
+    color: white;
+    font-size: 20px;
+    letter-spacing: 20px;
+    text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6);
   }
 }
 </style>

src/pages/views/home/services/index.ts

@@ -0,0 +1,8 @@
+import { injectable, Service } from '@/services/service'
+
+
+@injectable
+export default class HomeService extends Service {
+
+
+}

vite.config.ts

@@ -4,7 +4,6 @@ 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 }) => {
@@ -22,19 +21,13 @@ export default ({ mode }) => {
     },
     plugins: [
       vue(), viteCompression(),
-      eslint({ fix: true, include: [ '**/*.ts', '**/*.vue' ] }),
-      createSvgIconsPlugin({
-        iconDirs: [ resolve(__dirname, './src/assets/icons') ],
-        // Specify symbolId format
-        symbolId: 'icon-[dir]-[name]'
-      })
+      eslint({ fix: true, include: [ '**/*.ts', '**/*.vue' ] })
     ],
     server: {
       host: '0.0.0.0',
       port: 6888,
       open: true,
       strictPort: false,
-      https: false,
       // proxy: {
       //   '/api': {
       //     target: env.VITE_PROXY_URL,