diff --git a/src/styles/prototype.css b/src/styles/prototype.css index dc73613..748f955 100644 --- a/src/styles/prototype.css +++ b/src/styles/prototype.css @@ -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-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 > 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 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 > span{ color: var(--muted); font-size: 10px; } .traffic-order-summary > strong{ margin: 5px 0 14px; font-size: 13px; } diff --git a/src/views/AccountView/AccountView.vue b/src/views/AccountView/AccountView.vue index 63a83cc..1f37d27 100644 --- a/src/views/AccountView/AccountView.vue +++ b/src/views/AccountView/AccountView.vue @@ -933,58 +933,80 @@ onMounted(load) } .package-card-grid { 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%; + 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) { margin: 0; width: 100%; + height: auto !important; + min-height: 0; + overflow: visible; border: 1px solid #cfdae2; - border-radius: 5px; + border-radius: 6px; background: #fff; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .package-card-grid :deep(.t-radio__former) { position: absolute; + inset: 0; + width: 100%; + height: 100%; opacity: 0; pointer-events: none; } .package-card-grid :deep(.t-radio__input) { - display: none; + display: none !important; } .package-card-grid :deep(.t-radio__label) { + display: block; width: 100%; - padding: 0; - margin: 0; + height: auto; + padding: 0 !important; + margin: 0 !important; + line-height: normal; } .package-card-body { display: flex; 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 { color: #304552; font-size: 12px; font-weight: 600; + line-height: 1.3; } .package-card-body b { color: #246fae; font-size: 20px; font-weight: 600; - line-height: 1.1; + line-height: 1.15; + padding: 0 !important; } .package-card-body em { font-style: normal; color: #3b4d58; font-size: 13px; font-weight: 600; + line-height: 1.3; } .package-card-body small { color: #74838d; font-size: 10px; + line-height: 1.3; } .package-card-grid :deep(.t-is-checked) { border-color: #3b8fd4;