/* ========================================================= theme1.css — 通用样式库 v2.0 ========================================================= */ /* ========================================================= 1. 设计令牌 —— CSS 变量 修改此处即可全局换肤 ========================================================= */ :root { /* ---------------------------------------- 1a. 品牌色 B = Brand，两位编号： 第二位数字越大 → 色值越深/越重 ---------------------------------------- */ --B1-1: #1a8c44; /* 品牌色 — 浅色变体 */ --B1-5: #0573c7; /* 品牌色 — 主色（深红） */ --B1-6: #ffb800; /* 品牌副色 — 金色 */ --B1-7: #8392a5; /* 品牌色 — 轻色（灰蓝） */ --B1-8: #272e45; /* 品牌色 — 深色（深蓝灰） */ /* ---------------------------------------- 1b. 语义色 S = Semantic S1=金色 / S2=红色 / S3=绿色 / S4=蓝色 / S5=灰色 ---------------------------------------- */ --S6-1: #fdae38; /* 金色 — 辅助/高亮点缀 / 状态徽章:待审核 / 进行中 / 新功能*/ --S6-2: #c5221f; /* 红色 — 文本颜色、错误提示 / 状态徽章: 已驳回 / 错误*/ --S6-3: #0d904f; /* 绿色 — 成功/正确提示 / 状态徽章:已通过 / 优秀 */ --S6-4: #1a73e8; /* 蓝色 — 信息提示、链接色 / 状态徽章:待审核 / 进行中 / 新功能 */ --S6-5: #5f6368; /* 灰色 — 辅助文本 / 状态徽章:已读 / 普通*/ --S6-6: #999; /* 灰色 — 弱化辅助文本 / 状态徽章: */ --S6-7: #e37400; /* 橙色 — 状态徽章:重要 / 紧急 */ --S6-8: #7c3aed; /* 橙色 — 状态徽章:特殊 */ /* ---------------------------------------- 1c. 中性色 — 背景/表面 N1 = 背景色层（数字越大越浅/越白） ---------------------------------------- */ --N1-1: #f6f7f8; /* 页面背景色 */ --N1-2: #FFFFFF; /* 白色表面（卡片、弹窗） */ --N1-3: #f8f9fb; /* 浅灰表面（hover 行、次级卡片） */ /* ---------------------------------------- 1d. 中性色 — 文字 N2 = 文字色（数字越大越浅） ---------------------------------------- */ --N2-1: #272e45; /* 主文字 — 标题、正文 */ --N2-2: #686b73; /* 次文字 — 正文次要信息 */ --N2-6: #999999; /* 弱化文本 */ --N2-3: #B3B5B9; /* 水印/占位文字 */ --N2-4: #B9BCBF; /* 禁用文字 */ --N2-5: #FFFFFF; /* 白色文字（深色底上使用） */ /* ---------------------------------------- 1e. 遮罩 / 描边 ---------------------------------------- */ --N3-1: #000000; /* 遮罩层颜色 */ --N4-1: #E8E9EC; /* 分割线 / 描边颜色 */ --N4-2: #d4d6dd; /* 深一级描边（hover 态边框） */ /* ---------------------------------------- 1f. 圆角 ---------------------------------------- */ --BorderRadius-min: 2px; /* 圆角 — 小 */ --BorderRadius-max: 4px; /* 圆角 — 大（通用） */ /* ---------------------------------------- 1g. 间距 ---------------------------------------- */ --S1: 6px; /* 间距 — 最小 */ --S2: 10px; /* 间距 — 小 */ --S3: 16px; /* 间距 — 中（新增） */ --S4: 20px; /* 间距 — 大 */ --S5: 40px; /* 间距 — 加大 */ /* ---------------------------------------- 1h. 字号层级 ---------------------------------------- */ --headlineSize: 18px; /* 页面大标题（原 headilneSize 的修正版） */ --headilneSize: 18px; /* 保留旧拼写，兼容旧代码 */ --titleSize: 18px; /* 标题 — 中 */ --SubheadSize: 15px; /* 标题 — 小 */ --ContentSize: 13px; /* 正文 */ --CaptionSize: 13px; /* 水印/辅助文字 */ --FootnoteSize: 13px; /* 备注 */ /* ---------------------------------------- 1i. 字体家族 ---------------------------------------- */ --font-family-base: "思源黑体","Microsoft YaHei", "Noto Serif CJK SC", "Source Han Serif SC", "Microsoft YaHei", serif; /* ---------------------------------------- 1j. 布局尺寸 ---------------------------------------- */ --max_width: 1440px; /* 页面最大宽度 */ --min_width: 400px; /* 页面最小宽度 */ --min_top_height: 70px; /* 顶部导航高度 */ --min_bottom_height: 102px; /* 底部高度 (版权信息) */ --min_content_height: calc(100vh - var(--min_top_height) - 150px); /* ---------------------------------------- 1k. 阴影层级（新增） 你的设计偏平，保留极简阴影 ---------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* ---------------------------------------- 1l. Z-index 层级（新增） ---------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 999; --z-toast: 1050; /* ---------------------------------------- 1m. 过渡动效（新增） 你全站统一用 all 0.3s linear，这里保留 额外加一个 ease 变体 ---------------------------------------- */ --transition-base: all 0.3s linear; --transition-ease: all 0.3s ease; --nav-h: 64px; --el-component-size: 38px !important; } /* ========================================================= 2. CSS Reset / 基础样式 ========================================================= */ *, *::before,*::after { padding: 0; margin: 0; box-sizing: border-box;} * {font-family: var(--font-family-base);font-size: 1em;line-height: 24px;} html { overflow-x: hidden; font-size: 1em; position: relative; min-height: 100%; background: var(--N1-1);} body {background: var(--N1-1);margin: 0;padding: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} img {border: 0;vertical-align: bottom;max-width: 100%;height: auto;} a,a:focus,a:active {color: var(--N2-1);text-decoration: none;cursor: pointer;} a:link {color: var(--S4-6);text-decoration: none;} a:visited {color: var(--S4-6);text-decoration: none;} /* 聚焦态：键盘导航友好 */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline: 2px solid var(--S4-6);outline-offset: 2px;} ul, ol {list-style: none;} .cursor_p{cursor: pointer;} /* ========================================================= 3. 页面容器 ========================================================= */ .container {max-width: var(--max_width); min-width: var(--min_width); margin: 0 auto; } .clearfix:after { content: ""; display: block; clear: both; } .fl { float: left; } .fr { float: right; } .content_top {/* 页面顶部内容：居中，限制最大宽度 */max-width: var(--max_width); min-width: var(--min_width); margin: auto;} .container_box {/* 页面内容：居中，带约束 */max-width: var(--max_width);min-width: var(--min_width);margin: 0 auto;} .container_box_h {/* 最小高度 */min-height: var(--min_content_height);} .container_box_h2{/* 最小高度 */min-height: 400px; padding: 10px 0;} /* ========================================================= 4. 栅格系统 —— 24 宫格（与原来兼容） ========================================================= */ .grid {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;} .x0 { width: auto; } .x1 { width: 4.166666666666667%; } .x2 { width: 8.333333332%; } .x3 { width: 12.49999999%; } .x4 { width: 16.66666666%; } .x5 { width: 20.83333333%; } .x6 { width: 24.999999996%; } .x7 { width: 29.1666662%; } .x8 { width: 33.33333286%; } .x9 { width: 37.49999994%; } .x10 { width: 41.6666666%; } .x11 { width: 45.83333326%; } .x12 { width: 49.9999999%; } .x13 { width: 54.166666658%; } .x14 { width: 58.33333332%; } .x15 { width: 62.4999985%; } .x16 { width: 66.666665%; } .x17 { width: 70.83333%; } .x18 { width: 74.999998%; } .x19 { width: 79.166665154%; } .x20 { width: 83.333331814%; } .x21 { width: 87.499998474%; } .x22 { width: 91.66666514%; } .x23 { width: 95.8333318%; } .x24 { width: 100%; } .xx20 { width: 20%; } /* 栅格间距辅助（新增） */ .grid.gap-s1 { gap: var(--S1); } .grid.gap-s2 { gap: var(--S2); } .grid.gap-s3 { gap: var(--S3); } .grid.gap-s4 { gap: var(--S4); } .fc { clear: both; } /* ========================================================= 5. Flex 布局工具 命名规则：xl_{主轴对齐}_{交叉轴对齐} ========================================================= */ /* 主轴对齐 */ .xl_flex_start { display: flex; flex-wrap: wrap; justify-content: flex-start; gap:var(--S2);} .xl_flex_center { display: flex; flex-wrap: wrap; justify-content: center; gap:var(--S2);} .xl_flex_end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap:var(--S2);} .xl_space_between { display: flex; flex-wrap: wrap; justify-content: space-between; gap:var(--S2);} .xl_space_around { display: flex; flex-wrap: wrap; justify-content: space-around; gap:var(--S2);} .xl_space_evenly { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap:var(--S2);} /* 主轴 + 交叉轴组合 */ .xl_flex_left_center { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap:var(--S2);} .xl_flex_end_center { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap:var(--S2);} .xl_center_center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap:var(--S2);} .xl_space_between_center{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap:var(--S2); } /* 仅交叉轴 */ .xl_align_center { display: flex; flex-direction: row; align-items: center; gap:var(--S2);} .xl_align_start { display: flex; flex-direction: row; align-items: flex-start; gap:var(--S2);} .xl_align_end { display: flex; flex-direction: row; align-items: flex-end; gap:var(--S2);} .xl_align_stretch { display: flex; flex-direction: row; align-items: stretch; gap:var(--S2);} /* Flex 简写辅助（新增） */ .xl_flex_wrap { flex-wrap: wrap; } .xl_flex_nowrap { flex-wrap: nowrap; } .xl_flex_column { display: flex; flex-direction: column; } .xl_flex_1 { flex: 1; } .xl_flex_auto { flex: 1 1 auto; } .xl_flex_none { flex: none; } /* 子项对齐（新增） */ .xl_self_center { align-self: center; } .xl_self_start { align-self: flex-start; } .xl_self_end { align-self: flex-end; } .xl_self_stretch { align-self: stretch; } /* ========================================================= 6. 显示与定位工具（新增） ========================================================= */ .xl_block { display: block; } .xl_inline_block { display: inline-block; } .xl_inline { display: inline; } .xl_hidden { display: none !important; } .xl_relative { position: relative; } .xl_absolute { position: absolute; } .xl_fixed { position: fixed; } .xl_sticky { position: sticky; top: 0; z-index: var(--z-sticky); } /* 定位快捷方式 */ .xl_t0 { top: 0; } .xl_r0 { right: 0; } .xl_b0 { bottom: 0; } .xl_l0 { left: 0; } /* 宽高辅助 */ .xl_w_full { width: 100%; } .xl_h_full { height: 100%; } .xl_w_auto { width: auto; } .xl_h_auto { height: auto; } .xl_vw_full { width: 100vw; } .xl_vh_full { height: 100vh; } /* 溢出处理 */ .xl_overflow_hidden { overflow: hidden; } .xl_overflow_auto { overflow: auto; } .xl_overflow_scroll { overflow: scroll; } .xl_overflow_visible { overflow: visible; } .xl_overflow_x_auto { overflow-x: auto; } .xl_overflow_y_auto { overflow-y: auto; } /* 指针样式 */ .xl_cursor_pointer { cursor: pointer; } .xl_cursor_default { cursor: default; } .xl_cursor_not_allowed { cursor: not-allowed; } .xl_cursor_text { cursor: text; } /* 不透明度（新增） */ .xl_opacity_0 { opacity: 0; } .xl_opacity_25 { opacity: 0.25; } .xl_opacity_50 { opacity: 0.5; } .xl_opacity_75 { opacity: 0.75; } .xl_opacity_100 { opacity: 1; } /* 用户选择（新增） */ .xl_user_select_none { user-select: none; } .xl_user_select_all { user-select: all; } /* ========================================================= 7. 文字对齐与排版 ========================================================= */ .xl_text_left { text-align: left; } .xl_text_center { text-align: center; } .xl_text_right { text-align: right; } .xl_text_justify { text-align: justify; } .xl_nowrap { white-space: nowrap; } .xl_pre_wrap { white-space: pre-wrap; } .xl_break_word { word-break: break-word; } /* 单行文字截断（省略号） */ .xl_truncate {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} /* 多行截断 */ .Showline_1,.xl_line_clamp_1 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} .Showline_2,.xl_line_clamp_2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .Showline_3,.xl_line_clamp_3 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} .Showline_4,.xl_line_clamp_4 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;} /* 垂直书写（用于文化类装饰文字，你之前的写法） */ .xl_vertical_rl {writing-mode: vertical-rl;text-orientation: mixed;} /* ========================================================= 8. 字号与文字样式 ========================================================= */ .headline { font-size: var(--headlineSize); font-weight: bold; color: var(--N2-1); } .title { font-size: var(--titleSize); font-weight: bold; color: var(--N2-1); line-height: 36px; } .title_min { font-size: var(--titleSize); font-weight: normal; color: var(--N2-1); line-height: 36px; } .Subhead { font-size: var(--SubheadSize); font-weight: bold; color: var(--N2-1); line-height: 28px; } .Subhead_min{ font-size: var(--SubheadSize); font-weight: normal; color: var(--N2-1); line-height: 28px; } .Content { font-size: var(--ContentSize); color: var(--N2-2); line-height: 25px; } .Caption { font-size: var(--CaptionSize); color: var(--N2-3); } .Footnote { font-size: var(--FootnoteSize); color: var(--N2-3); line-height: 22px; } /* 字号快捷类（新增） */ .xl_fs_12 { font-size: 12px; } .xl_fs_13 { font-size: 13px; } .xl_fs_14 { font-size: 14px; } .xl_fs_15 { font-size: 15px; } .xl_fs_16 { font-size: 16px; } .xl_fs_18 { font-size: 18px; } .xl_fs_20 { font-size: 20px; } .xl_fs_24 { font-size: 24px; } .xl_fs_28 { font-size: 28px; } .xl_fs_36 { font-size: 36px; } /* 字重 */ .xl_fw_bold { font-weight: bold; } .xl_fw_normal { font-weight: normal; } .xl_fw_300 { font-weight: 300; } .xl_fw_500 { font-weight: 500; } .xl_fw_700 { font-weight: 700; } /* 行高 */ .xl_lh_1 { line-height: 1; } .xl_lh_1_5 { line-height: 1.5; } .xl_lh_2 { line-height: 2; } /* ========================================================= 9. 文字颜色（与原来一致） ========================================================= */ .xl_color_999 { color: #999 !important; } .xl_color_666 { color: var(--N2-6) !important; } .xl_color_333 { color: var(--N2-1) !important; } .xl_color_white { color: var(--N2-5) !important; } .xl_color_blue { color: var(--S4-6) !important; } .xl_color_red { color: var(--S6-2) !important; } .xl_color_green { color: var(--S6-3) !important; } .xl_color_yellow{ color: var(--S6-1) !important; } .xl_color_main { color: var(--N2-1) !important; } .xl_color_weak { color: var(--N2-2) !important; } /* ========================================================= 10. 背景颜色 ========================================================= */ .xl_bg_999 { background: #999 !important; } .xl_bg_666 { background: var(--N2-6) !important; } .xl_bg_red { background: var(--S6-2) !important; } .xl_bg_blue { background: var(--S6-4) !important; } .xl_bg_white { background: #fff !important; } .xl_bg_yellow{ background: var(--S6-1) !important; } .xl_bg_main { background: var(--B1-5) !important; } .xl_bg_page { background: var(--N1-1) !important; } /* ========================================================= 10. 图标颜色 ========================================================= */ .icon-bj-ppt{/*icon ppt*/ background: #0cbf03;} .icon-bj-excel{ /*icon excel*/ font-size:30px; color:#fb626d;} .icon-bj-word{ /*icon werd*/ font-size:30px; color:#3979e5;} .icon-bj-pdf{ /*icon PDF*/ font-size:30px; color:#fdae38;} .icon-bj-video{ /*icon video*/ font-size:30px; color:#fdae38;} .icon-bj-qt{ /*icon qt*/ font-size:30px; color:#3979e5;} /* ========================================================= 11. 间距工具 ========================================================= */ /* Padding */ .padding0 { padding: 0 !important; } .padding5 { padding: 5px !important;; } .padding10 { padding: 10px !important;; } .padding15 { padding: 15px !important;; } .padding20 { padding: 20px !important;; } .padding30 { padding: 30px !important;; } .padding40 { padding: 40px !important;; } .padding_top5 { padding-top: 5px; } .padding_top10 { padding-top: 10px; } .padding_top15 { padding-top: 15px; } .padding_top20 { padding-top: 20px; } .padding_top40 { padding-top: 40px; } .padding_bottom5 { padding-bottom: 5px; } .padding_bottom10{ padding-bottom: 10px; } .padding_bottom15{ padding-bottom: 15px; } .padding_bottom20{ padding-bottom: 20px; } .padding_bottom40{ padding-bottom: 40px; } .padding_left5 { padding-left: 5px; } .padding_left10 { padding-left: 10px; } .padding_left15 { padding-left: 15px; } .padding_left20 { padding-left: 20px; } .padding_left40 { padding-left: 40px; } .padding_right5 { padding-right: 5px; } .padding_right10 { padding-right: 10px; } .padding_right15 { padding-right: 15px; } .padding_right20 { padding-right: 20px; } .padding_right40 { padding-right: 40px; } /* Margin */ .margin5 { margin: 5px; } .margin10 { margin: 10px; } .margin15 { margin: 15px; } .margin20 { margin: 20px; } .margin30 { margin: 30px; } .margin40 { margin: 40px; } .margin_top5 { margin-top: 5px; } .margin_top10 { margin-top: 10px; } .margin_top15 { margin-top: 15px; } .margin_top20 { margin-top: 20px; } .margin_top40 { margin-top: 40px; } .margin_bottom5 { margin-bottom: 5px; } .margin_bottom10 { margin-bottom: 10px; } .margin_bottom15 { margin-bottom: 15px; } .margin_bottom20 { margin-bottom: 20px; } .margin_bottom40 { margin-bottom: 40px; } .margin_left5 { margin-left: 5px; } .margin_left10 { margin-left: 10px; } .margin_left15 { margin-left: 15px; } .margin_left20 { margin-left: 20px; } .margin_left40 { margin-left: 40px; } .margin_right5 { margin-right: 5px; } .margin_right10 { margin-right: 10px; } .margin_right15 { margin-right: 15px; } .margin_right20 { margin-right: 20px; } .margin_right40 { margin-right: 40px; } /* 水平居中 */ .xl_margin_auto { margin-left: auto; margin-right: auto; } /* ========================================================= 12. 线条与装饰 ========================================================= */ .xl_xx { border-bottom: 1px solid var(--N4-1); } .xl_top_xx { border-top: 1px solid var(--N4-1); } .xl_left_x { border-right: 1px solid var(--N4-1); } .xl_right_x { border-left: 1px solid var(--N4-1); } .xl_left_xx {/* 标题左侧装饰红条（你最常用的装饰元素） */height: 20px;width: 4px;display: inline-block;background: var(--B1-5);border-radius: 2px;margin-right: 12px;vertical-align: middle;} .xl_hx {/* 红色小横线（首页标题装饰） */display: inline-block;height: 3px;width: 45px;background: var(--B1-5);} .xl_h_xx {/* 水平横线（"更多"旁边的短横线） */display: inline-block;height: 1px;width: 30px;background: var(--B1-5);} .xl_hsfk {/* 红色菱形方块（大先生专题页标题装饰） */width: 7px;height: 7px;display: inline-block;background: var(--B1-5);transform: rotate(45deg);vertical-align: middle;} .xl_hsfk_gold {/* 金色菱形方块 */width: 7px;height: 7px;display: inline-block;background: var(--B1-6);transform: rotate(45deg);vertical-align: middle;} /* ========================================================= 13. 卡片组件 命名 .werd 沿用你的习惯（Widget Card 的缩写） ========================================================= */ .werd {background: var(--N1-2); border: 1px solid var(--N1-2); padding: 10px; border-radius: var(--BorderRadius-max);box-sizing: border-box;transition:var(--transition-base); overflow: hidden;} .werd_h {background: var(--N1-1); border: 1px solid var(--N1-1); padding: 10px;border-radius: var(--BorderRadius-max);box-sizing: border-box;transition:var(--transition-base);} .werd_bj {background: var(--N1-2); border: 1px solid var(--N1-1); padding: 10px;border-radius: var(--BorderRadius-max); box-shadow:var(--shadow-sm);border:1px solid var(--N4-1); transition:var(--transition-base);} /* 带边框的盒子 */ .xl_box {border: 1px solid var(--N4-1);padding: 10px;border-radius: var(--BorderRadius-max);box-sizing: border-box; transition:var(--transition-base);} .xl_nr_box {border: 1px solid #f4f4f4;padding: var(--S2);background: var(--N1-1);border-radius: var(--BorderRadius-max);box-sizing: border-box;} /* 红色渐变遮罩（你标志性的 hover 效果） */ .xl_hs_yy {background: radial-gradient(circle at center, rgba(145,0,4,0.0), rgba(26,140,60,0.4));width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: none;z-index: 1;pointer-events: none; /* 防止遮罩阻挡点击 */} /* 卡片悬停上浮（新增：werd / xl_box / xl_nr_box hover 时上浮 2px） */ .werd:hover, .xl_box:hover, .xl_nr_box:hover {transform: translateY(-2px);} .werd, .xl_box, .xl_nr_box {transition: var(--transition-base);} /* 带边框的盒子 带颜色 */ .xl_box_red { background: #fde8e8; border-color: var(--S6-2) !important; } /* 红色 */ .xl_box_green { background: #e6f7ed; border-color: var(--S6-3) !important;} /* 绿色 */ .xl_box_blue { background: #e8f0fe; border-color: var(--S6-4) !important; } /* 蓝色（主题） */ .xl_box_yellow{ background: #e8f0fe; border-color: var(--S6-1) !important; } /* 黄色 */ .xl_box_gold { background: #fef7e0; border-color: var(--S6-7) !important; } /* 橙色 */ .xl_box_purple{ background: #f3e8fd; border-color: var(--S6-8) !important; } /* 紫色 */ .xl_box_gray { background: #f1f3f4; border-color: var(--S6-5) !important;} /* 淡蓝色 */ /* ========================================================= 14. 按钮 ========================================================= */ .xl_button_btns{display:flex;gap:var(--S2);flex-wrap:wrap;margin-top:var(--S3)} .xl_button_btns_center {display:flex;justify-content: center; align-items: center; gap:var(--S2); flex-wrap: wrap; margin-top:var(--S3)} .xl_but_box_c{display:flex;justify-content: center; align-items: center;gap:var(--S2); flex-wrap: wrap; } .xl_but_box_r{display:flex;justify-content:flex-end; align-items: center;gap:var(--S2); flex-wrap: wrap; } .xl_but_box_l{display:flex;justify-content:left; align-items: center;gap:var(--S2); flex-wrap: wrap; } .xl_button {background: var(--B1-5); display: flex; align-items:center; justify-content: center; gap:6px; height: 40px; line-height: 40px; padding:0 14px;font-size: 14px;color: #fff;border-radius: var(--BorderRadius-min);border:1px solid var(--B1-5);cursor: pointer;transition: var(--transition-base);user-select: none;} .xl_button .iconfont {font-size: 18px; color: #fff; width: 20px; display: inline-block;text-align: center;} .xl_button:hover {opacity: 0.9;} .xl_button_bk{display: flex;align-items:center; justify-content: center; gap:6px;line-height: 40px; height: 40px; text-align: center; padding:0 14px;border:1px solid var(--N4-1);background:var(--N1-2);border-radius:var(--BorderRadius-min);font-size:14px;color:var(--N2-2);cursor:pointer;transition:var(--transition-base)} .xl_button_bk .iconfont{ font-size: 20px; width: 20px; display: inline-block;text-align: center; margin-right: 5px;} .xl_button_bk:hover{border-color:var(--B1-5);color:var(--B1-5);background:rgba(26,140,68,0.04)} /* 按钮变体（新增） */ .xl_button_sm {line-height: 30px;padding: 0 8px;font-size: 13px; gap:4px;} .xl_button_lg {line-height: 48px;padding: 0 24px;font-size: 16px;} .xl_button_disabled,.xl_button[disabled] {opacity: 0.5;cursor: not-allowed;pointer-events: none;} .xl_button_ghost {background: transparent;color: var(--N2-1);} .xl_button_ghost:hover {background: var(--N1-1);} .xl_button_outline {background: transparent;border: 1px solid var(--B1-5);color: var(--B1-5);} .xl_button_outline:hover {background: var(--B1-5);color: #fff;} .xl_button_Delete {border:1px solid var(--S6-2);background:var(--N1-2); color: var(--S6-2);} .xl_button_Delete:hover {background: var(--S6-2);color: #fff;} .xl_button_Edit {border:1px solid var(--S6-4);background:var(--N1-2); color: var(--S6-4);} .xl_button_Edit:hover {background: var(--S6-4);color: #fff;} .xl_button_sm .iconfont {font-size: 16px;} /* "查看更多"按钮 — 沿用你的图片背景写法 */ .xl_ckgd {background: var(--B1-5);cursor: pointer;width: 136px;height: 40px;line-height: 40px;text-align: center;display: inline-block;color: var(--B1-5);font-size: 18px;transition: var(--transition-base);} .xl_ckgd:hover {background: var(--B1-5);color: var(--N2-5);} /* "返回"按钮 */ .xl_fanhui{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--N1-2);border:1px solid var(--N4-1);border-radius:var(--BorderRadius-min);font-size:13px;color:var(--N2-2);cursor:pointer;transition:var(--transition-base)} .xl_fanhui:hover {border-color:var(--B1-5);color:var(--B1-5);background:rgba(26,140,68,0.04)} /* ========================================================= 15. 标签 ========================================================= */ .xl_label {font-size:12px;padding:3px 10px;border-radius:10px;background:rgba(26,140,68,0.07);color:var(--B1-5);font-weight:500} /* 标签变体（新增） */ .xl_label_red {background: var(--S6-2) !important;color: #fff;} .xl_label_blue {background: var(--S6-4) !important;color: #fff;} .xl_label_green {background: var(--S6-3) !important;color: #fff;} .xl_label_gold {background: var(--S6-6) !important;color: #fff;} /* ── Notice ── */ .xl_Notice{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fef7e0;border-radius:8px;font-size:12px;color:#92400e;margin-bottom:var(--S3);border:1px solid rgba(146,64,14,0.1)} .xl_Notice .iconfont{ color: #92400e; font-size: 22px;} /* ========================================================= 15b. 状态徽章（新增） 圆角 pill 样式，带语义色，适合表格/列表/卡片中标记状态 用法：待审核 ========================================================= */ .xl_badge {display: inline-block;padding: 3px 10px;border-radius: 8px;font-size: 13px;line-height: 22px;font-weight: normal;text-align: center;white-space: nowrap;vertical-align: middle;} /* 状态色 */ .xl_badge_yellow{background: #e8f0fe; color: var(--S6-1);} .xl_badge_blue {background: #e8f0fe;color: var(--S6-4);} /* 待审核 / 进行中 / 新功能 */ .xl_badge_green {background: #e6f7ed;color: var(--S6-3);} /* 已通过 / 优秀 */ .xl_badge_red {background: #fde8e8;color: var(--S6-2);} /* 已驳回 / 错误 */ .xl_badge_gold {background: #fef7e0;color: var(--S6-7);} /* 重要 / 紧急 */ .xl_badge_purple{background: #f3e8fd;color: var(--S6-8);} /* 特殊 */ .xl_badge_gray {background: #f1f3f4;color: var(--S6-5);} /* 已读 / 普通 */ /* 实心变体（深色背景白字，用于强调） */ .xl_badge_solid.xl_badge_yellow {background: var(--S6-1);color: #fff;} .xl_badge_solid.xl_badge_blue {background: var(--S6-4);color: #fff;} .xl_badge_solid.xl_badge_green {background: var(--S6-3);color: #fff;} .xl_badge_solid.xl_badge_red {background: var(--S6-2);color: #fff;} .xl_badge_solid.xl_badge_gold {background: var(--S6-7);color: #fff;} .xl_badge_solid.xl_badge_purple{background: var(--S6-8);color: #fff;} .xl_badge_solid.xl_badge_gray {background: var(--S6-5);color: #fff;} /* ========================================================= 16. 弹窗 ========================================================= */ .xl_dialog {background: rgba(0,0,0,0.5);touch-action: none;overflow: hidden; padding: 0px !important; border-radius: 10px !important;} .xl_dialog .my-header {background: url(../img/dialog_tit_bj1.png) no-repeat;background-size: 100% 100%;padding: 15px 20px;width: 100%; display:flex;justify-content:space-between;} .xl_dialog .my-header .title {color: #fff;} .xl_dialog .my-header .iconfont {color: #fff;} .xl_dialog .content {width: 80%;min-height: 40vh;max-height: 80vh;background: #fff;border-radius: 0 0 10px 10px;padding: 15px;overflow: auto;} .xl_dialog_header {background: url(../img/dialog_tit_bj1.png) no-repeat;background-size: 100% 100%;padding: 13px 20px;color: #fff; width: 100%; display:flex;justify-content:space-between; gap:10px;} .xl_dialog_header .title{color: #fff; } .xl_dialog_header .iconfont {color: #fff; font-size: 22px; cursor: pointer;} .xl_dialog_content{ padding: 15px 20px 5px 20px;} .xl_dialog_footer{padding: 0 20px 20px ;} .xl_dialog_footer .xl_button,.xl_dialog_footer .xl_button_bk{ padding: 0 30px;} /* 文件上传拖入盒子 */ .xl_upload_box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;border:2px dashed var(--N4-1);border-radius:10px;cursor:pointer;transition:var(--transition-base);background:var(--N1-1);text-align:center} .xl_upload_box:hover{border-color:var(--B1-5);background:rgba(26,140,68,0.03)} .xl_upload_box .ub-icon{margin-bottom:10px} .xl_upload_box .ub-icon .iconfont{font-size:24px; } .xl_upload_box .ub-text{font-size:14px;color:var(--N2-2)} .xl_upload_box .ub-hint{font-size:11px;color:var(--N2-6);margin-top:4px} /* ========================================================= 17. 表格 ========================================================= */ .xl_table {width: 100%;max-width: 100%;border-collapse: collapse;border-spacing: 0;border: 1px solid var(--N4-1);} .xl_table thead {background: var(--N1-1);} .xl_table th {padding: 0.5em;font-size: 14px;text-align: center;border-right: 1px solid var(--N4-1);border-bottom: 1px solid var(--N4-1);font-weight: bold;color: var(--N2-1);} .xl_table td {padding: 0.5em;font-size: 14px;text-align: center;border-right: 1px solid var(--N4-1);border-bottom: 1px solid var(--N4-1);color: var(--N2-2);} /* 去掉最后一列的右边框，避免边框重叠 */ .xl_table th:last-child,.xl_table td:last-child {border-right: none;} /* 表格斑马纹变体 */ .xl_table.td_2n_bj tbody tr:nth-child(odd) td {background-color: var(--N1-1);} .xl_table.td_2n_bj tbody tr:nth-child(even) td {background-color: var(--N1-2);} /* 表格行 hover（新增） */ .xl_table tbody tr:hover td {background-color: var(--N1-3);} /* 表格行 固定行 */ .xl_table .xl_gdh{position: sticky; top: -1px; background-color: var(--N1-1); z-index: 1; min-width: 100%; border-bottom: 2px solid var(--N4-1);} /* 表格——盒子 */ .xl_table_box{ width:100%; height: 500px; overflow: auto; } .xl_table_box .xl_table{ min-width: 100%; width: max-content; max-width: none;} .xl_table_box .xl_table thead tr td{ white-space: nowrap; position: sticky; top: 0; background-color: var(--N1-1); z-index: 10; border-bottom: 2px solid var(--N4-1);} /* 表格行 固定行 */ .xl_table_box .xl_table .xl_gdtd{ position: sticky; left: -1px; z-index: 15; width:calc( min-content + 2px); background-color: #fff; border-left: 1px solid var(--N4-1); border-right: 1px solid var(--N4-1);} .xl_table_box .xl_table thead tr .xl_gdtd{background-color: var(--N1-1); z-index: 20;} /* 表格行 按钮 */ .xl_table .xl_button{ height: 30px; line-height: 30px; padding: 0 10px; font-size: 13px; gap:4px;} /* ========================================================= 18. 表单元素基础样式（新增） ========================================================= */ .xl_input,.xl_textarea,.xl_select {width: 100%;padding: 0 12px; height: 42px; line-height: 38px; border: 1px solid var(--N4-1);border-radius: var(--BorderRadius-min);font-size: var(--ContentSize);color: var(--N2-1);background: var(--N1-2);transition: var(--transition-base);outline: none;} .xl_input:focus,.xl_textarea:focus,.xl_select:focus {border-color: var(--S4-6);box-shadow: 0 0 0 3px rgba(26, 140, 68, 0.15);} .xl_input::placeholder,.xl_textarea::placeholder {color: var(--N2-3);} .xl_input[disabled],.xl_textarea[disabled],.xl_select[disabled] {background: var(--N1-1);color: var(--N2-4);cursor: not-allowed;} .xl_textarea {min-height: 100px;resize: vertical;} /* 表单组（新增） */ .xl_form_group{margin-bottom:var(--S3)} .xl_form_group:last-child{margin-bottom:0} .xl_form_group .xl_form_label{display:block;font-size:13px;font-weight:500;color:var(--N2-1);margin-bottom:6px} .xl_form_group .xl_form_label .req{color:var(--S6-2);margin-left:2px} /* */ .el-select .el-form-item{ margin-bottom:10px;} .el-select .el-select__wrapper {width: 100%;padding: 0 12px; min-height: 30px ; box-shadow:none; border: 1px solid var(--N4-1);border-radius: var(--BorderRadius-min);font-size: var(--ContentSize);color: var(--N2-1);background: var(--N1-2);transition: var(--transition-base);outline: none;} .el-select .el-select__wrapper.is-focused{border-color: var(--S4-6);box-shadow: 0 0 0 3px rgba(26, 140, 68, 0.15);} .el-input .el-input__wrapper{width: 100%;padding: 0 12px; min-height: 30px ; box-shadow:none; border: 1px solid var(--N4-1);border-radius: var(--BorderRadius-min);font-size: var(--ContentSize);color: var(--N2-1);background: var(--N1-2);transition: var(--transition-base);outline: none;} .el-form-item__label{ line-height: 40px !important; height: 40px !important;} /* 内容筛选-搜索 */ .xl_filter_row{display:flex; align-items:center; gap:10px;flex-wrap:wrap} .xl_filter_row .el-select .el-select__wrapper{min-height: 34px !important;} .xl_filter_row .xl_input{ width: 200px; line-height: normal; height: 34px !important; line-height: 34px !important;} .xl_filter_row .el-input__inner{min-height: 34px !important; height: 34px !important;} .xl_filter_row .el-input .el-input__wrapper {min-height: 34px !important; height: 34px !important;} .xl_filter_row .el-date-editor.el-input, .xl_filter_row .el-date-editor.el-input__wrapper{height:34px !important;} .xl_filter_row .xl_button,.xl_filter_row .xl_button_bk{height: 34px !important; line-height: 34px;} /* ========================================================= 19. 面包屑 ========================================================= */ .xl_Breadcrumb {padding:12px 0;display:flex;align-items:center;gap:var(--S1);font-size:13px;color:var(--N2-2)} .xl_Breadcrumb a{color:var(--N2-2);text-decoration:none;transition:var(--transition-base)} .xl_Breadcrumb a:hover{color:var(--B1-5)} .xl_Breadcrumb .sep{color:var(--N2-6);margin:0 6px;font-size:10px} .xl_Breadcrumb .current{color:var(--N2-1);font-weight:500} /* ========================================================= 20. "更多"链接 ========================================================= */ .gangduo {font-size: 16px;color: var(--N2-1);line-height: 30px;cursor: pointer;transition: var(--transition-base);} .gangduo:hover {color: var(--B1-5);} .gangduo .xl_h_xx {display: inline-block;height: 1px;width: 30px;background: var(--B1-5);vertical-align: middle;} .gangduo .tubiao {width: 14px;height: 18px;background: url(/img/wztb1.png) no-repeat center center;background-size: cover;display: inline-block;margin: 0 10px 0 5px;vertical-align: middle;} /* ========================================================= 21. 附件 ========================================================= */ .xl_Attachment {margin-top: 35px;} .xl_Attachment .werd_h {padding: 10px 15px;margin-bottom: 15px;} .xl_Attachment .title {font-size: 20px;margin: 0;} .xl_Attachment .Subhead_min {width: calc(100% - 150px);} .xl_Attachment .Subhead_min .daxiao {font-size: 16px;font-weight: normal;color: #999;margin: 0 25px;} .xl_Attachment .anniu {width: 170px;} .xl_Attachment .xl_Delete, .xl_Attachment .xl_Download {background: #fff;border-radius: var(--BorderRadius-max);border: 1px solid #CCC;line-height: 34px;padding: 0 20px;font-size: 18px;display: inline-block;color: #999;text-align: center;transition: var(--transition-base);cursor: pointer;} .xl_Attachment .xl_Delete:hover,.xl_Attachment .xl_Download:hover {background: var(--B1-5);color: #FFF;border-color: var(--B1-5);} /* ========================================================= 21. 标题 ========================================================= */ .xl_section_title{font-size:16px;font-weight:600;color:var(--N2-1);margin-bottom:var(--S3);display:flex;align-items:center;gap:8px} /* ========================================================= 22. 无数据占位 ========================================================= */ .nullBox {width: 100%;margin: 0 auto; text-align: center;min-height: 500px;border-radius: 5px;display: flex;flex-direction: column;justify-content: center;align-items: center;} .nullBox .withot {width: 600px;height: 357px; background: url(../imgxx/nodata.png) no-repeat center center;} .nullBox .Subhead_min {font-size: 16px; color: #999;} /* ========================================================= 23. 滚动条样式 ========================================================= */ ::-webkit-scrollbar {width: 8px;height: 8px;} ::-webkit-scrollbar-track {background: rgba(0,0,0,0.5);border-radius: 0;} ::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.8);border-radius: 4px; border: 1px solid rgba(75,75,75,0.8);} ::-webkit-scrollbar-thumb:hover {background: #555;} /* ========================================================= 24. 阴影工具（新增） ========================================================= */ .xl_shadow_none { box-shadow: none !important; } .xl_shadow_sm { box-shadow: var(--shadow-sm); } .xl_shadow_md { box-shadow: var(--shadow-md); } .xl_shadow_lg { box-shadow: var(--shadow-lg); } /* ========================================================= 25. 响应式可见性（新增） ========================================================= */ /* 仅在手机上隐藏 */ @media (max-width: 767px) { .xl_hide_mobile { display: none !important;} } /* 仅在平板上隐藏 */ @media (min-width: 768px) and (max-width: 1199px) { .xl_hide_tablet { display: none !important;} } /* 仅在桌面上隐藏 */ @media (min-width: 1200px) { .xl_hide_desktop { display: none !important;} } /* 默认隐藏，仅在手机上显示 */ .xl_show_mobile_only {display: none !important;} @media (max-width: 767px) { .xl_show_mobile_only { display: block !important;} } /* ========================================================= 26. 滚动条平滑（新增 — 渐进增强） ========================================================= */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth;} } /* ========================================================= 27. 打印样式（新增） ========================================================= */ @media print { .xl_no_print { display: none !important;} body { background: #fff; color: #000;} a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666;} } /* ========================================================= 28. 无障碍与辅助（新增） ========================================================= */ /* 屏幕阅读器专用（视觉隐藏但可读） */ .xl_sr_only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;} /* 过渡动画全局控制 */ .xl_transition {transition: var(--transition-base);} .xl_transition_ease {transition: var(--transition-ease);} /* ========================================================= 29. 常用效果简写（新增 — 你常用的 hover 模式） ========================================================= */ /* 模式A：背景变品牌色 + 文字变白 */ .xl_hover_brand:hover {background: var(--B1-5) !important;color: var(--N2-5) !important;transition: var(--transition-base);} /* 模式B：边框变为品牌色 */ .xl_hover_border_brand:hover {border-color: var(--B1-5) !important;transition: var(--transition-base);} /* 模式C：文字变为品牌色 */ .xl_hover_text_brand:hover {color: var(--B1-5) !important;transition: var(--transition-base);} /* 模式D：放大（适用于图标/图片 hover） */ .xl_hover_scale:hover {transform: scale(1.05);transition: var(--transition-base);} /* ========================================================= 30. 拟态边框（你喜欢的非对称圆角装饰） ========================================================= */ .xl_border_morris {border-radius: 50px 0 50px 0;} /* ========================================================= 31. 全局 iconfont 与图片辅助 ========================================================= */ /* iconfont 与文字垂直对齐 */ .iconfont {vertical-align: middle;} /* 图片圆角容器快捷 */ .xl_img_rounded {border-radius: var(--BorderRadius-max);overflow: hidden;} /* ========================================================= 32. 响应式内容容器 padding（从你 Style.css 提取） ========================================================= */ @media (max-width: 767px) { .container_box { padding: 0 10px;}} @media (min-width: 768px) { .container_box { padding: 0 20px;} } @media (min-width: 1200px) { .container_box { padding: 0 30px;} } @media (min-width: 1500px) { .container_box { padding: 0;} } /* ========================================================= 33. 通用过渡简写（映射到你全站一致的 0.3s linear） ========================================================= */ .xl_trans_all {transition: all 0.3s linear;} /* ========================================================= 34. 学生公共 活动 导航 ========================================================= */ .xl_Internship_top { background:#eee; padding:8px 8px 0 8px;} .xl_Internship_top ul{ height:55px;} .xl_Internship_top ul li{ float:left; position:relative; list-style:none; width:14.28571%; height:55px; border-top-left-radius:10px; border-top-right-radius:10px; } .xl_Internship_top ul li .tit{font-size:16px; line-height:50px; text-align:center;} .xl_Internship_top ul li.on{ background:var(--N1-2); font-weight:600; } .xl_Internship_top ul li .span{ position:absolute; bottom:0px; width:100%; text-align:center;} .xl_Internship_top ul li.on .span span{ width:50px; height:3px; background:var(--B1-1); display:inline-block;}