#details { width: 1200px; margin: 0 auto; .matter { align-items: flex-start; margin-bottom: 50px; .matter-left { width: 890px; margin-right: 20px; .block { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; margin-bottom: 12px; } .matter-head { height: 80px; padding-left: 30px; padding-right: 30px; border-bottom: 1px solid #ebebeb; .avatar { width: 40px; height: 40px; margin-right: 16px; border-radius: 50%; } .content { flex-direction: column; .name { font-size: 14px; color: #333333; margin-bottom: 2px; .icon { height: 14px; margin-left: 5px; } } .time { font-size: 13px; color: #aaaaaa; } } .operate { .view { .icon { width: 13px; height: 8px; margin-right: 5px; } font-size: 12px; color: #aaaaaa; margin-right: 15px; } .btn { width: 24px; height: 16px; background-color: rgba(242, 242, 242, 1); border-radius: 150px; cursor: pointer; .icon { width: 18px; height: 18px; } } } } .label { padding: 20px 30px 20px; flex-wrap: wrap; .item { font-size: 14px; color: #555555; padding: 0 9px; height: 24px; line-height: 24px; background-color: rgba(242, 242, 242, 1); border-radius: 6px; margin-bottom: 10px; &.icon { padding: 0; } &:not(:last-child) { margin-right: 10px; } &.blue { color: #ffffff; background-color: #04b0d5; } } } .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 24px; color: #000000; line-height: 36px; padding: 0 30px; margin-bottom: 30px; } .html { padding: 0 30px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-size: 15px; color: #555555; line-height: 24px; margin-bottom: 66px; a { text-decoration: underline; color: #04b0d5; } } .last-time { color: #aaaaaa; font-size: 13px; padding: 0 30px 20px; } .action-bar { border-top: 1px solid #ebebeb; height: 64px; line-height: 64px; justify-content: flex-end; padding-right: 30px; position: sticky; bottom: 0; background: #ffff; border-radius: 0 0 10px 10px; .action-bar-item { .icon { width: 20px; height: 20px; margin-right: 6px; } font-size: 14px; color: #333333; cursor: pointer; &:not(:last-child) { margin-right: 60px; } } } .related { .related-head { padding-left: 30px; padding-top: 20px; padding-bottom: 12px; border-bottom: 1px solid #ebebeb; .text { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; margin-right: 14px; } .time { font-family: "ArialMT", "Arial", sans-serif; font-weight: 400; font-style: normal; font-size: 13px; letter-spacing: normal; color: #333333; } } .list { padding: 14px 30px; flex-wrap: wrap; .item { width: 50%; font-size: 14px; color: #555555; cursor: pointer; &:hover { color: #000000; } .dot { width: 6px; height: 6px; border-radius: 50%; background-color: #f68251; margin-right: 10px; } &:not(:nth-last-child(-n + 2)) { margin-bottom: 7px; } .text { width: 352px; } } } } } .sidebar-box { .adv { width: 291px; height: 220px; margin-bottom: 12px; display: block; cursor: pointer; .adv-img { width: 291px; height: 220px; border-radius: 8px; } } .sidebar-item { width: 291px; background-color: rgba(255, 255, 255, 1); border-radius: 8px; margin-bottom: 12px; .sidebar-header { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 15px; color: #000000; padding: 16px; border-bottom: 1px solid #f2f2f2; } .sidebar-content { flex-direction: column; padding: 20px 0; .sidebar-QRCode { width: 120px; height: 120px; margin-bottom: 18px; } .hint { .saoma-icon { width: 14px; height: 14px; margin-right: 8px; } font-size: 14px; color: #555555; } .author-box { padding: 16px 5px 30px 16px; width: 100%; .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 22px; } .author-content { .author-name { font-size: 14px; color: #000000; margin-bottom: 11px; .group { height: 14px; margin-left: 5px; } } .author-info { color: #7f7f7f; font-size: 13px; .amount { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; margin: 0 5px; } } } } .medal { width: calc(100% - 16px); padding-bottom: 22px; margin-left: 16px; .medal-title { font-size: 14px; color: #7f7f7f; margin-bottom: 14px; } .medal-list { flex-wrap: wrap; .medal-item { width: 32px; height: 32px; margin-right: 8px; margin-bottom: 8px; } } } .recently { width: calc(100% - 16px); padding-top: 30px; padding-right: 16px; margin-left: 16px; border-top: 1px solid #f2f2f2; .recently-title { font-size: 14px; color: #7f7f7f; margin-bottom: 14px; } .recently-list { flex-direction: column; .recently-item { font-size: 14px; margin-bottom: 9px; cursor: pointer; color: #333333; &:hover { color: #000000; } .dot { width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background-color: #f68251; margin-right: 10px; } } } } } } } } .coins-area { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); .coins-box { width: 624px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 11px; flex-direction: column; padding: 40px 30px 35px; position: relative; .fork { width: 12px; height: 12px; position: absolute; top: 20px; right: 20px; cursor: pointer; } .coins-head { margin-bottom: 32px; .icon { width: 50px; height: 60px; margin-right: 16px; } .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; color: #7f7f7f; font-size: 14px; .sum { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-size: 18px; color: #000000; margin: 0 5px; } } } .coins-input { width: 333px; height: 36px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(215, 215, 215, 1); border-radius: 8px; overflow: hidden; margin-bottom: 31px; .input { height: 100%; border: none; outline: none; font-size: 14px; padding: 0 10px; } .btn { width: 84px; height: 100%; line-height: 36px; text-align: center; background-color: rgba(80, 227, 194, 1); cursor: pointer; } } .coins-info { color: #555555; font-size: 14px; margin-bottom: 43px; .icon { width: 16px; height: 16px; margin-right: 6px; } .sum { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; margin: 0 5px; } .strategy { margin-left: 5px; color: #026277; cursor: pointer; text-decoration: none; } } .coins-list-area { max-height: 347px; background-color: rgba(251, 251, 251, 1); border-radius: 16px; width: 100%; padding: 20px 20px 0; flex-direction: column; .coins-total { color: #7f7f7f; font-size: 14px; .sum { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; margin: 0 5px; } } .list { overflow: auto; .item { height: 65px; padding: 0 35px; &:not(:last-child) { border-bottom: 1px solid #f2f2f2; } .serial { font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; font-style: normal; color: #ffb600; margin-right: 114px; } .user { color: #555555; font-size: 13px; .avatar { width: 32px; height: 32px; margin-right: 10px; border-radius: 50%; } } .amount { color: #000000; font-size: 16px; .text { font-size: 13px; margin-left: 2px; } } } } } } } } .answer-discuss { background-color: #ffffff; border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; padding: 22px 30px; } .answer-discuss .header { color: #555555; font-size: 16px; margin-bottom: 17px; } .answer-discuss .header .num { margin-left: 5px; font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; font-weight: 700; color: #000000; } .answer-discuss .input-box { background-color: #f6f6f6; border-radius: 10px; padding-top: 11px; display: flex; justify-content: space-between; flex-direction: column; } .answer-discuss .input-box .top { padding: 0 14px; position: relative; } .answer-discuss .input-box .top .input-placeholder { color: #7f7f7f; pointer-events: none; font-size: 14px; position: absolute; top: 0; left: 14px; } .answer-discuss .input-box .top .avatar { width: 24px; height: 24px; border-radius: 50%; display: block; margin-right: 10px; } .answer-discuss .input-box .top .input-textarea { font-size: 14px; border: none; outline: none; background-color: transparent; min-height: 40px; padding-bottom: 11px; resize: none; } .answer-discuss .input-box .top .input-textarea * { background: transparent !important; color: #000 !important; border: none !important; outline: none !important; font-size: 14px !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; } .answer-discuss .input-box .top .input-textarea img { display: none !important; } .answer-discuss .input-box .picture-box { padding-bottom: 10px; border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); padding-left: 14px; padding-top: 12px; overflow: auto; } .answer-discuss .input-box .picture-box .picture { position: relative; width: fit-content; margin-right: 10px; } .answer-discuss .input-box .picture-box .picture .img { height: 60px; border-radius: 5px; display: block; } .answer-discuss .input-box .picture-box .picture .close { width: 17px; height: 17px; position: absolute; top: 0; right: 0; transform: translate(50%, -50%); cursor: pointer; } .answer-discuss .input-box .bottom { height: 52px; padding: 0 14px; justify-content: flex-end; } .answer-discuss .input-box .bottom .operate .item { display: inline-flex; margin-right: 20px; position: relative; z-index: 1; } .answer-discuss .input-box .bottom .operate .item.pitch .emoji-box { display: flex; } .answer-discuss .input-box .bottom .operate .item.pitch::after { content: ""; width: 28px; height: 28px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 5px; z-index: -1; } .answer-discuss .input-box .bottom .operate .item .icon { width: 16px; height: 16px; cursor: pointer; } .answer-discuss .input-box .bottom .operate .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; top: 36px; position: absolute; z-index: 1; // left: -14px; left: 50%; transform: translateX(-50%); border: 1px solid #ebebeb; display: none; flex-wrap: wrap; font-size: 22px; padding: 8px; } .answer-discuss .input-box .bottom .operate .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: 15px; left: 50%; transform: translateX(-50%); } .answer-discuss .input-box .bottom .operate .item .emoji-box .emoji-icon { margin: 5px; cursor: pointer; } .answer-discuss .input-box .bottom .operate .item .file { opacity: 0; /* 隐藏输入框 */ background: transparent; border: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .answer-discuss .input-box .bottom .operate .item .file::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .answer-discuss .input-box .bottom .operate .item:hover .file-hint { display: inline-block; } .answer-discuss .input-box .bottom .operate .item .file-hint { font-weight: 400; color: #ffffff; text-align: center; font-size: 13px; height: 22px; line-height: 22px; background-color: #333333; border-radius: 137px; padding: 0 8px; margin-left: 9px; display: none; position: absolute; width: max-content; left: 100%; } .answer-discuss .input-box .bottom .btn { font-size: 14px; width: 80px; height: 32px; line-height: 32px; background-color: rgba(80, 227, 194, 1); border-radius: 8px; color: #333333; text-align: center; cursor: pointer; } .answer-discuss .comments-box { padding: 17px 0 0; border-radius: 6px; } .answer-discuss .comments-box.show-one-comment .reverl-all { display: none; } .answer-discuss .comments-box .comments-item { padding: 13px 0 0; } .answer-discuss .comments-box .comments-item:not(:last-of-type) .child-comments { border-bottom: 1px dotted #ebebeb; } .answer-discuss .comments-box .comments-item:not(:last-of-type) .comments-content { border-bottom: 1px dotted #ebebeb; } .answer-discuss .comments-box .comments-item:last-of-type .child-comments { border-top: 1px dotted #ebebeb; } .answer-discuss .comments-box .comments-item .comments-header { justify-content: space-between; margin-bottom: 9px; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-left { font-size: 13px; position: relative; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-avatar { width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-username { color: #555; margin-right: 10px; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-time { color: #aaaaaa; margin-right: 8px; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-identity { font-size: 12px; color: #7f7f7f; padding: 0 3px; height: 20px; background-color: #f0f2f5; border: 1px solid #d7d7d7; border-radius: 5px; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box { position: relative; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .operate-box { display: block; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon { width: 14px; height: 14px; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box { display: none; flex-direction: column; position: absolute; top: 24px; right: 0; font-size: 12px; color: #7f7f7f; cursor: pointer; width: 60px; z-index: 2; border-radius: 5px; background-color: rgba(246, 246, 246, 1); border: 1px solid rgba(215, 215, 215, 1); } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item { height: 24px; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item:not(:last-of-type) { border-bottom: 1px solid rgba(215, 215, 215, 1); } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box::after { content: ""; width: 58px; height: 36px; position: absolute; top: -14px; right: 0; z-index: -1; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box { display: none; position: absolute; top: 24px; right: 0; width: 60px; height: 24px; background-color: #f6f6f6; border: 1px solid #d7d7d7; border-radius: 5px; font-size: 12px; color: #7f7f7f; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after { content: ""; width: 58px; height: 36px; position: absolute; top: -14px; right: 0; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .comment-icon { width: 14px; height: 13px; margin-left: 40px; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box { font-size: 12px; color: #aaa; margin-left: 40px; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-icon { width: 14px; height: 14px; } .answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-quantity { margin-left: 6px; } .answer-discuss .comments-box .comments-item .comments-content { margin-left: 30px; padding-bottom: 12px; } .answer-discuss .comments-box .comments-item .comments-content img { border-radius: 5px; } .answer-discuss .comments-box .comments-item .comments-content .input-box { position: relative; margin-right: 6px; } .answer-discuss .comments-box .comments-item .comments-content .input-box .cross { position: absolute; top: 5px; right: 8px; width: 12px; height: 12px; cursor: pointer; z-index: 2; } .answer-discuss .comments-box .comments-item .comments-content .comments-text { font-size: 14px; line-height: 22px; color: #333333; white-space: pre-wrap; /* 保留空白符并自动换行 */ word-break: break-word; /* 在单词内部进行断行 */ overflow-wrap: break-word; /* 允许长单词内部断行 */ margin-bottom: 13px; } .answer-discuss .comments-box .comments-item .comments-content .comments-text .comments-reply { color: #92a1bf; display: inline; margin-right: 10px; } .answer-discuss .comments-box .comments-item .comments-content .comments-img-box { overflow: auto; white-space: nowrap; } .answer-discuss .comments-box .comments-item .comments-content .comments-img { height: 100px; margin-right: 10px; margin-bottom: 13px; border-radius: 8px; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box { margin-top: 13px; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input { width: 519px; height: 60px; border: 1px solid #d7d7d7; border-radius: 8px; margin-right: 16px; position: relative; z-index: 1; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input::after { content: ""; width: 20px; height: 20px; display: block; background-color: #d7d7d7; position: absolute; top: -2px; left: 21px; transform: rotate(45deg); z-index: -1; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input textarea { border: none; outline: none; resize: none; padding: 11px 16px; border-radius: 7px 0 0 7px; scrollbar-width: none; -ms-overflow-style: none; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input textarea::-webkit-scrollbar { width: 0 !important; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box .comments-input .comments-btn { width: 58px; height: 58px; background-color: #72db86; border-radius: 0 7px 7px 0; font-size: 14px; color: #ffffff; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-content .comments-input-box .forkfork { width: 12px; height: 12px; cursor: pointer; } .answer-discuss .comments-box .child-comments { margin-left: 24px; } .answer-discuss .comments-box .child-comments .comments-item:last-of-type .comments-content { border-bottom: none; } .answer-discuss .comments-box .child-comments .comments-also { color: #62b1ff; line-height: 22px; font-size: 13px; height: 46px; margin-left: 30px; cursor: pointer; } .answer-discuss .comments-box .child-comments .comments-also .also-icon { width: 10px; height: 10px; margin-left: 8px; } .answer-discuss .comments-box .reverl-all { width: 120px; height: 28px; border: 1px solid #ebebeb; border-radius: 43px; color: #555555; line-height: 20px; font-size: 13px; margin: 16px auto 0; cursor: pointer; } .answer-discuss .comments-box .reverl-all .arrow-circular { width: 10px; height: 10px; margin-left: 10px; } .answer-discuss .comments-box .more-comments { width: 120px; height: 28px; border: 1px solid #ebebeb; border-radius: 43px; color: #555; line-height: 28px; cursor: pointer; margin: 20px auto 0; } .answer-discuss .comments-box .more-comments .more-comments-icon { width: 12px; height: 12px; margin-left: 10px; } .detail-image-mask { width: 100%; height: 100%; max-width: none; max-height: none; border: none; position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); z-index: 100; } .detail-image-mask .detail-image { width: 80vw; height: 80vh; border-radius: 8px; background-color: #111; } .detail-image-mask .detail-image .detail-img { max-width: 100%; max-height: 100%; } .answer-discuss .comments-box .comments-item .comments-header .avatar-box { flex-direction: column; width: 140px; height: 101px; background-color: #f4f8ff; border: 1px solid #dce0ea; border-radius: 10px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20392157); position: absolute; top: 30px; z-index: 100; } .answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; cursor: auto; } .answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-item { font-size: 14px; color: #333; height: 50px; cursor: pointer; } .answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-item:not(:last-of-type) { border-bottom: 1px dotted #d7d7d7; } .answer-discuss .comments-box .comments-item .comments-header .avatar-box .avatar-icon { width: 16px; height: 16px; margin-right: 5px; } .answer-discuss .no-discussion-box { margin: 36px 0; color: #7f7f7f; font-size: 15px; flex-direction: column; } .answer-discuss .no-discussion-box .no-discussion-icon { width: 101px; height: 120px; margin-bottom: 15px; } .answer-discuss .no-discussion-box .no-discussion-text { scrollbar-width: thin; scrollbar-color: #d7d7d7 transparent; } .answer-discuss .edit-comment { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 12; } .answer-discuss .edit-comment .box { width: 650px; border-radius: 10px; background: #fff; padding: 20px 15px; } .answer-discuss .edit-comment .box .text { font-size: 18px; font-weight: 650; margin-bottom: 15px; color: #000; } .answer-discuss .edit-comment .box .input-box { margin-right: 0; } .answer-discuss .edit-comment .box .input-box .bottom { border-top: 1px solid #ebebeb; } .answer-discuss .edit-comment .box .btn-list { padding: 15px 0; justify-content: flex-end; } .answer-discuss .edit-comment .box .btn-list .btn { font-size: 14px; color: #333; width: 80px; height: 28px; line-height: 28px; text-align: center; border-radius: 43px; cursor: pointer; background-color: #fff; border: 1px solid #ebebeb; margin-left: 20px; } .answer-discuss .edit-comment .box .btn-list .btn.send { background-color: #fddf6d; border: 1px solid #fddf6d; } .answer-discuss .edit-comment .input-box .bottom .emoji-edit-box-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } .answer-discuss .emoji-box-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.20392157); }