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">