xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整协议卡片两行布局
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source 
提交当前协议名称、服务类型和参数区域的布局调整，作为继续修正 SMTP 标签显示问题前的检查点。
This commit is contained in:
smail 2026-09-27 09:27:04 +08:00
parent 9ccfecf9b0
commit 9e0888b51e
1 changed files with 28 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
View File

@ -263,48 +263,50 @@
} }
.proto-name-badge { .proto-name-badge {
display: grid; display: flex;
grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start;
grid-template-rows: auto auto; justify-content: space-between;
align-items: baseline; gap: 8px;
gap: 2px 8px;
min-width: 0; min-width: 0;
} }
.proto-name-badge > .el-tag { .proto-name-badge > .el-tag {
grid-column: 2; flex: 0 1 auto;
grid-row: 2; align-self: flex-end;
justify-self: end; max-width: 42%;
max-width: 100%;
padding-inline: 4px; padding-inline: 4px;
font-size: 11px; font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.proto-title { .proto-title {
display: grid; display: flex;
grid-template-columns: minmax(0, 1fr); flex-direction: column;
grid-template-rows: auto auto;
grid-column: 1;
grid-row: 1 / 3;
min-width: 0; min-width: 0;
gap: 2px; gap: 2px;
line-height: 1.35; line-height: 1.35;
} }
.proto-name { .proto-name {
grid-row: 1; min-width: 0;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: var(--pm-text-primary); color: var(--pm-text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.proto-service { .proto-service {
grid-row: 2; min-width: 0;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--pm-text-primary); color: var(--pm-text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.btn-card-copy { .btn-card-copy {
@ -317,19 +319,19 @@
} }
.proto-fields { .proto-fields {
display: grid; display: flex;
grid-template-columns: minmax(0, 1.5fr) minmax(72px, 0.75fr) minmax(0, 1fr); flex-direction: column;
gap: 8px; gap: 6px;
align-items: center;
padding-top: 1px; padding-top: 1px;
} }
.field-item { .field-item {
display: flex; display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: baseline; align-items: baseline;
min-width: 0; min-width: 0;
font-size: 13px; font-size: 13px;
gap: 5px; gap: 6px;
line-height: 1.35; line-height: 1.35;
} }
@ -341,9 +343,10 @@
.field-v { .field-v {
min-width: 0; min-width: 0;
color: var(--pm-text-primary); color: var(--pm-text-primary);
text-align: left; text-align: right;
word-break: normal; white-space: nowrap;
overflow-wrap: anywhere; overflow: hidden;
text-overflow: ellipsis;
} }
.font-mono { .font-mono {
@ -386,32 +389,4 @@
margin-left: 0; margin-left: 0;
} }
.proto-fields {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.field-item {
display: block;
}
.field-k,
.field-v {
display: block;
}
}
@media (max-width: 640px) {
.proto-fields {
grid-template-columns: minmax(0, 1fr);
}
.field-item {
display: flex;
}
.field-k,
.field-v {
display: inline;
}
} }