/* mf_cloud */ [v-cloak] { display: none; } .el-main { background: #F7F8FA; font-family: 'PingFang SC'; } .template > .tit { font-size: 28px; color: rgba(0, 0, 0, 0.9); font-weight: normal; line-height: 1; margin-bottom: 23px; max-width: 1500px; margin: 0 auto 23px; } .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner, .el-input.is-active .el-input__inner, .el-input__inner:focus { border-color: #0058FF; } .el-input-number__decrease:hover, .el-input-number__increase:hover { color: #0058FF; } .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { border-color: #0058FF; } .el-loading-spinner .path { stroke: #0058FF !important; } .el-slider__button-wrapper { width: 25px; height: 32px; background: url(/themes/clientarea/default/v10/img/slider.svg) no-repeat; background-size: 100%; z-index: 3; } .el-slider__button-wrapper .el-slider__button { opacity: 0; } .el-tooltip__popper .popper__arrow { left: 50% !important; } .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { box-shadow: none; } .el-slider__bar { background-color: #0058FF; } .el-slider__marks-text { white-space: nowrap; } .marks { width: 660px; position: relative; height: 15px; margin-top: -24px; display: flex; justify-content: space-between; } .marks .item { line-height: 1; font-size: 13px; color: rgba(0, 0, 0, 0.4); white-space: nowrap; } .el-checkbox .el-checkbox__label { vertical-align: middle; } .empty-item { margin-top: 0; } .empty-item .el-form-item__content { line-height: 1; } .mf-cloud { display: flow-root; height: auto; background: #fff; padding: 0; } .template { padding: 80px var(--sidebar_width) 120px; } .mf-cloud .el-tabs .el-tabs__item { font-size: 18px; height: auto; line-height: 1; color: rgba(0, 0, 0, 0.9); padding: 0 36px 12px 36px !important; } .mf-cloud .el-tabs .el-tabs__item.is-active { color: #0058FF; } .mf-cloud .el-tabs .el-tabs__item.is-active::after { width: 100%; left: 0; transform: translateX(0); } .mf-cloud .el-tabs .el-tabs__item::after { content: ''; position: absolute; width: 0; height: 2px; background: #0058FF; left: 0; bottom: 0; left: 50%; transform: translateX(-50%); animation: all 0.3s; } .mf-cloud .el-tabs__header { margin-bottom: 40px; } .mf-cloud .el-tabs__nav-wrap::after { background-color: #E6EAED; } .mf-cloud .el-tabs__active-bar { display: none; background: #0058FF; } .mf-cloud .fast-form { padding-bottom: 50px; } .mf-cloud .com-tit { position: relative; color: #0058FF; padding-left: 10px; font-size: 18px; color: rgba(0, 0, 0, 0.9); margin-bottom: 30px; } .mf-cloud .com-tit::before { content: ''; position: absolute; width: 2px; height: 16px; background: #0058FF; left: 0; top: 50%; transform: translateY(-50%); } .mf-cloud .con { padding: 0 30px; } .mf-cloud .el-form .el-tabs .el-tabs__item { font-size: 14px; } .mf-cloud .el-form .el-tabs .el-tabs__item::after { height: 1px; bottom: -1px; } .mf-cloud .el-form .el-form-item { padding-left: 28px; } .mf-cloud .el-form .el-tabs__nav-wrap::after { height: 1px; } .mf-cloud .el-form .el-radio-button__inner, .mf-cloud .el-form .flow-bw { padding: 0 10px; min-width: 144px; height: 40px; line-height: 40px; background: #F7F8FA; color: rgba(0, 0, 0, 0.9); border-color: #E6EAED; box-sizing: border-box; } .mf-cloud .el-form .flow-bw { background: rgba(0, 88, 255, 0.08); border: 1px solid #0058FF; color: #0058FF; display: inline-block; text-align: center; border-radius: 3px; cursor: pointer; } .mf-cloud .el-form .el-radio-button.is-active .el-radio-button__inner { background: rgba(0, 88, 255, 0.08); border-color: #0058FF; color: #0058FF; box-shadow: -1px 0 0 0 #0058FF; } .mf-cloud .s-tip { font-size: 13px; color: rgba(0, 0, 0, 0.4); line-height: 1; margin-top: 10px; } .mf-cloud .s-tip span { color: rgba(0, 0, 0, 0.6); } .mf-cloud .image .icon { width: 40px; height: 40px; -webkit-filter: grayscale(1); opacity: 0.4; } .mf-cloud .top-tab > .el-tabs__header + .el-tabs__content { padding-bottom: 50px; } .mf-cloud .image-ul { display: flex; flex-wrap: wrap; max-width: 1050px; position: relative; height: auto; overflow: visible; } .mf-cloud .image-ul.hide { height: 100px; overflow: hidden; } .mf-cloud .image-box { max-width: 1100px; position: relative; display: flex; flex-wrap: wrap; } .mf-cloud .empty-image { width: 190px; height: 84px; border: 1px solid #E6EAED; border-radius: 3px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .mf-cloud .empty-image i { border: 1px solid rgba(0, 0, 0, 0.4); font-size: 12px; border-radius: 50%; padding: 1px; color: rgba(0, 0, 0, 0.4); } .mf-cloud .empty-image.isHide i { transform: rotate(180deg); } .mf-cloud .image-item { width: 190px; height: 84px; background: #F7F8FA; border: 1px solid #E6EAED; border-radius: 3px; position: relative; padding: 16px; box-sizing: border-box; margin-right: 10px; display: flex; align-items: center; margin-bottom: 10px; cursor: pointer; } .mf-cloud .image-item:hover { border-color: #0058FF; } .mf-cloud .image-item.active, .mf-cloud .image-item.hover { border: 1px solid #0058FF; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .mf-cloud .image-item.active .icon, .mf-cloud .image-item.hover .icon { -webkit-filter: grayscale(0); opacity: 1; } .mf-cloud .image-item .el-select { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .mf-cloud .image-item .el-input { position: absolute; width: 100%; height: 35px; top: 42px; right: 0; margin-top: 0 !important; } .mf-cloud .image-item .el-input .el-input__inner { border: none; background: transparent; padding: 0 20px 0 60px; } .mf-cloud .image-item .r-info { margin-left: 8px; } .mf-cloud .image-item p { line-height: 1; } .mf-cloud .image-item .name { font-size: 16px; color: rgba(0, 0, 0, 0.9); } .mf-cloud .image-item .version { font-size: 12px; color: rgba(0, 0, 0, 0.4); margin-top: 6px; } p.version { padding: 0 !important; } .mf-cloud .image-item .version-select { position: absolute; z-index: 10; width: 101%; left: 0; left: -1px; top: 100%; background: #fff; border: 1px solid #0058FF; max-height: 200px; overflow-y: auto; border-top: 1px solid #E6EAED; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .mf-cloud .image-item .version-select .v-item { padding: 13px; line-height: 1; } .mf-cloud .image-item .version-select .v-item:hover, .mf-cloud .image-item .version-select .v-item.active { background: rgba(0, 88, 255, 0.08); color: #0058FF; } .mf-cloud .image-item .version-select .v-item span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; } .mf-cloud .empty { color: rgba(0, 0, 0, 0.4); } .mf-cloud .cloud-box { display: flex; flex-wrap: wrap; margin-left: -10px; } .mf-cloud .cloud-box .cloud-item { width: 280px; border-radius: 3px; margin-left: 10px; border: 1px solid #E6EAED; cursor: pointer; padding-bottom: 30px; position: relative; } .mf-cloud .cloud-box .cloud-item.active { border-color: #0058FF; } .mf-cloud .cloud-box .cloud-item.active .top { background: rgba(0, 88, 255, 0.08); color: #0058FF; } .mf-cloud .cloud-box .cloud-item.active .top .des { color: #0058FF; } .mf-cloud .cloud-box .cloud-item .top { line-height: 46px; padding: 0 26px; background: #F7F8FA; font-size: 14px; color: rgba(0, 0, 0, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mf-cloud .cloud-box .cloud-item .top .des { font-size: 13px; color: rgba(0, 0, 0, 0.4); } .mf-cloud .cloud-box .cloud-item .no-up { position: absolute; bottom: 0; right: 25px; z-index: 3; } .mf-cloud .cloud-box .cloud-item .no-up img { width: 16px; } .mf-cloud .cloud-box .info { padding: 10px 26px; } .mf-cloud .cloud-box .info p { line-height: 24px; color: rgba(0, 0, 0, 0.9); display: flex; } .mf-cloud .cloud-box .info p span:last-child { text-overflow: ellipsis; overflow: hidden; text-wrap: nowrap; } .mf-cloud .cloud-box .info .name { color: rgba(0, 0, 0, 0.6); width: 90px; display: inline-block; white-space: nowrap; margin-right: 5px; } .mf-cloud .el-slider { width: 810px; } .mf-cloud .el-slider__runway { width: 660px; margin-right: 30px; } .mf-cloud .move .el-form-item__content { margin-left: 0 !important; display: flex; } .mf-cloud .move .el-form-item__content .unit { margin-left: 10px; } .mf-cloud .el-table { border: 1px solid #E6EAED; max-width: 990px; } .mf-cloud .el-table th.el-table__cell { background: #F7F8FA; } .mf-cloud .el-table .el-select { width: 200px; } .mf-cloud .el-table .el-select .el-input__inner { height: 34px; line-height: 34px; } .mf-cloud .el-table .el-select .el-input__icon { line-height: 34px; } .mf-cloud .store { max-width: 990px; text-align: center; line-height: 1; margin-top: 20px; font-size: 14px; color: rgba(0, 0, 0, 0.4); } .mf-cloud .store span { color: #0058FF; } .mf-cloud .store .add-disk { cursor: pointer; } .mf-cloud .store .num { margin: 0 5px; } .mf-cloud .del-data { color: #E34D59; cursor: pointer; } .mf-cloud .optional .el-form-item__content .el-input { width: 360px; } .mf-cloud .login-box { width: 100%; max-width: 990px; background: #F1F2F5; border: 1px solid #E6EAED; border-radius: 3px; padding: 20px 24px 30px; box-sizing: border-box; margin-top: 20px; } .mf-cloud .login-box .el-form-item { margin-top: 10px; } .mf-cloud .login-box .el-input, .mf-cloud .login-box .el-select { width: 450px; } .mf-cloud .login-box .is-disabled .el-input__inner { background: #E8E7E5; } .mf-cloud .login-box .jump-box { display: flex; align-items: center; } .mf-cloud .login-box .add-ssh { color: #0058FF; cursor: pointer; text-decoration: none; display: flex; align-items: center; } .mf-cloud .login-box .add-ssh .icon { margin-left: 2px; } .mf-cloud .el-icon-refresh { font-size: 16px; cursor: pointer; color: rgba(0, 0, 0, 0.4); } .mf-cloud .group-box { width: 100%; max-width: 990px; background: #F1F2F5; border: 1px solid #E6EAED; border-radius: 3px; padding: 20px 24px 20px; box-sizing: border-box; margin-top: 20px; } .mf-cloud .group-box .el-input, .mf-cloud .group-box .el-select { width: 450px; } .mf-cloud .group-box .top { display: flex; line-height: 1; justify-content: space-between; font-size: 13px; color: rgba(0, 0, 0, 0.4); } .mf-cloud .group-box .top .tit { margin-bottom: 0; font-size: 14px; color: rgba(0, 0, 0, 0.9); } .mf-cloud .create-group { position: relative; } .mf-cloud .create-group .select { overflow: hidden; margin-top: 8px; } .mf-cloud .create-group .el-checkbox { width: 33.3333333%; display: flex; align-items: center; line-height: 1; float: left; margin-right: 0; color: rgba(0, 0, 0, 0.6); font-size: 13px; margin-top: 16px; overflow: hidden; padding-right: 5px; box-sizing: border-box; text-overflow: ellipsis; } .mf-cloud .vpc { margin-top: 10px; display: flex; } .mf-cloud .vpc .custom { margin-left: 10px; } .mf-cloud .vpc .custom .el-select, .mf-cloud .vpc .custom .el-input-number { width: 75px; } .mf-cloud .w-select { width: 320px; } .mf-cloud .renew .el-form-item__content { display: flex; font-size: 14px; color: rgba(0, 0, 0, 0.9); } .mf-cloud .renew .el-form-item__content .el-checkbox { margin-right: 8px; } .el-checkbox__inner:hover { border-color: #0058FF; } p { margin: 0; } .el-tooltip__popper.is-light { box-shadow: 0rem 5px 1px rgba(0, 0, 0, 0.1); border-color: #fff; font-size: 13px; color: rgba(0, 0, 0, 0.9); } .el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { border-top-color: #fff; } .image-pup { width: auto; } /* f-order */ .f-order { width: 100%; height: 120px; left: 0; bottom: 0; position: fixed; background: transparent; display: flex; font-size: 14px; color: rgba(0, 0, 0, 0.9); z-index: 4; } .f-order .l-empty { height: 120px; width: 240px; } .f-order .el-main { background: #fff; padding-top: 0; padding-bottom: 0; box-shadow: 0rem -3px 12px rgba(0, 0, 0, 0.08); height: 100%; padding: 0 85px; } .f-order .main-card { display: flex; align-items: center; justify-content: space-between; height: 100%; } .f-order .main-card .left { display: flex; align-items: center; } .f-order .time { margin-right: 60px; } .f-order .duration-select { width: 160px; } .f-order .el-input-number { width: 150px; } .f-order .l-txt { margin-right: 14px; } .f-order .el-input.is-focus .el-input__inner { border-color: #0058FF; } .f-order .el-select .el-input__inner:focus { border-color: #0058FF; } .f-order .num { line-height: 34px; } .f-order .num .el-input__inner:focus { border-color: #0058FF; } .f-order .num .is-disabled { background: #E8E7E5; } .f-order .link { border-bottom: 1px solid rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9); cursor: pointer; } .f-order .mid { display: flex; } .f-order .line-empty { width: 1px; height: 24px; border-left: 1px dashed #D6D6D6; margin: 0 50px; } .f-order .bot-price { font-size: 14px; line-height: 1; margin-left: 10px; } .f-order .bot-price .new { color: #F0142F; } .f-order .bot-price .new span { font-size: 24px; font-weight: bold; margin-left: 2px; font-family: 'PingFang SC'; } .f-order .bot-price .total-icon { font-size: 14px; color: #999; } .f-order .bot-price .old { margin-top: 10px; display: flex; align-items: center; } .f-order .bot-price .old .show { text-decoration: line-through; color: #999; margin-right: 10px; } .f-order .bot-price .old > span { display: flex; margin-left: 2px; } .f-order .bot-price .use { line-height: 20px; border-radius: 3px; padding: 0 4px; border: 1px solid #E6EAED; font-size: 12px; color: rgba(0, 0, 0, 0.9); cursor: pointer; } .f-order .bot-price .used { background: #E6EAED; border-radius: 3px; display: flex; align-items: center; padding: 3px 5px 3px 1px; } .f-order .bot-price .used span { background: #fff; line-height: 1; font-size: 12px; color: rgba(0, 0, 0, 0.9); padding: 2px 10px 2px 1px; } .f-order .bot-price .used i { background: #fff; border-radius: 50%; font-size: 16px; cursor: pointer; margin-left: 5px; } .f-order .right { display: flex; align-items: center; } .f-order .right .add-cart { width: 60px; height: 45px; border-radius: 3px; border: 1px solid #0058FF; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; } .f-order .right .buy { width: 160px; line-height: 46px; background: #0058FF; color: rgba(255, 255, 255, 0.9); font-size: 16px; text-align: center; cursor: pointer; margin-left: 10px; } .dis-input .el-input__inner { width: 200px; height: 34px; line-height: 34px; } .cart-pup { width: 90px; min-width: auto; padding: 0; text-align: center; line-height: 42px; z-index: 30000 !important; } .el-select .el-input__inner:focus { border-color: #0058FF; } .duration-pup { z-index: 30000 !important; } .duration-pup .txt { min-width: 30%; display: inline-block; } .duration-pup .tip { font-size: 13px; color: #0058FF; margin-left: 20px; } .popper__arrow { display: none; } .el-select-dropdown__item { color: rgba(0, 0, 0, 0.9); border-radius: 3px; font-size: 14px; } .el-select-dropdown__item.selected { color: #0058FF; background: rgba(0, 88, 255, 0.08); font-weight: normal; } .el-select-dropdown__list { padding: 5px; } .pHide .el-tabs__header { display: none; } .com-dis .el-radio-button__inner { cursor: not-allowed; color: #c0c4cc !important; } .com-dis .el-radio-button__orig-radio:checked + .el-radio-button__inner { -webkit-box-shadow: -1px 0 0 0 #E6EAED !important; box-shadow: -1px 0 0 0 #E6EAED !important; } /* 购物车弹窗 */ .cartDialog { width: 490px; background: #fff; } .cartDialog .tit { font-size: 28px; color: #171725; } .cartDialog .el-dialog__body { text-align: center; line-height: 1; } .cartDialog .dialog-footer { padding-bottom: 60px; justify-content: center; } .cartDialog .dialog-footer .el-button { width: 144px; height: 46px; border-radius: 4px; text-align: center; margin: 0 5px; } .cartDialog .dialog-footer .el-button span { padding: 0; font-size: 16px; } .cartDialog .dialog-footer .el-button:first-child { background: #0058FF; border: 1px solid #0058FF; color: #fff; } .cartDialog .dialog-footer .el-button:last-child { border: 1px solid #0058FF; color: #0058FF; } .discount-pop { white-space: nowrap; } .error-tip { color: #e6a23c; line-height: 26px; } .level-pup { position: relative; z-index: 30000 !important; text-align: center; padding: 10px; } /* discount-pup */ .discount-pup { padding: 0; width: 422px; height: 174px; position: relative; z-index: 30000 !important; } .discount-pup .discount { padding: 0 30px; } .discount-pup .close { width: 24px; height: 24px; position: absolute; top: 10px; right: 12px; cursor: pointer; } .discount-pup .code { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; } .discount-pup .code .el-input__inner { height: 46px; } .discount-pup .code .el-input__inner:focus { border-color: #0058FF; } .discount-pup .code .sure { width: 112px; height: 46px; background: #0058FF; border-radius: 3px; border: none; color: rgba(255, 255, 255, 0.9); font-size: 16px; cursor: pointer; margin-left: 10px; } .store-item .el-input-number { width: 200px; } .cur-content { width: 520px; box-sizing: border-box; padding: 0 24px; z-index: 30000 !important; } .cur-content .tit { padding: 20px 0 16px; border-bottom: 1px solid #E6EAED; } .cur-content .con { display: flex; flex-wrap: wrap; padding: 5px 0 10px; } .cur-content .c-item { width: 50%; line-height: 28px; font-size: 13px; color: rgba(0, 0, 0, 0.9); } .cur-content .c-item .l-txt { color: rgba(0, 0, 0, 0.6); } /* free-content */ .free-content { width: 330px; box-sizing: border-box; padding: 0 24px; z-index: 30000 !important; } .free-content .tit { padding: 20px 0 16px; border-bottom: 1px solid #E6EAED; } .free-content .c-item { display: flex; line-height: 28px; justify-content: space-between; font-size: 13px; color: rgba(0, 0, 0, 0.9); } .free-content .con { padding: 10px 0; border-bottom: 1px solid #E6EAED; } .free-content .bot { padding: 10px 0 15px; } .el-checkbox__input.is-checked + .el-checkbox__label { color: #0058FF; overflow: hidden; text-overflow: ellipsis; } .safe-tip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .el-checkbox__input.is-focus .el-checkbox__inner { border-color: #0058FF; } .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: #0058FF; border-color: #0058FF; } /* test-pup */ .test-pup { width: 300px; } .test-pup .t-item { display: flex; align-items: center; color: rgba(0, 0, 0, 0.9); font-size: 13px; } .test-pup .t-item .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); margin-right: 8px; } .test-pup .t-item i { color: #00A870; font-size: 12px; font-weight: bold; margin-right: 2px; } .custom-config .el-input, .custom-config .el-textarea, .custom-config .el-select { width: 360px; } @media screen and (max-width: 1600px) { .mf-cloud .cloud-box .info .name { width: 90px; } } @media screen and (max-width: 1400px) { .mf-cloud .cloud-box .info .name { width: 100px; } }