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

no message

Browse Source
This commit is contained in:
A1300399510
2024-01-23 19:10:57 +08:00
parent d93de9dfe2
commit 809d1d317a
10 changed files with 202 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/DetailsArea.vue
View File

@@ -1,29 +1,30 @@
<template>
<div class="floor-area flexacenter">
<div class="floor-area flexacenter" :class="{ 'show': isLoaded }">
<div class="floor-content flexacenter">
<!-- {{ isLoaded }} -->
<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" />
<div class="item flexacenter" style="cursor: auto;">
<img class="icon" src="@/assets/img/eye-icon.svg" />
{{ info["views"] }}
</div> -->
</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>
<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>
<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>
<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>
<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" />
<img class="cross-icon" @click.stop="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
<div class="transmit-left transmit-web">
<div class="transmit-title">转发网页版</div>
<div class="transmit-content">
@@ -86,6 +87,7 @@ let iscollection = inject("iscollection")
let qrcode = inject("qrcode")
let token = inject("token")
const topHeadRef = inject("topHeadRef")
const isLoaded = inject("isLoaded")
// 获取完整 url
const getFullUrl = () => {
@@ -159,7 +161,7 @@ const handleLike = () => {
ElMessage.error("不可取消点赞")
return
}
operateLikeHttp({ token: token.value }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
@@ -173,6 +175,9 @@ const handleLike = () => {
ElMessage.success(res.message)
})
}
// 底部转发弹窗显示 状态
let transmitBoxState = ref(false)
</script>
<style scoped lang="less">
@@ -180,6 +185,7 @@ const handleLike = () => {
position: fixed;
left: 0;
bottom: 0;
// bottom: 50%;
width: 100vw;
min-width: 1200px;
height: 70px;
@@ -188,6 +194,13 @@ const handleLike = () => {
-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);
display: none;
&.show {
display: flex;
animation: animafloor 1s forwards;
animation-timing-function: cubic-bezier(0.98, -0.2, 0.55, 0.97); /* 先快后慢的时间曲线 */
animation-fill-mode: both;
}
.floor-content {
width: 1200px;
height: 100%;
@@ -204,8 +217,16 @@ const handleLike = () => {
.icon {
width: 16px;
margin-right: 5px;
// animation: anima 1s forwards;
}
// :nth-of-type(1) {
// animation-delay: 1s;
// }
// :nth-of-type(2) {
// animation-delay: 2s;
// }
&.operate-item {
position: relative;
display: flex;
@@ -363,4 +384,36 @@ const handleLike = () => {
width: 113px;
height: 113px;
}
@keyframes anima {
0% {
width: 16px;
}
40% {
width: 20px;
}
100% {
width: 16px;
}
}
@keyframes animafloor {
0% {
// left: -100%;
// opacity: 0;
transform: translate3d(-100%, 0, 0);
}
90% {
left: 20px;
}
100% {
// left: 0;
// opacity: 1;
transform: translateZ(0);
}
}
</style>