Selaa lähdekoodia

3d 前端:标题23px并与数据区域居中对齐;卡片字体改白、标题14px/内容12px;链接按钮亮蓝;antd 字体继承修正

18922397810 2 viikkoa sitten
vanhempi
commit
f5a3576f80

+ 9 - 2
3d/frontend/src/components/DataPanel.vue

@@ -12,13 +12,20 @@
   top: 20px;
   bottom: 20px;
   width: 300px;
-  padding: 12px 14px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
 }
+.card-title {
+  font-size: 14px;
+  color: #fff;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  margin: 0;
+}
 .placeholder {
   margin-top: 10px;
-  color: #8b93a1;
+  color: #fff;
   font-size: 12px;
 }
 </style>

+ 8 - 5
3d/frontend/src/components/PartStatusCard.vue

@@ -64,7 +64,7 @@ const statusLabel = computed(() => {
 <style scoped>
 .status-card {
   pointer-events: auto;
-  padding: 12px 14px;
+  padding: 10px;
 }
 .card-head {
   display: flex;
@@ -73,12 +73,15 @@ const statusLabel = computed(() => {
   margin-bottom: 8px;
 }
 .card-title {
-  font-size: 12px;
-  color: #8b93a1;
+  font-size: 14px;
+  color: #fff;
   font-weight: 600;
   letter-spacing: 0.5px;
   margin: 0;
 }
+.status-card :deep(.ant-btn) {
+  font-size: 12px;
+}
 .preset-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -101,7 +104,7 @@ const statusLabel = computed(() => {
   margin-top: 10px;
   font-size: 12px;
   line-height: 1.7;
-  color: #d6dbe2;
+  color: #fff;
 }
 .line {
   white-space: nowrap;
@@ -109,7 +112,7 @@ const statusLabel = computed(() => {
   text-overflow: ellipsis;
 }
 .dim {
-  color: #8b93a1;
+  color: #fff;
 }
 .card-foot {
   margin-top: 8px;

+ 6 - 5
3d/frontend/src/components/ScenePositionCard.vue

@@ -31,22 +31,23 @@ const lines = computed(() => {
 <style scoped>
 .scene-card {
   pointer-events: auto;
-  padding: 12px 14px;
+  padding: 10px;
 }
 .card-title {
-  font-size: 12px;
-  color: #8b93a1;
+  font-size: 14px;
+  color: #fff;
   font-weight: 600;
   letter-spacing: 0.5px;
   margin: 0 0 8px;
 }
 .cam-info {
-  color: #8b93a1;
+  color: #fff;
   font-size: 12px;
   line-height: 1.6;
   font-variant-numeric: tabular-nums;
 }
 .dim {
-  opacity: 0.6;
+  color: #fff;
+  opacity: 0.8;
 }
 </style>

+ 15 - 3
3d/frontend/src/components/TopBar.vue

@@ -15,7 +15,7 @@ function onModelChange(value: unknown): void {
 
 <template>
   <header class="topbar">
-    <h1 class="title">3D 部件查看与配色</h1>
+    <h1 class="title">压缩机故障预测模型</h1>
     <div class="field">
       <span class="label">模型</span>
       <a-select
@@ -59,11 +59,23 @@ function onModelChange(value: unknown): void {
   color: #d6dbe2;
   z-index: 20;
   position: relative;
+  font-size: 12px;
 }
 .title {
-  font-size: 15px;
+  font-size: 23px;
   font-weight: 600;
-  margin: 0;
+  line-height: 1;
+  /* 与左侧「数据区域」卡片同宽同起点后水平居中,使两者中心对齐
+     header 左内边距 16 + 4 = 20 = 数据区域卡片 left */
+  width: 300px;
+  margin: 0 0 0 4px;
+  text-align: center;
+}
+/* 顶部除标题外统一 12px(含 antd 控件) */
+.topbar :deep(.ant-select),
+.topbar :deep(.ant-btn),
+.topbar :deep(.ant-tag) {
+  font-size: 12px;
 }
 .field {
   display: flex;

+ 32 - 0
3d/frontend/src/styles/index.css

@@ -48,6 +48,38 @@ body {
   flex: 0 0 auto;
 }
 
+/* 让 antd 组件使用与页面一致的字体(含中文 PingFang SC),避免中文回退字形偏大 */
+.ant-select,
+.ant-select *,
+.ant-select-dropdown,
+.ant-select-dropdown *,
+.ant-btn,
+.ant-tag,
+.ant-modal,
+.ant-table {
+  font-family: inherit;
+}
+
+/* 顶部下拉:与其它元素统一 12px */
+.topbar .ant-select,
+.topbar .ant-select .ant-select-selector,
+.topbar .ant-select .ant-select-selection-item,
+.topbar .ant-select .ant-select-selection-placeholder,
+.topbar .ant-select .ant-select-selection-search-input {
+  font-size: 12px !important;
+}
+.ant-select-dropdown {
+  font-size: 12px;
+}
+
+/* 文本型(链接)按钮:亮蓝色,暗底上更清晰 */
+.ant-btn-link {
+  color: #69c0ff;
+}
+.ant-btn-link:hover {
+  color: #91d5ff;
+}
+
 /* 查询部件弹窗:白底黑字 */
 .part-query-modal .ant-modal-content {
   background: #fff;