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

优化邮件客户端协议卡片布局
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source
This commit is contained in:
smail 2026-09-27 09:04:42 +08:00
parent 0de1e512b9
commit b64c769482
1 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -239,7 +239,7 @@
.proto-card {
min-width: 0;
padding: 12px;
padding: 12px 14px;
background: var(--pm-bg-primary);
border: 1px solid var(--pm-border-color);
border-radius: var(--pm-radius-sm);
@ -255,15 +255,20 @@
.proto-header {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
gap: 2px 6px;
padding-bottom: 8px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 6px 8px;
padding-bottom: 9px;
border-bottom: 1px solid var(--pm-border-color);
}
.proto-name-badge {
display: contents;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: baseline;
gap: 2px 8px;
min-width: 0;
}
.proto-name-badge > .el-tag {
@ -276,26 +281,30 @@
}
.proto-title {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
grid-column: 1;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
flex-shrink: 0;
line-height: 1.4;
white-space: nowrap;
line-height: 1.35;
}
.proto-name {
grid-row: 1;
font-size: 14px;
font-weight: 700;
color: var(--pm-text-primary);
white-space: nowrap;
}
.proto-service {
grid-row: 2;
font-size: 13px;
font-weight: 600;
color: var(--pm-text-primary);
white-space: nowrap;
}
.btn-card-copy {
@ -308,18 +317,20 @@
}
.proto-fields {
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(72px, 0.75fr) minmax(0, 1fr);
gap: 8px;
align-items: center;
padding-top: 1px;
}
.field-item {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
display: flex;
align-items: baseline;
min-width: 0;
font-size: 13px;
gap: 6px;
line-height: 1.5;
gap: 5px;
line-height: 1.35;
}
.field-k {
@ -330,7 +341,7 @@
.field-v {
min-width: 0;
color: var(--pm-text-primary);
text-align: right;
text-align: left;
word-break: normal;
overflow-wrap: anywhere;
}
@ -374,4 +385,33 @@
.banner-right {
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;
}
}