From 9e72739b538890856ed2f40f474c4c16d181d49e Mon Sep 17 00:00:00 2001 From: A1300399510 Date: Mon, 10 Feb 2025 19:04:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AE=A8=E8=AE=BA=E5=8A=A0?= =?UTF-8?q?=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.vue | 9 + assets/css/DetailsComments.css | 542 +++++++++++++++++++++++++++ assets/css/DetailsComments.less | 635 ++++++++++++++++++++++++++++++++ assets/css/details.css | 477 ++++++++++++++++++++++++ assets/css/details.less | 529 ++++++++++++++++++++++++++ assets/img/close-icon.png | Bin 0 -> 3027 bytes assets/img/picture-icon.png | Bin 0 -> 1224 bytes assets/img/smiling-face.png | Bin 0 -> 2243 bytes components/DetailsArea.vue | 2 +- components/DetailsComments.vue | 459 +++-------------------- pages/details/[id].vue | 589 ++--------------------------- 11 files changed, 2266 insertions(+), 976 deletions(-) create mode 100644 assets/css/DetailsComments.css create mode 100644 assets/css/DetailsComments.less create mode 100644 assets/css/details.css create mode 100644 assets/css/details.less create mode 100644 assets/img/close-icon.png create mode 100644 assets/img/picture-icon.png create mode 100644 assets/img/smiling-face.png diff --git a/app.vue b/app.vue index 14d9785..150c4f7 100644 --- a/app.vue +++ b/app.vue @@ -18,6 +18,15 @@ onMounted(() => { if (!isProduction) { isNeedLogin.value = false // setTimeout(() => (isGetLoginState.value = false), 10000) + userInfoWin.value = { + "username": "", + "uid": 256624, + "uin": 4171117, + "avatar": "https://oss.x-php.com/avatar/97K4EWIMLrsbGTWXslC1XFxTFauOikN42jDKLNjtax7HLtRjKcKMSdU9oWFhY2E~/small?random=1739160957", + "messagenum": 0, + "newprompt": 1, + "todaysigned": 0, + } } else determineIsLogin() // window["userInfoWin"] = { diff --git a/assets/css/DetailsComments.css b/assets/css/DetailsComments.css new file mode 100644 index 0000000..13178b2 --- /dev/null +++ b/assets/css/DetailsComments.css @@ -0,0 +1,542 @@ +.comment-box { + padding-top: 22px; + padding-left: 42px; +} +.comment-title { + font-weight: 650; + color: #000000; + font-size: 16px; + margin-bottom: 16px; +} +.comment-title .comment-amount { + color: #555; + font-weight: 400; + margin-left: 8px; +} +.post-comment { + background-color: #ffffff; + border: 1px solid #d7d7d7; + border-radius: 6px; + margin-bottom: 30px; + margin-right: 30px; + transition: all 5s; + overflow: hidden; + position: relative; +} +.post-comment.post-comment-focus .post-input /deep/ .el-textarea__inner { + width: 468px; + min-height: 200px !important; + max-height: 80vh; + padding-bottom: 52px; +} +.post-comment.post-comment-focus .post-input /deep/ .el-input__count { + display: block; + left: 10px; +} +.post-comment.post-comment-focus .post-ok { + height: 32px; + bottom: 10px; + right: 10px; +} +.post-comment.post-comment-focus .post-comment-input { + width: 468px; +} +.post-comment .post-comment-input { + width: 410px; +} +.post-comment .post-input { + background-color: transparent; + font-size: 14px; + resize: none; + transition: all 0.5s; + scrollbar-width: none; + -ms-overflow-style: none; + border: none; +} +.post-comment .post-input::placeholder { + color: #aaaaaa; +} +.post-comment .post-input::-webkit-scrollbar { + width: 0 !important; +} +.post-comment .post-input /deep/ .el-textarea__inner { + border: none; + box-shadow: none; + resize: none; + min-height: 60px !important; + padding: 10px; + transition: all 0.5s; +} +.post-comment .post-input /deep/ .el-input__count { + display: none; +} +.post-comment .post-ok { + width: 60px; + height: 62px; + background-color: var(--main-color); + color: #fff; + font-size: 14px; + cursor: pointer; + border-radius: 6px; + transition: all 0.5s; + position: absolute; + bottom: 0; + right: 0; +} +.input-box { + background-color: #f6f6f6; + border-radius: 10px; + padding-top: 11px; + display: flex; + justify-content: space-between; + flex-direction: column; + margin-right: 30px; + position: relative; +} +.input-box .top { + padding: 0 14px; + position: relative; +} +.input-box .top .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; +} +.input-box .top .avatar { + width: 24px; + height: 24px; + border-radius: 50%; + display: block; + margin-right: 10px; +} +.input-box .top .input-textarea { + font-size: 14px; + border: none; + outline: none; + background-color: transparent; + min-height: 80px; + padding-bottom: 11px; +} +.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; +} +.input-box .top .input-textarea img { + display: none !important; +} +.input-box .picture-box { + padding-bottom: 10px; + border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); + padding-left: 14px; +} +.input-box .picture-box .picture { + position: relative; + width: fit-content; +} +.input-box .picture-box .picture .img { + height: 60px; + border-radius: 5px; + display: block; +} +.input-box .picture-box .picture .close { + width: 17px; + height: 17px; + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: pointer; +} +.input-box .bottom { + height: 52px; + padding: 0 14px; + justify-content: space-between; +} +.input-box .bottom .operate .item { + display: inline-flex; + margin-right: 20px; + position: relative; + z-index: 1; +} +.input-box .bottom .operate .item.pitch .emoji-box { + display: flex; +} +.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; +} +.input-box .bottom .operate .item .icon { + width: 16px; + height: 16px; + cursor: pointer; + /* 鼠标悬停时显示为可点击 */ +} +.input-box .bottom .operate .item .emoji-box { + width: 581px; + 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: -14px; + border: 1px solid #ebebeb; + display: none; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; +} +.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; +} +.input-box .bottom .operate .item .emoji-box .emoji-icon { + margin: 5px; + cursor: pointer; +} +.input-box .bottom .operate .item .file { + opacity: 0; + /* 隐藏输入框 */ + background: transparent; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; +} +.input-box .bottom .operate .item .file::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.input-box .bottom .operate .item:hover .file-hint { + display: inline-block; +} +.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; +} +.input-box .bottom .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + background-color: #fddf6d; + border-radius: 43px; + cursor: pointer; +} +.input-box .cross { + cursor: pointer; + height: 12px; + position: absolute; + right: 8px; + top: 5px; + width: 12px; + z-index: 2; +} +.comment-list { + margin-bottom: 78px; +} +.comment-list .comment-item { + padding-right: 30px; +} +.comment-list .comment-item:not(:first-of-type) .comment-avatar { + margin-top: 10px; +} +.comment-list .comment-item:not(:first-of-type) .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; +} +.comment-list .comment-item .comment-avatar { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + cursor: pointer; +} +.comment-list .comment-item .comment-content .comment-header { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-left { + font-size: 13px; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-username { + color: #555; + margin-right: 10px; + cursor: pointer; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-time { + color: #aaaaaa; + margin-right: 10px; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-title { + height: 16px; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-left .comments-identity { + font-size: 12px; + color: #7f7f7f; + padding: 0 3px; + height: 20px; + background-color: #f0f2f5; + border: 1px solid #d7d7d7; + border-radius: 5px; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box { + position: relative; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .report-box { + display: flex; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .menu-icon { + width: 14px; + height: 14px; + cursor: pointer; +} +.comment-list .comment-item .comment-content .comment-header .comment-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; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .comment-icon { + width: 14px; + height: 13px; + margin-left: 30px; + cursor: pointer; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .like-box { + font-size: 12px; + color: #aaa; + margin-left: 30px; + cursor: pointer; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .like-box .like-icon { + width: 14px; + height: 14px; +} +.comment-list .comment-item .comment-content .comment-header .comment-header-right .like-box .like-quantity { + margin-left: 6px; +} +.comment-list .comment-item .comment-content .comment-text { + font-size: 14px; + line-height: 22px; + color: #333; + margin-bottom: 10px; + word-break: break-all; + min-height: 22px; + cursor: pointer; +} +.comment-list .comment-item .comment-content .comment-text .comments-reply { + color: #92a1bf; + display: inline; +} +.comment-list .comment-item .comment-content .alreadyVoted { + font-size: 12px; + color: #aaaaaa; + background-color: #f6f6f6; + line-height: 17px; + width: fit-content; + margin-bottom: 15px; + word-break: break-word; + padding: 6px; + border-radius: 4px; +} +.comment-list .comment-item .comment-content .comments-input-masking { + width: 100vw; + height: 100vh; + min-width: 1200px; + position: fixed; + top: 0; + left: 0; + z-index: 10; +} +.comment-list .comment-item .comment-content .comments-input-box { + margin-top: 13px; + height: 0; + transition: all 0.3s; + position: relative; + z-index: 11; +} +.comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show { + height: 184px; + margin-bottom: 10px; +} +.comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show::after { + content: ""; + width: 20px; + height: 20px; + display: block; + background-color: #d7d7d7; + position: absolute; + top: -2px; + left: 21px; + transform: rotate(45deg); + z-index: -1; +} +.comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input { + border: 1px solid #d7d7d7; + background-color: #fff; +} +.comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input /deep/ textarea { + height: 140px; + padding: 10px; + min-height: 40px !important; + overflow: auto; +} +.comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input /deep/ .el-input__count { + display: block; +} +.comment-list .comment-item .comment-content .comments-input-box.comments-input-box-show .comments-input .operate-bottom { + display: flex; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input { + flex: 1; + border-color: #fff; + border-radius: 8px; + position: relative; + z-index: 1; + transition: all 0.3s; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ textarea { + border: none; + outline: none; + resize: none; + border-radius: 8px; + font-size: 14px; + width: 100%; + height: 0; + padding: 0 10px; + min-height: 0 !important; + transition: all 0.2s; + overflow: hidden; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ .el-textarea__inner { + box-shadow: none; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input /deep/ .el-input__count { + left: 10px; + bottom: -32px; + width: fit-content; + display: none; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input .operate-bottom { + justify-content: flex-end; + display: none; + transition: all 0.3s; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input .operate-bottom .comments-btn { + width: 60px; + height: 32px; + border-radius: 6px; + background-color: var(--main-color); + font-size: 14px; + color: #ffffff; + cursor: pointer; + margin-right: 10px; + margin-bottom: 10px; +} +.comment-list .comment-item .comment-content .comments-input-box .comments-input .operate-bottom .comments-btn.comments-btn-cancel { + border: 1px solid #cccccc; + color: #797979; + background-color: #fff; +} +.comment-list .comment-item .child-comments .comment-avatar { + margin-top: 10px; +} +.comment-list .comment-item .child-comments .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; +} +.comment-list .comment-item .child-comments .comment-item { + padding-right: 0; +} +.comment-list .comment-item .comments-also { + color: #62b1ff; + line-height: 22px; + font-size: 13px; + height: 46px; + margin-left: 30px; + cursor: pointer; + border-top: 1px dotted #d7d7d7; +} +.comment-list .comment-item .comments-also .also-icon { + width: 10px; + height: 10px; + margin-left: 8px; +} +.comment-end { + font-size: 12px; + color: #d7d7d7; + text-align: center; + margin-bottom: 118px; + padding-right: 30px; +} +.empty-box { + padding: 80px 0 110px; +} diff --git a/assets/css/DetailsComments.less b/assets/css/DetailsComments.less new file mode 100644 index 0000000..eaa25cd --- /dev/null +++ b/assets/css/DetailsComments.less @@ -0,0 +1,635 @@ +.comment-box { + padding-top: 22px; + padding-left: 42px; +} +.comment-title { + font-weight: 650; + color: #000000; + font-size: 16px; + margin-bottom: 16px; + .comment-amount { + color: #555; + font-weight: 400; + margin-left: 8px; + } +} + +.post-comment { + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(215, 215, 215, 1); + // border-right-width: 0; + border-radius: 6px; + margin-bottom: 30px; + margin-right: 30px; + transition: all 5s; + // justify-content: space-between; + overflow: hidden; + position: relative; + &.post-comment-focus { + // // border-right-width: 1px; + .post-input { + /deep/ .el-textarea__inner { + width: 468px; + min-height: 200px !important; + max-height: 80vh; + padding-bottom: 52px; + } + + /deep/ .el-input__count { + display: block; + // bottom: 42px; + left: 10px; + } + } + .post-ok { + height: 32px; + bottom: 10px; + right: 10px; + } + .post-comment-input { + width: 468px; + } + } + + .post-comment-input { + width: 410px; + } + + .post-input { + background-color: transparent; + font-size: 14px; + resize: none; + transition: all 0.5s; + + &::placeholder { + color: #aaaaaa; + } + &::-webkit-scrollbar { + width: 0 !important; + } + + scrollbar-width: none; + -ms-overflow-style: none; + border: none; + + /deep/ .el-textarea__inner { + border: none; + box-shadow: none; + resize: none; + min-height: 60px !important; + // height: 60px !important; + padding: 10px; + transition: all 0.5s; + } + + /deep/ .el-input__count { + display: none; + } + } + + .post-ok { + width: 60px; + height: 62px; + background-color: var(--main-color); + color: #fff; + font-size: 14px; + cursor: pointer; + border-radius: 6px; + transition: all 0.5s; + position: absolute; + bottom: 0; + right: 0; + } +} + +.input-box { + background-color: rgba(246, 246, 246, 1); + border-radius: 10px; + padding-top: 11px; + display: flex; + justify-content: space-between; + flex-direction: column; + margin-right: 30px; + position: relative; + + .top { + padding: 0 14px; + position: relative; + + .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; + } + + .avatar { + width: 24px; + height: 24px; + border-radius: 50%; + display: block; + margin-right: 10px; + } + + .input-textarea { + font-size: 14px; + border: none; + outline: none; + background-color: transparent; + min-height: 80px; + padding-bottom: 11px; + // &.placeholder::after { + // content: "说说你的看法…"; + // color: #7f7f7f; + // pointer-events: none; + // } + + * { + 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; + } + + img { + display: none !important; + } + } + } + + .picture-box { + padding-bottom: 10px; + border-bottom: 1px dotted rgba(215, 215, 215, 0.501961); + padding-left: 14px; + + .picture { + position: relative; + width: fit-content; + + .img { + height: 60px; + border-radius: 5px; + display: block; + } + + .close { + width: 17px; + height: 17px; + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + cursor: pointer; + } + } + } + + .bottom { + height: 52px; + padding: 0 14px; + justify-content: space-between; + .operate { + .item { + display: inline-flex; + margin-right: 20px; + position: relative; + z-index: 1; + &.pitch { + .emoji-box { + display: flex; + } + &::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; + } + } + + .icon { + width: 16px; + height: 16px; + cursor: pointer; /* 鼠标悬停时显示为可点击 */ + } + + .emoji-box { + width: 581px; + border-radius: 8px; + background-color: #fff; + // box-shadow: 0 0 11px rgba(0, 0, 0, 0.1); + filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); + top: 45px; + position: absolute; + z-index: 1; + left: -14px; + border: 1px solid rgb(235, 235, 235); + display: none; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; + &::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; + } + .emoji-icon { + margin: 5px; + cursor: pointer; + } + } + + .file { + opacity: 0; /* 隐藏输入框 */ + background: transparent; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; + + &::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + } + + &:hover .file-hint { + display: inline-block; + } + + .file-hint { + font-weight: 400; + color: #ffffff; + text-align: center; + font-size: 13px; + height: 22px; + line-height: 22px; + background-color: rgba(51, 51, 51, 1); + border-radius: 137px; + padding: 0 8px; + margin-left: 9px; + display: none; + } + } + } + .btn { + font-size: 14px; + color: #333; + width: 80px; + height: 28px; + line-height: 28px; + text-align: center; + background-color: rgba(253, 223, 109, 1); + border-radius: 43px; + cursor: pointer; + } + } + + .cross { + cursor: pointer; + height: 12px; + position: absolute; + right: 8px; + top: 5px; + width: 12px; + z-index: 2; + } +} + +.comment-list { + margin-bottom: 78px; + .comment-item { + &:not(:first-of-type) { + .comment-avatar { + margin-top: 10px; + } + + .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; + } + } + padding-right: 30px; + .comment-avatar { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + cursor: pointer; + } + + .comment-content { + .comment-header { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + + .comment-header-left { + font-size: 13px; + + .comments-avatar { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; + } + + .comments-username { + color: #555; + margin-right: 10px; + cursor: pointer; + } + + .comments-time { + color: #aaaaaa; + margin-right: 10px; + } + + .comments-title { + height: 16px; + } + + .comments-identity { + font-size: 12px; + color: #7f7f7f; + padding: 0 3px; + height: 20px; + background-color: rgba(240, 242, 245, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 5px; + } + } + .comment-header-right { + .menu-box { + position: relative; + + &:hover .report-box { + display: flex; + } + + .menu-icon { + width: 14px; + height: 14px; + cursor: pointer; + } + + .report-box { + display: none; + position: absolute; + top: 24px; + right: 0; + width: 60px; + height: 24px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 5px; + font-size: 12px; + color: #7f7f7f; + cursor: pointer; + + &::after { + content: ""; + width: 58px; + height: 36px; + position: absolute; + top: -14px; + right: 0; + } + } + } + + .comment-icon { + width: 14px; + height: 13px; + margin-left: 30px; + cursor: pointer; + } + + .like-box { + font-size: 12px; + color: #aaa; + margin-left: 30px; + cursor: pointer; + + .like-icon { + width: 14px; + height: 14px; + } + + .like-quantity { + margin-left: 6px; + } + } + } + } + + .comment-text { + font-size: 14px; + line-height: 22px; + color: #333; + margin-bottom: 10px; + word-break: break-all; + min-height: 22px; + cursor: pointer; + .comments-reply { + color: #92a1bf; + display: inline; + } + } + + .alreadyVoted { + font-size: 12px; + color: #aaaaaa; + background-color: rgba(246, 246, 246, 1); + line-height: 17px; + width: fit-content; + margin-bottom: 15px; + word-break: break-word; + padding: 6px; + border-radius: 4px; + } + + .comments-input-masking { + width: 100vw; + height: 100vh; + min-width: 1200px; + position: fixed; + top: 0; + left: 0; + z-index: 10; + } + + .comments-input-box { + margin-top: 13px; + height: 0; + transition: all 0.3s; + position: relative; + z-index: 11; + + &.comments-input-box-show { + height: 184px; + margin-bottom: 10px; + + &::after { + content: ""; + width: 20px; + height: 20px; + display: block; + background-color: rgba(215, 215, 215, 1); + position: absolute; + top: -2px; + left: 21px; + transform: rotate(45deg); + z-index: -1; + } + + .comments-input { + border: 1px solid rgba(215, 215, 215, 1); + background-color: #fff; + + /deep/ textarea { + height: 140px; + padding: 10px; + min-height: 40px !important; + overflow: auto; + } + + /deep/ .el-input__count { + display: block; + } + + .operate-bottom { + display: flex; + } + } + } + + .comments-input { + flex: 1; + border-color: #fff; + border-radius: 8px; + position: relative; + z-index: 1; + transition: all 0.3s; + + /deep/ textarea { + border: none; + outline: none; + resize: none; + border-radius: 8px; + font-size: 14px; + width: 100%; + height: 0; + padding: 0 10px; + min-height: 0 !important; + transition: all 0.2s; + overflow: hidden; + } + + /deep/ .el-textarea__inner { + box-shadow: none; + } + + /deep/ .el-input__count { + left: 10px; + bottom: -32px; + width: fit-content; + display: none; + } + + .operate-bottom { + justify-content: flex-end; + display: none; + transition: all 0.3s; + + .comments-btn { + width: 60px; + height: 32px; + border-radius: 6px; + background-color: var(--main-color); + font-size: 14px; + color: #ffffff; + cursor: pointer; + margin-right: 10px; + margin-bottom: 10px; + + &.comments-btn-cancel { + border: 1px solid #cccccc; + color: #797979; + background-color: #fff; + } + } + } + } + } + } + + .child-comments { + .comment-avatar { + margin-top: 10px; + } + + .comment-header { + padding-top: 10px; + border-top: 1px dotted #d7d7d7; + } + + .comment-item { + padding-right: 0; + } + } + .comments-also { + color: #62b1ff; + line-height: 22px; + font-size: 13px; + height: 46px; + margin-left: 30px; + cursor: pointer; + border-top: 1px dotted #d7d7d7; + + .also-icon { + width: 10px; + height: 10px; + margin-left: 8px; + } + } + } +} + +.comment-end { + font-size: 12px; + color: #d7d7d7; + text-align: center; + margin-bottom: 118px; + padding-right: 30px; +} + +.empty-box { + padding: 80px 0 110px; +} diff --git a/assets/css/details.css b/assets/css/details.css new file mode 100644 index 0000000..06c2032 --- /dev/null +++ b/assets/css/details.css @@ -0,0 +1,477 @@ +@font-face { + font-family: "emojifont"; + src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=vote"); +} +.content { + width: 1200px; + margin: 0 auto; + border-radius: 16px; + background: #fff; + flex-wrap: wrap; + --main-color: #2cbae6; + --bg-color: #eaf5f8; + --bc-color: #d5ebf2; +} +.content .header { + width: 100%; + height: 80px; + padding: 0 30px; + border-bottom: 1px solid #ebebeb; + font-weight: 650; + font-size: 20px; + color: #000000; + line-height: 20px; + justify-content: space-between; +} +.content .header .views { + font-size: 12px; + color: #aaa; + font-weight: 400; +} +.content .header .views .eye-icon { + margin-right: 5px; +} +.content .left { + width: 658px; + min-height: calc(100vh - 165px); + padding: 30px 42px 100px 30px; + border-right: 16px solid #f6f6f6; +} +.content .left .info { + font-size: 13px; + justify-content: space-between; + margin-bottom: 24px; +} +.content .left .info .info-left .avatar { + width: 24px; + height: 24px; + margin-right: 10px; + cursor: pointer; + border-radius: 50%; +} +.content .left .info .info-left .username { + color: #333; + margin-right: 10px; + cursor: pointer; +} +.content .left .info .info-left .post-time { + line-height: 22px; + color: #aaa; +} +.content .left .info .info-right .cut-off { + color: #aaa; +} +.content .left .info .info-right .state { + height: 20px; + line-height: 20px; + padding: 0 7px; + color: #fff; + background: var(--main-color); + border-radius: 25px; + font-size: 12px; + margin-left: 10px; +} +.content .left .info .info-right .state.over { + background: #333333; +} +.content .left .message { + font-size: 14px; + line-height: 24px; + color: #333; + margin-bottom: 30px; + word-wrap: break-word; + white-space: break-spaces; +} +.content .left .hint { + font-size: 13px; + line-height: 22px; + color: #aaaaaa; + margin-bottom: 16px; +} +.content .left .tick-icon { + width: 14px; + height: 14px; + margin-top: 3px; + margin-right: 6px; +} +.content .left .need-login { + color: #585656; + margin-top: 29px; + font-size: 14px; +} +.content .left .need-login .btn { + width: 42px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: 5px; + color: #fff; + background: #f95d5d; + margin: 0 6px; + cursor: pointer; +} +.content .left .option-list { + flex-direction: column; +} +.content .left .option-list .option-item { + width: 570px; + border: 1px solid var(--bc-color); + border-radius: 10px; + word-break: break-all; + font-size: 14px; + line-height: 20px; + color: #333333; + padding: 9px 15px; + cursor: pointer; + position: relative; + overflow: hidden; + z-index: 1; +} +.content .left .option-list .option-item::after { + background-color: var(--bg-color); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.content .left .option-list .option-item.unselected:hover::after { + background-color: var(--main-color); + opacity: 0.15686275; +} +.content .left .option-list .option-item:not(:last-of-type) { + margin-bottom: 10px; +} +.content .left .option-list .option-item.pitch .option-number { + display: none; +} +.content .left .option-list .option-item.pitch .tick-icon { + display: block; +} +.content .left .option-list .option-item.pitch .option-content { + color: #000000; + font-weight: 650; +} +.content .left .option-list .option-item .serial { + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--main-color); + font-size: 11px; + color: #ffffff; + margin-top: 3px; + margin-right: 6px; +} +.content .left .option-list .option-item .option-progress, +.content .left .option-list .option-item .option-number, +.content .left .option-list .option-item .tick-icon { + display: none; +} +.content .left .option-list .option-item .result { + color: #dad5d5; +} +.content .left .option-area { + width: 570px; + background-color: var(--bg-color); + border: 1px solid var(--bc-color); + border-radius: 10px; + padding: 8px 0; +} +.content .left .option-area .option-item { + padding: 7px 15px 10px; + flex-direction: column; + word-break: break-all; + cursor: no-drop; +} +.content .left .option-area .option-item:not(:last-of-type) { + border-bottom: 1px solid var(--bc-color); +} +.content .left .option-area .option-item.pitch { + cursor: pointer; +} +.content .left .option-area .option-item.pitch .option-number { + display: none; +} +.content .left .option-area .option-item.pitch .tick-icon { + display: block; +} +.content .left .option-area .option-item.pitch .option-content { + font-weight: 650; + color: #000000; +} +.content .left .option-area .option-item.cursor-no { + cursor: no-drop; +} +.content .left .option-area .option-item .serial { + display: none; +} +.content .left .option-area .option-item .option-number { + font-size: 11px; + color: #ffffff; + width: 14px; + height: 14px; + background-color: var(--main-color); + border-radius: 50%; + margin-right: 6px; + margin-top: 3px; +} +.content .left .option-area .option-item .tick-icon { + display: none; +} +.content .left .option-area .option-item .option-content { + font-size: 14px; + color: #333; + line-height: 20px; + word-break: break-word; +} +.content .left .option-area .option-item .option-progress { + height: 5px; + width: 100%; + justify-content: flex-end; + margin-top: 3px; +} +.content .left .option-area .option-item .option-progress .option-progress-step { + width: 24%; + background-color: var(--main-color); + opacity: 0.49803922; + height: 4px; + border-radius: 66px; + margin-right: 14px; +} +.content .left .option-area .option-item .option-progress .option-progress-value { + font-size: 12px; + color: var(--main-color); + line-height: 20px; +} +.content .right { + flex: 1; +} +.content .right .respond { + padding: 22px 42px 30px; + border-bottom: 5px solid #f6f6f6; +} +.content .right .respond .respond-title { + font-size: 16px; + line-height: 20px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + margin-bottom: 20px; +} +.content .right .respond .respond-title .respond-amount { + color: #555555; + font-weight: 400; + margin-left: 8px; + flex: 1; +} +.content .right .respond .respond-title .respond-list-btn { + font-weight: 400; + cursor: pointer; + color: #555555; + font-size: 13px; + display: flex; + align-items: center; +} +.content .right .respond .respond-title .respond-list-btn .respond-list-btn-amount { + font-weight: 650; + color: #333; + margin: 0 5px; +} +.content .right .respond .respond-title .respond-list-btn .respond-list-btn-icon { + width: 6px; + margin-left: 5px; +} +.content .right .respond .respond-no { + width: 377px; + height: 30px; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 208px; + margin-bottom: 10px; + position: relative; +} +.content .right .respond .respond-no .respond-no-box { + justify-content: space-around; +} +.content .right .respond .respond-no .respond-no-box .item { + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + cursor: pointer; +} +.content .right .respond .respond-box { + display: flex; + flex-wrap: wrap; + position: relative; +} +.content .right .respond .respond-box .item { + font-size: 12px; + color: #555555; + height: 30px; + border-radius: 8px; + padding: 0 6px; + display: inline-flex; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; + user-select: none; + border: 1px solid #d7d7d7; + background: #fff; +} +.content .right .respond .respond-box .item.pitch { + border: none; + background: #f6f6f6; +} +.content .right .respond .respond-box .item .code { + margin-right: 4px; + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; +} +.content .right .respond .respond-box .respond-select { + width: 250px; + height: 30px; + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 208px; +} +.content .right .respond .respond-box .respond-select .respond-select-box { + justify-content: space-around; +} +.content .right .respond .respond-box .respond-select .respond-select-box .respond-select-item { + cursor: pointer; + font-size: 16px; + font-family: "emojifont"; + line-height: 30px; +} +.respond-pop-mask { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 10; + display: flex; + justify-content: center; + align-items: center; +} +.respond-pop-mask .respond-pop { + width: 600px; + height: 500px; + background-color: #fff; + border: 1px solid #e5e5e5; + border-radius: 20px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); +} +.respond-pop-mask .respond-pop .respond-pop-title { + height: 50px; + display: flex; + justify-content: center; + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); + align-items: center; + color: #555555; + position: relative; +} +.respond-pop-mask .respond-pop .respond-pop-title .respond-pop-amount { + margin: 0 8px; + font-weight: 650; + color: #000000; +} +.respond-pop-mask .respond-pop .respond-pop-title .respond-title-icon { + position: absolute; + width: 20px; + right: 20px; + cursor: pointer; +} +.respond-pop-mask .respond-pop .respond-list { + overflow: auto; + height: 450px; +} +.respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar-track { + border-radius: 10px; +} +.respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar-thumb { + background-color: #0003; + border-radius: 10px; + transition: all 0.2s ease-in-out; +} +.respond-pop-mask .respond-pop .respond-list::-webkit-scrollbar { + width: 6px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item { + display: flex; + padding: 20px 0 0 20px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item:not(:last-of-type) .respond-content { + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-code { + width: 60px; + height: 60px; + background-color: #f6f6f6; + border-radius: 10px; + font-family: "emojifont"; + font-size: 25px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 20px; + cursor: pointer; + box-sizing: border-box; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-code.pitch { + background-color: #f6f6bd; + border: 1px solid #ccd003; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content { + padding-bottom: 10px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .respond-total { + font-size: 14px; + color: #7f7f7f; + margin-bottom: 10px; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .user-item { + font-size: 14px; + color: #555555; + display: inline-flex; + margin-right: 20px; + margin-bottom: 10px; + align-items: center; + cursor: pointer; +} +.respond-pop-mask .respond-pop .respond-list .respond-item .respond-content .user-item .user-avatar { + width: 26px; + height: 26px; + border-radius: 50%; + margin-right: 10px; +} +.respond-pop-mask .respond-pop .respond-pop-no { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.respond-pop-mask .respond-pop .respond-pop-no .respond-title-icon { + position: absolute; + width: 20px; + top: 20px; + right: 20px; + cursor: pointer; +} +.respond-pop-mask .respond-pop .respond-pop-no .respond-pop-no-icon { + width: 90px; + margin-bottom: 15px; +} +.respond-pop-mask .respond-pop .respond-pop-no .respond-pop-no-text { + font-size: 13px; + color: #7f7f7f; + line-height: 22px; +} diff --git a/assets/css/details.less b/assets/css/details.less new file mode 100644 index 0000000..7779c3a --- /dev/null +++ b/assets/css/details.less @@ -0,0 +1,529 @@ +@font-face { + font-family: "emojifont"; + src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf?t=vote"); +} +.content { + width: 1200px; + margin: 0 auto; + border-radius: 16px; + background: #fff; + flex-wrap: wrap; + + --main-color: rgba(44, 186, 230, 1); + --bg-color: rgba(234, 245, 248, 1); + --bc-color: rgba(213, 235, 242, 1); + + .header { + width: 100%; + height: 80px; + padding: 0 30px; + border-bottom: 1px solid #ebebeb; + font-weight: 650; + font-size: 20px; + color: #000000; + line-height: 20px; + justify-content: space-between; + .views { + font-size: 12px; + color: #aaa; + font-weight: 400; + .eye-icon { + margin-right: 5px; + } + } + } + + .left { + width: 658px; + min-height: calc(100vh - 165px); + padding: 30px 42px 100px 30px; + border-right: 16px solid #f6f6f6; + .info { + font-size: 13px; + justify-content: space-between; + margin-bottom: 24px; + + .info-left { + .avatar { + width: 24px; + height: 24px; + margin-right: 10px; + cursor: pointer; + border-radius: 50%; + } + .username { + color: #333; + margin-right: 10px; + cursor: pointer; + } + + .post-time { + line-height: 22px; + color: #aaa; + } + } + + .info-right { + .cut-off { + color: #aaa; + } + .state { + height: 20px; + line-height: 20px; + padding: 0 7px; + color: #fff; + background: var(--main-color); + border-radius: 25px; + font-size: 12px; + margin-left: 10px; + + &.over { + background: rgba(51, 51, 51, 1); + } + } + } + } + + .message { + font-size: 14px; + line-height: 24px; + color: #333; + margin-bottom: 30px; + word-wrap: break-word; + white-space: break-spaces; + } + + .hint { + font-size: 13px; + line-height: 22px; + color: #aaaaaa; + margin-bottom: 16px; + } + + .tick-icon { + width: 14px; + height: 14px; + margin-top: 3px; + margin-right: 6px; + } + + .need-login { + color: #585656; + margin-top: 29px; + font-size: 14px; + .btn { + width: 42px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: 5px; + color: #fff; + background: rgba(249, 93, 93, 1); + margin: 0 6px; + cursor: pointer; + } + } + + .option-list { + flex-direction: column; + .option-item { + width: 570px; + border: 1px solid var(--bc-color); + border-radius: 10px; + word-break: break-all; + font-size: 14px; + line-height: 20px; + color: #333333; + padding: 9px 15px; + cursor: pointer; + position: relative; + overflow: hidden; + z-index: 1; + &::after { + background-color: var(--bg-color); + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + &.unselected:hover::after { + background-color: var(--main-color); + opacity: 0.156862745098039; + } + + &:not(:last-of-type) { + margin-bottom: 10px; + } + + &.pitch { + .option-number { + display: none; + } + .tick-icon { + display: block; + } + .option-content { + color: #000000; + font-weight: 650; + } + } + + .serial { + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--main-color); + font-size: 11px; + color: #ffffff; + margin-top: 3px; + margin-right: 6px; + } + + .option-progress, + .option-number, + .tick-icon { + display: none; + } + + .result { + color: #dad5d5; + } + } + } + .option-area { + width: 570px; + background-color: var(--bg-color); + border: 1px solid var(--bc-color); + border-radius: 10px; + padding: 8px 0; + + .option-item { + padding: 7px 15px 10px; + flex-direction: column; + word-break: break-all; + cursor: no-drop; + &:not(:last-of-type) { + border-bottom: 1px solid var(--bc-color); + } + &.pitch { + cursor: pointer; + .option-number { + display: none; + } + .tick-icon { + display: block; + } + + .option-content { + font-weight: 650; + color: #000000; + } + } + + &.cursor-no { + cursor: no-drop; + } + + .serial { + display: none; + } + + .option-number { + font-size: 11px; + color: #ffffff; + width: 14px; + height: 14px; + background-color: var(--main-color); + border-radius: 50%; + margin-right: 6px; + margin-top: 3px; + } + .tick-icon { + display: none; + } + .option-content { + font-size: 14px; + color: #333; + line-height: 20px; + word-break: break-word; + } + + .option-progress { + height: 5px; + width: 100%; + justify-content: flex-end; + margin-top: 3px; + + .option-progress-step { + width: 24%; + background-color: var(--main-color); + opacity: 0.49803922; + height: 4px; + border-radius: 66px; + margin-right: 14px; + } + .option-progress-value { + font-size: 12px; + color: var(--main-color); + line-height: 20px; + } + } + } + } + } + + .right { + flex: 1; + + .respond { + padding: 22px 42px 30px; + border-bottom: 5px solid #f6f6f6; + .respond-title { + font-size: 16px; + line-height: 20px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + margin-bottom: 20px; + + .respond-amount { + color: #555555; + font-weight: 400; + margin-left: 8px; + flex: 1; + } + + .respond-list-btn { + font-weight: 400; + cursor: pointer; + color: #555555; + font-size: 13px; + display: flex; + align-items: center; + .respond-list-btn-amount { + font-weight: 650; + color: #333; + margin: 0 5px; + } + .respond-list-btn-icon { + width: 6px; + margin-left: 5px; + } + } + } + + .respond-no { + width: 377px; + height: 30px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 208px; + margin-bottom: 10px; + position: relative; + + .respond-no-box { + justify-content: space-around; + .item { + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + cursor: pointer; + } + } + } + + .respond-box { + display: flex; + flex-wrap: wrap; + position: relative; + + .item { + font-size: 12px; + color: #555555; + height: 30px; + border-radius: 8px; + padding: 0 6px; + display: inline-flex; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; + user-select: none; + border: 1px solid rgba(215, 215, 215, 1); + background: #fff; + + &.pitch { + border: none; + background: rgba(246, 246, 246, 1); + } + + .code { + margin-right: 4px; + line-height: 30px; + font-size: 16px; + font-family: "emojifont"; + } + } + + .respond-select { + width: 250px; + height: 30px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 208px; + .respond-select-box { + justify-content: space-around; + .respond-select-item { + cursor: pointer; + font-size: 16px; + font-family: "emojifont"; + line-height: 30px; + } + } + } + } + } + } +} + +.respond-pop-mask { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + .respond-pop { + width: 600px; + height: 500px; + background-color: #fff; + border: 1px solid #e5e5e5; + border-radius: 20px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + .respond-pop-title { + height: 50px; + display: flex; + justify-content: center; + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); + align-items: center; + color: #555555; + position: relative; + .respond-pop-amount { + margin: 0 8px; + font-weight: 650; + color: #000000; + } + .respond-title-icon { + position: absolute; + width: 20px; + right: 20px; + cursor: pointer; + } + } + + .respond-list { + overflow: auto; + height: 450px; + + &::-webkit-scrollbar-track { + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #0003; + border-radius: 10px; + transition: all 0.2s ease-in-out; + } + + &::-webkit-scrollbar { + width: 6px; + } + .respond-item { + display: flex; + padding: 20px 0 0 20px; + + &:not(:last-of-type) .respond-content { + border-bottom: 1px dotted rgba(215, 215, 215, 0.5); + } + .respond-code { + width: 60px; + height: 60px; + background-color: rgba(246, 246, 246, 1); + border-radius: 10px; + font-family: "emojifont"; + font-size: 25px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 20px; + cursor: pointer; + box-sizing: border-box; + &.pitch { + background-color: #f6f6bd; + border: 1px solid #ccd003; + } + } + + .respond-content { + padding-bottom: 10px; + .respond-total { + font-size: 14px; + color: #7f7f7f; + margin-bottom: 10px; + } + + .user-item { + font-size: 14px; + color: #555555; + display: inline-flex; + margin-right: 20px; + margin-bottom: 10px; + align-items: center; + cursor: pointer; + + .user-avatar { + width: 26px; + height: 26px; + border-radius: 50%; + margin-right: 10px; + } + } + } + } + } + + .respond-pop-no { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + .respond-title-icon { + position: absolute; + width: 20px; + top: 20px; + right: 20px; + cursor: pointer; + } + .respond-pop-no-icon { + width: 90px; + margin-bottom: 15px; + } + .respond-pop-no-text { + font-size: 13px; + color: #7f7f7f; + line-height: 22px; + } + } + } +} diff --git a/assets/img/close-icon.png b/assets/img/close-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..9834c9ac5bf57606beada0042de21cc049113e96 GIT binary patch literal 3027 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 VPmi$}aH{|S002ovPDHLkV1lpdtE&J2 literal 0 HcmV?d00001 diff --git a/assets/img/picture-icon.png b/assets/img/picture-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..c00bc93734de3010609ab0fbdace51953de14676 GIT binary patch literal 1224 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
- +
diff --git a/components/DetailsComments.vue b/components/DetailsComments.vue index 762eeec..9750a1c 100644 --- a/components/DetailsComments.vue +++ b/components/DetailsComments.vue @@ -4,14 +4,43 @@ 讨论 {{ commentComments || "" }}
- -
+ + + +
+
+ + +
+
+
+ + +
+
+ +
+
+
+ +
+
{{ item }}
+
+
+
+ + + 最多可上传1张图片，支持在输入框中直接粘贴图片。 +
+
+
发送
+
@@ -166,6 +195,7 @@ let isNeedLogin = inject("isNeedLogin") const goLogin = inject("goLogin") const props = defineProps({ token: String }) +const userInfoWin = inject("userInfoWin") watch( () => props.token, @@ -175,6 +205,12 @@ watch( onMounted(() => window.addEventListener("scroll", handleScroll)) +onMounted(() => { + setInterval(() => { + console.log("userInfoWin", userInfoWin.value) + }, 2000) +}) + const sendMessage = inject("sendMessage") const TAHomePage = inject("TAHomePage") @@ -507,422 +543,9 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b +