/* 海外套餐页 — 样式参考 需求文档/易代理海外购/海外套餐.html */
:root {
--ov-main: #0A96C1;
--ov-main-light: #23a7d0;
--ov-main-deep: #0882a8;
--ov-main-opacity: rgba(10, 150, 193, 0.15);
--ov-bg-1: #f0f7fb;
--ov-bg-2: #e6f0f8;
--ov-card-bg: #ffffff;
--ov-text-normal: #445566;
--ov-text-light: #778899;
}
.ov-card.ov-card-disabled {
opacity: 0.45;
pointer-events: none;
filter: grayscale(0.6);
}
.ov-page {
position: relative;
width: 100%;
max-width: 100%;
background: linear-gradient(135deg, var(--ov-bg-1), var(--ov-bg-2));
background-attachment: fixed;
color: var(--ov-text-normal);
line-height: 1.6;
overflow-x: hidden;
}
.ov-page .header-wrap {
height: auto;
min-height: 0;
}
.ov-main {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 0;
position: relative;
z-index: 1;
}
.ov-page > .footer {
margin-top: 0;
}
.ov-bottom-banner {
height: 160px;
margin-top: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
position: relative;
overflow: hidden;
background: linear-gradient(120deg, var(--ov-main-light) 0%, var(--ov-main) 45%, var(--ov-main-deep) 70%, var(--ov-main) 100%);
background-size: 240% 240%;
animation: ov-banner-bg-shift 10s ease infinite;
box-shadow: 0 -4px 24px rgba(10, 150, 193, 0.12);
}
.ov-bottom-banner-fx {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.ov-banner-particle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
opacity: 0;
animation: ov-particle-rise 5s ease-in-out infinite;
}
.ov-banner-particle:nth-child(1) { left: 8%; bottom: 12%; animation-delay: 0s; animation-duration: 4.2s; }
.ov-banner-particle:nth-child(2) { left: 22%; bottom: 8%; animation-delay: 1.2s; animation-duration: 5.5s; width: 2px; height: 2px; }
.ov-banner-particle:nth-child(3) { left: 38%; bottom: 18%; animation-delay: 2.4s; animation-duration: 4.8s; }
.ov-banner-particle:nth-child(4) { left: 58%; bottom: 10%; animation-delay: 0.8s; animation-duration: 6s; width: 2px; height: 2px; }
.ov-banner-particle:nth-child(5) { left: 72%; bottom: 16%; animation-delay: 3s; animation-duration: 4.5s; }
.ov-banner-particle:nth-child(6) { left: 90%; bottom: 6%; animation-delay: 1.8s; animation-duration: 5.2s; width: 4px; height: 4px; }
.ov-banner-sweep {
position: absolute;
top: -20%;
left: -35%;
width: 28%;
height: 140%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06), transparent);
transform: skewX(-18deg);
animation: ov-banner-sweep 6s ease-in-out infinite;
}
.ov-banner-network {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.55;
}
.ov-banner-link {
fill: none;
stroke: rgba(255, 255, 255, 0.35);
stroke-width: 1.2;
stroke-dasharray: 8 12;
stroke-linecap: round;
animation: ov-link-flow 3s linear infinite;
}
.ov-banner-link--2 {
stroke-dasharray: 6 14;
animation-duration: 4.5s;
animation-direction: reverse;
opacity: 0.7;
}
.ov-bottom-banner-globe {
flex-shrink: 0;
width: 108px;
height: 108px;
opacity: 0.85;
position: relative;
z-index: 2;
}
.ov-bottom-banner-globe img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 14px rgba(0, 50, 70, 0.35));
animation: ov-globe-spin 24s linear infinite;
}
.ov-globe-orbit {
position: absolute;
inset: -6px;
border: 1.5px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
border-top-color: transparent;
border-right-color: rgba(255, 255, 255, 0.15);
animation: ov-orbit-spin 4s linear infinite;
pointer-events: none;
}
.ov-globe-orbit--2 {
inset: -14px;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.2);
border-bottom-color: transparent;
border-left-color: rgba(255, 255, 255, 0.35);
animation-duration: 7s;
animation-direction: reverse;
opacity: 0.65;
}
.ov-globe-node {
position: absolute;
top: 8%;
right: 6%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.5);
animation: ov-node-pulse 2s ease-in-out infinite;
}
.ov-bottom-banner-globe--left {
animation: ov-globe-float 5s ease-in-out infinite;
}
.ov-bottom-banner-globe--right {
animation: ov-globe-float-reverse 5s ease-in-out infinite 2.5s;
}
.ov-bottom-banner-globe--right .ov-globe-node {
left: 6%;
right: auto;
animation-delay: 1s;
}
@keyframes ov-banner-bg-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes ov-particle-rise {
0% { opacity: 0; transform: translateY(0) scale(0.5); }
15% { opacity: 0.9; }
85% { opacity: 0.4; }
100% { opacity: 0; transform: translateY(-90px) scale(1.2); }
}
@keyframes ov-banner-sweep {
0% { left: -35%; opacity: 0; }
10% { opacity: 1; }
50% { left: 105%; opacity: 1; }
60% { opacity: 0; }
100% { left: 105%; opacity: 0; }
}
@keyframes ov-link-flow {
to { stroke-dashoffset: -40; }
}
@keyframes ov-globe-spin {
to { transform: rotate(360deg); }
}
@keyframes ov-orbit-spin {
to { transform: rotate(360deg); }
}
@keyframes ov-node-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.45); opacity: 1; }
}
@keyframes ov-globe-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes ov-globe-float-reverse {
0%, 100% { transform: scaleX(-1) translateY(0); }
50% { transform: scaleX(-1) translateY(-6px); }
}
.ov-bottom-banner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 320px 120px at 8% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 70%),
radial-gradient(ellipse 280px 100px at 92% 40%, rgba(255, 255, 255, 0.14) 0%, transparent 65%),
radial-gradient(circle 6px at 12% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 100%),
radial-gradient(circle 4px at 88% 72%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
radial-gradient(circle 5px at 76% 22%, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
pointer-events: none;
}
.ov-bottom-banner::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-55deg,
transparent,
transparent 18px,
rgba(255, 255, 255, 0.04) 18px,
rgba(255, 255, 255, 0.04) 19px
);
background-size: 38px 38px;
animation: ov-grid-drift 18s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes ov-grid-drift {
to { background-position: 38px 0; }
}
.ov-bottom-banner-inner {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
padding: 0 24px;
max-width: 1100px;
}
.ov-bottom-banner-title {
margin: 0 0 12px;
font-size: 32px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 1px;
text-shadow: 0 2px 6px rgba(0, 50, 80, 0.35);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0 14px;
animation: ov-title-glow 3s ease-in-out infinite, ov-banner-fade-up 0.9s ease backwards;
}
.ov-bottom-banner-name,
.ov-bottom-banner-tags {
display: inline-block;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
.ov-bottom-banner-desc {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
opacity: 1;
letter-spacing: 0.3px;
white-space: nowrap;
animation: ov-banner-fade-up 0.9s ease 0.15s backwards;
}
@keyframes ov-title-glow {
0%, 100% {
text-shadow: 0 2px 8px rgba(0, 60, 90, 0.25), 0 0 0 rgba(255, 255, 255, 0);
}
50% {
text-shadow: 0 2px 14px rgba(0, 60, 90, 0.35), 0 0 28px rgba(255, 255, 255, 0.35);
}
}
@keyframes ov-banner-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ov-sub-word {
0%, 100% { opacity: 0.88; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes ov-dot-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
}
@keyframes ov-desc-shimmer {
0%, 100% { opacity: 0.82; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ov-bottom-banner,
.ov-bottom-banner::after,
.ov-bottom-banner-globe,
.ov-bottom-banner-globe img,
.ov-globe-orbit,
.ov-globe-node,
.ov-banner-particle,
.ov-banner-sweep,
.ov-banner-link,
.ov-bottom-banner-title,
.ov-bottom-banner-name,
.ov-bottom-banner-tags,
.ov-bottom-banner-desc {
animation: none !important;
}
}
.ov-tabs {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 30px;
}
.ov-tab {
padding: 12px 36px;
border-radius: 50px;
border: 1px solid var(--ov-main);
background: #fff;
color: var(--ov-main);
font-size: 15px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ov-tab:not(.active):hover {
background: rgba(10, 150, 193, 0.08);
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(10, 150, 193, 0.2);
border-color: var(--ov-main-light);
}
.ov-tab.active {
background: linear-gradient(90deg, var(--ov-main-light), var(--ov-main-deep));
color: #fff;
border-color: var(--ov-main);
box-shadow: 0 4px 12px var(--ov-main-opacity);
}
.ov-tab.active:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(10, 150, 193, 0.35);
}
.ov-panel {
display: none;
}
.ov-panel.active {
display: block;
}
.ov-panel.active .ov-feature {
background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
border-radius: 16px;
border: 1px solid rgba(10, 150, 193, 0.14);
padding: 30px;
margin-bottom: 40px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 2px 4px rgba(10, 150, 193, 0.06),
0 8px 24px rgba(10, 150, 193, 0.12),
0 16px 48px rgba(8, 80, 110, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ov-panel.active .ov-feature:hover {
transform: translateY(-4px);
border-color: rgba(10, 150, 193, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 6px 16px rgba(10, 150, 193, 0.12),
0 14px 36px rgba(10, 150, 193, 0.16),
0 22px 52px rgba(8, 80, 110, 0.1);
}
.ov-feature h2 {
font-size: 20px;
color: var(--ov-main);
margin: 0 0 12px;
font-weight: 600;
}
.ov-feature .ov-desc {
color: var(--ov-text-normal);
margin-bottom: 20px;
font-size: 15px;
line-height: 1.6;
}
.ov-feature .ov-sub {
font-size: 16px;
margin: 0 0 16px;
color: #334455;
font-weight: normal;
}
.ov-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.ov-feature-item {
display: flex;
align-items: center;
color: var(--ov-text-normal);
font-size: 14px;
margin-bottom: 6px;
transition: transform 0.2s ease, color 0.2s ease;
}
.ov-feature-item:hover {
transform: translateX(4px);
color: var(--ov-main);
}
.ov-feature-item::before {
content: "✓";
color: var(--ov-main);
font-weight: bold;
margin-right: 8px;
flex-shrink: 0;
}
.ov-pricing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
}
.ov-panel.active .ov-card {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f8fcfe 100%);
border-radius: 16px;
border: 1px solid rgba(10, 150, 193, 0.14);
padding: 28px 20px;
text-align: center;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 6px rgba(10, 150, 193, 0.07),
0 6px 20px rgba(10, 150, 193, 0.1);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.ov-panel.active .ov-card > *:not(.ov-card-badge) {
position: relative;
z-index: 1;
}
.ov-panel.active .ov-card:not(.ov-card-disabled) {
cursor: pointer;
}
.ov-card.selected:not(.ov-card-disabled) {
border-color: var(--ov-main);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(10, 150, 193, 0.15),
0 4px 12px rgba(10, 150, 193, 0.15),
0 12px 32px rgba(10, 150, 193, 0.22),
0 20px 48px rgba(8, 80, 110, 0.12);
transform: translateY(-6px);
z-index: 2;
}
.ov-card:hover:not(.ov-card-disabled) {
transform: translateY(-10px) scale(1.03);
border-color: var(--ov-main);
background: linear-gradient(180deg, #ffffff 0%, #eef8fc 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(10, 150, 193, 0.2),
0 8px 20px rgba(10, 150, 193, 0.18),
0 18px 42px rgba(10, 150, 193, 0.24),
0 0 32px rgba(10, 150, 193, 0.12);
z-index: 3;
}
.ov-card:hover:not(.ov-card-disabled) .ov-card-gb {
transform: scale(1.08);
color: var(--ov-main-deep);
}
.ov-card:hover:not(.ov-card-disabled) .ov-card-unit {
color: var(--ov-main);
}
.ov-card:hover:not(.ov-card-disabled) .ov-card-btn:not(:disabled) {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 22px rgba(10, 150, 193, 0.45);
background: linear-gradient(90deg, var(--ov-main), var(--ov-main-deep));
}
.ov-card.ov-card-disabled:hover {
transform: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 2px 6px rgba(10, 150, 193, 0.05),
0 4px 12px rgba(10, 150, 193, 0.06);
}
.ov-card-badge {
position: absolute;
top: 0;
right: 0;
z-index: 3;
background: #ff6b6b;
color: #fff;
font-size: 12px;
line-height: 1;
padding: 6px 10px;
border-radius: 0 14px 0 8px;
box-shadow: 0 2px 6px rgba(255, 107, 107, 0.35);
}
.ov-card-gb {
font-size: 28px;
font-weight: 700;
color: var(--ov-main);
margin-bottom: 8px;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
.ov-card-tag {
font-size: 14px;
color: var(--ov-text-light);
margin-bottom: 16px;
min-height: 18px;
}
.ov-card-unit {
font-size: 20px;
font-weight: 600;
color: #223344;
margin-bottom: 6px;
transition: color 0.35s ease;
}
.ov-card-total {
font-size: 14px;
color: var(--ov-text-light);
margin-bottom: 24px;
}
.ov-card-btn {
width: 100%;
padding: 12px 0;
border: none;
border-radius: 8px;
background: linear-gradient(90deg, var(--ov-main-light), var(--ov-main-deep));
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.35s ease, opacity 0.3s ease;
}
.ov-card-btn:hover:not(:disabled) {
opacity: 0.9;
box-shadow: 0 4px 12px var(--ov-main-opacity);
}
/* 确认购买弹窗 */
.layui-layer.ov-pay-layer {
border-radius: 12px;
overflow: visible;
height: auto !important;
max-height: calc(100vh - 24px);
box-shadow: 0 12px 40px rgba(10, 60, 90, 0.18);
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.layui-layer.ov-pay-layer .layui-layer-content {
text-align: left;
}
.layui-layer.ov-pay-layer .layui-layer-title {
height: 52px;
line-height: 52px;
padding: 0 20px;
font-size: 16px;
font-weight: 600;
color: #223344;
background: #fff;
border-bottom: 1px solid #eef3f7;
}
.layui-layer.ov-pay-layer .layui-layer-content {
padding: 0;
overflow: visible;
height: auto !important;
}
.ov-pay-dialog {
padding: 20px 20px 20px;
color: #334455;
font-size: 14px;
line-height: 1.5;
text-align: left;
box-sizing: border-box;
}
.ov-pay-dialog *,
.ov-pay-dialog *::before,
.ov-pay-dialog *::after {
box-sizing: border-box;
}
.ov-pay-summary-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.ov-pay-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
background: #ebf5ff;
border: none;
border-radius: 10px;
}
.ov-pay-summary-title {
font-size: 15px;
font-weight: 600;
color: #223344;
margin-bottom: 4px;
}
.ov-pay-summary-spec {
font-size: 13px;
color: #667788;
width: 100%;
display: block;
}
.ov-pay-tier-select {
display: block;
min-width: 140px;
max-width: 100%;
height: 32px;
margin: 0;
padding: 4px 28px 4px 10px !important;
font-size: 13px;
color: #334455;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667788' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center !important;
border: 1px solid #c5d9ee !important;
border-radius: 6px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
text-align: left;
}
.ov-pay-tier-select:focus {
outline: none;
border-color: #44bfa2;
box-shadow: 0 0 0 2px rgba(68, 191, 162, 0.15);
}
.ov-pay-tier-label {
display: inline-block;
}
.ov-pay-summary-right {
text-align: right;
flex-shrink: 0;
}
.ov-pay-summary-label {
display: block;
font-size: 12px;
color: #8899aa;
margin-bottom: 2px;
}
.ov-pay-price {
font-size: 22px;
font-weight: 700;
color: #e74c3c;
letter-spacing: -0.5px;
}
.ov-pay-notice {
margin-top: 14px;
padding: 12px 14px 12px 12px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid #e74c3c;
border-radius: 8px;
color: #dc2626;
font-size: 13px;
font-weight: 500;
line-height: 1.65;
}
.ov-pay-renew-qty {
margin-top: 14px;
}
.ov-pay-renew-qty-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.ov-pay-renew-qty-label {
flex: 0 0 auto;
font-size: 14px;
font-weight: 500;
color: #303133;
}
.ov-pay-renew-qty-input {
width: 120px;
height: 36px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
color: #303133;
background: #fff;
box-sizing: border-box;
}
.ov-pay-renew-qty-input:focus {
outline: none;
border-color: #067db2;
}
.ov-pay-block {
margin-top: 18px;
}
.ov-pay-block-title {
font-size: 14px;
font-weight: 600;
color: #223344;
margin-bottom: 12px;
}
.ov-pay-tiles {
display: flex;
flex-direction: row;
gap: 12px;
}
.ov-pay-tiles--triple .ov-pay-tile {
flex: 1 1 0;
min-width: 0;
padding: 10px 12px;
}
.ov-pay-tiles--triple .ov-pay-tile-name {
white-space: nowrap;
font-size: 14px;
}
.ov-pay-tiles--triple .ov-pay-balance-hint {
display: block;
white-space: nowrap;
margin-top: 2px;
}
.ov-pay-tiles--triple .ov-pay-tile-main {
flex-wrap: nowrap;
gap: 8px;
}
.ov-pay-tile-balance .ov-pay-tile-icon {
width: 28px;
height: 28px;
}
.ov-pay-tile {
position: relative;
flex: 1;
min-width: 0;
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: space-between;
min-height: 56px;
margin: 0;
padding: 12px 14px;
background: #fff;
border: 1px solid #e4edf2;
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
font-weight: normal;
float: none;
}
.ov-pay-tile:hover {
border-color: #c5d9e6;
}
.ov-pay-tile.is-active {
border: 2px solid var(--ov-main);
background: #f0f9fc;
box-shadow: none;
}
.ov-pay-tile-input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.ov-pay-tile-main {
display: flex;
align-items: center;
gap: 10px;
}
.ov-pay-tile-icon {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
}
.ov-pay-balance-hint {
font-size: 12px;
color: #888;
font-weight: normal;
}
.ov-pay-tile-name {
font-size: 15px;
color: #334455;
}
.ov-pay-tile-radio {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid #c5ced6;
border-radius: 50%;
background: #fff;
transition: border-color 0.2s, background 0.2s;
}
.ov-pay-tile.is-active .ov-pay-tile-radio {
border-color: var(--ov-main);
background: var(--ov-main);
box-shadow: inset 0 0 0 4px #fff;
}
.ov-pay-agree {
display: flex !important;
align-items: center;
gap: 8px;
margin: 16px 0 0 0 !important;
padding-top: 0;
border-top: none;
font-size: 13px;
font-weight: normal;
cursor: pointer;
color: #667788;
user-select: none;
width: 100%;
float: none;
}
.ov-pay-agree-check-wrap {
flex-shrink: 0;
position: relative;
width: 16px;
height: 16px;
display: block;
}
.ov-pay-agree-input {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 16px;
height: 16px;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
.ov-pay-agree-check {
display: block;
width: 16px;
height: 16px;
border: 1.5px solid #b8c5d0;
border-radius: 3px;
background: #fff;
box-sizing: border-box;
position: relative;
pointer-events: none;
}
.ov-pay-agree-input:checked + .ov-pay-agree-check {
background: var(--ov-main);
border-color: var(--ov-main);
}
.ov-pay-agree-input:checked + .ov-pay-agree-check::after {
content: "";
position: absolute;
left: 4.5px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
box-sizing: border-box;
}
.ov-pay-agree-text {
flex: 1;
min-width: 0;
line-height: 16px;
padding-top: 0;
}
.ov-pay-agree a {
color: var(--ov-main);
text-decoration: none;
font-weight: 500;
}
.ov-pay-agree a:hover {
text-decoration: underline;
}
.ov-pay-footer {
display: flex;
gap: 12px;
margin-top: 20px;
}
.ov-pay-btn {
flex: 1;
height: 44px;
margin: 0;
padding: 0 16px !important;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s, background 0.2s;
}
.ov-pay-btn-cancel {
background: #eef2f6;
color: #556677;
}
.ov-pay-btn-cancel:hover {
background: #e2e8ee;
}
.ov-pay-btn-submit {
background: var(--ov-main);
color: #fff;
}
.ov-pay-btn-submit:hover {
background: var(--ov-main-deep);
}
.layui-layer.ov-refund-layer {
border-radius: 10px;
}
.layui-layer.ov-refund-layer .layui-layer-content {
padding: 0;
}
.ov-refund-body {
padding: 18px 22px;
font-size: 14px;
line-height: 1.75;
color: #445566;
}
.ov-refund-body p {
margin: 0 0 10px;
}
.ov-refund-body p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.ov-pricing {
grid-template-columns: 1fr 1fr;
}
.ov-feature-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.ov-bottom-banner {
height: 160px;
gap: 0;
}
.ov-bottom-banner-globe {
display: none;
}
.ov-banner-network {
display: none;
}
.ov-bottom-banner-title {
font-size: 20px;
letter-spacing: 0.5px;
gap: 0 8px;
margin-bottom: 10px;
}
.ov-bottom-banner-desc {
font-size: 12px;
padding: 0 12px;
white-space: normal;
}
.ov-pricing {
grid-template-columns: 1fr;
}
.ov-tabs {
flex-direction: column;
align-items: flex-start;
}
.ov-tab {
width: 100%;
max-width: 280px;
}
}
/* 确认购买弹窗 — 移动端 */
@media (max-width: 520px) {
.layui-layer.ov-pay-layer {
width: calc(100vw - 24px) !important;
max-width: 480px;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin-left: 0 !important;
}
.layui-layer.ov-pay-layer.ov-pay-layer--wide {
max-width: calc(100vw - 24px);
}
.layui-layer.ov-pay-layer .layui-layer-title {
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 15px;
}
.ov-pay-dialog {
padding: 16px 14px 18px;
font-size: 13px;
}
.ov-pay-summary {
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
}
.ov-pay-summary-right {
width: 100%;
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 6px;
text-align: left;
}
.ov-pay-summary-label {
display: inline;
margin-bottom: 0;
}
.ov-pay-price {
font-size: 20px;
}
.ov-pay-notice {
font-size: 12px;
padding: 10px 12px 10px 10px;
}
.ov-pay-tiles {
flex-direction: column;
gap: 10px;
}
.ov-pay-tile {
flex: none;
width: 100%;
min-height: 52px;
padding: 10px 12px;
align-items: center;
}
.ov-pay-tile-main {
align-items: center;
min-height: 28px;
}
.ov-pay-tile-radio {
align-self: center;
}
.ov-pay-tile-icon {
width: 28px;
height: 28px;
}
.ov-pay-tile-name {
font-size: 14px;
line-height: 28px;
}
.ov-pay-agree {
align-items: center;
gap: 8px;
}
.ov-pay-footer {
flex-direction: row;
gap: 10px;
margin-top: 16px;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.ov-pay-btn {
flex: 1;
width: auto;
min-width: 0;
height: 42px;
font-size: 14px;
}
}
/* 钱包充值 — 摘要区紧凑布局 */
.ov-pay-summary--wallet {
justify-content: center;
}
.ov-wallet-summary-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
width: auto;
max-width: 100%;
}
.ov-wallet-amount-group {
display: flex;
align-items: center;
gap: 10px;
flex: 0 1 auto;
min-width: 0;
}
.ov-wallet-payable {
flex: 0 0 auto;
text-align: right;
padding-left: 16px;
border-left: 1px solid rgba(197, 217, 238, 0.9);
}
/* 钱包充值 — 金额步进器 */
.ov-wallet-amount-label {
flex: 0 0 auto;
font-size: 14px;
font-weight: 500;
color: #667788;
}
.ov-wallet-amount-ctrl {
display: inline-flex;
align-items: stretch;
flex: 0 0 auto;
border: 1px solid #c5d9ee;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.ov-wallet-amt-btn {
flex: 0 0 40px;
width: 40px;
min-width: 40px;
height: 40px;
border: none;
background: #f5f9fc;
color: #334455;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.ov-wallet-amt-btn:hover {
background: #ebf5ff;
color: #067db2;
}
.ov-wallet-amt-input {
flex: 0 0 100px;
width: 100px;
height: 40px;
border: none;
border-left: 1px solid #c5d9ee;
border-right: 1px solid #c5d9ee;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #303133;
padding: 0 8px;
box-sizing: border-box;
}
.ov-wallet-amt-input:focus {
outline: none;
background: #fafcff;
}