liuhaodong
/
laic-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: stop clipping traffic package card grid 

Exclude package-card-grid from the fixed-height amount input
wrapper and harden AccountView card layout so packages are fully
visible.
main
xiaosi 3 weeks ago
parent
db896d1f06
commit
5ec6a88733
2 changed files with 35 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/styles/prototype.css
  2. 42
      src/views/AccountView/AccountView.vue

5
src/styles/prototype.css
View File

@ -850,9 +850,10 @@ svg:not(.t-icon){ width: 18px; height: 18px; fill: none; stroke: currentColor; s
.traffic-purchase-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; } .traffic-purchase-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; }
.traffic-amount-block{ padding: 18px; border: 1px solid var(--line); border-radius: 5px; } .traffic-amount-block{ padding: 18px; border: 1px solid var(--line); border-radius: 5px; }
.traffic-amount-block label > span{ display: block; margin-bottom: 8px; color: #4e5f6b; font-size: 11px; } .traffic-amount-block label > span{ display: block; margin-bottom: 8px; color: #4e5f6b; font-size: 11px; }
.traffic-amount-block label > div{ height: 46px; display: flex; align-items: center; border: 1px solid #cfdae2; border-radius: 4px; overflow: hidden; }
.traffic-amount-block label > div:not(.package-card-grid){ height: 46px; display: flex; align-items: center; border: 1px solid #cfdae2; border-radius: 4px; overflow: hidden; }
.traffic-amount-block label > div.package-card-grid{ height: auto; overflow: visible; border: 0; background: transparent; display: grid; align-items: stretch; }
.traffic-amount-block input:not(.t-input__inner){ width: 100%; height: 100%; padding: 0 12px; border: 0; outline: 0; color: #304552; background: #fff; font-size: 19px; } .traffic-amount-block input:not(.t-input__inner){ width: 100%; height: 100%; padding: 0 12px; border: 0; outline: 0; color: #304552; background: #fff; font-size: 19px; }
.traffic-amount-block label b{ padding: 0 13px; color: #6c7d88; font-size: 12px; font-weight: 500; }
.traffic-amount-block label > b{ padding: 0 13px; color: #6c7d88; font-size: 12px; font-weight: 500; }
.traffic-order-summary{ padding: 18px; display: flex; flex-direction: column; border: 1px solid #d7e4ee; border-radius: 5px; background: #f5f9fc; } .traffic-order-summary{ padding: 18px; display: flex; flex-direction: column; border: 1px solid #d7e4ee; border-radius: 5px; background: #f5f9fc; }
.traffic-order-summary > span{ color: var(--muted); font-size: 10px; } .traffic-order-summary > span{ color: var(--muted); font-size: 10px; }
.traffic-order-summary > strong{ margin: 5px 0 14px; font-size: 13px; } .traffic-order-summary > strong{ margin: 5px 0 14px; font-size: 13px; }

42
src/views/AccountView/AccountView.vue
View File

@ -933,58 +933,80 @@ onMounted(load)
} }
.package-card-grid { .package-card-grid {
display: grid !important; display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 10px;
width: 100%; width: 100%;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
align-items: stretch !important;
border: 0 !important;
background: transparent !important;
padding: 2px;
} }
.package-card-grid :deep(.t-radio) { .package-card-grid :deep(.t-radio) {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: auto !important;
min-height: 0;
overflow: visible;
border: 1px solid #cfdae2; border: 1px solid #cfdae2;
border-radius: 5px;
border-radius: 6px;
background: #fff; background: #fff;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
} }
.package-card-grid :deep(.t-radio__former) { .package-card-grid :deep(.t-radio__former) {
position: absolute; position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.package-card-grid :deep(.t-radio__input) { .package-card-grid :deep(.t-radio__input) {
display: none;
display: none !important;
} }
.package-card-grid :deep(.t-radio__label) { .package-card-grid :deep(.t-radio__label) {
display: block;
width: 100%; width: 100%;
padding: 0;
margin: 0;
height: auto;
padding: 0 !important;
margin: 0 !important;
line-height: normal;
} }
.package-card-body { .package-card-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px;
padding: 12px 12px 10px;
min-height: 96px;
gap: 6px;
padding: 14px 14px 12px;
min-height: 108px;
box-sizing: border-box;
} }
.package-card-body strong { .package-card-body strong {
color: #304552; color: #304552;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.3;
} }
.package-card-body b { .package-card-body b {
color: #246fae; color: #246fae;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 1.1;
line-height: 1.15;
padding: 0 !important;
} }
.package-card-body em { .package-card-body em {
font-style: normal; font-style: normal;
color: #3b4d58; color: #3b4d58;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
line-height: 1.3;
} }
.package-card-body small { .package-card-body small {
color: #74838d; color: #74838d;
font-size: 10px; font-size: 10px;
line-height: 1.3;
} }
.package-card-grid :deep(.t-is-checked) { .package-card-grid :deep(.t-is-checked) {
border-color: #3b8fd4; border-color: #3b8fd4;

Write Preview
Loading…
Cancel
Save