From 7d28f8b0a4814eb9797ef8bda3b2cb638b9e581d Mon Sep 17 00:00:00 2001
From: duanliang <540489889@qq.com>
Date: Tue, 25 Nov 2025 00:52:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/box-2.vue     | 232 +++++++++++++++++++++++-
 src/views/home/components/box-3.vue     |  18 +-
 src/views/home/components/occupancy.vue |   2 +-
 src/views/monitor/components/box-2.vue  |  16 +-
 src/views/traffic/components/box-2.vue  |   2 +-
 5 files changed, 245 insertions(+), 25 deletions(-)

diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index bc08c90..0d53632 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -50,16 +50,98 @@
     </div>
     <div class="footer">
 		<div class="flex">
-		<!--  <div class="flex-1">
+		 <div class="flex-1">
 		    <Title1 title="车船信息" class="title1" />
-		  </div> -->
-		  <div class="flex-1" >
+		  </div>
+		<!--  <div class="flex-1" >
 		    <Title1 title="酒店信息" class="title1" />
+		  </div> -->
+		</div>
+		<div class="flex">
+		  <div class="car-ship">
+		    <div class="mb-6">
+		      <div class="car">
+		        <div class="label">车总数</div>
+		        <div class="flex align-center">
+		          <countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" />
+		          <span class="unit">辆</span>
+		        </div>
+		      </div>
+		      <div class="table">
+		        <div class="header">
+		          <div>景区</div>
+		          <div>运行</div>
+		          <div>空余</div>
+		        </div>
+		        <div class="content">
+		          <vue3-seamless-scroll
+		            v-model="carMove"
+		            :list="homeStore.carShipData?.car?.info"
+		            :limitScrollNum="5"
+		            :hover="true"
+				    :step="0.2"
+		            :copy-num="0"
+		            :wheel="true"
+		            :isWatch="true"
+					:isStop="true"
+		          >
+		            <div
+		              class="cell"
+		              v-for="(item, index) in homeStore.carShipData?.car?.info"
+		              :key="index"
+		            >
+		              <div class="small-text">{{ item.name }}</div>
+		              <div>{{ item.started_count }}<span class="unit-1">辆</span></div>
+		              <div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
+		            </div>
+		          </vue3-seamless-scroll>
+		        </div>
+		      </div>
+		    </div>
+		    <div>
+		      <div class="ship">
+		        <div class="label">船总数</div>
+		        <div class="flex align-center">
+		          <countup class="value" :end-val="homeStore.carShipData?.ship?.count || 0" />
+		          <span class="unit">艘</span>
+		        </div>
+		      </div>
+		      <div class="table">
+		        <div class="header">
+		          <div>景区</div>
+		          <div>运行</div>
+		          <div>空余</div>
+		        </div>
+		        <div class="content">
+		          <vue3-seamless-scroll
+		            v-model="shipMove"
+		            :list="homeStore.carShipData?.ship?.info"
+		            :limitScrollNum="5"
+		            :hover="true"
+		            :step="0.2"
+		            :copy-num="0"
+		            :wheel="true"
+		            :isWatch="true"
+					:isStop="true"
+		          >
+		            <div
+		              class="cell"
+		              v-for="(item, index) in homeStore.carShipData?.ship?.info"
+		              :key="index"
+		            >
+		              <div  class="small-text">{{ item.name }}</div>
+		              <div>{{ item.started_count }}<span class="unit-1">艘</span></div>
+		              <div>{{ item.not_started_count }}<span class="unit-1">艘</span></div>
+		            </div>
+		          </vue3-seamless-scroll>
+		        </div>
+		      </div>
+		    </div>
 		  </div>
 		</div>
-		<div class="hotel" >
+		<div class="hotel" v-if="false" >
 			
-		  <div>
+		  <div >
 		    <div class="item">
 		      <div class="label">接入总数</div>
 		      <countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
@@ -404,6 +486,142 @@
 </script>
 
 <style lang="scss" scoped>
