@import url(var.css); /* v3.0 图标库引入 by xu 20251212 */ @import url(icon-base/iconfont.css); @import url(icon-biz/iconfont.css); /* 证件照 */ .id-photo{ width: 153px; height: 213px; background: #e8e8e8; background-size: cover; cursor: pointer; position: relative; float: left; } .id-photo::before { content: "\e605"; font-size: 100px; font-family: "iconfont"; color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; /* 确保图标在内容后面 */ /* 其他定位属性 */ } /* 生活照 */ .life-photo{ width: 144px; height: 144px; border-radius: 50%; background:#e8e8e8; background-size: contain; cursor: pointer; position: relative; float: left; } .life-photo::before { content: "\e605"; font-size: 80px; font-family: "iconfont"; color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } .life-photo img{ border-radius: 50%; } /* 图标相关开始 */ /* v3.0 图标组类 - 定义 font-family 及样式 by xu 20251212 */ /* 菜单图标组(左侧导航菜单)- 使用业务图标库 */ .menu-icon { font-family: "icon-biz" !important; font-size: 22px; font-style: normal; color: #565d6d; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* hover 不改变图标颜色 by xu 20251215 */ /* v3.0 菜单图标类 - 文件夹和首页 by xu 20251215 */ /* 文件夹图标 - 使用旧图标库 iconfont(新库暂无文件夹图标) */ .icon-folder-open::before { content: "\e60c"; font-family: "iconfont" !important; } .icon-folder-close::before { content: "\e60b"; font-family: "iconfont" !important; } /* 首页图标 - 使用基础图标库 icon-base */ .icon-shouye::before { content: "\e619" !important; font-family: "icon-base" !important; } /* 通用icon */ .common-icon{ font-size: 22px; font-family: "iconfont"; } .common-icon-add::before{ content: "\e60d"; color: #999999; } .common-icon-setting::before{ content: "\e630"; /* color: #999999; */ } /* 减少 */ .common-icon-reduce::before{ content: "\e6a2"; color: #EB6100; } /* 附件 */ .common-icon-paper-clip::before{ content: "\e676"; color: #999999; } .common-icon-change::before{ font-size: 16px; content: "→"; color: red; } /* 表情 */ .common-icon-smile::before{ content: "\e616"; color: #999999; } /* 常用语 */ .common-icon-common-words::before{ content: "\e69d"; color: #999999; } /* 手写 */ .common-icon-handwriting::before{ content: "\e6ab"; color: #999999; } /* 视频播放 */ .common-icon-video::before{ content: "\e699"; color: #999999; } /* 文件夹-关闭 */ .common-icon-folder-close::before{ content: "\e60b"; color: #999999; } /* 文件夹-打开 */ .common-icon-folder-open::before{ content: "\e60c"; color: #999999; } /* 文件 */ .common-icon-file::before{ content: "\e69e"; color: #999999; } /* 刷新 */ .common-icon-refresh::before{ content: "\e635"; color: #999; } /* 待办 */ .common-icon-todo::before{ content: "\e65c"; color: #999; } /* 催办 */ .common-icon-urge::before{ content: "\e664"; color: #999; } /* 快捷发起 */ .common-icon-quick-start::before{ content: "\e6a6"; color: #999; } /* 公告 */ .common-icon-notice::before{ content: "\e6ac"; color: #999; } /* 统计图 */ .common-icon-chart::before{ content: "\e6a5"; color: #999; } /* 请假 */ .common-icon-leave-big::before{ font-size: 36px; content: "\e6af"; color: #999999; } /* 收付款 */ .common-icon-receipt-big::before{ font-size: 36px; content: "\e68e"; color: #999999; } /* 考勤 */ .common-icon-attendance-big::before{ font-size: 36px; content: "\e694"; color: #999999; } /* 会议 */ .common-icon-meeting::before{ content: "\e692"; color: #999999; } /* 一卡通 */ .common-icon-card::before{ content: "\e6a0"; color: #999999; } /* 个人网站 */ .common-icon-site::before{ content: "\e6ae"; color: #999999; } .common-icon-arrow-right{ font-size: 14px; } .common-icon-arrow-right::before{ content: "\e640"; } .common-icon-arrow-top::before{ content: "\e63f"; } .common-icon-arrow-bottom:before { content: "\e63e"; } .common-icon-arrow-bottom:before { content: "\e63e"; } .common-icon-paixu:before { content: "\e6e7"; } .common-icon-jiaoshi:before { content: "\e6e6"; } .common-icon-renyuan2:before { content: "\e6aa"; } .common-icon-xueyuan:before { content: "\e623"; } /* 通用icon结束 */ /* 全局左侧导航开始 */ .nav-icon { font-size: 22px; font-family: "iconfont"; padding: 10px; color: #565d6d; } .nav-icon-home::before { content: "\e690"; } .nav-icon-person::before { content: "\e605"; } .nav-icon-knowledge::before { content: "\e62c"; } .nav-icon-statistics::before { content: "\e68a"; } .nav-icon-category::before { content: "\e652"; } .nav-icon-add::before { content: "\e60d"; } .nav-icon-search::before { content: "\e62f"; } .nav-icon-folder-close::before{ content: "\e60b"; font-size: 19px; } .nav-icon-folder-open::before{ content: "\e60c"; font-size: 19px; } /* 岗位 */ .nav-icon-post::before{ content: "\e69c"; } /* 单位 */ .nav-icon-unit::before{ content: "\e662"; } /* 全局左侧导航结束 */ /* 顶部导航开始 */ .header-icon { /* 基础样式 */ width: 36px; height: 36px; font-size: 22px; display: flex; justify-content: center; align-items: center; font-family: "iconfont"; border-radius: 4px; border: 1px solid var(--icon-item-border-color, transparent); } .header-icon:hover { --icon-item-border-color: #edf1f5; } .header-help::after { content: "\e6a7"; /* 帮助图标 */ } .header-setting::after { content: "\e60e"; /* 设置图标 */ } .header-save::after { content: "\e68d"; /* 设置图标 */ } .header-menu::after { content: "\e6ad"; /* 菜单图标 */ } .header-home::after { content: "\e600"; /* 主页图标 */ } .header-skin::after { content: "\e689"; /* 换肤图标 */ } .header-lock::after { content: "\e69f"; /* 锁定图标 */ } .header-logout { width: 48px; height: 48px; font-size: 33px; } .header-logout:hover { background-color: #000; } .header-logout::after { content: "\e6a1"; /* 退出图标 */ } /* 顶部导航结束 */ /* 全局菜单图标开始 */ .global-menu-icon { font-size: 16px; font-family: "iconfont"; /* padding: 10px; */ } /* 全局菜单图标结束 */ /* 全局查询列表卡片 */ .cart-list-icon { font-size: 22px; font-family: "iconfont"; /* padding: 10px; */ } .cart-list-setting::before { content: "\e630"; color: #dddddd; } /* 弹窗底部按钮icon */ .bottom-div-icon{ font-size: 20px; font-family: "iconfont"; } .bottom-div-save::before{ content: "\e68d"; } .bottom-div-close{ display: flex; align-items: center; } .bottom-div-close::before{ content: "\e693"; font-size: 16px; } .bottom-div-back::before{ content: "\e638"; } /* 表单组件icon开始 */ .form-icon{ font-size: 18px; font-family: "iconfont"; } .form-icon-select::before{ content: "\e63e"; } .form-icon-transform-select::before{ content: "\e63f"; } .form-icon-select-checked::before{ content: "\e68d"; } .form-icon-onoffbutton-checked::before{ content: "\e62d"; } .form-icon-onoffbutton-unchecked::before{ content: "\e62b"; } .form-icon-time::before{ content: "\e606"; } .form-icon-prev-month::before{ content: "\e641"; } .form-icon-prev-year::before{ content: "\e6b1"; } .form-icon-next-month::before{ content: "\e640"; } .form-icon-next-year::before{ content: "\e6b2"; } /* 表单组件icon结束 */ /* 登录页icon开始 */ .login-icon{ font-size: 22px; font-family: "iconfont"; } .login-icon-user::before{ content: "\e605"; } .login-icon-password::before{ content: "\e607"; } .login-icon-check-code::before{ content: "\e608"; } .login-icon-time::before{ content: "\e606"; } .login-icon-loginin::before{ content: "\e6a1"; } .login-icon-yaoyiyao::before{ content: "\e60f"; } .login-icon-change-user{ position: absolute; top: 0; right: 0; width: 22px !important; height: 22px; margin-right: 5px; margin-top: 5px; cursor: pointer; } .login-icon-change-user::before{ content: "\e609"; } /* 登录页icon结束 */ /* 弹窗icon开始 */ .dialog-icon{ font-size: 22px; font-family: "iconfont"; } /* 关闭 */ .dialog-icon-close::before{ content: "\e693"; font-size: 28px; } /* 下载 */ .dialog-icon-download::before{ content: "\e691"; } /* 打印 */ .dialog-icon-print::before{ content: "\e66f"; } /* 设置 */ .dialog-icon-setting::before{ content: "\e630"; } /* 收藏 */ .dialog-icon-collect::before{ content: "\e698"; } /* 帮助 */ .dialog-icon-help::before{ content: "\e6cd"; } /* 全屏 */ .dialog-icon-full-screen::before{ content: "\e6ca"; } /* 锁屏 */ .dialog-icon-lock::before{ content: "\e697"; } /* editor相关图标开始 */ .editor-icon{ font-size: 16px; font-family: "iconfont"; color: #666666; } /* 加粗 */ .editor-icon-bold::before{ content: "\e68b"; } /* 斜体 */ .editor-icon-italic::before{ content: "\e66b"; } /* 下划线 */ .editor-icon-underline::before{ content: "\e685"; } /* 删除线 */ .editor-icon-strikethrough::before{ content: "\e66e"; } /* 加粗 */ .editor-icon-bold::before{ content: "\e68b"; } /* 斜体 */ .editor-icon-italic::before{ content: "\e66b"; } /* 下划线 */ .editor-icon-underline::before{ content: "\e685"; } /* 删除线 */ .editor-icon-strikethrough::before{ content: "\e66e"; } /* 清除格式 */ .editor-icon-eraser::before{ content: "\e6c2"; } /* 复制格式 */ .editor-icon-copyformat::before{ content: "\e68b"; } /* 字体 */ .editor-icon-font::before{ content: "\e680"; } /* 字号 */ .editor-icon-fontsize::before{ content: "\e67d"; } /* 文字颜色 */ .editor-icon-brush::before{ content: "\e681"; } /* 段落 */ .editor-icon-paragraph::before{ content: "\e682"; } /* 左对齐 */ .editor-icon-align-left::before{ content: "\e67e"; } /* 居中对齐 */ .editor-icon-align-center::before{ content: "\e67b"; } /* 右对齐 */ .editor-icon-align-right::before{ content: "\e67f"; } /* 两端对齐 */ .editor-icon-align-justify::before{ content: "\e67c"; } /* 无序列表 */ .editor-icon-ul::before{ content: "\e6c3"; } /* 有序列表 */ .editor-icon-ol::before{ content: "\e6c7"; } /* 增加缩进 */ .editor-icon-indent::before{ content: "\e6c8"; } /* 减少缩进 */ .editor-icon-outdent::before{ content: "\e6c9"; } /* 图片 */ .editor-icon-image::before{ content: "\e683"; } /* 文件 */ .editor-icon-file::before{ content: "\e668"; } /* 视频 */ .editor-icon-video::before{ content: "\e699"; } /* 表格 */ .editor-icon-table::before{ content: "\e677"; } /* 链接 */ .editor-icon-link::before{ content: "\e676"; } /* 源代码 */ .editor-icon-source::before{ content: "\e68b"; } /* 预览 */ .editor-icon-preview::before{ content: "\e642"; } /* 全屏 */ .editor-icon-fullsize::before{ content: "\e6c4"; } /* 退出全屏 */ .editor-icon-fullsize-exit::before{ content: "\e6cb"; } /* 打印 */ .editor-icon-print::before{ content: "\e66f"; } /* 撤销 */ .editor-icon-undo::before{ content: "\e688"; } /* 重做 */ .editor-icon-redo::before{ content: "\e686"; } /* 查找 */ .editor-icon-find::before{ content: "\e62f"; } /* 全选 */ .editor-icon-selectall::before{ content: "\e68b"; } /* 隐藏原有的 SVG */ .jodit-toolbar-button__trigger svg { display: none; } /* 添加我们自己的图标 */ .jodit-toolbar-button__trigger::after { content: "\e63e"; font-family: "iconfont" !important; font-size: 12px; } .jodit-toolbar-button_with-trigger_true{ margin-right: 4px !important; } .jodit-toolbar-button_with-trigger_true>.jodit-toolbar-button__button{ width: 20px !important; min-width: 20px !important; } /* editor相关图标结束 */ /* 弹窗icon结束 */ /* 图标相关结束 */ .self-block { width: 100%; height: 100%; } body * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html, body, #app { width: 100%; height: 100%; overflow: hidden; } i{ font-style: normal; } input::placeholder ,textarea::placeholder{ color: #999; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; /* background-color: #F5F5F5; */ border-radius: 4px; margin: 0 6px; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { border-radius: 4px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #c1c1c1; } /* 页面布局 */ .layout-container { --header-height: 70px; --left-side-width-min: 60px; /* 收起/固定模式宽度 */ --left-side-width-max: 230px; /* 展开模式宽度 */ --left-side-width: var(--left-side-width-min); /* 默认收起模式 */ width: 100%; height: 100%; position: relative; overflow: hidden; } .layout-container .header { height: var(--header-height); width: 100%; box-sizing: border-box; } .layout-container .content-area { width: 100%; height: calc(100% - var(--header-height)); padding-right: 6px; } .layout-container .content-area:after { content: ""; display: block; width: 0; height: 0; clear: both; } .layout-container .left-side { float: left; height: 100%; width: var(--left-side-width); position: relative; } .layout-container .left-side-container { --left-size-width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: var(--left-size-width); transition: width 0.2s; display: flex; /* 添加 flex 布局 */ flex-direction: column; /* 垂直排列 */ /* 移除容器边框,改为菜单项边框 by xu 20251212 */ } .layout-container .left-side-container[size="max"] { --left-size-width: 230px; } .layout-container .btn-size { position: absolute; bottom: 0; left: calc(100% + 1px); width: 16px; height: 18px; background: #fff; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; z-index: 100; --border-color: #dddfe6; border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } .layout-container .btn-size::before { content: ""; position: absolute; left: -7px; top: -22px; width: 22px; height: 22px; background: #fff; transform-origin: 100% 100%; transform: rotate(-45deg); z-index: 1; border-right: 1px solid var(--border-color); } .layout-container .btn-size .icon-container { position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; padding: 0 0 1px 1px; } .layout-container .left-side-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; overflow: hidden; background: #fafbfe; /* display: flex; flex-direction: column; justify-content: flex-start; align-items: center; */ } .layout-container .left-side-content:hover { overflow-x: hidden; overflow-y: auto; } .layout-container .left-side-content:after { content: ""; height: 100%; width: 1px; position: absolute; left: 100%; top: 0; background: #dadee2; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.24); } /* ===== 新菜单样式 =====*/ /* 三种模式控制 */ .layout-container .left-side-container[data-mode="expand"] { --left-size-width: 230px; } .layout-container .left-side-container[data-mode="collapse"], .layout-container .left-side-container[data-mode="fixed"] { --left-size-width: 60px; } /* 收起模式:悬停时显示文字(浮层效果) */ .layout-container .left-side-container[data-mode="collapse"][size="max"] { --left-size-width: 230px; z-index: 1000; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); } /* 固定模式:隐藏文字 */ .layout-container .left-side-container[data-mode="fixed"] .menu-item-label, .layout-container .left-side-container[data-mode="fixed"] .mode-label { display: none !important; } /* 固定区域:顶部(首页) */ .layout-container .fixed-top { flex-shrink: 0; border-bottom: none; /* 移除直接的 border */ background: #fafbfe; position: relative; } .layout-container .fixed-top::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 1px; background: #e0e0e0; } /* 可滚动区域:中间菜单 */ .layout-container .scrollable-content { flex: 1; overflow-y: auto; overflow-x: hidden; background: #fafbfe; } /* 滚动条样式 */ .layout-container .scrollable-content::-webkit-scrollbar { width: 4px; } .layout-container .scrollable-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; } .layout-container .scrollable-content::-webkit-scrollbar-track { background: transparent; } /* 固定区域:底部(模式按钮) */ .layout-container .fixed-bottom { flex-shrink: 0; border-top: none; /* 移除上边框 */ background: #edf1f5; /* 背景色 */ height: 40px; } /* 一级菜单分隔线(使用:after伪类,90%宽度居中) */ .layout-container .menu-item.level-1 { border-bottom: none; /* 移除直接的 border */ position: relative; } .layout-container .menu-item.level-1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 1px; background: #e0e0e0; } /* 当一级菜单后面紧跟二级菜单时,隐藏一级菜单的分隔线 */ .layout-container .menu-item.level-1:has(+ .menu-item.level-2)::after { display: none; } /* 二级菜单样式 */ .layout-container .menu-item.level-2 { border-bottom: none; position: relative; } /* 最后一个二级菜单(后面不再跟二级菜单)添加分隔线 */ .layout-container .menu-item.level-2:not(:has(+ .menu-item.level-2))::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 1px; background: #e0e0e0; } .layout-container .menu-item.level-2:hover { background: #eef0f5; } /* 有子菜单的小圆点(固定在icon区域右上角)by xu 20251212 */ .layout-container .has-children-dot { position: absolute; top: 8px; left: 45px; /* 固定在icon区域右上角,不随菜单展开移动 by xu 20251212 */ width: 6px; height: 6px; background: #999999; /* 灰色 */ border-radius: 50%; z-index: 10; /* 确保在最上层 */ } /* 移除二级菜单的小圆点 */ .layout-container .menu-item.level-2 .menu-item-dot { display: none; } /* 菜单模式按钮 */ .layout-container .menu-mode-btn { display: flex; align-items: center; justify-content: center; padding: 12px 8px; cursor: pointer; font-size: 12px; color: #666; transition: all 0.3s; min-height: 40px; } .layout-container .menu-mode-btn:hover { background: rgba(0, 0, 0, 0.05); color: #333; } .layout-container .menu-mode-btn .mode-label { text-align: center; user-select: none; } .layout-container .main-content { float: right; height: 100%; width: calc(100% - var(--left-side-width)); transition: width 0.3s ease; /* 添加宽度变化动画 */ } .layout-container[sys-mode="edit"] { --edit-box-tools-display: block; } .layout-container[sys-mode="edit"] .can-resize-box:hover { --block-title-visible: hidden; } .flex-start-center { display: flex; justify-content: flex-start; align-items: center; } .flex-between-center { display: flex; justify-content: space-between; align-items: center; } /* 公共头部区域开始 */ .global-header-container { background: var(--lightdark); color: var(--white); height: 100% } .global-header-container>div { height: 100%; } .global-header-container .logo { height: 100%; width: 183px; cursor: pointer; position: relative; z-index: 200; } .global-header-container .logo::after { position: absolute; content: ""; width: 0; height: 50%; top: calc(50% - 50% / 2); right: 0; border-right: 1px solid var(--lightdark-sub); } .global-header-container .logo:hover { --header-menu-visible: visible; } .global-header-container .logo .img { padding: 12px 30px 12px calc(var(--space-size) / 2); height: 100%; width: 100%; } .global-header-container .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: contain; } .global-header-container .menu { visibility: var(--header-menu-visible, hidden); transition: top 0.3s; font-size: 14px; color: #333; top: 100%; left: 0; position: absolute; /* width: 100%; */ background: #393d51; border-top: 1px solid #dddfe6; padding: 10px 2px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .global-header-container .menu>div { height: 36px; color: var(--header-menu-color, #fff); background: var(--header-menu-bg, transparent); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding-left: 8px; padding-right: 8px; gap: 10px; white-space: nowrap; } .global-header-container .menu>div:hover { --header-menu-color: #333; --header-menu-bg: #fffdfd; } .global-header-container .bread-crumb { padding-left: 30px; padding-top: 30px; font-size: 18px; color: var(--white); } .global-header-container.bread-crumb .content { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .global-header-container.bread-crumb .home-icon { margin-right: calc(var(--space-size) / 2); margin-top: -2px; } .global-header-container.bread-crumb .split-icon { margin: 0 var(--space-size); } .global-header-container.bread-crumb .content a { color: inherit; text-decoration: none; } .global-header-container .menu-area { padding-top: 10px; padding-right: var(--space-size); display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 12px; } .global-header-container .search-area { padding: 0 1em; width: 350px; height: 40px; } /* 顶部菜单全局搜索框 */ .search-container { width: 100%; height: 100%; position: relative; border: none; border-radius: 5px; overflow: hidden; --search-input-font-size: 16px; --search-bg: var(--white, #fff); --search-color: var(--dark, #252835); --input-placeholder-color: #666; background: var(--search-bg); color: var(--search-color); } .search-container.dark { --search-bg: var(--dark, #252835); --search-color: var(--white, #fff); --input-placeholder-color: #9c9fa7; } .search-container input { width: 100%; height: 100%; top: 0; left: 0; z-index: 1; color: inherit; padding: 0 1em; border: unset; font-size: var(--search-input-font-size); background: unset; } .search-container input:disabled { cursor: pointer; } .search-container input:focus { outline: unset; } .search-container input::-moz-placeholder { color: var(--input-placeholder-color, #666); } .search-container input::placeholder { color: var(--input-placeholder-color, #666); } .search-container .icon-container { right: 15px; top: 50%; transform: translateY(-50%); position: absolute; z-index: 2; pointer-events: none; padding-left: 10px; background: var(--search-bg); } /* 公共头部区域结束 */ /* 全局左部边框开始 */ .left-side-container { width: 100%; height: 100%; padding: 0; background: #fafbfe; /* overflow-y: auto; overflow-x: hidden; */ } /* 菜单项小圆点 */ .menu-item-dot { width: 5px; height: 5px; border-radius: 50%; background-color: #8e8e8e; position: absolute; right: 5px; /* 调整右侧位置 */ top: 5px; font-size: 16px; /* 调整圆点大小 */ } .left-side-container .menu-item { height: 60px; width: 100%; box-sizing: border-box; color: var(--lightdark); cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; } .left-side-container .add-menu-btn { display: var(--menu-add-btn-display, none); } .left-side-container .add { width: 45px; height: 45px; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; box-shadow: 0 1px 4px #ccc; } .left-side-container .menu-item-content { width: 100%; height: 100%; padding: 0 8px; gap: 5px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: relative; --edit-mark-display: none; /* 菜单项右边框分割线 by xu 20251212 */ border-right: 2px solid #dadee2; } .left-side-container .menu-item-content:hover { --edit-mark-display: var(--menu-edit-mark-display, none); } .left-side-container .menu-item-label { height: 1.5em; overflow: hidden; transition: all 0.5s; font-size: 18px; color: #565d6d; opacity: 1; /* 默认显示 */ visibility: visible; /* 默认可见 */ } .left-side-container .edit-mark { display: var(--edit-mark-display); right: -1px; top: -1px; position: absolute; color: #c3c6ca; } .left-side-container .edit-mark:hover { color: #333; } .left-side-container .menu-item-content:hover { background: #edf1f5; } .left-side-container .menu-item-content:hover.edit .mark { display: block; } .left-side-container .icon-container { position: relative; padding: 10px; box-sizing: content-box; width: 24px; height: 24px; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-shrink: 0; } /* 选中菜单项隐藏右边框 by xu 20251212 */ .left-side-container .menu-item.active .menu-item-content{ background: #edf1f5; border-right-color: #edf1f5; /* 边框与背景同色,视觉上消失 */ } /* 全局左部边框结束 */ /* 一级页面搜索开始 */ .search-bar-contaienr { height: 100%; width: 100%; padding: 0 20px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 20px; --col-lg-3: 270px; position: relative; } .search-bar-contaienr input { padding: 8px 10px; margin: 0; outline: unset; border: 1px solid #c4c7cc; border-radius: 3px; font-size: 14px; } .search-bar-contaienr button { font-size: 14px; outline: unset; border: unset; display: flex; flex-direction: row; justify-content: center; align-items: center; /* gap: 5px; */ padding: 8px 20px; border-radius: 3px; margin: 0; cursor: pointer; border: 1px solid #c4c7cc; } .search-bar-contaienr button:hover { background: #393d51; border: 1px solid #393d51; color: #fff; } .search-bar-contaienr .add { position: relative; } .search-bar-contaienr .popup { position: absolute; top: calc(100% + 15px); right: 0; width: 100%; height: 130px; background-color: #393d51; border-radius: 5px; padding: 10px 0; z-index: 10; } .search-bar-contaienr .popup::after { content: ""; width: 1em; height: 1em; background: #393d51; position: absolute; right: 1.5em; top: -0.5em; transform: rotate(45deg); } .search-bar-contaienr .popup >div { border-bottom: 1px solid #303445; } .search-bar-contaienr .popup >div:last-child { border-bottom: unset; } .search-bar-contaienr button.add>div.popup>div { color: #d8d8d8; font-size: 14px; padding: 8px 20px; cursor: pointer; } .search-bar-contaienr button.add>div.popup>div:not(:last-child) { border-bottom: 1px solid #303445; } .search-bar-contaienr button.add>div.popup>div:hover { background: #fffdfd; color: #333; } .search-bar-contaienr>div { height: 32px; } .search-bar-contaienr>.input { border: 1px solid #c4c7cc; border-radius: 3px; font-size: 14px; } .search-bar-contaienr>div.input>input { height: 100%; width: 100%; padding: 8px 10px; margin: 0; outline: unset; border: unset; border-radius: inherit; background: unset; font-size: inherit; } .search-bar-contaienr button { height: 32px; font-size: 14px; outline: unset; border: unset; display: flex; flex-direction: row; justify-content: center; align-items: center; /* gap: 5px; */ padding: 0 20px; border-radius: 3px; margin: 0; cursor: pointer; background: var(--btn-bg, unset); color: var(--btn-color, #999999); border: 1px solid var(--btn-border-color, #c4c7cc); } .search-bar-contaienr button:hover { --btn-bg: #393d51; --btn-color: #fff; } .search-bar-contaienr .input { width: var(--col-lg-3); height: 32px; /* border: 1px solid #c4c7cc; */ border-radius: 4px; position: relative; } .search-bar-contaienr .input>input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; outline: unset; border: unset; background: unset; padding: 0 15px; line-height: 32px; font-size: 14px; } .search-bar-contaienr .input>input::-moz-placeholder { color: #999; } .search-bar-contaienr .input>input::placeholder { color: #999; } .search-bar-contaienr .bar { padding: 0 10px; position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; color: #c4c7cc; gap: 12px; } .search-bar-contaienr .bar .icon-container { position: relative; display: block; } .search-bar-contaienr .bar .icon-container:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(100% + 12px); transform: translateY(-50%); width: 0; height: 20px; border-right: 1px solid #c4c7cc; } .search-bar-contaienr button { font-size: 16px; outline: unset; border: unset; color: #999; display: flex; flex-direction: row; justify-content: center; align-items: center; /* gap: 5px; */ padding: 0 20px; border-radius: 4px; margin: 0; /* line-height: 2em; */ cursor: pointer; background: var(--btn-bg, unset); color: var(--btn-color, #999999); border: 1px solid var(--btn-border-color, #c4c7cc); } .search-bar-contaienr button:hover { --btn-bg: #393d51; --btn-color: #fff; } .search-bar-contaienr .popup-win.bottom{ top: 100% !important; } .search-bar-contaienr .select-container .suffix>div{ width: 30px !important; height: 30px !important; } /* 一级页面搜索结束 */ /* 知识库卡片开始 */ .knowledge-item-container { width: 573px; /* height: 220px; */ box-shadow: 2px 2px 5px #e7e8e8; background: #fafbfe; border-radius: 4px; position: relative; cursor: pointer; border: 1px solid #dddfe6; --header-display: none; --header-color: #999; } .knowledge-item-container:hover { --header-display: flex; box-shadow: 8px 8px 0px #3a3e513d; } .knowledge-item-container:hover .cart-list-setting{ display: block; } /* .knowledge-item-container:hover::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #dddfe6; } */ .knowledge-item-container.active{ box-shadow: 8px 8px 0px #3a3e513d; } .knowledge-item-container.active .header{ border-radius: unset; } /* .knowledge-item-container.active::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #585e6e; } */ .knowledge-item-container .active { border: 1px solid #ddd; } .knowledge-item-container .action-bar { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .knowledge-item-container>div.action-bar:hover { --header-color: #fff; background: #575d6d; } .knowledge-item-container .header { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .knowledge-item-container .header:hover { --header-color: #fff; background: #575d6d; } .knowledge-item-container .header:hover .cart-list-setting::before{ color: #ffffff; } .knowledge-item-container .body { padding: 20px 25px; } .knowledge-item-container .box-header>div:first-child { color: #333333; font-size: 20px; line-height: 2em; } .knowledge-item-container .box-body { /* height: 140px; */ color: #333; padding: 10px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; --right-padding-left: 20px; --right-width: calc(100% - 86px); } .knowledge-item-container .no-thumb { --right-padding-left: 0; --right-width: 100%; } .knowledge-item-container .left { width: 88px !important; height: 121px !important; border: 1px solid #f6f6f6; } .knowledge-item-container .left>img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .knowledge-item-container .right { width: var(--right-width); padding-left: var(--right-padding-left); padding-top: 5px; } .knowledge-item-container .right .title { font-size: 16px; color: #666666; line-height: 2em; /* padding-right: 1em; */ line-height: 24px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .knowledge-item-container .desc { margin-top: 10px; font-size: 14px; color: #999999; line-height: 1.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; } /* 知识库卡片结束 */ /* 知识库文件夹开始 */ .ss-folder-list-trapezoid { width: 100px; height: 0; /* border-left: 25px solid transparent; */ border-right: 30px solid transparent; border-bottom: 20px solid #fafbfe; border-radius: 4px 0 0 0; position: absolute; top: 0px; left: 0; z-index: 11; } .ss-folder-list-top-transparent { width: 100%; height: 10px; position: absolute; top: 0; left: 0; background: transparent; border-radius: 4px 4px 0 0; z-index: 1; } .ss-folder-list-top { width: 100%; height: 10px; position: absolute; top: 10px; left: 0; background: #dcdee5; border-radius: 4px 4px 0 0; } .ss-folder-list-right { width: 8px; height: calc(100% - 10px); position: absolute; bottom: 0; right: 0px; background: #dcdee5; border-radius: 0 4px 4px 0; } .ss-folder-list { width: 573px; /* height: 220px; */ box-shadow: -3px 6px 5px #a1a3a6; background: transparent; border-radius: 4px; position: relative; cursor: pointer; /* border: 1px solid #dddfe6; */ --header-display: none; --header-color: #999; } .ss-folder-list:hover { --header-display: flex; box-shadow: 8px 8px 0px #3a3e513d; } .ss-folder-list:hover .ss-folder-list-top-transparent { background: #dcdee5; border-radius: unset; } .ss-folder-list:hover .ss-folder-list-top, .ss-folder-list:hover .ss-folder-list-right { border-radius: unset; } .ss-folder-list:hover .cart-list-setting { display: block; } /* .ss-folder-list:hover::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #dcdee5; } */ .ss-folder-list.active{ box-shadow: 8px 8px 0px #3a3e513d; } .ss-folder-list.active .header { border-radius: unset; } .ss-folder-list.active .ss-folder-list-top-transparent { background: #585e6e; border-radius: unset; } /* .ss-folder-list.active::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #585e6e; } */ .ss-folder-list .active { border: 1px solid #ddd; } .ss-folder-list .action-bar { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .ss-folder-list > div.action-bar:hover { --header-color: #fff; background: #575d6d; } .ss-folder-list .header { background-color: #fafbfe; width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 20px; right: 8px; position: absolute; border-top-right-radius: 4px; } .ss-folder-list .header:hover { --header-color: #fff; background: #575d6d; } .ss-folder-list .header:hover .cart-list-setting::before { color: #ffffff; } .ss-folder-list .body { margin: 20px 0 0 0; height: calc(100% - 20px); background: #fafbfe; } .ss-folder-list .box-header > div:first-child { color: #333333; font-size: 20px; line-height: 2em; } .ss-folder-list .box-header, .ss-folder-list .box-body { background-color: #fafbfe; padding: 0 25px; } .ss-folder-list .box-body { /* height: 140px; */ color: #333; padding: 10px 25px ; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; --right-padding-left: 20px; --right-width: calc(100% - 210px); } .ss-folder-list .no-thumb { --right-padding-left: 0; --right-width: 100%; } .ss-folder-list .left { width: 215px !important; height: 121px !important; border: 1px solid #f6f6f6; } .ss-folder-list .left > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .ss-folder-list .right { width: var(--right-width); padding-left: var(--right-padding-left); padding-top: 5px; } .ss-folder-list .right .title { font-size: 16px; color: #666666; line-height: 2em; /* padding-right: 1em; */ line-height: 24px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ss-folder-list .desc { margin-top: 10px; font-size: 14px; color: #999999; line-height: 1.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; } /* 知识库文件夹结束 */ /* 一级页面卡片左右结构开始 */ .item-container { width: 702px; height: 148px; box-shadow: 2px 2px 5px #e7e8e8; background: #fafbfe; border-radius: 4px; position: relative; cursor: pointer; --header-display: none; --header-color: #999; } .item-container:hover { --header-display: flex; } .item-container:hover::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #dddfe6; } .item-container .active { border: 1px solid #ddd; } .item-container .header { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .item-container .header:hover { --header-color: #fff; background: #575d6d; } .item-container .body { height: 100%; padding: 12px var(--space-size, 20px); box-sizing: border-box; color: #333; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .item-container .left { padding: 10px; width: 150px; } .item-container .right { width: calc(100% - 150px); } .item-container .right .title { font-size: 22px; color: #333; line-height: 2em; padding-right: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-container .desc { font-size: 18px; color: #666; line-height: 1.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-container .progress { margin-top: 5px; background: #edeff0; width: 100%; height: 22px; border-radius: 11px; padding: 0 65px 0 10px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor: pointer; } .item-container .progress:hover { --progress-color: #006cf1; } .item-container .progress>div { height: 4px; position: relative; border-radius: 2px; background: var(--progress-color, #666666); } .item-container .progress>div>div { position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); font-size: 12px; } .page-container .content-area .left { width: calc(100% - var(--project-detail-width) - 6px); height: 100%; overflow-y: auto; /* margin-right: 6px; */ } .page-container .content-area .left .left-content { width: 100%; padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; overflow-y: hidden; } /* 一级页面卡片左右结构结束 */ /* 一级页面卡片上下结构开始 */ .item-container2 { width: 573px; height: 170px; box-shadow: 2px 2px 5px #e7e8e8; background: #fafbfe; border-radius: 4px; position: relative; cursor: pointer; border: 1px solid #dddfe6; --header-display: none; --header-color: #999; } .item-container2:hover { --header-display: flex; } .item-container2:hover::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #dddfe6; } .item-container2 .active { border: 1px solid #ddd; } .item-container2 .header { padding: 10px 60px 2px 20px; } .item-container2 .title { font-size: 22px; color: #333; line-height: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-container2 .body { padding: 0 var(--space-size, 20px); box-sizing: border-box; color: #333; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .item-container2 .body>div { height: 100px; } .item-container2 .body .left { width: 180px; background: #fafbfe; border: 1px solid #f6f6f6; } .item-container2 .body .left img { width: 100%; height: 100%; } .item-container2 .body .right { width: calc(100% - 180px); padding: 5px 0 0 20px; } .item-container2 .content { height: 60px; font-size: 18px; color: #666; line-height: 1.8em; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .item-container2 .tip { margin-top: 5px; font-size: 18px; color: #666; line-height: 1.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-container2 .action-bar { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .item-container2 .action-bar:hover { --header-color: #fff; background: #575d6d; } .item-container2 .progress { margin-top: 5px; background: #edeff0; width: 100%; height: 22px; border-radius: 11px; padding: 0 65px 0 10px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor: pointer; } .item-container2 .progress:hover { --progress-color: #006cf1; } .item-container2 .progress>div { height: 4px; position: relative; border-radius: 2px; background: var(--progress-color, #666666); } .item-container2 .progress>div>div { position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); font-size: 12px; } /* 一级页面卡片上下结构结束 */ .form-container { width: 100%; height: 100%; overflow: hidden; padding-right: 6px; position: relative; } .form-container .content-box { height: 100%; overflow-y: auto; padding: 25px 24px; box-sizing: border-box; } /* 把table-container的样式转移到form xu 20251210 */ .form-container .content-box .form { width: 100%; border-collapse: collapse; font-size: 16px; color: #333; table-layout: fixed; } .form-container th { /* width: 200px; */ height: 60px; text-align: right; font-weight: normal; background: #f8f9fb; padding: 15px; color: #666666; border: 1px solid #e2e4ec; font-size: 16px; } .form-container td { /* width: 360px; //不写死 td 的宽度 Xu(20251208)*/ height: 60px; padding: 0 15px; box-sizing: border-box; border: 1px solid #e2e4ec; position: relative; } .form-container .required { position: absolute; height: 100%; width: 0; top: 0; left: 0; border-left: 2px solid #ff0000; } .form-container .photo { width: 100%; /* height: 240px; */ display: flex; flex-direction: row; /* justify-content: space-between; */ align-items: flex-end; padding: 15px; gap: 15px; } /* .form-container .photo>.left { height: 214px; border-radius: 2px; position: relative; padding: 0 5px; } */ .form-container .left>div.content { width: 100%; height: 100%; background: #ebebeb; } .form-container .left>div.content>div.icon { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); } .form-container .left>div.content>div.text { position: absolute; left: 50%; bottom: 35px; transform: translateX(-50%); font-size: 16px; } .form-container .right { display: flex; align-items: flex-end; justify-content: center; } .form-container .right>div.content { width: 144px; height: 144px; background: #ebebeb; opacity: 1; border: 1px solid #edeff0; border-radius: 50%; position: relative; } .form-container .right>div.content>div.icon { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); } .form-container .right>div.content>div.text { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); } .form-container td>.input { width: 100%; height: 100%; } .form-container td>.area { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; height: 100%; } .form-container td>.area>div { height: 100%; } .form-container td>div.img { height: 120px; display: block; padding: 8px 22px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .form-container td>div.img>img { -o-object-fit: contain; object-fit: contain; } .form-container td>div.p { font-size: 16px; color: #333333; padding: 20px 22px; } .input-container { width: 100%; height: 100%; position: relative; } .input-container>div { position: absolute; } .input-container .input { width: 100%; height: 100%; top: 0; left: 0; position: relative; --input-required-display: block; display: flex; align-items: center; } .input-container>.input>input, .input-container>.input>textarea { outline: unset; border: unset; background: unset; width: 100%; height: 100%; font-size: inherit; /* 不在这里设置padding,由后面的规则或JS设置 */ box-sizing: border-box; text-overflow: ellipsis; resize: none; /* 禁止textarea手动调整大小 */ overflow: hidden; /* 完全隐藏滚动条 */ line-height: 20px; /* 设置行高 */ } .input-container>.input>textarea { /* padding-left: 15px; padding-right: 15px; */ font-family: inherit; /* 继承字体 */ /* 上下padding由JS动态设置,不在这里固定 */ } .input-container>.input>input { padding: 0 15px; /* input元素的padding */ } .input-container>.input>input::placeholder, .input-container>.input>textarea::placeholder, .select-container .input>input::placeholder, .custom-date-picker .el-input__inner::placeholder, .custom-date-picker .el-input__inner::placeholder{ color: #999; } /* 附件按钮样式 */ .fj-button { position: absolute; right: 0; bottom: 0; width: 60px; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #666666; font-size: 16px; gap: 5px; background: #f0f0f0; border: none; border-left: 1px solid #ddd; cursor: pointer; z-index: 10; padding: 0; } .fj-button:hover { background: #e0e0e0; } /* 级联 */ .ss-ccp-container{ float: left; } /* 选择框样式开始 */ .select-container { width: 100%; height: 100%; position: relative; } .select-container>div { position: absolute; z-index: 4; } .select-container .input { width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; } .select-container .input>input { outline: unset; border: unset; background: unset; width: 100%; height: 100%; padding: 0 15px 0 0; font-size: inherit; color: #000; /* pointer-events: none; */ } .search-bar-contaienr .select-container .input>input{ padding: 0 15px } .select-container .input>input .select-container .input>input::placeholder{ color: #999; } .select-container .suffix { position: absolute; top: 0; right: 0; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 15px 0; z-index: 11; } .select-container .suffix>div{ width: 37px; height: 37px; display: flex; flex-direction: row; justify-content: center; align-items: center; opacity: 1; background: var(--icon-bg, transparent); color: #c3c7cb; border-radius: 4px; } .select-container .suffix>div.select { --icon-bg: #393d51; color: #ffffff !important; } .select-container .popup-win { width: auto; min-width: 100%; left: 0; /* transform: translateX(-50%); */ z-index: 999; padding-top: 10px; --popup-content-bg: #393d51; } .select-container .popup-win.bottom { top: calc(100% - var(--select-popup-bottom-offset, 10px)); } .select-container .popup-win.bottom::after { content: ""; width: 14px; height: 14px; background: var(--popup-content-bg); position: absolute; right: 28px; transform: rotate(45deg); top: 5px; } .select-container .popup-win.top { bottom: calc(100%); } .select-container .popup-win.top::after { content: ""; width: 14px; height: 14px; background: var(--popup-content-bg); position: absolute; right: 28px; transform: rotate(45deg); bottom: -5px; } .select-container .popup-content { background: var(--popup-content-bg); position: relative; border-radius: 4px; color: #fff; padding: 15px 2px; } .select-container .popup-win .content-area { width: auto; max-height: 200px; overflow-y: auto; --scrollbar-track-color: transparent; --scrollbar-thumb-color: #000; } .select-container .popup-win .content-area::-webkit-scrollbar { width: 10px; height: 10px; } .select-container .popup-win .content-area::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--scrollbar-thumb-color, transparent); } .select-container .popup-win .content-area::-webkit-scrollbar-track { border-radius: 10px; background: var(--scrollbar-track-color, transparent); } .select-container .popup-win .content-area>div { width: auto; white-space: nowrap; position: relative; height: 36px; padding: 0 22px; font-size: 14px; color: var(--item-color, #fff); background: var(--item-bg, transparent); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor: pointer; } .select-container .popup-win .content-area>div:hover { --item-color: #000; --item-bg: #fffdfd; } .select-container .popup-win .content-area>div>span.check-icon { position: absolute; top: 50%; transform: translateY(-50%) scale(0.75); left: 0; padding-right: 8px; visibility: var(--check-icon-visible, hidden); } .select-container .popup-win .content-area>div.active { --check-icon-visible: visible; } /* radio */ .radio-container { display: flex; align-content: flex-start; gap: 20px; padding: 0 20px; } .radio-container>div { position: relative; padding: 5px 10px; border: 1px solid #bfc1c6; border-radius: 2px; overflow: hidden; cursor: pointer; text-align: center; --radio-color: #c3c6ca; color: var(--radio-color); } .radio-container .checked { --radio-color: #393d51; } .radio-container .mark { position: absolute; bottom: 1px; right: 0; color: inherit; width: 18px; height: 18px; } .radio-container2 { display: inline-flex; align-content: flex-start; gap: 20px; margin-left: 15px; } .radio-container2>div { position: relative; padding: 5px 18px; border: 1px solid #bfc1c6; border-radius: 2px; overflow: hidden; cursor: pointer; text-align: center; --radio-color: #c3c6ca; color: var(--radio-color); } .radio-container2 .checked { --radio-color: #393d51; } .radio-container2 .mark { position: absolute; bottom: 1px; right: 0; color: inherit; width: 18px; height: 18px; } /* textarea */ .textarea-container { width: 100%; height: 100%; position: relative; } .textarea-container>div { position: absolute; } .textarea-container .textarea { width: 100%; height: 100%; top: 0; left: 0; } .textarea-container textarea { outline: unset; border: unset; background: unset; width: 100%; height: 100%; padding: 15px; line-height: 2em; font-size: inherit; resize: unset; } .textarea-container textarea::placeholder{ color: #999; } /* 错误提示开始 */ .err-tip { --err-tip-color: #ef5d0c; font-size: 12px; color: var(--err-tip-color); bottom: 0; left: 0; width: 100%; cursor: pointer; position: relative; line-height: 15px; } .err-tip>div.tip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 5px 15px 2px 15px; } .err-tip::after { content: ""; position: absolute; bottom: 0; left: 2px; width: calc(100% - 2px* 2); /* border-bottom: 2px solid var(--err-tip-color); */ z-index: 1; } .err-tip:hover { --more-tip-visible: visible; --more-tip-opacity: 1; } .err-tip>.tip-more { transition: opacity 0.2s ease-in-out 0.6s; opacity: var(--more-tip-opacity, 0); visibility: var(--more-tip-visible, hidden); background: #ffffff; border-radius: 4px; border: 1px solid var(--err-tip-color); position: absolute; top: 0; left: 2px; width: calc(100% - 2px* 2); padding: 4px 12.5px; z-index: 5; } .err-tip>.tip-more>p{ margin: 0; background-color: #ffffff; } /* 错误提示开始 */ .validate-vline{ width:6px; height:100%; position:absolute; left:0; top:0; background-color:#ff0000; } .validate-tip { --err-tip-color: #ef5d0c; font-size: 16px; color: var(--err-tip-color); bottom: 0; left: 0; width: 100%; cursor: pointer; position: relative; line-height: 15px; } .validate-tip>div.tip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 5px 15px 2px 10px; } .validate-tip::after { content: ""; position: absolute; bottom: 0; left: 2px; width: calc(100% - 2px* 2); /* border-bottom: 2px solid var(--err-tip-color); */ z-index: 1; } .validate-tip:hover { --more-tip-visible: visible; --more-tip-opacity: 1; } .validate-tip>.tip-more { transition: opacity 0.2s ease-in-out 0.6s; opacity: var(--more-tip-opacity, 0); visibility: var(--more-tip-visible, hidden); background: #fff; border-radius: 4px; border: 1px solid var(--err-tip-color); position: absolute; top: 0; left: 2px; width: calc(100% - 2px* 2); padding: 4px 12.5px; z-index: 3; } /* 错误提示结束 */ .floating-div { background-color: white; position: absolute; padding: 5px; width: 100%; /* top和bottom会通过JS动态设置 */ z-index: 11; left: 0; border: 1px solid #ccc; height: auto; box-sizing: border-box; /* 其他样式 */ } .floating-div textarea { /* 设置 textarea 的样式 */ width: 100%; resize: none; border: none; outline: none; height: auto; /* overflow-y: hidden; 隐藏滚动条 */ max-height: calc(20px * 5 + 10px); /* 统一为5行 + padding */ line-height: 20px; font-size: 16px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* padding: 5px; */ } /* 弹窗头部样式开始 */ .header-container { width: 100%; height: 100%; padding-left: var(--space-size); display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .header-container .title { font-size: 18px; } .header-container .title.visibility { --title-visibility: visible; } .header-container .title:hover { --header-icon-refresh: block; --header-icon-normal: none; } .header-container .normal { display: var(--header-icon-normal); } .header-container .hover { display: var(--header-icon-refresh); cursor: pointer; } .header-container .handle-bar { --pop-win-header-color: #c3c6ca; color: var(--pop-win-header-color); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .header-container .left-bar { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; padding-right: 14px; color: inherit; margin-right: 54px; } .header-container .left-bar .dialog-icon { cursor: pointer; padding: 6px; width: 36px; height: 36px; border-radius: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .header-container .left-bar .dialog-icon:hover { background: #c4c7cc; color: #fff; } .header-container .setting { visibility: var(--block-title-visible, hidden); width: 60px; height: 60px; border-top-right-radius: 4px; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; } .header-container .setting:hover { color: #fff; background: #575d6d; } .header-container .setting:hover::before { display: none; } .header-container .close-bar { width: 60px; height: 60px; border-top-right-radius: 4px; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; position: absolute; right: 0; top: 0; } .header-container .close-bar::before { width: 0; height: 24px; border-left: 1px solid #c3c6ca; content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .header-container .close-bar:hover { color: #fff; background: #575d6d; } .header-container .close-bar:hover::before { display: none; } /* 弹窗头部样式结束 */ /* 弹窗样式开始 */ .popup-container { height: 100%; width: 100%; background: var(--white); font-size: initial; box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.3); border-radius: 4px; } .popup-container>div { width: 100%; } .popup-container .header { height: 60px; border-bottom: 2px solid var(--lightgray); background-color: white; border-radius: 4px; } .popup-container .body { height: calc(100% - 60px); } .popup-container .dialog-body { width: 500px; height: 300px; background: red; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; } .dialog-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; pointer-events: none; background: transparent; font-size: 0; z-index: 1000; } .dialog-container .mark-content { width: 100%; height: 100%; pointer-events: all; position: relative; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background: rgba(0, 0, 0, 0.2); } /* 登录部分 */ .login-container { width: 100%; height: 100%; background-size: cover; background-color: antiquewhite; display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: fixed; z-index: 99999; left: 0; top: 0; } .login-container>div { height: 100%; } .login-container .left { width: calc(100% - 510px); } .login-container .right { width: 510px; background: rgba(255, 255, 255, 0.2); position: relative; } .login-container .right>div.content-area { height: calc(100% - 70px); display: flex; flex-direction: row; justify-content: center; align-items: center; } .login-container .login-box { width: 432px; height: 494px; background: rgba(255, 255, 255, 0.9); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); border-radius: 4px; } .login-container .login-box>div { width: 100%; } .login-container .box-header { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 42px; } .login-container .box-header>img { width: 348px; height: 98px; -o-object-fit: contain; object-fit: contain; } .login-container .box-container { height: calc(100% - 182px - 40px); position: relative; } .login-container .box-form { padding: 0 37px; } .login-container>div.right>div.content-area>div.login-box>div.box-container>form.box-form>div.form-item { width: 100%; height: 37px; position: relative; display: flex; margin-bottom: 20px; background: #ffffff; border: 1px solid #575d6d; border-radius: 4px; } .login-container .icon { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 46px; height: 100%; background: #575d6d; color: #fff; } .login-container .icon-container { display: block; } .login-container .check-code { width: 140px; height: 35px; } .login-container .check-code img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .login-container .input, .login-container .select { flex: 1; height: 100%; } .login-container .input input, .login-container .select input, .login-container .input select, .login-container .select select { width: 100%; height: 100%; outline: none; border: unset; background: transparent; padding: 0 10px; font-size: 18px; color: #333; } .login-container .form-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .login-button { cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; width: 161px; height: 37px; background: #ffffff; border-radius: 4px; outline: unset; font-size: 18px; --btn-color: #333333; --btn-bg: #fff; --btn-border-color: #575d6d; color: var(--btn-color); background-color: var(--btn-bg); border: 1px solid var(--btn-border-color); } .login-button[theme="primary"], .login-button:hover { --btn-bg: #575d6d; --btn-color: #fff; } .login-container .err-tip { bottom: -32px; position: absolute; padding-left: 40px; } .login-container .err-tip::after { bottom: -8px; } .login-container .time { position: absolute; left: 10px; width: 12px; bottom: 0; } .login-container .time>div { width: 12px; height: 12px; opacity: 1; margin-bottom: 8px; border-radius: 50%; border: 1px solid #ef5d0c; } .login-container .fill { background: #ef5d0c; } .login-container .box-container>div.err-tip>div.tip { color: #ef5d0c; font-size: 18px; bottom: -30px; left: 10px; padding: 5px 15px 2px 0; } .login-container .box-footer { height: 40px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .login-container .box-footer>div { height: 100%; } .login-container .box-footer>div.left { width: calc(100% - 40px); } .login-container .box-footer>div.right { width: 40px; cursor: pointer; } .login-container .footer { padding: 0 40px; height: 70px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; font-size: 18px; color: #fff; } .login-container .mask { width: 100%; height: 100%; top: 0; left: 0; z-index: 100; position: absolute; background: rgba(255, 255, 255, 0.2); padding-bottom: 70px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .login-container .qrcode-box { width: 432px; height: 494px; background: rgba(0, 0, 0, 0.2); border-radius: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; } .login-container .qrcode-box::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: rgba(0, 0, 0, 0.2); filter: blur(1px); } .login-container .qr { width: 340px; height: 340px; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f7f7f7; box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 20px; } .login-container .qr>img { user-drag: none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; height: 100%; } .login-container>div.right>div.mask>div.qrcode-box>div.tip { position: absolute; bottom: 1em; left: 0; width: 100%; text-align: center; z-index: 10; font-size: 18px; color: #ff0000; } .lockscreen-container .login-box{ height: auto; position: relative; } .lockscreen-container .box-header{ display: flex; flex-direction: column; padding: 15px; margin: 41px 0; } .lockscreen-container .box-header img{ width: 100px; height: 100px; border-radius: 50%; } .lockscreen-container .right{ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .lockscreen-container .right--visible { opacity: 1; visibility: visible; } .lockscreen-container .left { cursor: pointer; } /* 登陆相关结束 */ /* 首页组件头部 */ .edit-box-header-container { width: 100%; height: 100%; padding-left: var(--space-size); display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .edit-box-header-container .title { font-size: 18px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; visibility: var(--title-visibility, hidden); --header-icon-refresh: none; --header-icon-normal: block; } .edit-box-header-container .title.visibility { --title-visibility: visible; } .edit-box-header-container .title:hover { --header-icon-refresh: block; --header-icon-normal: none; } .edit-box-header-container .normal { display: var(--header-icon-normal); } .edit-box-header-container .hover { display: var(--header-icon-refresh); cursor: pointer; } .edit-box-header-container .handle-bar { --pop-win-header-color: #c3c6ca; color: var(--pop-win-header-color); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .edit-box-header-container .left-bar { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding-right: 14px; color: inherit; } .edit-box-header-container .left-bar .icon-container { cursor: pointer; padding: 6px; width: 36px; height: 36px; border-radius: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .edit-box-header-container .left-bar .icon-container:hover { background: #c4c7cc; color: #fff; } .edit-box-header-container .setting { visibility: var(--block-title-visible, hidden); width: 60px; height: 60px; border-top-right-radius: 4px; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; } .edit-box-header-container .setting:hover { color: #fff; background: #575d6d; } .edit-box-header-container .setting:hover::before { display: none; } .user-info-container { width: 590px; height: 400px; box-shadow: 2px 2px 5px #e7e8e8; background: var(--white); border-radius: 2px; --block-title-visible: hidden; } .user-info-container:hover { --block-title-visible: visible; box-shadow: 0 0 0 8px #dddfe6; border-radius: 1px; } .user-info-container .body { padding: 0 var(--space-size, 20px) var(--space-size, 20px) var(--space-size, 20px); } .user-info-container .user-info { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .user-info-container .avatar { width: 94px; height: 94px; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; } .user-info-container .info { width: calc(100% - 120px); } .user-info-container .info>p { padding: 0; margin: 0; cursor: pointer; } .user-info-container .info>p:first-child { font-size: 16px; color: #333; margin-bottom: 10px; } .user-info-container .info>p:not(:first-child) { font-size: 14px; color: #808080; line-height: 22px; } .user-info-container .progress-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .user-info-container .progress { width: calc(100% - 0px); height: 20px; font-size: 12px; padding: 0 90px 0 10px; background: var(--lightgray); border-radius: 10px; --progress-color: #666666; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .user-info-container .progress:hover { --progress-color: #0072f1; } .user-info-container .line { background: var(--progress-color); width: 0%; height: 4px; position: relative; border-radius: 2px; } .user-info-container .line>div { position: absolute; top: 50%; left: calc(100% + 1em); transform: translateY(-50%); width: 5.5em; } .user-info-container .bar { padding-left: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 0px; cursor: pointer; } .user-info-container .other-info { padding: 10px 0; color: #666; font-size: 16px; } .user-info-container .other-info>div { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 20px; padding: 15px 0; } .edit-box-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .edit-box-container>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .edit-box-container .edit-tools { --direction-icon-visible: hidden; display: var(--edit-box-tools-display, none); z-index: 2; } .edit-box-container .edit-tools:hover, .edit-box-container .edit-tools.active { --direction-icon-visible: visible; } .edit-box-container .edit-tools>div { position: absolute; pointer-events: all; cursor: pointer; display: flex; } .edit-box-container .close { height: 36px; width: 36px; top: 0; right: 0; color: var(--edit-tool-bar-close-color, #c3c6ca); visibility: var(--direction-icon-visible); } .edit-box-container .close:hover { --edit-tool-bar-close-color: #575d6d; } .edit-box-container .right-center { visibility: var(--direction-icon-visible); height: 30px; width: 30px; top: 50%; transform: translateY(-50%); right: 0; justify-content: flex-end; align-items: flex-end; } .edit-box-container .right-center::before { content: ""; right: 0; top: 0; width: 4px; height: 100%; background: #999999; border-radius: 2px; position: absolute; } .edit-box-container .right-center .icon { height: 30px; width: 30px; transform: rotate(90deg); } .edit-box-container .right-bottom { visibility: var(--direction-icon-visible); width: 36px; height: 36px; bottom: 0; right: 0; justify-content: flex-end; align-items: flex-end; } .edit-box-container .right-bottom::before { content: ""; right: 0; top: 0; width: 3px; height: 100%; background: #999999; border-radius: 2px; position: absolute; } .edit-box-container .right-bottom::after { content: ""; left: 0; bottom: 0; width: 100%; height: 3px; background: #999999; border-radius: 2px; position: absolute; } .edit-box-container .right-bottom>.icon { width: 30px; height: 30px; transform: rotate(-45deg); } .edit-box-container .bottom-center { visibility: var(--direction-icon-visible); height: 36px; width: 36px; left: 50%; transform: translateX(-50%); bottom: 0; justify-content: center; align-items: flex-end; } .edit-box-container .bottom-center::before { content: ""; left: 0; bottom: 0; width: 100%; height: 4px; background: #999999; border-radius: 2px; position: absolute; z-index: 0; } .edit-box-container .bottom-center>.icon { height: 30px; width: 30px; transform: rotate(180deg); } .edit-box-container>.content-area { z-index: 1; } .page-content { width: 100%; height: 100%; padding: 20px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 15px; overflow-y: hidden; background: var(--lightgray); } .page-content:hover { overflow-y: auto; } .folder-container { width: 100%; height: 100%; overflow-y: hidden; } .folder-container:hover { overflow-y: auto; } .folder-container .group-item { --hover-bg: #edf1f5; padding-right: 6px; color: #333; } .folder-container .group-title { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; color: #333; cursor: pointer; padding: 15px var(--space-size, 20px); } .folder-container .group-title:hover { background: var(--hover-bg); } .folder-container .group-title>div.folder { position: relative; } .folder-container .group-title>div.folder::after { content: attr(data-num); position: absolute; font-size: 14px; color: #999; top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.9); } .folder-container .group-childs { padding-left: 40px; margin: 0; } .folder-container .group-childs>li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; list-style-type: none; cursor: pointer; position: relative; padding: 12px 5px 12px 20px; border-bottom: 1px solid #eee; } .folder-container .group-childs>li::before { position: absolute; content: ""; top: 50%; left: 5px; transform: translateY(-50%); width: 0.25em; height: 0.25em; border-radius: 50%; background-color: #666; } .folder-container .group-childs>li:hover { background: var(--hover-bg); } .folder-container .group-childs>li>div:first-child { color: #333; font-size: 16px; } .folder-container .group-childs>li>div:nth-child(2) { color: #999; } .todo-list-container { width: 590px; height: 400px; box-shadow: 2px 2px 5px #e7e8e8; background: var(--white); border-radius: 2px; --block-title-visible: hidden; } .todo-list-container:hover { --block-title-visible: visible; box-shadow: 0 0 0 8px #dddfe6; border-radius: 1px; } .todo-list-container .body { border-top: 1px solid #eaeaea; height: calc(100% - 57px); overflow-y: hidden; padding: 12px 6px 12px 0px; box-sizing: border-box; } .notice-list-container { width: 590px; height: 242px; box-shadow: 2px 2px 5px #e7e8e8; background: var(--white); border-radius: 2px; --block-title-visible: hidden; } .notice-list-container:hover { --block-title-visible: visible; box-shadow: 0 0 0 8px #dddfe6; border-radius: 1px; } .notice-list-container .header { border-bottom: 1px solid #eaeaea; } .notice-list-container .body { width: calc(100% - 6px); height: calc(100% - 57px); overflow-y: hidden; padding: 12px var(--space-size, 20px); box-sizing: border-box; color: #333; } .notice-list-container .body:hover { overflow-y: auto; } .notice-list-container .body>div { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 0; } .notice-list-container .body>div>div:first-child { gap: 5px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .notice-list-container .body>div>div:nth-child(2) { color: #999999; } .launch-container { width: 590px; height: 204px; box-shadow: 2px 2px 5px #e7e8e8; background: var(--white); border-radius: 2px; --block-title-visible: hidden; } .launch-container:hover { --block-title-visible: visible; box-shadow: 0 0 0 8px #dddfe6; border-radius: 1px; } .launch-container .body { border-top: 1px solid #eaeaea; height: calc(100% - 57px); overflow-y: auto; padding: 12px var(--space-size, 20px); box-sizing: border-box; color: #808080; display: flex; align-content: flex-start; flex-wrap: wrap; font-size: 12px; gap: 20px; } .launch-container .body>div { cursor: pointer; width: 60px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .launch-container .body>div:hover { --popup-visible: visible; } .launch-container .body>div>.common-icon { color: #b4b5b5; width: 60px; height: 60px; display: flex; flex-direction: row; justify-content: center; align-items: center; background: var(--item-bg, transparent); position: relative; --item-mark-color: #999999; } .launch-container .body>div>.common-icon:hover { --item-bg: #edf1f5; --item-mark-color: #3a3e51; } .launch-container .body>div>.common-icon.mark-down::after { content: ""; width: 0; height: 0; border-width: 6px 6px 6px 6px; border-style: solid; border-color: transparent var(--item-mark-color) var(--item-mark-color) transparent; position: absolute; bottom: 0; right: 0; } .launch-container .text { padding-top: 4px; font-size: 16px; } .launch-container .popup { position: fixed; top: 0; left: 0; width: 130px; height: 90px; --popup-bg: #3a3e51; visibility: var(--popup-visible, hidden); background: var(--popup-bg); padding: 16px 2px 0 2px; border-radius: 4px; z-index: 1111; } .launch-container .popup::before { width: 100%; height: 12px; background: transparent; content: ""; position: absolute; top: -12px; left: 0; } .launch-container .popup::after { content: ""; background: var(--popup-bg); width: 12px; height: 12px; position: absolute; top: -6px; right: 30px; transform: rotate(45deg); } .launch-container .popup>div { height: 36px; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 15px; font-size: 14px; background: var(--item-bg, transparent); color: var(--item-color, #fff); } .launch-container .popup>div:hover { --item-bg: #fff; --item-color: #333; } .statistics-container { width: 1200px; height: 475px; box-shadow: 2px 2px 5px #e7e8e8; background: var(--white); border-radius: 2px; --block-title-visible: hidden; } .statistics-container:hover { --block-title-visible: visible; box-shadow: 0 0 0 8px #dddfe6; border-radius: 1px; } .statistics-container .body { /* border-top: 1px solid #eaeaea; */ height: calc(100% - 57px); overflow-y: auto; padding: 12px var(--space-size, 20px); box-sizing: border-box; color: #333; } .statistics-container .body .chart-container { width: 100%; height: 100%; } .page-container { width: 100%; height: 100%; /* padding: 20px 0; */ } .page-container[sys-mode="edit"] { --edit-box-tools-display: block; } .page-container .search-bar { margin-top: 20px; width: 100%; height: 40px; position: relative; } .page-container .item-content-area { height: calc(100% - 75px); width: 100%; margin-top: 10px; padding: 10px 0 100px 20px; display: flex; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; --project-detail-width: 370px; } .page-container .content-area .pager-bar { width: 100%; height: 80px; padding: 20px; } .page-container .content-area>div.project-detail { padding-right: 20px; width: var(--project-detail-width); height: 100%; } /* 分页开始 */ .pager-container { width: 98%; margin: 0 auto; /* height: 100%; */ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .pager-container .pager-content { border-radius: 4px; height: 32px; color: #999999; font-size: 18px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .pager-container .pager-content>div { height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .pager-container .info { padding: 0 20px; border: 1px solid var(--btn-border, #c4c7cc); border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pager-container .btn>button { height: 100%; background: #edf1f5; width: 84px; outline: unset; cursor: pointer; font-size: inherit; color: var(--btn-color, #999999); border: 1px solid var(--btn-border, #c4c7cc); } .pager-container .btn>button:hover { --btn-border: transparent; --btn-color: #fff; background: #393d51; } .pager-container .btn:last-child>button { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* 分页结束 */ /* 一级页面右边信息栏开始 */ .info-container { width: 100%; box-shadow: 2px 2px 5px #e7e8e8; background: #fafbfe; border-radius: 2px; position: relative; overflow-y: auto; height: 100%; } .info-container .header { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid #cfd2d7; } .info-container .header>div { height: 40px; display: flex; align-items: center; } .info-container .header>div:first-child { width: 80px; } .info-container .header>div:last-child { padding-left: 5px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; width: calc(70%); color: #333333; font-size: 18px; } .info-container .header>div:last-child>div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .info-container .section-container { padding: 0 20px; } .info-container .section { padding: 8px 0; --title-tip-height: 6px; } .info-container .section:not(:last-child) { border-bottom: 1px solid #edf1f5; } .info-container .section:hover { --title-tip-height: 18px; } .info-container .section>div.title { color: #333333; font-size: 18px; line-height: 3em; position: relative; padding-left: 20px; } .info-container .section .title:before { transition: height 0.5s; content: ""; width: 6px; height: var(--title-tip-height); border-radius: 3px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); background: #333; } .info-container .section> .a { --a-color: #333; color: var(--a-color); font-size: 16px; line-height: 2.5em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .info-container .section .a:hover { --a-color: #006cf1; } .info-container .section .text { color: #333333; font-size: 16px; line-height: 2.5em; } /* 一级页面右边信息栏结束 */ /* 统计图 */ .page-statistics .content-area { padding: 20px; height: calc(100% - 80px); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 20px; overflow-y: auto; } .project-report-statistics .statistics-container:hover { --block-title-visible: visible; } .project-report-statistics .body { /* border-top: 1px solid #eaeaea; */ height: calc(100% - 57px); overflow-y: auto; padding: 12px var(--space-size, 20px); box-sizing: border-box; color: #333; } .project-report-statistics .table-container { border: 1px solid #dddfe6; margin-bottom: 22px; overflow-x: auto; background: var(--table-bg, #fff); } .project-report-statistics .table-container::-webkit-scrollbar { width: 0; height: 0; } .project-report-statistics .table-container::-webkit-scrollbar-thumb { border-radius: 0; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2); background: var(--scrollbar-thumb-color, #c1c1c1); } .project-report-statistics .table-container::-webkit-scrollbar-track { border-radius: 0; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2); background: var(--scrollbar-track-color, transparent); } .project-report-statistics .table-container:hover { --table-bg: #edf1f5; } .project-report-statistics .title { position: relative; padding: 15px 20px 15px 35px; font-size: 16px; border-bottom: 1px solid #dddfe6; } .project-report-statistics .title::before { content: ""; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 5px; height: 5px; background: #333333; border-radius: 50%; } .project-report-statistics .table-columns { display: flex; flex-wrap: nowrap; } .project-report-statistics .table-columns>div { flex-shrink: 0; padding: 10px 20px; border-right: 1px solid #dddfe6; } /* 跨对象弹窗开始 */ .search-dialog-content { width: 900px; height: 100vh; position: relative; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: initial; color: #333; /* padding: 0 100px; */ background: #ffffff; /* box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.3); */ border-radius: 4px; /* height: 100%; */ padding: 0 100px 30px 100px; } .search-dialog-content>div { width: 100%; } .search-dialog-content .header { height: 130px; } .search-dialog-content .input-area { width: 100%; height: 53px; color: #666; font-size: 18px; position: relative; border: 1px solid #999999; border-radius: 4px; overflow: hidden; } .search-dialog-content .input-area>input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 53px; padding: 0 20px; font-size: inherit; outline: unset; border: unset; z-index: 1; } .search-dialog-content .search-btn { position: absolute; top: 0; right: 0; font-size: inherit; color: inherit; height: 100%; padding: 0 17px; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; z-index: 2; --search-btn-bg: transparent; --search-btn-color: #666666; --search-btn-left-border-visible: visible; background: var(--search-btn-bg); color: var(--search-btn-color); } .search-dialog-content .search-btn:hover { --search-btn-color: #fff; --search-btn-bg: #242835; --search-btn-left-border-visible: hidden; } .search-dialog-content .search-btn::after { visibility: var(--search-btn-left-border-visible); position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 0; height: 60%; border-left: 1px solid #999999; content: ""; } .search-dialog-content .sort { padding: 10px 0; font-size: 14px; color: #a9a9a9; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .search-dialog-content .list { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } .search-dialog-content .list>div { padding: 5px 10px; cursor: pointer; } .search-dialog-content .active { background-color: #e8f9fc; color: #0066ff; border-radius: 2px; } .search-dialog-content .time { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; } .search-dialog-content .res { color: #999999; font-size: 12px; } .search-dialog-content .search-res { height: calc(100% - 130px); overflow-y: auto; padding: 10px 10px 0 0; margin-bottom: 5px; } .search-dialog-content .search-item { margin-bottom: 20px; } .search-dialog-content .search-item.style-1>div.title { font-size: 18px; color: #666; line-height: 1.8em; } .search-dialog-content .search-item.style-1>div.detail { padding: 5px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .search-dialog-content .search-item.style-1>div.detail>div.thumb { width: 77px; height: 95px; } .search-dialog-content .search-item.style-1>div.detail>div.thumb>img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .search-dialog-content .search-item.style-1>div.detail>div.info { width: calc(100% - 77px); padding-left: 10px; } .search-dialog-content .search-item.style-1>div.detail>div.info>div.title, .search-dialog-content .search-item.style-1>div.detail>div.info>div.subtitle { color: #333; font-size: 16px; line-height: 1.5em; } .search-dialog-content .search-item.style-1>div.detail>div.info>div.desc { margin-top: 5px; color: #666666; font-size: 14px; } .search-dialog-content .search-item.style-2>div.title { font-size: 18px; color: #666; line-height: 1.8em; } .search-dialog-content .search-item.style-2>div.desc { color: #666666; font-size: 14px; } .search-dialog-content .search-item.style-3>div.title { font-size: 18px; color: #666; line-height: 1.8em; } .search-dialog-content .search-item.style-3>div.group-list { margin-top: 10px; } .search-dialog-content .search-item.style-3 .gitem { display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-items: flex-start; } .search-dialog-content .search-item.style-3 .gitem:not(:last-child) { margin-bottom: 20px; } .search-dialog-content .search-item.style-3 .thumb { width: 180px; height: 99px; } .search-dialog-content .search-item.style-3 .thumb>img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .search-dialog-content .search-item.style-3 .info { width: calc(100% - 180px); padding-left: 10px; } .search-dialog-content .search-item.style-3 .info>div.title { color: #666666; font-size: 16px; } .search-dialog-content .search-item.style-3 .info>div.desc { margin-top: 5px; color: #666666; font-size: 14px; } .search-dialog-content .search-item.style-3 .info>div.source { margin-top: 5px; color: #666666; font-size: 12px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 5px; } .search-dialog-content .search-item.style-3 .info>div.source .icon-container { color: rgba(0, 0, 0, 0.3); } /* 跨对象弹窗结束 */ /* 项目基本信息开始 */ .project-edit-container { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; overflow: hidden; } .project-edit-container>div { height: 100%; } .project-edit-container .left-side { width: 180px !important; border-right: 1px solid #e2e4ec; background-color: #edf1f5; } .project-edit-container .left-side>div { width: 100%; } .project-edit-container .menu-header { height: 120px; border-bottom: 1px solid #d8dae3; } .project-edit-container .menu-content { height: calc(100% - 60px); } .project-edit-container .menu-content .scroll-view { width: 100%; height: 100%; overflow-y: auto; font-size: 18px; } .project-edit-container .menu-item, .project-edit-container .group .menu-item { padding: 20px 12px 20px 30px; cursor: pointer; position: relative; color: #333333; display: flex; align-items: center; } .project-edit-container .menu-item .arrow{ position: absolute; left: 180px; } .menu-item-point{ width: 6px; height: 6px; display: block; border-radius: 50%; background: #666; } .project-edit-container .menu-item>.icon-container, .project-edit-container .group .menu-item>.icon-container { margin-left: 10px; } .project-edit-container .menu-item::after, .project-edit-container .group .menu-item::after { content: ""; width: calc(100% - 10px * 2); height: 0; display: block; position: absolute; bottom: -1px; left: 10px; border-bottom: 1px solid #d8dae3; } .project-edit-container .menu-item.active, .project-edit-container .group .menu-item.active { background: #fff; } .project-edit-container .menu-item.active::after, .project-edit-container .group .menu-item.active::after { border-bottom-color: transparent; } .project-edit-container .group { width: 100%; } /* .project-edit-container .group-detail { padding-left: 10px; } */ .project-edit-container .group-detail .menu-item { padding-left: 44px; } /* .project-edit-container .group-detail .menu-item::before { content: ""; height: 6px; width: 6px; border-radius: 50%; position: absolute; top: 50%; left: 30px; background: #666; transform: translateY(-50%); position: relative; } */ .sub-tab-menu-footer { height: 60px; flex-shrink: 0; background: #afb8d0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; font-size: 20px; color: #fff; cursor: pointer; position: relative; } .sub-tab-menu-footer:hover { background: #393d51; } .sub-tab-menu-popup { position: absolute; bottom: 76px; left: 0; right: 0; display: none; } .sub-tab-menu-popup>div { height: 76px; flex-shrink: 0; background: #afb8d0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; font-size: 20px; color: #fff; cursor: pointer; position: relative; } .sub-tab-menu-popup>div::after { content: ""; width: 90%; height: 1px; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #ffffff; } .sub-tab-menu-popup>div:hover { background: #393d51; } /* 鼠标悬浮时显示弹出菜单 */ .sub-tab-menu-footer:hover .sub-tab-menu-popup { display: block; } .project-edit-container>div.content-area { width: calc(100% - 180px); overflow-y: auto; } /* 项目基本信息结束 */ /* 项目基本信息中的基本信息表格 */ .base-container { width: 100%; padding: 32px; } .base-container .base-content { width: 100%; --border-color: #e2e4ec; border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color); } .base-container .tr { display: flex; width: 1200px; border-bottom: 1px solid var(--border-color); } .base-container .tr>div { flex-shrink: 0; border-right: 1px solid var(--border-color); } .base-container .th { width: 200px; height: 60px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-right: 10px; background: #f8f9fb; } .base-container .td { width: 400px; height: 60px; padding-left: 10px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background: #ffffff; } .base-container .th-1 { width: 200px; line-height: 3em; padding-right: 10px; background: #f8f9fb; text-align: right; } .base-container .td-1 { width: 1000px; padding: 10px; background: #ffffff; } .base-container .td-1>p { padding: 5px; margin: 0; } /* 项目基本信息中的内容表格 */ .itembaseinfo-content-container { width: 100%; height: 100%; padding-left: 32px; } .itembaseinfo-content-container .search-bar { width: 100%; height: 60px; } .itembaseinfo-content-container .content-area { display: flex; flex-wrap: wrap; gap: 20px; height: calc(100% - 80px); width: calc(100% - 8px); padding: 12px; overflow-y: auto; } .itembaseinfo-content-container .table-container { width: 1200px; border-collapse: collapse; } .itembaseinfo-content-container th { background: #f5f6fa; } .itembaseinfo-content-container td, .itembaseinfo-content-container th { border: 1px solid #d8dae3; padding: 20px; } .itembaseinfo-content-container tr:nth-child(odd) { background: #fafafa; } .itembaseinfo-content-container td[data-num]::before { content: attr(data-num); width: 100%; font-size: inherit; color: #333; padding-right: 5px; } .itembaseinfo-content-container td.layer-2 { text-indent: 2em; } .itembaseinfo-content-container td.danger { color: #ff0000; } .itembaseinfo-item-container { width: 573px; height: 170px; box-shadow: 2px 2px 5px #e7e8e8; background: #fafbfe; border-radius: 4px; position: relative; cursor: pointer; border: 1px solid #dddfe6; --header-display: none; --header-color: #999; } .itembaseinfo-item-container:hover { --header-display: flex; } .itembaseinfo-item-container:hover::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #dddfe6; } .itembaseinfo-item-container .active { border: 1px solid #ddd; } .itembaseinfo-item-container .action-bar { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .itembaseinfo-item-container .action-bar:hover { --header-color: #fff; background: #575d6d; } .itembaseinfo-item-container .header { padding: 10px 60px 2px 20px; } .itembaseinfo-item-container .title { font-size: 22px; color: #333; line-height: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .itembaseinfo-item-container .body { padding: 0 var(--space-size, 20px); box-sizing: border-box; color: #333; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .itembaseinfo-item-container .body>div { height: 100px; } .itembaseinfo-item-container .left { width: 71px; background: #fafbfe; border: 1px solid #f6f6f6; } .itembaseinfo-item-container .left img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .itembaseinfo-item-container .right { width: calc(100% - 71px); padding: 5px 0 0 20px; } .itembaseinfo-item-container .content { height: 60px; font-size: 18px; color: #666; line-height: 1.8em; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .itembaseinfo-item-container .tip { margin-top: 5px; font-size: 18px; color: #666; line-height: 1.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 智能识别开始 */ .ocr-container { width: 100%; height: 100%; } .ocr-container>div { width: 100%; } .ocr-container .content-area { height: calc(100% - 60px); overflow-y: hidden; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .ocr-container .content-area>div { width: 50%; height: 100%; overflow-y: hidden; margin-right: 6px; } .ocr-container .left-side { --scroll-track-color: #e2e4ec; } .ocr-img-box { width: 100%; height: 100%; background-color: #e2e4ec; } .ocr-img-box .img-bar { height: 60px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; background: #f8f6f7; font-size: 24px; color: #666666; box-sizing: border-box; border-right: 10px solid var(--scroll-track-color); } .ocr-img-box .img-bar>div { width: 50%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ocr-img-box .action-bar { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; color: #d5d4db; border-top: 0; } .ocr-img-box .img-bar .action-bar .progress { width: 185px; height: 4px; border-radius: 2px; background: #d5d4db; margin-right: 20px; position: relative; cursor: pointer; } .ocr-img-box .img-bar .action-bar .progress .buoy { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c3c6ca; top: 50%; transform: translateY(-50%); left: 0; background: #fff; cursor: pointer; } .ocr-img-box .img-bar .action-bar .icon-container { cursor: pointer; } .ocr-img-box .img-viewer { height: calc(100% - 60px); width: calc(100% - 10px); position: relative; overflow: hidden; background: #e2e4ec; } .ocr-img-range-box input[type=range] { position: relative; z-index: 12; -webkit-appearance: none; /*清除系统默认样式*/ width: 185px; height: 4px; border-radius: 2px; background: #d5d4db; background-size: 75% 100%; } /*拖动块的样式*/ .ocr-img-range-box input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /*清除系统默认样式*/ width: 18px; height: 18px; background: #fff; /*拖动块背景*/ border-radius: 50%; /*外观设置为圆形*/ border: 2px solid #c3c6ca; } .ocr-img-range-box { position: relative; width: 185px; display: flex; align-items: center; /* 垂直居中 */ } .ocr-img-range-box .line { width: 5px; height: 18px; background-color: #d5d4db; position: absolute; left: 50%; transform: translateX(-50%); height: 18px; } .ocr-img-range-box { display: flex; align-items: center; } .zoomable-img { object-fit: contain; transition: transform 0.3s, width 0.3s, height 0.3s; } .ocr-img-box .img-viewer .img-box { width: 100%; overflow-y: hidden; background: white; } .ocr-img-box .img-viewer .img-box::-webkit-scrollbar { width: 8px; height: 8px; } .ocr-img-box .img-viewer .img-box::-webkit-scrollbar-thumb { border-radius: 4px; background: #575d6d; } .ocr-img-box .img-viewer .img-box::-webkit-scrollbar-track { background: var(--scroll-track-color); } .ocr-img-box .img-viewer .img-box>img { user-drag: none; -webkit-user-drag: none; -khtml-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin: 0 auto; display: block; -o-object-fit: contain; object-fit: contain; } .ocr-container .content-area .right-side { overflow-y: auto; padding: 20px; } .ocr-container .content-area .table-container { width: 100%; border-collapse: collapse; } .ocr-container .content-area .table-container.table-header { margin-bottom: 20px; } .ocr-container .table-container th, .ocr-container .table-container td { border: 1px solid #e2e4ec; } .ocr-container .table-container th { width: 30%; text-align: right; font-weight: normal; background: #f8f9fb; padding: 15px; color: #666666; font-size: 16px; } .ocr-container .table-container td { width: 70%; padding: 0; } .ocr-container .table-container td>input { width: 100%; outline: none; padding: 15px; line-height: 1em; border: unset; color: #333333; font-size: 16px; } .ocr-container .table-container td>textarea { width: 100%; height: 120px; resize: none; outline: none; border: unset; color: #333333; font-size: 16px; padding: 15px; } .ocr-container .table-container td>select { width: 100%; outline: none; border: unset; color: #333333; font-size: 16px; padding: 15px; } .ocr-container .content-box { height: calc(100% - 60px); overflow-y: auto; padding: 20px; } .ocr-container .table-container { width: 100%; border-collapse: collapse; } .ocr-container .table-container th, .ocr-container .table-container td { border: 1px solid #e2e4ec; } .ocr-container .table-container th { width: 30%; text-align: right; font-weight: normal; background: #f8f9fb; padding: 15px; color: #666666; font-size: 16px; } .ocr-container .table-container td { width: 70%; padding: 0; } .ocr-container .table-container td>input { width: 100%; outline: none; padding: 15px; line-height: 1em; border: unset; color: #333333; font-size: 16px; } .ocr-container .table-container td>textarea { width: 100%; height: 120px; resize: none; outline: none; border: unset; color: #333333; font-size: 16px; padding: 15px; } .ocr-container .table-container td>select { width: 100%; outline: none; border: unset; color: #333333; font-size: 16px; padding: 15px; } .ocr-container .table-container td>div.p { font-size: 16px; color: #333333; padding: 20px 22px; } .ocr-container .table-container td>div.img { height: 120px; display: block; padding: 8px 22px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .ocr-container .table-container td>div.img>img { -o-object-fit: contain; object-fit: contain; } /* 智能识别结束 */ /* 智能识别列表开始 */ .ocr-list-container { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; } .ocr-list-container>div { height: 100%; } .ocr-list-container .left-side { width: 220px; } .ocr-list-container .left-side .action-bar { border-right: 2px solid var(--action-bar-bg); height: 60px; --action-bar-bg: #afb8d0; --action-bar-color: #fff; background: var(--action-bar-bg); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; color: var(--action-bar-color); font-size: 18px; cursor: pointer; } .ocr-list-container .left-side .action-bar:hover { --action-bar-bg: #242835; --action-bar-color: #fff; } .ocr-list-container .left-side>div { background: #edf1f5; } .ocr-list-container .left-side .content-box { border-right: 2px solid #e2e4ec; height: calc(100% - 60px); overflow-y: auto; padding: 20px 10px; } .ocr-list-container .left-side .item { width: 100%; height: 143px; border: 1px solid #e2e4ec; margin-bottom: 25px; background: #f8f9fb; position: relative; cursor: pointer; padding: 2px 0; } .ocr-list-container .left-side .thumb { height: 100px; width: 100%; overflow: hidden; } .ocr-list-container .left-side .thumb>img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .ocr-list-container .left-side .title { color: #333333; font-size: 16px; padding: 10px; } .ocr-list-container .left-side .status-tip { position: absolute; width: 28px; height: 28px; bottom: 0; right: 0; } .ocr-list-container .left-side .status-tip.error { color: #ff0000; } .ocr-list-container .left-side .status-tip.warn { color: #ffa800; } .ocr-list-container .left-side .status-tip.success { color: #3cb700; } .ocr-list-container .left-side .item.active { outline: 8px solid #afb8d0; } .ocr-list-container .left-side .item:not(.ocr-list-container .left-side .item.active):hover { outline: 15px solid #dddfe6; } .ocr-list-container .right-side { width: calc(100% - 220px); } .ocr-list-container .right-side .content-box { height: calc(100% - 60px); overflow-y: auto; padding: 20px; } .ocr-list-container .right-side .table-container { width: 100%; border-collapse: collapse; } .ocr-list-container .right-side .table-container.table-header { margin-bottom: 20px; } .ocr-list-container .right-side .table-container tr.hide { visibility: hidden; } .ocr-list-container .right-side .table-container tr.hide * { padding: 0 !important; margin: 0 !important; border: unset !important; outline: unset !important; } .ocr-list-container .right-side .table-container th, .ocr-list-container .right-side .table-container td { border: 1px solid #e2e4ec; } .ocr-list-container .right-side .table-container th { width: 200px; text-align: right; font-weight: normal; background: #f8f9fb; padding: 15px; color: #666666; font-size: 16px; } .ocr-list-container .right-side .table-container td { padding: 0; } .ocr-list-container .right-side .table-container td:not([colspan]) { width: 360px; } .ocr-list-container .right-side .table-container td[colspan="3"] { width: calc(100% - 200px); } .ocr-list-container .right-side .table-container td>input { width: 100%; outline: none; padding: 15px; line-height: 1em; border: unset; color: #333333; font-size: 16px; } .ocr-list-container .right-side .table-container td>textarea { width: 100%; height: 120px; resize: none; outline: none; border: unset; color: #333333; font-size: 16px; padding: 15px; } .ocr-list-container .right-side .table-container td>select { width: 100%; outline: none; border: unset; color: #333333; font-size: 16px; padding: 15px; } /* 智能识别列表结束 */ /* 成功弹窗开始 */ .success-popup { position: absolute; bottom: var(--message-dialog-bottom, calc(100% + 5px)); right: var(--message-dialog-right, 0); width: 459px; height: 150px; background: #ffffff; border: 1px solid #ade791; box-shadow: 10px 10px 5px 0px rgba(61, 187, 0, 0.3); border-radius: 4px; color: #333; font-size: 18px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .success-popup>div.left { width: 180px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .success-popup .icon { width: 82px; height: 82px; background: #3dbb00; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; color: #fff; } .success-popup>.right { width: calc(100% - 180px); } .success-popup>.right>div { text-align: left; } .success-popup .title { font-size: 36px; color: #666666; } .success-popup .desc { margin-top: 10px; font-size: 24px; color: #333; } /* 失败弹窗开始 */ .errorDialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 587px; height: 300px !important; background: #ffffff; border: 1px solid #e1adad; box-shadow: 0px 10px 5px 0px rgba(236, 59, 56, 0.3); border-radius: 4px; color: #333; font-size: 18px; } .errorDialog .body { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 50px 20px; } .errorDialog .left { width: 180px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .errorDialog .icon { width: 82px; height: 82px; background: #ec3b38; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; color: #fff; } .errorDialog .body>.right { width: calc(100% - 180px); } .errorDialog .body>.right>div { text-align: left; } .errorDialog .title { font-size: 36px; color: #666666; } .errorDialog .desc { margin-top: 10px; font-size: 24px; color: #333; } .errorDialog .footer { padding: 10px 40px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .errorDialog .btn { cursor: pointer; width: 120px; height: 42px; background: #ef5d0c; border: 1px solid #f5904b; border-radius: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 15px; color: #fff; } /* 审核开始 */ .verify-container { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .verify-container>div { height: 100%; } /* 左侧主内容区域 */ .verify-container .left-side { width: 100%; /* 默认状态下,右侧只占10px */ transition: width 0.3s ease; position: relative; } .verify-container .left-side>div { border-right: 2px solid #e2e4ec; } .verify-container .content-box { height: calc(100% - 60px * 2 - 30px); padding: 20px 24px; border-bottom: 1px solid #e2e4ec; overflow-y: auto; } .verify-container .content-box>div { background: #ffffff; border: 1px solid #dddfe6; border-radius: 4px; padding: 24px; position: relative; } .verify-container .content-box>div:not(:last-child) { margin-bottom: 20px; } .verify-container .handle-bar { position: absolute; top: 1px; left: 1px; font-weight: bold; cursor: pointer; } .verify-container .member-box .box-header .title { color: #333; font-size: 18px; line-height: 1.8em; } .verify-container .member-box .box-body { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 6px; } .verify-container .box-body>div { height: 112px; } .verify-container .avatar { width: 81px; } .verify-container .left-side .box-body .avatar>img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .verify-container .left-side .box-body .info { width: calc(100% - 81px); padding-left: 24px; } .verify-container .left-side .box-body .info .table { padding: 5px 0 15px 0; } .verify-container .left-side .box-body .info .table>table { border-collapse: collapse; } .verify-container .left-side .box-body .info .table>table td { border: 1px solid #dddfe6; padding: 5px 32px; text-align: center; color: #333; font-size: 16px; } .verify-container .left-side .box-body .info .description { color: #666; font-size: 16px; } .verify-container .left-side .zhengshu-box .box-header .title { color: #333; font-size: 18px; line-height: 1.8em; } .verify-container .left-side .zhengshu-box .box-body { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .verify-container .left-side .box-body>div { height: 103px; } .verify-container .left-side .avatar { width: 145px; } .verify-container .left-side .avatar>img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .verify-container .left-side .info { padding-left: 24px; width: calc(100% - 145px); } .verify-container .left-side .p { font-size: 16px; color: #333; padding: 5px 0 15px 0; } .verify-container .left-side .p>p { line-height: 1.5em; padding: 0; margin: 0; } .verify-container .left-side .tip { font-size: 16px; color: #666666; } .verify-container .action-bar-1 { border-top: 1px solid #e2e4ec; position: absolute; width: 100%; bottom: 60px; height: 90px; background: #ffffff; } .verify-container .action-list { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: 50px; padding: 0 28px; gap: 28px; } .verify-container .action-list>.span { cursor: pointer; } .verify-container .input-area { height: 40px; padding: 0 28px; } .verify-container .input-area>textarea, .verify-container .input-area>input { padding: 0; line-height: 40px; width: 100%; height: 100%; resize: none; font-size: 18px; outline: unset; border: unset; background: unset; } .verify-container .action-bar-2 { height: 50px; background: #ffffff; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 10px 20px 10px 20px; gap: 20px; color: #999999; font-size: 18px; } .verify-container .action-bar-2>button { font-size: inherit; --action-bar-bg: transparent; --action-bar-color: inherit; --action-bar-border: #bfc1c6; background: var(--action-bar-bg); border: 1px solid var(--action-bar-border); color: var(--action-bar-color); outline: none; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 5px 20px; border-radius: 4px; cursor: pointer; } .verify-container .btn-primary:hover { --action-bar-bg: #242835; --action-bar-border: #242835; --action-bar-color: #fff; } .verify-container .btn-danger:hover { --action-bar-bg: #f19149; --action-bar-color: #fff; --action-bar-border: #f19149; } .verify-container .right-side { width: 16px; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; background: transparent; transition: width 0.3s ease; overflow: hidden; /* 超出部分隐藏 */ z-index: 10001; /* 确保在左侧内容之上 */ } .verify-container .right-side-div { width: 280px; overflow-y: auto; background: #edf1f5; height: 100%; display: flex; flex-direction: column; } .verify-container .right-side-div .header { border-bottom: 2px solid #e2e4ec; } /* 右侧边栏 - 展开状态 */ .verify-container .right-side.expanded { width: 296px; } .verify-container .right-side .btn-toggle::before{ content: ""; position: absolute; left: -8px; top: -4px; width: 20px; height: 20px; transform-origin: 100% 100%; transform: rotate(49deg); z-index: 1; border-left: 1px solid #d2d2d2; background: #ffffff; } .verify-container .right-side .btn-toggle { position: absolute; bottom: 25%; left: 0; transform: translateY(30%); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; border:1px solid #d2d2d2; border-right: none; border-top: none; background: #ffffff; } .verify-container .right-side .icon-container{ background: #fff; position:relative; z-index: 1000; } /* 右侧内容容器 - 只在展开状态显示 */ .verify-container .right-side-content { opacity: 0; transition: opacity 0.2s ease; width: 100%; height: 100%; padding-left: 16px; /* 留出箭头区域 */ box-sizing: border-box; position: relative; z-index: 1000; } /* 展开状态下显示内容 */ .verify-container .right-side.expanded .right-side-content { opacity: 1; } .verify-nodes { flex: 1; overflow-y: auto; padding: 20px 0; margin-right: 6px; } .verify-nodes .group-item { margin-bottom: 12px; padding: 8px 0 8px 20px; } .verify-nodes .group-item { position: relative; } /* .verify-nodes .group-item::before { position: absolute; content: ""; width: 0; height: 50%; border-left: 1px solid #a0a0a0; top: 37px; left: 30px; }*/ .verify-nodes .group-item:not(:last-child)::after { position: absolute; content: ""; width: 0; height: calc(100% - 20px); border-left: 1px solid #a0a0a0; top: 37px; left: 30px; } .verify-nodes .group-item-last-open::after { position: absolute; content: ""; width: 0; height: var(--group-line-height); border-left: 1px solid #a0a0a0; top: 37px; left: 30px; } .verify-nodes .group-item-title { cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } .verify-nodes .group-item .icon { color: #666666; position: relative; } .verify-nodes .group-item .num { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); color: #999999; font-size: 14px; } .verify-nodes .group-item-children { padding-left: 20px; } .verify-node-container { padding: 16px 0; } .verify-node-container>.info { padding: 0 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 60px; } .verify-node-container>.info>.avatar { width: 50px; height: 50px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .verify-node-container>.info>.desc { width: calc(100% - 60px - 60px); color: #333333; font-size: 14px; line-height: 1.6em; padding: 0 10px; display: flex; flex-direction: column; justify-content: flex-end; } .verify-node-container>.info>.desc>div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .verify-node-container>.info>.link { width: 60px; } .verify-node-container>.info>.link>div { padding-top: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; color: #555c6b; } .verify-node-container .description { /* margin-top: 5px; */ padding: 10px; } .verify-node-container .description.link { position: relative; } .verify-node-container .description.link::before { position: absolute; width: 20px; content: ""; height: 0; border-bottom: 1px solid #a0a0a0; top: 30px; left: -10px; } .verify-node-container .description.link::after { position: absolute; width: 16px; content: attr(data-num); height: 16px; border-radius: 50%; background: #edf1f5; border: 1px solid #a0a0a0; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 12px; top: 21px; left: -18px; z-index: 100; } .verify-node-container .description>div { width: 100%; background: #fff; border-radius: 3px; position: relative; padding: 8px 17px; color: #333333; font-size: 14px; } .verify-node-container .description>div::before { content: ""; width: 10px; height: 10px; background: #fff; position: absolute; left: 26px; top: -5px; transform: rotate(45deg); border-radius: 2px; } .verify-node-container .time { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; color: #666666; font-size: 14px; padding: 0 10px; } /* 审核结束 */ /* 知识库弹窗查看项目 */ .know-item-container { width: 587px; height: 157px; box-shadow: 2px 2px 5px #e7e8e8; background: #fafbfe; border-radius: 4px; position: relative; cursor: pointer; --header-display: none; --header-color: #999; } .know-item-container:hover { --header-display: flex; } .know-item-container:hover::after { --border-size: 8px; position: absolute; width: 100%; height: 100%; top: calc(-1 * var(--border-size)); left: calc(-1 * var(--border-size)); content: ""; border-radius: 4px; pointer-events: none; box-sizing: content-box; border: var(--border-size) solid #dddfe6; } .know-item-container.active { border: 1px solid #ddd; } .know-item-container .header { width: 48px; height: 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; display: var(--header-display); color: var(--header-color); top: 0; right: 0; position: absolute; border-top-right-radius: 4px; } .know-item-container .header:hover { --header-color: #fff; background: #575d6d; } .know-item-container .body { padding: 0px 25px; } .know-item-container .box-header { height: 50px; padding: 15px 0 5px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .know-item-container .box-header .title { width: 100%; color: #333333; font-size: 22px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } .know-item-container .box-header .title>div { flex-shrink: 0; } .know-item-container .box-header .title .p { width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .know-item-container .box-body { height: 57px; color: #333; display: flex; flex-direction: row; justify-content: space-between; align-items: center; --right-padding-left: 12px; --right-width: calc(100% - 100px); } .know-item-container .no-thumb { --right-padding-left: 0; --right-width: 100%; } .know-item-container .left { width: 100px; height: 100%; } .know-item-container .left>img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .know-item-container .right { width: var(--right-width); padding-left: var(--right-padding-left); } .know-item-container .right .title { font-size: 16px; color: #666666; line-height: 24px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .know-item-container .box-footer { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 47px; } .know-item-container .box-footer>div { width: 100%; } .know-item-container .box-footer .info { margin-top: 5px; font-size: 14px; color: #999999; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; } .know-item-container .progress { margin-top: 2px; display: flex; flex-direction: row; justify-content: center; align-items: center; --status-color: #3172f1; } .know-item-container .progress.error { --status-color: #ff0000; } .know-item-container .progress.waiting { --status-color: #3172f1; } .know-item-container .status { font-size: 12px; padding-right: 1em; color: var(--status-color); } .know-item-container .line { flex: 1; padding: 10px 0; position: relative; } .know-item-container .line::after { content: ""; background: #edf1f5; width: 100%; height: 2px; border-radius: 1px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; } .know-item-container .line>div { z-index: 2; width: 100%; height: 2px; border-radius: 1px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: var(--status-color); } .know-item-container .bar { color: #c3c7cb; padding-left: 1em; } /* 增加预警 */ .editor-container { width: 100%; height: 100%; } .editor-container .content-box { height: calc(100% - 60px); padding: 25px 24px; } .editor-container .header { height: 172px; } .editor-container .header>table { border-collapse: collapse; } .editor-container .header th, .editor-container .header td { border: 1px solid #e2e4ec; padding: 20px; } .editor-container .header th { width: 160px; background: #f8f9fb; color: #666666; font-size: 16px; text-align: right; font-weight: normal; } .editor-container .header td { color: var(--td-default-color, #333); font-size: 16px; } .editor-container .desc { --td-default-color: #666; } .editor-container .content-box .header select { width: 100px; font-size: inherit; height: 100%; outline: unset; border: unset; color: #999; } .editor-container .content-box .body { height: calc(100% - 172px); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; } .editor-container .content-box .body>div { width: 50%; height: 100%; border: 1px solid #e7e8e8; box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.06); } .editor-container .content-box .body>div>div { width: 100%; } .editor-container .item-header { height: 60px; border-bottom: 1px solid #eaeaea; padding: 0 20px; font-size: 22px; color: #4d4d4d; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .editor-container .item-header-left { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } .editor-container .item-header-left .icon-container { color: #989898; } .editor-container .item-header-right { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; } .editor-container .item-header-right input { width: 100px; height: 24px; border: 1px solid #eaeaea; border-radius: 2px; outline: none; padding: 0 10px; } .editor-container .item-header-right .icon-container { color: #c3c7cb; } .editor-container .item-body { padding-right: 6px; height: calc(100% - 60px); overflow-y: auto; } .editor-container .box-body { width: 100%; height: 100%; overflow-y: auto; overflow: hidden; border: 1px solid #e2e4ec; } .editor-container .content-area { width: 100%; } .editor-container .action-bar { height: 60px; color: #c3c6ca; border-bottom: 1px solid #dedfdf; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .editor-container .action-bar .group { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: relative; } .editor-container .action-bar .group::after { content: ""; width: 0; height: 60%; top: 50%; position: absolute; right: 0; border-right: 1px solid #efeff0; transform: translateY(-50%); } .editor-container .action-bar .group>div { width: 50px; height: 60px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .editor-container .content-area { height: calc(100% - 60px); } .editor-container .content-area textarea { width: 100%; height: 100%; resize: none; outline: unset; border: unset; padding: 10px 20px; font-size: 16px; color: #333; } /* 弹窗底部按钮样式 */ .bottom-div{ height: 60px; background: white; border-top: 1px solid #e2e4ec; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0 20px; gap: 20px; color: #999999; font-size: 18px; position: absolute; width: 100%; bottom: 0; background: #fff !important; } .bottom-div button { font-size: 18px; --bottom-div-bg: transparent; --bottom-div-color: inherit; --bottom-div-border: #bfc1c6; background: var(--bottom-div-bg); border: 1px solid var(--bottom-div-border); color: var(--bottom-div-color); outline: none; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; padding: 5px 20px; border-radius: 4px; cursor: pointer; } .bottom-div button:hover { --bottom-div-bg: #242835; --bottom-div-color: #fff; } .bottom-div .bottom-button-reject:hover{ --bottom-div-bg: #e65505 ; --bottom-div-color: #fff; --bottom-div-border: #e65505; } /* ss-bottom-button wrapper/dropdown 修改支持更多按钮 by xu 20251211 */ .ss-bottom-button-wrapper { position: relative; display: inline-flex; align-items: center; } .ss-bottom-button-dropdown { position: absolute; bottom: calc(100% + 12px); right: 0; min-width: 150px; background-color: #393d51; border-radius: 5px; box-shadow: 0 8px 20px rgba(24, 26, 33, 0.35); padding: 10px 4px; z-index: 10; color: #fff; } .ss-bottom-button-dropdown::before { content: ""; position: absolute; bottom: -12px; left: 0; right: 0; height: 12px; background: transparent; } .ss-bottom-button-dropdown::after { content: ""; width: 0.8em; height: 0.8em; background-color: #393d51; position: absolute; right: 1.5em; bottom: -0.4em; transform: rotate(45deg); } .ss-bottom-button-dropdown-item { font-size: 14px; line-height: 1.8; padding: 5px 15px; color: inherit; cursor: pointer; white-space: nowrap; } .ss-bottom-button-dropdown-item:hover { background: #fffdfd; color: #333; } /* 下拉按钮开始 */ .ss-drop-button { height: 36px; font-size: 16px; color: #999; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0 20px; border-radius: 4px; margin: 0; /* line-height: 2em; */ cursor: pointer; background: var(--btn-bg, unset); color: var(--btn-color, #999999); border: 1px solid var(--btn-border-color, #c4c7cc); position: relative; } .ss-drop-button:hover { --btn-bg: #393d51; --btn-color: #fff; } .ss-drop-button .popup { position: absolute; top: calc(100% + 12px); right: 0; background-color: #393d51; border-radius: 5px; padding: 10px 4px; z-index: 10; height: auto; } .ss-drop-button .popup::before { content: ""; position: absolute; top: -12px; /* 与弹窗的 top: calc(100% + 12px) 对应 */ left: 0; right: 0; height: 12px; background: transparent; /* 透明背景 */ } .ss-drop-button .popup::after { content: ""; width: 0.8em; height: 0.8em; background: #393d51; position: absolute; right: 1.5em; top: -0.4em; transform: rotate(45deg); } .ss-drop-button .popup div { padding: 5px 15px; cursor: pointer; white-space: nowrap; } .ss-drop-button .popup div:hover { background: #fffdfd; color: #333; } .ss-drop-button-more::before{ width: 6px; height: 6px; content: ''; border-radius: 50%; background-color: #8e8e8e; position: absolute; right: 4px; top: 4px; } /* 下拉按钮结束 */ /* 通用查询卡片下拉按钮开始 */ .cart-list-button-popup{ position: absolute; top: calc(100% + 8px); right: -8px; background-color: #393d51; border-radius: 5px; padding: 10px 4px; z-index: 10; } .cart-list-button-popup::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; } .cart-list-button-popup::after { content: ""; width: 0.6em; height: 0.6em; background: #393d51; position: absolute; right: 1.7em; top: -0.3em; transform: rotate(45deg); } .cart-list-button-popup>div { padding: 5px 15px; cursor: pointer; white-space: nowrap; font-size: 16px; display: flex; align-items: center; } .cart-list-button-popup .cart-list-icon{ margin-right: 5px; font-size: 16px; } .cart-list-button-popup>div:hover { background: #fffdfd; color: #333; } .cart-list-button-popup>div:hover .cart-list-icon::before{ color: #333333 !important; } /* 通用查询卡片下拉按钮结束 */ /* 一级页面面包屑 */ .bread-crumb{ display: flex; align-items: center; position: absolute; left: 20px; gap: 10px; height: 100%; z-index: 111; color: #999999; } .bread-crumb>div{ cursor: pointer; } /* 日期选择器样式 */ .el-date-table,.el-time-spinner__item{ font-size: 14px; } .custom-date-picker .el-icon{ font-size: 16px; color: #333; } .custom-date-picker .el-input__wrapper { box-shadow: none !important; display: flex; align-items: center; } .custom-date-picker .el-input__inner::placeholder { color: #999; } .custom-date-picker .el-input__inner { font-size: 16px !important; font-weight: normal; height: 32px; line-height: 33px; color: #000; } .today .el-date-table-cell__text{ border: 1px solid #000; border-radius: 50%; } .el-picker-panel__icon-btn{ margin-top: 0; } .el-date-picker__time-header{ padding: 12px 5px; border-bottom: none; } .el-picker-panel__footer,.el-time-panel__footer{ border-top: none; padding: 5px 10px 10px; } .el-button--small{ font-size: 14px; padding: 14px 16px; } .el-time-panel__footer{ height: auto; line-height: 25px; display: flex; justify-content: flex-end; } .el-time-panel__btn{ font-size: 14px; height: 24px; padding: 14px 16px; margin:0; line-height: unset; display: flex; align-items: center; } .el-input--small{ font-size: 16px; } .el-input--small .el-input__wrapper{ padding: 8px 7px 6px; } .jodit-container:not(.jodit_inline){ border: none !important; } /* 搜索区域的日期选择器 */ .ss-search-date-picker input:focus,.el-picker-panel .el-input__inner:focus{ border:1px solid #c4c7cc !important; outline: none; } .ss-search-date-picker .custom-date-picker .el-icon{ font-size: 16px; color: #333; } .ss-search-date-picker .el-input--large .el-input__wrapper{ padding:0; } .ss-search-date-picker .el-input__wrapper { height: 32px; width: 100%; padding:0; } .ss-search-date-picker .el-input__prefix, .ss-search-date-picker .el-input__suffix { display: none; } .ss-search-date-picker .custom-date-picker .el-input__inner::placeholder { color: #333; } .ss-search-date-picker .custom-date-picker .el-input__inner { width: 100%; font-size: 14px !important; font-weight: normal; height: 32px; line-height: 33px; font-family: 'SimHei', 'Microsoft YaHei', 'Helvetica Neue', Helvetica; } .ss-search-date-picker .el-input__inner::placeholder { font-family: 'SimHei', 'Microsoft YaHei', 'Helvetica Neue', Helvetica !important; color: #999999 !important; } .el-picker-panel .el-input__inner{ width: 100% !important; }