diff --git a/src/app/routes/dashboard/header/index.less b/src/app/routes/dashboard/header/index.less index 375edce..f749647 100644 --- a/src/app/routes/dashboard/header/index.less +++ b/src/app/routes/dashboard/header/index.less @@ -26,7 +26,7 @@ /* Offset the title to truly center it */ color: #fff; /* Adjust text color as needed */ - font-size: 28px; + font-size: 1.75rem; /* Adjust font size as needed */ color: #B9D5E5; /* Additional styling for title text, such as font-family, etc. */ diff --git a/src/app/routes/data-v/card/card.component.less b/src/app/routes/data-v/card/card.component.less index c736a29..1e0a165 100644 --- a/src/app/routes/data-v/card/card.component.less +++ b/src/app/routes/data-v/card/card.component.less @@ -11,7 +11,7 @@ .card-content-title { display: flex; margin-bottom: 0.5rem; - font-size: 18px; + font-size: 1.2rem; font-weight: 600; color: #74FAFB; diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css index a050816..93d6d1c 100644 --- a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.css @@ -21,10 +21,10 @@ .card-button { cursor: pointer; /* 更好的用户体验，表明这是一个可点击的按钮 */ - width: 82px; - height: 40px; - font-size: 26px; - line-height: 20px; + width: 3.7rem; + height: 1.9rem; + font-size: 1.18rem; + line-height: 0.9rem; color: rgb(0 239 248 / 100%); text-align: center; background-color: rgb(33 48 105 / 100%); @@ -68,9 +68,9 @@ border-radius: 3px; padding: 5px 20px; /* 根据实际情况调整这里的内边距 */ - font-size: 28px; + font-size: 1.2rem; font-weight: 600; - line-height: 22px; + line-height: 1.3rem; /* 字体颜色 */ color: #74FAFB; @@ -120,7 +120,7 @@ border-radius: 3px; .table-header span { flex: 1; /* 每个元素占据等宽 */ - font-size: 12px; + font-size: rem; color: #75F9FD; text-align: center; /* 文本居中 */ } @@ -139,12 +139,12 @@ border-radius: 3px; height: 40px; margin-right: 10px; padding: 3px; - font-size: 26px; + font-size: 1.25rem; font-weight: 700; text-align: center; background-color: #21306A; border:1px solid #00EFF9; - border-radius: 2px; /* 减小圆角 */ + border-radius: 0.1rem; /* 减小圆角 */ } diff --git a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts index 8e883e6..4a792ba 100644 --- a/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts +++ b/src/app/routes/data-v/lj-car-info-table/lj-car-info-table.component.ts @@ -78,7 +78,7 @@ export class DataVLjCarInfoTableComponent implements OnInit { valueGetter: function (params: any) { return parseInt(params.node.id) + 1; }, - width: 50, + minWidth: 50, cellStyle: { 'font-size': '13px' }, field: 'xh' }, @@ -86,48 +86,48 @@ export class DataVLjCarInfoTableComponent implements OnInit { { headerName: '时间', field: 'time', - width: 60, + minWidth: 60, cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '车牌', field: 'carNo', - width: 50, + minWidth: 50, cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '车型', field: 'carType', - width: 50, + minWidth: 50, cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '卡号', field: 'no', - width: 50, + minWidth: 50, cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '供应商', - width: 55, + minWidth: 55, field: 'supplier', cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '毛重', - width: 55, + minWidth: 55, field: 'grossWeight', cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '上报热值', - width: 55, + minWidth: 55, field: 'reportHotValue', cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } }, { headerName: '估算热值', - width: 55, + minWidth: 55, field: 'estimateValue', cellStyle: { 'font-size': '13px', 'padding-top': '0px', 'padding-right': '0px', 'padding-bottom': '0px', 'padding-left': '0px' } } 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 c8bc2cb..d120b6b 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 @@ -24,9 +24,9 @@ span[nz-icon] { .card-button { cursor: pointer; - width: 72px; - height: 40px; - font-size: 24px; + width: 3.27rem; + height: 1.81rem; + font-size: 1.02rem; line-height: 20px; color: rgb(0 239 248 / 100%); text-align: center; @@ -73,9 +73,9 @@ span[nz-icon] { padding: 5px 20px; /* 根据实际情况调整这里的内边距 */ - font-size: 28px; + font-size: 1.2rem; font-weight: 600; - line-height: 22px; + line-height: 1.3rem; /* 字体颜色 */ color: #74FAFB; diff --git a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less index f1cafbd..04397c8 100644 --- a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less +++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less @@ -21,10 +21,10 @@ .card-button { cursor: pointer; - width: 72px; - height: 40px; - font-size: 24px; - line-height: 20px; + width: 3.7rem; + height: 1.9rem; + font-size: 1.18rem; + line-height: 0.9rem; color: rgb(0 239 248 / 100%); text-align: center; background-color: rgb(33 48 105 / 100%); @@ -69,9 +69,9 @@ border-radius: 3px; padding: 5px 20px; /* 根据实际情况调整这里的内边距 */ - font-size: 28px; + font-size: 1.25rem; font-weight: 600; - line-height: 22px; + line-height: 1.35rem; /* 字体颜色 */ color: #74FAFB; diff --git a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css index 74a6b81..0151db2 100644 --- a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css +++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.css @@ -5,14 +5,14 @@ .custom-label { display: inline-block; padding: 10px 20px; /* 内边距 */ - font-size: 16px; /* 字体大小 */ + font-size: 0.7rem; /* 字体大小 */ color: white; /* 文字颜色 */ background-color: rgb(0 0 0 / 50%); /* 半透明黑色背景 */ border-radius: 10px 10px 0 0; /* 上方圆角 */ } .my-grid-font { - font-size: 16px; + font-size: 0.7rem; font-weight: bold; } diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css index c42618e..b67bf1c 100644 --- a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css +++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css @@ -10,7 +10,7 @@ .chart-text { margin: 0; - font-size: 24px; + font-size: 1.02rem; color: rgb(126 221 243 / 100%); } @@ -20,8 +20,8 @@ width: 12rem; height: 3rem; margin: 5px; - font-size: 28px; - line-height: 22px; + font-size: 1.75rem; + line-height: 1.02rem; color: rgb(255 0 0 / 100%); text-align: center; background-color: rgb(6 70 120 / 0%); diff --git a/src/app/routes/data-v/navigation/navigation.component.less b/src/app/routes/data-v/navigation/navigation.component.less index b32056e..7052e2b 100644 --- a/src/app/routes/data-v/navigation/navigation.component.less +++ b/src/app/routes/data-v/navigation/navigation.component.less @@ -1,11 +1,11 @@ - +@import "../../../../styles/variables.less"; .navigation-container { // overflow-x: auto; /* 水平方向上的滚动条 */ display: flex; // flex-flow: row wrap; /* 允许换行 */ flex-wrap: nowrap; /* 不允许换行 */ // width: 100%; - margin-top:10px; + .px2rem(10,margin-top); padding-left: 2rem; white-space: nowrap; /* 防止菜单项换行 */ // white-space: normal; @@ -13,8 +13,9 @@ [nz-button] { - margin-right: 8px; - margin-bottom: 12px; + .px2rem(8,margin-right); + .px2rem(12,margin-bottom); + } .nz-button-group [nz-button] { @@ -24,7 +25,8 @@ ul { display: inline-flex; flex-wrap: wrap; /* 允许子元素换行 */ - margin-bottom: 10px; + + .px2rem(10,margin-bottom); padding-top: 0; padding-left: 0; list-style-type: none; /* 移除标记 */ @@ -35,8 +37,9 @@ ul { li { // display: flex; flex-wrap: wrap; - margin-right: 10px; - margin-bottom: 30px; + .px2rem(10,margin-right); + .px2rem(30,margin-bottom); + a { clear: both; @@ -52,6 +55,7 @@ ul { background-color: #054254; border: 0 solid red; border-color: #74FAFB; + .px2rem(18,font-size); &:hover, &:active, @@ -65,8 +69,10 @@ ul { .dropdown-menu { display: inline-flex; flex-wrap: nowrap; - margin-right: 10px; - margin-bottom: 10px; + + .px2rem(30,margin-right); + .px2rem(10,margin-bottom); + color: #fff; background-color: #337AB7; } @@ -91,7 +97,8 @@ ul { >a { display: block; - + + &::after { content: "\f054"; position: absolute; diff --git a/src/app/routes/data-v/s1/s1.component.less b/src/app/routes/data-v/s1/s1.component.less index f8b3c6d..a660600 100644 --- a/src/app/routes/data-v/s1/s1.component.less +++ b/src/app/routes/data-v/s1/s1.component.less @@ -8,7 +8,7 @@ .sys-status-title { - font-size: 18px; + font-size: 0.82rem; font-weight: 600; color: #94DDF3; text-align: center; @@ -22,7 +22,7 @@ --ag-header-background-color: #0A1632; --ag-odd-row-background-color: #0A1632; --ag-header-column-resize-handle-color: rgb(126 46 132); - --ag-font-size: 17px; + --ag-font-size: 0.78rem; --ag-font-family: monospace; height: 5rem; @@ -67,7 +67,7 @@ width: 8rem; margin-left: 6px; /* 调整文字与圆形之间的间距 */ - font-size: 16px; + font-size: 0.72rem; font-weight: 600; color: #74FAFB; } @@ -75,7 +75,7 @@ .status-ext-text { margin-top: 3px; /* 将文本转换为行内块元素 */ - font-size: 12px; + font-size: 0.54rem; } } diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html index d91837d..d75ca7a 100644 --- a/src/app/routes/data-v/second1/second1.component.html +++ b/src/app/routes/data-v/second1/second1.component.html @@ -2,6 +2,7 @@
-
+
- - +
+ +
console.error(err)); + +function setFontSize() { + let designWidth = 1366; // 设计稿的宽度，根据实际项目调整 + let designHeight = 768; // 设计稿的高度，根据实际项目调整 + var fontSize = + document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight + ? (document.documentElement.clientWidth / designWidth) * 12 + : (document.documentElement.clientHeight / designHeight) * 12; + + const htmlElement = document.querySelector('html'); + if (htmlElement !== null) { + htmlElement.style.fontSize = `${fontSize}px`; + } +} + +setFontSize(); // 初始化字体大小 +window.onresize = setFontSize; // 窗口大小改变时重新设置字体大小 diff --git a/src/styles.less b/src/styles.less index 77148c5..fe01098 100644 --- a/src/styles.less +++ b/src/styles.less @@ -9,6 +9,10 @@ @import 'ag-grid-community/styles/ag-theme-material.css'; @import 'ag-grid-community/styles/ag-theme-quartz.css'; +/* src/styles.css */ +html { + font-size: calc(16px + (100vw - 320px) / 800); +} .dis-flex { display: flex; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 0000000..ac29748 --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,7 @@ +// src/styles/mixins.scss +$design_width: 1920; // 设计稿的宽度，根据实际项目调整 +$design_font_size: 12; // 基准字体大小，根据实际项目调整 + +@function px2rem($px) { + @return ($px / $design_font_size) * 1rem; +} diff --git a/src/styles/variables.less b/src/styles/variables.less new file mode 100644 index 0000000..c6faf51 --- /dev/null +++ b/src/styles/variables.less @@ -0,0 +1,10 @@ +// src/styles/variables.less +@design_width: 1920; // 设计稿的宽度，根据实际项目调整 +@design_font_size: 12; // 基准字体大小，根据实际项目调整 + +.px2rem(@px) { + @result: (@px / @design_font_size) * 1rem; +} +.px2rem(@px, @property) { + @{property}: (@px / @design_font_size) * 1rem; + } \ No newline at end of file