重新调整布局，修改边框组件，

src/assets/img/30.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/31.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1340px" height="40px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="89.6790961133044" y1="52.7354560282724" x2="1429.79832465812" y2="52.7354560282724" id="LinearGradient941">
+      <stop id="Stop942" stop-color="#459aff" stop-opacity="0" offset="0" />
+      <stop id="Stop943" stop-color="#459aff" stop-opacity="0.298039215686275" offset="0.04" />
+      <stop id="Stop944" stop-color="#489dff" stop-opacity="0.2" offset="0.18" />
+      <stop id="Stop945" stop-color="#459aff" stop-opacity="0.0980392156862745" offset="0.38" />
+      <stop id="Stop946" stop-color="#4982d1" stop-opacity="0.0588235294117647" offset="0.87" />
+      <stop id="Stop947" stop-color="#4a7bc5" stop-opacity="0.0470588235294118" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 0 -12 )">
+    <path d="M 0 12  L 1340 12  L 1340 52  L 0 52  L 0 12  Z " fill-rule="nonzero" fill="url(#LinearGradient941)" stroke="none" />
+  </g>
+</svg>

src/assets/img/32.svg

@@ -0,0 +1,90 @@
+<svg width="44.000000" height="44.000000" viewBox="0 0 44 44" 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_94_1137_dd" x="7.771484" y="-16.716675" width="56.921875" height="61.472168" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="8" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_94_1140_dd" x="21.771484" y="-2.716675" width="28.921875" height="33.472168" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="3.33333" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_94_1139_dd" x="4.291016" y="-9.349976" width="34.939453" height="26.153442" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feGaussianBlur stdDeviation="3.33333" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_94_1142_dd" x="0.000000" y="0.000000" width="44.000000" height="44.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.33333" result="effect_layerBlur_1"/>
+		</filter>
+		<filter id="filter_94_1136_dd" x="10.000000" y="10.000000" width="24.000000" height="24.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dx="0" dy="0"/>
+			<feGaussianBlur stdDeviation="2.66667"/>
+			<feComposite in2="hardAlpha" operator="out" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.39216 0 0 0 0 0.72157 0 0 0 0 1 0 0 0 0.61 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dx="-0.5" dy="1"/>
+			<feGaussianBlur stdDeviation="0.333333"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.86275 0 0 0 0 0.98039 0 0 0 0 1 0 0 0 0.38 0"/>
+			<feBlend mode="normal" in2="shape" result="effect_innerShadow_2"/>
+		</filter>
+		<linearGradient id="paint_linear_94_1142_0" x1="37.499992" y1="15.000000" x2="6.500004" y2="32.000008" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#64B8FF" stop-opacity="0.705882"/>
+			<stop offset="0.244701" stop-color="#64B8FF" stop-opacity="0.298039"/>
+			<stop offset="0.524611" stop-color="#64B8FF" stop-opacity="0.109804"/>
+			<stop offset="0.767476" stop-color="#64B8FF" stop-opacity="0.031373"/>
+			<stop offset="1.000000" stop-color="#64B8FF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_94_1141_0" x1="37.499992" y1="15.000000" x2="6.500004" y2="32.000008" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#67F3FF" stop-opacity="0.705882"/>
+			<stop offset="0.244701" stop-color="#64EEFF" stop-opacity="0.298039"/>
+			<stop offset="0.524611" stop-color="#51DAFF" stop-opacity="0.109804"/>
+			<stop offset="0.767476" stop-color="#3FBFFF" stop-opacity="0.031373"/>
+			<stop offset="1.000000" stop-color="#51DAFF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_94_1143_0" x1="38.000000" y1="15.499994" x2="6.499998" y2="32.000008" gradientUnits="userSpaceOnUse">
+			<stop offset="0.018916" stop-color="#FFFFFF"/>
+			<stop offset="0.112209" stop-color="#FFFFFF" stop-opacity="0.000000"/>
+		</linearGradient>
+		<linearGradient id="paint_linear_94_1136_0" x1="24.500000" y1="19.500000" x2="19.000000" y2="25.500000" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#95EFFF"/>
+			<stop offset="1.000000" stop-color="#75D1FF" stop-opacity="0.239216"/>
+		</linearGradient>
+	</defs>
+	<mask id="mask94_1131" mask-type="alpha" maskUnits="userSpaceOnUse" x="4.000000" y="4.000000" width="36.000000" height="36.000000">
+		<circle id="9" cx="22.000000" cy="22.000000" r="18.000000" fill="#D9D9D9"/>
+	</mask>
+	<g mask="url(#mask94_1131)">
+		<g filter="url(#filter_94_1137_dd)">
+			<ellipse id="Ellipse 221" rx="3.000000" ry="7.500000" transform="matrix(0.877174 -0.480172 0.480172 0.877174 36.2324 14.0194)" fill="#A5F9FF" fill-opacity="0.35"/>
+		</g>
+	</g>
+	<g mask="url(#mask94_1131)">
+		<g filter="url(#filter_94_1140_dd)">
+			<ellipse id="Ellipse 223" rx="3.000000" ry="7.500000" transform="matrix(0.877174 -0.480172 0.480172 0.877174 36.2324 14.0194)" fill="#A5F9FF" fill-opacity="0.58"/>
+		</g>
+	</g>
+	<g mask="url(#mask94_1131)">
+		<g filter="url(#filter_94_1139_dd)">
+			<ellipse id="Ellipse 222" rx="3.000000" ry="7.500000" transform="matrix(-0.098872 -0.9951 0.9951 -0.098872 21.7598 3.72668)" fill="#A5F9FF" fill-opacity="0.35"/>
+		</g>
+	</g>
+	<g opacity="0.550000" filter="url(#filter_94_1142_dd)"/>
+	<circle id="16" cx="22.000000" cy="22.000000" r="17.000000" stroke="url(#paint_linear_94_1142_0)" stroke-width="2.000000"/>
+	<circle id="15" cx="22.000000" cy="22.000000" r="17.000000" stroke="url(#paint_linear_94_1141_0)" stroke-width="2.000000"/>
+	<circle id="3" cx="22.000000" cy="22.000000" r="17.000000" stroke="url(#paint_linear_94_1143_0)" stroke-opacity="0.67" stroke-width="2.000000"/>
+	<g filter="url(#filter_94_1136_dd)">
+		<circle id="14" r="4.000000" transform="matrix(1 0 0 1 22 22)" fill="url(#paint_linear_94_1136_0)"/>
+	</g>
+</svg>

