@charset "utf-8"; /* ============================================================================= * taoyi 主题 · base.css —— 全局框架样式 * ----------------------------------------------------------------------------- * 依据：.workbuddy-ai/artifacts/taoyi-style-spec.md（原站 style.css / public.css 行号） * .workbuddy-ai/artifacts/taoyi-theme-design.md §6.5 * 约定： * 1) rem 基准 = 1920 视口下 1rem = 100px（base.html 内联脚本设置）， * 所有数值直接沿用原站 rem 阶梯，不自行换算成 px。 * 2) 沿用原站 class 名的不加前缀；本主题新增的统一加 `ty-` 前缀。 * 3) 颜色只允许使用 :root 变量或 style-spec §3.1.2 色表，禁止 #066aab。 * 4) 装饰图用相对路径 ../images/xxx（与 CSS 同在已发布的主题资源树下， * 不依赖域名/子目录，等价于 {ld:src src='taoyi/images/xxx'}）。 * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. CSS 变量（原站 style.css L3-39，含各断点降级 L41-81） * -------------------------------------------------------------------------- */ :root { --i_color: #0a3864; /* L4 主色：深蓝（原站实测，非 #066aab） */ --i_color_hover: #38b6ff; /* L6148 强调/悬停蓝 */ --i_color2: #fff; /* L8 副色：白 */ --top_h: 1.2rem; /* L12 顶部条 + 主导航总高 */ --header_height: 1.2rem; /* L14 */ --title_fz: 0.4rem; /* L22 板块大标题 */ --contain-width: 1.6rem; /* L26 盒子左右间距 */ --box-bottom: 0.95rem; /* L30 盒子之间距离 */ --border_color: rgba(51, 51, 51, 0.12);/* L34（L18 的 .2 被 L34 覆盖，取 .12） */ --boxShadow: 0 2px 10px rgb(0 88 167 / 20%); /* L38 */ --c_title: #333333; /* 标题文字 */ --c_text: #666666; /* 正文/辅助 */ --c_weak: #999999; /* 弱化灰 */ --c_line: #dddddd; /* 分隔线 */ --c_bg1: #f5f5f5; /* 浅灰底 1 */ --c_bg2: #f6f6f6; /* 浅灰底 2 */ /* 中文字体栈（原站字体栈无任何中文字体，必须补，见 style-spec §5.5） */ --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --font-en: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; } @media (max-width: 1366px) { :root { --contain-width: 0.5rem; --box-bottom: 0.55rem; } /* L41-46 */ } @media (max-width: 1024px) { :root { --top_h: 0.9rem; --header_height: 0.9rem; --title_fz: 0.3rem; --contain-width: 0.5rem; --box-bottom: 0.55rem; } /* L49-61 */ } @media (max-width: 768px) { :root { --top_h: 0.5rem; --header_height: 0.5rem; --border_color: rgba(0, 0, 0, 0.06); } /* L63-71 */ } @media (max-width: 425px) { :root { --title_fz: 0.2rem; --contain-width: 0.2rem; --box-bottom: 0.3rem; } /* L73-81 */ } /* ----------------------------------------------------------------------------- * 2. Reset * -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-cn); font-size: 0.16rem; color: #333; line-height: 1.6; background: #fff; padding-top: var(--top_h); /* 抵消固定页头 */ -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.4; } ul, ol { list-style: none; } img { border: 0; max-width: 100%; vertical-align: middle; } a { color: #333; text-decoration: none; transition: color .3s ease; } a:hover { color: var(--i_color); } input, button, textarea, select { font-family: inherit; font-size: inherit; outline: none; } button { cursor: pointer; border: 0; background: none; } table { border-collapse: collapse; width: 100%; } .clearfix::after { content: ""; display: block; clear: both; } /* ----------------------------------------------------------------------------- * 3. SVG 图标（local sprite，见 icons.html） * 注意：此处**不要**写 fill:currentColor。 * 原因：描边类图标（i-angle-right / i-search …）的 path 上写的是 fill="none" * + stroke="currentColor"，CSS 的 fill 优先级高于呈现属性，会把它们 * 填成一团色块。实心图标的 path 自身已写 fill="currentColor"，无需再补。 * -------------------------------------------------------------------------- */ .ty-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ty-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; color: inherit; } .ty-icon--fill { fill: currentColor; } /* ----------------------------------------------------------------------------- * 4. 容器（style.css L83-116） * -------------------------------------------------------------------------- */ .wrap { width: 94vw; max-width: 1300px; margin: 0 auto; } /* L83-90 */ .wrap02 { width: 1640px; max-width: 94vw; margin: 0 auto; } /* L101-108 */ @media (min-width: 1921px) { .wrap { width: 85vw; max-width: none; } /* L111-116 */ } /* ----------------------------------------------------------------------------- * 5. 板块标题 .public_title（L281-320） * -------------------------------------------------------------------------- */ .public_title { text-align: left; } .public_title h3 { font-size: var(--title_fz); font-weight: bold; color: var(--c_title); font-family: var(--font-cn); line-height: 1.3; text-transform: capitalize; } .public_title h4 { font-size: 0.16rem; color: var(--c_text); font-weight: normal; margin-top: 0.1rem; } .public_title.public_center { text-align: center; } .public_title.public_center h3::after { content: ""; display: block; width: 0.6rem; height: 0.03rem; background: var(--i_color); margin: 0.12rem auto 0; } /* ----------------------------------------------------------------------------- * 6. 按钮 .public_btn（L147-262） * 圆形扩散 .su_button_circle 用纯 CSS transform 实现，不引 button.js * -------------------------------------------------------------------------- */ .public_btn { position: relative; display: inline-block; overflow: hidden; border: 1px solid var(--i_color); background: #fff; vertical-align: middle; } .public_btn a { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 0.12rem 0.28rem; /* L174 */ font-size: 0.18rem; /* L150 */ font-family: var(--font-en); color: var(--i_color); transition: color .4s ease; } .public_btn a .ty-icon { width: 0.2rem; height: 0.2rem; margin-left: 0.15rem; /* L164-170 */ transition: transform .4s ease; } .public_btn .su_button_circle { position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; padding-bottom: 100%; border-radius: 50%; background: var(--i_color); transform: translate(-50%, -50%) scale(0); transition: transform .55s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } .public_btn:hover .su_button_circle { transform: translate(-50%, -50%) scale(2.4); } .public_btn:hover a { color: #fff; } .public_btn:hover a .ty-icon { transform: translateX(0.04rem); } /* 变体：实心主色按钮（L235-262） */ .public_btn.other_btnClass { background: var(--i_color); border-color: var(--i_color); } .public_btn.other_btnClass a { background: var(--i_color); color: #fff; } .public_btn.other_btnClass .su_button_circle { background: #fff; } .public_btn.other_btnClass:hover a { color: var(--i_color); } @media (max-width: 1024px) { .public_btn a { padding: 0.1rem 0.25rem; } } /* L219 */ @media (max-width: 375px) { .public_btn a { padding: 0.08rem 0.18rem; } } /* L227 */ /* ----------------------------------------------------------------------------- * 7. 页头 Header（style.css L336-1012 / §3.5.1） * -------------------------------------------------------------------------- */ .ty-header { position: fixed; top: 0; left: 0; right: 0; z-index: 2014; /* L336-348 */ height: var(--top_h); } .top_cont { height: 100%; background: #fff; /* L350-357 */ transition: all .5s ease; } .top_cont_box { display: flex; height: 100%; align-items: stretch; } /* L360-364 */ .logodiv { height: 100%; width: 1.21rem; flex: 0 0 auto; } /* L502-506 */ .logodiv .logo { display: block; height: 100%; } .logodiv .logo img { width: 100%; height: 100%; object-fit: cover; } /* L526-534 */ .top_cont_info { flex: 1 1 auto; min-width: 0; padding: 0.2rem 0 0.15rem 0.25rem; /* L388-400 */ display: flex; flex-direction: column; justify-content: space-between; } /* 7.1 顶部信息条 */ .tci_info { display: flex; justify-content: space-between; align-items: center; /* L402-408 */ } .tcii_left { font-size: 0.18rem; color: var(--i_color); /* L410-416 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcii_right > ul { display: flex; align-items: center; gap: 0.65rem; } /* L421-425 */ .tcii_right > ul > li > a { display: inline-flex; align-items: center; gap: 0.05rem; font-size: 0.15rem; color: var(--c_text); } .tcii_right > ul > li > a:hover { color: var(--i_color); } .tciir_icon { display: flex; align-items: center; gap: 0.2rem; } /* L443-447 */ .tciir_icon a { color: #999; font-size: 0.18rem; } /* L453-455 */ .tciir_icon a:hover { color: var(--i_color); } /* 7.2 主导航 */ .top { height: 50%; width: 100%; /* L366-378 */ display: flex; flex-wrap: wrap; align-items: center; } .i_nav { display: flex; flex-wrap: nowrap; gap: 0 0.72rem; } /* L550-563 */ .i_nav > li { position: relative; } .i_nav > li > a { display: block; font-size: 0.2rem; /* L606 */ font-weight: bold; /* L618 */ font-family: var(--font-cn); color: var(--c_title); line-height: 0.32rem; /* L620 */ white-space: nowrap; } .i_nav > li:hover > a, .i_nav > li.current-menu-item > a { color: var(--i_color); } /* L632 */ .i_nav > li.current-menu-item > a::before { content: ""; position: absolute; left: 50%; bottom: -0.06rem; width: 0.3rem; height: 0.02rem; margin-left: -0.15rem; background: var(--i_color); /* L584 */ } /* 下拉子菜单（L667-720） */ .i_nav .sub-menu { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(0.08rem); min-width: 1.9rem; padding: 0.08rem 0; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); border-top: 0.02rem solid var(--i_color); opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility .3s; z-index: 20; } .i_nav li.menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .i_nav .sub-menu > li > a { display: block; font-size: 0.15rem; /* L672 */ line-height: 0.36rem; padding: 0 0.16rem; /* L667-687 */ color: var(--c_text); white-space: nowrap; } .i_nav .sub-menu > li { border-bottom: 1px solid var(--border_color); } /* L664 */ .i_nav .sub-menu > li:last-child { border-bottom: 0; } /* 原站记录为「主色底 + #979797 字」（L690-692），灰字在深蓝底上对比度不足，这里统一改为白字，其余保持一致。 */ .i_nav .sub-menu > li:hover > a { background: var(--i_color); color: #fff; } /* 无子栏目时模板会输出空的