no message
This commit is contained in:
A1300399510
357
components/DetailsArea.vue
Normal file
357
components/DetailsArea.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div class="floor-area flexacenter">
|
||||
<div class="floor-content flexacenter">
|
||||
<div class="floor-left flexacenter">
|
||||
<!-- <div class="item flexacenter" v-if="isBrowser" style="cursor: auto;">
|
||||
<img class="icon" src="@/assets/img/eye-icon-black.svg" />
|
||||
{{ info["views"] }}
|
||||
</div> -->
|
||||
<div class="item flexacenter" @click="handleLike">
|
||||
<img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
|
||||
<img class="icon" v-else src="@/assets/img/like-icon.png" />
|
||||
{{ info["likes"] || "" }}
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div class="item flexacenter" @click="handleCollect()">
|
||||
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
|
||||
<img class="icon" v-else src="@/assets/img/collect-icon.png" />
|
||||
{{ info["favs"] || "收藏" }}
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<ClientOnly>
|
||||
<el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
|
||||
<template #reference>
|
||||
<div class="item flexacenter" @click="handleShare"><img class="icon" src="@/assets/img/transmit-icon.png" />转发</div>
|
||||
</template>
|
||||
|
||||
<div class="transmit-box flexflex">
|
||||
<img class="cross-icon" @click="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
|
||||
<div class="transmit-left transmit-web">
|
||||
<div class="transmit-title">转发网页版</div>
|
||||
<div class="transmit-content">
|
||||
<div class="transmit-headline">{{ info["title"] }}</div>
|
||||
<div class="transmit-url">{{ getFullUrl() }}</div>
|
||||
</div>
|
||||
<div class="transmit-web-btn flexcenter" @click="copyText(`${info['subject']} + ${getFullUrl()}`)">复制链接</div>
|
||||
</div>
|
||||
<div class="transmit-right transmit-mini">
|
||||
<div class="transmit-title">转发小程序版</div>
|
||||
<div class="transmit-content flexcenter">
|
||||
<img class="transmit-mini-img" :src="qrcode" />
|
||||
<div class="flexcenter">
|
||||
<img class="give-sweep" src="@/assets/img/give-sweep.png" />
|
||||
扫码转发该问答
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<div class="floor-middle flexacenter coin-box" v-if="false">
|
||||
<div class="coin-content flexacenter flex1" @click="openCoinRankList">
|
||||
<img class="coin-icon" src="@/assets/img/coin-icon.png" />
|
||||
<div class="coin-text flex1 flexacenter">
|
||||
已获
|
||||
<div class="coin-value">{{ info.coins }}</div>
|
||||
个寄托币
|
||||
</div>
|
||||
</div>
|
||||
<div class="coin-btn flexcenter" @click="openCoinOperation()">给TA投币</div>
|
||||
</div>
|
||||
|
||||
<div class="floor-right flexacenter" @mouseenter="handleFloorRight(true)" @mouseleave="handleFloorRight(false)">
|
||||
手机查看该投票
|
||||
<img class="arrows-icon" src="@/assets/img/arrows-icon.png" />
|
||||
<el-popover placement="bottom" width="160px" trigger="hover" v-model:visible="floorRightState" popper-style="padding: 24px;border-radius: 18px;">
|
||||
<template #reference>
|
||||
<div class="QR-code-ball flexcenter">
|
||||
<img class="" src="@/assets/img/QR-code-icon.svg" />
|
||||
</div>
|
||||
</template>
|
||||
<img class="examine-code" :src="qrcode" />
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
let isNeedLogin = inject("isNeedLogin")
|
||||
const goLogin = inject("goLogin")
|
||||
|
||||
let info = inject("info")
|
||||
let islike = inject("islike")
|
||||
let iscollection = inject("iscollection")
|
||||
let qrcode = inject("qrcode")
|
||||
let token = inject("token")
|
||||
|
||||
// 获取完整 url
|
||||
const getFullUrl = () => {
|
||||
if (typeof window === "undefined") return
|
||||
return window.location.href
|
||||
}
|
||||
|
||||
// 复制
|
||||
let copyText = text => {
|
||||
if (navigator.clipboard) {
|
||||
copyText = () => {
|
||||
navigator.clipboard.writeText(text)
|
||||
ElMessage.success("复制成功")
|
||||
}
|
||||
} else {
|
||||
copyText = () => {
|
||||
var tempInput = document.createElement("input")
|
||||
tempInput.value = text
|
||||
document.body.appendChild(tempInput)
|
||||
tempInput.select()
|
||||
document.execCommand("copy")
|
||||
document.body.removeChild(tempInput)
|
||||
ElMessage.success("复制成功")
|
||||
}
|
||||
}
|
||||
copyText()
|
||||
}
|
||||
|
||||
let floorRightState = ref(false) // 右下角 的二维码显示状态
|
||||
|
||||
// 处理右下角 鼠标经过箭头 展示二维码
|
||||
const handleFloorRight = value => {
|
||||
floorRightState.value = value
|
||||
}
|
||||
|
||||
// 点击 收藏
|
||||
const handleCollect = () => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
// topHeadRef.value.count = {}
|
||||
|
||||
operateCollectHttp({ token: token.value }).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res["message"])
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
|
||||
info.value["favs"] = data["count"]
|
||||
iscollection.value = data["status"]
|
||||
|
||||
ElMessage.success(res["message"])
|
||||
})
|
||||
}
|
||||
|
||||
const isBrowser = computed(() => {
|
||||
return process.client // 使用 process.client 判断是否在浏览器环境下
|
||||
})
|
||||
|
||||
// 点赞
|
||||
const handleLike = () => {
|
||||
operateLikeHttp({ token: token.value }).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
|
||||
let data = res.data
|
||||
info.value["likes"] = data["count"]
|
||||
islike.value = data["status"]
|
||||
|
||||
ElMessage.success(res.message)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.floor-area {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
min-width: 1200px;
|
||||
height: 70px;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
|
||||
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
|
||||
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
|
||||
.floor-content {
|
||||
width: 1200px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.floor-left {
|
||||
.item {
|
||||
cursor: pointer;
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
margin-right: 50px;
|
||||
.icon {
|
||||
width: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.operate-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floor-middle {
|
||||
min-width: 300px;
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 150px;
|
||||
.coin-content {
|
||||
padding: 0 13px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.coin-icon {
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.coin-text {
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
.coin-value {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coin-btn {
|
||||
width: 97px;
|
||||
height: 40px;
|
||||
background-color: rgba(114, 219, 134, 1);
|
||||
border-radius: 150px;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.floor-right {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
|
||||
.arrows-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.QR-code-ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transmit-box {
|
||||
width: 628px;
|
||||
border-radius: 10px;
|
||||
justify-content: space-between;
|
||||
padding: 40px 35px 42px;
|
||||
// z-index: 3;
|
||||
cursor: auto;
|
||||
|
||||
.cross-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.transmit-title {
|
||||
font-weight: 650;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.transmit-content {
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.transmit-web {
|
||||
.transmit-content {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.transmit-headline {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.transmit-url {
|
||||
color: #aaaaaa;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.transmit-web-btn {
|
||||
width: 120px;
|
||||
height: 38px;
|
||||
background-color: rgba(114, 219, 134, 1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.transmit-mini {
|
||||
.transmit-content {
|
||||
flex-direction: column;
|
||||
padding: 22px 44px;
|
||||
|
||||
.transmit-mini-img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
color: #555555;
|
||||
// line-height: 22px;
|
||||
font-size: 13px;
|
||||
|
||||
.give-sweep {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.examine-code {
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
}
|
||||
</style>
|
||||
676
components/DetailsComments.vue
Normal file
676
components/DetailsComments.vue
Normal file
@@ -0,0 +1,676 @@
|
||||
<template>
|
||||
<div class="comment-title flexacenter">
|
||||
讨论
|
||||
<span class="comment-amount">{{ commentComments || "" }}</span>
|
||||
</div>
|
||||
<div class="post-comment flexacenter">
|
||||
<textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
|
||||
<div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-box" v-if="isEmptyState">
|
||||
<Empty hint="说说你的观点吧"></Empty>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="comment-list">
|
||||
<div class="comment-item flexflex" v-for="(item, index) in commentList" :key="item.id">
|
||||
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="item['popoverState']">
|
||||
<template #reference>
|
||||
<img class="comment-avatar" :src="item['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="avatar-box flexflex" v-if="item['uin']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username" @click="openAvatarPopover(index)">{{ item["nickname"] }}</div>
|
||||
<div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor']">作者</div>
|
||||
<img class="comments-title" v-if="item['groupid'] == 14" src="@/assets/img/title.png" />
|
||||
</div>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter" @click="report(item['token'])">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="commentLike(index)">
|
||||
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
|
||||
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-text" @click="openAnswerCommentsChild(index)">{{ item["content"] }}</div>
|
||||
<!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> -->
|
||||
<div class="comments-input-box flexacenter" v-if="item['childState']">
|
||||
<div class="comments-input flexflex">
|
||||
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div>
|
||||
</div>
|
||||
<img class="forkfork" @click="closeAnswerCommentsChild(index)" src="@/assets/img/cross-icon.png" />
|
||||
</div>
|
||||
<!-- 子评论 -->
|
||||
<div class="child-comments" v-if="item['child'].length > 0">
|
||||
<div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="ite.id">
|
||||
<!-- <img class="comment-avatar" :src="ite['avatar']" /> -->
|
||||
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false" v-model:visible="ite['popoverState']">
|
||||
<template #reference>
|
||||
<img class="comment-avatar" :src="ite['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="avatar-box flexflex" v-if="ite['uin']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username" @click="openAvatarPopover(index, i)">{{ ite["nickname"] }}</div>
|
||||
<div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor']">作者</div>
|
||||
<img class="comments-title" v-if="ite['groupid'] == 14" src="@/assets/img/title.png" />
|
||||
</div>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box" @click="commentLike(index, i)">
|
||||
<img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
|
||||
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-text" @click="openAnswerCommentsChild(index, i)">
|
||||
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
|
||||
{{ ite["content"] }}
|
||||
</div>
|
||||
<div class="comments-input-box flexacenter" v-if="ite['childState']">
|
||||
<div class="comments-input flexflex">
|
||||
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
|
||||
<div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
|
||||
</div>
|
||||
<img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 还有几个 -->
|
||||
<div class="comments-also flexacenter" v-if="item['childnum'] > item['child'].length" @click="alsoCommentsData(index)">
|
||||
<div class="">还有{{ item["childnum"] - item["child"].length }}条回复</div>
|
||||
<img class="also-icon" src="@/assets/img/arrow-circular-gray.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-end" v-if="commentPage == 0 && commentList.length != 0">· End ·</div>
|
||||
</template>
|
||||
|
||||
<Report v-if="reportAlertShow" :reportToken="reportToken"></Report>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus"
|
||||
let isNeedLogin = inject("isNeedLogin")
|
||||
const goLogin = inject("goLogin")
|
||||
const props = defineProps({
|
||||
token: String,
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.token,
|
||||
newV => {
|
||||
console.log(newV)
|
||||
getCommentList()
|
||||
},
|
||||
{
|
||||
immediate: false,
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
})
|
||||
|
||||
const sendMessage = inject("sendMessage")
|
||||
const TAHomePage = inject("TAHomePage")
|
||||
|
||||
let commentCount = ref(0)
|
||||
let commentComments = ref(0) // 所有的评论数
|
||||
let commentPage = ref(1)
|
||||
let commentList = ref([])
|
||||
let commentLoading = false
|
||||
let token = "4ZKbui89pS81jKgWpT41kLgcglLOJa8UQCmuucFl-cyzQKdjr0iEMTl4grDC04TSnq1vC90fZ2pVdeP6IUYPN2Y4Ng~~"
|
||||
let isEmptyState = ref(false) // 评论是否为空
|
||||
|
||||
// 获取详情评论数据
|
||||
const getCommentList = () => {
|
||||
if (commentPage.value == 0 || commentLoading) return
|
||||
commentLoading = true
|
||||
|
||||
commentListHttp({
|
||||
page: commentPage.value,
|
||||
childlimit: 1,
|
||||
limit: 10,
|
||||
token: props.token,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
|
||||
let data = res.data
|
||||
commentCount.value = data["count"]
|
||||
if (data["count"] == 0) isEmptyState.value = true
|
||||
else isEmptyState.value = false
|
||||
|
||||
commentList.value = commentList.value.concat(data["data"])
|
||||
|
||||
commentComments.value = data["comments"]
|
||||
|
||||
if (commentList.value.length == data["count"]) commentPage.value = 0
|
||||
else commentPage.value++
|
||||
})
|
||||
.finally(() => (commentLoading = false))
|
||||
}
|
||||
|
||||
// 评论点赞
|
||||
const commentLike = (index, i) => {
|
||||
const targetCommentList = [...commentList.value]
|
||||
|
||||
let token = ""
|
||||
if (i != null) token = targetCommentList[index]["child"][i].token
|
||||
else token = targetCommentList[index].token
|
||||
|
||||
detailsLikeCommentHttp({ token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
if (i != null) {
|
||||
targetCommentList[index]["child"][i].islike = data["status"]
|
||||
targetCommentList[index]["child"][i].likenum = data["likenum"]
|
||||
} else {
|
||||
targetCommentList[index].islike = data["status"]
|
||||
targetCommentList[index].likenum = data["likenum"]
|
||||
}
|
||||
|
||||
ElMessage.success(res.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 打开 回答-评论 的子评论
|
||||
const openAnswerCommentsChild = (index, i) => {
|
||||
closeAnswerCommentsChild()
|
||||
if (i == null) commentList.value[index]["childState"] = true
|
||||
else commentList.value[index]["child"][i]["childState"] = true
|
||||
commentInput.value = ""
|
||||
}
|
||||
|
||||
// 关闭 回答-评论 的子评论
|
||||
const closeAnswerCommentsChild = () => {
|
||||
commentInput.value = ""
|
||||
commentList.value.forEach(ele => {
|
||||
ele["childState"] = false
|
||||
if (ele["child"] && ele["child"].length != 0) ele["child"].forEach(el => (el["childState"] = false))
|
||||
})
|
||||
}
|
||||
|
||||
// 讨论的输入框
|
||||
let commentInputTop = ref("")
|
||||
let commentInput = ref("")
|
||||
|
||||
// 提交回答-评论
|
||||
const submitAnswerComments = (index, i) => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
const targetCommentList = [...commentList.value]
|
||||
let content = ""
|
||||
let parentid = null
|
||||
|
||||
if (index == null) content = commentInputTop.value
|
||||
else content = commentInput.value
|
||||
|
||||
if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
|
||||
else if (index != null) parentid = targetCommentList[index]["id"]
|
||||
|
||||
detailsSubmitommentListHttp({
|
||||
content,
|
||||
token,
|
||||
parentid,
|
||||
}).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
|
||||
if (i != null) {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
reply: {
|
||||
nickname: targetCommentList[index]["child"][i]["nickname"],
|
||||
},
|
||||
...data,
|
||||
}
|
||||
|
||||
targetCommentList[index]["child"].unshift(targetData)
|
||||
targetCommentList[index]["childnum"]++
|
||||
} else {
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
isauthor: 1,
|
||||
islike: 0,
|
||||
likenum: 0,
|
||||
...data,
|
||||
child: [],
|
||||
}
|
||||
if (index != null) {
|
||||
targetCommentList[index]["child"].unshift(targetData)
|
||||
targetCommentList[index]["childnum"]++
|
||||
} else {
|
||||
targetCommentList.unshift(targetData)
|
||||
commentCount.value++
|
||||
}
|
||||
}
|
||||
commentComments.value++
|
||||
commentList.value = targetCommentList
|
||||
|
||||
// 请求 输入框的数据
|
||||
commentInputTop.value = ""
|
||||
commentInput.value = ""
|
||||
isEmptyState.value = false // 取消有可能的 没有评论
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
ElMessage.success(res.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取剩下的子评论
|
||||
const alsoCommentsData = (index, ind) => {
|
||||
let targetCommentItem = { ...commentList.value[index] }
|
||||
const token = targetCommentItem["token"]
|
||||
const parentid = targetCommentItem["id"]
|
||||
let page = targetCommentItem["childPage"] ?? 1
|
||||
|
||||
detailsChildCommentListHttp({
|
||||
childlimit: 1,
|
||||
limit: 10,
|
||||
page,
|
||||
parentid,
|
||||
token,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
let childData = targetCommentItem.child.concat(data.data)
|
||||
|
||||
const filteredData = childData.filter((obj, index, self) => {
|
||||
// 检查当前对象在数组中的第一个索引是否与当前索引相等
|
||||
return self.findIndex(item => item.id == obj.id) == index
|
||||
})
|
||||
|
||||
targetCommentItem.child = filteredData
|
||||
targetCommentItem["childnum"] = data.count
|
||||
|
||||
if (targetCommentItem.child.length == data["count"]) page = 0
|
||||
else page++
|
||||
|
||||
targetCommentItem["childPage"] = page
|
||||
|
||||
commentList.value[index] = targetCommentItem
|
||||
})
|
||||
}
|
||||
|
||||
let reportAlertShow = ref(false)
|
||||
let reportToken = ref("")
|
||||
|
||||
// 点击打开举报
|
||||
const report = token => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
reportToken.value = token
|
||||
reportAlertShow.value = true
|
||||
}
|
||||
|
||||
// 打开评论的 信息框
|
||||
const openAvatarPopover = (index, i) => {
|
||||
if (i != null) commentList.value[index]["child"][i]["popoverState"] = true
|
||||
else commentList.value[index]["popoverState"] = true
|
||||
}
|
||||
|
||||
// 监听滚动到底部
|
||||
const handleScroll = () => {
|
||||
// return
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
|
||||
const scrollHeight = document.documentElement.scrollHeight
|
||||
const clientHeight = document.documentElement.clientHeight
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight - 40) getCommentList()
|
||||
}
|
||||
|
||||
provide("reportAlertShow", reportAlertShow)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.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 {
|
||||
// width: 100%;
|
||||
height: 60px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 30px;
|
||||
margin-right: 30px;
|
||||
|
||||
.post-input {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
resize: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.post-ok {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-right: 30px;
|
||||
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: 8px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-input-box {
|
||||
margin-top: 13px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.comments-input {
|
||||
// width: 519px;
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::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;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
padding: 11px 16px;
|
||||
border-radius: 7px 0 0 7px;
|
||||
}
|
||||
|
||||
.comments-btn {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
background-color: #31d72e;
|
||||
border-radius: 0 7px 7px 0;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.forkfork {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
53
components/Empty.vue
Normal file
53
components/Empty.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="empty-box-list flexcenter">
|
||||
<div class="dot-list flexacenter">
|
||||
<img class="item" src="@/assets/img/dot-yellow.svg" />
|
||||
<img class="item" src="@/assets/img/dot-yellow.svg" />
|
||||
<img class="item" src="@/assets/img/dot-yellow.svg" />
|
||||
<img class="item" src="@/assets/img/dot-gray.svg" />
|
||||
<img class="item" src="@/assets/img/dot-gray.svg" />
|
||||
<img class="item" src="@/assets/img/dot-gray.svg" />
|
||||
</div>
|
||||
<img class="empty-icon" src="@/assets/img/empty-icon.svg" />
|
||||
<div class="empty-hint">{{ hint || "暂无内容" }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let props = defineProps({
|
||||
hint: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.empty-box-list {
|
||||
// width: 690px;
|
||||
// height: 490px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 6px;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
|
||||
.dot-list .item {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: #7f7f7f;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
438
components/MyPopup.vue
Normal file
438
components/MyPopup.vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<el-dialog v-model="show" width="750px" align-center class="dialog-box">
|
||||
<div class="box flexflex">
|
||||
<img class="cross" src="@/assets/img/cross-icon.png" alt @click="closeDialog()" />
|
||||
<div class="tab-list flexcenter">
|
||||
<div class="tab-item flexcenter" :class="{ pitch: MyPopupState == item.type }" v-for="item in tabList" :key="item.type" @click="cutMy(item.type)">
|
||||
{{ item.name }}
|
||||
<div class="value">{{ count[item.type] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-box flexcenter" v-loading="true" v-if="(MyPopupState == 'collect' && collectLoading) || (MyPopupState == 'mj' && publisloading)"></div>
|
||||
<div class="empty-box flexcenter" v-else-if="showList.length == 0">
|
||||
<Empty></Empty>
|
||||
</div>
|
||||
<el-scrollbar v-else height="479px">
|
||||
<div class="content" @scroll="handleListScroll">
|
||||
<div class="item flexflex" v-for="(item, index) in showList" :key="index" @click="goDetails(item['uniqid'] || item?.data?.uniqid)">
|
||||
<div class="left flexflex">
|
||||
<div class="name">{{ item.title }}</div>
|
||||
<div class="message">{{ item.message }}</div>
|
||||
<div class="data">
|
||||
30人参与 <i>|</i> 投票已结束
|
||||
<span><i>|</i> 我已投：不懂，围观学习</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operate-area flexacenter">
|
||||
<img class="delete-icon" v-if="MyPopupState == 'collect'" @click.stop="cancelCollection(item['token'], index)" src="@/assets/img/delete-icon.svg" />
|
||||
<div class="anonymous-box flexacenter" v-else @click.stop="openAnonymousState(index)">
|
||||
<div class="text">{{ item["anonymous"] == 1 ? "匿名" : "公开" }}</div>
|
||||
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
|
||||
<div class="state-popup flexflex" v-if="item['anonymousState']" @click.stop="">
|
||||
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index, 0)">
|
||||
<div class>公开发表</div>
|
||||
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
|
||||
</div>
|
||||
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index, 1)">
|
||||
<div class>匿名发表</div>
|
||||
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<script setup>
|
||||
let props = defineProps({
|
||||
// MyPopupState: String, // collect mj
|
||||
count: Object,
|
||||
})
|
||||
|
||||
let show = ref(false)
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
let MyPopupState = ref("") // collect participation sponsor
|
||||
|
||||
onMounted(() => {
|
||||
// if (MyPopupState.value == "collect") getCollect();
|
||||
// else if (MyPopupState.value == "mj") getPublish();
|
||||
})
|
||||
|
||||
const tabList = [
|
||||
{ name: "我的收藏", type: "collect" },
|
||||
{ name: "我参与的投票", type: "participation" },
|
||||
{ name: "我发起的投票", type: "sponsor" },
|
||||
]
|
||||
|
||||
// 展示的 列表数据
|
||||
let showList = ref([])
|
||||
|
||||
let collectList = []
|
||||
let collectPage = 1
|
||||
let collectLoading = ref(false)
|
||||
let collectCount = ref(0)
|
||||
|
||||
const getCollect = () => {
|
||||
if (collectPage == 0 || collectLoading.value) return
|
||||
collectLoading.value = true
|
||||
MyUserCollectHttp({ page: collectPage })
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
collectList = collectList.concat(data.data)
|
||||
showList.value = collectList
|
||||
|
||||
if (collectList.length < data["count"]) collectPage++
|
||||
else collectPage = 0
|
||||
|
||||
collectCount.value = data["count"]
|
||||
|
||||
// MyPopupState.value = "collect"
|
||||
// show.value = true
|
||||
})
|
||||
.finally(() => (collectLoading.value = false))
|
||||
}
|
||||
|
||||
let publishList = []
|
||||
let publisPage = 1
|
||||
let publisloading = ref(false)
|
||||
const getPublish = () => {
|
||||
return
|
||||
if (publisPage == 0 && !publisloading.value) return
|
||||
|
||||
publisloading.value = true
|
||||
MyUserPublishHttp({ limit: 4, page: publisPage })
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
publishList = publishList.concat(data.data)
|
||||
if (publishList.length < data["count"]) publisPage++
|
||||
else publisPage = 0
|
||||
showList.value = publishList
|
||||
|
||||
// MyPopupState.value = "mj"
|
||||
// show.value = true
|
||||
})
|
||||
.finally(() => (publisloading.value = false))
|
||||
}
|
||||
|
||||
// 切换 isEmpty 是否清空收藏数据， 因为不确定用户是否有新收藏
|
||||
const cutMy = (key, isEmpty) => {
|
||||
if (isEmpty) {
|
||||
collectList = []
|
||||
collectPage = 1
|
||||
collectCount.value = 0
|
||||
}
|
||||
|
||||
if (key == "collect" && collectList.length == 0) getCollect()
|
||||
else if (key == "mj" && publishList.length == 0) getPublish()
|
||||
|
||||
if (key == "collect") showList.value = collectList
|
||||
else if (key == "mj") showList.value = publishList
|
||||
|
||||
MyPopupState.value = key
|
||||
|
||||
if (MyPopupState.value) show.value = true
|
||||
}
|
||||
|
||||
// 打开匿名弹窗
|
||||
const openAnonymousState = index => {
|
||||
publishList.forEach(element => {
|
||||
element["anonymousState"] = false
|
||||
})
|
||||
publishList[index]["anonymousState"] = true
|
||||
showList.value = [...publishList]
|
||||
}
|
||||
|
||||
// 关闭全部匿名弹窗
|
||||
const closeAllAnonymousState = () => {
|
||||
publishList.forEach(element => {
|
||||
element["anonymousState"] = false
|
||||
})
|
||||
showList.value = [...publishList]
|
||||
}
|
||||
// 修改匿名状态
|
||||
const handleAnonymousState = (token, index, anonymous) => {
|
||||
changeAnonymousHttp({ token, anonymous }).then(res => {
|
||||
if (res.code != 200) return
|
||||
|
||||
publishList[index]["anonymous"] = anonymous
|
||||
showList.value = [...publishList]
|
||||
closeAllAnonymousState()
|
||||
|
||||
ElMessage.success(res.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 详情页滚动事件
|
||||
const handleListScroll = e => {
|
||||
const el = e.target
|
||||
// 判断滚动到底部
|
||||
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
|
||||
if (MyPopupState.value == "collect") getCollect()
|
||||
if (MyPopupState.value == "mj") getPublish()
|
||||
}
|
||||
|
||||
let clearAllData = inject("clearAllData") || null
|
||||
let getDetails = inject("getDetails") || null
|
||||
|
||||
// 打开详情页
|
||||
const goDetails = uniqid => {
|
||||
return
|
||||
let path = route["path"] || ""
|
||||
if (path.indexOf("/details/") != -1) {
|
||||
clearAllData()
|
||||
nextTick(() => getDetails())
|
||||
}
|
||||
|
||||
// router.replace(`/details/${uniqid}`)
|
||||
goToURL(`/details/${uniqid}`, false)
|
||||
show.value = false
|
||||
MyPopupState.value = ""
|
||||
}
|
||||
|
||||
//暴露state和play方法
|
||||
defineExpose({
|
||||
cutMy,
|
||||
})
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
show.value = false
|
||||
}
|
||||
|
||||
// const emit = defineEmits(["cutMy"]);
|
||||
|
||||
// 处理取消收藏
|
||||
const cancelCollection = (token, index) => {
|
||||
MyUserDeleteCollectHttp({ token }).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
|
||||
collectList.splice(index, 1)
|
||||
collectCount.value--
|
||||
showList.value = [...collectList]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.popup-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.box {
|
||||
width: 750px;
|
||||
height: 606px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 10px;
|
||||
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
|
||||
flex-direction: column;
|
||||
// padding: 30px 30px 46px;
|
||||
padding: 30px 8px 46px;
|
||||
position: relative;
|
||||
|
||||
.cross {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
font-size: 16px;
|
||||
margin-bottom: 29px;
|
||||
.tab-item {
|
||||
color: #aaaaaa;
|
||||
padding: 0 22px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-of-type)::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: #d7d7d7;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.value {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.pitch {
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
.value {
|
||||
color: #555;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
width: calc(100% - 44px);
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 6px;
|
||||
margin: 0 22px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: #000000;
|
||||
overflow: auto;
|
||||
// padding-right: 13px;
|
||||
// padding-bottom: 35px;
|
||||
padding: 22px 22px 35px;
|
||||
.item {
|
||||
// flex-direction: column;
|
||||
border-bottom: 1px dotted #ebebeb;
|
||||
padding-bottom: 20px;
|
||||
cursor: pointer;
|
||||
margin-left: 22px;
|
||||
margin-bottom: 21px;
|
||||
.left {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -22px;
|
||||
width: 5px;
|
||||
height: 12px;
|
||||
background-color: rgba(49, 215, 46, 1);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.name {
|
||||
// font-weight: 650;
|
||||
color: #000000;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.message {
|
||||
color: #7f7f7f;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.data {
|
||||
color: #aaaaaa;
|
||||
line-height: 22px;
|
||||
font-size: 12px;
|
||||
i {
|
||||
margin: 0 5px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.operate-area {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.delete-icon {
|
||||
width: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.anonymous-box {
|
||||
.text {
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
}
|
||||
.arrow-icon {
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
.state-popup {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
width: 140px;
|
||||
height: 101px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 10px;
|
||||
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
|
||||
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
|
||||
flex-direction: column;
|
||||
|
||||
.state-popup-item {
|
||||
justify-content: space-between;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
color: #72db86;
|
||||
.state-popup-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #e3e3e3;
|
||||
}
|
||||
|
||||
.state-popup-icon {
|
||||
width: 11px;
|
||||
height: 8px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.dialog-box {
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
border-radius: 10px;
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
249
components/Report.vue
Normal file
249
components/Report.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<!-- 举报 -->
|
||||
<div class="alert-form">
|
||||
<div class="comments reports">
|
||||
<div class="head">
|
||||
<span style="display: flex; align-items: center;"> <img style="width: 25px; margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png" />举报投诉 </span>
|
||||
<div class="close icon-close iconfont" @click="alertShow = false"></div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="radio-area flexacenter">
|
||||
<div class="radio-area-item flexacenter" :class="{ pitch: checkList.includes(s) }" v-for="(s, i) in reasonList" :key="i" @click="selectRadio(s)">
|
||||
<div class="radio-area-frame"></div>
|
||||
{{ s }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
|
||||
<div class="text-num">{{ 200 - alertText.length }}</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button type="button" @click="cancel()">取消</button>
|
||||
<button type="submit" @click="alertSubmit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
const props = defineProps(["reportToken"])
|
||||
const reasonList = ["广告", "辱骂", "重复发送", "不良信息", "其他"]
|
||||
let reportAlertShow = inject("reportAlertShow")
|
||||
|
||||
let checkList = ref([])
|
||||
let alertShow = ref(false)
|
||||
let alertText = ref("")
|
||||
|
||||
const selectRadio = value => {
|
||||
const index = checkList.value.indexOf(value)
|
||||
if (index === -1) checkList.value.push(value)
|
||||
else checkList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 举报提交
|
||||
const alertSubmit = () => {
|
||||
if (checkList.value.length == 0) {
|
||||
ElMessage.error("请选择举报类型")
|
||||
return
|
||||
}
|
||||
checkList.value.push(alertText.value)
|
||||
reportAlertShow.value = false
|
||||
commentReportHttp({
|
||||
message: checkList.value,
|
||||
token: props.reportToken,
|
||||
}).then(res => {
|
||||
checkList.value = []
|
||||
reportAlertShow.value = false
|
||||
ElMessage({
|
||||
message: res.message || "举报成功",
|
||||
type: "success",
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 取消
|
||||
const cancel = () => (reportAlertShow.value = false)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.alert-form {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
.reports {
|
||||
height: 440px;
|
||||
.radio-area {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.radio-area-item {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
.radio-area-frame {
|
||||
background-color: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
|
||||
&::after {
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-area-frame {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
&::after {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #fff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(45deg) scaleY(0);
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
|
||||
transition: -webkit-transform 0.15s ease-in 0.05s;
|
||||
transition: transform 0.15s ease-in 0.05s;
|
||||
transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.comments {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 740px;
|
||||
height: 440px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px 8px 6px 6px;
|
||||
.text-box {
|
||||
position: relative;
|
||||
}
|
||||
.text-num {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 34px 30px 40px;
|
||||
textarea {
|
||||
height: 172px;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
padding: 18px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #f7f7f7;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
padding: 0 18px 0 30px;
|
||||
display: flex;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.close {
|
||||
color: #b3b3b3;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
button[type="button"] {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px #999999 solid;
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
width: 128px;
|
||||
height: 38px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button[type="submit"] {
|
||||
background-color: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-focus .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__inner:hover {
|
||||
border-color: #50e3c2;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #50e3c2;
|
||||
}
|
||||
</style>
|
||||
273
components/top-head.vue
Normal file
273
components/top-head.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<section class="header flexacenter">
|
||||
<div class="header-box flexacenter">
|
||||
<a href="/index.html"><img class="logo-icon" src="@/assets/img/logo-icon.png" /></a>
|
||||
<div class="header-right flexacenter">
|
||||
<div class="search-box flexacenter">
|
||||
<input class="flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
|
||||
<img class="search-icon" src="@/assets/img/search-icon.png" @click="searchClick" />
|
||||
<div class="history-box" v-if="historicalSearchState">
|
||||
<div class="history-title">历史搜索</div>
|
||||
<div class="history-list">
|
||||
<div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="my-btn-list flexacenter">
|
||||
<div class="my-btn-item flexcenter" @click="handleUser('collect')">我的收藏</div>
|
||||
</div> -->
|
||||
<div class="my-btn-list flexacenter">
|
||||
<div class="my-btn-item flexcenter" @click="handleUser('collect')">我的收藏</div>
|
||||
<div class="my-btn-item flexcenter" @click="handleUser('participation')">我参与的投票</div>
|
||||
<div class="my-btn-item flexcenter" @click="handleUser('sponsor')">我发起的投票</div>
|
||||
</div>
|
||||
<div class="sponsor-btn flexcenter" @click="goPublish">
|
||||
<img class="add-bj" src="@/assets/img/add-bj.svg" />
|
||||
<img class="add-icon" src="@/assets/img/add-icon.svg" />
|
||||
发布面经
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MyPopup ref="MyPopupRef" :count="count"></MyPopup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
let isNeedLogin = inject("isNeedLogin")
|
||||
const goLogin = inject("goLogin")
|
||||
|
||||
let keyword = ref("")
|
||||
|
||||
onMounted(() => {
|
||||
getHistoricalSearchList()
|
||||
keyword.value = route.query["keyword"]
|
||||
})
|
||||
let count = ref({})
|
||||
|
||||
const getUser = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
MyUserInfoHttp().then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
count.value = data["count"]
|
||||
resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
keyword.value = route.query["keyword"]
|
||||
})
|
||||
|
||||
// 点击跳转首页
|
||||
// const goIndex = () => {
|
||||
// // router.push(`/index.html`)
|
||||
// }
|
||||
// 点击发布
|
||||
const goPublish = () => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
// router.push(`/publish`)
|
||||
goToURL(`/publish`)
|
||||
}
|
||||
|
||||
// 获取历史记录方法
|
||||
const getHistoricalSearchList = () => {
|
||||
const list = localStorage.getItem("historical-Search")
|
||||
|
||||
if (list) historicalSearchList.value = JSON.parse(list) || []
|
||||
else historicalSearchList.value = []
|
||||
}
|
||||
|
||||
// 存入历史记录 随便去重 和 限制长度 方法
|
||||
const setHistoricalSearchList = () => {
|
||||
if (!keyword.value) return
|
||||
historicalSearchList.value.unshift(keyword.value)
|
||||
historicalSearchList.value = [...new Set(historicalSearchList.value)]
|
||||
historicalSearchList.value = historicalSearchList.value.slice(0, 10)
|
||||
|
||||
localStorage.setItem("historical-Search", JSON.stringify(historicalSearchList.value))
|
||||
}
|
||||
|
||||
// 搜索点击事件
|
||||
const searchClick = () => {
|
||||
router.push(`/index.html?keyword=${keyword.value || ""}`)
|
||||
// goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
|
||||
setHistoricalSearchList()
|
||||
searchBlur()
|
||||
}
|
||||
|
||||
// 搜索获取焦点
|
||||
const searchFocus = () => {
|
||||
if (historicalSearchList.value.length == 0) return
|
||||
historicalSearchState.value = true
|
||||
}
|
||||
|
||||
// 搜索失去焦点
|
||||
const searchBlur = () => {
|
||||
setTimeout(() => (historicalSearchState.value = false), 300)
|
||||
}
|
||||
|
||||
// 点击历史记录 item
|
||||
const handleClickHistoricalItem = value => {
|
||||
keyword.value = value
|
||||
searchClick()
|
||||
}
|
||||
|
||||
let historicalSearchState = ref(false) // 历史记录弹窗状态
|
||||
let historicalSearchList = ref([]) // 历史记录数据
|
||||
|
||||
let MyPopupRef = ref(null)
|
||||
// 点击我的获取消息
|
||||
const handleUser = async key => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
if (Object.keys(count.value).length === 0) {
|
||||
await getUser()
|
||||
MyPopupRef.value.cutMy(key, true)
|
||||
} else MyPopupRef.value.cutMy(key)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
count,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.header {
|
||||
min-width: 1200px;
|
||||
padding-top: 42px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.header-box {
|
||||
margin: 0 auto;
|
||||
width: 1200px;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo-icon {
|
||||
width: 71px;
|
||||
height: 38px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.search-box {
|
||||
width: 320px;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 104px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
border-radius: 104px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-box {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
width: 320px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 10px;
|
||||
padding-top: 15px;
|
||||
z-index: 2;
|
||||
padding-bottom: 14px;
|
||||
|
||||
.history-title {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
padding-left: 16px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
.history-item {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-btn-list {
|
||||
margin-left: 20px;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
padding: 0 7px;
|
||||
color: #555555;
|
||||
|
||||
.my-btn-item {
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-of-type)::after {
|
||||
content: "|";
|
||||
color: #d7d7d7;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-btn {
|
||||
width: 130px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.add-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.add-bj {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user