src/assets/img/33.svg

@@ -0,0 +1,18 @@
+<svg width="83.000000" height="15.000000" viewBox="0 0 83 15" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<rect id="Rectangle 500" width="4.000000" height="15.000000" fill="#4B97C6" fill-opacity="0.11"/>
+	<rect id="Rectangle 501" x="7.000000" width="4.000000" height="15.000000" fill="#4B97C6" fill-opacity="0.11"/>
+	<rect id="Rectangle 502" x="16.000000" width="4.000000" height="15.000000" fill="#4C98C3" fill-opacity="0.3"/>
+	<rect id="Rectangle 503" x="23.000000" width="4.000000" height="15.000000" fill="#4C98C3" fill-opacity="0.3"/>
+	<rect id="Rectangle 504" x="30.000000" width="4.000000" height="15.000000" fill="#4C98C3" fill-opacity="0.3"/>
+	<rect id="Rectangle 505" x="37.000000" width="4.000000" height="15.000000" fill="#4B99C3" fill-opacity="0.5"/>
+	<rect id="Rectangle 506" x="44.000000" width="4.000000" height="15.000000" fill="#4B99C3" fill-opacity="0.5"/>
+	<rect id="Rectangle 507" x="51.000000" width="4.000000" height="15.000000" fill="#499AC2" fill-opacity="0.15"/>
+	<rect id="Rectangle 508" x="58.000000" width="4.000000" height="15.000000" fill="#4B99C3" fill-opacity="0.5"/>
+	<rect id="Rectangle 509" x="65.000000" width="4.000000" height="15.000000" fill="#2EDFB0" fill-opacity="0.8"/>
+	<rect id="Rectangle 510" x="72.000000" width="4.000000" height="15.000000" fill="#538BFF" fill-opacity="0.5"/>
+	<rect id="Rectangle 511" x="79.000000" width="4.000000" height="15.000000" fill="#4373CB" fill-opacity="0.5"/>
+</svg>

