diff --git a/src/pages/Index/Settings/Version.vue b/src/pages/Index/Settings/Version.vue index d1538f1..704fb06 100644 --- a/src/pages/Index/Settings/Version.vue +++ b/src/pages/Index/Settings/Version.vue @@ -97,6 +97,7 @@ const onShowMCUDetail = () => { display: flex; flex-direction: column; gap: 20px; + .setting-item { background-color: #fff; border-radius: 12px; @@ -107,27 +108,30 @@ const onShowMCUDetail = () => { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); transition: all 0.3s ease; height: 4rem; + .label { font-size: 28px; font-weight: 500; color: #303133; } - .value { + + .value, + .mcu-version { font-size: 28px; color: #606266; } - .mcu-version{ - font-size: 28px; - } } } -.column-version{ + +.column-version { font-weight: 600; font-size: 1.6rem; color: #303133; } -/* 页面整体背景色,可根据喜好调整 */ +/* ================================== + MCU 版本详情弹窗 & 表格样式 + ================================== */ .mcu-detail { background-color: #f4f4f4; margin: 0; @@ -135,38 +139,54 @@ const onShowMCUDetail = () => { font-family: Arial, sans-serif; } -/* 表格整体样式 */ .mcu-table { - width: 100%; /* 可调整表格宽度,比如设为100%占满容器 */ - margin: 20px auto; /* 让表格居中 */ + width: 100%; + margin: 20px auto; + table-layout: fixed; /* 固定列宽生效 */ border-collapse: collapse; /* 合并边框 */ - background-color: #fff; /* 表格背景色 */ - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 增加点阴影让表格立体些,可选 */ + background-color: #fff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); font-size: 2rem; -} - -/* 表头样式 */ -.mcu-table thead th { - padding: 10px; - background-color: #f1f1f1; - color: #353535; -} + thead { + th { + padding: 10px; + background-color: #f1f1f1; + color: #353535; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } -/* 表格行样式,隔行换色 */ -.mcu-table tbody tr:nth-child(even) { - background-color: #f8f9fa; /* 偶数行背景色,可调整 */ -} + tbody { + tr { + &:nth-child(even) { + background-color: #f8f9fa; + } + &:nth-child(odd) { + background-color: #ffffff; + } -.mcu-table tbody tr:nth-child(odd) { - background-color: #ffffff; /* 奇数行背景色,可调整 */ -} + td { + padding: 10px; + border-bottom: 1px solid #ddd; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } -/* 表格单元格样式 */ -.mcu-table tbody td { - padding: 10px; - border-bottom: 1px solid #ddd; /* 底部边框分隔 */ - width: 5rem; + /* 列宽控制 */ + th:nth-child(1), + td:nth-child(1) { + width: 200px; + } + th:nth-child(2), + td:nth-child(2) { + width: 150px; + } }