From 9e72739b538890856ed2f40f474c4c16d181d49e Mon Sep 17 00:00:00 2001
From: A1300399510 <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
zcmV;(1ULJMP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NGGD$>1RA>d&SY1-vFc6M2foG18
zo&X;qJwe+O;GCdjhMz~=N8lm30p<k22|`amdV;n$XkURL{XSLeS<A9<LaZ3gC@Zbx
z)%Qu-m7=Jp(#6HaS5y<^SgE^IT=e_>+0oI_wSbCPm`<mAPft&C6uSys@QPgQ?CgA;
zOeTN&)VwqBgdAJUz3B4t@^HCaPN`)=`P=U9ZU%P0jG`ky*d@cq$Hyd!qB8|)9AV!-
zKw-8H!JnR<rm92dis$F&sUor97RvWMXTEcY9Y7Aom@BZ9J|`z9#;K()(i5FZ(Lnl!
zkQ(!#Zor!86u-Q@WH59n(V)&wn{6fvRSnP}I_1%z%0}DzN&<{d7(Dk6IL-vK{ehXz
zu7Jf@iA2?d7Av<9KpqGZf<Hb!o=F`tMKtKCXuuOZQ|-Zul`8-Q`Roq{gAzD58U#b^
z3{*$J>DtX|B>`-Y9|9RCApN0`cq)oQ_Z3|zS?L1+kRh8Z2KPFgdWo%cO<>Q@&j;|4
z{76Sx`v<!OOO-1?r`0nHkSW6IPiB?{A^YF}%%mP#RuUi(%=k!?aKW*SeO!IWdfgW4
z@xBc(Ce8yaZ>{?TN8l*Wuu2*0+f20t1eo0-nbg~oI1ppn#(0aSV>BYr)Y!WHEbtqA
zKco%R?;$2lh}8N3jkTRD_<Is<B2W&t*lFzEs>Q0R?`qgsj)2?o|?7Bj5plhZl!0
z%m9982?>eB)=Oe5KHvdAcFvMp^daagWRkc-oz9)1Tu8xJpaFOT(1IN+v?Re>Zy^OG
z&=kBN^pKdr23I9d!3eAhUJ!anB+^E?mJjfa1{XSWD&s2g-JaOmZlSy`crii}u)%6!
z_NiET1z;$_h3)}YiCbn~?x>?NU$SkC^AajuhxL6{(s@?G^jV1jz;Fhb1q_XtD1qzt
z87n$j@Vft6;KinoL}LOLd?LnNiPcDLAJe43OV>An7bBL0RA2W2&)d*n+(uJaSkMZ9
zA3}U$87TqqA=>YtpZ-^w-;ID*_VQw_6Vq9-$8XR(wqN{){ETa~0dIBp&TNkWeq`Gy
zS_4nxm0Jj)_-OTjJ_bDh1K>?4#u94qv>_*?K6H#8-|$A6nMzAPUIK8)5yqP%?{Qp$
z=RdEyaOra}ti%DgAZ@gjN(8taFt7%HjV%+`ffsNd66Wc#O%eqHHWV`KnS_}q_{3Hl
ziO?hp1TgcdLOEU)ynGvyM1g<+fP8c02t~prz!?A04zBpDR}4YIB{0IaxnB>i|Eso1
z6bN9jQjGV*T20#~i2{K(!`-Gx@OGf5ug^nD6uwtzY1@R{1PS+5oGXwCIFR8h^qI?2
z+BYF9NbtT@n}~_nh*3Hs?9U=r(6B&dUmD(n<j&y@!T7*yuh3m1MDX$|ZdO15@*af7
m{1saCU6BONZDY5gf%Olj_ZcsFf6i(E0000<MNUMnLSTZvu^6rZ
literal 0
HcmV?d00001
diff --git a/assets/img/smiling-face.png b/assets/img/smiling-face.png
new file mode 100644
index 0000000000000000000000000000000000000000..d27a841aa1502b0e04fb9eaa960fd8ea41dea745
GIT binary patch
literal 2243
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
R+5!Lo002ovPDHLkV1n3@6mb9m
literal 0
HcmV?d00001
diff --git a/components/DetailsArea.vue b/components/DetailsArea.vue
index f217be6..cc288ca 100644
--- a/components/DetailsArea.vue
+++ b/components/DetailsArea.vue
@@ -68,7 +68,7 @@
</div>
<div class="floor-middle" ref="floormiddle" @mouseover="closeMouseOver" @mouseout="openAutoCarousel" :class="{ 'floor-middle-respond': respondShowState }">
<div v-if="!respondShowState" class="flexacenter comment-box">
- <img class="avatar" :src="userInfoWin?.avatar" />
+ <img v-if="userInfoWin?.avatar" class="avatar" :src="userInfoWin?.avatar" />
<el-input class="comment-input flex1" name="14752869" v-model="floorCommentInput" placeholder="说说你的想法或疑问…" @keydown.enter="floorCommentBtn('input')" maxlength="500" show-word-limit autocomplete="off" @focus="closeMouseOver()"></el-input>
<div class="comment-btn flexcenter" @click="floorCommentBtn('input')">
<img class="comment-btn-icon" src="@/assets/img/arrow-white.svg" />
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 @@
讨论
<span class="comment-amount">{{ commentComments || "" }}</span>
</div>
- <!-- <div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus':
- postCommentFocusState }" @click="loginJudgment()"> -->
- <div class="post-comment" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
+
+ <!-- <div class="post-comment" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
<div class="post-comment-input">
<el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" :maxlength="500" show-word-limit placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
</div>
<div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
+ </div> -->
+
+ <div class="input-box" v-if="false">
+ <div class="top flexflex">
+ <img class="avatar" v-if="user.avatar" :src="user.avatar" />
+ <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
+ </div>
+ <div class="picture-box" v-if="picture.url">
+ <div class="picture">
+ <img class="close" @click="closeFileUpload()" src="@/assets/img/close-icon.png" />
+ <img class="img" @click="handleAnswerText" :src="picture.base64 || picture.url" />
+ </div>
+ </div>
+
+ <div class="bottom flexacenter">
+ <div class="operate flexacenter">
+ <div class="item" :class="{ 'pitch': emojiState }">
+ <img class="icon" src="@/assets/img/smiling-face.png" @click="openEmoji()" alt="" />
+ <div class="emoji-box">
+ <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item)">{{ item }}</div>
+ </div>
+ </div>
+ <div class="item flexacenter">
+ <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
+ <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
+ <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
+ </div>
+ </div>
+ <div class="btn" @click="submitAnswerComments(commentInputTop)">发送</div>
+ </div>
</div>
<div class="empty-box" v-if="isEmptyState">
@@ -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
</script>
<style scoped lang="less">
-.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;
- }
-}
-
-.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;
-}
+@import url(@/assets/css/DetailsComments.css);
</style>
+
<style lang="less">
.automatic-reviews-popup {
border-radius: 10px !important;
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index d527a85..093dfa8 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -70,7 +70,7 @@
</div>
<div class="option-area" v-else>
<div class="option-item flexflex unselected" :class="{ pitch: item.selected, 'cursor-no': info.status == 0 }" v-for="(item, index) in option" :key="item.id" @click="handleUnvoteVote(index, item.selected)">
- <div class="flexflex" style="padding: 2px 0px">
+ <div class="flexflex" style="padding: 2px 0px;">
<div class="option-number flexcenter">{{ index + 1 }}</div>
<img class="tick-icon" src="@/assets/img/tick-black.svg" />
<div class="option-content flex1">{{ item.value }}</div>
@@ -84,38 +84,41 @@
</ClientOnly>
</div>
<div class="right">
- <div class="respond" v-if="riposteoptions.length != 0">
- <div class="respond-title flexacenter">
- 回应
- <div class="respond-amount">{{ ripostecount.total || 0 }}</div>
- <div v-if="ripostecount.user > 0" class="respond-list-btn" @click="openPopList">
- 共 <span class="respond-list-btn-amount">{{ ripostecount.user }}</span
- >人回应
- <img class="respond-list-btn-icon" src="@/assets/img/arrowsRight.svg" />
+ <template v-if="false">
+ <div class="respond" v-if="riposteoptions.length != 0">
+ <div class="respond-title flexacenter">
+ 回应
+ <div class="respond-amount">{{ ripostecount.total || 0 }}</div>
+ <div v-if="ripostecount.user > 0" class="respond-list-btn" @click="openPopList">
+ 共 <span class="respond-list-btn-amount">{{ ripostecount.user }}</span
+ >人回应
+ <img class="respond-list-btn-icon" src="@/assets/img/arrowsRight.svg" />
+ </div>
</div>
- </div>
- <div v-if="ripostelist.length == 0" class="respond-no flexflex">
- <div class="respond-no-box flex1 flexflex">
- <div class="item" v-for="item in randomEmojis" :key="item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
- </div>
- <RespondAdd></RespondAdd>
- </div>
- <div v-else class="respond-box">
- <div class="item flexacenter" :class="{ pitch: item.selected }" v-for="(item, index) in ripostelist" :key="item" @click="selectListEomji(index)">
- <div class="code flexacenter" v-html="jointriposte(item.item)"></div>
- {{ item.num }}
- </div>
- <div v-if="ripostelist.length < 3" class="respond-select flexflex">
- <div class="respond-select-box flex1 flexflex">
- <template v-for="(item, index) in randomEmojis" :key="item">
- <div v-if="index < 5" class="respond-select-item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
- </template>
+ <div v-if="ripostelist.length == 0" class="respond-no flexflex">
+ <div class="respond-no-box flex1 flexflex">
+ <div class="item" v-for="item in randomEmojis" :key="item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
</div>
<RespondAdd></RespondAdd>
</div>
- <RespondAdd v-else></RespondAdd>
+ <div v-else class="respond-box">
+ <div class="item flexacenter" :class="{ pitch: item.selected }" v-for="(item, index) in ripostelist" :key="item" @click="selectListEomji(index)">
+ <div class="code flexacenter" v-html="jointriposte(item.item)"></div>
+ {{ item.num }}
+ </div>
+ <div v-if="ripostelist.length < 3" class="respond-select flexflex">
+ <div class="respond-select-box flex1 flexflex">
+ <template v-for="(item, index) in randomEmojis" :key="item">
+ <div v-if="index < 5" class="respond-select-item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
+ </template>
+ </div>
+ <RespondAdd></RespondAdd>
+ </div>
+ <RespondAdd v-else></RespondAdd>
+ </div>
</div>
- </div>
+ </template>
+
<DetailsComments ref="commentsRef" :token="token" @update:commentComments="commentComments = $event"></DetailsComments>
</div>
<DetailsArea @closeDiscussInputFields="closeDiscussInputFields" :ripostecount="ripostecount" :commentComments="commentComments"></DetailsArea>
@@ -699,535 +702,7 @@ try {
</script>
<style scoped lang="less">
-@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;
- }
- }
- }
-}
+@import url(@/assets/css/details.css);
</style>
<style lang="less">