src/components/box.vue

@@ -5,6 +5,9 @@
   >
     <div class="box-top">
       {{ name }}
+      <img :src="img32">
+      <img :src="img31">
+      <img :src="img33">
     </div>
     <div class="box-content">
       <slot />
@@ -13,6 +16,10 @@
 </template>
 
 <script setup lang='ts'>
+import img32 from '@/assets/img/32.svg'
+import img31 from '@/assets/img/31.svg'
+import img33 from '@/assets/img/33.svg'
+
 defineProps<{
   width: number,
   height: number,
@@ -26,18 +33,41 @@ defineProps<{
   height: 100%;
 
   &-top {
-    background: url(/src/assets/img/1.png) no-repeat left top;
     width: 100%;
-    height: 50px;
-    background-size: cover;
+    height: 40px;
     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;
+    line-height: 40px;
     text-indent: 73px;
+    position: relative;
+
+    img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+
+      &:first-child {
+        top: -10px;
+        width: 60px;
+        height: 60px;
+      }
+
+      &:last-child {
+        width: auto;
+        height: 50%;
+        left: unset;
+        right: 45px;
+        top: 50%;
+        transform: translate(0, -50%);
+      }
+    }
   }
 
   &-content {

src/components/layout.vue

@@ -3,15 +3,11 @@
     <div class="layout-left">
       <slot name="left" />
     </div>
-    <div class="layout-center">
-      <slot name="center" />
-    </div>
     <div class="layout-right">
       <slot name="right" />
     </div>
   </div>
 </template>
-
 <style lang="scss" scoped>
 .layout {
   height: 100%;
@@ -19,21 +15,18 @@
   display: flex;
   align-items: center;
   position: relative;
-
+  justify-content: space-between;
   &-right,
   &-left {
-    width: 1370px;
+    width: 1345px;
     height: 100%;
     z-index: 1;
   }
-
-  &-center {
-    width: calc(100% - 1370px - 1370px);
-    height: 100%;
-    z-index: 1;
-    background: url(../assets/img/4.png) no-repeat top center;
-    background-size: cover;
+  &-left{
+    padding-left: 10px;
+  }
+  &-right{
+    padding-right: 10px;
   }
-
 }
 </style>

src/components/map.vue

@@ -34,6 +34,6 @@ function _init(e: any) {
 .mapContainer {
   width: 100%;
   height: 100%;
-  mask-image: radial-gradient(#000 80%, transparent 81%);
+  mask-image: radial-gradient(circle at center,#000 80%, transparent 100%);
 }
 </style>

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

@@ -36,7 +36,7 @@
             :key="index"
           >
             <Box
-              :width="655"
+              :width="662"
               :height="455"
               :name="item.name"
             >
@@ -59,9 +59,6 @@
         </div>
       </div>
     </template>
-    <template #center>
-      <Maps />
-    </template>
     <template #right>
       <div class="right">
         <template
@@ -293,7 +290,6 @@ import Box from '@/components/box.vue'
 import TankSeamlessScroll from 'tank-vue3-seamless-scroll'
 import { graphic } from 'echarts'
 import Echart from '@/components/chart.vue'
-import Maps from '@/components/map.vue'
 
 const datas = [
   {

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

@@ -1,22 +1,174 @@
 <template>
   <Layout>
     <template #left>
-      <div>444</div>
-    </template>
-    <template #center>
-      <div>444</div>
+      <div class="left-top">
+        <template
+          v-for="(item, index) in leftContent.top"
+          :key="index"
+        >
+          <Box
+            :width="662"
+            :height="400"
+            :name="item.name"
+          >
+            <div
+              v-if="item.icon"
+              class="left-top-count"
+            >
+              <Icon
+                :name="item.icon"
+                :size="96"
+                style="margin-right: 20px;"
+              />
+              <div
+                v-for="(itm, id) in item.num"
+                :key="id"
+              >
+                {{ itm }}
+              </div>
+              辆
+            </div>
+            <!-- <Echart v-else :option="item.option" /> -->
+          </Box>
+        </template>
+      </div>
+
+      <Box
+        :width="1340"
+        :height="420"
+        name="维保明细"
+      >
+        <n-data-table
+          :columns="leftContent.bottom.head"
+          :data="leftContent.bottom.body"
+          :bordered="false"
+        />
+      </Box>
     </template>
     <template #right>
-      <div>444</div>
+      <div class="right-top">
+        <template
+          v-for="(item, index) in rightContent.top"
+          :key="index"
+        >
+          <Box
+            :width="438"
+            :height="400"
+            :name="item.name"
+          >
+            1111
+            <!-- <Echart v-else :option="item.option" /> -->
+          </Box>
+        </template>
+      </div>
+
+      <Box
+        :width="1340"
+        :height="400"
+        name="线路运行速度"
+      >
+        22222
+      </Box>
+
+      <div class="right-bottom">
+        <template
+          v-for="(item, index) in rightContent.bottom"
+          :key="index"
+        >
+          <Box
+            :width="662"
+            :height="340"
+            :name="item.name"
+          >
+            1111
+            <!-- <Echart v-else :option="item.option" /> -->
+          </Box>
+        </template>
+      </div>
     </template>
   </Layout>
 </template>
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
+import Box from '@/components/box.vue'
+import { ref } from 'vue'
 
-</script>
+const leftContent = ref({
+  top: [
+    {
+      name: '车辆总数',
+      num: '166',
+      icon: '30'
+    },
+    {
+      name: '维修保养统计',
+      option: ''
+    },
+    {
+      name: '车辆运营状态分布',
+      option: ''
+    },
+    {
+      name: '车辆维保状态分别',
+      option: ''
+    }
+  ],
+  bottom: {
+    head: [
+      { title: '序号', key: 'num' },
+      { title: '车辆编号', key: 'carNum' },
+      { title: '车牌号', key: 'carNumber' },
+      { title: '线路', key: 'line' },
+      { title: '维修类型', key: 'type' },
+      { title: '故障原因', key: 'cause' },
+      { title: '维修点位', key: 'postion' },
+      { title: '报修时间', key: 'time' },
+      { title: '维保结果', key: 'result' }
+
+    ],
+    body: [
+      {
+        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
+      },
+      {
+        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
+      },
+      {
+        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
+      },
+      {
+        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
+      },
+      {
+        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
+      }
+    ]
+  }
+})
 
-  <style lang="scss" scoped>
+const rightContent = ref({
+  top: [
+    { name: '客流线路分布', option: '' },
+    { name: '消费类型', option: '' },
+    { name: '乘距分布', option: '' }
+  ],
+  bottom: [
+    { name: '体检问题情况', option: '' },
+    { name: '维保执行情况', option: '' }
+  ]
+})
+</script>
 
-  </style>
+<style lang="scss" scoped>
+.left-top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .right-bottom,
+.right-top{
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/pages/views/home/index.vue

@@ -8,6 +8,7 @@ import maintenanceDynamics from './components/MaintenanceDynamics.vue'
 import facilityManagement from './components/FacilityManagement.vue'
 import stationManagement from './components/StationManagement.vue'
 import passengerFlow from './components/PassengerFlow.vue'
+import Map from '@/components/map.vue'
 
 const weatherService = new WeatherService()
 const menus = [
@@ -65,6 +66,9 @@ weatherService.getWeather().then((res) => { weather.value = res })
       </div>
       <div class="home-content-left" />
       <div class="home-content-right" />
+      <div class="home-content-center">
+        <Map />
+      </div>
       <component :is="currentComponent" />
     </div>
     <div class="home-bottom">
@@ -211,6 +215,18 @@ weatherService.getWeather().then((res) => { weather.value = res })
       background: url(../../../assets/img/9.svg) no-repeat left top;
       background-size: cover;
     }
+
+    &-center {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      width: 1990px;
+      height: 100%;
+      z-index: 1;
+      margin: 0 auto;
+      transform: translate(-50%, 0);
+    }
+
   }
 
   &-bottom {