diff --git a/assets/img/plus-sign.svg b/assets/img/plus-sign.svg
new file mode 100644
index 0000000..ab1d869
--- /dev/null
+++ b/assets/img/plus-sign.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1386 -326 )">
+    <path d="M 13.7215909090909 5.36931818181818  C 13.907196969697 5.55492424242424  14 5.78030303030303  14 6.04545454545454  L 14 7.95454545454545  C 14 8.21969696969697  13.907196969697 8.44507575757576  13.7215909090909 8.63068181818182  C 13.5359848484848 8.81628787878788  13.3106060606061 8.90909090909091  13.0454545454545 8.90909090909091  L 8.90909090909091 8.90909090909091  L 8.90909090909091 13.0454545454545  C 8.90909090909091 13.3106060606061  8.81628787878788 13.5359848484848  8.63068181818182 13.7215909090909  C 8.44507575757576 13.907196969697  8.21969696969697 14  7.95454545454546 14  L 6.04545454545455 14  C 5.78030303030303 14  5.55492424242424 13.907196969697  5.36931818181818 13.7215909090909  C 5.18371212121212 13.5359848484848  5.09090909090909 13.3106060606061  5.09090909090909 13.0454545454545  L 5.09090909090909 8.90909090909091  L 0.954545454545454 8.90909090909091  C 0.689393939393939 8.90909090909091  0.464015151515152 8.81628787878788  0.278409090909091 8.63068181818182  C 0.0928030303030303 8.44507575757576  0 8.21969696969697  0 7.95454545454545  L 0 6.04545454545454  C 0 5.78030303030303  0.0928030303030303 5.55492424242424  0.278409090909091 5.36931818181818  C 0.464015151515152 5.18371212121212  0.689393939393939 5.09090909090909  0.954545454545454 5.09090909090909  L 5.09090909090909 5.09090909090909  L 5.09090909090909 0.954545454545455  C 5.09090909090909 0.689393939393939  5.18371212121212 0.464015151515151  5.36931818181818 0.278409090909091  C 5.55492424242424 0.0928030303030298  5.78030303030303 0  6.04545454545455 0  L 7.95454545454546 0  C 8.21969696969697 0  8.44507575757576 0.0928030303030298  8.63068181818182 0.278409090909091  C 8.81628787878788 0.464015151515151  8.90909090909091 0.689393939393939  8.90909090909091 0.954545454545455  L 8.90909090909091 5.09090909090909  L 13.0454545454545 5.09090909090909  C 13.3106060606061 5.09090909090909  13.5359848484848 5.18371212121212  13.7215909090909 5.36931818181818  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1386 326 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/components/DetailsArea.vue b/components/DetailsArea.vue
index 781f2a2..8b9b073 100644
--- a/components/DetailsArea.vue
+++ b/components/DetailsArea.vue
@@ -58,12 +58,21 @@
                     </el-popover>
                 </ClientOnly>
             </div>
-            <div class="floor-middle flexacenter comment-box">
-                <img class="avatar" :src="userInfoWin?.avatar" />
-                <!-- <input class="comment-input flex1" type="text" v-model="floorCommentInput" @keydown.enter="floorCommentBtn('input')" placeholder="说说你的想法或疑问…" /> -->
-                <el-input class="comment-input flex1" name="14752869" v-model="floorCommentInput" placeholder="说说你的想法或疑问…" @keydown.enter="floorCommentBtn('input')" maxlength="500" show-word-limit autocomplete="off"></el-input>
-                <div class="comment-btn flexcenter" @click="floorCommentBtn('input')">
-                    <img class="comment-btn-icon" src="@/assets/img/arrow-white.svg" />
+
+            <div class="floor-middle" ref="floormiddle" @mouseover="closeMouseOver" @mouseout="openAutoCarousel" :class="{ 'floor-middle-respond': respondShowState }">
+                <div class="flexacenter respond">
+                    <div class="respond-title">给个回应：</div>
+                    <div class="respond-box flex1">
+                        <div class="respond-item" v-for="item in 8" :key="item">&#xc150;</div>
+                    </div>
+                    <RespondAdd type="bottom" :message="respondShowState" @update:message="respondShowState = $event"></RespondAdd>
+                </div>
+                <div v-if="!respondShowState" class="flexacenter comment-box">
+                    <img 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" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -73,6 +82,8 @@
 <script setup>
 import { ElMessage } from "element-plus"
 
