/* 麦块云会员中心 · 云实例：实例列表（product.htm）与实例详情（productdetail.htm，mf_cloud 模块）；header.php 加载 模块 css 随注入的 HTML 后加载、选择器多达 9 层，这里一律挂在模板根 id（#cloudList / #product_detail_cloud）上压住 */ /* ========== 实例列表 ========== */ #cloudList { font-size: 14px; color: var(--mk-text); } #cloudList .main-card-title .title-text { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } #cloudList .main-card-table { margin-top: 12px; } #cloudList .product-tab-list .el-tabs__header { margin-bottom: 0; } /* 工具栏：批量续费 / 流量预警 + 筛选 */ #cloudList .main-card-search { flex-wrap: wrap; gap: 12px; padding: 16px 0; } #cloudList .main-card-search .batch-op-btn { display: flex; align-items: center; margin: 0; } #cloudList .main-card-search .batch-op-btn .el-button { height: 36px; padding: 0 14px; font-size: 14px; } #cloudList .main-card-search .batch-op-btn .el-dropdown .el-button-group .el-button--primary:first-child { padding: 0 16px; } #cloudList .main-card-search .traffic-warning { display: flex; align-items: center; gap: 8px; margin-right: auto; } #cloudList .main-card-search .traffic-warning .search-btn { height: 36px; padding: 0 14px; border: 1px solid var(--mk-line-2); border-radius: 10px; background: #fff; color: var(--mk-text); font-size: 14px; font-weight: 600; transition: background-color .2s, border-color .2s; } #cloudList .main-card-search .traffic-warning .search-btn:hover { background: var(--mk-soft); border-color: rgba(15, 23, 42, .26); } #cloudList .main-card-search .traffic-warning .tip { font-size: 12.5px; color: var(--mk-text-3); } #cloudList .main-card-search .right-search { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } #cloudList .main-card-search .right-search .el-select, #cloudList .main-card-search .right-search .el-input { width: 190px; } #cloudList .main-card-search .right-search .el-input__inner { height: 36px; line-height: 36px; font-size: 14px; } #cloudList .main-card-search .right-search .el-input__icon { line-height: 36px; } #cloudList .main-card-search .right-search .search-btn { min-width: 0; height: 36px; padding: 0 18px; border-radius: 10px; background: var(--mk-btn); font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(26, 86, 219, .6); } #cloudList .main-card-search .right-search .search-btn:hover { background: var(--mk-btn-hover); } /* 表格：去掉竖线，名称两行，状态胶囊 + 电源图标 */ #cloudList .list-table-border.el-table--border { border: 1px solid var(--mk-line); border-radius: 12px; overflow: hidden; } #cloudList .list-table-border.el-table--border::after, #cloudList .list-table-border.el-table--border::before { display: none; } #cloudList .list-table-border.el-table--border .el-table__cell { border-right: 0; } /* common.css 给所有 td/th 加了 20px !important 左内边距，窄列被挤成省略号 */ #cloudList .el-table td.el-table__cell { padding: 12px 0 !important; } #cloudList .el-table th.el-table__cell { padding: 10px 0 !important; } #cloudList .el-table .cell { padding: 0 12px; line-height: 1.5; } #cloudList .el-table .el-table-column--selection .cell { padding: 0 8px 0 16px; text-overflow: clip; } #cloudList .column-id { color: var(--mk-text-3); font-variant-numeric: tabular-nums; } #cloudList .column-id:hover { border-bottom: 0; color: var(--mk-accent); } #cloudList .cloud-name { margin: 0; cursor: pointer; } #cloudList .cloud-name .packge-name { font-weight: 600; color: var(--mk-text); } #cloudList .cloud-name:hover .packge-name { color: var(--mk-accent); } #cloudList .cloud-name .name { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--mk-text-3); } #cloudList .cloud-name .name .area-img { height: 11px; margin-left: 4px; border-radius: 2px; } #cloudList .list-show-ip .com-ip-box > span { font-variant-numeric: tabular-nums; } #cloudList .el-icon-document-copy { color: var(--mk-text-3); cursor: pointer; transition: color .2s; } #cloudList .el-icon-document-copy:hover { color: var(--mk-accent); } #cloudList .mk-status-cell { display: flex; align-items: center; gap: 10px; } #cloudList .status { width: auto; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } #cloudList .mk-power { width: 18px; height: 18px; } #cloudList .os-img { width: 24px; } #cloudList .main-card-table .page { padding: 4px 0 0; } /* 手机：卡片代替表格 */ #cloudList .mk-cloud-cards { display: none; } @media screen and (max-width: 750px) { #cloudList .main-card-title .title-text { font-size: 19px; } #cloudList .main-card-table { margin-top: 4px; } #cloudList .main-card-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 0 14px; } #cloudList .main-card-search .batch-op-btn, #cloudList .main-card-search .traffic-warning { width: 100%; } #cloudList .main-card-search .batch-op-btn .el-button { height: 40px; font-size: 14px; } #cloudList .main-card-search .traffic-warning .search-btn { height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; } #cloudList .main-card-search .traffic-warning { flex-wrap: wrap; } /* 批量续费 + 流量预警并排一行 */ #cloudList .main-card-search { grid-template-columns: auto auto; justify-content: start; } #cloudList .main-card-search .batch-op-btn, #cloudList .main-card-search .traffic-warning { width: auto; } #cloudList .main-card-search .right-search { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #cloudList .main-card-search .right-search .el-select, #cloudList .main-card-search .right-search .el-input { width: auto; } #cloudList .main-card-search .right-search .el-select:only-of-type { grid-column: 1 / -1; } #cloudList .main-card-search .right-search .el-input { grid-column: 1 / 2; } #cloudList .main-card-search .right-search > .el-input:nth-last-child(2) { grid-column: 1 / 2; } #cloudList .main-card-search .right-search .el-input__inner { height: 40px; line-height: 40px; font-size: 15px; } #cloudList .main-card-search .right-search .el-input__icon { line-height: 40px; } #cloudList .main-card-search .right-search .search-btn { height: 40px; font-size: 15px; } #cloudList .mk-cloud-table { display: none; } #cloudList .mk-cloud-cards { display: flex; flex-direction: column; gap: 10px; min-height: 120px; } #cloudList .mk-cc { padding: 14px 14px 12px; border: 1px solid var(--mk-line); border-radius: 14px; background: #fff; } #cloudList .mk-cc:active { background: var(--mk-soft); } #cloudList .mk-cc-head { display: flex; align-items: flex-start; gap: 10px; } #cloudList .mk-cc-head .el-checkbox { margin-top: 2px; } #cloudList .mk-cc-title { flex: 1; min-width: 0; } #cloudList .mk-cc-title b { display: block; overflow: hidden; font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; color: var(--mk-text); } #cloudList .mk-cc-title span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mk-text-3); } #cloudList .mk-cc-status { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 20px; } #cloudList .mk-cc-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 12px 0 0; padding: 10px 0 0 28px; border-top: 1px solid var(--mk-line); } #cloudList .mk-cc-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.6; } #cloudList .mk-cc-meta dt { flex: none; color: var(--mk-text-3); } #cloudList .mk-cc-meta dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; color: var(--mk-text-2); } #cloudList .mk-cc-meta dd .el-icon-document-copy { padding: 4px; margin: -4px -4px -4px 0; font-size: 15px; } #cloudList .mk-cc-power { width: 16px; height: 16px; } } /* ========== 实例详情 ========== */ #product_detail_cloud { color: var(--mk-text); } #product_detail_cloud .main-card { font-size: 14px; color: var(--mk-text); } /* 顶部：返回 + 名称 + 状态 + 地域；下一行主机名 / IP；右侧电源与负载面板 */ #product_detail_cloud .card-top .top-operation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--mk-line); } #product_detail_cloud .card-top .top-operation .operation-row1 { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } #product_detail_cloud .card-top .top-operation .operation-row1 .back-img { flex: none; width: 18px; height: 18px; margin: 0 4px 0 0; padding: 7px; box-sizing: content-box; border: 1px solid var(--mk-line-2); border-radius: 10px; color: var(--mk-text-2); fill: currentColor; transition: background-color .2s, border-color .2s; } #product_detail_cloud .card-top .top-operation .operation-row1 .back-img:hover { background: var(--mk-soft); border-color: rgba(15, 23, 42, .26); } #product_detail_cloud .card-top .top-operation .operation-row1 .top-product-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--mk-text); } #product_detail_cloud .card-top .top-operation .operation-row1 .host-status { width: auto; height: 24px; margin: 0; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } #product_detail_cloud .card-top .top-operation .operation-row1 .top-area { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--mk-line); border-radius: 999px; background: var(--mk-soft); } #product_detail_cloud .card-top .top-operation .operation-row1 .top-area .country-img { width: 16px; height: 11px; margin: 0; border-radius: 2px; } #product_detail_cloud .card-top .top-operation .operation-row1 .top-area .country, #product_detail_cloud .card-top .top-operation .operation-row1 .top-area .city { font-size: 12.5px; color: var(--mk-text-2); } #product_detail_cloud .card-top .top-operation .operation-row2 { display: contents; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding-left: 46px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .name, #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .ip, #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .vpc-ip { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 14px; border: 0; border-left: 1px solid var(--mk-line-2); font-size: 13.5px; line-height: 18px; color: var(--mk-text-2); } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left > :first-child { padding-left: 0; border-left: 0; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .ip { color: var(--mk-text); font-weight: 600; } #product_detail_cloud .el-icon-document-copy { color: var(--mk-text-3); cursor: pointer; transition: color .2s; } #product_detail_cloud .el-icon-document-copy:hover { color: var(--mk-accent); } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; gap: 16px; padding: 10px 16px; border: 1px solid var(--mk-line); border-radius: 14px; background: var(--mk-soft); } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund { gap: 8px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-btn { height: 32px; margin: 0; padding: 0 12px; border: 1px solid var(--mk-line-2); border-radius: 9px; background: #fff; font-size: 13px; font-weight: 600; line-height: 30px; color: var(--mk-text-2); transition: border-color .2s, color .2s; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-btn:hover { border-color: #e5484d; color: #e5484d; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-status { height: auto; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; line-height: 18px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-stop-btn { margin: 0; font-size: 13px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .on-off { margin: 0; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right img { width: 26px; height: 26px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right i { font-size: 22px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .fault { margin: 0; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box { display: grid; gap: 6px; font-size: 12.5px; color: var(--mk-text-3); } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box > div { display: flex; align-items: center; gap: 8px; margin: 0; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box > div > span:first-child { min-width: 42px !important; color: var(--mk-text); font-weight: 600; font-variant-numeric: tabular-nums; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box .green-div { width: 96px; height: 6px; margin: 0; overflow: hidden; border-radius: 3px; background: #e6eaf2; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box .percentage-div { border-radius: 3px; background: linear-gradient(90deg, #10b981, #06b6d4); } #product_detail_cloud .card-top .top-operation .operation-row3 { grid-column: 1; grid-row: 3; padding-left: 46px; font-size: 13px; } #product_detail_cloud .card-top .top-operation .operation-row3 .yes-notes { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--mk-soft); } #product_detail_cloud .card-top .top-operation .operation-row3 .yes-notes .notes-text { color: var(--mk-text-2); } #product_detail_cloud .card-top .top-operation .operation-row3 .no-notes { color: var(--mk-accent); } #product_detail_cloud .card-top .refund-msg { margin-top: 12px; } #product_detail_cloud .card-top .refund-msg .refund-success, #product_detail_cloud .card-top .refund-msg .refund-fail { width: auto; height: auto; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6; } /* 配置信息 / 支付信息：两张卡，字段「标签在上、值在下」 */ #product_detail_cloud .card-top .top-msg { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; } #product_detail_cloud .card-top .top-msg .msg-l, #product_detail_cloud .card-top .top-msg .msg-r { width: auto; min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--mk-line); border-radius: 16px; background: #fff; } #product_detail_cloud .card-top .top-msg .msg-l .l-t, #product_detail_cloud .card-top .top-msg .msg-r .r-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 30px; margin: 0 0 16px; } #product_detail_cloud .card-top .top-msg .msg-l .l-t .l-t-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #product_detail_cloud .card-top .top-msg .msg-l .l-t .l-t-l .l-t-l-text, #product_detail_cloud .card-top .top-msg .msg-r .r-t .r-t-l .r-t-l-text { margin: 0; font-size: 16px; font-weight: 650; color: var(--mk-text); } #product_detail_cloud .card-top .top-msg .copy-btn, #product_detail_cloud .main-card .copy-btn { display: inline-flex; align-items: center; height: 26px; margin: 0 !important; padding: 0 10px; border-radius: 8px; background: var(--mk-accent-soft); font-size: 12.5px; font-weight: 600; color: var(--mk-accent); } #product_detail_cloud .card-top .top-msg .msg-l .l-t .r-t-r, #product_detail_cloud .card-top .top-msg .msg-r .r-t .r-t-r { width: auto; gap: 6px; padding: 0; font-size: 13px; color: var(--mk-text-2); } #product_detail_cloud .card-top .top-msg .msg-r .r-t .r-t-l { width: auto; gap: 8px; } #product_detail_cloud .card-top .top-msg .help, #product_detail_cloud .card-top .top-msg .msg-r .r-t .r-t-r .help { width: 16px; height: 16px; margin: 0; border-color: var(--mk-line-2); font-size: 12px; color: var(--mk-text-3); } #product_detail_cloud .card-top .top-msg .msg-r .history-bill { height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; line-height: 26px; } #product_detail_cloud .card-top .top-msg .msg-l .l-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin: 0; padding: 0; } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item .label, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-l .label, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-r .label { flex: 0 0 100%; width: auto; margin: 0; font-size: 12.5px; line-height: 18px; color: var(--mk-text-3); } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item .value, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-l .value, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-r .value { min-width: 0; max-width: 100%; margin: 0; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--mk-text); } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item .value { display: flex; align-items: center; gap: 6px; } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item .value > span { overflow: hidden; text-overflow: ellipsis; } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item .eyes { width: 16px; height: 16px; margin: 0; opacity: .7; } #product_detail_cloud .card-top .top-msg .copy-password { color: var(--mk-text-3); cursor: pointer; } #product_detail_cloud .card-top .top-msg .msg-r .r-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; } #product_detail_cloud .card-top .top-msg .msg-r .r-b .row { display: contents; } #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-l, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: auto; min-width: 0; } #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-l .value.red { color: #e5484d !important; } #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .renew-btn { height: 26px; margin: 0; padding: 0 12px; border-radius: 8px; background: var(--mk-btn); font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(26, 86, 219, .6); } #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-l .renew-btn-disable { width: auto; height: 26px; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 12.5px; } /* 标签页内容 */ #product_detail_cloud .card-top .tabs { margin-top: 28px; } #product_detail_cloud .main-card .time-select { width: 180px; margin: 4px 0 0; } #product_detail_cloud .main-card .echart-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } #product_detail_cloud .main-card .net .echart-main { grid-template-columns: minmax(0, 1fr); } #product_detail_cloud .main-card .echart-main .my-echart { width: auto; height: 320px; margin: 0; border: 1px solid var(--mk-line); border-radius: 14px; box-shadow: none; overflow: hidden; } #product_detail_cloud .main-card .manage-content { margin-top: 4px; } #product_detail_cloud .main-card .manage-content .el-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 !important; } #product_detail_cloud .main-card .manage-content .el-row::before, #product_detail_cloud .main-card .manage-content .el-row::after { display: none; } #product_detail_cloud .main-card .manage-content .el-row .el-col { width: auto; float: none; padding: 0; } #product_detail_cloud .main-card .manage-content .el-row .el-col .manage-item { box-sizing: border-box; width: auto; height: 100%; min-height: 0; margin: 0 !important; float: none !important; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--mk-line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .25s; } #product_detail_cloud .main-card .manage-content .el-row .el-col .manage-item:hover { border-color: var(--mk-line-2); box-shadow: 0 12px 28px -20px rgba(15, 23, 42, .3); } #product_detail_cloud .main-card .manage-content .manage-item .item-top { display: flex; align-items: center; gap: 10px; width: 100%; } #product_detail_cloud .main-card .manage-content .manage-item .item-top .el-select { flex: 1; min-width: 0; } #product_detail_cloud .main-card .manage-content .manage-item .item-top .el-input__inner { height: 34px; line-height: 34px; } #product_detail_cloud .main-card .manage-content .manage-item .item-top .el-input__icon { line-height: 34px; } #product_detail_cloud .main-card .manage-content .manage-item .item-top-btn { flex: none; width: auto; min-width: 0; height: 34px; margin: 0; padding: 0 16px; border: 1px solid var(--mk-line-2); border-radius: 9px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--mk-text); transition: border-color .2s, color .2s, background-color .2s; } #product_detail_cloud .main-card .manage-content .manage-item .item-top-btn:hover { border-color: var(--mk-accent); color: var(--mk-accent); } #product_detail_cloud .main-card .manage-content .manage-item .item-top .item-top-btn { border-color: var(--mk-btn); background: var(--mk-btn); color: #fff; } #product_detail_cloud .main-card .manage-content .manage-item .item-top .item-top-btn:hover { background: var(--mk-btn-hover); color: #fff; } /* 不可用的操作：模板里写死了行内灰底 */ #product_detail_cloud .main-card .manage-content .manage-item .item-top-btn[style*="not-allowed"] { border-color: var(--mk-line) !important; background: var(--mk-soft) !important; color: var(--mk-text-3) !important; } #product_detail_cloud .main-card .manage-content .manage-item .item-bottom { margin: 0; font-size: 13px; line-height: 1.65; color: var(--mk-text-3); } #product_detail_cloud .main-card .disk-top-operation { margin: 4px 0 12px; } #product_detail_cloud .main-card .disk-top-operation .el-button { height: 34px; padding: 0 16px; font-size: 13.5px; } #product_detail_cloud .main-card .no-disk .text { margin-top: 48px; font-size: 16px; font-weight: 600; } #product_detail_cloud .main-card .no-disk .text2 { margin-top: 6px; font-size: 13px; color: var(--mk-text-3); } #product_detail_cloud .main-card .buy-btn, #product_detail_cloud .main-card .no-disk .buy-btn, #product_detail_cloud .main-card .no-bs .no-bs-content .btn { width: auto; height: 36px; margin: 20px auto; padding: 0 18px; border-radius: 10px; background: var(--mk-accent-soft); font-size: 14px; font-weight: 600; color: var(--mk-accent); } #product_detail_cloud .main-card .yes-disk .main-table, #product_detail_cloud .main-card .log .main_table { margin-top: 8px; } #product_detail_cloud .main-card .net .title { margin: 22px 0 12px; font-size: 16px; font-weight: 650; color: var(--mk-text); } #product_detail_cloud .main-card .net > .title:first-child { margin-top: 4px; } #product_detail_cloud .main-card .flow-btn, #product_detail_cloud .main-card .main-content .content-top .top-btn { width: auto; height: 32px; margin: 0; padding: 0 14px; border-radius: 9px; background: var(--mk-btn); font-size: 13px; font-weight: 600; line-height: 32px; color: #fff; display: inline-flex; align-items: center; } #product_detail_cloud .main-card .main-content .content-top .top-btn:not(.nat-btn) { background: var(--mk-accent-soft); color: var(--mk-accent); } #product_detail_cloud .main-card .net .safe-conten .safe-box { gap: 10px; font-size: 13.5px; color: var(--mk-text-2); } #product_detail_cloud .main-card .net .flow-content .flow-item { font-size: 13.5px; } #product_detail_cloud .main-card .net .flow-content .flow-item .flow-label { width: 96px; margin-right: 12px; color: var(--mk-text-3); } #product_detail_cloud .main-card .main-content { margin-top: 8px; } #product_detail_cloud .main-card .main-content + .main-content, #product_detail_cloud .main-card .main-content:nth-last-child(1) { margin-top: 28px; } #product_detail_cloud .main-card .main-content .content-top { margin-bottom: 12px; } #product_detail_cloud .main-card .main-content .content-top .top-title { font-size: 16px; font-weight: 650; color: var(--mk-text); } #product_detail_cloud .main-card .no-bs .no-bs-title { margin: 4px 0 12px; font-size: 16px; font-weight: 650; } #product_detail_cloud .main-card .no-bs .no-bs-content { height: auto; padding: 40px 16px 24px; border: 1px dashed var(--mk-line-2); border-radius: 14px; background: var(--mk-soft); } #product_detail_cloud .main-card .no-bs .no-bs-content .text { margin: 0 0 4px; font-size: 15px; color: var(--mk-text-2); } #product_detail_cloud .main-card .no-snap { margin-top: 28px; } #product_detail_cloud .main-card .text-btn, #product_detail_cloud .main-card .ip-btn { margin-right: 12px; color: var(--mk-accent); cursor: pointer; } /* common.css 给所有 td/th 加了 20px !important 左内边距 */ #product_detail_cloud .el-table td.el-table__cell, #product_detail_cloud .el-table th.el-table__cell { padding-left: 0 !important; } #product_detail_cloud .el-table .cell { padding: 0 14px; } @media screen and (max-width: 1180px) { #product_detail_cloud .card-top .top-msg { grid-template-columns: minmax(0, 1fr); } } /* ---------- 实例详情 · 手机 ---------- */ @media screen and (max-width: 750px) { #product_detail_cloud .card-top .top-operation { width: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 16px; } #product_detail_cloud .card-top .top-operation .operation-row1 { gap: 6px 8px; } #product_detail_cloud .card-top .top-operation .operation-row1 .back-img { width: 16px; height: 16px; padding: 6px; } #product_detail_cloud .card-top .top-operation .operation-row1 .top-product-name { flex: 1 1 calc(100% - 50px); font-size: 18px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left { grid-row: auto; padding-left: 0; row-gap: 6px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .name, #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .ip, #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .vpc-ip { padding: 0 10px; font-size: 13px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left > :first-child, #product_detail_cloud .card-top .top-operation .operation-row2 .row2-left .vpc-ip { padding-left: 0; border-left: 0; } #product_detail_cloud .card-top .top-operation .operation-row3 { grid-row: auto; padding-left: 0; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right { grid-column: 1; grid-row: auto; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px 14px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box { order: -1; flex: 1 1 auto; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .info-box .green-div { width: 80px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-btn { height: 34px; line-height: 32px; } #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-status, #product_detail_cloud .card-top .top-operation .operation-row2 .row2-right .refund-stop-btn { font-size: 12.5px; } #product_detail_cloud .card-top .top-msg { display: grid; gap: 12px; margin-top: 14px; } #product_detail_cloud .card-top .top-msg .msg-l, #product_detail_cloud .card-top .top-msg .msg-r { margin: 0; padding: 14px 16px 16px; border-radius: 14px; } #product_detail_cloud .card-top .top-msg .msg-l .l-t, #product_detail_cloud .card-top .top-msg .msg-r .r-t { margin-bottom: 12px; } #product_detail_cloud .card-top .top-msg .msg-l .l-b, #product_detail_cloud .card-top .top-msg .msg-r .r-b { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } #product_detail_cloud .card-top .top-msg .msg-l .l-b .info-item .value, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-l .value, #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .row-r .value { font-size: 14px; } /* 手机上的小按钮放大到好点的尺寸 */ #product_detail_cloud .card-top .top-msg .msg-r .r-b .row .renew-btn { width: auto; height: 32px; padding: 0 14px; font-size: 13px; } #product_detail_cloud .card-top .top-msg .copy-btn { height: 30px; } #product_detail_cloud .card-top .top-msg .help, #product_detail_cloud .card-top .top-msg .msg-r .r-t .r-t-r .help { width: 20px; height: 20px; font-size: 12px; } #product_detail_cloud .card-top .top-operation .operation-row3 .yes-notes { padding: 6px 12px; } #product_detail_cloud .card-top .top-operation .operation-row3 .no-notes { display: inline-block; padding: 6px 0; } #product_detail_cloud .card-top .tabs { width: auto; margin-top: 18px; } #product_detail_cloud .main-card .time-select { width: 100%; } #product_detail_cloud .main-card .echart-main { grid-template-columns: minmax(0, 1fr); gap: 12px; } #product_detail_cloud .main-card .echart-main .my-echart { height: 260px; } #product_detail_cloud .main-card .manage-content .el-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } #product_detail_cloud .main-card .manage-content .el-row .el-col-8 { width: auto; } #product_detail_cloud .main-card .manage-content .el-row .el-col .manage-item { gap: 8px; padding: 14px; } #product_detail_cloud .main-card .manage-content .manage-item .item-top-btn { height: 38px; font-size: 14px; } #product_detail_cloud .main-card .manage-content .manage-item .item-top .el-input__inner { height: 38px; line-height: 38px; } #product_detail_cloud .main-card .manage-content .manage-item .item-bottom { font-size: 13px; } #product_detail_cloud .main-card .net .title { font-size: 15px; } #product_detail_cloud .main-card .net .flow-content .flow-item, #product_detail_cloud .main-card .net .safe-conten .safe-box { font-size: 13px; } #product_detail_cloud .main-card .flow-btn, #product_detail_cloud .main-card .main-content .content-top .top-btn { height: 34px; font-size: 13px; } #product_detail_cloud .main-card .main-content .content-top .top-title, #product_detail_cloud .main-card .no-bs .no-bs-title { font-size: 15px; } #product_detail_cloud .main-card .no-disk .text { margin-top: 32px; font-size: 15px; } #product_detail_cloud .main-card .no-disk .text2 { font-size: 13px; } #product_detail_cloud .el-table .cell { padding: 0 10px; } } /* ---------- 实例详情 · 弹窗（续费 / 电源 / 备注 / 重置密码 / 重装 等，模板里都是 .dialog-title + .dialog-main + .dialog-footer） ---------- */ #product_detail_cloud .el-dialog .dialog-title { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--mk-text); } #product_detail_cloud .el-dialog .dialog-title .second-title { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--mk-text-3); } #product_detail_cloud .el-dialog .dialog-main { font-size: 14px; color: var(--mk-text-2); } #product_detail_cloud .main-card .card-top .el-dialog .dialog-main .label { margin: 16px 0 8px; font-size: 13px; color: var(--mk-text-3); } #product_detail_cloud .el-dialog .dialog-footer { gap: 10px; margin-top: 24px; } #product_detail_cloud .el-dialog .dialog-footer .btn-ok, #product_detail_cloud .el-dialog .dialog-footer .btn-no, #product_detail_cloud .main-card .card-top .el-dialog .dialog-footer .btn-ok, #product_detail_cloud .main-card .card-top .el-dialog .dialog-footer .btn-no { height: 38px; min-width: 96px; margin: 0; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background-color .2s, border-color .2s; } #product_detail_cloud .el-dialog .dialog-footer .btn-ok, #product_detail_cloud .main-card .card-top .el-dialog .dialog-footer .btn-ok { background: var(--mk-btn); color: #fff; box-shadow: 0 6px 16px -8px rgba(26, 86, 219, .6); } #product_detail_cloud .el-dialog .dialog-footer .btn-ok:hover { background: var(--mk-btn-hover); } #product_detail_cloud .el-dialog .dialog-footer .btn-no, #product_detail_cloud .main-card .card-top .el-dialog .dialog-footer .btn-no { border: 1px solid var(--mk-line-2); background: #fff; color: var(--mk-text); } #product_detail_cloud .el-dialog .dialog-footer .btn-no:hover { background: var(--mk-soft); } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin-bottom: 14px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content .renew-item { position: relative; width: auto; margin: 0; padding: 8px 4px; overflow: hidden; border-radius: 10px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content .renew-active { border-color: var(--mk-accent); box-shadow: var(--mk-ring); } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .pay-content { border-radius: 12px; } @media screen and (max-width: 750px) { #product_detail_cloud .el-dialog .dialog-title { font-size: 18px; } #product_detail_cloud .el-dialog .dialog-main, #product_detail_cloud .el-dialog .dialog-main p, #product_detail_cloud .el-dialog .dialog-main span, #product_detail_cloud .el-dialog .dialog-main div { font-size: 14px; } #product_detail_cloud .main-card .card-top .el-dialog .dialog-main .label { font-size: 13px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content { gap: 8px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content .renew-item { min-height: 60px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content .renew-item .item-top, #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content .renew-item .item-bottom { font-size: 13px; line-height: 1.4; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .renew-content .renew-item .item-origin-price { font-size: 12px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .pay-content .pay-price .text { font-size: 13px; } #product_detail_cloud .main-card .card-top .renew-dialog .dialog-main .pay-content .pay-price .money { font-size: 22px; } #product_detail_cloud .el-dialog .dialog-footer .btn-ok, #product_detail_cloud .el-dialog .dialog-footer .btn-no, #product_detail_cloud .main-card .card-top .el-dialog .dialog-footer .btn-ok, #product_detail_cloud .main-card .card-top .el-dialog .dialog-footer .btn-no { flex: 1; height: 42px; font-size: 15px; } } #product_detail_cloud .main-card .card-top .el-dialog .dialog-main .el-input__inner, #product_detail_cloud .el-dialog .dialog-main .el-input__inner { height: 38px; line-height: 38px; } #product_detail_cloud .el-dialog .dialog-main .pass-input .pass-btn { width: 92px; height: 36px; border-radius: 0 10px 10px 0; font-size: 13px; color: var(--mk-accent); background: var(--mk-accent-soft); } @media screen and (max-width: 750px) { #product_detail_cloud .main-card .card-top .el-dialog .dialog-main .el-input__inner, #product_detail_cloud .el-dialog .dialog-main .el-input__inner { height: 40px; line-height: 40px; } #product_detail_cloud .el-dialog .dialog-main .pass-input .pass-btn { height: 38px; } }