From b8d2b04a4e53da3f6462708be7b39a19baa09d91 Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Wed, 10 Jul 2024 18:52:39 +0800
Subject: [PATCH] =?UTF-8?q?PC=E6=8A=95=E7=A5=A8=E5=8A=A0=E5=85=A5=E4=BA=92?=
=?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/img/plus-sign.svg | 6 +
components/DetailsArea.vue | 119 ++++++++++++++-
components/DetailsComments.vue | 2 +
components/RespondAdd.vue | 109 ++++++++++++++
pages/details/[id].vue | 263 +++++++++++++++------------------
5 files changed, 350 insertions(+), 149 deletions(-)
create mode 100644 assets/img/plus-sign.svg
create mode 100644 components/RespondAdd.vue
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">셐</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">셐</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">셐</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">셐</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">셐</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>