+const respondShowState = ref(false)
+
 let isNeedLogin = inject("isNeedLogin")
 const goLogin = inject("goLogin")
 const userInfoWin = inject("userInfoWin")
@@ -85,6 +96,8 @@ let token = inject("token")
 const topHeadRef = inject("topHeadRef")
 const isLoaded = inject("isLoaded")
 
+const floormiddle = ref(null)
+
 // 获取完整 url
 const getFullUrl = () => {
     if (typeof window === "undefined") return
@@ -182,6 +195,39 @@ const emit = defineEmits(["closeDiscussInputFields"])
 
 // // 点击底部调用关闭讨论输入框
 const closeDiscussInputFields = () => emit("closeDiscussInputFields")
+
+onMounted(() => {
+})
+
+watch(isLoaded, (newValue, oldValue) => {
+  if (newValue === true) {
+      openAutoCarousel()
+    
+  }
+});
+
+let floormiddleIndex = 0 // 0起
+let floormiddleTimer = null
+
+// 开启自动轮播
+const openAutoCarousel = () => {
+    floormiddleTimer = setInterval(() => {
+        floormiddleIndex = +!floormiddleIndex
+        floormiddle.value.scrollTo({
+            top: floormiddleIndex * 40,
+            behavior: "smooth",
+        })
+    }, 2000)
+}
+
+// 鼠标移入 关闭 自动滚动
+const closeMouseOver = () => {
+    clearInterval(floormiddleTimer)
+}
+
+onBeforeUnmount(() => {
+    clearInterval(floormiddleTimer)
+});
 </script>
 
 <style scoped lang="less">
@@ -262,7 +308,7 @@ const closeDiscussInputFields = () => emit("closeDiscussInputFields")
             }
         }
 
-        .floor-middle {
+        .comment-box {
             width: 471px;
             height: 40px;
             border-radius: 152px;
@@ -299,6 +345,65 @@ const closeDiscussInputFields = () => emit("closeDiscussInputFields")
                 }
             }
         }
+
+        .respond {
+            padding-left: 18px;
+            width: 471px;
+            height: 40px;
+            background-color: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(235, 235, 235, 1);
+            border-radius: 208px;
+            position: relative;
+
+            .respond-title {
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                font-size: 14px;
+                color: #555555;
+                line-height: 20px;
+            }
+
+            .respond-box {
+                display: flex;
+                justify-content: space-around;
+                .respond-item {
+                    font-family: "emojifont";
+                    font-size: 18px;
+                    line-height: 40px;
+                    cursor: pointer;
+                }
+            }
+
+            /deep/ .respond-add {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                background-color: var(--main-color);
+
+                .respond-add-icon {
+                    width: 16px;
+                    height: 16px;
+                }
+
+                &.angle::after {
+                    top: -17px;
+                    bottom: auto;
+                    transform: translateX(-50%) rotate(225deg);
+                }
+            }
+        }
+
+        .floor-middle {
+            display: flex;
+            flex-direction: column;
+            height: 40px;
+            overflow: hidden;
+
+            &.floor-middle-respond {
+                overflow: visible;
+                // overflow: hidden;
+            }
+        }
     }
 }
 
diff --git a/components/DetailsComments.vue b/components/DetailsComments.vue
index 40769fa..bfaf734 100644
--- a/components/DetailsComments.vue
+++ b/components/DetailsComments.vue
@@ -750,6 +750,8 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
                 width: fit-content;
                 margin-bottom: 15px;
                 word-break: break-word;
