小标题修改

src/components/centerMap.vue

@@ -4,6 +4,48 @@
     <div class="map-pos">
       <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
     </div>
+    <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
+      <i class="el-icon-close" @click="handleCloseInfo"></i>
+      <section>
+        <section class="info_box">
+          <div>
+            <span>产品名称</span>
+            <span>{{ info.productName }}</span>
+          </div>
+          <div>
+            <span>产品批次号</span>
+            <span>{{ info.productCode }}</span>
+          </div>
+          <div>
+            <span>产品规格</span>
+            <span>{{ info.specs }}</span>
+          </div>
+          <div>
+            <span>产品类型</span>
+            <span>{{ info.productType }}</span>
+          </div>
+          <div>
+            <span>生产厂家</span>
+            <span>{{ info.info && info.info.manufacturer }}</span>
+          </div>
+          <div>
+            <span>生产时间</span>
+            <span>{{ info.info && info.info.productTime }}</span>
+          </div>
+          <div>
+            <span>终端零售店</span>
+            <span>{{ info.info && info.info.shop }}</span>
+          </div>
+        </section>
+        <section class="route_box">
+          <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
+            <div class="_circle"></div>
+            <div class="_name">{{ item.name }}</div>
+            <div class="_time">{{ item.time }}</div>
+          </div>
+        </section>
+      </section>
+    </section>
   </div>
 </template>
 <script setup>
@@ -253,5 +295,97 @@ div {
     left: 50%;
     transform: translateX(-50%);
   }
+  .line_info {
+    position: fixed;
+    padding: 32px 10px 20px 20px;
+    left: 60px;
+    top: var(--top);
+    max-height: 74vh;
+    width: 400px;
+    color: #fff;
+    background-color: rgb(42 125 235 / 40%);
+    border-radius: 8px;
+    backdrop-filter: blur(4px);
+    z-index: 9999;
+    transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
+    .el-icon-close {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    > section {
+      padding-right: 10px;
+      height: 100%;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: #dddddd;
+        border-radius: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #959191;
+        border-radius: 6px;
+      }
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: #a0a0a0;
+      }
+      .info_box {
+        > div {
+          margin-bottom: 12px;
+          display: grid;
+          grid-template-columns: 40% 60%;
+          span {
+            &:last-child {
+              text-align: right;
+            }
+          }
+        }
+      }
+      .route_box {
+        padding: 0 34px;
+        > div {
+          position: relative;
+          padding-bottom: 16px;
+          &::after {
+            content: '';
+            position: absolute;
+            top: 12px;
+            left: -11px;
+            height: 100%;
+            border: 1px solid #fff;
+          }
+          &:last-child {
+            &::after {
+              display: none;
+            }
+          }
+          > div {
+            position: relative;
+            padding-left: 12px;
+          }
+          ._circle {
+            position: absolute;
+            top: 4px;
+            left: -16px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #fff;
+            box-shadow: 0 0 3px #fff;
+          }
+          ._name {
+            margin-bottom: 6px;
+            font-size: 20px;
+            font-weight: bold;
+            font-family: '黑体';
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/subTop.vue

@@ -3,11 +3,11 @@
     <div
       :style="{
         'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
-        transform: pos == 'right' ? 'rotateY(180deg)' : '',
+        transform: pos == 'right' ? 'rotateY(0deg)' : '',
       }"
       class="title-top-bg"
     ></div>
-    <span class="title-top-content" :style="{ 'text-align': pos }">{{ topTitle || '--' }}</span>
+    <span class="title-top-content" :style="{ 'text-align': left }">{{ topTitle || '--' }}</span>
   </div>
 </template>
 <script setup>

src/views/land/index.vue

@@ -70,7 +70,7 @@ import landPatrol from './components/landPatrol.vue';
     flex-direction: column;
   }
   .left-charts-item {
-    width: 100%;
+    width: calc(100% - 5px);
     height: calc((100% - 30px) / 3);
   }
 
@@ -82,7 +82,7 @@ import landPatrol from './components/landPatrol.vue';
     flex-direction: column;
   }
   .right-charts-item {
-    width: 100%;
+    width: calc(100% - 5px);
     height: calc((100% - 30px) / 3);
   }
 }