毛重计量部分样式调整

src/app/routes/data-v/lj-card/lj-card.component.less

@@ -1,7 +1,7 @@
 .card-top-content {
     display: grid;
     grid-template-columns: auto auto;
-    align-items: center;
+    align-items: start;
     justify-content: space-between;
     margin-bottom: 10px;
     
@@ -20,10 +20,10 @@
   }
   
 .card-button {
-    cursor: pointer; /* 更好的用户体验，表明这是一个可点击的按钮 */
-    width: 82px;
+    cursor: pointer; 
+    width: 72px;
     height: 40px;
-    font-size: 26px;
+    font-size: 24px;
     line-height: 20px;
     color: rgb(0 239 248 / 100%);
 text-align: center;

src/app/routes/data-v/second1/second1.component.html

@@ -33,21 +33,18 @@
     </div>
     <div class="car-status-container">
       <div class="row" *ngFor="let item of items; let i = index">
-        <div class="image-container">
-          <img src="http://openwrt.waitclopeo.com:3004/auseft/car0.jpg" alt="Car Image" />
+        <div class="item">
+          <img src="./assets/car0.jpg" alt="Car Image" />
         </div>
-        <div class="image-container">
-          <img
-            src="https://img.jianbihua.com/sites/default/files/styles/photo640x425logofull/public/images/2019-11/20191115110304_360855.jpg"
-            alt="Long Image"
-          />
-          <!-- <app-data-v-t1 /> -->
+        <div class="item"> 2.5D图 </div>
+        <div class="item">
+          <img src="./assets/car0.jpg" alt="Car Image" />
         </div>
-        <div class="info-container">
+        <!-- <div class="info-container">
           <div class="info-button">车牌号: 苏E8888</div>
           <div class="info-button">卡车种类:重型火卡</div>
           <div class="info-button">重量:30吨</div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>

src/app/routes/data-v/second1/second1.component.less

@@ -219,6 +219,9 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    height: 100%;
+    margin: 1vw;
+    margin-top: 10px;
     background-image: url("/assets/car-status-bg.png");
     background-repeat: no-repeat;
     background-position: center;
@@ -232,17 +235,21 @@
     margin-bottom: 20px; /* 每行之间的间距 */
   }
   
-  .image-container {
-    display: flex;
-    flex: 1; /* 三个子元素均匀分布 */
-    align-items: center; /* 图片居中 */
-    justify-content: center; /* 图片居中 */
-    margin: 0 10px; /* 子组件之间的间距 */
+  .item {
+    flex-basis: 100px;
+    flex-grow: 1;
+    margin: 10px;
+    margin-top: 20px;
+  }
+
+  .item:nth-child{
+    flex-grow: 6;
   }
   
-  .image-container img {
-    max-width: 100%;
-    max-height: 100%;
+  .item img {
+    width: 200px;
+    height: 200px;
+    margin: 10px;
     object-fit: contain; /* 保持图片的宽高比 */
   }
   
@@ -272,4 +279,19 @@
     border-radius: 5px;
     box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
   }
-  
+
+  [nz-carousel-content] {
+    overflow: hidden;
+    width: 150px;  /* 调整宽度 */
+    height: 80px;  /* 调整高度 */
+    color: #fff;
+    text-align: center;
+    background: #364d79;
+  }
+  
+
+  h3 {
+    user-select: none;
+    margin-bottom: 0;
+    color: #fff;
+  }

src/app/routes/data-v/second1/second1.component.ts

@@ -5,6 +5,7 @@ import { SHARED_IMPORTS } from '@shared';
 import { AgGridAngular } from 'ag-grid-angular';
 import { ColDef, GridApi } from 'ag-grid-community';
 import * as echarts from 'echarts';
+import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { MqttService } from 'ngx-mqtt';
 
@@ -22,6 +23,7 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
   templateUrl: './second1.component.html',
   styleUrls: ['./second1.component.less'],
   imports: [
+    NzCarouselModule,
     DataVT1Component,
     DataVLjCarInfoTableComponent,
     AgGridAngular,
@@ -43,7 +45,7 @@ export class DataVSecond1Component implements OnInit {
   private readonly modal = inject(ModalHelper);
   private readonly elementRef = inject(ElementRef);
   private readonly titleService = inject(TitleService);
-  public items = [1];
+  public items = [1, 2, 3, 4];
 
   public chartDom = document.getElementById('main')!;
   // public myChart = echarts.init(this.chartDom);
@@ -59,7 +61,8 @@ export class DataVSecond1Component implements OnInit {
   //多模拟几行数据出来
 
   rowData: object[] = [];
-
+  array = [1, 2, 3, 4];
+  effect = 'scrollx';
   colDefs1: ColDef[] = [
     { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
     { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },