/* ========================================================================= * Prokvm 会员中心新视觉设计系统 · 企业级 / 专业 / 大气 * 默认靛蓝 #635bff，8 套配色可在右上角切换（skinpro.js 注入，写 localStorage） * 亮色 :root · 暗色 html[data-skin="dark"] * 品牌色由 --sk-brand* 变量驱动，配色器通过覆盖这些变量实现换肤。 * 与后台 skinpro 共享 localStorage(skin_color / skin_theme)，观感统一。 * 直接集成、覆盖 Bootstrap3 类、结构不变、可逆（移除本文件即还原）。 * ========================================================================= */ :root{ --sk-brand:#635bff; --sk-brand-d:#4f46e5; --sk-brand-l:#8b85ff; --sk-brand-bg:#eeedfe; --sk-brand-bg2:#f5f4ff; --sk-glow:rgba(99,91,255,.42); --sk-ring:rgba(99,91,255,.18); --sk-page:#f6f7f9; --sk-card:#ffffff; --sk-card-2:#fafbfc; --sk-border:#edeff2; --sk-border-2:#f3f4f6; --sk-border-3:#e3e6ea; --sk-ink:#0d1526; --sk-ink-2:#475569; --sk-mut:#8b95a7; --sk-faint:#c4ccd8; --sk-rail:#0e1119; --sk-rail-2:#161a24; --sk-rail-mut:#8b93a7; --sk-rail-faint:#565f74; --sk-head:#f9f9fd; --sk-stripe:#fbfbfe; --sk-danger:#e8554d; --sk-danger-bg:#fdecec; --sk-success:#16a06a; --sk-success-bg:#e7f6ee; --sk-warn:#dd9224; --sk-warn-bg:#fdf3e1; --sk-radius-sm:9px; --sk-radius:11px; --sk-radius-lg:14px; /* 布局外壳变量（默认=① 云控制台：浅色侧栏、方正紧凑） */ --sk-app-bg:var(--sk-page); --sk-side-bg:var(--sk-card); --sk-side-ink:var(--sk-ink-2); --sk-side-grp:var(--sk-mut); --sk-side-brand:var(--sk-ink); --sk-side-bd:var(--sk-border); --sk-card-bd:var(--sk-border); --sk-card-blur:none; --sk-sh:0 1px 2px rgba(13,21,38,.04),0 1px 3px rgba(13,21,38,.05); --sk-sh-md:0 4px 18px rgba(13,21,38,.06),0 2px 6px rgba(13,21,38,.04); --sk-sh-lg:0 16px 44px rgba(13,21,38,.14); } html[data-skin="dark"]{ --sk-page:#0b0b14; --sk-card:#15151f; --sk-card-2:#1a1a26; --sk-border:#262636; --sk-border-2:#1f1f2c; --sk-border-3:#2e2e40; --sk-ink:#e9eaf4; --sk-ink-2:#c0c2d6; --sk-mut:#7f819b; --sk-faint:#5a5c75; --sk-rail:#0a0a14; --sk-rail-2:#14141f; --sk-head:#1a1a26; --sk-stripe:#181822; --sk-danger:#f1746b; --sk-danger-bg:#3a1f1d; --sk-success:#34c281; --sk-success-bg:#15301f; --sk-warn:#e7a948; --sk-warn-bg:#352713; --sk-sh:0 1px 2px rgba(0,0,0,.3); --sk-sh-md:0 6px 22px rgba(0,0,0,.45); --sk-sh-lg:0 16px 46px rgba(0,0,0,.6); } /* ============================== 深色模式修正 ============================== */ html[data-skin="dark"] .dropdown-input li:hover a, html[data-skin="dark"] .dropdown-input li a:hover, html[data-skin="dark"] .pagination > li > a:hover, html[data-skin="dark"] a.list-group-item:hover, html[data-skin="dark"] a.list-group-item.active, html[data-skin="dark"] .label-info,html[data-skin="dark"] .label.bg-info,html[data-skin="dark"] .label-primary, html[data-skin="dark"] .alert-info, html[data-skin="dark"] .filter-row .label{ color:var(--sk-brand-l) !important; } html[data-skin="dark"] ::selection{ color:var(--sk-brand-l); } /* ============================== 基础 / 排版 ============================== */ html,body{ background:var(--sk-app-bg) !important; } body{ color:var(--sk-ink); font-family:'Inter',"PingFang SC","Microsoft Yahei","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; font-size:13px; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--sk-ink); font-weight:600; letter-spacing:-.01em; } a{ color:var(--sk-brand); transition:color .15s; } a:hover,a:focus{ color:var(--sk-brand-d); } a,a:focus,a:active,button,button:focus,.btn,.btn:focus,.btn:active,.dropdown-toggle,.dropdown-toggle:focus, #nav a,#nav a:focus,#header a,#header a:focus{ outline:0 !important; -webkit-tap-highlight-color:transparent; } hr{ border-top-color:var(--sk-border); } .text-info,.text-primary{ color:var(--sk-brand) !important; } .text-muted,.text-gray{ color:var(--sk-mut) !important; } .text-danger{ color:var(--sk-danger) !important; } .text-success{ color:var(--sk-success) !important; } .text-warning{ color:var(--sk-warn) !important; } .text-black{ color:var(--sk-ink) !important; } .bg-white,.bg-light{ background:var(--sk-card) !important; } ::selection{ background:var(--sk-brand-bg); color:var(--sk-brand-d); } ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-thumb{ background:rgba(139,144,167,.4); border-radius:9px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:rgba(139,144,167,.65); background-clip:content-box; } /* ============================== 左侧栏 · 变量驱动（4 布局共用） ============================== */ #nav.nav-primary,.nav-primary{ background:var(--sk-side-bg) !important; transition:width .2s,background .2s; } #nav{ box-shadow:2px 0 18px rgba(20,19,39,.07); scrollbar-width:none; -ms-overflow-style:none; } /* 移动端划出侧栏改窄（默认 75% 太宽）；内容右移量同步为 240px，避免侧栏与内容间空白缝 */ @media (max-width:991px){ .slide-nav #nav{ width:240px !important; } .slide-nav > #header,.slide-nav > #content{ transform:translate3d(240px,0,0) !important; } .slide-nav.slide-nav-right > #header,.slide-nav.slide-nav-right > #content{ transform:translate3d(-240px,0,0) !important; } } #nav::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none; } .nav-primary .affix{ background:var(--sk-side-bg) !important; } /* 侧栏固定：不随右侧内容区滚动；菜单过长时侧栏自身内部滚动 */ @media (min-width:992px){ #nav{ position:fixed !important; top:0; left:0; bottom:0; overflow-y:auto; } .nav-primary .nav[data-spy="affix"], .nav-primary .affix, .nav-primary .affix-top, .nav-primary .affix-bottom{ position:static !important; top:auto !important; left:auto !important; width:auto !important; } } /* 品牌 / LOGO */ .nav-primary .nav-brand{ display:flex !important; align-items:center; justify-content:center; height:56px; padding:0 16px !important; margin:0; border-bottom:1px solid var(--sk-side-bd); overflow:hidden; } .nav-primary .nav-brand img{ max-height:34px; max-width:150px; width:auto; } .nav-primary .nav-brand .txt{ font-size:16px !important; font-style:normal !important; font-weight:700 !important; color:var(--sk-side-brand) !important; letter-spacing:-.2px; white-space:nowrap; } /* 菜单列表 */ .nav-primary > ul{ padding:12px 12px 20px !important; } .nav-primary li{ line-height:1.4 !important; } /* 分组标题 */ .nav-primary li.group{ padding:16px 0 5px !important; } .nav-primary li.group span{ padding-left:12px !important; color:var(--sk-side-grp) !important; font-size:11px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } .nav-primary li.group:first-child{ padding-top:4px !important; } /* 菜单项 */ .nav-primary > ul > li > a, .nav-primary.bg-light > ul > li > a{ display:flex !important; align-items:center; gap:2px; color:var(--sk-side-ink) !important; padding:10px 12px !important; margin-bottom:2px; border:0 !important; border-radius:12px; font-size:13.5px; font-weight:500; word-wrap:break-word; white-space:nowrap; transition:background .16s,color .16s,box-shadow .16s; } .nav-primary li a i, .nav-primary > ul > li > a i{ margin-right:11px !important; font-size:1.2em !important; width:20px !important; text-align:center; display:inline-block; flex-shrink:0; opacity:.92; } .nav-primary > ul > li > a span{ flex:1 1 auto; } /* 悬停 */ .nav-primary > ul > li > a:hover, .nav-primary > ul > li > a:focus, .nav-primary > ul > .dropdown-submenu:hover > a, .nav-primary.bg-light > ul > li > a:hover, .nav-primary.bg-light > ul > li > a:focus{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; } /* 选中：克制柔底 + 品牌色（浅色侧栏）；深色侧栏在 data-sk-side 块内覆盖 */ .nav-primary > ul > li.active > a, .nav-primary > ul > li.active > a:hover, .nav-primary > ul > li.active > a:focus, .nav-primary.bg-light > ul > li.active > a{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; box-shadow:none; font-weight:600; } .nav-primary > ul > li.active > a i, .nav-primary > ul > li.active > a *{ color:var(--sk-brand-d) !important; opacity:1; } .nav-primary > ul > .dropdown-submenu > a:after{ display:none; } .nav-primary .logo_mark a{ color:var(--sk-side-grp) !important; } .nav-primary .logo_mark a:hover{ color:var(--sk-brand) !important; } /* 移动端抽屉内的展开子菜单 */ @media (max-width:991px){ .nav-primary .dropdown-menu a{ color:var(--sk-side-ink) !important; border-bottom-color:var(--sk-side-bd) !important; } .nav-primary .dropdown-menu a:hover{ color:var(--sk-brand-d) !important; } } /* ============================== 顶栏 header ============================== */ .navbar,#header.navbar{ background:var(--sk-card) !important; border:0; border-bottom:1px solid var(--sk-border); box-shadow:none; min-height:56px; } /* 顶栏恒在最上层（其内部下拉随之），压过购买页右侧固定卡片 #wrapFooter(z-index:20)；1030=标准 navbar 层级，仍低于弹窗/modal */ #header.navbar{ z-index:1030 !important; } /* dropdown li 需定位，.open{z-index:1050} 才生效 */ #header .navbar-nav.pull-right > li.dropdown{ position:relative; } .navbar-fixed{ padding-top:57px; } #header .navbar-nav > li > a{ color:var(--sk-ink-2); transition:color .15s; } #header .navbar-nav > li > a:hover,#header .navbar-nav > li > a:focus{ color:var(--sk-brand) !important; background:transparent; } #header .thumb-small.avatar img,#header .img-circle{ border:2px solid var(--sk-border); border-radius:50% !important; } /* 顶栏右侧对齐 */ #header .navbar-nav.pull-right{ display:flex !important; align-items:center; gap:2px; height:56px; } #header .navbar-nav.pull-right > li{ float:none !important; display:flex; align-items:center; height:56px; } #header .navbar-nav.pull-right > li > a{ position:relative; display:inline-flex !important; align-items:center; justify-content:center; padding:0 11px !important; height:56px; line-height:1; border-radius:0; color:var(--sk-ink-2); transition:color .15s,background .15s; } #header .navbar-nav.pull-right > li > a:hover{ color:var(--sk-brand) !important; } #header .navbar-nav.pull-right > li > a > svg{ width:17px; height:17px; display:block; } /* 调色盘图标略小于线性图标，视觉更协调 */ #header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn > svg{ width:15px; height:15px; } #header .navbar-nav.pull-right > li > a .caret{ margin-left:6px; color:var(--sk-faint); } /* 右上角图标（含调色盘）：链接满高(56)天然垂直居中；hover 方块底用居中伪元素(38×38 圆角) */ #header .navbar-nav.pull-right:not(.navbar-avatar) > li > a, #header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn{ position:relative; width:44px !important; height:56px !important; padding:0 !important; margin:0; border-radius:0; } #header .navbar-nav.pull-right:not(.navbar-avatar) > li > a::before, #header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn::before{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:10px; background:transparent; transition:background .15s; z-index:0; } #header .navbar-nav.pull-right:not(.navbar-avatar) > li > a:hover::before, #header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn:hover::before{ background:var(--sk-head); } #header .navbar-nav.pull-right:not(.navbar-avatar) > li > a > svg, #header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn > svg{ position:relative; z-index:1; } #header .navbar-nav.pull-right:not(.navbar-avatar) > li > a:hover, #header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn:hover{ color:var(--sk-brand) !important; } /* 工单未读红点：方块右上角小圆点 */ #header .navbar-nav.pull-right > li > a .point.bg-danger{ position:absolute; top:11px; right:5px; z-index:2; width:7px; height:7px; padding:0; border-radius:50%; background:var(--sk-danger) !important; border:1.5px solid var(--sk-card); } /* 顶栏左侧标题 · 站点名 + 面包屑 */ #header .navbar-nav.navbar-title.pull-left{ display:flex !important; align-items:center; height:56px; padding-left:24px; margin:0; } #header .navbar-nav.navbar-title.pull-left > li{ display:flex !important; align-items:center; height:56px; float:none; } .navbar-title .sk-crumb{ display:flex; align-items:center; font-size:13px; color:var(--sk-mut); } .navbar-title .sk-crumb .sk-site{ font-size:14px !important; font-weight:400; color:var(--sk-ink) !important; padding:0 !important; letter-spacing:-.2px; white-space:nowrap; } .navbar-title .sk-crumb .sk-site:hover{ color:var(--sk-brand) !important; } .navbar-title .sk-crumb .sk-sep{ margin:0 9px; font-size:12px; color:var(--sk-faint); } .navbar-title .sk-crumb .sk-crumb-ico{ margin-right:6px; margin-left:1px; font-size:15px; color:var(--sk-brand); } .navbar-title .sk-crumb .sk-crumb-cur{ color:var(--sk-ink); font-weight:500; font-size:14px; white-space:nowrap; } /* 用户下拉菜单（头像）· 现代结构 */ .dropdown-menu.header-user.sk-um{ min-width:262px; padding:0 !important; overflow:hidden; } .dropdown-menu.header-user.sk-um.sk-um-work{ min-width:346px; } .sk-um-head{ display:flex; align-items:center; gap:12px; padding:16px; background:var(--sk-head); border-bottom:1px solid var(--sk-border); } .sk-um-ava{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 3px var(--sk-brand-bg); } .sk-um-meta{ min-width:0; } .sk-um-name{ font-size:15px; font-weight:700; color:var(--sk-ink); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sk-um-badges{ display:flex; gap:6px; margin-top:7px; } .sk-um-b{ width:23px; height:23px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; background:var(--sk-border-2); color:var(--sk-faint); } .sk-um-b.ok{ background:var(--sk-success-bg); color:var(--sk-success); } a.sk-um-b:hover{ color:var(--sk-brand) !important; } .sk-um-list{ padding:7px; } .sk-um-list > a{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:var(--sk-ink-2); font-size:13.5px; font-weight:500; } .sk-um-list > a > i:first-child{ width:16px; text-align:center; color:var(--sk-mut); font-size:15px; flex-shrink:0; } .sk-um-list > a > span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sk-um-list > a:hover{ background:var(--sk-brand-bg2); color:var(--sk-brand-d) !important; } .sk-um-list > a:hover > i:first-child{ color:var(--sk-brand-d); } .sk-um-arw{ margin-left:auto; font-size:11px !important; color:var(--sk-faint) !important; } .sk-um-list > a:hover .sk-um-arw{ color:var(--sk-brand) !important; } .sk-um-foot{ border-top:1px solid var(--sk-border); padding:7px; } .sk-um-foot > a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border-radius:9px; color:var(--sk-danger); font-size:13.5px; font-weight:600; } .sk-um-foot > a > i{ font-size:14px; } .sk-um-foot > a:hover{ background:var(--sk-danger-bg); color:var(--sk-danger) !important; } /* 财务下拉头 */ .sk-um-fin-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; background:var(--sk-head); border-bottom:1px solid var(--sk-border); } .sk-um-fin-l{ font-size:12px; color:var(--sk-mut); } .sk-um-fin-v{ font-size:20px; font-weight:750; color:var(--sk-ink); letter-spacing:-.5px; margin-top:3px; font-variant-numeric:tabular-nums; } .sk-um-fin-head .btn{ margin-left:auto; height:32px; padding:0 16px; display:inline-flex; align-items:center; border-radius:8px; } /* 工单下拉 */ .sk-um-thead{ display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1px solid var(--sk-border); font-size:14px; font-weight:700; color:var(--sk-ink); } .sk-um-cnt{ font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px; background:var(--sk-warn-bg); color:var(--sk-warn); } .sk-um-empty{ text-align:center; color:var(--sk-mut); font-size:13px; padding:22px 0; } .sk-um-empty i{ color:var(--sk-success); margin-right:4px; } .sk-um-list > a > span.sk-um-tag{ flex:none; overflow:visible; font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:20px; white-space:nowrap; } .sk-um-tag.is-adm{ background:var(--sk-warn-bg); color:var(--sk-warn); } .sk-um-tag.is-mem{ background:var(--sk-success-bg); color:var(--sk-success); } .sk-um-foot2{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--sk-border); } .sk-um-foot2 .btn{ flex:1; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border-radius:9px; } /* open 态去旧绿边 */ .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle{ background:transparent !important; box-shadow:none !important; color:var(--sk-brand) !important; } /* 下拉打开时也显示与调色盘一致的方块底（伪元素） */ #header .navbar-nav.pull-right > li.dropdown.open > a.dropdown-toggle::before{ background:var(--sk-head); } /* 头像下拉/工单/财务面板 */ .navbar .nav > li > .header-user{ min-width:270px; } .navbar .nav > li > .header-user .panel{ margin:0; border:0 !important; box-shadow:none; } .dropdown-menu.header-user .panel-heading{ background:var(--sk-head) !important; } .dropdown-menu.header-user .panel-body a,.dropdown-menu.header-user .panel-footer a:not(.btn){ color:var(--sk-ink-2); } .dropdown-menu.header-user .panel-body a:hover{ color:var(--sk-brand) !important; } .dropdown-menu.header-user .panel-body i{ color:var(--sk-mut); } /* 移动端汉堡 */ #header .btn-link.nav-toggle{ color:var(--sk-ink-2) !important; } #header .btn-link.nav-toggle:hover{ color:var(--sk-brand) !important; } /* ============================== 主体 / 页脚 ============================== */ #content{ background:transparent; } /* 列表空状态 · 标准化：居中插画式图标 + 灰字（覆盖各列表页 td[colspan] 的"没找到记录"行） */ .main table td[colspan]:has(> .text-muted > .icon-exclamation-sign){ text-align:center !important; } .main table td[colspan] > .text-muted:has(> .icon-exclamation-sign){ display:flex; flex-direction:column; align-items:center; gap:12px; padding:46px 0 42px; text-align:center; color:var(--sk-mut) !important; font-size:13px; } .main table td[colspan] > .text-muted:has(> .icon-exclamation-sign)::before{ content:''; width:52px; height:52px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4ccd8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") no-repeat center/52px 52px; } .main table td[colspan] > .text-muted:has(> .icon-exclamation-sign) .icon-exclamation-sign{ display:none; } .main table td[colspan] > .text-muted:has(> .icon-exclamation-sign) b{ font-weight:400; } /* 纯文字空状态（单行 .text-muted 直接挂在 td 上，无 align）水平居中 + 上下留白，配合 colspan=99 横跨整表 */ .main table td[colspan].text-muted{ text-align:center !important; padding:34px 0 !important; color:var(--sk-mut) !important; } #footer{ color:var(--sk-faint) !important; font-size:11px !important; letter-spacing:.3px; padding:16px 0 20px !important; background:transparent !important; border:0 !important; box-shadow:none !important; } #footer a{ color:var(--sk-faint); } #footer a:hover{ color:var(--sk-brand) !important; } /* 版权在内容区（去掉左侧栏 195px）内居中 */ @media (min-width:992px){ #footer{ padding-left:195px !important; } } .main.padder{ padding:20px 24px !important; } /* 列表页顶部标题栏 · 一排（标题左，操作按钮右对齐，窄屏自动换行） */ .main .page-head{ padding:2px 2px 20px !important; margin:0; } .main .page-head h4{ display:flex !important; flex-wrap:wrap; align-items:center; gap:6px; margin:0; line-height:1.2; } .main .page-head h4 > .btn-group:first-child{ margin:0 14px 0 0 !important; padding:0; font-size:16px; font-weight:700; color:var(--sk-ink); letter-spacing:-.3px; display:inline-flex; align-items:center; gap:9px; } .main .page-head h4 > .btn-group:first-child > i{ font-size:17px; color:var(--sk-brand) !important; } .main .page-head h4 > .btn-group:not(:first-child){ margin:0 !important; } /* page-head 里裸露的按钮（如"返回"，未包 btn-group、带 m-b-small）：清零边距对齐 */ .main .page-head h4 > .btn{ margin:0 !important; } /* 激活的操作按钮用品牌色（原红色改为品牌），未激活白底描边 */ .main .page-head h4 .btn-group > .btn.btn-danger{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; box-shadow:0 2px 8px var(--sk-ring); } .main .page-head h4 .btn-group > .btn.btn-danger:hover{ background:var(--sk-brand-d) !important; } /* ============================== 卡片 / 面板 ============================== */ .panel{ background:var(--sk-card); border:1px solid var(--sk-card-bd) !important; border-radius:var(--sk-radius-lg); box-shadow:var(--sk-sh); overflow:hidden; backdrop-filter:var(--sk-card-blur); } /* 面板内有下拉展开 / 搜索框聚焦（自动补全）时放开裁剪，避免菜单被 overflow:hidden 截断（其余时仍裁剪保圆角） */ .panel:has(.open), .panel:has(.input-group-search:focus-within){ overflow:visible; } /* 行内下拉(操作列「更多」等)展开时放开容器 overflow，避免被 .panel/.table-responsive 裁掉 */ .panel:has(.btn-group.open),.panel:has(.dropdown.open),.panel:has(li.dropdown.open){ overflow:visible !important; } .table-responsive:has(.btn-group.open),.table-responsive:has(.dropdown.open){ overflow:visible !important; } .panel-heading,.panel-footer{ background:var(--sk-head) !important; border-color:var(--sk-border) !important; color:var(--sk-ink); padding:14px 18px; } .panel-heading{ font-weight:600; } .panel-body{ padding:18px; } .panel .table{ margin-bottom:0; } .well{ background:var(--sk-card-2); border:1px solid var(--sk-border); border-radius:var(--sk-radius); box-shadow:none; } /* 会员专属 panel-card */ .panel-card{ background:var(--sk-card); border:1px solid var(--sk-card-bd) !important; border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh) !important; overflow:hidden; margin-bottom:20px; backdrop-filter:var(--sk-card-blur); transition:box-shadow .18s,transform .18s,border-color .18s; } .panel-card:hover{ box-shadow:var(--sk-sh-md) !important; } .panel-card .card-heading{ display:flex; align-items:center; font-size:14px !important; font-weight:700 !important; color:var(--sk-ink) !important; padding:15px 18px 0 !important; letter-spacing:-.2px; } .panel-card .card-heading::before{ content:''; width:4px; height:15px; border-radius:3px; margin-right:9px; background:linear-gradient(180deg,var(--sk-brand-l),var(--sk-brand-d)); box-shadow:0 2px 8px var(--sk-glow); } .panel-card .card-body{ padding:16px 18px 18px !important; } /* ============================== 按钮 ============================== */ .btn{ border-radius:var(--sk-radius); font-weight:600; transition:all .15s; border:1px solid transparent; } .btn:focus,.btn.active{ outline:0; box-shadow:none; } .btn-white,.btn-default{ background:var(--sk-card); border:1px solid var(--sk-border-3) !important; color:var(--sk-ink) !important; } .btn-white:hover,.btn-default:hover,.btn-white:focus,.btn-default:focus{ background:var(--sk-card-2); border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; } .btn-primary,.btn-info{ background:var(--sk-brand); border-color:var(--sk-brand); color:#fff; box-shadow:0 2px 8px var(--sk-ring); } .btn-white.btn-info,.btn-white.btn-primary,.btn-default.btn-info,.btn-default.btn-primary{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; } .btn-primary:hover,.btn-info:hover,.btn-primary:focus,.btn-info:focus,.btn-primary:active,.btn-info:active{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; color:#fff !important; } /* toggle 按钮组选中态跟随主题 */ .btn-toggle .btn-white.active{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; } .btn-success{ background:var(--sk-success); border-color:var(--sk-success); color:#fff; } .btn-success:hover{ filter:brightness(.94); color:#fff !important; } .btn-danger{ background:var(--sk-danger); border-color:var(--sk-danger); color:#fff; } .btn-danger:hover{ filter:brightness(.94); color:#fff !important; } .btn-warning{ background:var(--sk-warn); border-color:var(--sk-warn); color:#fff; } .btn-link{ color:var(--sk-brand); } .btn-sm,.btn-small,.btn-xs,.btn-mini{ border-radius:var(--sk-radius-sm); } .btn-circle{ border-radius:20px !important; } .btn-group > .btn{ box-shadow:none; } .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn{ border-radius:0 !important; } .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn + .btn{ margin-left:-1px !important; } .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn:first-child{ border-top-left-radius:var(--sk-radius-sm) !important; border-bottom-left-radius:var(--sk-radius-sm) !important; } .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn:last-child, .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.dropdown-toggle{ border-top-right-radius:var(--sk-radius-sm) !important; border-bottom-right-radius:var(--sk-radius-sm) !important; } .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.btn-info, .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.btn-primary, .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.active, .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn:hover{ position:relative; z-index:2; } .open > .dropdown-toggle.btn-white,.open > .dropdown-toggle.btn-default{ background:var(--sk-card-2); border-color:var(--sk-border-3); color:var(--sk-ink); } /* 整合式下拉按钮（箭头在按钮内，如"导出账单▾"）：两侧都圆角 */ .btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn[data-toggle="dropdown"]:first-child{ border-radius:var(--sk-radius-sm) !important; } /* ============================== 表单 ============================== */ .form-control{ background:var(--sk-card); border:1px solid var(--sk-border-3); color:var(--sk-ink); border-radius:var(--sk-radius); box-shadow:none; transition:border-color .15s,box-shadow .15s; } .form-control:focus{ border-color:var(--sk-brand) !important; box-shadow:0 0 0 3px var(--sk-ring) !important; } .form-control::-webkit-input-placeholder{ color:var(--sk-faint); } .form-control[disabled],.form-control[readonly]{ background:var(--sk-card-2); color:var(--sk-mut); } .control-label,label{ color:var(--sk-ink-2); font-weight:500; } .input-group-addon{ background:var(--sk-head); border:1px solid var(--sk-border-3); color:var(--sk-mut); border-radius:var(--sk-radius); } .help-block{ color:var(--sk-mut); } .has-error .form-control{ border-color:var(--sk-danger) !important; } .has-error .control-label,.parsley-errors-list{ color:var(--sk-danger); } .checkbox,.radio{ color:var(--sk-ink-2); } input[type=checkbox],input[type=radio]{ accent-color:var(--sk-brand); } /* ============================== 表格 ============================== */ .table{ color:var(--sk-ink-2); } .table > thead > tr > th{ color:var(--sk-mut); font-weight:600; border-bottom:1px solid var(--sk-border) !important; background:var(--sk-head); } .table > tbody > tr > td{ border-top:1px solid var(--sk-border-2) !important; vertical-align:middle; } .table.b-t{ border-top-color:var(--sk-border) !important; } .panel .table th,.panel .table td{ padding:11px 18px; border-top-color:var(--sk-border-2) !important; } .panel .table-striped > thead > tr > th{ background:var(--sk-head) !important; color:var(--sk-mut); border-right:0 !important; border-bottom:1px solid var(--sk-border) !important; } .panel .table-striped > tbody > tr:nth-child(odd) > td{ background:var(--sk-stripe) !important; } .table > thead > tr.warning > th,.table tr.warning > td,.table > thead > tr.active > th{ background:var(--sk-head) !important; color:var(--sk-mut); } .table-hover > tbody > tr:hover > td,.table tbody > tr:hover > td{ background:var(--sk-brand-bg2) !important; } .pull-out{ overflow-x:auto; } /* ============================== 徽章 / 标签（胶囊） ============================== */ .label{ font-weight:600; font-size:91%; padding:.3em .75em; border-radius:20px; } .badge{ font-weight:600; border-radius:20px; background:var(--sk-mut); padding:3px 9px; } .label-success,.label.bg-success{ background:var(--sk-success-bg) !important; color:var(--sk-success) !important; } .label-danger,.label.bg-danger{ background:var(--sk-danger-bg) !important; color:var(--sk-danger) !important; } .label-warning,.label.bg-warning{ background:var(--sk-warn-bg) !important; color:var(--sk-warn) !important; } .label-info,.label.bg-info,.label-primary{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; } .label-default{ background:var(--sk-border-2) !important; color:var(--sk-mut) !important; } .badge.bg-success{ background:var(--sk-success) !important; color:#fff; } .badge.bg-danger{ background:var(--sk-danger) !important; color:#fff; } .badge.bg-primary,.badge.bg-info{ background:var(--sk-brand) !important; color:#fff; } .point.bg-danger{ background:var(--sk-danger) !important; } /* ============================== 提示框 alert · 现代（左强调条 + 柔底 + 语义色图标） ============================== */ .alert{ border:0 !important; border-radius:var(--sk-radius); padding:12px 16px; font-size:12px; line-height:1.6; } .alert b,.alert strong{ font-weight:600; font-size:12px; } .alert > i:first-child{ margin-right:5px; opacity:.95; } .alert b,.alert strong{ font-weight:600; } .alert-danger{ background:var(--sk-danger-bg); color:var(--sk-danger); } .alert-success{ background:var(--sk-success-bg); color:var(--sk-success); } .alert-warning{ background:var(--sk-warn-bg); color:var(--sk-warn); } .alert-info{ background:var(--sk-brand-bg); color:var(--sk-brand-d); } .alert .close{ opacity:.6; } /* ============================== 选项卡 / nav ============================== */ .nav-tabs{ border-bottom:1px solid var(--sk-border); } .nav-tabs > li > a{ color:var(--sk-mut); border:0; border-bottom:2px solid transparent; border-radius:0; margin-right:6px; padding:9px 4px; transition:all .15s; } .nav-tabs > li > a:hover{ background:transparent; border-bottom-color:var(--sk-border-3); color:var(--sk-ink); } .nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{ color:var(--sk-brand) !important; background:transparent; border:0; border-bottom:2px solid var(--sk-brand); } /* 含选项卡的 panel-heading：白底、去底边与下内边距，让下划线选项卡干净贴合（参考后台应用管理） */ .panel > .panel-heading:has(.nav-tabs){ background:var(--sk-card) !important; border-bottom:0 !important; padding:10px 18px 0 !important; } .panel-heading > .nav-tabs{ float:none !important; display:block; border-bottom:1px solid var(--sk-border) !important; margin:0 !important; padding:0; } .panel-heading > .nav-tabs > li{ float:left; } .panel-heading > .nav-tabs > li > a{ border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; background:transparent !important; color:var(--sk-mut) !important; margin:0 22px -1px 0 !important; padding:12px 2px !important; font-size:14px; } .panel-heading > .nav-tabs > li > a:hover{ color:var(--sk-ink) !important; border-bottom-color:var(--sk-border-3) !important; } .panel-heading > .nav-tabs > li.active > a{ color:var(--sk-brand) !important; border-bottom-color:var(--sk-brand) !important; font-weight:600; } .nav-pills > li > a{ border-radius:var(--sk-radius); color:var(--sk-ink-2); } .nav-pills > li.active > a,.nav-pills > li.active > a:hover{ background:var(--sk-brand) !important; color:#fff; } /* ============================== 分页 ============================== */ .pagination > li > a,.pagination > li > span{ color:var(--sk-ink-2); background:var(--sk-card); border:1px solid var(--sk-border-3); margin:0 3px; border-radius:var(--sk-radius) !important; min-width:34px; text-align:center; transition:all .15s; } .pagination > li > a:hover{ background:var(--sk-brand-bg2); border-color:var(--sk-brand); color:var(--sk-brand) !important; } .pagination > .active > a,.pagination > .active > span,.pagination > .active > a:hover{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; box-shadow:0 4px 12px var(--sk-glow); } .pagination > .disabled > a,.pagination > .disabled > span{ background:var(--sk-card-2); border-color:var(--sk-border); color:var(--sk-faint); } /* ============================== 下拉菜单 ============================== */ .dropdown-menu{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:14px; box-shadow:var(--sk-sh-lg); padding:6px; margin-top:6px; } /* 行内下拉展开时抬升层级，避免被分页/footer/相邻行盖住（简单类选择器，兼容老浏览器） */ .panel .btn-group.open,.panel .dropdown.open,.table-responsive .btn-group.open,.table-responsive .dropdown.open{ position:relative; z-index:1055 !important; } .panel .btn-group.open > .dropdown-menu,.table-responsive .btn-group.open > .dropdown-menu{ z-index:1056 !important; } .dropdown-menu > li > a{ color:var(--sk-ink-2); border-radius:var(--sk-radius-sm); padding:8px 12px; } .dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus, .dropdown-submenu:hover > a{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; } .dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus{ background:var(--sk-brand) !important; color:#fff !important; } .dropdown-menu > li > a:hover i{ color:var(--sk-brand-d); } .dropdown-menu > .active > a i{ color:#fff; } .dropdown-input{ border:1px solid var(--sk-border) !important; border-radius:14px !important; box-shadow:var(--sk-sh-lg) !important; background:var(--sk-card) !important; padding:6px !important; margin-top:6px; } .dropdown-input ul{ width:auto; } .dropdown-input li a{ color:var(--sk-ink-2) !important; height:34px; line-height:34px; padding:0 12px !important; border-radius:8px; transition:.12s; } .dropdown-input li:hover{ background:transparent !important; } .dropdown-input li:hover a,.dropdown-input li a:hover{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; } .dropdown-input li.active a,.dropdown-input li.hover a{ background:var(--sk-brand) !important; color:#fff !important; } .dropdown-menu .divider{ background:var(--sk-border); margin:6px 4px; } .dropdown-header,.dropdown-menu > li > span{ color:var(--sk-mut); } .dropdown-select li.active a,.dropdown-select li a:hover{ color:var(--sk-brand-d); } /* ============================== 弹窗 modal ============================== */ .modal-content{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); box-shadow:var(--sk-sh-lg); overflow:hidden; } .modal-header{ background:var(--sk-head); border-bottom:1px solid var(--sk-border); padding:15px 20px; } .modal-title{ color:var(--sk-ink); font-weight:600; } .modal-body{ padding:20px; } .modal-footer{ border-top:1px solid var(--sk-border); background:var(--sk-card); } .modal-backdrop{ background:#0b1220; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .modal-backdrop.in{ opacity:.52; } /* bootstrap.css 里 .tooltip 只有 z-index:1030，低于 modal(1050)，挂到 body 上会被弹窗盖住 —— 抬到弹窗之上 */ .tooltip{ z-index:1080; } .close{ color:var(--sk-mut); opacity:.7; text-shadow:none; } .close:hover{ color:var(--sk-ink); opacity:1; } /* ============================== 提示 tooltip / popover ============================== */ .tooltip-inner{ background:#171a2b; border-radius:var(--sk-radius-sm); padding:6px 11px; font-size:12px; } .popover{ border:1px solid var(--sk-border); border-radius:var(--sk-radius); box-shadow:var(--sk-sh-lg); background:var(--sk-card); } .popover-title{ background:var(--sk-head); border-bottom-color:var(--sk-border); color:var(--sk-ink); } .popover-content{ color:var(--sk-ink-2); } /* ============================== 其它通用 ============================== */ .breadcrumb{ background:transparent; padding:2px 0 14px; margin-bottom:0; color:var(--sk-mut); font-size:13px; } .breadcrumb > li{ color:var(--sk-mut); } .breadcrumb > li + li::before{ content:'\203a'; color:var(--sk-faint); padding:0 9px; } .breadcrumb > li > a{ color:var(--sk-ink-2); } .breadcrumb > li > a:hover{ color:var(--sk-brand) !important; } .breadcrumb > .active,.breadcrumb > li.active{ color:var(--sk-ink); font-weight:600; } .list-group-item{ background:var(--sk-card); border-color:var(--sk-border); color:var(--sk-ink-2); } a.list-group-item:hover,a.list-group-item:focus{ background:var(--sk-brand-bg2); } a.list-group-item.active{ background:var(--sk-brand-bg) !important; border-color:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; } .progress{ background:var(--sk-border-2); border-radius:20px; box-shadow:none; height:8px; } .progress-bar{ background:var(--sk-brand); } .filter-row .label{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; } /* ============================== 列表页内容区（#APPLIST，与后台一致） ============================== */ .panel-layout-list{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); overflow:visible !important; } #APPLIST > .panel-layout-list{ box-shadow:var(--sk-sh); } .panel-layout-list > .panel-heading{ background:var(--sk-card) !important; border-bottom:0 !important; padding:0 !important; } .panel-layout-list > :first-child, .panel-layout-list > .panel-heading{ border-top-left-radius:var(--sk-radius-lg) !important; border-top-right-radius:var(--sk-radius-lg) !important; } .panel-layout-list > :last-child, .panel-layout-list .panel-footer{ border-bottom-left-radius:var(--sk-radius-lg) !important; border-bottom-right-radius:var(--sk-radius-lg) !important; } #APPLIST > .clearfix:not(:has(.btn-group)),.main.padder > .clearfix:not(:has(.btn-group)){ display:none !important; } /* 工具栏（无下边线；搜索框在左、日期/操作在右） */ #APPLIST > .panel > form.form-inline, .panel > form.form-inline.m-b-none{ display:flex !important; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px !important; margin:0 !important; } #APPLIST > .panel > form.form-inline > .pull-right, .panel > form.form-inline.m-b-none > .pull-right{ float:none !important; } /* 搜索框（非 pull-right 的 input-group-search）靠左 */ #APPLIST > .panel > form.form-inline > .input-group-search:not(.pull-right), .panel > form.form-inline.m-b-none > .input-group-search:not(.pull-right){ order:1; } /* 日期/操作等 pull-right 靠右 */ #APPLIST > .panel > form.form-inline > .pull-right, .panel > form.form-inline.m-b-none > .pull-right{ order:2; } #APPLIST > .panel > form.form-inline > .pull-right:not(.pull-right ~ .pull-right), .panel > form.form-inline.m-b-none > .pull-right:not(.pull-right ~ .pull-right){ margin-left:auto !important; } #APPLIST > .panel > form.form-inline > .filter-row, .panel > form.form-inline.m-b-none > .filter-row{ order:3; flex-basis:100%; padding:0 !important; margin:6px 0 0 !important; } /* 独立控件（非输入组）统一高度/圆角 */ .panel .form-inline > .form-control,.panel .form-inline > select, .panel .form-inline .btn-small.btn-primary,.panel .form-inline .btn-small.btn-white{ height:36px !important; border-radius:var(--sk-radius) !important; display:inline-flex; align-items:center; margin:0 !important; } .form-inline .form-control{ height:36px; } /* 搜索框 & 输入组 · 统一单框圆角、内部无边分段、聚焦高亮 */ .panel .form-inline .input-group-search, .panel .form-inline .input-group:not(.input-group-search){ display:inline-flex !important; align-items:stretch; height:36px; margin:0 !important; padding:0 !important; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card); overflow:visible; vertical-align:middle; transition:border-color .15s,box-shadow .15s; } /* 下拉标签左上/左下切圆角，与外框贴合 */ .panel .form-inline .input-group-search > a.btn:first-child{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; } .panel .form-inline .input-group-search:focus-within, .panel .form-inline .input-group:not(.input-group-search):focus-within{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); } /* 搜索框内部（显式列出，避开 .dropdown-input 弹层，不产生多余竖线） */ .panel .form-inline .input-group-search > a.btn, .panel .form-inline .input-group-search > .form-control, .panel .form-inline .input-group-search > button{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; height:auto !important; margin:0 !important; align-self:stretch; display:inline-flex !important; align-items:center; } .panel .form-inline .input-group-search > a.btn{ padding:0 6px 0 12px; color:var(--sk-ink-2) !important; white-space:nowrap; } .panel .form-inline .input-group-search > a.btn .caret{ margin-left:6px; color:var(--sk-faint); } .panel .form-inline .input-group-search > .form-control{ padding:0 12px; min-width:130px; } .panel .form-inline .input-group-search > button{ padding:0 13px; color:var(--sk-mut) !important; } .panel .form-inline .input-group-search > button:hover{ color:var(--sk-brand) !important; } /* 嵌套输入组（如交易日期）：内部无边、相邻加细分隔线 */ .panel .form-inline .input-group:not(.input-group-search) > *{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; height:auto !important; margin:0 !important; align-self:stretch; display:inline-flex !important; align-items:center; } /* BS3 给 addon 设了 width:1%，flex 下会把标签压窄导致文字溢出重叠 → 改 auto */ .panel .form-inline .input-group:not(.input-group-search) > .input-group-addon{ width:auto !important; color:var(--sk-mut); padding:0 12px; white-space:nowrap; flex:0 0 auto; } .panel .form-inline .input-group:not(.input-group-search) > .form-control{ padding:0 12px; } /* select 不能用 flex（会塌缩重叠），恢复 inline-block，宽度按内容、收窄，留出原生箭头空间 */ .panel .form-inline .input-group:not(.input-group-search) > select{ display:inline-block !important; width:auto !important; flex:0 0 auto; padding:0 18px 0 10px !important; background-position:right 4px center; } /* 自动补全浮层：绝对定位到搜索框正下方，避免错位 */ .panel .form-inline .input-group-search{ position:relative; } .panel .form-inline .input-group-search > .dropdown-input{ position:absolute !important; top:calc(100% + 6px) !important; left:0 !important; right:auto !important; min-width:100%; margin:0 !important; z-index:1050; } /* 外层若只是包裹一个嵌套输入组（交易日期外层），不重复描边 */ .panel .form-inline .input-group-search:has(> .input-group){ border:0 !important; background:transparent !important; overflow:visible; height:auto; } /* 列表表格 */ .panel .table > thead > tr > th,.panel .table > thead > tr > td{ padding:11px 14px !important; font-size:12px !important; font-weight:600; color:var(--sk-mut) !important; background:var(--sk-head) !important; border-top:0 !important; border-right:0 !important; border-bottom:1px solid var(--sk-border) !important; white-space:nowrap; } .panel .table > tbody > tr > td{ padding:12px 14px !important; font-size:13px !important; color:var(--sk-ink-2); border-top:1px solid var(--sk-border-2) !important; vertical-align:middle; } .panel .table > tbody > tr:hover > td{ background:var(--sk-brand-bg2) !important; } .panel .table .btn.btn-mini,.panel .table .btn-group .btn-mini{ height:28px; line-height:1; padding:0 11px; border-radius:8px; font-size:12px; display:inline-flex; align-items:center; } .panel > .panel-footer{ background:var(--sk-card) !important; border-top:1px solid var(--sk-border); padding:10px 14px; } /* 列表底部批量操作栏：统一按钮尺寸/圆角/间距/悬停，消除大小不一与拥挤感 */ .main .panel-footer .form-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .main .panel-footer .form-inline .btn.btn-mini{ height:34px !important; line-height:1 !important; padding:0 14px !important; margin:0 !important; border-radius:var(--sk-radius) !important; font-size:13px !important; font-weight:500; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--sk-border-3) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; box-shadow:none !important; transition:border-color .15s,color .15s,background .15s; } .main .panel-footer .form-inline .btn.btn-mini:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; background:var(--sk-brand-bg2) !important; } .main .panel-footer .form-inline .btn.btn-mini > i{ font-size:14px; line-height:1; } /* ---------- 列表页表格 · 精修（.table-hover=列表表格；详情/表单表格不用它，不受影响） ---------- */ /* 表头：白底 + 清晰下边界 + 字距（去掉发闷的灰带，更现代） */ .main .table-hover > thead > tr > th,.main .table-hover > thead > tr > td{ padding:11px 16px !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.04em; color:var(--sk-mut) !important; background:transparent !important; border:0 !important; border-bottom:1.5px solid var(--sk-border) !important; } /* 行：适度留白 + 细分隔线 + 悬停高亮（去掉斑马条，更干净现代） */ .main .table-hover > tbody > tr > td{ padding:10px 16px !important; font-size:13px !important; color:var(--sk-ink-2); border-top:1px solid var(--sk-border-2) !important; vertical-align:middle; transition:background .12s; } .main .table-hover > tbody > tr:first-child > td{ border-top:0 !important; } .main .table-hover > tbody > tr:hover > td{ background:var(--sk-brand-bg2) !important; } /* 首个数据列（编号/名称）用主文字色（不加粗） */ .main .table-hover > tbody > tr > td:nth-child(2){ color:var(--sk-ink); } /* 右对齐数字（金额/状态列）用等宽数字 */ .main .table-hover td.text-right,.main .table-hover th.text-right{ font-variant-numeric:tabular-nums; } /* 勾选列居中收窄 + 品牌色复选框 */ .main .table-hover th:has(> input[type=checkbox]), .main .table-hover td:has(> input[type=checkbox]){ text-align:center; width:46px; padding-left:10px !important; padding-right:10px !important; } /* 自定义复选框：圆角方块，选中品牌底 + 白勾 */ .main .table-hover input[type=checkbox]{ -webkit-appearance:none; appearance:none; width:17px; height:17px; margin:0; border:1.5px solid var(--sk-border-3); border-radius:5px; background:var(--sk-card); cursor:pointer; vertical-align:middle; position:relative; transition:border-color .15s,background .15s; } .main .table-hover input[type=checkbox]:hover{ border-color:var(--sk-brand); } .main .table-hover input[type=checkbox]:checked{ background:var(--sk-brand); border-color:var(--sk-brand); } .main .table-hover input[type=checkbox]:checked::after{ content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } /* 行操作按钮 hover 品牌色 */ .main .table-hover .btn.btn-white:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; } /* 空状态 */ .main .table-hover td[colspan]{ color:var(--sk-mut); padding:34px 0 !important; } /* 列表通用点睛类：状态胶囊 / 支付标签 / 单号等宽 / 金额 */ .st-pill{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 10px; border-radius:20px; white-space:nowrap; } .st-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; } .st-pill.ok{ background:var(--sk-success-bg); color:var(--sk-success); } .st-pill.no{ background:var(--sk-card-2); color:var(--sk-mut); } .st-pill.wait{ background:var(--sk-warn-bg); color:var(--sk-warn); } .st-pill.err{ background:var(--sk-danger-bg); color:var(--sk-danger); } .pay-tag{ display:inline-block; font-size:11.5px; color:var(--sk-ink-2); background:var(--sk-card-2); border:1px solid var(--sk-border); border-radius:6px; padding:2px 9px; white-space:nowrap; } .pay-tag.muted{ color:var(--sk-mut); } .oid{ font-family:"SF Mono",Consolas,"Roboto Mono","Microsoft Yahei",monospace; font-size:12.5px; letter-spacing:.2px; color:var(--sk-ink); } .amt-cell{ font-weight:700; color:var(--sk-ink); font-variant-numeric:tabular-nums; } /* ============================== 会员仪表盘 · 专属组件 ============================== */ /* 欢迎横幅 */ .user-head-info{ display:flex !important; align-items:center; height:auto !important; line-height:1.4 !important; padding:22px 24px; margin-bottom:20px !important; background:linear-gradient(120deg,var(--sk-brand-d),var(--sk-brand) 55%,var(--sk-brand-l)); border-radius:var(--sk-radius-lg); color:#fff; box-shadow:0 12px 30px var(--sk-glow); position:relative; overflow:hidden; } .user-head-info::after{ content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.10); } .user-head-info::before{ content:''; position:absolute; right:80px; bottom:-90px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.07); } .user-head-info .user_avatar{ width:58px !important; height:58px !important; margin-right:16px !important; border-radius:50%; border:3px solid rgba(255,255,255,.35); box-shadow:0 6px 16px rgba(0,0,0,.18); flex-shrink:0; position:relative; z-index:1; } .user-head-info .text-muted{ color:rgba(255,255,255,.85) !important; font-size:14px; position:relative; z-index:1; } .user-head-info .user_name{ font-size:22px !important; font-weight:700; color:#fff !important; background:none !important; letter-spacing:-.3px; position:relative; z-index:1; } .user-head-info .user_icon{ position:relative; z-index:1; } .user-head-info .user_icon a{ color:rgba(255,255,255,.55) !important; width:auto !important; height:auto !important; } .user-head-info .user_icon a.text-primary{ color:#fff !important; } .user-head-info .user_icon a:hover{ color:#fff !important; } /* 已开通产品 · 磁贴 */ .member_product .item{ margin-bottom:12px; } .member_product .item a{ position:relative; display:block !important; padding:16px 16px 16px 62px !important; margin:0 !important; border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius) !important; background:var(--sk-card) !important; transition:border-color .16s,box-shadow .16s,transform .16s; } .member_product .item a:hover{ border-color:var(--sk-brand) !important; box-shadow:0 8px 20px var(--sk-glow); transform:translateY(-2px); } .member_product .item a i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:10px; display:flex !important; align-items:center; justify-content:center; font-size:19px !important; color:var(--sk-brand) !important; background:var(--sk-brand-bg) !important; } .member_product .item a:hover i{ color:#fff !important; background:linear-gradient(135deg,var(--sk-brand),var(--sk-brand-d)) !important; } .member_product .item h3{ font-size:14px !important; font-weight:600; color:var(--sk-ink) !important; margin:0 0 3px !important; } .member_product .item p{ font-size:12px !important; color:var(--sk-mut) !important; } /* 待办 / 列表 list_gray */ .list_gray .list-group-item{ background:var(--sk-card-2) !important; border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius) !important; margin-bottom:8px !important; color:var(--sk-ink-2) !important; padding:12px 14px; transition:.15s; } .list_gray .list-group-item:last-child{ margin-bottom:0 !important; } .list_gray .list-group-item:hover{ background:var(--sk-brand-bg2) !important; border-color:var(--sk-brand) !important; color:var(--sk-brand-d) !important; } .list_gray .list-group-item i{ color:var(--sk-brand); margin-right:6px; } .pends b{ color:var(--sk-danger) !important; } /* ============================== 配色 / 主题切换器（skinpro.js 注入） ============================== */ .sk-pop-wrap{ position:relative; display:flex !important; align-items:center; } .sk-pop-wrap > a.sk-tbtn{ display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:56px; color:var(--sk-ink-2) !important; cursor:pointer; } .sk-pop-wrap > a.sk-tbtn:hover{ color:var(--sk-brand) !important; } .sk-tbtn svg{ display:block; } .sk-pop{ position:fixed; top:58px; right:16px; width:234px; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:16px; box-shadow:var(--sk-sh-lg); padding:15px; z-index:3000; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.16s; } .sk-pop.open{ opacity:1; transform:translateY(0); pointer-events:auto; } .sk-pop .sk-h{ font-size:13px; font-weight:600; color:var(--sk-ink); margin-bottom:12px; } .sk-pop .sk-h i{ margin-right:7px; color:var(--sk-mut); } .sk-sw{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; justify-items:center; } .sk-sw button{ width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer; border:2px solid var(--sk-card); box-shadow:0 0 0 1px var(--sk-border); transition:.15s; position:relative; flex-shrink:0; } .sk-sw button:hover{ transform:scale(1.14); } .sk-sw button.on{ box-shadow:0 0 0 2px var(--sk-card),0 0 0 4px currentColor; } .sk-sw button.on::after{ content:'\2713'; font-weight:700; color:#fff; font-size:11px; line-height:1; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .sk-div{ height:1px; background:var(--sk-border); margin:14px 0 12px; } .sk-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--sk-ink-2); font-weight:500; } .sk-row > span i{ margin-right:7px; color:var(--sk-mut); } .sk-switch{ width:40px; height:23px; border-radius:20px; background:var(--sk-border-3); position:relative; cursor:pointer; transition:.15s; flex-shrink:0; } .sk-switch::after{ content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.15s; } .sk-switch.on{ background:var(--sk-brand); } .sk-switch.on::after{ left:20px; } /* ============================== 全局提示 toast（jQuery Toast） ============================== */ .jq-toast-wrap{ width:344px; max-width:92%; padding:0; } .jq-toast-single{ position:relative; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh-lg) !important; padding:14px 40px 14px 55px !important; margin:0 0 12px !important; font-size:13px !important; line-height:1.55; text-shadow:none !important; background-image:none !important; overflow:hidden; } .jq-toast-single.jq-icon-error,.jq-toast-single.jq-icon-success, .jq-toast-single.jq-icon-warning,.jq-toast-single.jq-icon-info{ background:var(--sk-card) !important; border-color:var(--sk-border) !important; } .jq-toast-single h2.jq-toast-heading{ color:var(--sk-ink) !important; font-weight:600 !important; font-size:14px !important; line-height:1.3 !important; margin:0 0 2px !important; border:0 !important; text-shadow:none !important; letter-spacing:0; } .jq-toast-single a{ color:var(--sk-brand) !important; } .jq-toast-single::before{ content:'i'; position:absolute; left:15px; top:15px; width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff !important; font-size:15px; font-weight:700; font-style:normal; line-height:1; background:var(--sk-mut); font-family:Georgia,'Times New Roman',serif; } .jq-toast-single.jq-icon-error::before{ content:'!'; background:var(--sk-danger); font-family:inherit; } .jq-toast-single.jq-icon-warning::before{ content:'!'; background:var(--sk-warn); font-family:inherit; } .jq-toast-single.jq-icon-success::before{ content:'\2713'; background:var(--sk-success); font-family:inherit; } .jq-toast-single.jq-icon-info::before{ content:'i'; background:var(--sk-brand); } .close-jq-toast-single{ color:var(--sk-mut) !important; opacity:.7; font-size:17px !important; font-weight:400 !important; top:12px !important; right:14px !important; text-shadow:none !important; transition:.15s; } .close-jq-toast-single:hover{ color:var(--sk-ink) !important; opacity:1; } .jq-toast-loader{ height:3px !important; top:0 !important; bottom:auto !important; left:0; border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0 !important; background:var(--sk-brand) !important; } .jq-toast-single.jq-icon-error .jq-toast-loader{ background:var(--sk-danger) !important; } .jq-toast-single.jq-icon-success .jq-toast-loader{ background:var(--sk-success) !important; } .jq-toast-single.jq-icon-warning .jq-toast-loader{ background:var(--sk-warn) !important; } .jq-toast-single.jq-icon-info .jq-toast-loader{ background:var(--sk-brand) !important; } /* ========================================================================= * 侧边栏固定深色（配置开关 data-sk-side="dark"） * 默认侧栏跟随明暗（浅色主题=浅色栏）；开启后侧栏始终深色，不随明暗。 * ========================================================================= */ html[data-sk-side="dark"]{ --sk-side-bg:var(--sk-rail); --sk-side-ink:var(--sk-rail-mut); --sk-side-grp:var(--sk-rail-faint); --sk-side-brand:#fff; --sk-side-bd:rgba(255,255,255,.07); } /* 深色侧栏上的悬停用半透明白覆盖（避免浅色品牌底在深栏上刺眼） */ html[data-sk-side="dark"] .nav-primary > ul > li > a:hover, html[data-sk-side="dark"] .nav-primary > ul > li > a:focus, html[data-sk-side="dark"] .nav-primary > ul > .dropdown-submenu:hover > a, html[data-sk-side="dark"] .nav-primary.bg-light > ul > li > a:hover{ background:rgba(255,255,255,.06) !important; color:#eef1f6 !important; } /* 深色侧栏选中：柔白底 + 白字 + 品牌色图标（去发光） */ html[data-sk-side="dark"] .nav-primary > ul > li.active > a, html[data-sk-side="dark"] .nav-primary > ul > li.active > a:hover, html[data-sk-side="dark"] .nav-primary > ul > li.active > a:focus, html[data-sk-side="dark"] .nav-primary.bg-light > ul > li.active > a{ background:rgba(255,255,255,.09) !important; color:#fff !important; box-shadow:none !important; } html[data-sk-side="dark"] .nav-primary > ul > li.active > a span, html[data-sk-side="dark"] .nav-primary > ul > li.active > a *{ color:#fff !important; } html[data-sk-side="dark"] .nav-primary > ul > li.active > a i{ color:var(--sk-brand-l) !important; } @media (max-width:991px){ html[data-sk-side="dark"] .nav-primary .dropdown-menu a:hover{ color:#fff !important; } } /* ========================================================================= * 会员中心 · 概览页组件（.mc-*）· 现代 / 高级 / 专业 * 全部走 --sk-* 变量，随调色盘 / 明暗 / 侧栏配置生效。 * ========================================================================= */ #MEMBER_DASH{ max-width:1280px; margin:0 auto; padding:24px 28px !important; } #MEMBER_DASH .mc-card{ background:var(--sk-card); border:1px solid var(--sk-card-bd); border-radius:var(--sk-radius-lg); box-shadow:none; } #MEMBER_DASH .mc-chd{ display:flex; align-items:center; height:52px; padding:0 20px; border-bottom:1px solid var(--sk-border-2); } #MEMBER_DASH .mc-chd h3{ font-size:14.5px; font-weight:700; color:var(--sk-ink); letter-spacing:-.2px; margin:0; } #MEMBER_DASH .mc-chd .mc-more{ margin-left:auto; font-size:12.5px; color:var(--sk-mut); display:inline-flex; align-items:center; gap:2px; } #MEMBER_DASH .mc-chd .mc-more:hover{ color:var(--sk-brand) !important; } #MEMBER_DASH .mc-cbody{ padding:6px 20px 12px; } /* 账户条 */ #MEMBER_DASH .mc-hero{ display:flex; align-items:center; gap:16px; padding:20px 22px; margin-bottom:16px; background:var(--sk-brand-bg2); background:linear-gradient(135deg, color-mix(in srgb, var(--sk-brand) 14%, var(--sk-card)) 0%, color-mix(in srgb, var(--sk-brand) 5%, var(--sk-card)) 55%, var(--sk-card) 100%); border-color:color-mix(in srgb, var(--sk-brand) 16%, var(--sk-card)); } #MEMBER_DASH .mc-hero .mc-ava{ width:52px; height:52px; border-radius:14px; object-fit:cover; flex-shrink:0; box-shadow:var(--sk-sh); } #MEMBER_DASH .mc-hero .mc-nm{ font-size:18px; font-weight:700; color:var(--sk-ink); letter-spacing:-.3px; } #MEMBER_DASH .mc-hero .mc-chips{ display:flex; gap:7px; margin-top:8px; flex-wrap:wrap; } #MEMBER_DASH .mc-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; padding:2px 9px; border-radius:6px; border:1px solid var(--sk-border); color:var(--sk-mut); background:var(--sk-card-2); } #MEMBER_DASH .mc-chip.ok{ color:var(--sk-success); border-color:transparent; background:var(--sk-success-bg); } #MEMBER_DASH .mc-hero .mc-sp{ flex:1; } /* KPI */ #MEMBER_DASH .mc-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } #MEMBER_DASH .mc-kpi{ background:var(--sk-card); border:1px solid var(--sk-card-bd); border-radius:var(--sk-radius-lg); box-shadow:none; padding:18px; transition:border-color .18s; } #MEMBER_DASH .mc-kpi:hover{ border-color:var(--sk-border-3); } #MEMBER_DASH .mc-kt{ display:flex; align-items:center; justify-content:space-between; } #MEMBER_DASH .mc-kl{ font-size:12.5px; color:var(--sk-mut); font-weight:500; } #MEMBER_DASH .mc-ki{ width:30px; height:30px; border-radius:9px; background:var(--sk-brand-bg); color:var(--sk-brand); display:flex; align-items:center; justify-content:center; font-size:15px; } #MEMBER_DASH .mc-kv{ font-size:28px; font-weight:750; color:var(--sk-ink); letter-spacing:-1px; margin-top:12px; line-height:1; font-variant-numeric:tabular-nums; } #MEMBER_DASH .mc-kv small{ font-size:15px; font-weight:600; color:var(--sk-mut); margin:0 1px; } #MEMBER_DASH .mc-kf{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:11.5px; color:var(--sk-mut); } #MEMBER_DASH .mc-delta{ display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:6px; } #MEMBER_DASH .mc-delta.dn{ color:var(--sk-success); background:var(--sk-success-bg); } #MEMBER_DASH .mc-delta.up{ color:var(--sk-danger); background:var(--sk-danger-bg); } #MEMBER_DASH .mc-grid{ display:grid; grid-template-columns:1fr 300px; gap:16px; margin-top:16px; } #MEMBER_DASH .mc-stack{ display:flex; flex-direction:column; gap:16px; } @media (max-width:1100px){ #MEMBER_DASH .mc-kpis{ grid-template-columns:repeat(2,1fr); } #MEMBER_DASH .mc-grid{ grid-template-columns:1fr; } } @media (max-width:600px){ #MEMBER_DASH .mc-kpis{ grid-template-columns:1fr; } } /* 移动端自适应：欢迎卡换行堆叠、去弹簧、按钮平铺一行；整体收窄内边距 */ @media (max-width:640px){ #MEMBER_DASH{ padding:14px 12px !important; } #MEMBER_DASH .mc-hero{ flex-wrap:wrap; gap:12px; padding:16px !important; } #MEMBER_DASH .mc-hero > div{ flex:1 1 auto; min-width:0; } #MEMBER_DASH .mc-hero .mc-nm{ font-size:16px; } #MEMBER_DASH .mc-hero .mc-sp{ display:none; } #MEMBER_DASH .mc-hero .btn{ flex:1 1 40%; text-align:center; justify-content:center; } #MEMBER_DASH .mc-chd{ padding:0 14px; } #MEMBER_DASH .mc-cbody{ padding:6px 14px 12px; } /* 顶栏面包屑：移动端只保留当前页，隐藏站点名 + 分隔符 */ .navbar-title .sk-crumb .sk-site,.navbar-title .sk-crumb .sk-sep{ display:none !important; } } /* 汉堡菜单(.nav-toggle position:absolute;left:0)显示时，面包屑右移让位，避免与其重叠 */ @media (max-width:1199px){ #header .navbar-nav.navbar-title.pull-left{ padding-left:52px !important; } } /* 资源表 */ #MEMBER_DASH .mc-restb{ width:100%; border-collapse:collapse; } #MEMBER_DASH .mc-restb th{ text-align:left; font-size:11.5px; font-weight:600; color:var(--sk-mut); text-transform:uppercase; letter-spacing:.04em; padding:11px 20px; border-bottom:1px solid var(--sk-border-2); } #MEMBER_DASH .mc-restb td{ padding:12px 20px; border-bottom:1px solid var(--sk-border-2); font-size:13px; color:var(--sk-ink-2); vertical-align:middle; } #MEMBER_DASH .mc-restb tbody tr:last-child td{ border-bottom:0; } #MEMBER_DASH .mc-restb tbody tr:hover td{ background:var(--sk-brand-bg2); } #MEMBER_DASH .mc-pn{ display:flex; align-items:center; gap:11px; } #MEMBER_DASH .mc-pn .mc-pic{ width:34px; height:34px; border-radius:9px; background:var(--sk-brand-bg); color:var(--sk-brand); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; } #MEMBER_DASH .mc-pn b{ color:var(--sk-ink); font-weight:600; font-size:13.5px; display:block; } #MEMBER_DASH .mc-pn span{ color:var(--sk-mut); font-size:11.5px; } #MEMBER_DASH .mc-n{ font-weight:700; color:var(--sk-ink); font-size:14px; font-variant-numeric:tabular-nums; } #MEMBER_DASH .mc-n.z{ color:var(--sk-faint); font-weight:600; } #MEMBER_DASH .mc-pill{ display:inline-flex; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; } #MEMBER_DASH .mc-pill.w{ background:var(--sk-warn-bg); color:var(--sk-warn); } #MEMBER_DASH .mc-pill.z{ background:var(--sk-card-2); color:var(--sk-faint); } #MEMBER_DASH a.mc-mng{ height:30px; line-height:28px; padding:0 13px; border-radius:8px; border:1px solid var(--sk-border-3); background:var(--sk-card); color:var(--sk-ink-2); font-size:12.5px; font-weight:600; display:inline-block; } #MEMBER_DASH a.mc-mng:hover{ border-color:var(--sk-brand); color:var(--sk-brand) !important; } /* 列表（待办 / 公告） */ #MEMBER_DASH .mc-li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--sk-border-2); font-size:13px; color:var(--sk-ink-2); } #MEMBER_DASH .mc-li:last-child{ border-bottom:0; } #MEMBER_DASH .mc-li .mc-ico{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; } #MEMBER_DASH .mc-li .mc-ico.w{ background:var(--sk-warn-bg); color:var(--sk-warn); } #MEMBER_DASH .mc-li .mc-ico.b{ background:var(--sk-brand-bg); color:var(--sk-brand); } #MEMBER_DASH .mc-li .mc-ico.g{ background:var(--sk-success-bg); color:var(--sk-success); } #MEMBER_DASH .mc-li .mc-tx{ line-height:1.4; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sk-ink-2); } #MEMBER_DASH .mc-li .mc-tx b{ color:var(--sk-ink); font-weight:600; } #MEMBER_DASH .mc-li a.mc-tx:hover{ color:var(--sk-brand) !important; } #MEMBER_DASH .mc-li .mc-go{ margin-left:auto; font-size:12.5px; color:var(--sk-brand) !important; font-weight:600; white-space:nowrap; } #MEMBER_DASH .mc-li .mc-t2{ margin-left:auto; color:var(--sk-mut); font-size:12px; white-space:nowrap; } #MEMBER_DASH .mc-empty{ text-align:center; color:var(--sk-mut); padding:26px 0; font-size:13px; } #MEMBER_DASH .mc-chart{ width:100%; height:200px; } /* 我的资源 · 左色条卡（2 列） */ #MEMBER_DASH .mc-resgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 20px; } @media (max-width:1100px){ #MEMBER_DASH .mc-resgrid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ #MEMBER_DASH .mc-resgrid{ grid-template-columns:1fr; } } /* 我的资源卡片 · D方案（紧凑列表：无图标块/无左色条，名称前小图标，两行布局） */ #MEMBER_DASH .mc-res{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--sk-border); border-radius:var(--sk-radius); padding:13px 15px; background:var(--sk-card); transition:border-color .16s; } #MEMBER_DASH .mc-res:hover{ border-color:var(--sk-brand); } #MEMBER_DASH .mc-res-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #MEMBER_DASH .mc-res-nm{ display:flex; align-items:center; gap:7px; min-width:0; font-size:14px; font-weight:600; color:var(--sk-ink); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #MEMBER_DASH .mc-res-nm i{ color:var(--sk-brand); font-size:15px; flex-shrink:0; } #MEMBER_DASH .mc-res:hover .mc-res-nm i{ color:var(--sk-brand-d); } #MEMBER_DASH .mc-res-v{ flex-shrink:0; font-size:20px; font-weight:750; color:var(--sk-ink); line-height:1; font-variant-numeric:tabular-nums; } #MEMBER_DASH .mc-res-v.z{ color:var(--sk-faint); font-weight:600; } #MEMBER_DASH .mc-res-bot{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #MEMBER_DASH .mc-res-desc{ min-width:0; flex:1; font-size:12px; color:var(--sk-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #MEMBER_DASH .mc-res-e{ flex-shrink:0; font-size:11.5px; color:var(--sk-warn); font-weight:600; } #MEMBER_DASH .mc-res-e.z{ color:var(--sk-faint); font-weight:500; } /* 公告表格（pjax 载入）在概览卡片内的收敛样式 */ #MEMBER_DASH #notice_body .dash_notice{ width:100% !important; margin:0 !important; table-layout:fixed; } #MEMBER_DASH #notice_body .dash_notice td{ border:0 !important; border-bottom:1px solid var(--sk-border-2) !important; padding:0 !important; } #MEMBER_DASH #notice_body .dash_notice tr:last-child td{ border-bottom:0 !important; } #MEMBER_DASH #notice_body .dash_notice a{ color:var(--sk-ink-2); } #MEMBER_DASH #notice_body .dash_notice a:hover{ color:var(--sk-brand) !important; } #MEMBER_DASH #notice_body .badge{ font-size:10.5px; font-weight:600; flex-shrink:0; } /* 公告：单行——标题(超出省略号，撑满) + 未读徽章 + 日期靠右固定；悬停=左右对称内缩的圆角高亮 */ #MEMBER_DASH #notice_body .dash_notice .dn-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 12px; margin:0 -12px; border-radius:9px; transition:background .12s; } #MEMBER_DASH #notice_body .dash_notice tr:hover .dn-row{ background:var(--sk-brand-bg2); } #MEMBER_DASH #notice_body .dash_notice .dn-link{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #MEMBER_DASH #notice_body .dash_notice .dn-meta{ display:flex; align-items:center; gap:6px; white-space:nowrap; } #MEMBER_DASH #notice_body .dash_notice .dn-dot{ width:7px; height:7px; border-radius:50%; background:var(--sk-danger); flex-shrink:0; } #MEMBER_DASH #notice_body .dash_notice .dn-d{ font-size:11.5px; color:var(--sk-faint); font-variant-numeric:tabular-nums; } /* ============================== layui layer 弹层 · 主题化 ============================== */ .layui-layer{ border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh-lg) !important; background:var(--sk-card) !important; border:1px solid var(--sk-border) !important; color:var(--sk-ink-2); font-family:inherit; } .layui-layer-title{ background:var(--sk-card) !important; color:var(--sk-ink) !important; border-bottom:1px solid var(--sk-border) !important; height:52px !important; line-height:52px !important; padding:0 22px !important; font-size:15px !important; font-weight:700 !important; border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0 !important; } .layui-layer-content{ color:var(--sk-ink-2) !important; } .layui-layer-dialog .layui-layer-content{ padding:22px 24px !important; font-size:14px !important; line-height:1.75 !important; } .layui-layer-page .layui-layer-content{ color:var(--sk-ink-2); } /* 关闭按钮：重绘为主题色 × */ .layui-layer-setwin{ top:16px !important; right:16px !important; } .layui-layer-setwin .layui-layer-close1,.layui-layer-setwin .layui-layer-close2{ background:none !important; width:26px !important; height:26px !important; border-radius:8px; position:relative; transition:background .15s,color .15s; color:var(--sk-mut); } .layui-layer-setwin .layui-layer-close1::before,.layui-layer-setwin .layui-layer-close2::before, .layui-layer-setwin .layui-layer-close1::after,.layui-layer-setwin .layui-layer-close2::after{ content:''; position:absolute; left:50%; top:50%; width:13px; height:1.6px; background:currentColor; border-radius:2px; } .layui-layer-setwin .layui-layer-close1::before,.layui-layer-setwin .layui-layer-close2::before{ transform:translate(-50%,-50%) rotate(45deg); } .layui-layer-setwin .layui-layer-close1::after,.layui-layer-setwin .layui-layer-close2::after{ transform:translate(-50%,-50%) rotate(-45deg); } .layui-layer-setwin .layui-layer-close1:hover,.layui-layer-setwin .layui-layer-close2:hover{ background:var(--sk-card-2); color:var(--sk-brand); } .layui-layer-setwin .layui-layer-close2{ right:-28px; top:-28px; color:#fff; } /* 按钮区 */ .layui-layer-btn{ padding:4px 22px 20px !important; border-top:0 !important; text-align:right !important; } .layui-layer-btn a{ display:inline-flex !important; align-items:center; justify-content:center; height:36px !important; line-height:1 !important; padding:0 18px !important; margin:0 0 0 10px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; font-size:13px !important; font-weight:600; transition:all .15s; } .layui-layer-btn a:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; background:var(--sk-card-2) !important; } .layui-layer-btn .layui-layer-btn0{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; } .layui-layer-btn .layui-layer-btn0:hover{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; color:#fff !important; } /* 输入/prompt 层 */ .layui-layer-prompt .layui-layer-input{ background:var(--sk-card) !important; border:1px solid var(--sk-border-3) !important; color:var(--sk-ink) !important; border-radius:var(--sk-radius) !important; } .layui-layer-prompt .layui-layer-input:focus{ border-color:var(--sk-brand) !important; box-shadow:0 0 0 3px var(--sk-ring) !important; } /* 加载提示(layer.msg icon:16)：干净盒子 + 主题色 CSS spinner，替换默认转圈图标 */ .layui-layer-msg{ border-radius:14px !important; } .layui-layer-msg .layui-layer-content{ padding:15px 22px 15px 48px !important; font-size:14px !important; color:var(--sk-ink) !important; line-height:1.5 !important; } .layui-layer-msg .layui-layer-content .layui-layer-ico16{ background:none !important; width:18px !important; height:18px !important; left:20px !important; top:50% !important; margin-top:-9px !important; border:2px solid var(--sk-border-3) !important; border-top-color:var(--sk-brand) !important; border-radius:50% !important; box-sizing:border-box; animation:sk-loadspin .7s linear infinite; } /* 成功提示图标（icon:1）：自定义 SVG 绿色勾，替代未加载的精灵图 */ .layui-layer-msg .layui-layer-content .layui-layer-ico1{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2316a06a'/%3E%3Cpath d='M7 12.4l3.4 3.4L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center !important; background-size:contain !important; width:19px !important; height:19px !important; left:20px !important; top:50% !important; margin-top:-9.5px !important; } @keyframes sk-loadspin{ to{ transform:rotate(360deg); } } /* loading 遮罩层保持默认；tips 小气泡背景 */ .layui-layer-tips .layui-layer-content{ background:var(--sk-rail) !important; color:#fff !important; border-radius:var(--sk-radius-sm) !important; box-shadow:var(--sk-sh-md) !important; } /* ============================== jquery-confirm 弹层 · 主题化 ============================== */ .jconfirm .jconfirm-box{ border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh-lg) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; padding:0 !important; } .jconfirm .jconfirm-box .jconfirm-title-c{ padding:15px 22px !important; margin:0 !important; border-bottom:1px solid var(--sk-border) !important; background:var(--sk-card) !important; border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0 !important; } .jconfirm .jconfirm-box .jconfirm-title{ color:var(--sk-ink) !important; font-size:15px !important; font-weight:700 !important; } .jconfirm .jconfirm-box .jconfirm-content-pane{ margin:0 !important; } .jconfirm .jconfirm-box .jconfirm-content{ color:var(--sk-ink-2) !important; padding:22px 24px !important; font-size:14px; line-height:1.7; } .jconfirm .jconfirm-box div.jconfirm-buttons{ padding:4px 22px 20px !important; margin:0 !important; text-align:right !important; float:none !important; border-top:0 !important; } .jconfirm .jconfirm-box .jconfirm-buttons button{ display:inline-flex !important; align-items:center; justify-content:center; height:36px !important; line-height:1 !important; padding:0 18px !important; margin:0 0 0 10px !important; border-radius:var(--sk-radius) !important; font-size:13px !important; font-weight:600 !important; } /* 关闭 X · 保留原生图标，只做主题上色/定位 */ .jconfirm .jconfirm-box .jconfirm-closeIcon{ top:10px !important; right:14px !important; color:var(--sk-mut) !important; opacity:1 !important; font-size:20px !important; line-height:1 !important; transition:color .15s; } .jconfirm .jconfirm-box .jconfirm-closeIcon:hover{ color:var(--sk-brand) !important; } /* ============================== 购买 / 选购页（.purchase）· 主题化（仅调样式，不动结构） ============================== */ .purchase .wrap{ background:var(--sk-card) !important; border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); box-shadow:var(--sk-sh); margin-bottom:16px; padding:18px 24px; } .purchase .wrap .wrap-heading{ color:var(--sk-ink); font-size:15px; } .purchase .wrap .wrap-heading:before{ background:var(--sk-brand); } /* 说明提示 · 浅底信息条 + 图标 */ .purchase .rule-desc{ position:relative; background:transparent !important; border:0 !important; border-radius:0 !important; padding:3px 0 3px 20px !important; margin-top:6px !important; color:var(--sk-mut) !important; font-size:12px; line-height:1.55; } .purchase .rule-desc + .rule-desc{ margin-top:1px !important; } .purchase .rule-desc::before{ content:''; position:absolute; left:1px; top:4px; width:14px; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/14px 14px; } .purchase .rule-desc .text-black,.purchase .rule-desc .text-danger{ color:var(--sk-ink-2) !important; font-weight:600; } /* 售罄等 badge · 统一 inline 灰胶囊（同地域按钮，不再浮上方角标） */ .purchase .rule-list .rule-item .badge{ position:static !important; top:auto !important; right:auto !important; margin-left:6px !important; background:var(--sk-danger-bg) !important; color:var(--sk-danger) !important; font-weight:600; font-size:10.5px; padding:1px 8px !important; border-radius:9px; vertical-align:middle; } .purchase .wrap-rule-name{ color:var(--sk-ink-2); } /* 选项按钮 rule-item：独立圆角 + 主题色 */ .purchase .rule-list .rule-item{ margin:5px 8px 5px 0 !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; height:36px; line-height:34px; transition:border-color .15s,color .15s,background .15s; } .purchase .rule-list .rule-item:first-child,.purchase .rule-list .rule-item:last-of-type{ border-radius:var(--sk-radius) !important; } .purchase .rule-list .rule-item:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; } .purchase .rule-list .rule-item.active{ background:var(--sk-brand-bg2) !important; border-color:var(--sk-brand) !important; color:var(--sk-brand-d) !important; box-shadow:inset 0 0 0 1px var(--sk-brand); font-weight:600; z-index:2; position:relative; } .purchase .rule-list .rule-item.active::after{ content:'\2713'; position:absolute; right:0; bottom:0; width:16px; height:16px; line-height:16px; text-align:center; font-size:9px; font-weight:700; color:#fff; background:var(--sk-brand); border-radius:8px 0 var(--sk-radius) 0; } .purchase .rule-list .rule-item.disabled{ background:var(--sk-card-2) !important; color:var(--sk-faint) !important; border-color:var(--sk-border-2) !important; } /* 地域按钮（含国旗）· 可换行 + 统一高度 + 国旗/名称/国家整齐 */ .purchase .btn-group-country:not(:has(.dropdown-menu)){ display:flex !important; flex-wrap:wrap; gap:10px; } .purchase .btn-group-country:has(.dropdown-menu){ display:inline-block !important; vertical-align:top; margin:0 10px 10px 0 !important; } .purchase .btn-group-country .rule-item{ border-radius:var(--sk-radius) !important; height:auto !important; min-height:50px; line-height:1.3 !important; display:flex !important; flex-wrap:wrap; align-items:center; padding:7px 16px !important; margin:0 !important; } .purchase .btn-group-country .rule-item br{ display:none !important; } .purchase .btn-group-country .rule-item .flag-icon{ float:none !important; margin:0 8px 0 0 !important; } .purchase .btn-group-country .rule-item .small,.purchase .btn-group-country .rule-item .text-small{ flex-basis:100%; width:100%; margin:2px 0 0 !important; padding:0 !important; color:var(--sk-mut) !important; font-size:11px; line-height:1.2; } .purchase .btn-group-country .rule-item.active .small{ color:var(--sk-mut) !important; } .purchase .btn-group-country .rule-item .badge{ position:static !important; top:auto !important; right:auto !important; margin-left:6px; } /* 地域按钮 · 方案3 单行胶囊（国家做浅标签；选中态沿用统一浅底+品牌字+边框+勾，不用色底） */ .purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item{ height:42px !important; min-height:0 !important; line-height:1 !important; flex-wrap:nowrap !important; gap:8px; padding:0 16px !important; border-radius:var(--sk-radius) !important; } .purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item .flag-icon{ margin:0 !important; width:18px !important; height:13px !important; box-shadow:0 1px 2px rgba(0,0,0,.12) !important; } .purchase .rule-list .rule-item .badge:after{ display:none !important; } .purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item .small{ flex-basis:auto !important; width:auto !important; margin:0 !important; padding:1px 7px !important; background:var(--sk-head); border-radius:8px; font-size:11px; color:var(--sk-mut) !important; line-height:1.5; } .purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item.active .small{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; } /* 实例类型 · 两级联动（方案A）：类型行 + 版本行 */ .purchase .rule-list.os-type-row .rule-item.os-type{ display:inline-flex !important; align-items:center; gap:9px; vertical-align:top; height:auto !important; min-height:44px; line-height:1.2 !important; padding:8px 18px !important; font-weight:600; } .purchase .rule-list.os-type-row .rule-item.os-type img,.purchase .rule-list.os-type-row .rule-item.os-type > i{ flex:0 0 auto; font-size:16px; } .purchase .rule-list.os-ver-row{ margin-top:12px !important; padding-top:14px !important; border-top:1px dashed var(--sk-border-2); } .purchase .rule-list.os-ver-row .rule-item.os-ver{ height:auto !important; min-height:0 !important; line-height:1.4 !important; padding:7px 15px !important; border-radius:18px !important; font-size:13px; font-weight:500; } .purchase .rule-list.os-ver-row .rule-item.os-ver.active{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; box-shadow:inset 0 0 0 1px var(--sk-brand) !important; } .purchase .rule-list.os-ver-row .rule-item.os-ver.active::after{ display:none !important; } /* 选择规格 · 过滤表单（独立一行 · 全部输入框同排固定宽 · 统一圆角+34px 高） */ .purchase .spec-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .purchase .spec-filter .spec-ctrl{ height:34px !important; line-height:34px !important; width:150px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; font-size:13px; color:var(--sk-ink) !important; background:var(--sk-card) !important; margin:0 !important; } .purchase .spec-filter select.spec-ctrl{ padding:0 30px 0 12px !important; cursor:pointer; } .purchase .spec-filter .spec-ctrl:hover,.purchase .spec-filter .spec-ctrl:focus{ border-color:var(--sk-brand) !important; } .purchase .spec-filter .spec-search{ display:flex; } .purchase .spec-filter .spec-search .spec-ctrl{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; border-right:0 !important; padding:0 12px !important; } .purchase .spec-filter .spec-search-btn{ height:34px !important; padding:0 15px !important; border:1px solid var(--sk-border-3) !important; border-left:0 !important; border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; background:var(--sk-head) !important; color:var(--sk-mut) !important; box-shadow:none !important; } .purchase .spec-filter .spec-search-btn:hover{ color:var(--sk-brand) !important; background:var(--sk-head) !important; } /* 套餐卡 rule-card */ .purchase .rule-list .rule-card{ border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius-lg) !important; background:var(--sk-card) !important; color:var(--sk-ink) !important; width:340px; transition:border-color .18s,box-shadow .18s,transform .18s; } .purchase .rule-list .rule-card.active,.purchase .rule-list .rule-card:hover{ border-color:var(--sk-brand) !important; box-shadow:var(--sk-sh-md) !important; transform:translateY(-2px); } .purchase .rule-list .rule-card label{ color:var(--sk-ink); font-weight:600; } .purchase .rule-list .rule-card.active label,.purchase .rule-list .rule-card:hover label{ color:var(--sk-brand) !important; } .purchase .rule-list .rule-card label:after{ background:var(--sk-brand); } .purchase .rule-list .rule-card .desc{ color:var(--sk-mut); } .purchase .rule-list .rule-card .icon-bg{ border-top-color:var(--sk-brand) !important; } /* 一键购买套餐卡 · C 风格（标题左对齐 + 配置 key-value 两端 + 分隔线） */ .purchase .rule-list .rule-card{ width:256px !important; padding-bottom:12px; } .purchase .rule-list .rule-card label{ text-align:left !important; height:auto !important; line-height:1.3 !important; padding:14px 16px 3px !important; font-size:15px !important; cursor:pointer; } .purchase .rule-list .rule-card label:after{ display:none !important; } .purchase .rule-list .rule-card .desc{ text-align:left !important; padding:0 16px 10px !important; color:var(--sk-mut) !important; font-size:11.5px; } .purchase .rule-list .rule-card ul{ text-align:left !important; padding:7px 16px 0 !important; border-top:1px solid var(--sk-border); } .purchase .rule-list .rule-card ul li{ display:flex !important; justify-content:space-between; align-items:center; padding:4px 0 !important; font-size:12.5px; border-bottom:1px dashed var(--sk-border-2); } .purchase .rule-list .rule-card ul li:last-child{ border-bottom:0; } .purchase .rule-list .rule-card ul li .text-muted{ color:var(--sk-mut) !important; } /* 套餐卡等高：描述恒为一行（无简介给默认文案，超长省略号），卡片自然齐平 */ .purchase .rule-list:has(.rule-card){ display:flex; flex-wrap:wrap; align-items:stretch; margin:0 !important; padding:2px 16px 6px 0 !important; } .purchase .rule-list .rule-card{ float:none !important; margin:0 14px 14px 0 !important; } .purchase .rule-list .rule-card .desc{ white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; } /* 输入框 input-group 主题化（NAT转发/防御峰值/实例用户密码等） */ .purchase .rule-input .form-control,.purchase .input-box .form-control{ border-color:var(--sk-border-3) !important; box-shadow:none !important; } .purchase .rule-input .form-control:hover,.purchase .rule-input .form-control:focus,.purchase .input-box .form-control:hover,.purchase .input-box .form-control:focus{ border-color:var(--sk-brand) !important; } .purchase .rule-input .input-group-addon,.purchase .input-box .input-group-addon{ background:var(--sk-head) !important; border-color:var(--sk-border-3) !important; color:var(--sk-ink-2) !important; } .purchase .rule-input .input-group > .form-control:first-child,.purchase .input-box .input-group > .form-control:first-child{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; } .purchase .rule-input > .form-control{ border-radius:var(--sk-radius) !important; } /* 实例用户 · 自定义密码表单（图标addon在左 + 随机生成按钮收尾） */ .purchase .rule-input:not(.input-box) .form-control{ height:36px !important; } .purchase .rule-input:not(.input-box) textarea.form-control{ height:76px !important; padding:8px 12px !important; line-height:1.6 !important; resize:vertical; } .purchase .rule-input:not(.input-box) .input-group-addon{ height:36px !important; } .purchase .rule-input:not(.input-box) .input-group-btn .btn{ height:36px !important; line-height:36px !important; padding-top:0 !important; padding-bottom:0 !important; } .purchase .rule-input .input-group-addon:first-child{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; border-right:0 !important; } .purchase .rule-input .input-group-addon:first-child i{ color:var(--sk-mut); font-size:15px; } .purchase .rule-input .input-group > .form-control:last-child{ border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; } .purchase .rule-input .input-group > .form-control:not(:first-child):not(:last-child){ border-radius:0 !important; } .purchase .rule-input .form-control[disabled]{ background:var(--sk-head) !important; color:var(--sk-ink-2) !important; cursor:default; } .purchase .rule-input .input-group-btn .btn-primary{ background:var(--sk-brand) !important; border:1px solid var(--sk-brand) !important; color:#fff !important; font-weight:600; } .purchase .rule-input .input-group-btn .btn-primary:hover{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; } /* 行级垂直居中（vhost 每月流量/连接数=无限制时，标签与胶囊中线对齐，清掉滑块补位内边距） */ .purchase .wrap-item.row-center{ display:flex; align-items:center; } .purchase .wrap-item.row-center .wrap-rule-name{ float:none !important; width:90px; flex-shrink:0; padding:0 !important; } .purchase .wrap-item.row-center .wrap-rule-body{ float:none !important; flex:1; min-width:0; padding-left:20px !important; } .purchase .wrap-item.row-center .rule-item{ margin-top:0 !important; margin-bottom:0 !important; } /* 固定配置（不可选）· 灰底锁定态。可点项=a.rule-item(天然排除)；售罄/占位=.disabled 类(排除，保留红角标) */ .purchase .rule-list span.rule-item:not(.disabled){ background:var(--sk-head) !important; border:1px solid var(--sk-border-2) !important; box-shadow:none !important; color:var(--sk-ink-2) !important; font-weight:600; cursor:default; } .purchase .rule-list span.rule-item:not(.disabled)::after{ display:none !important; } .purchase .rule-list span.rule-item:not(.disabled)::before{ content:''; display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center/12px 12px; } .purchase .rule-input .input-group-addon:last-child,.purchase .input-box .input-group-addon:last-child{ border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; } .purchase .rule-input .input-group-btn:last-child .btn{ border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; } /* 购买数量步进器 · 主题化（单位「台」透明融入 + 步进箭头去旧蓝 #00aaff hover） */ .purchase .input-box .input-addon-txt{ background:transparent !important; border-left:0 !important; color:var(--sk-mut) !important; padding-left:4px !important; padding-right:8px !important; } .purchase .input-box .btn-updown{ background:var(--sk-head) !important; border-color:var(--sk-border-3) !important; padding:0 !important; border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; overflow:hidden; } .purchase .input-box .btn-updown .spinner-up,.purchase .input-box .btn-updown .spinner-down{ color:var(--sk-mut) !important; transition:color .15s,background .15s; } .purchase .input-box .btn-updown .spinner-down{ border-top:1px solid var(--sk-border-3); } .purchase .input-box .btn-updown a:hover{ color:var(--sk-brand) !important; background:var(--sk-brand-bg2) !important; } /* ============================== layer 加载图标 · 统一标准 spinner ============================== */ .layui-layer-loading{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:50% !important; } .layui-layer-loading .layui-layer-content{ width:46px !important; height:46px !important; padding:0 !important; background:none !important; display:flex !important; align-items:center; justify-content:center; } .layui-layer-loading .layui-layer-content::before{ content:''; width:32px; height:32px; border:3px solid var(--sk-ring); border-top-color:var(--sk-brand); border-radius:50%; animation:sk-spin .7s linear infinite; } @keyframes sk-spin{ to{ transform:rotate(360deg); } } /* 购买按钮加载态（无全局遮罩，仅按钮禁用+加载中提示） */ .purchase .btn_buy.is-loading{ cursor:default !important; opacity:.85; pointer-events:none; } .purchase .btn_buy.is-loading .pl-mini{ display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-1px; border:2px solid rgba(120,120,140,.35); border-top-color:var(--sk-brand); border-radius:50%; animation:sk-spin .7s linear infinite; } /* 购买页顶部主切换（一键购买 / 自定义购买）· 方案4 图标卡+副标题 */ .purchase > .nav-tabs{ display:inline-flex !important; background:transparent !important; border:0 !important; padding:0 !important; margin:2px 0 16px !important; } .purchase > .nav-tabs > li{ margin:0 12px 0 0 !important; float:none !important; border:0 !important; } .purchase > .nav-tabs > li > a{ display:flex !important; align-items:center; gap:12px; padding:11px 20px !important; margin:0 !important; border:1.5px solid var(--sk-border-3) !important; border-radius:var(--sk-radius-lg) !important; background:var(--sk-card) !important; cursor:pointer; transition:all .18s; } .purchase > .nav-tabs > li > a:hover{ border-color:var(--sk-brand) !important; background:var(--sk-card) !important; } .purchase > .nav-tabs > li > a .tb-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--sk-head); color:var(--sk-mut); flex-shrink:0; transition:.18s; } .purchase > .nav-tabs > li > a .tb-ic i{ font-size:17px; margin:0 !important; color:inherit !important; } .purchase > .nav-tabs > li > a .tb-tx{ display:flex; flex-direction:column; line-height:1.3; text-align:left; } .purchase > .nav-tabs > li > a .tb-tt{ font-weight:600; font-size:14px; color:var(--sk-ink); } .purchase > .nav-tabs > li > a .tb-st{ font-size:11.5px; color:var(--sk-mut); font-weight:400; } .purchase > .nav-tabs > li.active > a,.purchase > .nav-tabs > li.active > a:hover,.purchase > .nav-tabs > li.active > a:focus{ border-color:var(--sk-brand) !important; background:var(--sk-brand-bg2) !important; box-shadow:none !important; } .purchase > .nav-tabs > li.active > a .tb-ic{ background:var(--sk-brand); color:#fff; } .purchase > .nav-tabs > li.active > a .tb-tt{ color:var(--sk-brand-d); } .purchase > .nav-tabs > li.active > a .tb-st{ color:var(--sk-brand-l); } /* 区块内二级筛选 tab（实例位置/实例类型等）· 下划线铺满 100% 宽 */ .purchase .wrap .nav-tabs{ border-bottom:1px solid var(--sk-border) !important; } .purchase .wrap .nav-tabs.pull-left{ float:none !important; width:100% !important; } /* bootstrap-slider 滑块 · 方案2 iOS风（10px内凹粗轨+渐变填充+22px白色大圆钮，数值看右侧输入框） */ .slider-track{ background:var(--sk-head) !important; background-image:none !important; box-shadow:inset 0 1px 2px rgba(13,21,38,.08) !important; height:10px !important; border-radius:10px !important; } .slider-selection{ background:linear-gradient(90deg,var(--sk-brand-l),var(--sk-brand)) !important; background-image:linear-gradient(90deg,var(--sk-brand-l),var(--sk-brand)) !important; box-shadow:none !important; border-radius:10px !important; } .slider-handle{ background:#fff !important; background-image:none !important; border:0 !important; border-radius:50% !important; width:22px !important; height:22px !important; opacity:1 !important; box-shadow:0 1px 2px rgba(13,21,38,.25),0 3px 8px rgba(13,21,38,.15) !important; transition:transform .15s,box-shadow .15s; } .slider-handle:hover,.slider-handle:focus{ transform:scale(1.12); box-shadow:0 1px 3px rgba(13,21,38,.3),0 4px 10px rgba(13,21,38,.18),0 0 0 5px var(--sk-ring) !important; } .slider.slider-horizontal{ width:100% !important; height:22px !important; } .slider.slider-horizontal .slider-track{ top:50% !important; margin-top:-5px !important; } .slider.slider-horizontal .slider-handle{ top:50% !important; margin-top:-11px !important; } .slider .slider-tick{ display:none !important; } .slider .tooltip{ display:none !important; } .slider-large .slider .slider-handle:before,.slider-large .slider .slider-handle:after{ content:none !important; display:none !important; } .slider-input{ align-items:center !important; } .slider-input .input-box{ margin-top:0 !important; margin-bottom:0 !important; } /* 规格表 t-table（自定义购买） */ .purchase .panel-table-warp{ border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; } .purchase .t-table .t-thead{ color:var(--sk-mut) !important; background:var(--sk-head) !important; } .purchase .t-table .t-row{ transition:background .15s; } .purchase .t-table .t-row:hover{ background:var(--sk-brand-bg2) !important; } .purchase .t-table .t-row:has(input:checked){ background:var(--sk-brand-bg2) !important; box-shadow:inset 3px 0 0 var(--sk-brand); } /* 规格表价格列 · 红色（同设计稿） */ .purchase .t-table .t-body .t-row .t-col:last-child{ color:var(--sk-danger) !important; font-weight:700; } /* 规格名称加粗 + 售罄红色胶囊 */ .purchase .t-table .t-body .t-name{ font-weight:600; color:var(--sk-ink); } .purchase .t-table .t-body .t-col > .badge{ background:var(--sk-danger-bg) !important; color:var(--sk-danger) !important; font-weight:600; font-size:10.5px; padding:1px 8px !important; border-radius:9px; margin-left:6px; } /* 费用总计 + 立即购买 */ .purchase #wrapFooter .rule-price .text-danger{ font-size:22px !important; font-weight:800; } .purchase .btn_buy{ border-radius:var(--sk-radius) !important; font-weight:700; padding-left:36px; padding-right:36px; } /* --- 右侧悬浮购买卡（#wrapFooter 精简卡 + 更多折叠） --- */ .wrap#wrapFooter .wrap-heading{ display:block !important; } .wrap#wrapFooter .pf-r{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; } .wrap#wrapFooter .pf-k{ color:var(--sk-mut); flex-shrink:0; } .wrap#wrapFooter .pf-v{ color:var(--sk-ink); text-align:right; word-break:break-word; } .wrap#wrapFooter .pf-more{ margin:2px 0 4px; } .wrap#wrapFooter .pf-more summary{ cursor:pointer; font-size:12.5px; color:var(--sk-brand); list-style:none; padding:7px 0; user-select:none; outline:none; } .wrap#wrapFooter .pf-more summary::-webkit-details-marker{ display:none; } .wrap#wrapFooter .pf-more summary::after{ content:' \25be'; } .wrap#wrapFooter .pf-more[open] summary::after{ content:' \25b4'; } .wrap#wrapFooter hr{ border:0 !important; border-top:1px solid var(--sk-border) !important; margin:12px 0 !important; } /* 费用区纵向：价格在上、按钮在底 */ .wrap#wrapFooter .wrap-amount .wrap-rule-name{ display:none; } .wrap#wrapFooter .wrap-amount .wrap-rule-body{ display:flex; flex-direction:column-reverse; gap:7px; padding:0 !important; } .wrap#wrapFooter .wrap-amount .pull-right{ float:none !important; width:100%; margin:0 !important; } .wrap#wrapFooter .wrap-amount .rule-price{ padding:0 !important; } .wrap#wrapFooter .wrap-amount .btn_buy{ display:block; width:100%; text-align:center; } .wrap#wrapFooter .wrap-coupon .form-control{ width:100% !important; } /* A版：配置概要/价格概要分区 + 更多配置 hover 左侧弹出 */ .wrap#wrapFooter{ border-radius:18px !important; } /* 右卡产品标识卡头（云服务器/物理服务器/托管…） */ .wrap#wrapFooter .pf-card-hd{ display:flex; align-items:center; gap:8px; padding:12px 18px; background:linear-gradient(135deg,var(--sk-brand-bg2),var(--sk-brand-bg)); border-bottom:1px solid var(--sk-border); border-radius:18px 18px 0 0; font-size:14px; font-weight:700; color:var(--sk-brand-d); } .wrap#wrapFooter .pf-card-hd i{ font-size:15px; color:var(--sk-brand); } .wrap#wrapFooter .wrap-heading{ padding-left:0 !important; } /* 购买卡移动端(非固定态)：统一左右内边距为18px，修正基础样式泄漏(wrap-body 右30/左15、heading 左0)的不对称 */ @media (max-width:991px){ /* 卡片自身内边距清零(否则套用 .purchase .wrap 的 24px，band/内容四周多出白边)；内部各区块自带 18px 边距 */ .wrap#wrapFooter{ padding:0 !important; } .wrap#wrapFooter .wrap-heading{ padding-left:18px !important; padding-right:18px !important; } .wrap#wrapFooter .wrap-body{ padding-left:18px !important; padding-right:18px !important; } /* 配置概要悬停弹窗：移动端整卡近满宽，侧弹会出屏 → 改为标题下方整宽展开 */ .wrap#wrapFooter .pf-flyout{ left:0 !important; right:0 !important; top:calc(100% + 6px) !important; width:auto !important; } .wrap#wrapFooter .pf-flyout::before,.wrap#wrapFooter .pf-flyout::after{ display:none !important; } } .wrap#wrapFooter .wrap-heading:before{ display:none !important; } .wrap#wrapFooter .wrap-coupon{ width:100% !important; float:none !important; padding-right:0 !important; } /* 积分注释 · 与页面其他注释一致的强调色空心图标 */ .wrap#wrapFooter .pf-points{ position:relative; padding-left:0 !important; line-height:1.35; margin:-2px 0 !important; font-size:11.5px; } .wrap#wrapFooter .pf-points::before{ content:''; display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/13px 13px; } .wrap#wrapFooter .wrap-amount .pull-right:first-child{ margin-top:4px !important; } .wrap#wrapFooter .pf-sec-hd{ font-size:14px; font-weight:600; color:var(--sk-ink); margin:0 0 6px; } /* 右卡 · 购买设置区（左右结构：标签左 / 控件右；购买时长=下拉带折扣） */ .wrap#wrapFooter .pf-buyset .wrap-item{ margin:0 0 10px; display:flex; align-items:center; gap:10px; } .wrap#wrapFooter .pf-buyset .wrap-item:last-child{ margin-bottom:2px; } .wrap#wrapFooter .pf-buyset .wrap-rule-name{ float:none !important; width:58px !important; flex-shrink:0; padding:0 !important; font-size:13px; color:var(--sk-mut) !important; line-height:1.5 !important; white-space:nowrap; } .wrap#wrapFooter .pf-buyset > .rule-desc.pf-stock{ margin:-8px 0 2px 68px !important; } .wrap#wrapFooter .pf-buyset .rule-list{ display:flex; flex-wrap:wrap; } .wrap#wrapFooter .pf-buyset .rule-item{ height:32px !important; line-height:30px !important; padding:0 14px !important; font-size:12.5px !important; margin:0 8px 0 0 !important; } .wrap#wrapFooter .pf-buyset textarea.form-control{ width:100% !important; max-width:none !important; height:56px !important; border-radius:var(--sk-radius) !important; border-color:var(--sk-border-3) !important; box-shadow:none !important; padding:8px 12px !important; } .wrap#wrapFooter .pf-buyset .wrap-item:has(textarea){ align-items:flex-start; } .wrap#wrapFooter .pf-buyset .wrap-item:has(textarea) .wrap-rule-name{ padding-top:8px !important; } /* 可点 addon（host页 随机生成密码/端口） */ .purchase .rule-input a.input-group-addon{ cursor:pointer; color:var(--sk-brand) !important; font-weight:600; user-select:none; white-space:nowrap; } .purchase .rule-input a.input-group-addon:hover{ background:var(--sk-brand-bg2) !important; } /* SSL证书购买页 certBuy · 细节（须在通用规则之后，靠后序赢同特异性平局） */ .certBuy .rule-input .form-control{ border-radius:var(--sk-radius) !important; } .certBuy .rule-input:not(.input-box) textarea.form-control{ height:180px !important; } .certBuy .rule-price .text-danger:not(.text-small){ font-size:24px !important; font-weight:800; } .certBuy .cert-buy{ height:42px !important; line-height:42px !important; padding:0 46px !important; font-size:15px !important; font-weight:600; border-radius:var(--sk-radius) !important; border:0 !important; box-shadow:0 6px 16px rgba(232,85,77,.25); } .certBuy label.input-group-addon{ font-weight:400; cursor:pointer; } /* 旧SSL购买页 ssl/purchase · 品牌介绍盒子 */ .purchase .ssl_product_tips{ display:flex; align-items:center; gap:14px; background:var(--sk-head) !important; border:1px solid var(--sk-border-2); border-radius:var(--sk-radius) !important; padding:10px 14px !important; margin-top:10px; } .purchase .ssl_product_tips .product_content{ color:var(--sk-mut) !important; font-size:12.5px; line-height:1.65; } /* ── 证书页差异化 A+B+C+D ── */ /* D · 签发流程步骤 */ .certBuy .cert-steps{ display:flex; align-items:center; max-width:680px; margin:4px auto 18px; } .certBuy .cert-step{ display:flex; align-items:center; gap:9px; flex-shrink:0; } .certBuy .cert-step .n{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--sk-brand); color:#fff; } .certBuy .cert-step .t{ font-size:13px; font-weight:600; color:var(--sk-ink); } .certBuy .cert-step.todo .n{ background:var(--sk-head); color:var(--sk-mut); border:1px solid var(--sk-border-3); } .certBuy .cert-step.todo .t{ color:var(--sk-mut); font-weight:400; } .certBuy .cert-line{ flex:1; height:2px; background:var(--sk-border); margin:0 14px; border-radius:2px; min-width:24px; } .certBuy .cert-line.done{ background:var(--sk-brand); } /* A · 浏览器地址栏实景 */ .certBuy .cert-browser{ max-width:680px; border:1px solid var(--sk-border-3); border-radius:12px; overflow:hidden; box-shadow:var(--sk-sh-md); margin:0 auto 18px; background:var(--sk-card); } .certBuy .cert-chrome{ display:flex; gap:6px; background:var(--sk-head); padding:9px 12px; border-bottom:1px solid var(--sk-border); } .certBuy .cert-chrome i{ width:10px; height:10px; border-radius:50%; } .certBuy .cert-chrome i:nth-child(1){ background:#ff5f57; } .certBuy .cert-chrome i:nth-child(2){ background:#febc2e; } .certBuy .cert-chrome i:nth-child(3){ background:#28c840; } .certBuy .cert-url{ display:flex; align-items:center; gap:8px; padding:11px 16px; } .certBuy .cert-url svg{ width:15px; height:15px; flex-shrink:0; color:var(--sk-faint); } .certBuy .cert-url.ok svg{ color:var(--sk-success); } .certBuy .cert-url .https{ color:var(--sk-success); font-weight:700; font-family:Consolas,monospace; font-size:13px; } .certBuy .cert-url .dm{ color:var(--sk-ink); font-family:Consolas,monospace; font-size:13px; word-break:break-all; } .certBuy .cert-url .dm.ph{ color:var(--sk-faint); } .certBuy .cert-url .ok-badge{ margin-left:auto; font-size:11px; font-weight:600; color:var(--sk-success); background:var(--sk-success-bg); padding:2px 9px; border-radius:9px; white-space:nowrap; } /* B · 信任等级卡 DV/OV/EV */ .certBuy .cert-tiers{ display:flex; flex-wrap:wrap; gap:12px; } .certBuy .cert-tier{ position:relative; display:flex; flex-direction:column; width:268px; padding:14px 16px 11px; border:1.5px solid var(--sk-border-3); border-radius:14px; background:var(--sk-card); cursor:pointer; transition:.18s; } .certBuy .cert-tier .ct-tx b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .certBuy .cert-tier:hover{ border-color:var(--sk-brand); transform:translateY(-2px); box-shadow:var(--sk-sh-md); } .certBuy .cert-tier.on{ border-color:var(--sk-brand) !important; background:var(--sk-brand-bg2); box-shadow:inset 0 0 0 1px var(--sk-brand); } .certBuy .cert-tier.on::after{ content:'\2713'; position:absolute; right:0; bottom:0; width:18px; height:18px; line-height:18px; text-align:center; font-size:10px; color:#fff; background:var(--sk-brand); border-radius:9px 0 13px 0; } .certBuy .cert-tier .ct-hd{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .certBuy .cert-tier .ct-shield{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--sk-brand-bg); color:var(--sk-brand); } .certBuy .cert-tier.ov .ct-shield{ background:#e3f2fd; color:#1976d2; } .certBuy .cert-tier.ev .ct-shield{ background:#fdf6e3; color:#b7791f; } .certBuy .cert-tier .ct-shield svg{ width:18px; height:18px; } .certBuy .cert-tier .ct-tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; } .certBuy .cert-tier .ct-tx b{ font-size:14px; color:var(--sk-ink); } .certBuy .cert-tier.on .ct-tx b{ color:var(--sk-brand-d); } .certBuy .cert-tier .ct-tx i{ font-style:normal; font-size:10.5px; color:var(--sk-mut); margin-top:2px; } .certBuy .cert-tier .ct-li{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sk-ink-2); padding:2.5px 0; } .certBuy .cert-tier .ct-li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--sk-faint); flex-shrink:0; } /* 分组标题编号 */ .certBuy .cert-gnum{ display:inline-flex; width:22px; height:22px; border-radius:7px; background:var(--sk-brand-bg); color:var(--sk-brand-d); font-size:12px; font-weight:700; align-items:center; justify-content:center; margin-right:9px; vertical-align:-4px; } /* C · 证书文书右卡 */ .wrap#wrapFooter .cert-band{ position:relative; padding:16px 20px 13px; background:linear-gradient(135deg,#4f46e5,#7c74ff); color:#fff; border-radius:18px 18px 0 0; overflow:hidden; } .wrap#wrapFooter .cert-band .t{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; } .wrap#wrapFooter .cert-band .t svg{ width:18px; height:18px; } .wrap#wrapFooter .cert-band .sn{ margin-top:5px; font-size:10px; font-family:Consolas,monospace; color:rgba(255,255,255,.72); letter-spacing:.1em; } .wrap#wrapFooter .cert-band::after{ content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.09); } .wrap#wrapFooter .cert-seal{ position:absolute; right:16px; top:96px; width:60px; height:60px; border:2px solid rgba(232,85,77,.45); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(232,85,77,.55); font-size:9.5px; font-weight:700; transform:rotate(-14deg); letter-spacing:.1em; text-align:center; line-height:1.3; pointer-events:none; z-index:3; } .wrap#wrapFooter .cert-safe{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:11px; color:var(--sk-mut); } .wrap#wrapFooter .cert-safe svg{ width:12px; height:12px; color:var(--sk-success); } .wrap#wrapFooter .cert-perf{ height:8px; background:radial-gradient(circle at 8px -3px, transparent 6px, var(--sk-card) 6.5px); background-size:16px 8px; margin-top:-8px; position:relative; z-index:2; } .certBuy #wrapFooter .pf-r .pf-v{ font-weight:600; } .certBuy #wrapFooter .pf-v.cert-mono{ font-family:Consolas,monospace; font-size:12px; } .wrap#wrapFooter .cert-year{ align-items:center; } .wrap#wrapFooter .cert-year select.pf-cycle{ width:130px; height:34px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; font-size:13px; color:var(--sk-ink) !important; padding:0 28px 0 12px; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--sk-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px 14px; } .wrap#wrapFooter .cert-year select.pf-cycle:hover,.wrap#wrapFooter .cert-year select.pf-cycle:focus{ border-color:var(--sk-brand) !important; outline:0; } /* 游戏面板 · 右卡B霓虹电竞卡头 */ .wrap#wrapFooter .game-band{ position:relative; padding:15px 20px 12px; background:#171a2e; color:#fff; border-radius:18px 18px 0 0; overflow:hidden; } .wrap#wrapFooter .game-band::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#22d3ee,var(--sk-brand),#e879f9); } .wrap#wrapFooter .game-band .t{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; } .wrap#wrapFooter .game-band .t i{ font-size:16px; color:#22d3ee; } .wrap#wrapFooter .game-band .t .gt{ background:linear-gradient(90deg,#22d3ee,#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent; } .wrap#wrapFooter .game-band .sn{ margin-top:5px; font-size:10px; font-family:Consolas,monospace; color:rgba(255,255,255,.7); letter-spacing:.14em; } .wrap#wrapFooter .game-band .sn .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#12b886; margin-right:6px; box-shadow:0 0 6px #12b886; vertical-align:1px; animation:sk-breathe 1.6s ease-in-out infinite; } @keyframes sk-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .ptergame #wrapFooter .btn-danger.btn_buy{ background:linear-gradient(90deg,#06b6d4,#635bff) !important; border:0 !important; box-shadow:0 6px 18px rgba(34,211,238,.35) !important; } .wrap#wrapFooter .game-safe{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:11px; color:var(--sk-mut); } .wrap#wrapFooter .game-safe i{ color:var(--sk-warn); font-size:12px; } /* L1 · 游戏封面卡 */ .ptergame .game-covers{ display:flex; flex-wrap:wrap; gap:12px; } .ptergame .game-cover{ position:relative; width:186px; border:1.5px solid var(--sk-border-3); border-radius:14px; overflow:hidden; background:var(--sk-card); cursor:pointer; transition:.18s; } .ptergame .game-cover:hover{ transform:translateY(-3px); box-shadow:var(--sk-sh-md); border-color:var(--sk-brand); } .ptergame .game-cover.on{ border-color:var(--sk-brand); box-shadow:0 0 0 2px var(--sk-ring), var(--sk-sh-md); } .ptergame .game-cover.on::after{ content:'\2713'; position:absolute; right:0; top:0; width:22px; height:22px; line-height:22px; text-align:center; color:#fff; background:var(--sk-brand); font-size:11px; border-radius:0 12px 0 10px; } .ptergame .game-cover .gc-img{ height:86px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--sk-brand-bg),var(--sk-brand-bg2)); } .ptergame .game-cover .gc-img img{ max-height:64px; max-width:80%; border-radius:8px; } .ptergame .game-cover .gc-img i{ font-size:30px; color:var(--sk-brand-l); } .ptergame .game-cover .gc-tx{ display:block; padding:9px 13px 10px; line-height:1.3; } .ptergame .game-cover .gc-tx b{ display:block; font-size:13.5px; color:var(--sk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ptergame .game-cover.on .gc-tx b{ color:var(--sk-brand-d); } .ptergame .game-cover .gc-tx i{ font-style:normal; font-size:11px; color:var(--sk-mut); } /* L2 · 背包资源格 */ .ptergame .game-slots{ display:flex; flex-wrap:wrap; gap:12px; } .ptergame .game-slot{ width:150px; border:1.5px solid var(--sk-border-3); border-radius:13px; background:var(--sk-card); padding:12px 14px 10px; text-align:center; } .ptergame .game-slot .ic{ width:38px; height:38px; margin:0 auto 6px; border-radius:10px; background:var(--sk-brand-bg); display:flex; align-items:center; justify-content:center; font-size:18px; } .ptergame .game-slot .nm{ font-size:12px; color:var(--sk-mut); } .ptergame .game-slot .ct{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; } .ptergame .game-slot .ct a{ width:24px; height:24px; border:1px solid var(--sk-border-3); border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--sk-ink-2); cursor:pointer; font-weight:700; user-select:none; } .ptergame .game-slot .ct a:hover{ border-color:var(--sk-brand); color:var(--sk-brand); } .ptergame .game-slot .ct b{ font-size:16px; min-width:30px; color:var(--sk-ink); } .ptergame .game-slot .mx{ margin-top:4px; font-size:10.5px; color:var(--sk-faint); } /* L3 · 选择大区 */ .ptergame .game-srvs{ display:flex; flex-wrap:wrap; gap:12px; } .ptergame .game-srv{ position:relative; width:200px; border:1.5px solid var(--sk-border-3); border-radius:13px; background:var(--sk-card); padding:11px 15px 9px; cursor:pointer; transition:.16s; } .ptergame .game-srv:hover{ border-color:var(--sk-brand); } .ptergame .game-srv.on{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); box-shadow:inset 0 0 0 1px var(--sk-brand); } .ptergame .game-srv.dis{ opacity:.55; cursor:not-allowed; } .ptergame .game-srv .hd{ display:flex; align-items:center; justify-content:space-between; } .ptergame .game-srv .hd b{ font-size:13.5px; color:var(--sk-ink); } .ptergame .game-srv.on .hd b{ color:var(--sk-brand-d); } .ptergame .game-srv .ping{ display:flex; align-items:flex-end; gap:2px; height:14px; } .ptergame .game-srv .ping i{ width:3.5px; border-radius:1px; background:var(--sk-success); } .ptergame .game-srv .ping i:nth-child(1){ height:5px; } .ptergame .game-srv .ping i:nth-child(2){ height:8px; } .ptergame .game-srv .ping i:nth-child(3){ height:11px; } .ptergame .game-srv .ping i:nth-child(4){ height:14px; } .ptergame .game-srv .ping.off i{ background:var(--sk-border-3); } .ptergame .game-srv .st{ display:block; margin-top:4px; font-size:11px; } .ptergame .game-srv .st .ok{ color:var(--sk-success); } .ptergame .game-srv .st .full{ color:var(--sk-danger); } /* L4 · 战力配置台 */ .ptergame .g4-steps{ display:flex; flex-wrap:wrap; gap:8px; max-width:560px; } .ptergame .g4-s{ min-width:86px; flex:1; text-align:center; padding:9px 8px 7px; border:1.5px solid var(--sk-border-3); border-radius:11px; cursor:pointer; transition:.15s; background:var(--sk-card); } .ptergame .g4-s:hover{ border-color:var(--sk-brand); } .ptergame .g4-s.on{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); box-shadow:inset 0 0 0 1px var(--sk-brand); } .ptergame .g4-s.dis{ opacity:.45; cursor:not-allowed; } .ptergame .g4-s b{ display:block; font-size:14px; color:var(--sk-ink); } .ptergame .g4-s.on b{ color:var(--sk-brand-d); } .ptergame .g4-s i{ font-style:normal; font-size:10px; color:#d9930d; letter-spacing:1px; font-weight:700; } .ptergame .g4-power{ display:flex; align-items:center; gap:12px; max-width:560px; padding-top:12px; } .ptergame .g4-power .bar{ flex:1; height:10px; border-radius:10px; background:var(--sk-head); overflow:hidden; } .ptergame .g4-power .bar i{ display:block; height:100%; background:linear-gradient(90deg,#22d3ee,var(--sk-brand),var(--sk-brand-l)); border-radius:10px; transition:width .3s; } .ptergame .g4-power b{ color:var(--sk-brand-d); font-size:15px; min-width:48px; } /* 方案2 · 游戏类型/版本下拉卡精修（覆盖页内 btn-group-pack 内联样式） */ .ptergame .btn-group-pack .rule-item.gp-chip{ display:inline-flex !important; align-items:center; gap:10px; height:50px !important; min-width:190px; padding:0 14px !important; border-radius:12px !important; text-align:left !important; line-height:1.25 !important; white-space:nowrap; } .ptergame .gp-chip .gp-ic{ height:26px !important; width:auto; margin:0 !important; border-radius:6px; background:#fff; flex-shrink:0; } .ptergame .gp-chip .gp-tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; } .ptergame .gp-chip .gp-tx b{ font-size:13.5px; color:var(--sk-ink); font-weight:600; } .ptergame .rule-item.gp-chip.active .gp-tx b{ color:var(--sk-brand-d); } .ptergame .gp-chip .gp-tx i{ font-style:normal; font-size:11px !important; color:var(--sk-mut); display:flex; align-items:center; gap:4px; margin-top:1px; padding:0 !important; } .ptergame .rule-item.gp-chip.active .gp-tx i{ color:var(--sk-brand) !important; } .ptergame .gp-chip .gp-tx i .sel{ background:var(--sk-brand-bg); color:var(--sk-brand-d); padding:0 7px; border-radius:8px; line-height:16px; max-width:130px; overflow:hidden; text-overflow:ellipsis; } .ptergame .gp-chip .gp-caret{ margin-left:auto; color:var(--sk-faint); font-size:10px; padding-left:8px; } /* 标签旁 tooltip 触发图标 · 实心感叹号→空心 info（与全站注释图标统一） */ .ptergame .wrap-rule-name .icon-exclamation-sign{ display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-left:2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/13px 13px; } .ptergame .wrap-rule-name .icon-exclamation-sign::before{ content:'' !important; } .wrap#wrapFooter .pf-buyset .wrap-rule-body{ padding-left:0 !important; flex:1; min-width:0; } .wrap#wrapFooter .pf-buyset select.pf-cycle{ width:100%; height:36px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; font-size:13px; color:var(--sk-ink) !important; padding:0 30px 0 12px; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--sk-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px 15px !important; } .wrap#wrapFooter .pf-buyset select.pf-cycle:hover,.wrap#wrapFooter .pf-buyset select.pf-cycle:focus{ border-color:var(--sk-brand) !important; outline:0; } .wrap#wrapFooter .pf-buyset .rule-input:not(.input-box) .form-control{ width:100% !important; max-width:none !important; } .wrap#wrapFooter .pf-buyset .rule-input.input-box{ width:100% !important; } .wrap#wrapFooter .pf-buyset .input-box .form-control{ height:36px !important; } .wrap#wrapFooter .pf-buyset .input-box .btn-updown .spinner-up,.wrap#wrapFooter .pf-buyset .input-box .btn-updown .spinner-down{ height:17px !important; line-height:17px !important; } .wrap#wrapFooter .pf-buyset .rule-desc{ margin-top:6px !important; } /* 购买时长自定义下拉：折扣做成红色标签、靠右显示（全购买页通用） */ .pf-cyclesel{ position:relative; width:100%; } .pf-cyclesel-cur{ display:flex; align-items:center; gap:8px; height:38px; padding:0 34px 0 12px; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card); color:var(--sk-ink); font-size:13px; cursor:pointer; position:relative; transition:border-color .15s; } .pf-cyclesel-cur:hover,.pf-cyclesel.open .pf-cyclesel-cur{ border-color:var(--sk-brand); } .pf-cyclesel-nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pf-cyclesel-caret{ position:absolute; right:13px; top:50%; width:7px; height:7px; border-right:1.5px solid var(--sk-mut); border-bottom:1.5px solid var(--sk-mut); transform:translateY(-70%) rotate(45deg); transition:transform .18s; pointer-events:none; } .pf-cyclesel.open .pf-cyclesel-caret{ transform:translateY(-30%) rotate(225deg); } .pf-cyclesel-tag{ flex-shrink:0; font-size:11px; font-weight:600; line-height:1; padding:3px 7px; border-radius:6px; color:#fff; background:var(--sk-danger,#e8554d); white-space:nowrap; } .pf-cyclesel-list{ position:absolute; left:0; right:0; top:calc(100% + 6px); margin:0; padding:5px; list-style:none; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:12px; box-shadow:var(--sk-sh-lg); z-index:40; max-height:260px; overflow-y:auto; } .pf-cyclesel-list li{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--sk-ink-2); cursor:pointer; transition:background .12s; } .pf-cyclesel-list li:hover{ background:var(--sk-brand-bg2,#f3f2ff); } .pf-cyclesel-list li.active{ background:var(--sk-brand-bg,#eef0ff); color:var(--sk-brand-d); font-weight:600; } /* 配置概要标题 = 弹窗触发（文字虚线下划线，hover 左侧弹出完整配置） */ .wrap#wrapFooter .wrap-heading.pf-more-wrap{ position:relative; height:auto !important; line-height:1.5 !important; } .wrap#wrapFooter .wrap-heading .pf-more-btn{ font-size:15px !important; font-weight:700; color:var(--sk-ink) !important; border-bottom:1px dashed var(--sk-faint); padding-bottom:3px; cursor:default; } .wrap#wrapFooter .wrap-heading .pf-more-btn::after{ content:none !important; } .wrap#wrapFooter .wrap-heading .pf-hd-spec{ float:right; font-size:12px; font-weight:600; color:var(--sk-brand-d); background:var(--sk-brand-bg2); padding:2px 10px; border-radius:12px; line-height:1.6; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 「悬停标题可查看完整配置」提示：隐藏以压缩卡片高度（完整配置仍可悬停标题查看） */ .wrap#wrapFooter .pf-hd-tip{ display:none !important; position:relative; font-size:11.5px; font-weight:400; color:var(--sk-mut); margin-top:8px; padding-left:18px; clear:both; } .wrap#wrapFooter .pf-hd-tip::before{ content:''; position:absolute; left:1px; top:2px; width:13px; height:13px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/13px 13px; } .wrap#wrapFooter .wrap-heading .pf-flyout{ top:12px; } .wrap#wrapFooter .wrap-heading .pf-flyout::after{ top:10px; } .wrap#wrapFooter .pf-divider{ height:1px; background:var(--sk-border); margin:14px 0; } .wrap#wrapFooter .pf-dashed{ border-top:1px dashed var(--sk-border-3); margin:10px 0 6px; } .wrap#wrapFooter .pf-cut{ color:var(--sk-success) !important; } .wrap#wrapFooter .rule-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; } .wrap#wrapFooter .pf-total-lb{ font-size:13px; font-weight:600; color:var(--sk-ink-2); margin-right:auto; } .purchase #wrapFooter .rule-price > .text-danger:not(.text-small){ font-size:24px !important; font-weight:800; } .purchase #wrapFooter .rule-price .text-small{ font-size:12px !important; font-weight:400 !important; flex-basis:100%; text-align:right; } .wrap#wrapFooter .wrap-coupon .form-control{ height:38px !important; border-radius:var(--sk-radius) !important; border-color:var(--sk-border-3) !important; color:var(--sk-ink-2); box-shadow:none !important; } .wrap#wrapFooter .wrap-coupon .form-control:hover,.wrap#wrapFooter .wrap-coupon .form-control:focus{ border-color:var(--sk-brand) !important; } .wrap#wrapFooter .btn_buy{ height:44px !important; line-height:44px !important; padding:0 !important; font-size:15px !important; font-weight:600; border-radius:var(--sk-radius) !important; box-shadow:0 6px 16px rgba(232,85,77,.25); } /* 积分行 · 灰色小字（含感叹号图标弱化） */ .wrap#wrapFooter .wrap-amount .wrap-coupon{ font-size:12px; color:var(--sk-mut); } .wrap#wrapFooter .wrap-amount .wrap-coupon label{ font-weight:600; color:var(--sk-ink-2); margin:0 1px; font-size:12px; } .wrap#wrapFooter .wrap-amount .wrap-coupon .icon-exclamation-sign{ color:var(--sk-faint); font-size:12px; } /* 代金券下拉 · 自定义细 chevron */ .wrap#wrapFooter .wrap-coupon select.form-control{ appearance:none; -webkit-appearance:none; padding-right:34px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:15px !important; background-color:var(--sk-card) !important; } .wrap#wrapFooter .pf-more-wrap{ position:relative; margin:6px 0 2px; } .wrap#wrapFooter .pf-more-btn{ display:inline-flex; align-items:center; gap:2px; font-size:12.5px; color:var(--sk-brand); cursor:pointer; user-select:none; } .wrap#wrapFooter .pf-more-btn::after{ content:'\25be'; font-size:11px; line-height:1; margin-left:2px; } .wrap#wrapFooter .pf-more-wrap:hover .pf-more-btn{ text-decoration:underline; } .wrap#wrapFooter .pf-flyout{ visibility:hidden; opacity:0; transition:opacity .15s ease, visibility 0s linear .25s; position:absolute; right:calc(100% + 22px); top:-16px; width:290px; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:14px; box-shadow:var(--sk-sh-lg); padding:14px 16px; z-index:30; } .wrap#wrapFooter .pf-flyout::before{ content:''; position:absolute; right:-26px; top:0; width:26px; height:100%; } .wrap#wrapFooter .pf-flyout::after{ content:''; position:absolute; right:-6px; top:20px; width:11px; height:11px; background:var(--sk-card); border-right:1px solid var(--sk-border); border-top:1px solid var(--sk-border); transform:rotate(45deg); } .wrap#wrapFooter .pf-more-wrap:hover .pf-flyout,.wrap#wrapFooter .pf-flyout:hover{ visibility:visible; opacity:1; transition-delay:0s,0s; } .wrap#wrapFooter .pf-flyout-hd{ font-size:13px; font-weight:600; color:var(--sk-ink); margin-bottom:8px; } .wrap#wrapFooter .pf-fly-grp{ display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:600; color:var(--sk-mut); margin:18px 0 5px; } .wrap#wrapFooter .pf-fly-grp::after{ content:''; flex:1; height:1px; background:var(--sk-border); } .wrap#wrapFooter .pf-flyout-hd + .pf-fly-grp{ margin-top:4px; } .wrap#wrapFooter .pf-flyout .pf-r{ padding:4px 0; justify-content:flex-start; gap:12px; } .wrap#wrapFooter .pf-flyout .pf-k{ width:76px; flex-shrink:0; } .wrap#wrapFooter .pf-flyout .pf-v{ text-align:left; } /* 桌面：固定右侧、随视口跟随 */ @media (min-width:992px){ .main.padder.purchase{ padding-right:376px !important; } .purchase .wrap{ margin-right:0 !important; } .wrap#wrapFooter{ position:fixed !important; top:72px; right:24px; left:auto !important; bottom:auto !important; width:328px !important; margin:0 !important; padding:0 !important; overflow:visible !important; box-shadow:var(--sk-sh-lg) !important; /* A方案：卡片过高（超出视口）时封顶，wrap-body 内部滚动；内容少时卡片贴合内容 */ display:flex !important; flex-direction:column; max-height:calc(100vh - 96px); /* 压到顶栏之下，避免遮住 #header 的工单/财务下拉（顶栏 z-index:1030） */ z-index:20 !important; } /* scroll_fixed 会把父div高度设成卡片高（旧底部跟随占位）→ 桌面右侧固定态强制清零，消除底部大空白 */ .purchase div:has(> #wrapFooter){ height:0 !important; } .wrap#wrapFooter .wrap-heading{ padding:16px 18px 0 !important; margin:0 !important; flex-shrink:0; } /* wrap-body 吃掉剩余高度并内部滚动；min-height:0 允许其在 flex 下收缩。 注意：overflow 只能放这里，别放 #wrapFooter 上——会裁掉 wrap-heading 的悬停浮层 pf-flyout */ .wrap#wrapFooter .wrap-body{ padding:26px 18px 16px !important; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } .wrap#wrapFooter .wrap-body::-webkit-scrollbar{ width:6px; } .wrap#wrapFooter .wrap-body::-webkit-scrollbar-thumb{ background:var(--sk-border-3); border-radius:6px; } .wrap#wrapFooter .wrap-body::-webkit-scrollbar-thumb:hover{ background:var(--sk-mut); } } /* ===== 云服务器详情弹窗 · 图一控制台风格：左侧竖排导航 + 右侧宽内容 ===== */ /* 加宽弹窗（原 900px → 1080px；窄屏自适应） */ .modal.fade .modal-large{ width:1080px; margin-left:-540px; } @media(max-width:1120px){ .modal.fade .modal-large{ width:94vw; margin-left:-47vw; } } /* 弹窗顶栏：标题左对齐（无背景框）+ 右侧刷新/关闭图标钮 */ .sk-winbar{ display:flex; align-items:center; gap:12px; padding:15px 18px; background:var(--sk-head); border-bottom:1px solid var(--sk-border); } .sk-winbar-title{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:400; color:var(--sk-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sk-winbar-title b{ font-weight:400; } .sk-winbar-title .sk-head-ic{ color:var(--sk-brand); width:18px; height:18px; font-size:16px; flex:0 0 auto; } .sk-winbar-sn{ color:var(--sk-mut); font-weight:400; } .sk-winbar-act{ flex:0 0 auto; display:flex; gap:8px; } /* 弹窗整体固定高度：顶栏 + 左栏固定，右侧内容区独立滚动 */ #serverModalPjax{ display:flex; flex-direction:column; max-height:85vh; overflow:hidden; } #serverModalPjax > .sk-winbar{ flex:0 0 auto; } /* 两栏布局：占满顶栏以下全部高度 */ .kvm_detail.sk-modal-2col{ display:flex; padding:0 !important; flex:1 1 auto; min-height:0; } .kvm_detail .sk-modal-side{ overflow-y:auto; } /* 左侧导航栏 */ .kvm_detail .sk-modal-side{ width:156px; flex:0 0 156px; background:var(--sk-head); border-right:1px solid var(--sk-border); padding:14px 10px; } .kvm_detail .sk-side-head{ display:flex; align-items:center; gap:8px; padding:4px 10px 14px; } .kvm_detail .sk-side-head .sk-head-ic{ color:var(--sk-brand); font-size:17px; } .kvm_detail .sk-side-title{ font-size:13px; } .kvm_detail .sk-side-title b{ font-weight:600; } .kvm_detail .sk-side-sn{ color:var(--sk-mut); font-weight:400; } /* 竖排导航（覆盖横向 nav-tabs 样式） */ .kvm_detail .sk-side-nav{ border:0 !important; display:flex; flex-direction:column; gap:2px; float:none !important; margin:0 !important; } .kvm_detail .sk-side-nav > li{ float:none !important; margin:0 !important; } .kvm_detail .sk-side-nav > li > a{ display:flex !important; align-items:center; gap:9px; padding:9px 11px !important; margin:0 !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--sk-ink-2) !important; font-size:13px; } .kvm_detail .sk-side-nav > li > a:hover{ background:var(--sk-card) !important; color:var(--sk-ink) !important; border:0 !important; } .kvm_detail .sk-side-nav > li.active > a, .kvm_detail .sk-side-nav > li.active > a:hover, .kvm_detail .sk-side-nav > li.active > a:focus{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; border:0 !important; font-weight:500; } .kvm_detail .sk-side-nav > li > a i{ font-size:15px; width:16px; text-align:center; flex:0 0 auto; } .kvm_detail .sk-side-nav > li > a b{ font-weight:inherit; } /* 右侧主区 */ .kvm_detail .sk-modal-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow:hidden; } .kvm_detail .sk-main-head{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 18px 0; } .kvm_detail .sk-main-body{ padding:18px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } .kvm_detail .sk-main-body::-webkit-scrollbar{ width:7px; } .kvm_detail .sk-main-body::-webkit-scrollbar-thumb{ background:var(--sk-border-3); border-radius:6px; } .kvm_detail .sk-main-body::-webkit-scrollbar-thumb:hover{ background:var(--sk-mut); } /* 右上角低调 ghost 圆钮（刷新/关闭） */ .sk-winbar .sk-hbtn{ width:32px; height:32px; padding:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--sk-ink-2); background:var(--sk-card); border:1px solid var(--sk-border-3); transition:all .15s; cursor:pointer; text-decoration:none; } .sk-winbar .sk-hbtn{ width:30px; height:30px; } .sk-winbar .sk-hbtn i{ font-size:12.5px; margin:0; } .sk-winbar .sk-hbtn:hover{ background:var(--sk-brand-bg); color:var(--sk-brand-d); border-color:var(--sk-brand-l); } .sk-winbar .sk-hbtn.sk-hbtn-close:hover{ background:var(--sk-danger-bg); color:var(--sk-danger); border-color:transparent; } /* 移动端：两栏塌成上下，导航横向滚动 */ @media(max-width:767px){ .kvm_detail.sk-modal-2col{ flex-direction:column; min-height:0; } .kvm_detail .sk-modal-side{ width:auto; flex:none; border-right:0; border-bottom:1px solid var(--sk-border); padding:10px; } .kvm_detail .sk-side-head{ padding:4px 6px 10px; } .kvm_detail .sk-side-nav{ flex-direction:row; overflow-x:auto; gap:4px; -webkit-overflow-scrolling:touch; } .kvm_detail .sk-side-nav > li > a b{ white-space:nowrap; } /* 移动端整体滚动，取消桌面的固定高度/局部滚动 */ #serverModalPjax{ max-height:none; overflow:visible; } .kvm_detail .sk-modal-main{ overflow:visible; } .kvm_detail .sk-main-body{ overflow-y:visible; } .kvm_detail .sk-modal-side{ overflow-y:visible; } } /* 实例卡：主机名 + 右上状态胶囊 + 操作排 + 资源指标（控制台风格） */ .kvm_detail .sk-inst-card{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-lg); background:var(--sk-card); padding:18px; margin-bottom:14px; } .kvm_detail .sk-inst-head{ display:flex; align-items:flex-start; justify-content:flex-start; gap:12px; } .kvm_detail .sk-inst-head > .sk-status-pill{ margin-left:auto; } .kvm_detail .sk-inst-os{ flex:0 0 auto; align-self:center; display:flex; align-items:center; justify-content:center; } .kvm_detail .sk-inst-os img{ width:36px; height:36px; object-fit:contain; } .kvm_detail .sk-inst-os i{ font-size:32px; line-height:1; color:var(--sk-ink-2); } .kvm_detail .sk-inst-title{ font-size:17px; font-weight:600; color:var(--sk-ink); line-height:1.3; word-break:break-all; } .kvm_detail .sk-inst-sub{ font-size:12.5px; color:var(--sk-mut); margin-top:3px; word-break:break-all; } /* 状态胶囊：圆点 + 文字，颜色随电源状态（开机绿 / 关机红 / 异常黄） */ .kvm_detail .sk-status-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:20px; font-size:12.5px; font-weight:500; background:var(--sk-head); color:var(--sk-mut); white-space:nowrap; } .kvm_detail .sk-status-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; } .kvm_detail .sk-status-pill b{ font-size:12.5px !important; font-weight:500; color:inherit !important; margin:0; display:inline-flex; align-items:center; } .kvm_detail .sk-status-pill b i{ display:none; } .kvm_detail .sk-status-pill.sk-on{ background:var(--sk-success-bg); color:var(--sk-success); } .kvm_detail .sk-status-pill.sk-off{ background:var(--sk-danger-bg); color:var(--sk-danger); } .kvm_detail .sk-status-pill.sk-warn{ background:var(--sk-warn-bg); color:var(--sk-warn); } /* 提示消息 */ .kvm_detail .sk-inst-msg{ margin-top:10px; font-size:13px; } /* 操作按钮排 */ .kvm_detail .sk-inst-acts{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; } /* 按钮排在实例卡内时（物理服务器）：与上方状态留间距 */ .kvm_detail .sk-inst-card > .sk-inst-acts{ margin:15px 0 0; } .kvm_detail .sk-inst-acts .btn-group, .kvm_detail .sk-inst-acts .btn{ margin:0 !important; vertical-align:middle; } .kvm_detail .sk-inst-acts .m-r-mini{ margin-right:0 !important; } .kvm_detail .sk-inst-acts .btn{ padding:7px 15px !important; border-radius:9px !important; font-weight:400 !important; } /* 普通按钮（开机/关机/重启/PUSH）：文字次级灰、图标更淡灰、hover 加深 */ .kvm_detail .sk-inst-acts .btn-white{ color:var(--sk-ink) !important; border-color:var(--sk-border-3) !important; } .kvm_detail .sk-inst-acts .btn-white i{ color:var(--sk-ink-2) !important; } .kvm_detail .sk-inst-acts .btn-white:hover, .kvm_detail .sk-inst-acts .btn-white:focus{ color:var(--sk-ink) !important; background:var(--sk-head) !important; border-color:var(--sk-border-3) !important; } .kvm_detail .sk-inst-acts .btn-white:hover i{ color:var(--sk-ink-2) !important; } .kvm_detail .sk-inst-acts .caret{ opacity:.5; } .kvm_detail .sk-inst-acts .btn-info .caret{ border-top-color:var(--sk-brand-d); opacity:.9; } /* 远程连接（主操作）：描边高亮，图标同品牌色 */ .kvm_detail .sk-inst-acts .btn-info{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; border:1px solid var(--sk-brand-l) !important; box-shadow:none !important; } .kvm_detail .sk-inst-acts .btn-info i{ color:var(--sk-brand-d) !important; } .kvm_detail .sk-inst-acts .btn-info:hover, .kvm_detail .sk-inst-acts .btn-info:focus{ background:var(--sk-brand-bg2) !important; border-color:var(--sk-brand) !important; } /* 资源指标卡：大数字（CPU/内存为实时使用率）+ 标签 + 进度条 */ .kvm_detail .sk-res-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 14px; } .kvm_detail .sk-res{ background:var(--sk-head); border-radius:12px; padding:14px 16px; } .kvm_detail .sk-res-pct{ display:block; font-size:23px; font-weight:600; color:var(--sk-ink); line-height:1.15; } .kvm_detail .sk-res-pct.text-success{ color:var(--sk-brand) !important; } .kvm_detail .sk-res-u{ font-size:14px; font-weight:400; color:var(--sk-ink-2); } .kvm_detail .sk-res-k{ display:block; color:var(--sk-mut); font-size:12px; margin:5px 0 10px; } .kvm_detail .sk-res-line{ height:4px; border-radius:3px; background:var(--sk-border); box-shadow:none; overflow:hidden; margin:0; } .kvm_detail .sk-res-line .progress-bar{ height:100%; box-shadow:none; background:var(--sk-brand); transition:width .5s ease; } .kvm_detail .sk-res-line .progress-bar.progress-bar-success{ background:var(--sk-brand); } .kvm_detail .sk-res-line .progress-bar.progress-bar-warning{ background:var(--sk-warn); } .kvm_detail .sk-res-line .progress-bar.progress-bar-danger{ background:var(--sk-danger); } .kvm_detail .sk-res-line-static{ opacity:.55; } .kvm_detail .sk-res-sub{ display:block; font-size:12px; font-weight:500; color:var(--sk-ink-2); line-height:1.1; letter-spacing:.2px; } @media(max-width:640px){ .kvm_detail .sk-res-bar{ grid-template-columns:repeat(2,1fr); } } /* 信息卡 / 付费卡：描边圆角卡 + 卡头操作区 */ .kvm_detail .sk-info-card{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-lg); overflow:hidden; margin-bottom:14px; box-shadow:none; background:var(--sk-card); } .kvm_detail .sk-info-card > .list-group-item.heading{ display:flex; align-items:center; gap:10px; background:transparent; padding:13px 16px 11px; border:0; margin:0; } /* 合并卡里的第二小节标题（付费信息）：加上分隔线区分 */ .kvm_detail .sk-info-card > .list-group-item.heading.sk-sub-head{ border-top:1px solid var(--sk-border-2); margin:6px 16px 0; padding:15px 0 11px; } .kvm_detail .sk-info-card .heading b.text-black{ font-weight:600; font-size:13.5px; } .kvm_detail .sk-info-card .heading b.text-black::before{ display:none; } .kvm_detail .sk-head-ic2{ width:15px; height:15px; color:var(--sk-mut); margin-right:8px; vertical-align:-3px; flex:0 0 auto; } .kvm_detail .sk-head-acts{ margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px 14px; font-size:12.5px; } .kvm_detail .sk-head-acts a{ white-space:nowrap; } .kvm_detail .sk-head-acts .sk-auto-renew{ margin:0; font-weight:400; color:var(--sk-ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; } .kvm_detail .sk-head-acts .sk-auto-renew input{ margin:0; vertical-align:middle; } .kvm_detail .sk-head-acts .icon-lock{ color:var(--sk-brand); } /* 属性网格（方案A）：标签在上、值在下，3 列，留白分隔 */ .kvm_detail .sk-kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px; padding:18px; background:transparent; } .kvm_detail .sk-kv-i{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:0; background:transparent; border:0; } .kvm_detail .sk-kv-full{ grid-column:1 / -1; flex-direction:row; align-items:baseline; gap:10px; } /* 跨整行、标签在上内容在下（如用户备注） */ .kvm_detail .sk-kv-wide{ grid-column:1 / -1; } .kvm_detail .sk-kv-wide .sk-v{ white-space:pre-wrap; line-height:1.6; } .kvm_detail .sk-k{ color:var(--sk-mut); font-size:12px; flex:0 0 auto; white-space:nowrap; } .kvm_detail .sk-v{ color:var(--sk-ink); font-size:14px; min-width:0; word-break:break-all; } .kvm_detail .sk-kv-full .sk-v{ flex:0 1 auto; } .kvm_detail .sk-acts{ flex:0 0 auto; margin-left:auto; white-space:nowrap; padding-left:12px; } .kvm_detail .sk-acts a{ margin-left:12px; } .kvm_detail .sk-acts a:first-child{ margin-left:0; } @media(max-width:640px){ .kvm_detail .sk-kv{ grid-template-columns:1fr 1fr; } .kvm_detail .sk-kv-full{ grid-column:1 / -1; } } /* ===== 图一冷浅蓝灰色系 + 降噪（减少加粗），更清爽 ===== */ /* 顶栏 / 左栏 / 指标卡：冷浅蓝灰底（暗色回退主题色） */ .sk-winbar, .kvm_detail .sk-modal-side, .kvm_detail .sk-res{ background:#f4f6fb; } html[data-skin="dark"] .sk-winbar, html[data-skin="dark"] .kvm_detail .sk-modal-side, html[data-skin="dark"] .kvm_detail .sk-res{ background:var(--sk-head); } /* 减少加粗：标题/数值用中等字重，键值正文不加粗 */ .kvm_detail .sk-inst-title{ font-weight:500; } .kvm_detail .sk-res-pct{ font-weight:500; } .kvm_detail .sk-info-card .heading b.text-black{ font-weight:500; } .kvm_detail .sk-kv .sk-v, .kvm_detail .sk-kv .sk-v b{ font-weight:400; } .kvm_detail .sk-inst-card b{ font-weight:500; } /* ===== 连接信息卡：现代 alert 风格（浅品牌底 + 等宽字体，突出登录凭证；置于信息卡上方） ===== */ /* 顺序：实例卡 → 连接卡 → 云服务器信息卡 → 付费卡（用 order 调，不改 HTML） */ .kvm_detail #detailForm{ display:flex; flex-direction:column; } .kvm_detail #detailForm > *{ order:3; } .kvm_detail #detailForm > .sk-inst-card{ order:1; } .kvm_detail #detailForm > .sk-inst-acts{ order:2; } .kvm_detail #detailForm > .sk-res-bar{ order:3; } .kvm_detail #detailForm > .sk-conn-card{ order:4; } .kvm_detail #detailForm > .sk-info-card:not(.sk-conn-card){ order:5; } /* alert 外观：浅品牌底 + 品牌边框 + 图标 */ .kvm_detail .sk-conn-card{ background:var(--sk-brand-bg2); border:1px solid var(--sk-brand-bg); box-shadow:none; } .kvm_detail .sk-conn-card .heading{ border:0 !important; } .kvm_detail .sk-conn-card .heading b.text-black{ color:var(--sk-brand-d) !important; display:flex; align-items:center; } .kvm_detail .sk-conn-card .heading b.text-black::before{ display:none; } .kvm_detail .sk-conn-card .sk-conn-ic{ width:16px; height:16px; color:var(--sk-brand); margin-right:8px; flex:0 0 auto; } .kvm_detail .sk-conn-card .sk-v{ color:var(--sk-ink); font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,'Courier New',monospace; letter-spacing:.02em; } /* 紧凑：减小标题/内容内边距与行距 */ .kvm_detail .sk-conn-card .heading{ padding:11px 16px 3px !important; } .kvm_detail .sk-conn-card .sk-kv{ row-gap:9px; } /* 查看/隐藏/复制：统一灰色图标 + hover 加深 */ .kvm_detail .sk-conn-card .sk-eye, .kvm_detail .sk-conn-card .icon-copy{ color:var(--sk-mut) !important; margin-left:8px; cursor:pointer; } .kvm_detail .sk-conn-card .sk-eye:hover, .kvm_detail .sk-conn-card .icon-copy:hover{ color:var(--sk-ink-2) !important; } .kvm_detail .sk-conn-card .sk-eye-ic{ width:15px; height:15px; vertical-align:-3px; } /* 用户备注标签旁的编辑图标 */ .kvm_detail .sk-remark-edit{ color:var(--sk-mut); margin-left:6px; cursor:pointer; } .kvm_detail .sk-remark-edit:hover{ color:var(--sk-brand); } .kvm_detail .sk-remark-edit i{ font-size:12px; } /* 实例名后的备注图标（hover 显示备注、点击编辑） */ .kvm_detail .sk-name-remark{ display:inline-flex; align-items:center; color:var(--sk-mut); margin-left:8px; cursor:pointer; vertical-align:middle; } .kvm_detail .sk-name-remark:hover{ color:var(--sk-brand); } .kvm_detail .sk-name-remark.has-remark{ color:var(--sk-brand); } .kvm_detail .sk-name-remark svg{ width:15px; height:15px; } /* ===== 详情选项卡页面通用视觉增强（网络/硬盘/安全组/备份/任务/日志） ===== */ /* 顶部工具栏按钮间距 */ .kvm_detail .sk-main-body .btn.m-b{ margin-bottom:14px; } /* 卡片 panel：描边圆角、无阴影 */ .kvm_detail .sk-main-body .panel{ border:1px solid var(--sk-border-2) !important; border-radius:var(--sk-radius-lg) !important; box-shadow:none !important; background:var(--sk-card); overflow:hidden; margin-bottom:14px; } .kvm_detail .sk-main-body .panel > .panel-body{ padding:0; } .kvm_detail .sk-main-body .panel > .panel-heading{ background:var(--sk-head) !important; border-bottom:1px solid var(--sk-border-2) !important; padding:11px 16px; font-weight:500; } /* 表格：清爽表头 + 细分隔 + hover */ .kvm_detail .sk-main-body .table{ margin:0; } .kvm_detail .sk-main-body .table > tbody > tr > td, .kvm_detail .sk-main-body .table > thead > tr > th{ padding:11px 16px !important; border-color:var(--sk-border-2) !important; vertical-align:middle; } .kvm_detail .sk-main-body .table > tbody > tr.active > td{ background:var(--sk-head) !important; color:var(--sk-mut) !important; font-weight:400; } .kvm_detail .sk-main-body .table > tbody > tr:not(.active):hover > td{ background:var(--sk-card-2) !important; } /* list-group（键值信息卡）：描边圆角，排除概览页自定义卡 */ .kvm_detail .sk-main-body .list-group:not(.sk-info-card){ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-lg); overflow:hidden; box-shadow:none; margin-bottom:14px; } .kvm_detail .sk-main-body .list-group:not(.sk-info-card) > .list-group-item{ border:0; border-bottom:1px solid var(--sk-border-2); padding:11px 16px; background:var(--sk-card); } .kvm_detail .sk-main-body .list-group:not(.sk-info-card) > .list-group-item:last-child{ border-bottom:0; } /* 分页：右对齐 + 上下边距 */ .kvm_detail .sk-main-body .pagination{ display:block !important; text-align:right; margin:16px 4px 6px !important; padding:0; }