A1300399510/PC-mj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改回应图标和增加回应解锁弹窗

Browse Source
This commit is contained in:
A1300399510
2024-07-25 19:05:31 +08:00
parent 5030abc6a5
commit 3b766d87af
54 changed files with 514 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
pages/details/[id].vue
View File

@@ -126,10 +126,23 @@
<div class="details-value describe" :class="{ 'unlock-unlock': !isdisplay }" v-if="info['message']">
<div v-html="info['message']"></div>
<div class="unlock-mask flexflex" style="width: 693px;">
<div class="">作者设置了浏览限制</div>
<div class="flexacenter">
<div class="emphasis" @click="loginJudgment()">“回复/回应”</div>
后即可查看完整内容
<div class="unlock-text-box flexcenter" @click="cutRespondState(true)">
<div class="unlock-text">作者设置了浏览限制</div>
<div class="unlock-text flexacenter">
<div class="emphasis" @click="loginJudgment()">“评论/回应”</div>
后即可查看完整内容
</div>
<template v-if="respondListState">
<div class="respond-list-mask" @click.stop="cutRespondState(false)"></div>
<div class="respond-list-box" @click.stop="">
<div class="respond-list-title">选择你的回应：</div>
<div class="respond-list">
<template v-for="item in riposteoptions" :key="item">
<div class="respond-item" v-for="(item, key) in item.data" :key="key" v-html="jointriposte(key)" @click.stop="selectEomjiPop(key, true)"></div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
@@ -166,7 +179,7 @@
<!-- 回应 -->
<div class="respond-area">
<div class="respond-title flexacenter">
<div class="respond-title flexacenter" ref="respondtitle">
回应
<div class="value">{{ ripostecount.total || 0 }}</div>
<div v-if="ripostecount.user > 0" class="respond-list-btn" @click="openPopList">
@@ -1490,7 +1503,7 @@ const selectEomji = item => {
provide("selectEomji", selectEomji)
// 选中 在 Emoji 弹窗中 选择
const selectEomjiPop = key => {
const selectEomjiPop = (key,isroll) => {
if (isNeedLogin.value) {
goLogin()
return
@@ -1507,7 +1520,12 @@ const selectEomjiPop = key => {
ElMessage.error(res.message)
return
}
if (isroll) {
rollRiposte()
}
let data = res.data
respondListState.value = false
handleEmojiData(data)
})
.finally(() => {
@@ -1632,6 +1650,28 @@ const selectEomjiListPop = key => {
ripostelist.value = emojiList
})
}
let respondListState = ref(false)
// 切换限制回应的弹窗
const cutRespondState = value => {
respondListState.value = value
}
const respondtitle = ref(null)
const rollRiposte = () => {
const respondBox = respondtitle.value
// 获取元素的位置信息
const rect = respondBox.getBoundingClientRect()
// 计算节点距离浏览器视口顶部的距离
const distanceToViewportTop = rect.top + window.scrollY - 60
window.scrollTo({
top: distanceToViewportTop,
behavior: "smooth",
})
}
</script>
<style lang="less" scoped>
@@ -2030,9 +2070,8 @@ const selectEomjiListPop = key => {
}
&.unlock-unlock {
overflow: hidden;
// overflow: hidden;
height: 180px;
// cursor: pointer;
.unlock-mask {
position: absolute;
@@ -2049,9 +2088,14 @@ const selectEomjiListPop = key => {
padding-bottom: 38px;
line-height: normal;
display: flex;
.unlock-text-box {
flex-direction: column;
position: relative;
}
> div {
margin-top: 7px;
.unlock-text {
padding-top: 7px;
cursor: pointer;
}
.emphasis {
@@ -3184,4 +3228,66 @@ const selectEomjiListPop = key => {
}
}
}
.respond-list-box {
background: #f6f6f6;
border: 1px solid #ebebeb;
border-radius: 10px;
position: absolute;
top: 84px;
z-index: 1;
&::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;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
z-index: 3000;
}
}
.respond-list-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
</style>
<style lang="less">
.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>