html { min-height: 100vh; background-color: #f7f7f9; } form { background-color: #f7f7f9; } .cycle-select-discount { top: 0 !important; } @media (max-width: 576px) { .os-card { width: 100% !important; } .order-summary-panel { width: 100% !important; right: 0 !important; min-width: 0 !important; } } a.dropdown-item { line-height: initial !important; } .selected { color: #2a5bf9 !important; border-right: none !important; padding-right: 0 !important; } .bootstrap-select.show { color: #fff; box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5); } .bootstrap-select>button:hover , .bootstrap-select.show>button { border: #007bff 1px solid !important; } .was-validated .custom-control-input:valid~.custom-control-label::before { background-color: #fff; } .btn-group-sm > .btn, .btn-sm { font-size: inherit !important; } .bootstrap-select.is-valid .dropdown-toggle, .was-validated .bootstrap-select select:valid+.dropdown-toggle { border-color: #ced4da !important; } .form-control.is-valid, .was-validated .form-control:valid { display: block; width: 100%; padding: 0.47rem 0.75rem; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…45NSwyLjI2LDYsMi4xMyw2LDJWMS41QzYsMS4yMiw1Ljc4LDEsNS41LDF6Ii8+Cjwvc3ZnPgo=); background-position-y: 50%; background-position-x: calc(100% - 11px); background-repeat: no-repeat; padding-right: 24px; } .cycle-select-discount { position: absolute; top: -10px; right: 0; display: inline-block; padding: 0px 5px; height: 15px; background: #F70302; border-radius: 5px 5px 5px 0px; color: #ffffff; font-size: 12px; text-align: center; line-height: 15px; } .error-tip { color: #f46a6a; margin: 0; padding: 0; line-height: 36px; display: none; } .btn-group { gap: 4px !important; max-width: 100%; display: block; } label.btn-primary.mr-2 { padding: 10px 12px 10px 10px !important; background-color: #f2f3f8 !important; color: #4a5057 !important; border: transparent 2px solid !important; margin-bottom: 8px; font-weight: 480; } label img.mr-1 { border-radius: 0 !important; } label.btn-primary.mr-2:hover { background-color: #f7f9fd !important; } label.btn-primary.mr-2.active { background-color: #fff !important; color: #2a5bf9 !important; border: #007bff 2px solid !important; } .btn-group .btn-sm, .btn-custom { background-color: #f2f3f8 !important; color: #000 !important; border: none !important; margin-bottom: 6px !important; } .btn-sm { padding: 8px 16px !important; font-weight: 480; color: #5b6473 !important; } .btn-group .btn-sm:hover, .btn-custom:hover { background-color: #f7f9fd !important; } .btn-group .btn-sm.active, .btn-custom.active { background-color: #275ee5 !important; color: #fff !important; } .products-btn-group .btn-products { background-color: #fff !important; } .products-btn-group { background-color: #f2f3f8; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(26, 34, 51, 0.05); padding: 16px 12px 12px; gap: 12px 4px !important; border-bottom: 1px solid rgb(227, 230, 235); color: rgba(78, 89, 105, 0.99); width: 100%; } .products-btn-group p { margin-bottom: 0; margin-left: 5px; margin-top: 5px; } .btn { border-radius: 0 !important; } input::-webkit-input-placeholder { color: #cacdd4 !important; } input:-moz-placeholder { color: #cacdd4 !important; } input::-moz-placeholder { color: #cacdd4 !important; } input:-ms-input-placeholder { color: #cacdd4 !important; } .btn-custom { min-width: 90px; height: 36px; border: #F0F0F0 1px solid; line-height: 34px; font-size: 14px; padding: 0 20px; transition: all 0.3s ease; } .btn-custom:hover { border-color: #2a5bf9 !important; color: #2a5bf9 !important; } .btn-custom-group .active { background-color: #2a5bf9 !important; color: #fff !important; border-color: #2a5bf9 !important; } .container { margin-bottom: 4.5rem; } /* 重写进度条 */ input[type='range'] { background: #F1F3F8; outline: none; -webkit-appearance: none; /*清除系统默认样式*/ height: 6px; /*调整横条的高度*/ border-radius: 3px; background: rgb(41, 72, 223) !important; cursor: pointer; margin: 15px 0; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background-color: #fff; border: 2px solid #2a5bf9; border-radius: .25rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(41, 72, 223, 0.2); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 3px 8px rgba(41, 72, 223, 0.3); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background-color: #fff; border: 2px solid #2a5bf9; border-radius: .25rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(41, 72, 223, 0.2); } input[type="range"]::-moz-range-thumb:hover { transform: scale(1.1); box-shadow: 0 3px 8px rgba(41, 72, 223, 0.3); } .range_none { position: absolute; height: 6px; display: block; background: #DEDEDE; cursor: not-allowed; border-radius: 3px; } .form-check { margin-left: 0; margin-right: 20px; padding-left: 1.5rem; cursor: pointer; } .justify-content-start { flex-wrap: wrap; } @media (max-width: 992px) { .footer { z-index: 1; display: none !important; } } .os-container { display: flex; flex-wrap: wrap; gap: 15px; flex: 0 0 83.333333%; max-width: 83.333333%; } @media (max-width: 768px) { .os-container { flex: 0 0 100%; max-width: 100%; } } .os-card { width: 200px; border: 1px solid #e5e5e5; cursor: pointer; transition: all 0.3s; } .os-card:hover { border-color: #2a5bf9; } .os-card.highlight { border-color: #2a5bf9; } .os-card.active { border-color: #2a5bf9; box-shadow: 0 0 0 1px #2a5bf9; } .os-header { padding: 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e5e5e5; background: #f2f3f8; transition: all 0.3s; } .os-card.highlight .os-header { background: #f8f9fa; } .os-name { font-size: 14px; color: #333; font-weight: 500; } .active .os-name { color: #2a5bf9; } .os-card:hover .os-name { color: #2a5bf9; } .version-dropdown { position: relative; } .dropdown-btn { padding: 8px 10px; font-size: 13px; color: #666; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s; position: relative; } .dropdown-btn:hover { background: #f8f9fa; } .btn-group-sm>.btn, .btn-sm { padding: .3rem .6rem; } .version-list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 1000; max-height: 200px; overflow-y: auto; margin: 0; padding: 0; list-style: none; /* 添加动画效果 */ transform-origin: top center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-10px) scaleY(0.3); opacity: 0; pointer-events: none; } /* 显示状态的动画样式 */ .version-list.show { transform: translateY(0) scaleY(1); opacity: 1; pointer-events: auto; } .version-list li { padding: 8px 10px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.2s; } .version-list li:hover { background: #f5f5f5; } .version-list li.active { background: #2a5bf9; color: #fff; } .unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .maximumRows1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .configoption_range_val { height: 32px !important; font-size: 14px !important; text-align: center; width: 40px !important; padding: 0.375rem 0.5rem !important; background-color: #f2f3f8 !important; border: none !important; } /* 下拉选择框样式优化 */ .selectpicker { height: 36px !important; font-size: 14px !important; line-height: 1.5 !important; } .bootstrap-select .dropdown-toggle { height: 36px !important; font-size: 14px !important; padding: 4px 15px !important; display: flex !important; align-items: center !important; } .bootstrap-select .dropdown-toggle .filter-option { display: flex !important; align-items: center !important; } .bootstrap-select .dropdown-menu { font-size: 14px !important; } .bootstrap-select .dropdown-menu li a { padding: 8px 15px !important; display: flex !important; align-items: center !important; min-height: 32px !important; } .bootstrap-select .dropdown-toggle::after { margin-top: 0 !important; vertical-align: middle !important; } /* 修复 select 内部图标和文字的对齐 */ .bootstrap-select .dropdown-toggle .filter-option-inner-inner { line-height: 1.5 !important; padding: 2px 0 !important; } /* 确保下拉选项垂直居中 */ .dropdown-item { display: flex !important; align-items: center !important; min-height: 32px !important; } /* 修复带图标的选项对齐 */ .bootstrap-select .dropdown-menu li a img { vertical-align: middle !important; margin-top: -2px !important; } /* 单选框和复选框样式优化 */ .form-check-label { font-size: 14px !important; padding: 0; line-height: 24px; cursor: pointer; user-select: none; display: inline-flex; align-items: center; margin-left: 4px; } .custom-control-label { font-size: 14px !important; padding: 0; line-height: 24px; cursor: pointer; user-select: none; display: inline-flex; align-items: center; } /* 标签文字样式 */ .col-form-label { font-size: 14px !important; font-weight: 500; max-width: 150px; } /* 调整滑动条容器的样式 */ .col-md-10.d-flex.align-items-center { gap: 10px; padding: 0 15px !important; } /* 调整单位文本的样式 */ .col-md-10.d-flex.align-items-center span { font-size: 14px; color: #495057; margin-left: 5px; } /* 修改复选框容器样式 */ .form-check { margin-left: 0; margin-right: 20px; padding-left: 1.5rem; cursor: pointer; } /* 修改复选框标签样式 */ .form-check-label { font-size: 14px !important; padding: 0; line-height: 24px; cursor: pointer; user-select: none; display: inline-flex; align-items: center; } .form-check { width: 100%; } /* 修改复选框输入框样式 */ .form-check-input { cursor: pointer; margin-top: 0; position: relative; top: 0; border-radius: 0 !important; width: 16px !important; height: 16px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border: 1px solid #2a5bf9 !important; background-color: #fff !important; transition: all 0.2s ease-in-out !important; transform: translateY(15%); } .form-check-input:checked { background-color: #2a5bf9 !important; border-color: #2a5bf9 !important; } .form-check-input:checked::after { content: '✓' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: #fff !important; font-size: 10px !important; line-height: 1 !important; } .form-check-label { width: calc(100% - 20px); } /* 修改自定义复选框容器样式 */ .custom-control { cursor: pointer; padding-left: 1.75rem; margin-right: 20px; display: inline-flex; align-items: center; } /* 修改自定义复选框标签样式 */ .custom-control-label { font-size: 14px !important; padding: 0; line-height: 24px; cursor: pointer; user-select: none; display: inline-flex; align-items: center; } /* 修改复选框组的样式 */ .col-md-10.d-flex.justify-content-start { gap: 10px; flex-wrap: wrap; padding: 0.5rem 15px; } /* 添加下拉箭头图标 */ .dropdown-btn::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 2px solid #666; border-bottom: 2px solid #666; transform: rotate(45deg); position: absolute; right: 10px; top: 50%; margin-top: -4px; transition: all 0.2s; } /* 展开状态的箭头动画 */ .dropdown-btn.active::after { transform: rotate(-135deg); margin-top: 0; } /* 修改 os-header 中的图标样式 */ .os-header img { transition: all 0.15s ease; -webkit-filter: grayscale(1); opacity: 0.4; } /* hover 状态下的图标样式 */ .os-card:hover .os-header img { -webkit-filter: grayscale(0); opacity: 1; } /* 高亮状态下的图标样式 */ .os-card.highlight .os-header img, .os-card.active .os-header img { -webkit-filter: grayscale(0); opacity: 1; } /* 微调按钮样式 */ .adjust-buttons { display: flex; align-items: center; margin: 0 10px; gap: 1px; } .adjust-btn { width: 32px; border: none; height: 32px; background-color: #f2f3f8; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; color: #999; padding: 0 8px; } .adjust-btn:hover { background-color: #2a5bf9; color: #fff; } .adjust-btn.disabled { background-color: #fdfdfd !important; color: #cecece; cursor: not-allowed; } /* 修改输入框容器样式 */ .col-md-10.d-flex.align-items-center { gap: 10px; } /* 修改range滑块宽度 */ .configoption_range { width: calc(100% - 150px) !important; } .header-container-wrap { height: 60px; } .ewy-elem-quote { padding: 15px; margin: 0; width: 100%; } .login-alert p { margin: 0; } .login-alert { margin-bottom: 10px; } .ewy-elem-quote a { position: relative; cursor: pointer; display: inline-block; padding-right: 20px; } .ewy-elem-quote a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-50%) rotate(-45deg); transition: right 0.3s ease; } .ewy-elem-quote a:hover::after { right: 5px; } @media (max-width: 768px) { .ewy-elem-quote { padding: 10px; width: 100%; } } /* 蓝色主题提示框 */ .ewy-elem-quote.blue-theme { color: #002da0; border: 1px solid #d5e7ff; background: #d5e7ff; } .col-xl-12 { padding-top: 60px; padding-bottom: 4rem; } @media (max-width: 768px) { .navtop-standingPosition { top: 60px; } .header-container-wrap { height: 60px; } .page-desc { max-width: 200px; } .col-xl-12 { padding-bottom: calc(4rem + 74px); } } .os-container { padding-left: 15px; padding-right: 15px; } /* 下拉菜单美化 */ .bootstrap-select .dropdown-toggle { height: 36px !important; border: 1px solid #eee !important; background-color: #f2f3f8 !important; color: #333 !important; font-size: 13px !important; padding: 0 20px !important; display: flex !important; align-items: center !important; transition: all 0.2s ease; } .bootstrap-select .dropdown-toggle:hover, .bootstrap-select .dropdown-toggle:focus { border-color: #2a5bf9 !important; outline: none !important; box-shadow: none !important; } .bootstrap-select .dropdown-toggle::after { margin-left: auto !important; color: #999; transition: transform 0.2s ease; } .bootstrap-select.show .dropdown-toggle::after { transform: rotate(180deg); } /* 下拉菜单选项美化 */ .bootstrap-select .dropdown-menu { padding: 5px 0 !important; border: 1px solid #eee !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; border-radius: 2px !important; } .bootstrap-select .dropdown-menu li a { padding: 8px 15px !important; color: #666 !important; font-size: 13px !important; display: flex !important; align-items: center !important; transition: all 0.2s ease; } .bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li a:focus { background: rgba(43, 109, 229, 0.05) !important; color: #2a5bf9 !important; } .bootstrap-select .dropdown-menu li.selected a { background: rgba(43, 109, 229, 0.05) !important; color: #2a5bf9 !important; font-weight: 500; } /* 带图标的选项样式 */ .bootstrap-select .dropdown-menu li a img { margin-right: 8px !important; width: 16px !important; height: 16px !important; } /* 搜索框样式 */ .bootstrap-select .bs-searchbox input { height: 32px !important; border: 1px solid #eee !important; border-radius: 2px !important; padding: 0 12px !important; font-size: 13px !important; } .bootstrap-select .bs-searchbox input:focus { border-color: #2a5bf9 !important; box-shadow: none !important; } /* 常规下拉框美化 */ .form-control { min-height: initial; height: 36px; border: 1px solid #eee; color: #666; font-size: 13px; padding: 0 12px; transition: all 0.2s ease; border-radius: 0 !important; } .form-control:focus { border-color: #2a5bf9; box-shadow: none; } /* 禁用状态样式 */ .bootstrap-select.disabled .dropdown-toggle, .form-control:disabled { background: #f8f9fa !important; opacity: 0.75; cursor: not-allowed; } /* 错误状态样式 */ .bootstrap-select.is-invalid .dropdown-toggle, .form-control.is-invalid { border-color: #dc3545 !important; background-image: none !important; } /* 下拉框图标统一样式 */ .bootstrap-select .filter-option-inner-inner { display: flex !important; align-items: center !important; gap: 8px !important; } /* 优化滚动条 */ .bootstrap-select .dropdown-menu .inner { max-height: 300px !important; } .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar { width: 6px; } .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb { background: #e6e6e6; border-radius: 3px; } .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-track { background: #f5f5f5; }