|
|
|
@ -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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
