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 0000000..9834c9a
Binary files /dev/null and b/assets/img/close-icon.png differ
diff --git a/assets/img/picture-icon.png b/assets/img/picture-icon.png
new file mode 100644
index 0000000..c00bc93
Binary files /dev/null and b/assets/img/picture-icon.png differ
diff --git a/assets/img/smiling-face.png b/assets/img/smiling-face.png
new file mode 100644
index 0000000..d27a841
Binary files /dev/null and b/assets/img/smiling-face.png differ
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">