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-24 17:20:53 +08:00
parent 809d1d317a
commit 89020a40b7
7 changed files with 283 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
components/DetailsArea.vue
View File

@@ -1,7 +1,18 @@
<template>
<div class="floor-area flexacenter" :class="{ 'show': isLoaded }">
<div class="floor-content flexacenter">
<!-- {{ isLoaded }} -->
<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 class="floor-left flexacenter">
<div class="item flexacenter" style="cursor: auto;">
<img class="icon" src="@/assets/img/eye-icon.svg" />
@@ -47,29 +58,12 @@
</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 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="说说你的想法或疑问…" />
<div class="comment-btn flexcenter" @click="floorCommentBtn('input')">
<img class="comment-btn-icon" src="@/assets/img/arrow-white.svg" />
</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>
@@ -80,6 +74,7 @@ import { ElMessage } from "element-plus"
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
const userInfoWin = inject("userInfoWin")
let info = inject("info")
let islike = inject("islike")
@@ -178,6 +173,9 @@ const handleLike = () => {
// 底部转发弹窗显示 状态
let transmitBoxState = ref(false)
const floorCommentInput = inject("floorCommentInput")
const floorCommentBtn = inject("floorCommentBtn")
</script>
<style scoped lang="less">
@@ -190,7 +188,9 @@ let transmitBoxState = ref(false)
min-width: 1200px;
height: 70px;
z-index: 1;
background-color: rgba(255, 255, 255, 1);
background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
-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);
@@ -209,6 +209,7 @@ let transmitBoxState = ref(false)
display: flex;
justify-content: space-between;
.floor-left {
margin-left: 30px;
.item {
cursor: pointer;
color: #aaaaaa;
@@ -235,45 +236,6 @@ let transmitBoxState = ref(false)
}
}
.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;
@@ -293,6 +255,40 @@ let transmitBoxState = ref(false)
cursor: pointer;
}
}
.floor-middle {
width: 471px;
height: 40px;
border-radius: 152px;
background-color: #fff;
border: 1px solid rgba(215, 215, 215, 1);
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: 6px;
}
.comment-input {
height: 100%;
border: none;
outline: none;
padding: 0 12px;
font-size: 14px;
}
.comment-btn {
width: 40px;
height: 40px;
background-color: rgba(172, 183, 46, 1);
border-radius: 20px;
cursor: pointer;
.comment-btn-icon {
width: 14px;
height: 15px;
}
}
}
}
}
@@ -385,24 +381,8 @@ let transmitBoxState = ref(false)
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);
}
@@ -411,8 +391,6 @@ let transmitBoxState = ref(false)
}
100% {
// left: 0;
// opacity: 1;
transform: translateZ(0);
}
}