+                padding: 6px;
+                border-radius: 4px;
             }
 
             .comments-input-masking {
diff --git a/components/RespondAdd.vue b/components/RespondAdd.vue
new file mode 100644
index 0000000..ca2f6cf
--- /dev/null
+++ b/components/RespondAdd.vue
@@ -0,0 +1,109 @@
+<template>
+    <el-popover :width="470" trigger="click" popper-class="add-popper" :teleported="false" :offset="10" :show-arrow="false" @show="catState(true)" @hide="catState(false)" v-model:visible="state" :placement="type == 'bottom' ? 'top' : 'bottom' ">
+        <template #reference>
+            <div class="respond-add flexcenter" :class="{ 'angle': state }">
+                <img class="respond-add-icon" src="@/assets/img/plus-sign.svg" />
+            </div>
+        </template>
+
+        <div class="respond-list-box">
+            <div class="respond-list-title">选择你的回应：</div>
+            <div class="respond-list">
+                <div class="respond-item" v-for="item in 18" :key="item">&#xc150;</div>
+            </div>
+        </div>
+    </el-popover>
+</template>
+
+<script setup>
+let props = defineProps({
+    type: Boolean,
+})
+
+let state = ref(false)
+
+const emit = defineEmits(['update:message']);
+
+const catState = value => {
+    state.value = value
+    if (props.type == "bottom") {
+        console.log(value);
+        emit('update:message', value);
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.respond-add {
+    width: 30px;
+    height: 30px;
+    background: rgba(114, 219, 134, 1);
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    &.angle {
+        &::after {
+            content: "";
+            background: #f6f6f6;
+            border: 1px solid #e4e7ed;
+            border-bottom-color: transparent !important;
+            border-right-color: transparent !important;
+            border-top-left-radius: 2px;
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            bottom: -17px;
+            left: 50%;
+            transform: translateX(-50%) rotate(45deg);
+            z-index: 3000;
+        }
+    }
+
+    .respond-add-icon {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+.respond-list-box {
+    width: 470px;
+
+    .respond-list-title {
+        font-size: 14px;
+        line-height: 22px;
+        color: #333333;
+        padding-top: 16px;
+        padding-left: 20px;
+        padding-bottom: 25px;
+    }
+
+    .respond-list {
+        display: flex;
+        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+
+        .respond-item {
+            font-size: 20px;
+            font-family: "emojifont";
+            text-align: center;
+            margin-bottom: 20px;
+            cursor: pointer;
+        }
+    }
+}
+</style>
+
+<style lang="less">
+.el-popover.el-popper.add-popper {
+    padding: 0;
+    background: #f6f6f6;
+    border: 1px solid #ebebeb;
+    border-radius: 10px;
+    box-shadow: none;
+    left: 0 !important;
+}
+.el-popper.add-popper.is-light .el-popper__arrow::before {
+    background: #f6f6f6;
+}
+</style>
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index 191ed6b..6ad2c32 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -8,12 +8,6 @@
     <div class="content flexflex" :style="{ '--main-color': colourValue[uniqidIndex]['main'], '--bg-color': colourValue[uniqidIndex]['bg'], '--bc-color': colourValue[uniqidIndex]['bc'] }">
         <div class="header flexacenter">
             <span>{{ info.title }}</span>
-            <!-- <ClientOnly>
-                <span class="views flexcenter">
-                    <img class="eye-icon" src="@/assets/img/eye-icon.svg" />
-                    {{ info.views }}
-                </span>
-            </ClientOnly> -->
         </div>
         <div class="left">
             <div class="info flexacenter">
@@ -74,7 +68,34 @@
                 </div>
             </ClientOnly>
         </div>
-        <div class="right"><DetailsComments ref="commentsRef" :token="token"></DetailsComments></div>
+        <div class="right">
+            <div class="respond">
+                <div class="respond-title flexacenter">
+                    回应
+                    <div class="respond-amount">21</div>
+                </div>
+                <div class="respond-no flexflex">
+                    <div class="respond-no-box flex1 flexflex">
+                        <div class="item" v-for="item in 8" :key="item">&#xc150;</div>
+                    </div>
+                    <RespondAdd></RespondAdd>
+                </div>
+                <div class="respond-box">
+                    <div class="item flexacenter pitch" v-for="item in 18" :key="item">
+                        <div class="code flexacenter">&#xc150;</div>
+                        14
+                    </div>
+                    <RespondAdd></RespondAdd>
+                    <div class="respond-select flexflex">
+                        <div class="respond-select-box flex1 flexflex">
+                            <div class="respond-select-item" v-for="item in 5" :key="item">&#xc150;</div>
+                        </div>
+                        <RespondAdd></RespondAdd>
+                    </div>
+                </div>
+            </div>
+            <DetailsComments ref="commentsRef" :token="token"></DetailsComments>
+        </div>
         <DetailsArea @closeDiscussInputFields="closeDiscussInputFields"></DetailsArea>
     </div>
 
@@ -101,9 +122,6 @@ let isNeedLogin = inject("isNeedLogin")
 const goLogin = inject("goLogin")
 
 let id = route.params.id
-// const uniqidEnd = id.charAt(id.length - 1)
-// const uniqidIndex = base62ToDecimal(uniqidEnd) % 6
-// console.log("route", route)
 let uniqidIndex = ref(0)
 
 if (route.query.colorI) uniqidIndex.value = route.query.colorI
@@ -137,48 +155,6 @@ provide("isLoaded", isLoaded)
 provide("haveVotedValue", haveVotedValue)
 
 const getDetails = async () => {
-    // const { data1, pending1, error1, refresh1 } = await useAsyncData("mountains", () =>
-    //     $fetch("https://vote.gter.net/api/details", {
-    //         params: {
-    //             uniqid: id,
-    //         },
-    //     })
-    // )
-    // const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
-    //     key: "details",
-    //     body: {
-    //         uniqid: id,
-    //     },
-    //     method: "post",
-    // })
-
-    // const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
-    //     method: "post",
-    //     body: {
-    //         uniqid: id,
-    //     },
-    // })
-
-    // let datadata = data.value.data
-
-    // info.value = datadata["info"]
-    // isvote.value = datadata["isvote"]
-    // iscollection.value = datadata["iscollection"]
-    // islike.value = datadata["islike"]
-    // ismyself.value = datadata["ismyself"]
-    // option.value = datadata["option"]
-    // qrcode.value = datadata.share?.qrcode
-    // token.value = datadata["token"]
-    // seo.value = datadata.seo
-
-    // isLoaded.value = true
-
-    // datadata["option"].forEach(element => {
-    //     if (element.selected) haveVotedValue.value = element.value
-    // })
-
-    // return
-
     detailsHttp({ uniqid: id }).then(res => {
         if (res.code != 200) {
             ElMessage.error(res.message)
@@ -188,9 +164,6 @@ const getDetails = async () => {
 
         let data = res.data
 
-        // uniqidIndex.value = data.info?.id % 6
-        // console.log(uniqidIndex.value)
-
         info.value = data["info"]
         isvote.value = data["isvote"]
         iscollection.value = data["iscollection"]
@@ -209,29 +182,10 @@ const getDetails = async () => {
     })
 }
 
-// watch(
-//     () => route.path,
-//     (newValue, oldValue) => {
-//         // 在这里处理route.path的变化
-//         if (typeof window !== "undefined" && route.path) {
-//             if (window._hmt) window._hmt.push(["_trackPageview", route.fullPath])
-//             if (window._czc) {
-//                 let location = window.location
-//                 let contentUrl = location.pathname + location.hash
-//                 let refererUrl = "/"
-//                 window._czc.push(["_trackPageview", contentUrl, refererUrl])
-//                 window._czc.push(["_setAutoPageview", false])
-//             }
-//         }
-//     }
-// )
-
 provide("getDetails", getDetails)
 
 // 点击发送信息
 const sendMessage = uin => {
-    // redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&showmsg=1&uid=${uin}`)
-
     if (uin && typeof messagePrivateItem == "function") {
         messagePrivateItem({ uin: uin })
         return
@@ -334,7 +288,6 @@ const unvoteVote = () => {
             }
             let data = res.data
             let optionList = data["optionList"] || []
-            // optionList[unvoteVoteIndex]["selected"] = 0
             optionList.forEach(element => {
                 element["selected"] = 0
             })
@@ -419,29 +372,7 @@ const closeDiscussInputFields = () => {
 
 try {
     if (process.server) {
-        // // const { data, pending, error, refresh } = await useFetch("https://vote.gter.net/api/details", {
-        // //     query: { uniqid: id },
-        // //     method: "post",
-        // //     server: true,
-        // // })
-        // // const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
-        // //     method: "post",
-        // //     body: {
-        // //         uniqid: id + "111",
-        // //     },
-        // // })
-        // const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
-        //     key: "details",
-        //     body: {
-        //         uniqid: id,
-        //     },
-        //     method: "post",
-        // })
-
-        // console.log("-------------分割线-------------------")
-
         await detailsHttp({ uniqid: id }).then(res => {
-            // console.log("res", res)
             if (res.code != 200) {
                 ElMessage.error(res.message)
                 router.push("/index.html")
@@ -453,21 +384,22 @@ try {
             option.value = data["option"]
             isvote.value = data["isvote"]
             seo.value = data.seo
-            // uniqidIndex.value = data.info?.id % 6
         })
     }
 } catch (error) {}
 </script>
 
 <style scoped lang="less">
+@font-face {
+    font-family: "emojifont";
+    src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf");
+}
 .content {
     width: 1200px;
-    // height: 500px;
     margin: 0 auto;
     border-radius: 16px;
     background: #fff;
     flex-wrap: wrap;
-    // min-height: 100vh;
 
     --main-color: rgba(44, 186, 230, 1);
     --bg-color: rgba(234, 245, 248, 1);
@@ -571,8 +503,6 @@ try {
             flex-direction: column;
             .option-item {
                 width: 570px;
-                // height: 40px;
-                // background-color: var(--bg-color);
                 border: 1px solid var(--bc-color);
                 border-radius: 10px;
                 word-break: break-all;
@@ -593,7 +523,6 @@ try {
                     top: 0;
                     left: 0;
                     z-index: -1;
-                    // border: 1px solid var(--bc-color);
                 }
 
                 &:hover::after {
@@ -612,7 +541,6 @@ try {
                     .tick-icon {
                         display: block;
                     }
-
                     .option-content {
                         color: #000000;
                         font-weight: 650;
@@ -639,7 +567,6 @@ try {
         }
         .option-area {
             width: 570px;
-            // height: 318px;
             background-color: var(--bg-color);
             border: 1px solid var(--bc-color);
             border-radius: 10px;
@@ -700,7 +627,6 @@ try {
                     height: 5px;
                     width: 100%;
                     justify-content: flex-end;
-                    // display: none;
                     margin-top: 3px;
 
                     .option-progress-step {
@@ -725,6 +651,95 @@ try {
         flex: 1;
         padding-top: 22px;
         padding-left: 42px;
+
+        .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;
+
+                .respond-amount {
+                    color: #555555;
+                    font-weight: 400;
+                    margin-left: 8px;
+                }
+            }
+
+            .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: 1px solid rgba(215, 215, 215, 1);
+                    border-radius: 8px;
+                    padding: 0 6px;
+                    display: inline-flex;
+                    margin-right: 10px;
+                    margin-bottom: 10px;
+                    cursor: pointer;
+
+                    &.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;
+                        }
+                    }
+                    /deep/ .respond-add {
+                        background: rgba(98, 177, 255, 1);
+                    }
+                }
+            }
+  
+        }
     }
 }
 </style>
@@ -742,40 +757,4 @@ try {
         padding: 0;
     }
 }
-
-// .options-popup {
-//     border-radius: 10px !important;
-//     padding: 44px 74px !important;
-
-//     .options-popup-text {
-//         font-size: 14px;
-//         color: #333333;
-//         text-align: center;
-//         margin-bottom: 71px;
-//     }
-
-//     .options-popup-btn {
-//         justify-content: space-between;
-//         .options-popup-item {
-//             font-size: 13px;
-//             width: 160px;
-//             height: 40px;
-//             border-radius: 150px;
-//             border: 1px solid;
-//             cursor: pointer;
-
-//             &.options-yes {
-//                 background-color: rgba(249, 93, 93, 1);
-//                 border-color: rgba(249, 93, 93, 1);
-//                 color: #fff;
-//                 margin-left: 20px;
-//             }
-//             &.options-no {
-//                 background-color: #fff;
-//                 border-color: rgba(170, 170, 170, 1);
-//                 color: #333;
-//             }
-//         }
-//     }
-// }
 </style>