#edit { margin: 0 auto; } #edit a { text-decoration: none; } #edit .edit-head { width: 100%; height: 60px; background: linear-gradient(180deg, #ffffff -41%, #eef8f9 96%); margin-bottom: 20px; } #edit .edit-head .edit-head-container { width: 1200px; margin: 0 auto; } #edit .edit-head .edit-head-container .icon { width: 135px; height: 33px; margin-right: 20px; } #edit .edit-head .edit-head-container .dot { width: 6px; height: 6px; background-color: #d35110; border-radius: 50%; margin-right: 20px; } #edit .edit-head .edit-head-container .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 18px; color: #000000; margin-right: 20px; } #edit .edit-head .edit-head-container .hint { font-size: 13px; color: #aaaaaa; } #edit .edit-head .edit-head-container .avatar { width: 32px; height: 32px; border-radius: 50%; } #edit .edit-container { width: 890px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; margin: 0 auto; } #edit .edit-container .title-box { position: relative; } #edit .edit-container .title-box .title-input { width: 100%; height: 100px; border: none; outline: none; border-radius: 10px 10px 0 0; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 24px; padding: 0 36px; border-bottom: 1px solid #ebebeb; } #edit .edit-container .title-box .sum { position: absolute; bottom: 5px; right: 5px; color: #555; font-size: 14px; } #edit .edit-container .editor-toolbar { height: 36px; background-color: #fbfbfb; padding-left: 25px; position: sticky; top: 0; z-index: 10; } #edit .edit-container .editor-toolbar .toolbar-item { cursor: pointer; height: 30px; line-height: 30px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #000000; line-height: 23px; margin-right: 40px; position: relative; padding: 0 10px; border-radius: 50px; } #edit .edit-container .editor-toolbar .toolbar-item .icon { width: 16px; height: 16px; margin-right: 5px; } #edit .edit-container .editor-toolbar .toolbar-item .file { opacity: 0; /* 隐藏输入框 */ background: transparent; border: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } #edit .edit-container .editor-toolbar .toolbar-item .file::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box-mask { display: block; } #edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box { display: flex; } #edit .edit-container .editor-toolbar .toolbar-item .link-box-mask, #edit .edit-container .editor-toolbar .toolbar-item .emoji-box-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: none; } #edit .edit-container .editor-toolbar .toolbar-item .link-box-mask { background: transparent; } #edit .edit-container .editor-toolbar .toolbar-item .emoji-box { width: 582px; border-radius: 8px; background-color: #fff; filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); top: 45px; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); border: 1px solid #ebebeb; display: none; flex-wrap: wrap; font-size: 22px; padding: 8px; } #edit .edit-container .editor-toolbar .toolbar-item .emoji-box::after { content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); } #edit .edit-container .editor-toolbar .toolbar-item .emoji-box .emoji-icon { margin: 5px; cursor: pointer; } #edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box-mask { display: block; } #edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box { display: flex; } #edit .edit-container .editor-toolbar .toolbar-item.link .link-box { background-color: #ffffff; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745); width: 336px; height: 282px; position: absolute; top: 30px; left: 0%; z-index: 1; border: 1px solid #ebebeb; display: none; flex-direction: column; padding: 18px 20px 0; } #edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item { margin-bottom: 22px; flex-direction: column; } #edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #555555; line-height: 26px; margin-bottom: 8px; } #edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .input { height: 36px; border: 1px solid #d7d7d7; border-radius: 7px; padding: 0 10px; font-size: 14px; color: #000000; } #edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn { width: 72px; height: 40px; line-height: 40px; background-color: #50e3c2; border-radius: 8px; margin-left: auto; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; margin-top: 8px; } #edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn:hover { background-color: #23e0b6; } #edit .edit-container .editor-toolbar .toolbar-item.h2.pitch { background-color: #f6f6bd; } #edit .edit-container .content-input { min-height: 509px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-size: 15px; color: #555555; line-height: 26px; outline: none; padding: 36px 36px 20px; white-space: break-spaces; position: relative; max-height: 80vh; overflow: auto; } #edit .edit-container .content-input.empty:before { content: "输入正文"; pointer-events: none; position: absolute; top: 36px; left: 36px; color: #757575; } #edit .edit-container .content-input img { display: block; max-width: 100%; height: 220px; } #edit .edit-container .content-input h2 { color: #000000; font-size: 18px; line-height: 30px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; } #edit .edit-container .content-input .blue { color: #026277; margin: 0 4px; } #edit .edit-container .content-input .fill { width: 100%; height: 26px; } #edit .edit-container .content-input a { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-size: 15px; text-decoration: underline; color: #04b0d5; } #edit .edit-container .tags-list { padding: 0 36px; margin-bottom: 10px; flex-wrap: wrap; } #edit .edit-container .tags-list .tag-item { margin-bottom: 10px; height: 32px; line-height: 32px; background-color: #f6f6f6; border-radius: 73px; padding: 0 14px; font-size: 14px; color: #606060; margin-right: 10px; cursor: pointer; } #edit .edit-container .action-buttons { border-top: 1px solid #ebebeb; padding: 0 36px; justify-content: space-between; } #edit .edit-container .action-buttons .left-section { font-size: 14px; color: #333; cursor: pointer; } #edit .edit-container .action-buttons .left-section .icon-pitch { width: 16px; height: 16px; margin-right: 5px; } #edit .edit-container .action-buttons .left-section .icon { width: 16px; height: 16px; border: 1px solid #797979; margin-right: 5px; } #edit .edit-container .action-buttons .right-section { height: 102px; } #edit .edit-container .action-buttons .right-section .draft-btn, #edit .edit-container .action-buttons .right-section .publish-btn { font-size: 14px; border-radius: 8px; cursor: pointer; } #edit .edit-container .action-buttons .right-section .draft-btn { width: 100px; height: 42px; line-height: 42px; background-color: rgba(242, 242, 242, 0.69803922); color: #7f7f7f; font-size: 14px; margin-right: 15px; transition: background-color 0.3s ease; } #edit .edit-container .action-buttons .right-section .draft-btn .icon { width: 20px; height: 20px; margin-right: 6px; } #edit .edit-container .action-buttons .right-section .draft-btn:hover { background-color: #ebebeb; } #edit .edit-container .action-buttons .right-section .publish-btn { width: 150px; height: 40px; line-height: 40px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; background-color: #50e3c2; transition: background-color 0.3s ease; } #edit .edit-container .action-buttons .right-section .publish-btn:hover { background-color: #40d1aa; }