diff --git a/src/app/routes/data-v/lj-card/lj-card.component.less b/src/app/routes/data-v/lj-card/lj-card.component.less index deb7419..7a1eebe 100644 --- a/src/app/routes/data-v/lj-card/lj-card.component.less +++ b/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; diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html index f959ae1..e839afd 100644 --- a/src/app/routes/data-v/second1/second1.component.html +++ b/src/app/routes/data-v/second1/second1.component.html @@ -33,21 +33,18 @@
-
- Car Image +
+ Car Image
-
- Long Image - +
2.5D图
+
+ Car Image
-
+
diff --git a/src/app/routes/data-v/second1/second1.component.less b/src/app/routes/data-v/second1/second1.component.less index 6a37aab..fd7cdbf 100644 --- a/src/app/routes/data-v/second1/second1.component.less +++ b/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%); } - \ No newline at end of file + + [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; + } \ No newline at end of file diff --git a/src/app/routes/data-v/second1/second1.component.ts b/src/app/routes/data-v/second1/second1.component.ts index 16f9fc4..9319b24 100644 --- a/src/app/routes/data-v/second1/second1.component.ts +++ b/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 }, diff --git a/src/assets/car0.jpg b/src/assets/car0.jpg new file mode 100644 index 0000000..4febeea Binary files /dev/null and b/src/assets/car0.jpg differ