+	.car-ship {
+		width:100%;
+	  // flex: 1;
+	  & > div {
+	    position: relative;
+	    height: vh(299);
+	    display: flex;
+	    align-items: center;
+	    background-image: url('@/assets/images/bg-4.png');
+	    background-size: cover;
+	    .car {
+	      // @extend .icon;
+	      width: vw(352);
+	      height: vw(70);
+	      padding-left: vw(90);
+	      margin-left: vw(30);
+		  
+	      display: flex;
+	      flex-direction: column;
+	      justify-content: center;
+	      background-image: url('@/assets/images/icon-6.png');
+	      background-size: 100% 100%;
+	    }
+	    .ship {
+	      // @extend .icon;
+	      width: vw(352);
+	      height: vw(70);
+	      padding-left: vw(90);
+	      margin-left: vw(10);
+	      display: flex;
+	      flex-direction: column;
+	      justify-content: center;
+	      background-image: url('@/assets/images/icon-7.png');
+	      background-size: 100% 100%;
+	    }
+	    .label {
+	      margin-bottom: vh(6);
+	      font-weight: 400;
+	      font-size: font-vw(14);
+	      color: rgba(255, 255, 255, 0.9);
+	    }
+	    .value {
+	      font-weight: bold;
+	      font-size: font-vw(22);
+	      color: #02f9fa;
+	    }
+	    .unit {
+	      font-weight: bold;
+	      font-size: vw(14);
+	      color: #02f9fa;
+	      margin-top: vh(6);
+	    }
+	    .table {
+	      position: absolute;
+	      left: vw(200);
+	      // width: vw(350);
+		  width:85%;
+	      // height: vh(196);
+		  height:100%;
+	      z-index: 2;
+	      background: rgba(0, 150, 255, 0.17);
+	      .header {
+	        display: flex;
+	        height: vh(48);
+	        line-height: vh(48);
+	        text-align: center;
+	        background: rgba(0, 150, 255, 0.4);
+	        & > div {
+	          flex: 1;
+	          font-weight: 400;
+	          font-size: font-vw(20);
+	          color: #fff;
+			  // height: vh(50);
+			  // line-height: vh(50);
+	        }
+	      }
+	      .content {
+	        overflow-y: hidden;
+	        // height: vh(282);
+	        // /* 滚动条整体样式 */
+	        // &::-webkit-scrollbar {
+	        //   width: vw(4); /* 滚动条的宽度 */
+	        // }
+	        // /* 滚动条轨道 */
+	        // &::-webkit-scrollbar-track {
+	        //   background: 'transparent'; /* 轨道的背景色 */
+	        // }
+	        // /* 滚动条滑块 */
+	        // &::-webkit-scrollbar-thumb {
+	        //   background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+	        //   border-radius: 5px; /* 滑块的圆角 */
+	        // }
+	      }
+	      .cell {
+	        display: flex;
+	        // height: vh(50);
+	        // line-height: vh(50);
+			padding:vw(15);
+	        text-align: center;
+	        background: #074686;
+	        &:nth-child(odd) {
+	          background: rgba(0, 150, 255, 0.1);
+	        }
+	        &:nth-child(even) {
+	          background: #074686;
+	        }
+	        & > div {
+	          flex: 1;
+	        }
+	        & > div:nth-child(1) {
+		
+			  overflow: hidden;
+			  text-overflow: ellipsis;
+			  display: block;
+			  white-space: nowrap;
+	          font-weight: 400;
+	          font-size: font-vw(18);
+	          color: rgba(255, 255, 255, 0.9);
+	        }
+	        & > div:nth-child(2) {
+	          font-weight: bold;
+	          font-size: font-vw(18);
+	          color: #ffffff;
+	        }
+	        & > div:nth-child(3) {
+	          font-weight: bold;
+	          font-size: font-vw(18);
+	          color: #02f9fa;
+	        }
+	        .unit-1 {
+	          font-size: vw(18);
+	        }
+	      }
+	    }
+	  }
+	}
 	.hotel {
 		flex:1;
 	    margin: 0 vw(6);
@@ -475,7 +693,7 @@
   }
   .map {
     width: 100%;
-    height: vh(1130);
+    height: vh(1170);
     background-color: transparent;
   }
   .box-3 {
@@ -487,7 +705,7 @@
     .header {
       // width: vw(1400);
       height: vh(128);
-      padding: 0 vw(90);
+      padding: 0 vw(40);
       box-sizing: border-box;
       background-image: url('@/assets/images/group.png');
       background-size: 100% 100%;
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index a3aa0d1..a474aa2 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -122,16 +122,16 @@
     </div>
 
     <div class="flex">
-      <div class="flex-1">
+   <!--   <div class="flex-1">
         <Title1 title="车船信息" class="title1" />
-      </div>
- <!--     <div class="flex-1" >
-        <Title1 title="酒店信息" class="title1" />
       </div> -->
+     <div class="flex-1" >
+        <Title1 title="酒店信息" class="title1" />
+      </div>
     </div>
 
     <div class="flex">
-      <div class="car-ship">
+      <div class="car-ship" v-if="false">
         <div class="mb-6">
           <div class="car">
             <div class="label">车总数</div>
@@ -209,7 +209,7 @@
           </div>
         </div>
       </div>
-      <div class="hotel" v-if="false">
+      <div class="hotel" >
         <div>
           <div class="item">
             <div class="label">接入总数</div>
@@ -523,11 +523,11 @@
     }
     .hotel {
 		flex:1;
-      margin: 0 vw(6);
+        margin: 0 vw(6);
       & > div:nth-child(1) {
         display: flex;
         // width: vw(360);
-        height: vh(70);
+        height: vh(100);
         background-image: url('@/assets/images/bg-4.png');
         background-size: 100% 100%;
         .item {
@@ -538,7 +538,7 @@
           justify-content: center;
           .label {
             font-weight: 400;
-            font-size: font-vw(14);
+            font-size: font-vw(18);
             color: rgba(255, 255, 255, 0.9);
           }
           .value {
diff --git a/src/views/home/components/occupancy.vue b/src/views/home/components/occupancy.vue
index 0328300..a48066a 100644
--- a/src/views/home/components/occupancy.vue
+++ b/src/views/home/components/occupancy.vue
@@ -192,6 +192,6 @@
 <style scoped lang="scss">
   .occupancy {
     width: 100%;
-    min-height: vh(520);
+    height: vh(340);
   }
 </style>
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index 36bca79..cb1f7ff 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -122,7 +122,7 @@
       </div>
     </div>
 
-    <div v-if="videoLog == 2" class="video-detail">
+    <div v-if="videoLog == 2" class="video-detail" style="flex:1;">
       <div class="video-detail__wrapper">
         <video class="video-detail__video" ref="videoRef" muted autoplay controls>
           <source type="application/x-mpegURL" />
@@ -659,13 +659,13 @@
   }
   .left-nav {
     margin: 0 vw(8);
-    width: vw(400);
+    width: vw(350);
     background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
     .bom-box {
       margin-top: vh(20);
       .search-box {
         border-radius: vw(2);
-        height: vh(56);
+        height: vh(70);
         border: 1px solid #0096ff;
         margin: vh(10) auto;
         display: flex;
@@ -799,8 +799,8 @@
       .li {
         cursor: pointer;
         // width: vw(250);
-        height: vh(98);
-        line-height: vh(98);
+        height: vh(120);
+        line-height: vh(120);
         text-align: center;
         margin-bottom: vh(25);
         background: url('/src/assets/images/m-nav-bg-1.png');
@@ -910,7 +910,8 @@
     &-detail__wrapper {
       position: relative;
       padding: vh(40) vw(50);
-      width: vw(1660);
+      // width: vw(1660);
+	  flex:1;
       // height: vh(960);
       background-image: url('/src/assets/images/one-video-bg.png');
       background-size: 100% 100%;
@@ -945,6 +946,7 @@
         padding-right: vw(20);
         display: flex;
         align-items: center;
+		margin-bottom:vh(10);
         .icon {
           width: vw(30);
           height: auto;
@@ -1015,7 +1017,7 @@
         }
         &-img {
           width: 100%;
-          height: vh(164);
+          height: vh(264);
           display: block;
           object-fit: cover;
         }
diff --git a/src/views/traffic/components/box-2.vue b/src/views/traffic/components/box-2.vue
index becdc80..cdd5cd7 100644
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -243,7 +243,7 @@
 	    margin: vh(10) auto;
 		margin-top:0;
 	    width: vw(1100);
-	    height: vh(32);
+	    height: vh(62);
 	    display: flex;
 	    align-items: center;
 	    justify-content: center;