@charset "utf-8"; /* site: www.auteltech.cn the sass files for this file, please contact with wangjie@autel.com / 404629234@qq.com, A20421 */ input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } .l-pagew { max-width: 1920px; margin: 0 auto; } .l-contentw { max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .north, .account { box-sizing: border-box; } .icon-pro { display: inline-block; } /* 年中大促 0616 */ select { height: 28px !important; padding: 4px; } .north, .account { width: initial; max-width: 1280px; padding-left: 20px; padding-right: 20px; } .account { margin-top: 10px; } #app { box-sizing: border-box; font-family: PingFangSC-Regular, PingFang SC; background-color: #eeeeee; min-height: 100vh; user-select: none; -webkit-user-select: none; } #app { visibility: hidden; } #app.mounted { visibility: visible; } .c-img_ratio { position: relative; display: inline-flex; vertical-align: middle; height: 0; width: 100%; padding-bottom: 56.25%; } .c-img_ratio > img { outline: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .inline { display: inline-flex; align-items: center; } .icon { font-family: 'iconfont'; font-style: normal; } #paypage1 { min-height: 400px; } .my_order { display: flex; border: 1px solid #dddddd; margin-bottom: 20px; } .my_order .da_right { flex: 1; } .main-top { display: flex; justify-content: space-between; align-items: center; } .main-top .h5 { color: black; } .loadmore { text-align: center; color: #666666; padding: 30px 0px; } .scroller::-webkit-scrollbar { width: 6px; } .scroller::-webkit-scrollbar:hover { width: 16px; } .scroller::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border: 1px solid #fff; border-radius: 10px; } .empty-data { text-align: center; padding: 100px; } .empty-data .empty-text { display: block; margin-top: 20px; text-align: center; color: #999999; } i > svg { width: 100%; height: 100%; } .c-search { display: flex; background: rgba(240, 240, 240, 0.5); border-radius: 4px; border: 1px solid rgba(221, 221, 221, 0.5); } .c-search input { background: inherit; border: none; outline: none; flex: 1; text-indent: 10px; font-size: 14px; } .c-search .icon { width: 32px; height: 32px; display: flex; justify-content: center; margin: 0; background: inherit; cursor: pointer; align-items: center; font-size: 20px; color: #6E7484; font-weight: 600; } .renewal_btn { user-select: none; background: #82cff1; background: -webkit-linear-gradient(to bottom, #82cff1 0%, #38aeea 100%); background: linear-gradient(to bottom, #82cff1 0%, #38aeea 100%); border: 1px solid #3cafcf; border-radius: 4px; box-shadow: inset rgba(255, 255, 255, 0.3) 1px 1px 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #fff; text-decoration: none; display: inline-block; text-align: center; padding: 6px 20px 6px; cursor: pointer; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); text-transform: capitalize; transition: 0.1s linear; } .renewal_btn.type2 { background: linear-gradient(180deg, #7FB8E9 0%, #468EDD 100%); border-radius: 3px; border: 1px solid #4D88BC; min-width: 80px; box-sizing: border-box; } .renewal_btn.type2:hover { opacity: .6; } .renewal_btn:hover { background: #99d8f4; background: -webkit-linear-gradient(to bottom, #99d8f4 0%, #4fb7ec 100%); background: linear-gradient(to bottom, #99d8f4 0%, #4fb7ec 100%); } .renewal_btn.grey { background: #ededed; background: -webkit-linear-gradient(to bottom, #e4e4e4 0%, #d0d0d0 100%); background: linear-gradient(to bottom, #e4e4e4 0%, #d0d0d0 100%); border: 1px solid #c9c9c9; color: #333; } .renewal_btn.grey:hover { background: #f7f7f7; background: -webkit-linear-gradient(to bottom, #eeeeee 0%, #e4e4e4 100%); background: linear-gradient(to bottom, #eeeeee 0%, #e4e4e4 100%); } .renewal_btn2 { border: 1px solid #d9001b; border-radius: 4px; color: #d9001b; padding: 4px 20px; cursor: pointer; display: inline-block; opacity: 1; text-align: center; } .renewal_btn2:hover { opacity: 0.6; } .renewal_btn2.normal { border: 1px solid #02a7f0; color: #02a7f0; } .c-btn_1 { position: relative; border: 1px solid black; color: black; padding: 7px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 1; text-align: center; font-size: 14px; line-height: 1; transition: opacity .2s ease-in-out; box-sizing: border-box; user-select: none; overflow: hidden; min-width: 80px; } .c-btn_1 .btn-box { position: relative; padding: 0 20px; padding: 0; } .c-btn_1 .btn-box i { right: 0 !important; } .c-btn_1:hover { opacity: 0.6; } .c-btn_1.primary { border-color: #B83333; background-color: #B83333; color: white; } .c-btn_1.c-btn-icon .btn-box { display: inline-flex; align-items: center; } .c-btn_1.c-btn-icon .btn-box > span { margin-right: 4px; } .c-btn_1.c-btn-icon i { right: 12px; transition: transform .2s ease-in-out; font-size: 12px; } .c-btn_1.c-btn-icon i.opened { transform: rotate(180deg); } .c-btn_1 i.btn-loading { width: 12px; height: 12px; display: inline-block; right: 12px; } .c-btn_1::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s; } .c-btn_1:active::after { transform: scale(0, 0); opacity: .3; transition: 0s; } @media screen and (max-width: 1280px) and (max-height: 768px) { .c-btn_1:hover { opacity: 1; } } .c-btn_2 { color: white; padding: 4px 10px; border: 1px solid white; background-color: transparent; border-radius: 20px; display: inline-block; text-align: center; cursor: pointer; position: relative; user-select: none; transition: opacity .2s ease-in-out; opacity: 0.9; overflow: hidden; } .c-btn_2:hover { opacity: 1; } .c-btn_2.small { padding: 6px 20px; font-size: 16px; } .c-btn_2.normal { font-size: 20px; padding: 8px 30px; } .c-btn_2.primary { background-color: red; border: none; } .c-btn_2::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s; } .c-btn_2:active::after { transform: scale(0, 0); opacity: .3; transition: 0s; } @media screen and (max-width: 768px) { .c-btn_2:hover { opacity: 1; } .c-btn_2.small { padding: 4px 20px; font-size: 14px; } .c-btn_2.normal { font-size: 16px; padding: 4px 20px; } } .c-btn_3 { position: relative; border: 1px solid black; color: black; padding: 7px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 1; text-align: center; font-size: 14px; line-height: 1; transition: opacity .2s ease-in-out; box-sizing: border-box; user-select: none; overflow: hidden; min-width: 80px; border-radius: 4px; } .c-btn_3:hover { opacity: 0.8; } .c-btn_3.primary { border-color: #2dae51; background-color: #2dae51; color: white; } @media screen and (max-width: 1280px) and (max-height: 768px) { .c-btn_3:hover { opacity: 1; } } .c-btn_4 { position: relative; color: white; padding: 15px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 1; text-align: center; font-size: 14px; line-height: 1; transition: opacity .2s ease-in-out; box-sizing: border-box; user-select: none; overflow: hidden; min-width: 80px; border-radius: 4px; width: 100%; } .c-btn_4:hover { opacity: 0.8; } .c-btn_4.primary { color: white; background-image: linear-gradient(#4b4b4b, black); } @media screen and (max-width: 1280px) and (max-height: 768px) { .c-btn_4:hover { opacity: 1; } } .c-input_num { border: 1px solid #DDDDDD; width: 160px; display: flex; margin-left: 10px; } .c-input_num.disabled { opacity: 0.4; } .c-input_num i { width: 30px; height: 30px; min-width: 30px; display: flex; align-items: center; justify-content: center; color: #333333; font-size: 16px; cursor: pointer; transition: transform .2s ease-in-out; user-select: none; -webkit-tap-highlight-color: transparent; } .c-input_num i:hover { transform: scale(1.3); } .c-input_num i.disabled { opacity: 0.6; } .c-input_num i.disabled:hover { transform: scale(1); } .c-input_num input { flex: 1; outline: none; border: none; background-color: inherit; text-align: center; width: 0px; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; font-size: 14px; color: #333333; } .c-input { border: 1px solid #dddddd; background: inherit; outline: none; text-indent: 10px; font-size: 14px; height: 32px; } /* loading 组件 */ .lds-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; } .spinner { width: 25px; height: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%); } .double-bounce1, .double-bounce2 { width: 25px; height: 25px; border-radius: 50%; background-color: #FF000F; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } .app_loading { position: fixed; /* position: absolute; */ top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 99; } .app_loading svg { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin-top: -24px; margin-left: -24px; animation: loading_rotate 0.6s linear infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes loading_rotate { 100% { -webkit-transform: rotate(360deg); } } /* Standard syntax */ @keyframes loading_rotate { 100% { transform: rotate(360deg); } } .btn-loading { border-radius: 100%; margin: 0px; border: 1px solid #fff; border-bottom-color: transparent; height: 26px; width: 26px; background: 0 0 !important; display: inline-block; -webkit-animation: rotate1 .75s 0s linear infinite; animation: rotate1 .75s 0s linear infinite; } @keyframes rotate1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .pop_modal__title { font-size: 18px; text-align: center; } .pop_modal { display: none; } .pop_modal.c-modal2 { display: block; transform: translateX(-200%); -ms-transform: translateX(-200%); /* IE 9 */ -moz-transform: translateX(-200%); /* Firefox */ -webkit-transform: translateX(-200%); /* Safari 和 Chrome */ -o-transform: translateX(-200%); /* Opera */ height: 1px; max-height: 1px; } .pop_modal.show { display: block; } .pop_modal.show.c-modal2 { display: block; transform: translateX(0%); -ms-transform: translateX(0%); /* IE 9 */ -moz-transform: translateX(0%); /* Firefox */ -webkit-transform: translateX(0%); /* Safari 和 Chrome */ -o-transform: translateX(0%); /* Opera */ height: auto; max-height: initial; } .pop_modal, .pop_modal_mask, .pop_modal_wrap { position: fixed; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 2; } .pop_modal_mask { background-color: rgba(0, 0, 0, 0.5); } .pop_modal_wrap { z-index: 3; } .pop_modal_box { width: 480px; height: auto; padding: 20px; box-sizing: content-box; background-color: white; margin-left: auto; margin-right: auto; margin-top: 200px; position: relative; overflow: hidden; } .pop_modal_box2 { width: 800px; height: auto; padding: 24px; box-sizing: content-box; background-color: white; margin-left: auto; margin-right: auto; margin-top: 200px; position: relative; overflow: hidden; } .pop_modal__title2 { text-align: left; font-size: 18px; padding-bottom: 16px; } .pop_modal_closeBtn { position: absolute; right: 0; top: 0; padding: 4px; width: 20px; height: 20px; background-color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; transition: background-color .2s ease-in-out; } .pop_modal_closeBtn::before { transform: rotate(45deg); } .pop_modal_closeBtn2 { position: absolute; right: 24px; top: 24px; padding: 4px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease-in-out; font-size: 20px !important; color: #666666; } .pop_modal_closeBtn2:hover { transform: scale(1.3); } .pop_modal_closeBtn:hover { background-color: #f5f5f5; } .btn_wrap { margin-top: 0.30rem; margin-top: 4vh; } .btn_wrap2 { margin-top: 0.30rem; margin-top: 4vh; text-align: center; } .pop_modal_box .btn_wrap { margin-top: 20px; text-align: center; } @media screen and (max-height: 1000px) { .pop_modal_box { margin-top: 100px; } } /* 针对平板设备*/ @media screen and (max-width: 1280px) and (max-height: 768px) { .c-modal2.pop_modal, .c-modal2 .pop_modal_mask, .c-modal2 .pop_modal_wrap { position: relative; } .c-modal2 .pop_modal_box2 { margin-top: 0; } .pop_modal_box2 { margin-top: 80px; padding: 10px; } .pop_modal .pop_modal_box { margin-top: 10px; padding: 20px; border-radius: 0; border: 1px solid #f2f2f2; } .pop_modal_box.box2 { width: 92%; background-color: #F9F9F9; margin-top: 0.8rem; } #paypage1 { min-height: 400px; max-height: 400px; } .padHide { display: none !important; height: 0; } .padModal { position: relative !important; } } /* autel pad devices fix */ .atpad .pop_modal_box { margin-top: 50px; padding: 20px; } @media screen and (max-width: 1024px) { .pop_modal .pop_modal_box { margin-top: 50px; padding: 20px; } .pop_modal .pop_info { margin-top: 10px; max-height: 280px; max-height: 40vh; overflow-y: auto; } .pop_modal .pop_info .p1 { font-size: 12px; margin-bottom: 4px; } .pop_modal .term_content { max-height: 280px; max-height: 40vh; } .pop_modal .term_content p { font-size: 12px; margin-bottom: 4px; } } .c-select.base { position: relative; font-size: 14px; } .c-select.base .select-box, .c-select.base .select-box2 { position: relative; width: 100%; border: 1px solid #c7c7c7; display: flex; justify-content: space-between; box-sizing: border-box; } .c-select.base .select-box.actived, .c-select.base .select-box2.actived { border-color: #b80000; } .c-select.base .select-box:hover, .c-select.base .select-box2:hover { border-color: #bf0000; } .c-select.base .select-box input, .c-select.base .select-box2 input { border: none; outline: none; flex: 1; width: 100%; text-indent: 10px; height: 32px; background: inherit; font-size: 14px; } .c-select.base .select-box .arrow, .c-select.base .select-box2 .arrow { box-sizing: border-box; width: 32px; padding: 4px; font-size: 16px; color: #979797; display: flex; align-items: center; justify-content: center; transition: transform .2s ease-in-out; } .c-select.base .select-box .arrow.open, .c-select.base .select-box2 .arrow.open { transform: rotate(180deg); } .c-select.base .select-box .qingchu, .c-select.base .select-box2 .qingchu { position: absolute; color: #dbdbdb; top: 0.01rem; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; } .c-select.base .select-box.noicon .qingchu, .c-select.base .select-box2.noicon .qingchu { right: 0; } .c-select.base .select-box.useicon .qingchu, .c-select.base .select-box2.useicon .qingchu { right: 32px; } .c-select.base .select-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .c-select.base .select-items { position: absolute; width: 100%; border: 1px solid #e6e6e6; border-top: none; background-color: white; z-index: 11; box-sizing: border-box; max-height: 200px; overflow-y: auto; box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.15); margin-top: 10px; } .c-select.base .select-items .select-item { padding: 6px 4px 6px 10px; border-bottom: 1px solid #f5f5f5; cursor: default; color: #999999; display: flex; align-items: center; justify-content: space-between; } .c-select.base .select-items .select-item.selected { background-color: #f9f9f9; color: #333333; } .c-select.base .select-items .select-item:last-child { border-bottom-color: transparent; } .c-select.base .select-items .select-item:hover { background-color: #fefefe; color: #000000; } .c-select.base .select-items .select-item .icon-check { width: 20px; height: 20px; display: inline-block; } .c-select.base .select-items .select-item .icon-check svg { width: 100%; height: 100%; } .multi-tags { min-height: 32px; display: flex; align-items: center; padding: 0 10px; flex-wrap: wrap; width: 100%; } .multi-tags .multi-tag { padding: 2px 6px; background-color: #f5f5f5; border-radius: 4px; margin-right: 4px; margin-top: 2px; margin-bottom: 2px; } .multi-tags .multi-tag .delete { width: 16px; height: 16px; display: inline-block; padding: 2px; line-height: 16px; box-sizing: border-box; cursor: pointer; } /* tpms query select 样式 */ .c-select.type_m01 { position: relative; font-size: 14px; } .c-select.type_m01 input::-webkit-input-placeholder { color: #aaaaaa; } .c-select.type_m01.disabled .select-box { background-color: #e1e1e1; } .c-select.type_m01.disabled .select-box.actived { border-color: #BBBBBB; } .c-select.type_m01.disabled .select-box:hover { border-color: #BBBBBB; } .c-select.type_m01.disabled .select-box2 input { background-color: #e1e1e1; } .c-select.type_m01.disabled .arrow::before { opacity: .5; } .c-select.type_m01 .select-box { position: relative; width: 100%; border: 1px solid #c7c7c7; display: flex; justify-content: space-between; box-sizing: border-box; border-radius: 0.1rem; background: inherit; border: 1px solid #BBBBBB; box-shadow: inset 0 0.04rem 0.02rem 0 #e2e2e2; overflow: hidden; height: 0.88rem; padding: 0.04rem; background-color: #f5f5f5; } .c-select.type_m01 .select-box input { font-size: .34rem; border: none; outline: none; flex: 1; width: 100%; text-indent: 0.3rem; background-color: inherit; box-shadow: none; height: 100%; border-radius: initial; } .c-select.type_m01 .select-box .arrow { box-sizing: border-box; width: 32px; padding: 4px; font-size: 24px; color: #979797; display: flex; align-items: center; justify-content: center; transition: transform .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out; } .c-select.type_m01 .select-box .arrow.open { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .c-select.type_m01 .select-box2 { position: relative; display: flex; box-shadow: inset 0 0.04rem 0.02rem 0 #e2e2e2; border: 1px solid #BBBBBB; height: 0.88rem; box-sizing: border-box; border-radius: .10rem; padding: .04rem; } .c-select.type_m01 .select-box2.useicon { border: none; box-shadow: none; padding: 0; } .c-select.type_m01 .select-box2.useicon input { border: 1px solid #BBBBBB; box-shadow: inset 0 0.04rem 0.02rem 0 #e2e2e2; } .c-select.type_m01 .select-box2.useicon .qingchu { right: 1.11rem; top: 0.03rem; height: 0.82rem; width: 0.82rem; display: flex; align-items: center; justify-content: center; } .c-select.type_m01 .select-box2 input { font-size: .34rem; outline: none; flex: 1; width: 100%; height: 100%; text-indent: 0.3rem; box-sizing: border-box; border: none; box-shadow: none; } .c-select.type_m01 .select-box2 .arrow { background-image: linear-gradient(0deg, #D5D5D5 0%, #F1F1F1 100%); border: 1px solid #B8B8B8; border-radius: 0.1rem; height: 0.88rem; width: 0.88rem; margin-left: 0.2rem; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #979797; box-sizing: border-box; transform: none; } .c-select.type_m01 .select-box2 .arrow::before { transition: transform .2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out; } .c-select.type_m01 .select-box2 .arrow.open::before { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .c-select.type_m01 .select-box2 .qingchu { position: absolute; right: 0.01rem; color: #dbdbdb; top: 0.01rem; height: 0.82rem; width: 0.82rem; display: flex; align-items: center; justify-content: center; } .type_m01 .select-items { position: absolute; width: 100%; border-top: none; z-index: 999; box-sizing: border-box; max-height: 200px; overflow-y: auto; line-height: 1; background: #F5F5F5; border: 0.02rem solid #CCCCCC; box-shadow: 1px 4px 0.1rem 2px rgba(0, 0, 0, 0.15); border-radius: 4px; margin-top: 3px; } .type_m01 .select-items .select-item { cursor: default; color: #000000; display: flex; align-items: center; justify-content: space-between; font-size: .34rem; height: 1.06rem; line-height: 1.06rem; padding: 0 0.3rem; border-bottom: 1px solid #dbdbdb; } .type_m01 .select-items .select-item.selected { color: #007AFF; } .type_m01 .select-items .select-item:last-child { border-bottom-color: transparent; } .type_m01 .select-items .select-item:hover:not(.nodata) { background-color: #fefefe; color: #000000; } .type_m01 .select-items .select-item.nodata { opacity: .8; } .type_m01 .select-items .select-item .icon-check { width: 20px; height: 20px; display: inline-block; } .type_m01 .select-items .select-item .icon-check svg { width: 100%; height: 100%; } .type_m01 .multi-tags { min-height: 32px; display: flex; align-items: center; padding: 0 10px; flex-wrap: wrap; width: 100%; } .type_m01 .multi-tags .multi-tag { padding: 2px 6px; background-color: #f5f5f5; border-radius: 4px; margin-right: 4px; margin-top: 2px; margin-bottom: 2px; } .type_m01 .multi-tags .multi-tag .delete { width: 16px; height: 16px; display: inline-block; padding: 2px; line-height: 16px; box-sizing: border-box; cursor: pointer; } .paginate-wrap { text-align: right; } .c-paginate_1 { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .c-paginate_1 li { display: inline; } .c-paginate_1 li > a, .c-paginate_1 li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #b80000; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .c-paginate_1 li > a:hover, .c-paginate_1 li > a:focus, .c-paginate_1 li > span:hover, .c-paginate_1 li > span:focus { color: #a80000; background-color: #eee; border-color: #ddd; } .c-paginate_1 li:first-child > a, .c-paginate_1 li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .c-paginate_1 li:last-child > a, .c-paginate_1 li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .c-paginate_1 li.disabled > span, .c-paginate_1 li.disabled > span:hover, .c-paginate_1 li.disabled > span:focus, .c-paginate_1 li.disabled > a, .c-paginate_1 li.disabled > a:hover, .c-paginate_1 li.disabled > a:focus { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } .c-paginate_1 li.active > a, .c-paginate_1 li.active > a:hover, .c-paginate_1 li.active > a:focus, .c-paginate_1 li.active > span, .c-paginate_1 li.active > span:hover, .c-paginate_1 li.active > span:focus { color: #fff; cursor: default; background-color: #b80000; border-color: #b80000; } .pagination2-wrap { text-align: center; line-height: 0; padding-bottom: 0.4rem; } .c-paginate_2 { display: inline-flex; padding-left: 0; margin: 0; border-radius: 0.08rem; border: 1px solid #dbdbdb; } .c-paginate_2 li { display: inline-block; min-width: 0.48rem; border-right: 1px solid #dbdbdb; margin: 0; text-align: center; padding: .16rem .2rem; font-size: 0.30rem; line-height: 1; cursor: pointer; } .c-paginate_2 li:last-child { border-right: 0; } .c-paginate_2 li.selected { background-color: #007AFF; border-color: #007AFF; color: #fff; margin: -1px; } .c-img svg { width: 100%; padding: 20%; box-sizing: border-box; background-color: #f5f5f5; height: 100%; } .c-dropbox { position: relative; } .c-dropbox .box-wrap { visibility: hidden; height: 0; opacity: 0; position: absolute; background: #ffffff; text-align: left; border-radius: 4px; margin-top: 4px; padding: 6px 0; z-index: 1; transition: opacity .2s ease-in-out; box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.15); } .c-dropbox .box-wrap.right { right: 0; } .c-dropbox .box-wrap.left { left: 0; } .c-dropbox .box-wrap.show { visibility: visible; height: auto; opacity: 1; } .c-dropbox .box-wrap li { border-bottom: none; font-size: 14px; padding: 2px 8px; margin: 4px; } .c-dropbox .box-wrap li a { color: #999; text-decoration: none; white-space: pre; } .c-dropbox .box-wrap li:hover { background: #f9f9f9; border-radius: 4px; } .c-pop { font-weight: 600; cursor: pointer; position: relative; } .c-pop:hover .info-pop { visibility: visible; opacity: 1; } .c-pop .info-pop { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); padding: 6px 10px; border-radius: 4px; display: inline-block; color: white; min-width: 100px; font-weight: 500; font-size: 14px; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity .2s ease-in-out; } .c-pop .info-pop::after { content: ''; display: block; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 0px; height: 0px; border: 6px solid #000; border-top-color: rgba(0, 0, 0, 0.5); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .c-notice { width: 400px; border: 1px solid #cbcbcb; margin: 0 auto; text-align: center; } .c-notice .notice-t { padding: 10px 0; font-size: 14px; font-weight: 600; background-color: #dbdbdb; } .c-notice .notice-box { border-top: 1px solid #cbcbcb; padding: 40px 10px 20px 10px; } .c-notice p { font-size: 14px; margin-bottom: 20px; } .c-notice .notice-btn { color: white; background-color: #a4adb3; margin: 0 auto; padding: 4px 10px; border-radius: 4px; cursor: pointer; display: inline-block; transition: opacity .2s ease-in-out; } .c-notice .notice-btn:hover { opacity: .6; } .c-alert { position: absolute; width: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; } .c-alert .alert-mask { position: absolute; width: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .c-alert .alert-wrap { position: fixed; z-index: 2; top: 20%; width: 100%; } .c-alert .alert-box { width: 390px; margin: 0 auto; background-color: #ffffff; padding: 20px; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); } .c-alert .alert-icon { text-align: center; } .c-alert .alert-icon .icon-pro { height: 56px; width: 56px; border: 3px solid #d70000; border-radius: 50px; color: #d70000; font-size: 24px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 6px; } .c-alert .alert-icon .icon-pro.type-success { color: #00b700; border: none; font-size: 56px; } .c-alert .alert-icon > p { font-size: 18px; font-weight: 600; } .c-alert .alert-content { font-size: 16px; padding: 20px 20px; } .c-alert .alert-content em { color: #d0131a; } .c-alert .alert-options { text-align: center; } .c-alert .alert-options [class*="btn-"] { display: inline-block; padding: 10px 10px; border-radius: 4px; min-width: 120px; line-height: 16px; cursor: pointer; transition: all 0.2s ease-in-out; box-sizing: border-box; border: 1px solid transparent; } .c-alert .alert-options .btn-ok { background-color: #d0131a; color: #ffffff; } .c-alert .alert-options .btn-ok:hover { background-color: #ee311a; } .c-alert .alert-options .btn-cancel { color: #000000; margin-left: 10px; border-color: #000000; } .c-alert .alert-options .btn-cancel:hover { background-color: #f5f5f5; } @media screen and (max-width: 768px) { .c-alert .alert-box { width: 240px; } .c-alert .alert-icon .icon-pro { height: 32px; width: 32px; border-width: 2px; } .c-alert .alert-content { padding: 10px; font-size: 14px; } .c-alert .alert-options [class*="btn-"] { padding: 6px; min-width: 90px; } } .alert-fade-enter-active { -webkit-animation-name: alertBounceIn; -moz-animation-name: alertBounceIn; -o-animation-name: alertBounceIn; animation-name: alertBounceIn; -webkit-animation-duration: 0.45s; -moz-animation-duration: 0.45s; -o-animation-duration: 0.45s; animation-duration: 0.45s; } .alert-fade-leave-active { -webkit-animation-name: alertBounceOut; -moz-animation-name: alertBounceOut; -o-animation-name: alertBounceOut; animation-name: alertBounceOut; -webkit-animation-duration: 0.45s; -moz-animation-duration: 0.45s; -o-animation-duration: 0.45s; animation-duration: 0.45s; } @keyframes alertBounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes alertBounceOut { 20% { -webkit-transform: scale3d(1.2, 1.2, 1.2); -moz-transform: scale3d(1.2, 1.2, 1.2); -o-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } 65%, 70% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(0.75, 0.75, 0.75); -moz-transform: scale3d(0.75, 0.75, 0.75); -o-transform: scale3d(0.75, 0.75, 0.75); transform: scale3d(0.75, 0.75, 0.75); } 100% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .c-message { position: fixed; top: 100px; width: 100%; text-align: center; transition: transform .2s ease-in-out; } .c-message i.icon { display: inline-flex; margin-right: 6px; width: 20px; height: 20px; } @media screen and (max-width: 768px) { .c-message i.icon { width: 14px; height: 14px; margin-right: 10px; } .c-message i.icon svg { width: initial; } } .c-message i.icon.error { color: red; } .c-message i.icon.success { color: green; } .c-message p { display: inline-flex; align-items: center; padding: 10px 16px; background: #fff; border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); pointer-events: all; } @media screen and (max-width: 768px) { .c-message p { width: 80%; font-size: 14px; line-height: 1; padding: 10px; text-align: left; } } .popIn { -webkit-animation-name: popIn; animation-name: popIn; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-delay: 0s; } .message-fade-enter-active { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-delay: 0s; -webkit-animation-play-state: running; animation-play-state: running; } .message-fade-leave-active { opacity: 0; transition: opacity 0.3s ease-in-out; } @-webkit-keyframes shake { 10% { transform: translate(0.79057px) rotate(0deg); } 20% { transform: translate(-0.65051px) rotate(0deg); } 30% { transform: translate(-0.84021px) rotate(0deg); } 40% { transform: translate(0.85127px) rotate(0deg); } 50% { transform: translate(-1.5567px) rotate(0deg); } 60% { transform: translate(2.27136px) rotate(0deg); } 70% { transform: translate(-0.48889px) rotate(0deg); } 80% { transform: translate(1.35528px) rotate(0deg); } 90% { transform: translate(0.36309px) rotate(0deg); } to { transform: translate(0) rotate(0deg); } 0% { transform: translate(0) rotate(0deg); } } @keyframes shake { 10% { transform: translate(0.79057px) rotate(0deg); } 20% { transform: translate(-0.65051px) rotate(0deg); } 30% { transform: translate(-0.84021px) rotate(0deg); } 40% { transform: translate(0.85127px) rotate(0deg); } 50% { transform: translate(-1.5567px) rotate(0deg); } 60% { transform: translate(2.27136px) rotate(0deg); } 70% { transform: translate(-0.48889px) rotate(0deg); } 80% { transform: translate(1.35528px) rotate(0deg); } 90% { transform: translate(0.36309px) rotate(0deg); } to { transform: translate(0) rotate(0deg); } 0% { transform: translate(0) rotate(0deg); } } @-webkit-keyframes popIn { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } } @keyframes popIn { 0% { transform: translateY(10px); } 100% { transform: translateY(0); } } .c-checkbox .check { margin-bottom: 4px; } .c-checkbox .check label { display: inline-flex; align-items: center; } .c-checkbox .check label input { margin-right: 12px; transform: scale(1.2); } .pro-compare { display: flex; margin: 50px 0; } @media screen and (max-width: 768px) { .pro-compare { flex-direction: column; margin: 20px 0; } } .comp-selector { width: 300px; } .comp-selector h4 { font-size: 24px; margin-bottom: 20px; } @media screen and (max-width: 768px) { .comp-selector h4 { font-size: 18px; margin-bottom: 10px; line-height: 1.2; } } .comp-selector .selector-item { margin-bottom: 20px; } .comp-selector .selector-item .label { margin-bottom: 6px; } @media screen and (max-width: 768px) { .comp-selector { width: 100%; } .comp-selector .selector-wrap { display: flex; justify-content: space-between; } .comp-selector .selector-item { display: inline-block; width: 49%; width: calc(50% - 10px); } } .prodt-list { flex: 1; margin-left: 30px; max-height: 800px; min-height: 600px; overflow-y: auto; box-shadow: inset 0px -3px 8px -7px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 768px) { .prodt-list { margin-left: 0; max-height: 50vh; min-height: 50vh; } } .prodt-list ul { display: flex; flex-wrap: wrap; } .prodt-list .comp-prodt { width: calc(33.3333% - 13.3333px); padding: 30px; margin-bottom: 20px; margin-left: 20px; box-sizing: border-box; border: 1px solid #dbdbdb; display: inline-block; } .prodt-list .comp-prodt input { transform: scale(1.2); } .prodt-list .comp-prodt .c-img svg { padding: 10% 30%; } @media screen and (min-width: 769px) { .prodt-list .comp-prodt:nth-child(3n+1) { margin-left: 0; } } .prodt-list .comp-prodt .p1 { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .prodt-list .comp-prodt .p2 { font-size: 16px; margin-bottom: 6px; } .prodt-list .comp-prodt .p3 label { margin-left: 10px; } @media screen and (max-width: 768px) { .prodt-list .comp-prodt { width: calc(50% - 10px); padding: 10px; } .prodt-list .comp-prodt:nth-child(2n+1) { margin-left: 0; } .prodt-list .comp-prodt .p1 { font-size: 14px; } .prodt-list .comp-prodt .p2 { font-size: 12px; } } .compare-pop { position: fixed; bottom: 0; visibility: hidden; opacity: 0; width: 100%; background-color: black; color: white; z-index: 999; padding: 20px 0 20px 0; transition: opacity .2s ease-in-out; } @media screen and (max-width: 768px) { .compare-pop { position: inherit; } } .compare-pop.show { visibility: visible; opacity: 1; } .compare-pop h4 { font-size: 24px; color: white; margin-bottom: 20px; } @media screen and (max-width: 768px) { .compare-pop h4 { font-size: 18px; margin-bottom: 10px; line-height: 1.2; } } .compare-pop .pop-wrap { display: flex; } .compare-pop .pop-wrap ul { display: flex; flex: 1; } .compare-pop .pop-wrap .compare-opt { margin-left: 60px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; margin-bottom: 38px; } .compare-pop .selected-prodt { margin-left: 20px; width: 100%; min-width: 120px; max-width: 180px; } .compare-pop .selected-prodt:nth-child(1) { margin-left: 0; } .compare-pop .selected-prodt .card { background-color: white; border-radius: 6px; justify-content: center; text-align: center; position: relative; overflow: hidden; transition: transform .2s ease-in-out; padding: 24px; } .compare-pop .selected-prodt .card:hover { transform: translateY(-2px); } .compare-pop .selected-prodt .card .img-wrap { height: 0; padding: 0; padding-bottom: 56%; width: 100%; position: relative; } .compare-pop .selected-prodt .card .img-wrap img { width: 90%; } .compare-pop .selected-prodt .card .img-wrap .c-img { position: absolute; width: 100%; height: 100%; } .compare-pop .selected-prodt .card .img-wrap .c-img svg { padding: 10% 30%; } .compare-pop .selected-prodt i { position: absolute; right: 6px; top: 6px; color: #858585; font-size: 12px; cursor: pointer; transition: transform .2s ease-in-out; } .compare-pop .selected-prodt i:hover { transform: scale(1.3); } .compare-pop .selected-prodt .p1 { text-align: center; font-size: 14px; margin-top: 20px; } @media screen and (max-width: 768px) { .compare-pop .pop-wrap ul { flex-direction: column; } .compare-pop .pop-wrap .compare-opt { justify-content: start; margin-left: 20px; align-items: stretch; } .compare-pop .pop-wrap .compare-opt .c-btn_2:nth-child(2) { margin-top: 20px; } .compare-pop .selected-prodt { margin-left: 0; margin-bottom: 30px; } .compare-pop .selected-prodt .p1 { margin-top: 10px; } .compare-pop .selected-prodt { min-width: initial; } .compare-pop .selected-prodt .card:hover { transform: translateY(0px); } } .page-compare-detail { margin: 60px 0; } @media screen and (max-width: 768px) { .page-compare-detail { margin: 20px 0; } } .compared-products { display: flex; margin: 0 auto; text-align: center; } .compared-products .compared-prodt { flex: 1; padding: 14px 20px; text-align: left; } .compared-table { width: 100%; border: 1px solid #dbdbdb; margin-bottom: 60px; } .compared-table tr { border-bottom: 1px solid #dbdbdb; } .compared-table tr.th { border-bottom: none; } .compared-table tr:last-child { border-bottom: none; } .compared-table tr td { word-break: break-word; padding: 14px 20px; font-size: 18px; } @media screen and (max-width: 768px) { .compared-table tr td { font-size: 12px; padding: 4px 6px; line-height: 1.2; } } .compared-table tr:nth-child(2n) { background-color: whitesmoke; } .compared-table tr.title { background-color: #dbdbdb; font-weight: 600; } .compared-table.no-border { border: none; } .compared-table.no-border tr { border: none; } @media screen and (max-width: 768px) { .compared-table { margin-bottom: 20px; } } .pic-table { position: sticky; background: white; width: 100%; top: 0; } .pic-table .p1 { font-weight: normal; } .pic-table .product-pic { width: 80%; margin: 0 auto; margin-bottom: 10px; } .pic-table .product-pic .c-img { margin: 0 auto; } .pic-table .product-pic svg { padding: 10% 30%; } @media screen and (max-width: 768px) { .pic-table .product-pic { width: 90%; margin-bottom: 6px; height: 48px; display: flex; align-items: center; } } @media screen and (max-width: 768px) { .pic-table .p1 { font-size: 12px; } } .summit-header { display: flex; justify-content: space-between; align-items: center; } .summit-header .logo-wrap { display: inline-flex; align-items: center; } .summit-header .logo-wrap > img { height: 48px; } .summit-header .logo-wrap h4 { margin-left: 10px; } .summit-header .autel-entry { display: inline-flex; align-items: center; } .summit-header .autel-entry:hover > i { transform: translateX(6px); } .summit-header .autel-entry > i { width: 24px; margin-right: 10px; display: inline-flex; align-items: center; transition: transform .2s ease-in-out; } .summit-header .autel-entry > i svg { width: 100%; height: 100%; } @media screen and (max-width: 768px) { .summit-header .logo-wrap h4 { display: none; } } .summit-video { background: #34c85a; padding: 60px 100px; color: white; position: relative; box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.18); } .summit-video .video-title { text-align: center; margin-bottom: 20px; } .summit-video .video-wrap { width: 100%; } .summit-video .video-wrap iframe { width: 100%; } .summit-video .summit-share-btns { text-align: center; position: absolute; width: 100%; right: 0; left: 0; bottom: 0; transform: translateY(50%); } .summit-video .summit-share-btns .c-btn_3 { padding: 10px 18px; font-size: 18px; border-radius: 4px; } .summit-video .summit-share-btns .btn-2th { margin-left: 100px; } @media screen and (max-width: 768px) { .summit-video { padding: 10px; } .summit-video .video-title { text-align: center; margin-bottom: 10px; font-size: 16px; } .summit-video .video-wrap { width: 100%; } .summit-video .video-wrap iframe { height: 200px; } .summit-video .summit-share-btns { position: relative; transform: none; } .summit-video .summit-share-btns .c-btn_3 { padding: 4px 10px; font-size: 14px; border-radius: 4px; margin-top: 20px; } .summit-video .summit-share-btns .btn-2th { margin-left: 0; } } .summit-process { margin-top: 60px; } .summit-process .process-title { border-left: 5px solid #00d500; font-size: 24px; padding-left: 10px; } .summit-process .process-list { display: flex; flex-wrap: wrap; } .summit-process .process-list > li { width: 31%; border: 1px solid #dbdbdb; box-sizing: border-box; margin-left: 20px; padding: 20px; margin-top: 20px; } .summit-process .process-list > li:nth-child(3n + 1) { margin-left: 0; } .summit-process .process-list > li h3 { color: black; font-size: 18px; } .summit-process .process-list > li .summit-p1 { color: #999; margin: 20px 0; display: flex; align-items: center; } .summit-process .process-list > li .summit-p1 i { display: inline-block; width: 24px; height: 24px; margin-right: 10px; } .summit-process .process-list > li .summit-p1 i svg { width: 100%; height: 100%; } .summit-process .process-list > li .summit-p1 i svg path { fill: #ff9e00; } .summit-process .process-list > li .summit-p2 { color: green; } @media screen and (max-width: 768px) { .summit-process { margin-top: 40px; } .summit-process .process-list > li { width: 100%; margin: 0; margin-top: 20px; padding: 10px; } .summit-process .process-list > li h3 { font-size: 18px; } .summit-process .process-list > li .summit-p1 { margin: 10px 0; } } .summit-shares { margin: 60px 0; text-align: right; margin-right: 20px; } .summit-shares a { display: inline-block; width: 48px; height: 48px; margin-left: 20px; } .summit-shares a svg { width: 100%; height: 100%; } .summit-shares a:hover svg path { fill: #00d500; transition: fill .2s ease-in-out; } @media screen and (max-width: 768px) { .summit-shares { margin: 20px 0; text-align: center; } .summit-shares a { width: 36px; height: 36px; } .summit-shares a:nth-child(1) { margin-left: 0; } } .sn-query { margin: 60px 0; } .sn-query h2 { border-bottom: 2px solid #cd0000; padding-bottom: 20px; font-size: 24px; margin-bottom: 60px; } @media screen and (max-width: 768px) { .sn-query h2 { margin-bottom: 20px; font-size: 18px; line-height: 1.4; } } .sn-query .sn-form { text-align: center; width: 400px; margin: 0 auto; } @media screen and (max-width: 768px) { .sn-query .sn-form { width: 100%; } } .sn-query .sn-form-item { margin-bottom: 20px; text-align: left; } .sn-query .sn-form-item:last-child { margin-bottom: 0; } .sn-query .sn-form-item .label { margin-bottom: 8px; } .sn-query .sn-form-item input { width: 100%; height: 44px; border-radius: 4px; outline: none; outline-style: none; border: 1px solid #939393; padding: 0 10px; box-sizing: border-box; flex: 1; } .sn-query .sn-form-item input:hover { border-color: #cd0000; } .sn-query .sn-form-item .tip-error { margin-top: 4px; color: red; } .sn-query .sn-form-item .inline { display: inline-flex; align-items: center; } .sn-query .sn-form-item .sn-input { flex: 1; } .sn-query .sn-form-item .sn-cha-wrap { display: inline-flex; align-items: center; margin-left: 10px; justify-content: end; height: 44px; } .sn-query .sn-form-item .sn-cha-wrap img { height: 100%; } .sn-query .sn-form-item .sn-cha-wrap .refresh { width: 24px; height: 24px; display: inline-block; margin-left: 8px; cursor: pointer; } .sn-query .sn-form-item .sn-result { width: 100%; height: 44px; border-radius: 4px; border: 1px solid #939393; text-align: center; line-height: 44px; } * { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } html, body { font-size: 50px; line-height: 1.15; } ul, li { list-style: none; } .pagew { padding: 0 .30rem; } .section-tabs { background-color: #eeeeee; } #app .main { height: 100%; min-height: 100vh; } .tab-header { background-color: #fff; } .tab-navs { display: flex; align-items: center; } .tab-navs .tab-item-title { text-align: center; width: 2.4rem; font-size: .30rem; font-size: 15px; line-height: .34rem; padding: .26rem 0; position: relative; color: #333333; min-width: 80px; } .tab-navs .tab-item-title.tab-actived { color: #007AFF; } .tab-navs .tab-item-title.tab-actived::after { content: ''; width: .4rem; height: 2px; background-color: #007AFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .active-bar-link { display: none; } .c-tabs { overflow: hidden; height: 100%; } .tab-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; } .tab-panel::before { display: block; overflow: hidden; content: ""; } .tab-panel-content { height: 0; padding: 0 !important; opacity: 0; flex-shrink: 0; width: 100%; -webkit-transition: opacity 0.45s; transition: opacity 0.45s; } .tab-panel-content.panel-actived { flex-shrink: 0; height: auto; width: 100%; opacity: 1; -webkit-transition: opacity 0.45s; transition: opacity 0.45s; } .section-form { padding-top: .3rem; padding-bottom: .3rem; background-color: #f1f1f1; background-color: #eeeeee; } .form-item { margin-bottom: .30rem; line-height: 0; } .form-item p { font-family: PingFangSC-Regular; font-size: .34rem; color: #000000; letter-spacing: 0; line-height: .42rem; margin-bottom: .12rem; } .form-item p.required::before { content: '*'; color: red; margin-right: .06rem; } .form-item input { font-size: .34rem; width: 100%; height: .88rem; border-radius: .10rem; background: #f5f5f5; border: 1px solid #BBBBBB; box-shadow: inset 0 .04rem .02rem 0 #E2E2E2; text-indent: .30rem; } .form-item input:disabled { background: #E1E1E1; opacity: 1; } .form-btns { line-height: 0; margin-top: 0.4rem; } .btn-1 { background-image: linear-gradient(0deg, #057CFF 0%, #5FACFF 100%); border: 1px solid #1272DD; border-radius: .10rem; border-radius: .10rem; font-family: PingFangSC-Regular; font-size: .34rem; color: #FFFFFF; letter-spacing: 0; text-align: center; line-height: .42rem; padding: .23rem .2rem; width: 100%; } .btn-1:disabled { opacity: .6; background-image: linear-gradient(0deg, #057CFF 0%, #5FACFF 100%); } .select-dropbox { display: none; position: absolute; width: 100%; border-top: none; z-index: 11; box-sizing: border-box; max-height: 200px; overflow-y: auto; line-height: 1; background: #F5F5F5; border: .02rem solid #CCCCCC; box-shadow: 1px 4px 0.1rem 2px rgba(0, 0, 0, 0.15); border-radius: 4px; } .select-dropbox li { font-size: .34rem; height: 1.06rem; line-height: 1.06rem; padding: 0 .30rem; border-bottom: 1px solid #dbdbdb; } .section-result { background-color: #eeeeee; padding-bottom: .2rem; padding-top: .3rem; } .result-title { font-size: .3rem; margin-bottom: 0.2rem; } .result-card { background: #FFFFFF; border-radius: 0.1rem; font-size: .30rem; margin-bottom: 0.2rem; overflow: hidden; } .result-card .result-box { padding: .20rem; } .result-card p { display: flex; justify-content: space-between; line-height: 1.5; margin-top: 8px; } .result-card p:first-child { margin-top: 0; } .result-card p .result-key { flex: 2; } .result-card p .result-value { flex: 3; word-break: break-word; } .result-card p.result-desc { font-family: PingFangSC-Regular; font-size: .24rem; color: #555555; letter-spacing: 0; display: block; margin-top: 0; } .result-card p.result-desc span { margin-right: .10rem; } .result-card p.no { padding: 0 0.2rem; background: rgba(0, 122, 255, 0.2); font-family: PingFangSC-Medium; font-size: .3rem; color: #007AFF; letter-spacing: 0; height: 0.56rem; line-height: .56rem; } .no-data-box { text-align: center; margin-top: 0.7rem; } .no-data-box > svg { height: 1.36rem; width: 1.36rem; margin-bottom: 0.3rem; } .no-data-box .no-order { font-family: PingFangSC-Regular; font-size: .3rem; color: #888888; letter-spacing: 0; text-align: center; line-height: .42rem; } .pro-coverage { margin-bottom: 100px; } .pro-coverage .line1 { height: 1px; width: 100%; background-color: #dbdbdb; margin: 60px 0; } .pro-coverage ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px; height: 0; } .pro-coverage ::-webkit-scrollbar-thumb { border-radius: 4px; border: 1px solid #dbdbdb; background-color: rgba(0, 0, 0, 0.3); } .pro-coverage ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.8); } .pro-coverage ::-webkit-scrollbar-thumb:window-inactive { background-color: rgba(0, 0, 0, 0.2); } .pro-coverage th a { cursor: pointer; padding-bottom: 2px; display: inline-block; border-bottom: 1px solid #000; font-weight: 600; } .pro-coverage i.symbol { font-style: initial; font-size: 24px; font-family: Meiryo, Osaka,"MS PGothic", sans-serif; font-style: normal; } .pro-coverage i.symbol.sqr0 { font-size: 32px; } .pro-coverage input::placeholder { color: #888888; } .pro-coverage .cvg-empty-data { text-align: center; height: 44px; border-bottom: 1px solid #dbdbdb; line-height: 44px; padding: 0; } .coverage-selectors > ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .coverage-selectors > ul > li { width: 48.5%; margin: 15px 0; } .coverage-selectors > ul > li .label { margin-bottom: 10px; font-size: 16px; } .coverage-selectors > ul > li .label.required:after { content: '*'; color: red; margin-left: 4px; } .coverage-results table { width: 100%; } .coverage-results table th, .coverage-results table td { text-align: center; font-size: 16px; } .coverage-results table th { background-color: #f8f8f8; padding: 14px 0; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } .coverage-results table th:first-child { border-left: 1px solid #dbdbdb; } .coverage-results table th:last-child { border-right: 1px solid #dbdbdb; } .coverage-results table td { padding: 20px 0; } .coverage-results table tbody tr { border-bottom: 1px solid #dbdbdb; } .coverage-btns { text-align: right; margin-top: 15px; } .coverage-btn-search.primary { border-color: #b00000; background-color: #b00000; padding: 14px 56px; border-radius: 4px; } .coverage-btn-search.primary:disabled { opacity: .4; } .c-input-2 { overflow: hidden; border: 1px solid #c7c7c7; border-radius: 4px; padding-left: 20px; } .c-input-2:hover { border-color: #b00000; } .c-input-2 input { height: 44px; border: none; outline: none; width: 100%; } .wheel-wrap { overflow-x: auto; } .cvg-table { width: 100%; } .cvg-table tbody { display: block; height: 450px; overflow-y: scroll; } .cvg-table thead, .cvg-table tbody tr { display: table; width: 100%; table-layout: fixed; } .cvg-table thead { width: calc(100% - 10px); } .tag1 { display: inline-block; width: 16px; height: 16px; border-radius: 16px; background-color: #00b400; } .tag2 { display: inline-block; width: 16px; height: 16px; border-radius: 16px; background-color: white; border: 1px solid #000; box-sizing: border-box; } .tagNull { display: inline-block; width: 16px; height: 2px; background-color: #000; } .legend-box { margin-bottom: 10px; } .legend-box p { margin-bottom: 10px; } .legend-list { display: inline-flex; align-items: center; } .legend-list li { display: inline-flex; align-items: center; margin-left: 20px; } .legend-list li:first-child { margin-left: 0; } .legend-list li span { margin-left: 8px; } @media screen and (max-width: 768px) { .cvg-table { font-size: 10px; } } .cvg-table_1 tbody { display: block; height: 450px; overflow-y: scroll; } .cvg-table_1 thead, .cvg-table_1 tbody tr { display: table; width: 100%; table-layout: fixed; } .cvg-table_1 thead { width: calc(100% - 10px); } #app.page-cvg { background-color: initial; min-height: 50vh; } #app.page-cvg .main { height: initial; min-height: initial; } /* 选择器样式修复 start */ .c-select.select-cvg .select-box, .c-select.select-cvg .select-box2 { border-radius: 4px; overflow: hidden; } .c-select.select-cvg .select-box input, .c-select.select-cvg .select-box2 input { height: 44px; cursor: auto; } .c-select.select-cvg .select-items { margin-top: 4px; max-height: 400px; } .c-select.select-cvg .select-items .select-item { padding-top: 10px; padding-bottom: 10px; } /* 选择器样式修复 end */ .tpms-query .tpms-tags { display: inline-block; } .tpms-query .tag { display: inline-block; line-height: 32px; height: 32px; text-align: center; border-radius: 16px; cursor: pointer; width: 130px; } .tpms-query .tag.active { background-color: #B00000; color: white; } .tpms-query .result-desc { font-size: 12px; top: -48px; } .tpms-query .vehicleBody td .p1 { max-width: 160px; word-break: break-word; line-height: 1.5; } .tpms-query .pagination2-wrap { padding-bottom: 0; padding-top: 40px; } .tpms-query .c-paginate_tpms li { padding: 10px; font-size: 14px; } .tpms-query .c-paginate_tpms li.selected { background-color: #B00000; border-color: #B00000; } .tpms-query .coverage-results_2 { overflow: visible; } .tpms-query .vehicleBody td { max-width: 90px; } .c-paginate_2a { text-align: center; } .c-paginate_2a button { margin: 0 5px; background-color: #f4f4f5; color: #606266; outline: none; border-radius: 2px; padding: 0 4px; vertical-align: top; display: inline-block; font-size: 13px; min-width: 35.5px; height: 28px; line-height: 28px; cursor: pointer; box-sizing: border-box; text-align: center; border: 0; } .c-paginate_2a button[disabled] { color: #c0c4cc; cursor: not-allowed; } .c-paginate_2a button.active { cursor: not-allowed; background-color: #B00000; color: #fff; }