::-webkit-scrollbar { height: 16px; width: 16px; overflow: visible } ::-webkit-scrollbar-button { width: 0; height: 0 } ::-webkit-scrollbar-corner { background: transparent } ::-webkit-scrollbar-thumb { background-color: #ddd; background-clip: padding-box; border: 4px solid #f2f4f7; border-radius: 8px; min-height: 24px } ::-webkit-scrollbar-thumb:hover { background-color: #c9c9c9 } ::-webkit-scrollbar-track { background: #f2f4f7; background-clip: padding-box } * { margin: 0; padding: 0; } body { background-color: #fff; } ul { list-style: none; } /* 选项卡样式 */ .tabs { width: 100%; height: 48px; /* 调整高度以匹配Office风格 */ top: 0; z-index: 9; position: fixed; display: flex; align-items: center; justify-content: flex-start; background: #ffffff; padding: 0 16px; overflow: hidden; border-bottom: 1px solid #eaeaea; /* 添加底部边框 */ } .tab { height: 46px; /* 调整高度以匹配选项卡容器 */ display: flex; align-items: center; justify-content: center; padding: 0 16px; cursor: pointer; border-radius: 4px 4px 0 0; /* 圆润的上边角 */ transition: background-color 0.3s ease, color 0.3s ease; font-size: 14px; /* 字体大小 */ font-weight: 500; /* 字体粗细 */ color: #333333; /* 文字颜色 */ } .tab:hover { background-color: #f3f3f3; /* 悬停背景色 */ color: #0078d4; /* 悬停文字颜色 */ } .tab.active { background-color: #ffffff; /* 选中背景色 */ color: #0078d4; /* 选中文字颜色 */ border-bottom: 2px solid #0078d4; /* 选中底部边框 */ z-index: 1; /* 确保选中的选项卡在最上层 */ } /* 内容区域样式 */ .menu { top: 48px; /* 避免被固定在顶部的选项卡遮挡 */ padding: 8px 20px; width: calc(100% - 40px); position: fixed; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; justify-content: left; background: #ffffff; border: 1px solid #eaeaea; /* 边框 */ border-top: none; /* 去掉顶部边框 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */ } .menu-section { display: none; } .menu-section.active { display: flex; } .menu-item { height: 24px; display: flex; align-items: center; } .menu-item:not(:last-child)::after { content: ''; width: 1px; height: 16px; margin:0 8px; display: inline-block; background-color: #cfd2d8; } /* .menu { width: 98%; left:1%; height: 60px; top: 24px; z-index: 9; position: fixed; display: flex; flex-wrap: wrap; align-items: center; justify-content: left; background: #fff; box-shadow: 0 0 10px rgba(128,145,165,.2); } */ .menu-divider { width: 1px; height: 16px; margin: 0 8px; display: flex; background-color: #cfd2d8; } .menu-item>div { width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0 2px; } .menu-item>div:hover { background: rgba(25, 55, 88, .04); } .menu-item>div.active { background: rgba(25, 55, 88, .08); } .menu-item i { width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: 100% 100%; } .menu-item>div>span { width: 20px; height: 3px; display: inline-block; border: 1px solid #e2e6ed; } .menu-item .select { border: none; font-size: 0.9rem; line-height: 28px; user-select: none; } .menu-item .select::after { position: absolute; content: ""; top: 11px; width: 0; height: 0; right: 2px; border-color: #767c85 transparent transparent; border-style: solid solid none; border-width: 3px 3px 0; } .menu-item .options { width: 70px; position: absolute; left: 0; top: 25px; padding: 10px; background: #fff; font-size: 14px; box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); border: 1px solid #e2e6ed; border-radius: 2px; display: none; } .menu-item .options.visible { display: block; } .menu-item .options li { padding: 5px; margin: 5px 0; user-select: none; transition: all .3s; } .menu-item .options li:hover { background-color: #ebecef; } .menu-item .options li.active { background-color: #e2e6ed; } .menu-item .menu-item__font { width: 65px; position: relative; } .menu-item .menu-item__size { width: 50px; text-align: center; position: relative; } .menu-item__font .select, .menu-item__size .select { width: 100%; height: 100%; } .menu-item__undo.no-allow, .menu-item__redo.no-allow, .menu-item>div.disable { color: #c0c4cc; cursor: not-allowed; opacity: 0.4; pointer-events: none; } .menu-item__undo i { background-image: url('./assets/images/undo.svg'); } .menu-item__redo i { background-image: url('./assets/images/redo.svg'); } .menu-item__painter i { background-image: url('./assets/images/painter.svg'); } .menu-item__format i { background-image: url('./assets/images/format.svg'); } .menu-item__size-add i { background-image: url('./assets/images/size-add.svg'); } .menu-item__size-minus i { background-image: url('./assets/images/size-minus.svg'); } .menu-item__bold i { background-image: url('./assets/images/bold.svg'); } .menu-item__italic i { background-image: url('./assets/images/italic.svg'); } .menu-item .menu-item__underline { width: 30px; position: relative; } .menu-item__underline>i { flex-shrink: 0; background-image: url('./assets/images/underline.svg'); } .menu-item__underline .select { width: 100%; height: 100%; } .menu-item .menu-item__underline .options { width: 128px; } .menu-item .menu-item__underline li { padding: 1px 5px; } .menu-item__underline li i { pointer-events: none; } .menu-item__underline li[data-decoration-style="solid"] { background-image: url('./assets/images/line-single.svg'); } .menu-item__underline li[data-decoration-style="double"] { background-image: url('./assets/images/line-double.svg') } .menu-item__underline li[data-decoration-style="dashed"] { background-image: url('./assets/images/line-dash-small-gap.svg'); } .menu-item__underline li[data-decoration-style="dotted"] { background-image: url('./assets/images/line-dot.svg'); } .menu-item__underline li[data-decoration-style="wavy"] { background-image: url('./assets/images/line-wavy.svg'); } .menu-item__strikeout i { background-image: url('./assets/images/strikeout.svg'); } .menu-item__superscript i { background-image: url('./assets/images/superscript.svg'); } .menu-item__subscript i { background-image: url('./assets/images/subscript.svg'); } .menu-item__color, .menu-item__highlight { display: flex; flex-direction: column; } .menu-item__color #color, .menu-item__highlight #highlight { width: 1px; height: 1px; visibility: hidden; outline: none; appearance: none; } .menu-item__color i { background-image: url('./assets/images/color.svg'); } .menu-item__color span { background-color: #000000; } .menu-item__highlight i { background-image: url('./assets/images/highlight.svg'); } .menu-item__highlight span { background-color: #ffff00; } .menu-item .menu-item__title { width: 60px; position: relative; } .menu-item__title .select { width: calc(100% - 20px); height: 100%; } .menu-item__title i { transform: translateX(-5px); background-image: url('./assets/images/title.svg'); } .menu-item__title .options { width: 80px; } .menu-item__left i { background-image: url('./assets/images/left.svg'); } .menu-item__center i { background-image: url('./assets/images/center.svg'); } .menu-item__right i { background-image: url('./assets/images/right.svg'); } .menu-item__alignment i { background-image: url('./assets/images/alignment.svg'); } .menu-item__justify i { background-image: url('./assets/images/justify.svg'); } .menu-item__row-margin { position: relative; } .menu-item__row-margin i { background-image: url('./assets/images/row-margin.svg'); } .menu-item__list { position: relative; } .menu-item__list i { background-image: url('./assets/images/list.svg'); } .menu-item__list .options { width: 110px; } .menu-item__list .options>ul>li * { pointer-events: none; } .menu-item__list .options>ul>li li { margin-left: 18px; } .menu-item__list .options>ul>li[data-list-style='checkbox'] li::marker { font-size: 11px; } .menu-item__image i { background-image: url('./assets/images/image.svg'); } .menu-item__image input { display: none; } .menu-item__table { position: relative; } .menu-item__table i { background-image: url('./assets/images/table.svg'); } .menu-item .menu-item__table__collapse { width: 270px; height: 310px; background: #fff; box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); border: 1px solid #e2e6ed; box-sizing: border-box; border-radius: 2px; position: absolute; display: none; z-index: 99; top: 25px; left: 0; padding: 14px 27px; cursor: auto; } .menu-item .menu-item__table__collapse .table-close { position: absolute; right: 10px; top: 5px; cursor: pointer; } .menu-item .menu-item__table__collapse .table-close:hover { color: #7d7e80; } .menu-item .menu-item__table__collapse:hover { background: #fff; } .menu-item .menu-item__table__collapse .table-title { display: flex; justify-content: flex-start; padding-bottom: 5px; border-bottom: 1px solid #e2e6ed; } .table-title span { font-size: 12px; color: #3d4757; display: inline; margin: 0; } .table-panel { cursor: pointer; } .table-panel .table-row { display: flex; flex-wrap: nowrap; margin-top: 10px; pointer-events: none; } .table-panel .table-cel { width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #e2e6ed; background: #fff; position: relative; margin-right: 6px; pointer-events: none; } .table-panel .table-cel.active { border: 1px solid rgba(73, 145, 242, .2); background: rgba(73, 145, 242, .15); } .table-panel .table-row .table-cel:last-child { margin-right: 0; } .menu-item__hyperlink i { background-image: url('./assets/images/hyperlink.svg'); } .menu-item__separator { position: relative; } .menu-item__separator>i { background-image: url('./assets/images/separator.svg'); } .menu-item .menu-item__separator .options { width: 128px; } .menu-item .menu-item__separator li { padding: 1px 5px; } .menu-item__separator li i { pointer-events: none; } .menu-item__separator li[data-separator="0,0"] { background-image: url('./assets/images/line-single.svg'); } .menu-item__separator li[data-separator="1,1"] { background-image: url('./assets/images/line-dot.svg'); } .menu-item__separator li[data-separator="3,1"] { background-image: url('./assets/images/line-dash-small-gap.svg'); } .menu-item__separator li[data-separator="4,4"] { background-image: url('./assets/images/line-dash-large-gap.svg'); } .menu-item__separator li[data-separator="7,3,3,3"] { background-image: url('./assets/images/line-dash-dot.svg'); } .menu-item__separator li[data-separator="6,2,2,2,2,2"] { background-image: url('./assets/images/line-dash-dot-dot.svg'); } .menu-item__watermark>i { background-image: url('./assets/images/watermark.svg'); } .menu-item__watermark { position: relative; } .menu-item__codeblock i { background-image: url('./assets/images/codeblock.svg'); } .menu-item__page-break i { background-image: url('./assets/images/page-break.svg'); } .menu-item__control { position: relative; } .menu-item__control i { background-image: url('./assets/images/control.svg'); } .menu-item__checkbox i { background-image: url('./assets/images/checkbox.svg'); } .menu-item__radio i { background-image: url('./assets/images/radio.svg'); } .menu-item__latex i { background-image: url('./assets/images/latex.svg'); } .menu-item__date { position: relative; } .menu-item__date i { background-image: url('./assets/images/date.svg'); } .menu-item__date .options { width: 160px; } .menu-item__block i { background-image: url('./assets/images/block.svg'); } .menu-item .menu-item__control .options { width: 55px; } .menu-item__search { position: relative; } .menu-item__search i { background-image: url('./assets/images/search.svg'); } .menu-item .menu-item__search__collapse { width: 260px; height: 72px; box-sizing: border-box; position: absolute; display: none; z-index: 99; top: 25px; left: 0; background: #ffffff; box-shadow: 0px 5px 5px #e3dfdf; } .menu-item .menu-item__search__collapse:hover { background: #ffffff; } .menu-item .menu-item__search__collapse>div { width: 250px; height: 36px; padding: 0 5px; line-height: 36px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; } .menu-item .menu-item__search__collapse>div input { width: 205px; height: 27px; appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #ebebeb; box-sizing: border-box; color: #606266; display: inline-block; line-height: 27px; outline: none; padding: 0 5px; } .menu-item .menu-item__search__collapse>div span { height: 100%; color: #dcdfe6; font-size: 25px; display: inline-block; border: 0; padding: 0 10px; } .menu-item .menu-item__search__collapse__replace button { display: inline-block; border: 1px solid #e2e6ed; border-radius: 2px; background: #fff; line-height: 22px; padding: 0 6px; white-space: nowrap; margin-left: 4px; cursor: pointer; font-size: 12px; } .menu-item .menu-item__search__collapse__replace button:hover { background: rgba(25, 55, 88, .04); } .menu-item .menu-item__search__collapse__search { position: relative; } .menu-item .menu-item__search__collapse__search label { right: 110px; font-size: 12px; color: #3d4757; position: absolute; } .menu-item .menu-item__search__collapse__search>input { padding: 5px 90px 5px 5px !important; } .menu-item .menu-item__search__collapse__search>div { width: 28px; height: 27px; display: flex; justify-content: center; align-items: center; position: absolute; border-left: 1px solid #e2e6ed; transition: all .5s; } .menu-item .menu-item__search__collapse__search>div:hover { background-color: rgba(25, 55, 88, .04); } .menu-item .menu-item__search__collapse__search i { width: 6px; height: 8px; transform: translateY(1px); } .menu-item .menu-item__search__collapse__search .arrow-left { right: 76px; } .menu-item .menu-item__search__collapse__search .arrow-left i { background: url(./assets/images/arrow-left.svg) no-repeat; } .menu-item .menu-item__search__collapse__search .arrow-right { right: 48px; } .menu-item .menu-item__search__collapse__search .arrow-right i { background: url(./assets/images/arrow-right.svg) no-repeat; } .menu-item__print i { background-image: url('./assets/images/print.svg'); } .catalog { width: 250px; position: fixed; left: 0; bottom: 0; top: 100px; display: none; padding: 0 20px 40px 20px; } .catalog .catalog__header { height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e6ed; } .catalog .catalog__header span { color: #3d4757; font-size: 14px; font-weight: bold; } .catalog .catalog__header i { width: 16px; height: 16px; cursor: pointer; display: inline-block; background: url(./assets/images/close.svg) no-repeat; transition: all .2s; } .catalog .catalog__header>div:hover { background: rgba(235, 238, 241); } .catalog__main { height: calc(100% - 60px); padding: 10px 0; overflow-y: auto; overflow-x: hidden; } .catalog__main .catalog-item { width: 100%; padding-left: 10px; box-sizing: border-box; } .catalog__main>.catalog-item { padding-left: 0; } .catalog__main .catalog-item .catalog-item__content { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .catalog__main .catalog-item .catalog-item__content:hover>span { color: #4991f2; } .catalog__main .catalog-item .catalog-item__content span { color: #3d4757; line-height: 30px; font-size: 12px; white-space: nowrap; cursor: pointer; user-select: none; } .editor>div { margin: 90px auto 80px; } .ce-page-container canvas { box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px; } .comment { width: 250px; height: 650px; position: fixed; transform: translateX(420px); top: 200px; left: 50%; overflow-y: auto; } .comment-item { background: #ffffff; border: 1px solid #e2e6ed; position: relative; border-radius: 8px; padding: 15px; font-size: 14px; margin-bottom: 20px; cursor: pointer; transition: all .5s; } .comment-item:hover { border-color: #c0c6cf; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); } .comment-item.active { border-color: #E99D00; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); } .comment-item__title { height: 22px; position: relative; display: flex; align-items: center; color: #c1c6ce; } .comment-item__title span:first-child { background-color: #dbdbdb; width: 4px; height: 16px; margin-right: 5px; display: inline-block; border-radius: 999px; } .comment-item__title span:nth-child(2) { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .comment-item__title i { width: 16px; height: 16px; cursor: pointer; position: absolute; right: -8px; top: -8px; background: url(./assets/images/close.svg) no-repeat; } .comment-item__title i:hover { opacity: 0.6; } .comment-item__info { height: 28px; display: flex; align-items: center; justify-content: space-between; } .comment-item__info>span:first-child { font-weight: 600; } .comment-item__info>span:last-child { color: #c1c6ce; } .comment-item__content { line-height: 22px; } .footer { width: 100%; height: 30px; display: flex; align-items: center; justify-content: space-between; background: #f2f4f7; z-index: 9; position: fixed; bottom: 0; left: 0; font-size: 12px; padding: 0 4px 0 20px; box-sizing: border-box; } .footer>div:first-child { display: flex; align-items: center; } .footer .catalog-mode { padding: 1px; position: relative; } .footer .catalog-mode i { width: 16px; height: 16px; margin-right: 5px; cursor: pointer; display: inline-block; background-image: url('./assets/images/catalog.svg'); } .footer .page-mode { padding: 1px; position: relative; } .footer .page-mode i { width: 16px; height: 16px; margin-right: 5px; cursor: pointer; display: inline-block; background-image: url('./assets/images/page-mode.svg'); } .footer .options { width: 70px; position: absolute; left: 0; bottom: 25px; padding: 10px; background: #fff; font-size: 14px; box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); border: 1px solid #e2e6ed; border-radius: 2px; display: none; } .footer .options.visible { display: block; } .footer .options li { padding: 5px; margin: 5px 0; user-select: none; transition: all .3s; text-align: center; cursor: pointer; } .footer .options li:hover { background-color: #ebecef; } .footer .options li.active { background-color: #e2e6ed; } .footer>div:first-child>span { display: inline-block; margin-right: 5px; letter-spacing: 1px; } .footer>div:last-child { display: flex; align-items: center; justify-content: space-between; } .footer>div:last-child>div { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .footer>div:last-child>div:hover { background: rgba(25, 55, 88, .04); } .footer>div:last-child i { width: 16px; height: 16px; display: inline-block; cursor: pointer; } .footer .editor-option i { background-image: url('./assets/images/option.svg'); } .footer .page-scale-minus i { background-image: url('./assets/images/page-scale-minus.svg'); } .footer .page-scale-add i { background-image: url('./assets/images/page-scale-add.svg'); } .footer .page-scale-percentage { cursor: pointer; user-select: none; } .footer .fullscreen i { background-image: url('./assets/images/request-fullscreen.svg'); } .footer .fullscreen.exist i { background-image: url('./assets/images/exit-fullscreen.svg'); } .footer .paper-margin i { background-image: url('./assets/images/paper-margin.svg'); } .footer .editor-mode { cursor: pointer; user-select: none; } .footer .paper-size { position: relative; } .footer .paper-size i { background-image: url('./assets/images/paper-size.svg'); } .footer .paper-size .options { right: 0; left: unset; } .footer .paper-direction { position: relative; } .footer .paper-direction i { background-image: url('./assets/images/paper-direction.svg'); } .footer .paper-direction .options { right: 0; left: unset; } .ce-contextmenu-signature { background-image: url('./assets/images/signature.svg'); } .ce-contextmenu-word-tool { background-image: url('./assets/images/word-tool.svg'); } .menu-item__save { position: relative; } .menu-item__save i { background-image: url('./assets/images/save.svg'); } .menu-item__qrcode { position: relative; } .menu-item__qrcode i { background-image: url('./assets/images/qrcode.svg'); } .menu-item__barcode { position: relative; } .menu-item__barcode i { background-image: url('./assets/images/barcode.svg'); } .menu-item__importword { position: relative; } .menu-item__importword i { background-image: url('./assets/images/import-word.svg'); } .menu-item__exportword { position: relative; } .menu-item__exportword i { background-image: url('./assets/images/export-word.svg'); } .menu-item__importexcel { position: relative; } .menu-item__importexcel i { background-image: url('./assets/images/import-excel.svg'); } .menu-item__ai-edit i{ width: 20px; height: 20px; background-image: url('./assets/images/ai-edit.svg'); } .outline-svg i{ display: inline-block; width: 16px; height: 16px; margin-right: 5px; background-image: url('./assets/images/outline.svg'); } .article-svg i{ display: inline-block; width: 16px; height: 16px; margin-right: 5px; background-image: url('./assets/images/article.svg'); } .hide { display: none !important; } .active-ai { font-weight: bold; } .add-height { height: 300px !important; } .menu .menu-item__ai-edit-box { /* display: block; */ position: absolute; top: 90px; left: 10%; width: 500px; min-height: 120px; /* height: 80px; */ font-size: 14px; padding: 10px 15px 10px 0; background-color: #ebf9fb !important; box-shadow: 0px 5px 5px #e3dfdf; } .menu .menu-item__ai-edit-box span { position: absolute; top: 0px; right: 0px; width: 25px; height: 25px; /* height: 100%; */ color: #dcdfe6; font-size: 25px; text-align: center; line-height: 25px; border: 0; } .menu .menu-item__ai-edit-box input , .menu .menu-item__ai-edit-box select{ width: 180px; height: 27px; appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #ebebeb; box-sizing: border-box; color: #606266; display: inline-block; line-height: 27px; outline: none; padding: 0 10px; } .menu .menu-item__ai-edit-box button { display: inline-block; border: 1px solid #e2e6ed; border-radius: 2px; background: #fff; line-height: 22px; padding: 0 6px; white-space: nowrap; margin-left: 4px; cursor: pointer; font-size: 12px; } .menu .ai-edit-outline-box, .menu .ai-edit-content-box{ width: 100%; height: 100%; text-align: center; } .menu .ai-menu { display: inline-block; position: relative; width: 20%; min-width: 85px; height: 100%; padding: 10px 0; box-sizing: border-box; vertical-align: top; } .menu .ai-menu button { position: absolute; bottom: 10px; right: 10px; } .menu .ai-menu button:hover { background: rgba(25, 55, 88, .04); } .menu .ai-menu p { display: inline-block; height: 25px; line-height: 25px; vertical-align: middle; } .menu .ai-content-box { display: inline-block; position: relative; width: 70%; height: 100%; /* padding: 10px 15px; */ border-radius: 5px; background-color: #ffffff; box-sizing: border-box; } .menu .ai-content-box textarea { width: 100%; height: 100%; padding: 10px 15px; /* height: 250px; */ border-color: #f4f4f5; border-radius: 5px; outline: none; resize: none; box-sizing: border-box; } .ai-content-box div { margin: 5px 0; } .menu #articleLoader, .menu #outlineLoader { position: absolute; top: 40%; left: 40%; /* transform: translate(-50%, -50%); */ width: 48px; height: 48px; background-image: url('./assets/images/loader.svg'); animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }