PC投票加入互动

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;
+            }
+        }
     }
 }
 

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 {

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>